@homebound/beam 4.11.5 → 4.12.1

package/dist/index.js

@@ -149,6 +149,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() {
@@ -471,46 +526,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"`. */
@@ -546,34 +576,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"`. */
@@ -773,6 +792,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() {
@@ -843,6 +906,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() {
@@ -1308,6 +1380,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);
@@ -1659,6 +1735,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() {
@@ -1684,6 +1774,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() {
@@ -1726,6 +1820,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() {
@@ -1787,6 +1897,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() {
@@ -1812,6 +1935,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) {
@@ -2727,6 +3064,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() {
@@ -3441,6 +3786,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() {
@@ -3500,6 +3858,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) {
@@ -3541,37 +3912,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"`. */
@@ -3659,6 +4002,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() {
@@ -4001,6 +4376,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() {
@@ -4012,6 +4428,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() {
@@ -5257,8 +5734,8 @@ function Chips(props) {
     ...{
       display: "df",
       alignItems: "aifs",
-      gap: "gap1",
-      whiteSpace: "ws_normal"
+      gap: "g_1",
+      whiteSpace: "wsn"
     },
     ...wrap !== false ? {
       flexWrap: "fww"
@@ -5428,12 +5905,14 @@ function useVirtualizedScrollParent() {
 // src/components/Loader.tsx
 import { trussProps as trussProps7, maybeCssVar as maybeCssVar6 } from "@homebound/truss/runtime";
 import { jsx as jsx8 } from "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__ */ jsx8("div", { "aria-label": "Loading", ...trussProps7({
+  const tid = useTestIds(props, "loader");
+  return /* @__PURE__ */ jsx8("div", { "aria-label": "Loading", ...tid, ...trussProps7({
     borderRadius: "br100",
     borderStyle: "bss",
     borderWidth: ["bw_var", {
@@ -5626,15 +6105,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)"
   }]
@@ -5961,6 +6440,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.
@@ -6026,7 +6508,7 @@ function ExpandableHeader(props) {
     lineHeight: "lh_16px",
     alignItems: "aic",
     justifyContent: "jcsb",
-    gap: "gap2",
+    gap: "g_2",
     paddingLeft: "pl1",
     paddingRight: "pr1",
     height: "h_32px",
@@ -6120,9 +6602,9 @@ function SortHeader(props) {
       } : {}
     },
     ...{
-      visibility: "vis_hidden",
+      visibility: "vh",
       ...isHovered || sorted !== void 0 ? {
-        visibility: "vis_visible"
+        visibility: "vv"
       } : {}
     }
   }, inc: 2, ...tid.icon }) });
@@ -6131,7 +6613,7 @@ function SortHeader(props) {
       display: "df",
       alignItems: "aic",
       height: "h100",
-      cursor: "cursorPointer",
+      cursor: "cur_pointer",
       userSelect: "usn"
     },
     ...xss
@@ -6571,7 +7053,7 @@ function DocumentScrollToTopButton({
       transform: ["transform_var", {
         "--transform": maybeCssVar10(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
       }],
-      pointerEvents: "pe_none"
+      pointerEvents: "pen"
     }
   }), children: /* @__PURE__ */ jsx15(ContrastScope, { children: /* @__PURE__ */ jsx15(IconButton, { icon: "arrowUp", disabled: !visible, variant: "outline", label: "Scroll to top", onClick: scrollToTop, ...tid }) }) });
 }
@@ -6729,8 +7211,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", {
@@ -7734,14 +8216,14 @@ function CheckboxBase(props) {
     placement: "top",
     children: /* @__PURE__ */ jsxs11(Tag2, { ...trussProps15({
       display: "df",
-      cursor: "cursorPointer",
+      cursor: "cur_pointer",
       position: "relative",
-      width: "w_max_content",
+      width: "wmaxc",
       maxWidth: ["maxw_var", {
         "--maxWidth": maybeCssVar13(maxWidth)
       }],
       ...isDisabled ? {
-        cursor: "cursorNotAllowed"
+        cursor: "cur_not_allowed"
       } : {}
     }), "aria-label": label, children: [
       /* @__PURE__ */ jsx22(VisuallyHidden2, { children: /* @__PURE__ */ jsx22("input", { ref, ...mergeProps4(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }),
@@ -8283,7 +8765,7 @@ function dragHandleColumn(columnDef) {
         content: row.draggable ? /* @__PURE__ */ jsx25("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__ */ jsx25(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__ */ jsx25(Icon, { icon: "drag", inc: 2.25 }) }) : void 0
       };
     };
   });
@@ -9173,6 +9655,10 @@ var tableRowPrintBreakCss = {
   pageBreakAfter: "pgba_auto",
   pageBreakInside: "pgbi_avoid"
 };
+var loadingTableCss = {
+  opacity: "o50",
+  pointerEvents: "pen"
+};
 var defaultStyle = getTableStyles({});
 var condensedStyle = {
   ...getTableStyles({
@@ -9536,8 +10022,8 @@ function ColumnResizeHandle({
     /* @__PURE__ */ jsx27("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...trussProps16({
       position: "absolute",
       top: "top0",
-      bottom: "bottom0",
-      right: "right0",
+      bottom: "bot_0",
+      right: "r_0",
       width: "w_4px",
       marginRight: "mr_neg2px",
       zIndex: "z_10",
@@ -9563,7 +10049,7 @@ function ColumnResizeHandle({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-on-surface-muted)"
       }],
-      pointerEvents: "pe_none",
+      pointerEvents: "pen",
       zIndex: ["z_var", {
         "--zIndex": maybeCssVar14(zIndices.dragHandle)
       }],
@@ -9610,7 +10096,7 @@ function KeptGroupRow(props) {
     colSpan
   } : {}, children: /* @__PURE__ */ jsxs13("div", { className: "df aic g_12px", children: [
     /* @__PURE__ */ jsx28("div", { className: "w_38px df jcc", children: /* @__PURE__ */ jsx28(CollapseToggle, { row, compact: true }) }),
-    /* @__PURE__ */ jsxs13("div", { className: "df aic gap1", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "df aic g_1", children: [
       /* @__PURE__ */ jsx28(Icon, { icon: "infoCircle", inc: 2 }),
       `${numHiddenSelectedRows} selected ${pluralize(numHiddenSelectedRows, "row")} hidden due to filters`
     ] })
@@ -9772,7 +10258,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
@@ -10168,13 +10654,13 @@ function Avatar({
   }), ...tid, children: name ? nameToInitials(name) : /* @__PURE__ */ jsx31(Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) }) : /* @__PURE__ */ jsx31("img", { src, alt: name, ...trussProps19({
     ...styles,
     ...{
-      objectFit: "objectCover"
+      objectFit: "obf_cover"
     }
   }), onError: () => setShowFallback(true), loading: "lazy", ...tid });
   return showName && name ? /* @__PURE__ */ jsxs15("div", { ...trussProps19({
     display: "dif",
     alignItems: "aic",
-    gap: "gap1",
+    gap: "g_1",
     ...size === "lg" || size === "xl" ? {
       flexDirection: "fdc"
     } : {}
@@ -10291,8 +10777,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",
@@ -10317,7 +10803,7 @@ function MenuItemImpl(props) {
           color: ["color_var", {
             "--color": "var(--b-text-disabled)"
           }],
-          cursor: "cursorNotAllowed"
+          cursor: "cur_not_allowed"
         } : {},
         ...destructive ? {
           color: ["color_var", {
@@ -10350,7 +10836,7 @@ function renderMenuItem(menuItem, isSelected, isDisabled, itemTid) {
     menuItem.ai ? /* @__PURE__ */ jsx32(AiMenuItem, { label: menuItem.label, isDisabled }) : isIconMenuItem(menuItem) ? /* @__PURE__ */ jsx32(IconMenuItem, { ...menuItem }) : isImageMenuItem(menuItem) ? /* @__PURE__ */ jsx32(ImageMenuItem, { ...menuItem }) : menuItem.label,
     showDescription && /* @__PURE__ */ jsx32("div", { className: "fw4 fz_10px lh_14px", ...itemTid.description, children: menuItem.description })
   ] });
-  return /* @__PURE__ */ jsxs16("div", { className: "df w100 aic jcsb gap2", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: "df w100 aic jcsb g_2", children: [
     maybeWrapInLink(menuItem.onClick, body, isDisabled),
     isSelected && /* @__PURE__ */ jsx32(Icon, { icon: "check", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-selection-indicator" /* SelectionIndicator */ })
   ] });
@@ -10455,7 +10941,7 @@ function MenuSectionImpl(props) {
       ...!isPersistentSection ? {
         overflow: "oa"
       } : {}
-    }), children: /* @__PURE__ */ jsx33("ul", { className: "p_0 m_0 lis_none", ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => /* @__PURE__ */ jsx33(MenuItemImpl, { item, state, onClose, ...tid }, item.key)) }) })
+    }), children: /* @__PURE__ */ jsx33("ul", { className: "p_0 m_0 listNone", ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => /* @__PURE__ */ jsx33(MenuItemImpl, { item, state, onClose, ...tid }, item.key)) }) })
   ] });
 }
 
@@ -10511,7 +10997,7 @@ function LabelComponent(props) {
     ...{
       display: "dif",
       alignItems: "aic",
-      gap: "gap1",
+      gap: "g_1",
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -10765,7 +11251,7 @@ function TextFieldBase(props) {
         ...labelStyle === "left" ? {
           maxWidth: "maxw100",
           flexDirection: "fdr",
-          gap: "gap2",
+          gap: "g_2",
           justifyContent: "jcsb",
           alignItems: "aic"
         } : {}
@@ -10885,7 +11371,7 @@ function TextFieldBase(props) {
       ...{
         width: "w100",
         minWidth: "mw0",
-        outline: "outline0",
+        outline: "ol_0",
         flexGrow: "fg1",
         backgroundColor: "bgTransparent",
         ...!inputStylePalette ? {
@@ -10938,7 +11424,7 @@ function TextFieldBase(props) {
       } : {}
     },
     disabled: visuallyDisabled ? {
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       color: ["color_var", {
         "--color": "var(--b-field-text-disabled)"
       }],
@@ -10946,7 +11432,7 @@ function TextFieldBase(props) {
         "--backgroundColor": maybeCssVar17(disabledBgColor)
       }]
     } : {
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     },
     error: {
       borderColor: ["bc_var", {
@@ -11027,7 +11513,7 @@ function TextFieldBase(props) {
           ...multiline ? {
             flexDirection: "fdc",
             alignItems: "aifs",
-            gap: "gap2"
+            gap: "g_2"
           } : {
             ...!wrap ? {
               whiteSpace: "wsnw",
@@ -11284,7 +11770,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)"
@@ -11307,7 +11793,7 @@ function Menu(props) {
           minWidth: "mw_240px"
         }), ...tid.header, children: header }),
         searchable && /* @__PURE__ */ jsx38(MenuSearchField, { label: "", value: search, placeholder: "Search...", labelStyle: "inline", onChange: setSearch, ...tid }),
-        /* @__PURE__ */ jsx38("ul", { className: "p_0 m_0 lis_none outline0", ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => /* @__PURE__ */ jsx38(MenuSectionImpl, { section: item, state, onClose, ...tid }, item.key)) })
+        /* @__PURE__ */ jsx38("ul", { className: "p_0 m_0 listNone ol_0", ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => /* @__PURE__ */ jsx38(MenuSectionImpl, { section: item, state, onClose, ...tid }, item.key)) })
       ]
     }
   ) });
@@ -11392,8 +11878,8 @@ function AvatarButton(props) {
 }
 var resetStyles = {
   borderRadius: "br100",
-  cursor: "cursorPointer",
-  outline: "outline0",
+  cursor: "cur_pointer",
+  outline: "ol_0",
   position: "relative"
 };
 var hoverStyles = {
@@ -11403,7 +11889,7 @@ var focusStyles = {
   boxShadow: "bshFocus"
 };
 var disabledStyles = {
-  cursor: "cursorNotAllowed"
+  cursor: "cur_not_allowed"
 };
 var pressedOverlayCss = {
   borderRadius: "br100",
@@ -11414,9 +11900,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
@@ -11518,7 +12004,7 @@ function Button(props) {
       ...isDisabled || asyncInProgress ? {
         ...disabledStyles3,
         ...{
-          cursor: "cursorNotAllowed"
+          cursor: "cur_not_allowed"
         }
       } : {},
       ...isFocusVisible || forceFocusStyles ? focusStyles2 : {}
@@ -12156,14 +12642,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: {
@@ -12190,7 +12676,7 @@ var navLinkVariantStyles = {
       color: ["color_var", {
         "--color": "var(--b-nav-text-disabled)"
       }],
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     },
     focusRingStyles: {
       boxShadow: "bshFocus"
@@ -12236,7 +12722,7 @@ var navLinkVariantStyles = {
       color: ["color_var", {
         "--color": "var(--b-nav-global-text-disabled)"
       }],
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     },
     focusRingStyles: {
       color: ["color_var", {
@@ -12607,7 +13093,7 @@ function BaseCard(props) {
           "--objectFit": maybeCssVar19(imageFit)
         }]
       }), src: imgSrc, alt: imgAlt, "aria-hidden": imgAlt === "" || void 0, loading: "lazy", ...tid.image }),
-      tag && /* @__PURE__ */ jsx46("div", { className: "absolute top1 left1 df", ...tid.tag, children: /* @__PURE__ */ jsx46(Tag, { ...tag }) })
+      tag && /* @__PURE__ */ jsx46("div", { className: "absolute top1 l_1 df", ...tid.tag, children: /* @__PURE__ */ jsx46(Tag, { ...tag }) })
     ] }),
     /* @__PURE__ */ jsx46("div", { ...trussProps29({
       display: "df",
@@ -12650,7 +13136,7 @@ function BaseCard(props) {
       }]
     } : {},
     ...onClick ? {
-      cursor: "cursorPointer",
+      cursor: "cur_pointer",
       boxShadow: "h_bshHover"
     } : {},
     ...isFocusVisible ? {
@@ -12667,7 +13153,7 @@ function BaseCard(props) {
     } : {}
   }), ...tid, children: [
     onClick ? getButtonOrLink(content2, onClick, actionAttrs) : /* @__PURE__ */ jsx46("div", { ...trussProps29(contentStyles), children: content2 }),
-    action && /* @__PURE__ */ jsx46("div", { className: "absolute top2 right2", ...tid.heroAction, children: "items" in action ? /* @__PURE__ */ jsx46(ButtonMenu, { ...action }) : /* @__PURE__ */ jsx46(IconButton, { ...action }) }),
+    action && /* @__PURE__ */ jsx46("div", { className: "absolute top2 r_2", ...tid.heroAction, children: "items" in action ? /* @__PURE__ */ jsx46(ButtonMenu, { ...action }) : /* @__PURE__ */ jsx46(IconButton, { ...action }) }),
     footer && /* @__PURE__ */ jsx46("div", { ...tid.footer, children: footer })
   ] });
 }
@@ -12715,12 +13201,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__ */ jsxs29("div", { className: "df fdc gap2 fg1 mw0", children: [
-    /* @__PURE__ */ jsxs29("div", { className: "df fdc gap1", children: [
+  return /* @__PURE__ */ jsxs29("div", { className: "df fdc g_2 fg1 mw0", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "df fdc g_1", children: [
       (leftEyebrow || rightEyebrow) && /* @__PURE__ */ jsxs29("div", { ...trussProps30({
         display: "df",
         justifyContent: "jcsb",
-        gap: "gap1",
+        gap: "g_1",
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -12745,14 +13231,14 @@ function CardBody(props) {
             "--color": "var(--b-on-surface)"
           }]
         }), ...tid.title, children: renderMaybeProposed(title, tid.titleProposal) }),
-        (badge || badgeTags?.length) && /* @__PURE__ */ jsxs29("div", { className: "dif aic gap1 fs0", ...tid.badge, children: [
+        (badge || badgeTags?.length) && /* @__PURE__ */ jsxs29("div", { className: "dif aic g_1 fs0", ...tid.badge, children: [
           badge && /* @__PURE__ */ jsx47("span", { className: "fw4 fz_14px lh_20px wsnw", children: badge }),
           badgeTags?.map((tag) => /* @__PURE__ */ jsx47(Tag, { ...tag }, tag.text))
         ] })
       ] })
     ] }),
-    hasDetails && /* @__PURE__ */ jsxs29("div", { className: "df fdc gap2 mt_auto", children: [
-      data.length > 0 && /* @__PURE__ */ jsxs29("dl", { className: "df gap2 fw4 fz_14px lh_20px", children: [
+    hasDetails && /* @__PURE__ */ jsxs29("div", { className: "df fdc g_2 mta", children: [
+      data.length > 0 && /* @__PURE__ */ jsxs29("dl", { className: "df g_2 fw4 fz_14px lh_20px", children: [
         /* @__PURE__ */ jsx47("div", { className: "df fdc fg1 fb2 mw0", children: col1.map((d) => /* @__PURE__ */ jsxs29("div", { className: "df g_4px", ...tid[defaultTestId(d.label)], children: [
           /* @__PURE__ */ jsxs29("dt", { className: "fs0", children: [
             d.label,
@@ -12768,7 +13254,7 @@ function CardBody(props) {
           /* @__PURE__ */ jsx47("dd", { className: "mw0", children: d.value })
         ] }, d.label)) })
       ] }),
-      progress !== void 0 && /* @__PURE__ */ jsxs29("div", { className: "df aic gap1 fs_10px lh_14px", children: [
+      progress !== void 0 && /* @__PURE__ */ jsxs29("div", { className: "df aic g_1 fs_10px lh_14px", children: [
         /* @__PURE__ */ jsx47("div", { ...trussProps30({
           width: "w25",
           height: "h_8px",
@@ -12878,7 +13364,7 @@ function Carousel(props) {
         marginBottom: "mb_neg4px",
         marginRight: "mr_neg4px",
         marginLeft: "ml_neg4px",
-        scrollPaddingInline: "scrollPaddingInline_4px",
+        scrollPaddingInline: "scpi_4px",
         maskImage: ["maskImage_var", {
           "--maskImage": maybeCssVar21(maskImage)
         }]
@@ -12904,7 +13390,7 @@ function ScrollButton(props) {
   return /* @__PURE__ */ jsx48("button", { type: "button", "aria-label": label, onClick, ...trussProps31({
     position: "absolute",
     top: "top0",
-    bottom: "bottom0",
+    bottom: "bot_0",
     zIndex: "z1",
     display: "df",
     alignItems: "aic",
@@ -12919,15 +13405,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__ */ jsx48(Icon, { icon: back ? "chevronLeft" : "chevronRight", inc, color: "--b-on-surface" /* OnSurface */ }) });
@@ -13029,7 +13515,7 @@ function TableCardView(props) {
   const titleText = typeof title === "string" ? title : title.proposed;
   const shownFooter = shownInteractiveFooter(interactiveFooter);
   const action = to || onClick;
-  return /* @__PURE__ */ jsx49(BaseCard, { ...tid, imgSrc, imgAlt: titleText, imageFit, tag: status, onClick: action, height, aiMode, footer: shownFooter && /* @__PURE__ */ jsx49("div", { className: "df fdc gap2 pl3 pr3 pb3 pt2", ...tid.interactiveFooter, children: /* @__PURE__ */ jsx49(InteractiveFooter, { footer: shownFooter, tid }) }), children: /* @__PURE__ */ jsx49(CardBody, { ...tid, title, leftEyebrow, rightEyebrow, badge, badgeTags, data, progress, aiMode }) });
+  return /* @__PURE__ */ jsx49(BaseCard, { ...tid, imgSrc, imgAlt: titleText, imageFit, tag: status, onClick: action, height, aiMode, footer: shownFooter && /* @__PURE__ */ jsx49("div", { className: "df fdc g_2 pl3 pr3 pb3 pt2", ...tid.interactiveFooter, children: /* @__PURE__ */ jsx49(InteractiveFooter, { footer: shownFooter, tid }) }), children: /* @__PURE__ */ jsx49(CardBody, { ...tid, title, leftEyebrow, rightEyebrow, badge, badgeTags, data, progress, aiMode }) });
 }
 function InteractiveFooter(props) {
   const {
@@ -13076,11 +13562,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__ */ jsx49("span", { className: "db w100 h100 oh br8", children: /* @__PURE__ */ jsx49("img", { className: "w100 h100 obf_cover db", src: item.imgUrl, alt: "", loading: "lazy" }) }) }) });
 }
 
@@ -13094,7 +13580,7 @@ function GridTableEmptyState(props) {
     actions
   } = props;
   const tid = useTestIds(props, "gridTableEmptyState");
-  return /* @__PURE__ */ jsxs32("div", { className: "df fdc aic pt_12 pb_12 gap2", ...tid, children: [
+  return /* @__PURE__ */ jsxs32("div", { className: "df fdc aic pt_12 pb_12 g_2", ...tid, children: [
     /* @__PURE__ */ jsx50("div", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
     description && /* @__PURE__ */ jsx50("div", { ...trussProps32({
       fontWeight: "fw4",
@@ -13150,6 +13636,7 @@ function GridTable(props) {
     infoMessage,
     persistCollapse,
     persistScrollPosition,
+    loading = false,
     resizeTarget,
     activeRowId,
     activeCellId,
@@ -13429,21 +13916,35 @@ function GridTable(props) {
   }
   return /* @__PURE__ */ jsx51(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ jsxs33(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
     /* @__PURE__ */ jsx51("div", { ref: resizeRef, ...trussProps33(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)), ...tid.probe }),
-    as === "card" ? /* @__PURE__ */ jsx51(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition }) : _as === "virtual" ? /* @__PURE__ */ jsx51(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__ */ jsx51("div", { ...trussProps33({
+      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": maybeCssVar22(zIndices.tableLoadingOverlay)
+      }]
+    }), ...tid.loadingOverlay, children: /* @__PURE__ */ jsx51(Loader, { ...tid.loadingSpinner }) }),
+    as === "card" ? /* @__PURE__ */ jsx51(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition, loading }) : _as === "virtual" ? /* @__PURE__ */ jsx51(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__ */ jsxs33("div", { ref: tableContainerRef, ...trussProps33({
     // 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 ? {
@@ -13451,7 +13952,8 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
         "--minWidth": `${style.minWidthPx}px`
       }]
     } : {},
-    ...xss
+    ...xss,
+    ...loading && loadingTableCss
   }), "data-testid": id, children: [
     /* @__PURE__ */ jsxs33("div", { ...trussProps33({
       ...stickyHeader || pinnedRows.length > 0 ? {
@@ -13482,7 +13984,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__ */ jsxs33("table", { ref: tableContainerRef, ...trussProps33({
     ...{
       width: "w100",
@@ -13495,7 +13997,8 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
         "--minWidth": `${style.minWidthPx}px`
       }]
     } : {},
-    ...xss
+    ...xss,
+    ...loading && loadingTableCss
   }), "data-testid": id, children: [
     /* @__PURE__ */ jsxs33("thead", { ...trussProps33({
       ...stickyHeader || pinnedRows.length > 0 ? {
@@ -13542,7 +14045,8 @@ function VirtualGridTableView({
   tableHeadRows,
   stickyOffset,
   infiniteScroll,
-  persistScrollPosition = infiniteScroll === void 0
+  persistScrollPosition = infiniteScroll === void 0,
+  loading = false
 }) {
   const customScrollParent = useVirtualizedScrollParent();
   const inDocumentScrollLayout = useDocumentScrollLayout();
@@ -13554,6 +14058,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 = useMemo14(() => ({
+    // 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: React9.forwardRef((props, ref) => /* @__PURE__ */ jsx51("div", { ...props, ref, ...mergeProps14(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__ */ jsx51("div", { ...trussProps33({
+        ...style.virtualFooterPaddingBottomPx !== void 0 ? {
+          paddingBottom: ["pb_var", {
+            "--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
+          }]
+        } : {}
+      }), children: fetchMoreInProgress && /* @__PURE__ */ jsx51("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ jsx51(Loader, { size: "xs" }) }) });
+    }
+  }), [columns, fetchMoreInProgress, id, stickyOffset, style, xss]);
   const virtuosoKey = !!validatedScrollIndex && visibleDataRows.length > 0 ? "with-data" : "virtuoso";
   return /* @__PURE__ */ jsx51(
     Virtuoso,
@@ -13561,36 +14089,14 @@ function VirtualGridTableView({
       useWindowScroll: inDocumentScrollLayout && !customScrollParent,
       overscan: 5,
       ref: virtuosoRef,
+      ...loading ? trussProps33(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: React9.forwardRef((props, ref) => /* @__PURE__ */ jsx51("div", { ...props, ref, ...mergeProps14(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__ */ jsx51("div", { ...trussProps33({
-            ...style.virtualFooterPaddingBottomPx !== void 0 ? {
-              paddingBottom: ["pb_var", {
-                "--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
-              }]
-            } : {}
-          }), children: fetchMoreInProgress && /* @__PURE__ */ jsx51("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ jsx51(Loader, { size: "xs" }) }) });
-        }
-      },
+      components,
       topItemCount,
       itemContent: (index) => {
         if (index < tableHeadRows.length) {
@@ -13658,7 +14164,8 @@ function CardView({
   id,
   virtuosoRangeRef,
   infiniteScroll,
-  persistScrollPosition = infiniteScroll === void 0
+  persistScrollPosition = infiniteScroll === void 0,
+  loading = false
 }) {
   const customScrollParent = useVirtualizedScrollParent();
   const inDocumentScrollLayout = useDocumentScrollLayout();
@@ -13671,20 +14178,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__ */ jsx51("div", { className: "pt2 pb2", children: /* @__PURE__ */ jsx51("div", { ...trussProps33({
+    return /* @__PURE__ */ jsx51("div", { ...trussProps33({
+      ...{
+        paddingTop: "pt2",
+        paddingBottom: "pb2"
+      },
+      ...loading && loadingTableCss
+    }), children: /* @__PURE__ */ jsx51("div", { ...trussProps33({
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
         "--gridTemplateColumns": maybeCssVar22(`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__ */ jsx51("div", { className: "pb2 h100", children: /* @__PURE__ */ createElement(VirtuosoGrid, { useWindowScroll: inDocumentScrollLayout && !customScrollParent, ...customScrollParent ? {
+  return /* @__PURE__ */ jsx51("div", { ...trussProps33({
+    ...{
+      paddingBottom: "pb2",
+      height: "h100"
+    },
+    ...loading && loadingTableCss
+  }), children: /* @__PURE__ */ createElement(VirtuosoGrid, { useWindowScroll: inDocumentScrollLayout && !customScrollParent, ...customScrollParent ? {
     customScrollParent
   } : {}, ...validatedScrollIndex !== void 0 ? {
     initialTopMostItemIndex: validatedScrollIndex
@@ -13699,7 +14218,7 @@ function CardView({
           "--gridTemplateColumns": maybeCssVar22(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
         }],
         justifyContent: "jcc",
-        gap: "gap3",
+        gap: "g_3",
         paddingTop: "pt3",
         paddingBottom: "pb3",
         paddingRight: "pr3",
@@ -13814,7 +14333,7 @@ var chipHoverOnlyStyles = {
 };
 var chipDisabledStyles = {
   color: "gray600",
-  cursor: "cursorNotAllowed"
+  cursor: "cur_not_allowed"
 };
 
 // src/components/ToggleChips.tsx
@@ -13832,7 +14351,7 @@ function ToggleChips(props) {
     ...{
       display: "df",
       flexWrap: "fww",
-      gap: "gap1"
+      gap: "g_1"
     },
     ...xss
   }), ...tid, children: values.map((value) => /* @__PURE__ */ jsx53(ToggleChip, { text: getLabel(value), onClick: () => onRemove(value), ...tid.chip }, getLabel(value))) });
@@ -14179,7 +14698,7 @@ var aiCardChrome = {
   lg: {
     logoHeight: 3,
     gapCss: {
-      gap: "gap2"
+      gap: "g_2"
     }
   },
   sm: {
@@ -14201,7 +14720,7 @@ function AiBanner(props) {
     secondaryAction
   } = props;
   const tid = useTestIds(props, "aiBanner");
-  return /* @__PURE__ */ jsx58(AiPanel, { padding: "sm", ...tid, children: /* @__PURE__ */ jsx58(AiCard, { size: "sm", ...tid, children: /* @__PURE__ */ jsxs38("div", { className: "df aic jcsb gap2 w100 fww pt_12px pb2 pl2 pr2", children: [
+  return /* @__PURE__ */ jsx58(AiPanel, { padding: "sm", ...tid, children: /* @__PURE__ */ jsx58(AiCard, { size: "sm", ...tid, children: /* @__PURE__ */ jsxs38("div", { className: "df aic jcsb g_2 w100 fww pt_12px pb2 pl2 pr2", children: [
     /* @__PURE__ */ jsxs38("div", { className: "df fdc g_4px fg1 fb_0 mw_240px", children: [
       /* @__PURE__ */ jsx58("span", { className: "fw6 fz_14px lh_20px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       message && /* @__PURE__ */ jsx58("span", { ...trussProps39({
@@ -14213,7 +14732,7 @@ function AiBanner(props) {
         }]
       }), ...tid.message, children: message })
     ] }),
-    (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs38("div", { className: "df aic gap2 fs0", children: [
+    (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs38("div", { className: "df aic g_2 fs0", children: [
       secondaryAction && /* @__PURE__ */ jsx58(Button, { ...secondaryAction, variant: "quaternary" }),
       primaryAction && /* @__PURE__ */ jsx58(Button, { ...primaryAction, variant: "ai" })
     ] })
@@ -14236,7 +14755,7 @@ function LinkCard(props) {
       ...trussProps40({
         display: "df",
         alignItems: "ais",
-        gap: "gap2",
+        gap: "g_2",
         width: "w100",
         paddingTop: "pt2",
         paddingBottom: "pb2",
@@ -14285,7 +14804,7 @@ function AiLinkCardGroup(props) {
   } = props;
   const tid = useTestIds(props, "aiLinkCardGroup");
   if (cards.length === 0) return null;
-  return /* @__PURE__ */ jsx60(AiPanel, { padding: "lg", ...tid, children: /* @__PURE__ */ jsxs40("div", { className: "df fdc aifs gap2 w100", children: [
+  return /* @__PURE__ */ jsx60(AiPanel, { padding: "lg", ...tid, children: /* @__PURE__ */ jsxs40("div", { className: "df fdc aifs g_2 w100", children: [
     /* @__PURE__ */ jsx60(BlueprintAiLogo, { height: 3 }),
     cards.map((card) => /* @__PURE__ */ jsx60(LinkCard, { ...card }, card.title))
   ] }) });
@@ -14355,7 +14874,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__ */ jsx62(AiCard, { role: "status", "aria-busy": true, size: "lg", ...tid, children: /* @__PURE__ */ jsxs41("div", { className: "df fdc aic gap1 w100 pt2 pb2 pl3 pr3", children: [
+    /* @__PURE__ */ jsx62(AiCard, { role: "status", "aria-busy": true, size: "lg", ...tid, children: /* @__PURE__ */ jsxs41("div", { className: "df fdc aic g_1 w100 pt2 pb2 pl3 pr3", children: [
       /* @__PURE__ */ jsx62(AiLoader, {}),
       /* @__PURE__ */ jsx62("span", { className: "fw6 fz_18px lh_28px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       /* @__PURE__ */ jsx62("span", { ...trussProps42({
@@ -14381,11 +14900,11 @@ function AiSlimBanner(props) {
     action
   } = props;
   const tid = useTestIds(props, "aiSlimBanner");
-  return /* @__PURE__ */ jsxs42("div", { className: "df ais gap2 w100 pl2 pr2 fw4 fz_12px lh_16px aiBackground", ...tid, children: [
+  return /* @__PURE__ */ jsxs42("div", { className: "df ais g_2 w100 pl2 pr2 fw4 fz_12px lh_16px aiBackground", ...tid, children: [
     /* @__PURE__ */ jsx63("span", { className: "df aic jcc fs0 pt1 pb1 w_12px h_32px", children: /* @__PURE__ */ jsx63(Icon, { icon: "aiStar", inc: 2.125, xss: {
       flexShrink: "fs0"
     } }) }),
-    /* @__PURE__ */ jsxs42("div", { className: "df aic jcsb gap2 fg1 mw0", children: [
+    /* @__PURE__ */ jsxs42("div", { className: "df aic jcsb g_2 fg1 mw0", children: [
       /* @__PURE__ */ jsx63("span", { className: "fw6 fz_12px lh_16px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent pt1 pb1 mw0", ...tid.title, children: title }),
       action && /* @__PURE__ */ jsx63("div", { className: "fs0", children: /* @__PURE__ */ jsx63(Button, { ...action, variant: "text" }) })
     ] })
@@ -14513,7 +15032,7 @@ function Indicator({
 }) {
   return /* @__PURE__ */ jsxs43("div", { "data-testid": "autoSave", ...trussProps43({
     display: "df",
-    gap: "gap1",
+    gap: "g_1",
     alignItems: "aic",
     color: ["color_var", {
       "--color": "var(--b-on-surface-muted)"
@@ -14542,7 +15061,7 @@ function ContextualModal(props) {
     close
   } = props;
   const tid = useTestIds(props, "popup");
-  return /* @__PURE__ */ jsx66(FocusScope2, { restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs44("div", { className: "pt3 pb3 pr3 pl3 df fdc gap3 bgWhite bshModal br4 maxh_inherit oa", ...tid, children: [
+  return /* @__PURE__ */ jsx66(FocusScope2, { restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs44("div", { className: "pt3 pb3 pr3 pl3 df fdc g_3 bgWhite bshModal br4 maxh_inherit oa", ...tid, children: [
     title && /* @__PURE__ */ jsx66("div", { className: "fw6 fz_18px lh_28px tac", ...tid.title, children: title }),
     /* @__PURE__ */ jsx66("div", { ...tid.content, children: typeof content2 === "function" ? content2(close) : content2 })
   ] }) });
@@ -14573,7 +15092,7 @@ function AvatarGroup(props) {
   const maxVisibleAvatars = avatars.length <= 8 ? 8 : 7;
   const visibleAvatars = avatars.slice(0, maxVisibleAvatars);
   const menuAvatars = avatars.slice(maxVisibleAvatars);
-  return /* @__PURE__ */ jsxs45("div", { className: "df aic gap1 fw6 fz_12px lh_16px", children: [
+  return /* @__PURE__ */ jsxs45("div", { className: "df aic g_1 fw6 fz_12px lh_16px", children: [
     /* @__PURE__ */ jsx68("div", { className: "df aic", children: visibleAvatars.map((avatar, idx) => /* @__PURE__ */ jsx68("div", { ...trussProps44({
       borderRadius: "br100",
       borderStyle: "bss",
@@ -14588,7 +15107,7 @@ function AvatarGroup(props) {
     menuAvatars.length > 0 && /* @__PURE__ */ jsx68(ButtonModal, { trigger: {
       label: `+ ${menuAvatars.length} more`,
       variant: "text"
-    }, hideEndAdornment: true, content: /* @__PURE__ */ jsx68("div", { className: "df fdc gap1 mt_neg12px mb_neg12px mr_neg12px ml_neg12px", children: menuAvatars.map((a, idx) => /* @__PURE__ */ jsx68(Avatar, { src: a.src, name: a.name, showName: true, size: "md" }, a.src ?? idx)) }) })
+    }, hideEndAdornment: true, content: /* @__PURE__ */ jsx68("div", { className: "df fdc g_1 mt_neg12px mb_neg12px mr_neg12px ml_neg12px", children: menuAvatars.map((a, idx) => /* @__PURE__ */ jsx68(Avatar, { src: a.src, name: a.name, showName: true, size: "md" }, a.src ?? idx)) }) })
   ] });
 }
 var sizeToOverlap = {
@@ -14616,7 +15135,7 @@ function Banner(props) {
       display: "df",
       alignItems: "aic",
       width: "w100",
-      gap: "gap1",
+      gap: "g_1",
       paddingTop: "pt2",
       paddingBottom: "pb2",
       paddingRight: "pr2",
@@ -14886,9 +15405,9 @@ function Day(props) {
   return /* @__PURE__ */ jsxs48("button", { ...otherProps, ref: buttonRef, type: "button", ...mergeProps15("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": ""
@@ -15232,7 +15751,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)"
         }]
@@ -15398,18 +15917,18 @@ function Card(props) {
     }), src: imgSrc, alt: title, ...tid.img }) }),
     isHovered && buttonMenuItems && /* @__PURE__ */ jsx78("div", { ...trussProps52({
       position: "absolute",
-      right: "right1",
+      right: "r_1",
       top: "top1",
       ...bordered && !isList ? {
-        right: "right3",
+        right: "r_3",
         top: "top3"
       } : {}
     }), children: /* @__PURE__ */ jsx78(ButtonMenu, { trigger: {
       icon: "verticalDots",
       color: isList ? "--b-on-surface-muted" /* OnSurfaceMuted */ : "--b-on-primary" /* OnPrimary */
     }, items: buttonMenuItems }) }),
-    tag && !isList && /* @__PURE__ */ jsx78("div", { className: "absolute left1 tp_4px", children: /* @__PURE__ */ jsx78(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
-    /* @__PURE__ */ jsxs51("div", { className: "df fdc aifs gap1", children: [
+    tag && !isList && /* @__PURE__ */ jsx78("div", { className: "absolute l_1 tp_4px", children: /* @__PURE__ */ jsx78(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
+    /* @__PURE__ */ jsxs51("div", { className: "df fdc aifs g_1", children: [
       tag && isList && /* @__PURE__ */ jsx78(Tag, { type: tag.type, text: tag.text, ...tid.tag }),
       /* @__PURE__ */ jsxs51("div", { children: [
         /* @__PURE__ */ jsx78("div", { ...trussProps52({
@@ -15451,7 +15970,7 @@ var baseStyles3 = (type) => ({
   }],
   display: "df",
   flexDirection: "fdc",
-  gap: "gap1",
+  gap: "g_1",
   position: "relative"
 });
 var fullWidthStyles = {
@@ -15460,7 +15979,7 @@ var fullWidthStyles = {
 var listStyles = {
   display: "df",
   flexDirection: "fdr",
-  gap: "gap2"
+  gap: "g_2"
 };
 var borderedStyles = {
   borderStyle: "bss",
@@ -15482,7 +16001,7 @@ var cardHoverStyles = {
   borderColor: ["bc_var", {
     "--borderColor": "var(--b-field-border-hover)"
   }],
-  cursor: "cursorPointer"
+  cursor: "cur_pointer"
 };
 var imageHoverStyles = {
   backgroundColor: ["bgColor_var", {
@@ -15603,14 +16122,14 @@ function EnvironmentBanner(props) {
       },
       ...headerContentPaddingX()
     }), ...tid.content, children: [
-      /* @__PURE__ */ jsxs52("span", { className: "df aic gap2 fg1 mh0 oh", ...tid.left, children: [
+      /* @__PURE__ */ jsxs52("span", { className: "df aic g_2 fg1 mh0 oh", ...tid.left, children: [
         /* @__PURE__ */ jsx81(Tag, { text: badgeLabel, xss: {
           backgroundColor: "bgColor_FFFFFF90"
         }, ...tid.badge }),
         /* @__PURE__ */ jsxs52("span", { ...trussProps54({
           ...{
             alignItems: "aic",
-            gap: "gap1",
+            gap: "g_1",
             fontWeight: "fw6",
             fontSize: "fz_12px",
             lineHeight: "lh_16px",
@@ -15631,7 +16150,7 @@ function EnvironmentBanner(props) {
       impersonating != null && /* @__PURE__ */ jsxs52("span", { ...trussProps54({
         display: "df",
         alignItems: "aic",
-        gap: "gap2",
+        gap: "g_2",
         fontWeight: "fw6",
         fontSize: "fz_12px",
         lineHeight: "lh_16px",
@@ -15708,13 +16227,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__ */ jsx81("div", { "aria-hidden": true, ...trussProps54({
@@ -15729,7 +16248,7 @@ function getInvertedCorner(side, bgColorVar) {
       "--boxShadow": maybeCssVar_13(`${shadowXOffset}px -${invertedCornerRadiusPx}px 0 0 ${bgColorVar}`)
     }],
     ...side === "right" ? {
-      right: "right0"
+      right: "r_0"
     } : {}
   }) }) });
 }
@@ -15847,7 +16366,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`
@@ -15931,7 +16450,7 @@ function Snackbar({
     bottom: ["bottom_var", {
       "--bottom": `${offset.bottom ?? defaultOffset.bottom}px`
     }],
-    left: "left3",
+    left: "l_3",
     display: "df",
     flexDirection: "fdc",
     alignItems: "aifs",
@@ -16259,9 +16778,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": maybeCssVar30(zIndices.superDrawerScrim)
         }]
@@ -16329,7 +16848,7 @@ function SuperDrawer() {
             display: "df",
             alignItems: "aic",
             justifyContent: "jcsb",
-            gap: "gap3"
+            gap: "g_3"
           }), children: [
             /* @__PURE__ */ jsx89("div", { ref: headerRef, ...trussProps57({
               color: ["color_var", {
@@ -16682,7 +17201,7 @@ function ModalFooter({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcfe",
-      gap: "gap1"
+      gap: "g_1"
     },
     ...xss
   }), ...testId.footer, children }), modalFooterDiv);
@@ -16728,7 +17247,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__ */ jsxs59("div", { className: "df gap1", children: [
+      /* @__PURE__ */ jsxs59("div", { className: "df g_1", children: [
         /* @__PURE__ */ jsx93(Button, { label: "Cancel", variant: "quaternary", onClick: closeModal, ...testId.modalClose }),
         /* @__PURE__ */ jsx93(Button, { label: "Apply", onClick: () => {
           onApply(modalFilter);
@@ -16930,7 +17449,7 @@ function ChipTextField(props) {
     ...chipBaseStyles(fieldProps?.compact),
     ...{
       minWidth: "mw_32px",
-      outline: "outline0"
+      outline: "ol_0"
     },
     ...isFocused && {
       boxShadow: "bshFocus"
@@ -17040,7 +17559,7 @@ function ChipSelectField(props) {
     ...{
       paddingTop: "pt_2px",
       paddingBottom: "pb_2px",
-      gap: "gap0",
+      gap: "g_0",
       alignItems: "aiStretch"
     }
   };
@@ -17212,7 +17731,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"
@@ -17224,7 +17743,7 @@ function ChipSelectField(props) {
           ...{
             paddingRight: "pr_4px",
             borderRadius: "bra_0_16px_16px_0",
-            outline: "outline0"
+            outline: "ol_0"
           },
           ...chipHoverOnlyStyles,
           ...isClearFocused ? {
@@ -17290,7 +17809,7 @@ function Option(props) {
       }]
     },
     disabled: {
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       color: ["color_var", {
         "--color": "var(--b-text-disabled)"
       }]
@@ -17322,8 +17841,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"
@@ -17442,7 +17961,7 @@ function TreeOption(props) {
       }]
     },
     disabled: {
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       color: ["color_var", {
         "--color": "var(--b-text-disabled)"
       }]
@@ -17464,13 +17983,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"
@@ -17486,7 +18005,7 @@ function TreeOption(props) {
         toggleCollapsed();
         return false;
       }, className: "br4 h_16px w_16px bgTransparent h_bgGray300", ...tid[`collapseToggle_${item.key}`], children: /* @__PURE__ */ jsx99(Icon, { icon: collapsedKeys.includes(item.key) ? "triangleRight" : "triangleDown", inc: 2 }) }) }),
-      /* @__PURE__ */ jsxs63("span", { className: "df aic gap1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
+      /* @__PURE__ */ jsxs63("span", { className: "df aic g_1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
         !isGroup && /* @__PURE__ */ jsx99(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
         /* @__PURE__ */ jsx99("div", { className: "pl1", children: item.rendered })
       ] })
@@ -17646,7 +18165,7 @@ function ListBoxSection(props) {
     }), children: /* @__PURE__ */ jsx101("ul", { ...trussProps66({
       padding: "p_0",
       margin: "m_0",
-      listStyle: "lis_none",
+      listStyle: "listNone",
       ...!isPersistentSection ? {
         height: ["h_var", {
           "--height": `${popoverHeight - sectionSeparatorHeight - persistentItemHeight}px`
@@ -17746,7 +18265,7 @@ function ListBox(props) {
     isMultiSelect && !hideChips && selectedOptions.length > 0 && /* @__PURE__ */ jsx103("ul", { ...trussProps67({
       padding: "p_0",
       margin: "m_0",
-      listStyle: "lis_none",
+      listStyle: "listNone",
       paddingTop: "pt2",
       paddingLeft: "pl2",
       paddingBottom: "pb1",
@@ -17758,10 +18277,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__ */ jsx103(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
-    /* @__PURE__ */ jsx103("ul", { className: "p_0 m_0 lis_none fg1", children: hasSections ? [...state.collection].map((section) => /* @__PURE__ */ jsx103(
+    /* @__PURE__ */ jsx103("ul", { className: "p_0 m_0 listNone fg1", children: hasSections ? [...state.collection].map((section) => /* @__PURE__ */ jsx103(
       ListBoxSection,
       {
         section,
@@ -18318,13 +18837,13 @@ function ComboBoxInput(props) {
   } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ jsx105(Tooltip, { title: /* @__PURE__ */ jsx105(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ jsx105(CountBadge, { count: selectedChipCount, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ jsx105("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...trussProps69({
     ...{
       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)"
       }]
@@ -18821,11 +19340,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,
@@ -18875,7 +19394,7 @@ var actionRowCss = {
   display: "df",
   alignItems: "aic",
   flexWrap: "fww",
-  gap: "gap2",
+  gap: "g_2",
   flexShrink: "fs0"
 };
 function renderHeaderAction(action, index) {
@@ -19004,11 +19523,11 @@ function ContentHeader(props) {
     ...xss
   }), ...tid, children: [
     /* @__PURE__ */ jsxs69("div", { className: "df aic jcsb mw0", children: [
-      title ? /* @__PURE__ */ jsxs69("div", { className: "df aic gap1 mw0", children: [
+      title ? /* @__PURE__ */ jsxs69("div", { className: "df aic g_1 mw0", children: [
         startAdornment,
         /* @__PURE__ */ jsx110(Heading, { ...trussProps73(titleCss), ...tid.title, children: title })
       ] }) : descriptionEl,
-      showActionsSlot && /* @__PURE__ */ jsxs69("div", { className: "df gap2 fs0", ...tid.actions, children: [
+      showActionsSlot && /* @__PURE__ */ jsxs69("div", { className: "df g_2 fs0", ...tid.actions, children: [
         withAutoSave && /* @__PURE__ */ jsx110(AutoSaveIndicator, {}),
         rightSlotActions.length > 0 && /* @__PURE__ */ jsx110(HeaderActions, { actions: rightSlotActions })
       ] })
@@ -19074,7 +19593,7 @@ function InlineFeedbackBanner(props) {
   return /* @__PURE__ */ jsxs70("div", { ...trussProps74({
     display: "df",
     alignItems: "ais",
-    gap: "gap1",
+    gap: "g_1",
     width: "w100",
     paddingTop: "pt1",
     paddingBottom: "pb1",
@@ -19218,7 +19737,7 @@ var jumpLinkStyles = {
     color: ["color_var", {
       "--color": "var(--b-text-link-disabled)"
     }],
-    cursor: "cursorNotAllowed"
+    cursor: "cur_not_allowed"
   },
   disabledActiveStyles: {
     borderColor: "bcBlue200"
@@ -19259,7 +19778,7 @@ function LoadingSkeleton({
   };
   return /* @__PURE__ */ jsx113("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ jsx113("div", { ...trussProps76({
     display: "df",
-    gap: "gap1",
+    gap: "g_1",
     marginBottom: "mb1",
     height: ["h_var", {
       "--height": `${rowHeight}px`
@@ -19404,7 +19923,7 @@ function CheckboxGroup(props) {
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": maybeCssVar36(`repeat(${columns}, auto)`)
     }],
-    gap: "gap2"
+    gap: "g_2"
   }), children: options.map((option) => /* @__PURE__ */ jsx116(CheckboxGroupItem, { ...option, groupState: state, selected: state.value.includes(option.value) }, option.value)) }) });
 }
 function CheckboxGroupItem(props) {
@@ -19781,7 +20300,7 @@ function DateFieldBase(props) {
   } }) });
   const calendarButton = /* @__PURE__ */ jsx120("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...trussProps80({
     ...isDisabled ? {
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     } : {}
   }), ...tid.calendarButton, children: /* @__PURE__ */ jsx120(Icon, { icon: "calendar", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-on-surface-muted" /* OnSurfaceMuted */ }) });
   const EndFieldButtons = /* @__PURE__ */ jsxs72(Fragment29, { children: [
@@ -19976,7 +20495,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__ */ jsx126(Observer5, { children: () => /* @__PURE__ */ jsxs73("div", { className: "df fdc gap3", ...tid, children: [
+  return /* @__PURE__ */ jsx126(Observer5, { children: () => /* @__PURE__ */ jsxs73("div", { className: "df fdc g_3", ...tid, children: [
     filteredRows.map((rowState, index) => /* @__PURE__ */ jsx126(ListFieldRowInputs, { rowState, rowNumber: index + 1, listFieldConfig, formState, listFieldKey }, `listFieldRowInputs-${listFieldKey}-${index}`)),
     /* @__PURE__ */ jsx126("div", { children: /* @__PURE__ */ jsx126(Button, { icon: "plus", label: `Add ${listFieldConfig.name}`, onClick: () => onNew(listFieldObjectState), variant: "secondary", disabled: !listIsValid }) })
   ] }) });
@@ -20197,14 +20716,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",
@@ -20259,9 +20778,9 @@ function SelectCardShell(props) {
     children: /* @__PURE__ */ jsx129("label", { ...trussProps82({
       ...styles,
       ...{
-        cursor: "cursorPointer",
+        cursor: "cur_pointer",
         ...isDisabled ? {
-          cursor: "cursorNotAllowed"
+          cursor: "cur_not_allowed"
         } : {}
       }
     }), ...mergeProps21(hoverProps, focusProps, pressProps), ...tid, children })
@@ -20292,7 +20811,7 @@ function GridSelectCard(props) {
     image ? /* @__PURE__ */ jsx130("img", { src: image, alt: "", ...trussProps83({
       height: "h_100px",
       width: "w_100px",
-      objectFit: "objectContain",
+      objectFit: "obf_contain",
       flexShrink: "fs0",
       ...isDisabled ? {
         opacity: "o50"
@@ -20382,7 +20901,7 @@ var radioDefault = {
   }
 };
 var radioUnchecked = {
-  cursor: "cursorPointer",
+  cursor: "cur_pointer",
   borderColor: ["bc_var", {
     "--borderColor": "var(--b-field-border-default)"
   }]
@@ -20392,7 +20911,7 @@ var radioChecked = {
     backgroundColor: "bgc_currentColor",
     backgroundSize: "bgs_100_100",
     backgroundPosition: "bgp_center",
-    backgroundRepeat: "bgr_no_repeat"
+    backgroundRepeat: "bgNoRepeat"
   },
   ...{
     backgroundImage: ["backgroundImage_var", {
@@ -20418,7 +20937,7 @@ var radioHover = {
 };
 var radioDisabled = {
   ...{
-    cursor: "cursorNotAllowed",
+    cursor: "cur_not_allowed",
     color: ["color_var", {
       "--color": "var(--b-field-bg-disabled)"
     }]
@@ -20427,13 +20946,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)"
     }]
@@ -20496,7 +21015,7 @@ function ListSelectCard(props) {
   } = props;
   const tid = useTestIds(others, defaultTestId(label));
   return /* @__PURE__ */ jsxs76(SelectCardShell, { label, selected: isSelected, disabled: isDisabled, tooltip, view: "list", __storyState, ...others, children: [
-    /* @__PURE__ */ jsxs76("div", { className: "df aic gap1", children: [
+    /* @__PURE__ */ jsxs76("div", { className: "df aic g_1", children: [
       inputProps.type === "checkbox" ? /* @__PURE__ */ jsxs76(Fragment31, { children: [
         /* @__PURE__ */ jsx132(VisuallyHidden6, { children: /* @__PURE__ */ jsx132("input", { ...inputProps, ...tid.value }) }),
         /* @__PURE__ */ jsx132(StyledCheckbox, { isDisabled, isSelected })
@@ -20606,7 +21125,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;
@@ -20615,7 +21134,7 @@ function getSelectCardOptionsCss({
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": maybeCssVar38(`repeat(auto-fill, minmax(${cardWidth}px, 1fr))`)
     }],
-    gap: "gap2"
+    gap: "g_2"
   };
 }
 
@@ -20709,13 +21228,13 @@ function SelectedOptionPill(props) {
     disabled = false
   } = props;
   const tid = useTestIds(props, "selectedOptionPill");
-  return /* @__PURE__ */ jsxs77("div", { className: "df fdc gap1 w100", ...tid, children: [
+  return /* @__PURE__ */ jsxs77("div", { className: "df fdc g_1 w100", ...tid, children: [
     /* @__PURE__ */ jsxs77("div", { ...trussProps87({
       // 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",
@@ -20753,7 +21272,7 @@ function SelectedOptionPillList(props) {
   } = props;
   const tid = useTestIds(props, "selectedOptionPillList");
   if (options.length === 0) return null;
-  return /* @__PURE__ */ jsx137("div", { className: "df fdc gap2 w100", ...tid, children: options.map(({
+  return /* @__PURE__ */ jsx137("div", { className: "df fdc g_2 w100", ...tid, children: options.map(({
     id,
     ...pill
   }) => /* @__PURE__ */ jsx137(SelectedOptionPill, { ...pill, ...tid.pill }, id)) });
@@ -20797,7 +21316,7 @@ function MultiSelectField(props) {
   }, [withPillList, options, values, autoSort, isDisabled]);
   const field = /* @__PURE__ */ jsx138(ComboBoxBase, { multiselect: true, hideChips: withPillList || hideChips, getOptionLabel, getOptionValue, getOptionMenuLabel, values, onSelect, options, autoSort, disabled, ...otherProps });
   if (!withPillList) return field;
-  return /* @__PURE__ */ jsxs78("div", { className: "df fdc gap2 w100", children: [
+  return /* @__PURE__ */ jsxs78("div", { className: "df fdc g_2 w100", children: [
     field,
     /* @__PURE__ */ jsx138(SelectedOptionPillList, { options: pillOptions })
   ] });
@@ -21143,11 +21662,11 @@ function RadioGroupField(props) {
     /* @__PURE__ */ jsxs79("div", { ...trussProps88({
       display: "df",
       flexDirection: "fdc",
-      gap: "gap1",
+      gap: "g_1",
       alignItems: "aifs",
       ...labelStyle === "left" ? {
         flexDirection: "fdr",
-        gap: "gap2",
+        gap: "g_2",
         justifyContent: "jcsb"
       } : {}
     }), ...tid, children: [
@@ -21158,10 +21677,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__ */ jsx142(Fragment32, { children: maybeTooltip({
@@ -21213,7 +21732,7 @@ function Radio(props) {
   });
   return /* @__PURE__ */ jsxs79("label", { ...trussProps88({
     display: "df",
-    cursor: "cursorPointer",
+    cursor: "cur_pointer",
     ...disabled ? {
       cursor: "cur_initial"
     } : {}
@@ -21783,7 +22302,7 @@ function Switch(props) {
   return /* @__PURE__ */ jsxs81("label", { ...hoverProps, ...trussProps91({
     ...{
       position: "relative",
-      cursor: "cursorPointer",
+      cursor: "cur_pointer",
       display: "df",
       width: "wmaxc",
       userSelect: "usn"
@@ -21797,12 +22316,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",
@@ -21814,7 +22333,7 @@ function Switch(props) {
       alignItems: "aic"
     },
     ...isDisabled && {
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       color: ["color_var", {
         "--color": "var(--b-text-disabled)"
       }]
@@ -22226,7 +22745,7 @@ function ToggleChipGroup(props) {
     flexDirection: "fdc",
     ...labelStyle === "left" ? {
       flexDirection: "fdr",
-      gap: "gap2",
+      gap: "g_2",
       maxWidth: "maxw100",
       justifyContent: "jcsb"
     } : {}
@@ -22234,7 +22753,7 @@ function ToggleChipGroup(props) {
     /* @__PURE__ */ jsx157(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
     /* @__PURE__ */ jsx157("div", { ...trussProps92({
       display: "df",
-      gap: "gap1",
+      gap: "g_1",
       flexWrap: "fww",
       ...labelStyle === "left" ? {
         width: ["w_var", {
@@ -22287,7 +22806,7 @@ function ToggleChip2(props) {
     } : {}
   } : isDisabled ? {
     backgroundColor: "bgGray200",
-    cursor: "cursorNotAllowed",
+    cursor: "cur_not_allowed",
     color: "gray600"
   } : !groupState.isReadOnly ? {
     backgroundColor: "bgGray200 h_bgGray300"
@@ -22301,7 +22820,7 @@ function ToggleChip2(props) {
       ...{
         position: "relative",
         display: "dif",
-        gap: "gap1",
+        gap: "g_1",
         alignItems: "aic",
         borderRadius: "br16",
         fontWeight: "fw4",
@@ -22309,7 +22828,7 @@ function ToggleChip2(props) {
         lineHeight: "lh_20px",
         paddingLeft: "pl1",
         paddingRight: "pr1",
-        cursor: "cursorPointer",
+        cursor: "cur_pointer",
         paddingTop: "pt_4px",
         paddingBottom: "pb_4px"
       },
@@ -22472,7 +22991,7 @@ function FieldGroup(props) {
   }).join(" ");
   return /* @__PURE__ */ jsx160("div", { ...trussProps93({
     display: "dg",
-    gap: "gap2",
+    gap: "g_2",
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": maybeCssVar42(gtc)
     }]
@@ -22537,7 +23056,7 @@ function FormRow({
   }, [row, formState]);
   const isLoading = useComputed(() => formState.loading, [formState]);
   const itemFlexBasis = 100 / componentsWithConfig.length - 3;
-  return /* @__PURE__ */ jsx161("div", { className: "df fww aic gap2", ...tid, children: componentsWithConfig.map(({
+  return /* @__PURE__ */ jsx161("div", { className: "df fww aic g_2", ...tid, children: componentsWithConfig.map(({
     component,
     key,
     minWidth
@@ -22704,7 +23223,7 @@ function RightSidebar({
   const [selectedIcon, setSelectedIcon] = useState40(void 0);
   const tid = useTestIds({}, "rightSidebar");
   return /* @__PURE__ */ jsxs83(Fragment33, { children: [
-    /* @__PURE__ */ jsx163("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ jsx163(AnimatePresence2, { children: !selectedIcon && /* @__PURE__ */ jsx163(motion2.div, { className: "df fdc gap2 z1", initial: {
+    /* @__PURE__ */ jsx163("div", { className: "df jcfe absolute r_0 pr3", children: /* @__PURE__ */ jsx163(AnimatePresence2, { children: !selectedIcon && /* @__PURE__ */ jsx163(motion2.div, { className: "df fdc g_2 z1", initial: {
       x: "100%",
       opacity: 0
     }, animate: {
@@ -22766,7 +23285,7 @@ function RightSidebar({
             }]
           }) })
         ] }),
-        /* @__PURE__ */ jsx163("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ jsx163(IconButtonList, { content: content2, selectedIcon, onIconClick: setSelectedIcon }) })
+        /* @__PURE__ */ jsx163("div", { className: "df aic jcfe g_2 mb3", children: /* @__PURE__ */ jsx163(IconButtonList, { content: content2, selectedIcon, onIconClick: setSelectedIcon }) })
       ] }),
       selectedIcon && /* @__PURE__ */ jsx163("div", { ...tid.content, className: "pl3", children: content2.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
     ] }) }, "rightSidebar") })
@@ -22881,9 +23400,9 @@ function FormPageLayoutComponent(props) {
     /* @__PURE__ */ jsx166("div", { ...trussProps97({
       position: "fixed",
       top: "top0",
-      bottom: "bottom0",
-      left: "left0",
-      right: "right0",
+      bottom: "bot_0",
+      left: "l_0",
+      right: "r_0",
       zIndex: ["z_var", {
         "--zIndex": maybeCssVar45(zIndices.pageOverlay)
       }],
@@ -22958,7 +23477,7 @@ function PageHeader(props) {
         breadCrumb && /* @__PURE__ */ jsx166(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
         /* @__PURE__ */ jsx166("h1", { className: "fw6 fz_24px lh_32px", ...tids.pageTitle, children: pageTitle })
       ] }),
-      /* @__PURE__ */ jsxs85("div", { className: "df gap1", children: [
+      /* @__PURE__ */ jsxs85("div", { className: "df g_1", children: [
         tertiaryAction && /* @__PURE__ */ jsx166(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
         cancelAction && /* @__PURE__ */ jsx166(Button, { label: cancelAction.label, onClick: cancelAction.onClick, variant: "quaternary", disabled: cancelAction.disabled, tooltip: cancelAction.tooltip }),
         /* @__PURE__ */ jsx166(SubmitButton, { form: formState, ...submitAction })
@@ -23033,7 +23552,7 @@ function LeftNav(props) {
     paddingRight: "pr3",
     display: "df",
     flexDirection: "fdc",
-    gap: "gap1"
+    gap: "g_1"
   }), ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ jsx166(SectionNavLink, { sectionWithRef, activeSection, ...tids }, `nav-${sectionWithRef.sectionKey}`)) });
 }
 var activeStyles2 = {
@@ -23618,9 +24137,9 @@ function DocumentScrollRightPane({
       ...tid,
       ...mergeProps27(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)"
@@ -23630,7 +24149,7 @@ function DocumentScrollRightPane({
         }]
       } : {
         position: "fixed",
-        right: "right0",
+        right: "r_0",
         overflowY: "oya",
         width: ["w_var", {
           "--width": maybeCssVar47(__maybeInc20(paneWidthCss))
@@ -23880,7 +24399,7 @@ function EditColumnsButton(props) {
     maxHeight: "maxh_512px",
     boxShadow: "bshBasic h_bshHover"
   }), children: [
-    /* @__PURE__ */ jsx171("div", { className: "dg gtc_1fr_auto gap2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs87(Fragment38, { children: [
+    /* @__PURE__ */ jsx171("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs87(Fragment38, { children: [
       /* @__PURE__ */ jsx171("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ jsx171(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)) }),
@@ -23966,7 +24485,7 @@ function FilterPanelOpen({
     ...{
       display: "df",
       alignItems: "aic",
-      gap: "gap1",
+      gap: "g_1",
       scrollbarWidth: "sbwn"
     },
     ...{
@@ -23996,7 +24515,7 @@ function FilterPanelClosed({
   if (chips.length === 0) return null;
   return /* @__PURE__ */ jsxs88("div", { ...trussProps99({
     display: "df",
-    gap: "gap1",
+    gap: "g_1",
     alignItems: "aic",
     minWidth: "mw0",
     flexWrap: "fww",
@@ -24102,7 +24621,7 @@ function GridTableLayoutActionsComponent(props) {
   return /* @__PURE__ */ jsxs89("div", { ...trussProps100({
     display: "df",
     flexDirection: "fdc",
-    gap: "gap1",
+    gap: "g_1",
     paddingBottom: "pb2",
     ...view === "card" ? {
       paddingBottom: "pb3"
@@ -24111,7 +24630,7 @@ function GridTableLayoutActionsComponent(props) {
     /* @__PURE__ */ jsxs89("div", { ...trussProps100({
       ...{
         display: "df",
-        gap: "gap1",
+        gap: "g_1",
         justifyContent: "jcsb",
         paddingTop: "pt3"
       },
@@ -24122,7 +24641,7 @@ function GridTableLayoutActionsComponent(props) {
         sm && hasSearch && /* @__PURE__ */ jsx175(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
         sm && hasFilterControls && /* @__PURE__ */ jsx175(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
         showInlineControl && (groupBy ? /* @__PURE__ */ jsx175(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
-        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx175(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs89("div", { className: "df aic gap1", children: [
+        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx175(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs89("div", { className: "df aic g_1", children: [
           activeFilterCount > 0 && /* @__PURE__ */ jsx175(CountBadge, { count: activeFilterCount }),
           /* @__PURE__ */ jsx175(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
@@ -24143,25 +24662,19 @@ var _GridTableLayoutActions = memo2(GridTableLayoutActionsComponent);
 import { useMemo as useMemo44 } from "react";
 import { Fragment as Fragment39, jsx as jsx176, jsxs as jsxs90 } from "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 = useMemo44(() => 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 = useMemo44(() => createRows(displayData), [createRows, displayData]);
   const fallbackMessage = query.loading ? "Loading\u2026" : query.error ? `Error: ${query.error.message}` : void 0;
   const emptyState = useMemo44(() => {
     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__ */ jsx176("div", { children: keepHeaderWhenLoading ? /* @__PURE__ */ jsx176(GridTable, { ...{ columns, ...others }, rows: headers, fallbackMessage }) : /* @__PURE__ */ jsx176(LoadingTable, { columns: columns.length }) }) : /* @__PURE__ */ jsx176(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others } });
+  if (query.loading && displayData === void 0) {
+    return /* @__PURE__ */ jsx176("div", { children: /* @__PURE__ */ jsx176(LoadingTable, { columns: columns.length }) });
+  }
+  return /* @__PURE__ */ jsx176(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others }, loading: query.loading });
 }
 function LoadingTable(props) {
   const { columns } = props;
@@ -24256,7 +24769,7 @@ function GridTableLayoutComponent(props) {
   const emptyState = useMemo45(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters), [layoutEmptyFallback, layoutState, tableProps, clearFilters]);
   const tableActionsEl = /* @__PURE__ */ jsx177(_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 = useMemo45(() => resolveGridTableLayoutStyle(tableProps.style, inDocumentScrollLayout), [tableProps.style, inDocumentScrollLayout]);
   const tableBody = /* @__PURE__ */ jsx177(Fragment40, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx177(GridTable, { ...tableProps, ...cardAs ? {
     as: cardAs
   } : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) : /* @__PURE__ */ jsx177(QueryTable, { ...tableProps, ...cardAs ? {
@@ -24542,7 +25055,7 @@ function RightPanePanel(props) {
       display: "df",
       alignItems: "aic",
       justifyContent: "jcsb",
-      gap: "gap1",
+      gap: "g_1",
       paddingTop: "pt2",
       paddingBottom: "pb2",
       paddingRight: "pr2",
@@ -24591,7 +25104,7 @@ function SidePanel(props) {
   return /* @__PURE__ */ jsxs94("div", { className: "h100 df fdc oh", ...tid, children: [
     /* @__PURE__ */ jsx182("div", { className: "pt3 pb3 pr3 pl3 fs0", ...tid.header, children: /* @__PURE__ */ jsx182("h2", { className: "fw6 fz_20px lh_28px mt0 mb0", ...tid.title, children: title }) }),
     /* @__PURE__ */ jsx182("div", { className: "fg1 oya mh0", ...tid.body, children: content2 }),
-    hasFooter && /* @__PURE__ */ jsxs94("div", { className: "df gap2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
+    hasFooter && /* @__PURE__ */ jsxs94("div", { className: "df g_2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
       secondaryAction && /* @__PURE__ */ jsx182(Button, { ...secondaryAction, variant: "secondaryBlack" }),
       primaryAction && /* @__PURE__ */ jsx182(Button, { ...primaryAction })
     ] })
@@ -24644,9 +25157,9 @@ function TableReviewLayout(props) {
   return /* @__PURE__ */ jsxs95("div", { ...trussProps104({
     position: "fixed",
     top: "top0",
-    bottom: "bottom0",
-    left: "left0",
-    right: "right0",
+    bottom: "bot_0",
+    left: "l_0",
+    right: "r_0",
     zIndex: ["z_var", {
       "--zIndex": maybeCssVar50(zIndices.pageOverlay)
     }],
@@ -24936,28 +25449,28 @@ function ScrollShadows(props) {
       zIndex: ["z_var", {
         "--zIndex": maybeCssVar54(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%);`;
@@ -25007,8 +25520,8 @@ function ScrollShadows(props) {
     }],
     position: "relative",
     overflow: "oh",
-    height: "h_auto",
-    width: "w_auto",
+    height: "ha",
+    width: "wa",
     ...height === void 0 ? {} : {
       height
     },
@@ -25589,7 +26102,7 @@ function Stepper(props) {
     /* @__PURE__ */ jsx196("ol", { ...trussProps114({
       padding: "p_0",
       margin: "m_0",
-      listStyle: "lis_none",
+      listStyle: "listNone",
       display: "df",
       gap: ["gap_var", {
         "--gap": `${gap}px`
@@ -25718,7 +26231,7 @@ function StepButton(props) {
       color: ["color_var", {
         "--color": "var(--b-text-disabled)"
       }],
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       ...state === "error" ? {
         color: "red200"
       } : {}
@@ -25799,7 +26312,7 @@ function StepperTab(props) {
   }), ...tid[defaultTestId(value)], children: [
     !collapsed && /* @__PURE__ */ jsxs105(Fragment45, { children: [
       /* @__PURE__ */ jsxs105("span", { className: "dg jic mw0", children: [
-        /* @__PURE__ */ jsx197("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__ */ jsx197("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__ */ jsx197("span", { ...trussProps115({
           gridArea: "ga_1_1",
           overflow: "oh",
@@ -25807,7 +26320,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",
@@ -25847,9 +26360,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`
       }],
@@ -25892,7 +26405,7 @@ var stepperTabStyles = {
   },
   focusRingStyles: {
     boxShadow: "bshFocus",
-    outline: "outline0"
+    outline: "ol_0"
   },
   collapsedStyles: {
     cursor: "cur_default",
@@ -25904,7 +26417,7 @@ var stepperTabStyles = {
     color: ["color_var", {
       "--color": "var(--b-text-disabled)"
     }],
-    cursor: "cursorNotAllowed"
+    cursor: "cur_not_allowed"
   }
 };
 
@@ -25929,7 +26442,7 @@ function StepperTabs(props) {
   return /* @__PURE__ */ jsx198("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx198("ol", { ...trussProps116({
     padding: "p_0",
     margin: "m_0",
-    listStyle: "lis_none",
+    listStyle: "listNone",
     display: "df",
     gap: ["gap_var", {
       "--gap": `${gapPx}px`
@@ -25979,9 +26492,9 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return createPortal8(/* @__PURE__ */ jsxs106("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ jsxs106("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ jsxs106("div", { className: "fg1 df aic gap2", children: [
+  return createPortal8(/* @__PURE__ */ jsxs106("div", { className: "df aic jcsb g_3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ jsxs106("div", { className: "df jcsb aic g_2 fg1", children: [
+      /* @__PURE__ */ jsxs106("div", { className: "fg1 df aic g_2", children: [
         /* @__PURE__ */ jsx199("h1", { className: "fw6 fz_24px lh_32px", children: props.title }),
         props.left
       ] }),
@@ -26088,7 +26601,7 @@ var SuperDrawerContent = ({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcfe"
-    }), children: /* @__PURE__ */ jsx200("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx200(Button, { ...buttonProps }, i)) }) })
+    }), children: /* @__PURE__ */ jsx200("div", { className: "df g_1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx200(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -26113,7 +26626,7 @@ function TagGroup(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "tagGroup");
-  return /* @__PURE__ */ jsxs108("div", { ...tid, className: "df aic fww gap1", children: [
+  return /* @__PURE__ */ jsxs108("div", { ...tid, className: "df aic fww g_1", children: [
     tags.map((tag) => /* @__PURE__ */ jsx201(Tag, { ...tag, variant: "secondary" }, tag.text)),
     onEdit && /* @__PURE__ */ jsx201("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx201(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
   ] });
@@ -26133,8 +26646,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__ */ jsxs109("div", { className: "df fdc gap2 pt2 pb2 pr2 pl2", ...tid, children: [
-    /* @__PURE__ */ jsxs109("div", { className: "df aic jcsb gap2", children: [
+  return /* @__PURE__ */ jsxs109("div", { className: "df fdc g_2 pt2 pb2 pr2 pl2", ...tid, children: [
+    /* @__PURE__ */ jsxs109("div", { className: "df aic jcsb g_2", children: [
       /* @__PURE__ */ jsx202("span", { className: "fw6 fz_10px lh_14px ttu ls_0_5px", children: title }),
       /* @__PURE__ */ jsx202("span", { className: "fw4 fz_12px lh_16px wsnw", children: totalLabel })
     ] }),
@@ -26147,7 +26660,7 @@ function StackBarGraph(props) {
         "--backgroundColor": maybeCssVar57(segment.color)
       }]
     }) }, segment.label)) }),
-    /* @__PURE__ */ jsx202("div", { className: "df fww aic gap2", ...tid.legend, children: segments.map((segment) => /* @__PURE__ */ jsxs109("div", { className: "dif aic g_4px", children: [
+    /* @__PURE__ */ jsx202("div", { className: "df fww aic g_2", ...tid.legend, children: segments.map((segment) => /* @__PURE__ */ jsxs109("div", { className: "dif aic g_4px", children: [
       /* @__PURE__ */ jsx202("span", { ...trussProps119({
         borderRadius: "br100",
         width: "w_8px",
@@ -26204,7 +26717,7 @@ function TableSummary(props) {
       display: "df",
       alignItems: "aic",
       justifyContent: "jcsb",
-      gap: "gap2",
+      gap: "g_2",
       paddingLeft: "pl2",
       paddingRight: "pr2",
       paddingTop: "pt_12px",
@@ -26254,13 +26767,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",
@@ -26272,7 +26785,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).
     ...{
@@ -26611,7 +27124,7 @@ function DnDGridItemHandle(props) {
       borderColor: "bcTransparent",
       borderStyle: "bss",
       backgroundColor: "bgTransparent",
-      outline: "outline0",
+      outline: "ol_0",
       display: "dif",
       alignItems: "aic",
       justifyContent: "jcc",
@@ -27561,9 +28074,9 @@ function NavbarMobileDrawer({
   return /* @__PURE__ */ jsxs116(Fragment50, { children: [
     /* @__PURE__ */ jsx221(motion7.div, { ...mergeProps36(void 0, overlayTopStyle, {
       position: "fixed",
-      right: "right0",
-      bottom: "bottom0",
-      left: "left0",
+      right: "r_0",
+      bottom: "bot_0",
+      left: "l_0",
       zIndex: ["z_var", {
         "--zIndex": maybeCssVar60(zIndices.navbarMobileMenuScrim)
       }],
@@ -27582,8 +28095,8 @@ function NavbarMobileDrawer({
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
     /* @__PURE__ */ jsx221(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs116(motion7.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...mergeProps36(void 0, overlayTopStyle, {
       position: "fixed",
-      bottom: "bottom0",
-      left: "left0",
+      bottom: "bot_0",
+      left: "l_0",
       display: "df",
       flexDirection: "fdc",
       flexShrink: "fs0",
@@ -27631,9 +28144,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",
@@ -27730,12 +28243,12 @@ function Navbar(props) {
       whiteSpace: "wsnw",
       paddingTop: "pt1",
       paddingBottom: "pb1",
-      gap: "gap2"
+      gap: "g_2"
     },
     ...headerContentPaddingX(showMobile)
   }), ...tid, children: [
-    /* @__PURE__ */ jsxs117("div", { className: "df aic gap3 fg1 mw0", children: [
-      /* @__PURE__ */ jsxs117("div", { className: "df aic fs0 gap2", children: [
+    /* @__PURE__ */ jsxs117("div", { className: "df aic g_3 fg1 mw0", children: [
+      /* @__PURE__ */ jsxs117("div", { className: "df aic fs0 g_2", children: [
         showMobile && /* @__PURE__ */ jsx222(NavbarMobileMenu, { items, ...tid }),
         /* @__PURE__ */ jsx222("div", { ...trussProps127({
           flexShrink: "fs0",
@@ -27753,12 +28266,12 @@ function Navbar(props) {
         minWidth: "mw0",
         overflow: "oh",
         ...overflows ? {
-          visibility: "vis_hidden"
+          visibility: "vh"
         } : {}
-      }), ...tid.items, children: /* @__PURE__ */ jsx222("div", { ref: contentRef, className: "df aic gap2 wmaxc", children: /* @__PURE__ */ jsx222(AppNavItems, { variant: "global", items, ...tid }) }) })
+      }), ...tid.items, children: /* @__PURE__ */ jsx222("div", { ref: contentRef, className: "df aic g_2 wmaxc", children: /* @__PURE__ */ jsx222(AppNavItems, { variant: "global", items, ...tid }) }) })
     ] }),
-    /* @__PURE__ */ jsxs117("div", { className: "df aic gap1", children: [
-      rightSlot && /* @__PURE__ */ jsx222("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
+    /* @__PURE__ */ jsxs117("div", { className: "df aic g_1", children: [
+      rightSlot && /* @__PURE__ */ jsx222("div", { className: "df aic g_1", ...tid.rightSlot, children: rightSlot }),
       user && /* @__PURE__ */ jsx222(NavbarUserMenu, { user, ...tid.userMenu })
     ] })
   ] }) });
@@ -27959,7 +28472,7 @@ function Tabs(props) {
       alignItems: "aic",
       overflow: "oa",
       whiteSpace: "wsnw",
-      gap: "gap1"
+      gap: "g_1"
     },
     ...includeBottomBorder ? {
       ...{
@@ -27971,11 +28484,11 @@ function Tabs(props) {
       }
     } : {}
   }), children: [
-    !hideTabs(props) && /* @__PURE__ */ jsx223("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+    !hideTabs(props) && /* @__PURE__ */ jsx223("div", { ref, className: "dif g_1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
       const uniqueValue = uniqueTabValue(tab);
       return /* @__PURE__ */ jsx223(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
     }) }),
-    right && /* @__PURE__ */ jsx223("div", { className: "mla df aic gap1 pb1", children: right })
+    right && /* @__PURE__ */ jsx223("div", { className: "mla df aic g_1 pb1", children: right })
   ] });
 }
 function TabImpl(props) {
@@ -28081,12 +28594,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"
@@ -28110,7 +28623,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: {
@@ -28226,7 +28739,7 @@ function SideNavLayoutContent(props) {
     },
     ...bp.mdAndUp ? {
       position: "sticky",
-      left: "left0",
+      left: "l_0",
       zIndex: ["z_var", {
         "--zIndex": maybeCssVar62(zIndices.sideNav)
       }],
@@ -28243,11 +28756,11 @@ function SideNavLayoutContent(props) {
     } : {
       ...{
         position: "fixed",
-        left: "left0",
+        left: "l_0",
         top: ["top_var", {
           "--top": maybeCssVar62(__maybeInc29(navTop))
         }],
-        bottom: "bottom0",
+        bottom: "bot_0",
         zIndex: ["z_var", {
           "--zIndex": maybeCssVar62(zIndices.sideNav)
         }]
@@ -28261,7 +28774,7 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ jsx224("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx224(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    showCollapseToggle && /* @__PURE__ */ jsx224("div", { className: "absolute r_2 top2 z2", children: /* @__PURE__ */ jsx224(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
     /* @__PURE__ */ jsx224("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx224(SideNav, { ...sideNav }) })
   ] });
   return /* @__PURE__ */ jsx224(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs119("div", { ...mergeProps38(void 0, {
@@ -28377,7 +28890,7 @@ function EnvironmentBannerLayout(props) {
     }), children: /* @__PURE__ */ jsx226("div", { ...trussProps130({
       position: "fixed",
       top: "top0",
-      left: "left0",
+      left: "l_0",
       zIndex: ["z_var", {
         "--zIndex": maybeCssVar64(zIndices.environmentBanner)
       }],
@@ -28423,7 +28936,7 @@ function FormSectionChild(props) {
   } : {}, ...trussProps131({
     display: "df",
     flexDirection: "fdc",
-    gap: "gap2",
+    gap: "g_2",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-raised)"
     }],
@@ -28455,14 +28968,14 @@ function FormSection(props) {
   return /* @__PURE__ */ jsxs122("div", { id: defaultTestId(title), ...trussProps132({
     display: "df",
     flexDirection: "fdc",
-    gap: "gap2",
+    gap: "g_2",
     scrollMarginTop: ["scrollMarginTop_var", {
       "--scrollMarginTop": maybeCssVar65(stickyNavAndHeaderOffset())
     }]
   }), ...tid.section, children: [
     /* @__PURE__ */ jsx228(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
-    childSections && (isReorderable(childSections) ? /* @__PURE__ */ jsx228(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ jsx228("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ jsx228(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
+    childSections && (isReorderable(childSections) ? /* @__PURE__ */ jsx228(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ jsx228("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ jsx228(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
   ] });
 }
 function isReorderable(childSections) {
@@ -28487,7 +29000,7 @@ function DraggableChildren(props) {
   };
   return /* @__PURE__ */ jsx228(DnDGrid, { onReorder: handleReorder, lockAxis: "y", gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
-    gap: "gap3"
+    gap: "g_3"
   }, children: sorted.map((child) => /* @__PURE__ */ jsx228(FormSectionChild, { ...child, ...tid }, child.id)) });
 }
 function sortByOrderField(childSections) {
@@ -28568,6 +29081,7 @@ function FormSectionLayout(props) {
     sections,
     aiMode = false,
     withJumpLinks = false,
+    includeTitleJumpLink = false,
     withRightPane
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
@@ -28575,19 +29089,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__ */ jsxs123("div", { ...trussProps134({
     display: "df",
     flexDirection: "fdc",
-    gap: "gap8",
+    gap: "g_8",
     ...aiMode ? {
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -28595,11 +29115,20 @@ function FormSectionLayout(props) {
       paddingLeft: "pl3"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsxs123("div", { className: "df fdc gap3", children: [
+    /* @__PURE__ */ jsxs123("div", { id: titleAnchor ? formSectionLayoutTitleId : void 0, ...trussProps134({
+      display: "df",
+      flexDirection: "fdc",
+      gap: "g_3",
+      ...titleAnchor ? {
+        scrollMarginTop: ["scrollMarginTop_var", {
+          "--scrollMarginTop": maybeCssVar67(stickyNavAndHeaderOffset())
+        }]
+      } : {}
+    }), children: [
       /* @__PURE__ */ jsx230(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
       initialFields
     ] }),
-    sections && /* @__PURE__ */ jsx230("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ jsx230(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+    sections && /* @__PURE__ */ jsx230("div", { className: "df fdc g_8", children: sections.map((section, i) => /* @__PURE__ */ jsx230(FormSection, { ...section }, defaultTestId(section.title) || i)) })
   ] });
   const form = /* @__PURE__ */ jsx230(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ jsx230(AiCard, { size: "lg", ...tid, children: content2 }) : content2 });
   const body = showRail ? /* @__PURE__ */ jsxs123("div", { className: "df w100 mb4", children: [
@@ -28763,7 +29292,7 @@ function NavbarLayout(props) {
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
   const innerCss = {
     position: "fixed",
-    left: "left0",
+    left: "l_0",
     zIndex: ["z_var", {
       "--zIndex": maybeCssVar68(zIndices.navbar)
     }],
@@ -28832,7 +29361,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)"
     }],
@@ -28845,7 +29374,7 @@ function BaseHeader(props) {
         display: "df",
         justifyContent: "jcsb",
         width: "w100",
-        gap: "gap1"
+        gap: "g_1"
       },
       ...pageContentPaddingX,
       ...{
@@ -28889,7 +29418,7 @@ function PageHeader2(props) {
     bottomSlotActions,
     rightSlotActions
   } = splitHeaderActionsOnSm(actions, sm);
-  return /* @__PURE__ */ jsx234(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs126("div", { className: "df gap2 fs0", ...tid.actions, children: [
+  return /* @__PURE__ */ jsx234(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs126("div", { className: "df g_2 fs0", ...tid.actions, children: [
     /* @__PURE__ */ jsx234(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlotActions.length > 0 && /* @__PURE__ */ jsx234(HeaderActions, { actions: rightSlotActions, collapseOnSm: true }),
     rightSlot
@@ -29023,7 +29552,7 @@ function WorkflowPageRightPaneTriggers(props) {
     ...{
       display: "df",
       alignItems: "aic",
-      gap: "gap2",
+      gap: "g_2",
       flexShrink: "fs0",
       ...!isMobile ? {
         transition: "transitionTransform",
@@ -29047,7 +29576,7 @@ function WorkflowPageRightPaneTriggers(props) {
       transform: ["transform_var", {
         "--transform": maybeCssVar70(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
       }],
-      pointerEvents: "pe_none"
+      pointerEvents: "pen"
     } : {
       transform: "tf_translateX_0"
     })
@@ -29133,7 +29662,7 @@ function WorkflowActions(props) {
   const primaryVariant = aiMode ? "ai" : "primary";
   return /* @__PURE__ */ jsxs128("div", { className: "df aic jcsb sm_w100", children: [
     /* @__PURE__ */ jsx239("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ jsx239(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ jsxs128("div", { className: "df aic gap1", children: [
+    /* @__PURE__ */ jsxs128("div", { className: "df aic g_1", children: [
       /* @__PURE__ */ jsx239(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
       onSaveAndExit && /* @__PURE__ */ jsx239(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
       isLastStep ? /* @__PURE__ */ jsx239(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx239(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
@@ -29212,7 +29741,7 @@ function WorkflowPageLayout(props) {
         width: "w100"
       }), children: /* @__PURE__ */ jsx240("div", { ref: headerMetricsRef, ...trussProps138({
         position: "fixed",
-        left: "left0",
+        left: "l_0",
         width: ["w_var", {
           "--width": maybeCssVar71(__maybeInc37(headerWidth))
         }],
@@ -29250,7 +29779,7 @@ function WorkflowPageLayout(props) {
       }), children: /* @__PURE__ */ jsx240("div", { ...trussProps138({
         ...{
           position: "fixed",
-          bottom: "bottom0",
+          bottom: "bot_0",
           width: ["w_var", {
             "--width": maybeCssVar71(__maybeInc37(headerWidth))
           }],
@@ -29263,7 +29792,7 @@ function WorkflowPageLayout(props) {
           display: "df",
           alignItems: "aic",
           justifyContent: "jcfe",
-          gap: "gap1",
+          gap: "g_1",
           borderTopStyle: "bts_solid",
           borderTopWidth: "btw_1px",
           borderColor: ["bc_var", {
@@ -29737,15 +30266,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",
@@ -29763,7 +30292,7 @@ function ToggleButton(props) {
         color: ["color_var", {
           "--color": "var(--b-text-disabled)"
         }],
-        cursor: "cursorNotAllowed"
+        cursor: "cur_not_allowed"
       }
     }),
     ...tid