@homebound/beam 3.6.0 → 3.7.0

package/dist/index.js

@@ -20,7 +20,7 @@ import {
 } from "./chunk-ZPT2ZR5B.js";
 
 // src/Css.ts
-import { trussProps, useRuntimeStyle as _useRuntimeStyle } from "@homebound/truss/runtime";
+import { __invertTrussMediaQuery, trussProps, useRuntimeStyle as _useRuntimeStyle } from "@homebound/truss/runtime";
 var CssBuilder = class _CssBuilder {
   constructor(opts) {
     this.opts = opts;
@@ -469,41 +469,41 @@ var CssBuilder = class _CssBuilder {
     return this.add("containerName", value);
   }
   // coordinates
-  /** Sets `top: "0px"`. */
+  /** Sets `top: "calc(var(--t-spacing) * 0)"`. */
   get top0() {
-    return this.add("top", "0px");
+    return this.add("top", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `top: "8px"`. */
+  /** Sets `top: "calc(var(--t-spacing) * 1)"`. */
   get top1() {
-    return this.add("top", "8px");
+    return this.add("top", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `top: "16px"`. */
+  /** Sets `top: "calc(var(--t-spacing) * 2)"`. */
   get top2() {
-    return this.add("top", "16px");
+    return this.add("top", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `top: "24px"`. */
+  /** Sets `top: "calc(var(--t-spacing) * 3)"`. */
   get top3() {
-    return this.add("top", "24px");
+    return this.add("top", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `top: "32px"`. */
+  /** Sets `top: "calc(var(--t-spacing) * 4)"`. */
   get top4() {
-    return this.add("top", "32px");
+    return this.add("top", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `top: "40px"`. */
+  /** Sets `top: "calc(var(--t-spacing) * 5)"`. */
   get top5() {
-    return this.add("top", "40px");
+    return this.add("top", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `top: "48px"`. */
+  /** Sets `top: "calc(var(--t-spacing) * 6)"`. */
   get top6() {
-    return this.add("top", "48px");
+    return this.add("top", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `top: "56px"`. */
+  /** Sets `top: "calc(var(--t-spacing) * 7)"`. */
   get top7() {
-    return this.add("top", "56px");
+    return this.add("top", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `top: "64px"`. */
+  /** Sets `top: "calc(var(--t-spacing) * 8)"`. */
   get top8() {
-    return this.add("top", "64px");
+    return this.add("top", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `top: "v"`. */
   top(v) {
@@ -513,41 +513,41 @@ var CssBuilder = class _CssBuilder {
   topPx(px2) {
     return this.add("top", `${px2}px`);
   }
-  /** Sets `right: "0px"`. */
+  /** Sets `right: "calc(var(--t-spacing) * 0)"`. */
   get right0() {
-    return this.add("right", "0px");
+    return this.add("right", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `right: "8px"`. */
+  /** Sets `right: "calc(var(--t-spacing) * 1)"`. */
   get right1() {
-    return this.add("right", "8px");
+    return this.add("right", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `right: "16px"`. */
+  /** Sets `right: "calc(var(--t-spacing) * 2)"`. */
   get right2() {
-    return this.add("right", "16px");
+    return this.add("right", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `right: "24px"`. */
+  /** Sets `right: "calc(var(--t-spacing) * 3)"`. */
   get right3() {
-    return this.add("right", "24px");
+    return this.add("right", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `right: "32px"`. */
+  /** Sets `right: "calc(var(--t-spacing) * 4)"`. */
   get right4() {
-    return this.add("right", "32px");
+    return this.add("right", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `right: "40px"`. */
+  /** Sets `right: "calc(var(--t-spacing) * 5)"`. */
   get right5() {
-    return this.add("right", "40px");
+    return this.add("right", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `right: "48px"`. */
+  /** Sets `right: "calc(var(--t-spacing) * 6)"`. */
   get right6() {
-    return this.add("right", "48px");
+    return this.add("right", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `right: "56px"`. */
+  /** Sets `right: "calc(var(--t-spacing) * 7)"`. */
   get right7() {
-    return this.add("right", "56px");
+    return this.add("right", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `right: "64px"`. */
+  /** Sets `right: "calc(var(--t-spacing) * 8)"`. */
   get right8() {
-    return this.add("right", "64px");
+    return this.add("right", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `right: "v"`. */
   right(v) {
@@ -557,41 +557,41 @@ var CssBuilder = class _CssBuilder {
   rightPx(px2) {
     return this.add("right", `${px2}px`);
   }
-  /** Sets `bottom: "0px"`. */
+  /** Sets `bottom: "calc(var(--t-spacing) * 0)"`. */
   get bottom0() {
-    return this.add("bottom", "0px");
+    return this.add("bottom", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `bottom: "8px"`. */
+  /** Sets `bottom: "calc(var(--t-spacing) * 1)"`. */
   get bottom1() {
-    return this.add("bottom", "8px");
+    return this.add("bottom", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `bottom: "16px"`. */
+  /** Sets `bottom: "calc(var(--t-spacing) * 2)"`. */
   get bottom2() {
-    return this.add("bottom", "16px");
+    return this.add("bottom", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `bottom: "24px"`. */
+  /** Sets `bottom: "calc(var(--t-spacing) * 3)"`. */
   get bottom3() {
-    return this.add("bottom", "24px");
+    return this.add("bottom", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `bottom: "32px"`. */
+  /** Sets `bottom: "calc(var(--t-spacing) * 4)"`. */
   get bottom4() {
-    return this.add("bottom", "32px");
+    return this.add("bottom", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `bottom: "40px"`. */
+  /** Sets `bottom: "calc(var(--t-spacing) * 5)"`. */
   get bottom5() {
-    return this.add("bottom", "40px");
+    return this.add("bottom", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `bottom: "48px"`. */
+  /** Sets `bottom: "calc(var(--t-spacing) * 6)"`. */
   get bottom6() {
-    return this.add("bottom", "48px");
+    return this.add("bottom", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `bottom: "56px"`. */
+  /** Sets `bottom: "calc(var(--t-spacing) * 7)"`. */
   get bottom7() {
-    return this.add("bottom", "56px");
+    return this.add("bottom", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `bottom: "64px"`. */
+  /** Sets `bottom: "calc(var(--t-spacing) * 8)"`. */
   get bottom8() {
-    return this.add("bottom", "64px");
+    return this.add("bottom", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `bottom: "v"`. */
   bottom(v) {
@@ -601,41 +601,41 @@ var CssBuilder = class _CssBuilder {
   bottomPx(px2) {
     return this.add("bottom", `${px2}px`);
   }
-  /** Sets `left: "0px"`. */
+  /** Sets `left: "calc(var(--t-spacing) * 0)"`. */
   get left0() {
-    return this.add("left", "0px");
+    return this.add("left", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `left: "8px"`. */
+  /** Sets `left: "calc(var(--t-spacing) * 1)"`. */
   get left1() {
-    return this.add("left", "8px");
+    return this.add("left", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `left: "16px"`. */
+  /** Sets `left: "calc(var(--t-spacing) * 2)"`. */
   get left2() {
-    return this.add("left", "16px");
+    return this.add("left", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `left: "24px"`. */
+  /** Sets `left: "calc(var(--t-spacing) * 3)"`. */
   get left3() {
-    return this.add("left", "24px");
+    return this.add("left", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `left: "32px"`. */
+  /** Sets `left: "calc(var(--t-spacing) * 4)"`. */
   get left4() {
-    return this.add("left", "32px");
+    return this.add("left", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `left: "40px"`. */
+  /** Sets `left: "calc(var(--t-spacing) * 5)"`. */
   get left5() {
-    return this.add("left", "40px");
+    return this.add("left", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `left: "48px"`. */
+  /** Sets `left: "calc(var(--t-spacing) * 6)"`. */
   get left6() {
-    return this.add("left", "48px");
+    return this.add("left", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `left: "56px"`. */
+  /** Sets `left: "calc(var(--t-spacing) * 7)"`. */
   get left7() {
-    return this.add("left", "56px");
+    return this.add("left", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `left: "64px"`. */
+  /** Sets `left: "calc(var(--t-spacing) * 8)"`. */
   get left8() {
-    return this.add("left", "64px");
+    return this.add("left", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `left: "v"`. */
   left(v) {
@@ -1175,41 +1175,41 @@ var CssBuilder = class _CssBuilder {
   gac(value) {
     return this.add("gridAutoColumns", value);
   }
-  /** Sets `gap: "0px"`. */
+  /** Sets `gap: "calc(var(--t-spacing) * 0)"`. */
   get gap0() {
-    return this.add("gap", "0px");
+    return this.add("gap", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `gap: "8px"`. */
+  /** Sets `gap: "calc(var(--t-spacing) * 1)"`. */
   get gap1() {
-    return this.add("gap", "8px");
+    return this.add("gap", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `gap: "16px"`. */
+  /** Sets `gap: "calc(var(--t-spacing) * 2)"`. */
   get gap2() {
-    return this.add("gap", "16px");
+    return this.add("gap", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `gap: "24px"`. */
+  /** Sets `gap: "calc(var(--t-spacing) * 3)"`. */
   get gap3() {
-    return this.add("gap", "24px");
+    return this.add("gap", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `gap: "32px"`. */
+  /** Sets `gap: "calc(var(--t-spacing) * 4)"`. */
   get gap4() {
-    return this.add("gap", "32px");
+    return this.add("gap", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `gap: "40px"`. */
+  /** Sets `gap: "calc(var(--t-spacing) * 5)"`. */
   get gap5() {
-    return this.add("gap", "40px");
+    return this.add("gap", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `gap: "48px"`. */
+  /** Sets `gap: "calc(var(--t-spacing) * 6)"`. */
   get gap6() {
-    return this.add("gap", "48px");
+    return this.add("gap", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `gap: "56px"`. */
+  /** Sets `gap: "calc(var(--t-spacing) * 7)"`. */
   get gap7() {
-    return this.add("gap", "56px");
+    return this.add("gap", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `gap: "64px"`. */
+  /** Sets `gap: "calc(var(--t-spacing) * 8)"`. */
   get gap8() {
-    return this.add("gap", "64px");
+    return this.add("gap", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `gap: "v"`. */
   gap(v) {
@@ -1219,41 +1219,41 @@ var CssBuilder = class _CssBuilder {
   gapPx(px2) {
     return this.add("gap", `${px2}px`);
   }
-  /** Sets `rowGap: "0px"`. */
+  /** Sets `rowGap: "calc(var(--t-spacing) * 0)"`. */
   get rg0() {
-    return this.add("rowGap", "0px");
+    return this.add("rowGap", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `rowGap: "8px"`. */
+  /** Sets `rowGap: "calc(var(--t-spacing) * 1)"`. */
   get rg1() {
-    return this.add("rowGap", "8px");
+    return this.add("rowGap", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `rowGap: "16px"`. */
+  /** Sets `rowGap: "calc(var(--t-spacing) * 2)"`. */
   get rg2() {
-    return this.add("rowGap", "16px");
+    return this.add("rowGap", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `rowGap: "24px"`. */
+  /** Sets `rowGap: "calc(var(--t-spacing) * 3)"`. */
   get rg3() {
-    return this.add("rowGap", "24px");
+    return this.add("rowGap", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `rowGap: "32px"`. */
+  /** Sets `rowGap: "calc(var(--t-spacing) * 4)"`. */
   get rg4() {
-    return this.add("rowGap", "32px");
+    return this.add("rowGap", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `rowGap: "40px"`. */
+  /** Sets `rowGap: "calc(var(--t-spacing) * 5)"`. */
   get rg5() {
-    return this.add("rowGap", "40px");
+    return this.add("rowGap", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `rowGap: "48px"`. */
+  /** Sets `rowGap: "calc(var(--t-spacing) * 6)"`. */
   get rg6() {
-    return this.add("rowGap", "48px");
+    return this.add("rowGap", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `rowGap: "56px"`. */
+  /** Sets `rowGap: "calc(var(--t-spacing) * 7)"`. */
   get rg7() {
-    return this.add("rowGap", "56px");
+    return this.add("rowGap", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `rowGap: "64px"`. */
+  /** Sets `rowGap: "calc(var(--t-spacing) * 8)"`. */
   get rg8() {
-    return this.add("rowGap", "64px");
+    return this.add("rowGap", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `rowGap: "v"`. */
   rg(v) {
@@ -1263,41 +1263,41 @@ var CssBuilder = class _CssBuilder {
   rgPx(px2) {
     return this.add("rowGap", `${px2}px`);
   }
-  /** Sets `columnGap: "0px"`. */
+  /** Sets `columnGap: "calc(var(--t-spacing) * 0)"`. */
   get cg0() {
-    return this.add("columnGap", "0px");
+    return this.add("columnGap", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `columnGap: "8px"`. */
+  /** Sets `columnGap: "calc(var(--t-spacing) * 1)"`. */
   get cg1() {
-    return this.add("columnGap", "8px");
+    return this.add("columnGap", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `columnGap: "16px"`. */
+  /** Sets `columnGap: "calc(var(--t-spacing) * 2)"`. */
   get cg2() {
-    return this.add("columnGap", "16px");
+    return this.add("columnGap", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `columnGap: "24px"`. */
+  /** Sets `columnGap: "calc(var(--t-spacing) * 3)"`. */
   get cg3() {
-    return this.add("columnGap", "24px");
+    return this.add("columnGap", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `columnGap: "32px"`. */
+  /** Sets `columnGap: "calc(var(--t-spacing) * 4)"`. */
   get cg4() {
-    return this.add("columnGap", "32px");
+    return this.add("columnGap", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `columnGap: "40px"`. */
+  /** Sets `columnGap: "calc(var(--t-spacing) * 5)"`. */
   get cg5() {
-    return this.add("columnGap", "40px");
+    return this.add("columnGap", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `columnGap: "48px"`. */
+  /** Sets `columnGap: "calc(var(--t-spacing) * 6)"`. */
   get cg6() {
-    return this.add("columnGap", "48px");
+    return this.add("columnGap", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `columnGap: "56px"`. */
+  /** Sets `columnGap: "calc(var(--t-spacing) * 7)"`. */
   get cg7() {
-    return this.add("columnGap", "56px");
+    return this.add("columnGap", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `columnGap: "64px"`. */
+  /** Sets `columnGap: "calc(var(--t-spacing) * 8)"`. */
   get cg8() {
-    return this.add("columnGap", "64px");
+    return this.add("columnGap", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `columnGap: "v"`. */
   cg(v) {
@@ -1308,41 +1308,41 @@ var CssBuilder = class _CssBuilder {
     return this.add("columnGap", `${px2}px`);
   }
   // height
-  /** Sets `height: "0px"`. */
+  /** Sets `height: "calc(var(--t-spacing) * 0)"`. */
   get h0() {
-    return this.add("height", "0px");
+    return this.add("height", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `height: "8px"`. */
+  /** Sets `height: "calc(var(--t-spacing) * 1)"`. */
   get h1() {
-    return this.add("height", "8px");
+    return this.add("height", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `height: "16px"`. */
+  /** Sets `height: "calc(var(--t-spacing) * 2)"`. */
   get h2() {
-    return this.add("height", "16px");
+    return this.add("height", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `height: "24px"`. */
+  /** Sets `height: "calc(var(--t-spacing) * 3)"`. */
   get h3() {
-    return this.add("height", "24px");
+    return this.add("height", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `height: "32px"`. */
+  /** Sets `height: "calc(var(--t-spacing) * 4)"`. */
   get h4() {
-    return this.add("height", "32px");
+    return this.add("height", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `height: "40px"`. */
+  /** Sets `height: "calc(var(--t-spacing) * 5)"`. */
   get h5() {
-    return this.add("height", "40px");
+    return this.add("height", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `height: "48px"`. */
+  /** Sets `height: "calc(var(--t-spacing) * 6)"`. */
   get h6() {
-    return this.add("height", "48px");
+    return this.add("height", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `height: "56px"`. */
+  /** Sets `height: "calc(var(--t-spacing) * 7)"`. */
   get h7() {
-    return this.add("height", "56px");
+    return this.add("height", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `height: "64px"`. */
+  /** Sets `height: "calc(var(--t-spacing) * 8)"`. */
   get h8() {
-    return this.add("height", "64px");
+    return this.add("height", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `height: "auto"`. */
   get ha() {
@@ -2549,41 +2549,41 @@ var CssBuilder = class _CssBuilder {
     return this.add("fill", value);
   }
   // spacing
-  /** Sets `marginTop: "0px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 0)"`. */
   get mt0() {
-    return this.add("marginTop", "0px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `marginTop: "8px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 1)"`. */
   get mt1() {
-    return this.add("marginTop", "8px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `marginTop: "16px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 2)"`. */
   get mt2() {
-    return this.add("marginTop", "16px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `marginTop: "24px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 3)"`. */
   get mt3() {
-    return this.add("marginTop", "24px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `marginTop: "32px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 4)"`. */
   get mt4() {
-    return this.add("marginTop", "32px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `marginTop: "40px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 5)"`. */
   get mt5() {
-    return this.add("marginTop", "40px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `marginTop: "48px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 6)"`. */
   get mt6() {
-    return this.add("marginTop", "48px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `marginTop: "56px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 7)"`. */
   get mt7() {
-    return this.add("marginTop", "56px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `marginTop: "64px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 8)"`. */
   get mt8() {
-    return this.add("marginTop", "64px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `marginTop: "auto"`. */
   get mta() {
@@ -2597,41 +2597,41 @@ var CssBuilder = class _CssBuilder {
   mtPx(px2) {
     return this.add("marginTop", `${px2}px`);
   }
-  /** Sets `marginRight: "0px"`. */
+  /** Sets `marginRight: "calc(var(--t-spacing) * 0)"`. */
   get mr0() {
-    return this.add("marginRight", "0px");
+    return this.add("marginRight", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `marginRight: "8px"`. */
+  /** Sets `marginRight: "calc(var(--t-spacing) * 1)"`. */
   get mr1() {
-    return this.add("marginRight", "8px");
+    return this.add("marginRight", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `marginRight: "16px"`. */
+  /** Sets `marginRight: "calc(var(--t-spacing) * 2)"`. */
   get mr2() {
-    return this.add("marginRight", "16px");
+    return this.add("marginRight", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `marginRight: "24px"`. */
+  /** Sets `marginRight: "calc(var(--t-spacing) * 3)"`. */
   get mr3() {
-    return this.add("marginRight", "24px");
+    return this.add("marginRight", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `marginRight: "32px"`. */
+  /** Sets `marginRight: "calc(var(--t-spacing) * 4)"`. */
   get mr4() {
-    return this.add("marginRight", "32px");
+    return this.add("marginRight", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `marginRight: "40px"`. */
+  /** Sets `marginRight: "calc(var(--t-spacing) * 5)"`. */
   get mr5() {
-    return this.add("marginRight", "40px");
+    return this.add("marginRight", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `marginRight: "48px"`. */
+  /** Sets `marginRight: "calc(var(--t-spacing) * 6)"`. */
   get mr6() {
-    return this.add("marginRight", "48px");
+    return this.add("marginRight", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `marginRight: "56px"`. */
+  /** Sets `marginRight: "calc(var(--t-spacing) * 7)"`. */
   get mr7() {
-    return this.add("marginRight", "56px");
+    return this.add("marginRight", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `marginRight: "64px"`. */
+  /** Sets `marginRight: "calc(var(--t-spacing) * 8)"`. */
   get mr8() {
-    return this.add("marginRight", "64px");
+    return this.add("marginRight", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `marginRight: "auto"`. */
   get mra() {
@@ -2645,41 +2645,41 @@ var CssBuilder = class _CssBuilder {
   mrPx(px2) {
     return this.add("marginRight", `${px2}px`);
   }
-  /** Sets `marginBottom: "0px"`. */
+  /** Sets `marginBottom: "calc(var(--t-spacing) * 0)"`. */
   get mb0() {
-    return this.add("marginBottom", "0px");
+    return this.add("marginBottom", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `marginBottom: "8px"`. */
+  /** Sets `marginBottom: "calc(var(--t-spacing) * 1)"`. */
   get mb1() {
-    return this.add("marginBottom", "8px");
+    return this.add("marginBottom", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `marginBottom: "16px"`. */
+  /** Sets `marginBottom: "calc(var(--t-spacing) * 2)"`. */
   get mb2() {
-    return this.add("marginBottom", "16px");
+    return this.add("marginBottom", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `marginBottom: "24px"`. */
+  /** Sets `marginBottom: "calc(var(--t-spacing) * 3)"`. */
   get mb3() {
-    return this.add("marginBottom", "24px");
+    return this.add("marginBottom", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `marginBottom: "32px"`. */
+  /** Sets `marginBottom: "calc(var(--t-spacing) * 4)"`. */
   get mb4() {
-    return this.add("marginBottom", "32px");
+    return this.add("marginBottom", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `marginBottom: "40px"`. */
+  /** Sets `marginBottom: "calc(var(--t-spacing) * 5)"`. */
   get mb5() {
-    return this.add("marginBottom", "40px");
+    return this.add("marginBottom", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `marginBottom: "48px"`. */
+  /** Sets `marginBottom: "calc(var(--t-spacing) * 6)"`. */
   get mb6() {
-    return this.add("marginBottom", "48px");
+    return this.add("marginBottom", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `marginBottom: "56px"`. */
+  /** Sets `marginBottom: "calc(var(--t-spacing) * 7)"`. */
   get mb7() {
-    return this.add("marginBottom", "56px");
+    return this.add("marginBottom", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `marginBottom: "64px"`. */
+  /** Sets `marginBottom: "calc(var(--t-spacing) * 8)"`. */
   get mb8() {
-    return this.add("marginBottom", "64px");
+    return this.add("marginBottom", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `marginBottom: "auto"`. */
   get mba() {
@@ -2693,41 +2693,41 @@ var CssBuilder = class _CssBuilder {
   mbPx(px2) {
     return this.add("marginBottom", `${px2}px`);
   }
-  /** Sets `marginLeft: "0px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 0)"`. */
   get ml0() {
-    return this.add("marginLeft", "0px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `marginLeft: "8px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 1)"`. */
   get ml1() {
-    return this.add("marginLeft", "8px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `marginLeft: "16px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 2)"`. */
   get ml2() {
-    return this.add("marginLeft", "16px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `marginLeft: "24px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 3)"`. */
   get ml3() {
-    return this.add("marginLeft", "24px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `marginLeft: "32px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 4)"`. */
   get ml4() {
-    return this.add("marginLeft", "32px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `marginLeft: "40px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 5)"`. */
   get ml5() {
-    return this.add("marginLeft", "40px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `marginLeft: "48px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 6)"`. */
   get ml6() {
-    return this.add("marginLeft", "48px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `marginLeft: "56px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 7)"`. */
   get ml7() {
-    return this.add("marginLeft", "56px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `marginLeft: "64px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 8)"`. */
   get ml8() {
-    return this.add("marginLeft", "64px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `marginLeft: "auto"`. */
   get mla() {
@@ -2741,41 +2741,41 @@ var CssBuilder = class _CssBuilder {
   mlPx(px2) {
     return this.add("marginLeft", `${px2}px`);
   }
-  /** Sets `marginLeft: "0px"; marginRight: "0px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 0)"; marginRight: "calc(var(--t-spacing) * 0)"`. */
   get mx0() {
-    return this.add("marginLeft", "0px").add("marginRight", "0px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 0)").add("marginRight", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `marginLeft: "8px"; marginRight: "8px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 1)"; marginRight: "calc(var(--t-spacing) * 1)"`. */
   get mx1() {
-    return this.add("marginLeft", "8px").add("marginRight", "8px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 1)").add("marginRight", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `marginLeft: "16px"; marginRight: "16px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 2)"; marginRight: "calc(var(--t-spacing) * 2)"`. */
   get mx2() {
-    return this.add("marginLeft", "16px").add("marginRight", "16px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 2)").add("marginRight", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `marginLeft: "24px"; marginRight: "24px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 3)"; marginRight: "calc(var(--t-spacing) * 3)"`. */
   get mx3() {
-    return this.add("marginLeft", "24px").add("marginRight", "24px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 3)").add("marginRight", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `marginLeft: "32px"; marginRight: "32px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 4)"; marginRight: "calc(var(--t-spacing) * 4)"`. */
   get mx4() {
-    return this.add("marginLeft", "32px").add("marginRight", "32px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 4)").add("marginRight", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `marginLeft: "40px"; marginRight: "40px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 5)"; marginRight: "calc(var(--t-spacing) * 5)"`. */
   get mx5() {
-    return this.add("marginLeft", "40px").add("marginRight", "40px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 5)").add("marginRight", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `marginLeft: "48px"; marginRight: "48px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 6)"; marginRight: "calc(var(--t-spacing) * 6)"`. */
   get mx6() {
-    return this.add("marginLeft", "48px").add("marginRight", "48px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 6)").add("marginRight", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `marginLeft: "56px"; marginRight: "56px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 7)"; marginRight: "calc(var(--t-spacing) * 7)"`. */
   get mx7() {
-    return this.add("marginLeft", "56px").add("marginRight", "56px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 7)").add("marginRight", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `marginLeft: "64px"; marginRight: "64px"`. */
+  /** Sets `marginLeft: "calc(var(--t-spacing) * 8)"; marginRight: "calc(var(--t-spacing) * 8)"`. */
   get mx8() {
-    return this.add("marginLeft", "64px").add("marginRight", "64px");
+    return this.add("marginLeft", "calc(var(--t-spacing) * 8)").add("marginRight", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `marginLeft: "auto"; marginRight: "auto"`. */
   get mxa() {
@@ -2789,41 +2789,41 @@ var CssBuilder = class _CssBuilder {
   mxPx(px2) {
     return this.add("marginLeft", `${px2}px`).add("marginRight", `${px2}px`);
   }
-  /** Sets `marginTop: "0px"; marginBottom: "0px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 0)"; marginBottom: "calc(var(--t-spacing) * 0)"`. */
   get my0() {
-    return this.add("marginTop", "0px").add("marginBottom", "0px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 0)").add("marginBottom", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `marginTop: "8px"; marginBottom: "8px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 1)"; marginBottom: "calc(var(--t-spacing) * 1)"`. */
   get my1() {
-    return this.add("marginTop", "8px").add("marginBottom", "8px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 1)").add("marginBottom", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `marginTop: "16px"; marginBottom: "16px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 2)"; marginBottom: "calc(var(--t-spacing) * 2)"`. */
   get my2() {
-    return this.add("marginTop", "16px").add("marginBottom", "16px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 2)").add("marginBottom", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `marginTop: "24px"; marginBottom: "24px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 3)"; marginBottom: "calc(var(--t-spacing) * 3)"`. */
   get my3() {
-    return this.add("marginTop", "24px").add("marginBottom", "24px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 3)").add("marginBottom", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `marginTop: "32px"; marginBottom: "32px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 4)"; marginBottom: "calc(var(--t-spacing) * 4)"`. */
   get my4() {
-    return this.add("marginTop", "32px").add("marginBottom", "32px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 4)").add("marginBottom", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `marginTop: "40px"; marginBottom: "40px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 5)"; marginBottom: "calc(var(--t-spacing) * 5)"`. */
   get my5() {
-    return this.add("marginTop", "40px").add("marginBottom", "40px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 5)").add("marginBottom", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `marginTop: "48px"; marginBottom: "48px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 6)"; marginBottom: "calc(var(--t-spacing) * 6)"`. */
   get my6() {
-    return this.add("marginTop", "48px").add("marginBottom", "48px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 6)").add("marginBottom", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `marginTop: "56px"; marginBottom: "56px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 7)"; marginBottom: "calc(var(--t-spacing) * 7)"`. */
   get my7() {
-    return this.add("marginTop", "56px").add("marginBottom", "56px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 7)").add("marginBottom", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `marginTop: "64px"; marginBottom: "64px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 8)"; marginBottom: "calc(var(--t-spacing) * 8)"`. */
   get my8() {
-    return this.add("marginTop", "64px").add("marginBottom", "64px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 8)").add("marginBottom", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `marginTop: "auto"; marginBottom: "auto"`. */
   get mya() {
@@ -2837,62 +2837,68 @@ var CssBuilder = class _CssBuilder {
   myPx(px2) {
     return this.add("marginTop", `${px2}px`).add("marginBottom", `${px2}px`);
   }
-  /** Sets `marginTop: "0px"; marginBottom: "0px"; marginRight: "0px"; marginLeft: "0px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 0)"; marginBottom: "calc(var(--t-spacing) * 0)"; marginRight: "calc(var(--t-spacing) * 0)"; marginLeft: "calc(var(--t-spacing) * 0)"`. */
   get m0() {
-    return this.add("marginTop", "0px").add("marginBottom", "0px").add("marginRight", "0px").add("marginLeft", "0px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 0)").add("marginBottom", "calc(var(--t-spacing) * 0)").add(
+      "marginRight",
+      "calc(var(--t-spacing) * 0)"
+    ).add("marginLeft", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `marginTop: "8px"; marginBottom: "8px"; marginRight: "8px"; marginLeft: "8px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 1)"; marginBottom: "calc(var(--t-spacing) * 1)"; marginRight: "calc(var(--t-spacing) * 1)"; marginLeft: "calc(var(--t-spacing) * 1)"`. */
   get m1() {
-    return this.add("marginTop", "8px").add("marginBottom", "8px").add("marginRight", "8px").add("marginLeft", "8px");
+    return this.add("marginTop", "calc(var(--t-spacing) * 1)").add("marginBottom", "calc(var(--t-spacing) * 1)").add(
+      "marginRight",
+      "calc(var(--t-spacing) * 1)"
+    ).add("marginLeft", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `marginTop: "16px"; marginBottom: "16px"; marginRight: "16px"; marginLeft: "16px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 2)"; marginBottom: "calc(var(--t-spacing) * 2)"; marginRight: "calc(var(--t-spacing) * 2)"; marginLeft: "calc(var(--t-spacing) * 2)"`. */
   get m2() {
-    return this.add("marginTop", "16px").add("marginBottom", "16px").add("marginRight", "16px").add(
-      "marginLeft",
-      "16px"
-    );
+    return this.add("marginTop", "calc(var(--t-spacing) * 2)").add("marginBottom", "calc(var(--t-spacing) * 2)").add(
+      "marginRight",
+      "calc(var(--t-spacing) * 2)"
+    ).add("marginLeft", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `marginTop: "24px"; marginBottom: "24px"; marginRight: "24px"; marginLeft: "24px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 3)"; marginBottom: "calc(var(--t-spacing) * 3)"; marginRight: "calc(var(--t-spacing) * 3)"; marginLeft: "calc(var(--t-spacing) * 3)"`. */
   get m3() {
-    return this.add("marginTop", "24px").add("marginBottom", "24px").add("marginRight", "24px").add(
-      "marginLeft",
-      "24px"
-    );
+    return this.add("marginTop", "calc(var(--t-spacing) * 3)").add("marginBottom", "calc(var(--t-spacing) * 3)").add(
+      "marginRight",
+      "calc(var(--t-spacing) * 3)"
+    ).add("marginLeft", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `marginTop: "32px"; marginBottom: "32px"; marginRight: "32px"; marginLeft: "32px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 4)"; marginBottom: "calc(var(--t-spacing) * 4)"; marginRight: "calc(var(--t-spacing) * 4)"; marginLeft: "calc(var(--t-spacing) * 4)"`. */
   get m4() {
-    return this.add("marginTop", "32px").add("marginBottom", "32px").add("marginRight", "32px").add(
-      "marginLeft",
-      "32px"
-    );
+    return this.add("marginTop", "calc(var(--t-spacing) * 4)").add("marginBottom", "calc(var(--t-spacing) * 4)").add(
+      "marginRight",
+      "calc(var(--t-spacing) * 4)"
+    ).add("marginLeft", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `marginTop: "40px"; marginBottom: "40px"; marginRight: "40px"; marginLeft: "40px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 5)"; marginBottom: "calc(var(--t-spacing) * 5)"; marginRight: "calc(var(--t-spacing) * 5)"; marginLeft: "calc(var(--t-spacing) * 5)"`. */
   get m5() {
-    return this.add("marginTop", "40px").add("marginBottom", "40px").add("marginRight", "40px").add(
-      "marginLeft",
-      "40px"
-    );
+    return this.add("marginTop", "calc(var(--t-spacing) * 5)").add("marginBottom", "calc(var(--t-spacing) * 5)").add(
+      "marginRight",
+      "calc(var(--t-spacing) * 5)"
+    ).add("marginLeft", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `marginTop: "48px"; marginBottom: "48px"; marginRight: "48px"; marginLeft: "48px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 6)"; marginBottom: "calc(var(--t-spacing) * 6)"; marginRight: "calc(var(--t-spacing) * 6)"; marginLeft: "calc(var(--t-spacing) * 6)"`. */
   get m6() {
-    return this.add("marginTop", "48px").add("marginBottom", "48px").add("marginRight", "48px").add(
-      "marginLeft",
-      "48px"
-    );
+    return this.add("marginTop", "calc(var(--t-spacing) * 6)").add("marginBottom", "calc(var(--t-spacing) * 6)").add(
+      "marginRight",
+      "calc(var(--t-spacing) * 6)"
+    ).add("marginLeft", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `marginTop: "56px"; marginBottom: "56px"; marginRight: "56px"; marginLeft: "56px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 7)"; marginBottom: "calc(var(--t-spacing) * 7)"; marginRight: "calc(var(--t-spacing) * 7)"; marginLeft: "calc(var(--t-spacing) * 7)"`. */
   get m7() {
-    return this.add("marginTop", "56px").add("marginBottom", "56px").add("marginRight", "56px").add(
-      "marginLeft",
-      "56px"
-    );
+    return this.add("marginTop", "calc(var(--t-spacing) * 7)").add("marginBottom", "calc(var(--t-spacing) * 7)").add(
+      "marginRight",
+      "calc(var(--t-spacing) * 7)"
+    ).add("marginLeft", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `marginTop: "64px"; marginBottom: "64px"; marginRight: "64px"; marginLeft: "64px"`. */
+  /** Sets `marginTop: "calc(var(--t-spacing) * 8)"; marginBottom: "calc(var(--t-spacing) * 8)"; marginRight: "calc(var(--t-spacing) * 8)"; marginLeft: "calc(var(--t-spacing) * 8)"`. */
   get m8() {
-    return this.add("marginTop", "64px").add("marginBottom", "64px").add("marginRight", "64px").add(
-      "marginLeft",
-      "64px"
-    );
+    return this.add("marginTop", "calc(var(--t-spacing) * 8)").add("marginBottom", "calc(var(--t-spacing) * 8)").add(
+      "marginRight",
+      "calc(var(--t-spacing) * 8)"
+    ).add("marginLeft", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `marginTop: "auto"; marginBottom: "auto"; marginRight: "auto"; marginLeft: "auto"`. */
   get ma() {
@@ -2915,41 +2921,41 @@ var CssBuilder = class _CssBuilder {
       `${px2}px`
     );
   }
-  /** Sets `paddingTop: "0px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 0)"`. */
   get pt0() {
-    return this.add("paddingTop", "0px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `paddingTop: "8px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 1)"`. */
   get pt1() {
-    return this.add("paddingTop", "8px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `paddingTop: "16px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 2)"`. */
   get pt2() {
-    return this.add("paddingTop", "16px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `paddingTop: "24px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 3)"`. */
   get pt3() {
-    return this.add("paddingTop", "24px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `paddingTop: "32px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 4)"`. */
   get pt4() {
-    return this.add("paddingTop", "32px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `paddingTop: "40px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 5)"`. */
   get pt5() {
-    return this.add("paddingTop", "40px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `paddingTop: "48px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 6)"`. */
   get pt6() {
-    return this.add("paddingTop", "48px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `paddingTop: "56px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 7)"`. */
   get pt7() {
-    return this.add("paddingTop", "56px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `paddingTop: "64px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 8)"`. */
   get pt8() {
-    return this.add("paddingTop", "64px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `paddingTop: "v"`. */
   pt(v) {
@@ -2959,41 +2965,41 @@ var CssBuilder = class _CssBuilder {
   ptPx(px2) {
     return this.add("paddingTop", `${px2}px`);
   }
-  /** Sets `paddingRight: "0px"`. */
+  /** Sets `paddingRight: "calc(var(--t-spacing) * 0)"`. */
   get pr0() {
-    return this.add("paddingRight", "0px");
+    return this.add("paddingRight", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `paddingRight: "8px"`. */
+  /** Sets `paddingRight: "calc(var(--t-spacing) * 1)"`. */
   get pr1() {
-    return this.add("paddingRight", "8px");
+    return this.add("paddingRight", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `paddingRight: "16px"`. */
+  /** Sets `paddingRight: "calc(var(--t-spacing) * 2)"`. */
   get pr2() {
-    return this.add("paddingRight", "16px");
+    return this.add("paddingRight", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `paddingRight: "24px"`. */
+  /** Sets `paddingRight: "calc(var(--t-spacing) * 3)"`. */
   get pr3() {
-    return this.add("paddingRight", "24px");
+    return this.add("paddingRight", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `paddingRight: "32px"`. */
+  /** Sets `paddingRight: "calc(var(--t-spacing) * 4)"`. */
   get pr4() {
-    return this.add("paddingRight", "32px");
+    return this.add("paddingRight", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `paddingRight: "40px"`. */
+  /** Sets `paddingRight: "calc(var(--t-spacing) * 5)"`. */
   get pr5() {
-    return this.add("paddingRight", "40px");
+    return this.add("paddingRight", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `paddingRight: "48px"`. */
+  /** Sets `paddingRight: "calc(var(--t-spacing) * 6)"`. */
   get pr6() {
-    return this.add("paddingRight", "48px");
+    return this.add("paddingRight", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `paddingRight: "56px"`. */
+  /** Sets `paddingRight: "calc(var(--t-spacing) * 7)"`. */
   get pr7() {
-    return this.add("paddingRight", "56px");
+    return this.add("paddingRight", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `paddingRight: "64px"`. */
+  /** Sets `paddingRight: "calc(var(--t-spacing) * 8)"`. */
   get pr8() {
-    return this.add("paddingRight", "64px");
+    return this.add("paddingRight", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `paddingRight: "v"`. */
   pr(v) {
@@ -3003,41 +3009,41 @@ var CssBuilder = class _CssBuilder {
   prPx(px2) {
     return this.add("paddingRight", `${px2}px`);
   }
-  /** Sets `paddingBottom: "0px"`. */
+  /** Sets `paddingBottom: "calc(var(--t-spacing) * 0)"`. */
   get pb0() {
-    return this.add("paddingBottom", "0px");
+    return this.add("paddingBottom", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `paddingBottom: "8px"`. */
+  /** Sets `paddingBottom: "calc(var(--t-spacing) * 1)"`. */
   get pb1() {
-    return this.add("paddingBottom", "8px");
+    return this.add("paddingBottom", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `paddingBottom: "16px"`. */
+  /** Sets `paddingBottom: "calc(var(--t-spacing) * 2)"`. */
   get pb2() {
-    return this.add("paddingBottom", "16px");
+    return this.add("paddingBottom", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `paddingBottom: "24px"`. */
+  /** Sets `paddingBottom: "calc(var(--t-spacing) * 3)"`. */
   get pb3() {
-    return this.add("paddingBottom", "24px");
+    return this.add("paddingBottom", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `paddingBottom: "32px"`. */
+  /** Sets `paddingBottom: "calc(var(--t-spacing) * 4)"`. */
   get pb4() {
-    return this.add("paddingBottom", "32px");
+    return this.add("paddingBottom", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `paddingBottom: "40px"`. */
+  /** Sets `paddingBottom: "calc(var(--t-spacing) * 5)"`. */
   get pb5() {
-    return this.add("paddingBottom", "40px");
+    return this.add("paddingBottom", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `paddingBottom: "48px"`. */
+  /** Sets `paddingBottom: "calc(var(--t-spacing) * 6)"`. */
   get pb6() {
-    return this.add("paddingBottom", "48px");
+    return this.add("paddingBottom", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `paddingBottom: "56px"`. */
+  /** Sets `paddingBottom: "calc(var(--t-spacing) * 7)"`. */
   get pb7() {
-    return this.add("paddingBottom", "56px");
+    return this.add("paddingBottom", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `paddingBottom: "64px"`. */
+  /** Sets `paddingBottom: "calc(var(--t-spacing) * 8)"`. */
   get pb8() {
-    return this.add("paddingBottom", "64px");
+    return this.add("paddingBottom", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `paddingBottom: "v"`. */
   pb(v) {
@@ -3047,41 +3053,41 @@ var CssBuilder = class _CssBuilder {
   pbPx(px2) {
     return this.add("paddingBottom", `${px2}px`);
   }
-  /** Sets `paddingLeft: "0px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 0)"`. */
   get pl0() {
-    return this.add("paddingLeft", "0px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `paddingLeft: "8px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 1)"`. */
   get pl1() {
-    return this.add("paddingLeft", "8px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `paddingLeft: "16px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 2)"`. */
   get pl2() {
-    return this.add("paddingLeft", "16px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `paddingLeft: "24px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 3)"`. */
   get pl3() {
-    return this.add("paddingLeft", "24px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `paddingLeft: "32px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 4)"`. */
   get pl4() {
-    return this.add("paddingLeft", "32px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `paddingLeft: "40px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 5)"`. */
   get pl5() {
-    return this.add("paddingLeft", "40px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `paddingLeft: "48px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 6)"`. */
   get pl6() {
-    return this.add("paddingLeft", "48px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `paddingLeft: "56px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 7)"`. */
   get pl7() {
-    return this.add("paddingLeft", "56px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `paddingLeft: "64px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 8)"`. */
   get pl8() {
-    return this.add("paddingLeft", "64px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `paddingLeft: "v"`. */
   pl(v) {
@@ -3091,41 +3097,41 @@ var CssBuilder = class _CssBuilder {
   plPx(px2) {
     return this.add("paddingLeft", `${px2}px`);
   }
-  /** Sets `paddingLeft: "0px"; paddingRight: "0px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 0)"; paddingRight: "calc(var(--t-spacing) * 0)"`. */
   get px0() {
-    return this.add("paddingLeft", "0px").add("paddingRight", "0px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 0)").add("paddingRight", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `paddingLeft: "8px"; paddingRight: "8px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 1)"; paddingRight: "calc(var(--t-spacing) * 1)"`. */
   get px1() {
-    return this.add("paddingLeft", "8px").add("paddingRight", "8px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 1)").add("paddingRight", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `paddingLeft: "16px"; paddingRight: "16px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 2)"; paddingRight: "calc(var(--t-spacing) * 2)"`. */
   get px2() {
-    return this.add("paddingLeft", "16px").add("paddingRight", "16px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 2)").add("paddingRight", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `paddingLeft: "24px"; paddingRight: "24px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 3)"; paddingRight: "calc(var(--t-spacing) * 3)"`. */
   get px3() {
-    return this.add("paddingLeft", "24px").add("paddingRight", "24px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 3)").add("paddingRight", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `paddingLeft: "32px"; paddingRight: "32px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 4)"; paddingRight: "calc(var(--t-spacing) * 4)"`. */
   get px4() {
-    return this.add("paddingLeft", "32px").add("paddingRight", "32px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 4)").add("paddingRight", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `paddingLeft: "40px"; paddingRight: "40px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 5)"; paddingRight: "calc(var(--t-spacing) * 5)"`. */
   get px5() {
-    return this.add("paddingLeft", "40px").add("paddingRight", "40px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 5)").add("paddingRight", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `paddingLeft: "48px"; paddingRight: "48px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 6)"; paddingRight: "calc(var(--t-spacing) * 6)"`. */
   get px6() {
-    return this.add("paddingLeft", "48px").add("paddingRight", "48px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 6)").add("paddingRight", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `paddingLeft: "56px"; paddingRight: "56px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 7)"; paddingRight: "calc(var(--t-spacing) * 7)"`. */
   get px7() {
-    return this.add("paddingLeft", "56px").add("paddingRight", "56px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 7)").add("paddingRight", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `paddingLeft: "64px"; paddingRight: "64px"`. */
+  /** Sets `paddingLeft: "calc(var(--t-spacing) * 8)"; paddingRight: "calc(var(--t-spacing) * 8)"`. */
   get px8() {
-    return this.add("paddingLeft", "64px").add("paddingRight", "64px");
+    return this.add("paddingLeft", "calc(var(--t-spacing) * 8)").add("paddingRight", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `paddingLeft: "v"; paddingRight: "v"`. */
   px(v) {
@@ -3135,41 +3141,41 @@ var CssBuilder = class _CssBuilder {
   pxPx(px2) {
     return this.add("paddingLeft", `${px2}px`).add("paddingRight", `${px2}px`);
   }
-  /** Sets `paddingTop: "0px"; paddingBottom: "0px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 0)"; paddingBottom: "calc(var(--t-spacing) * 0)"`. */
   get py0() {
-    return this.add("paddingTop", "0px").add("paddingBottom", "0px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 0)").add("paddingBottom", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `paddingTop: "8px"; paddingBottom: "8px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 1)"; paddingBottom: "calc(var(--t-spacing) * 1)"`. */
   get py1() {
-    return this.add("paddingTop", "8px").add("paddingBottom", "8px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 1)").add("paddingBottom", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `paddingTop: "16px"; paddingBottom: "16px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 2)"; paddingBottom: "calc(var(--t-spacing) * 2)"`. */
   get py2() {
-    return this.add("paddingTop", "16px").add("paddingBottom", "16px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 2)").add("paddingBottom", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `paddingTop: "24px"; paddingBottom: "24px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 3)"; paddingBottom: "calc(var(--t-spacing) * 3)"`. */
   get py3() {
-    return this.add("paddingTop", "24px").add("paddingBottom", "24px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 3)").add("paddingBottom", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `paddingTop: "32px"; paddingBottom: "32px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 4)"; paddingBottom: "calc(var(--t-spacing) * 4)"`. */
   get py4() {
-    return this.add("paddingTop", "32px").add("paddingBottom", "32px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 4)").add("paddingBottom", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `paddingTop: "40px"; paddingBottom: "40px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 5)"; paddingBottom: "calc(var(--t-spacing) * 5)"`. */
   get py5() {
-    return this.add("paddingTop", "40px").add("paddingBottom", "40px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 5)").add("paddingBottom", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `paddingTop: "48px"; paddingBottom: "48px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 6)"; paddingBottom: "calc(var(--t-spacing) * 6)"`. */
   get py6() {
-    return this.add("paddingTop", "48px").add("paddingBottom", "48px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 6)").add("paddingBottom", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `paddingTop: "56px"; paddingBottom: "56px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 7)"; paddingBottom: "calc(var(--t-spacing) * 7)"`. */
   get py7() {
-    return this.add("paddingTop", "56px").add("paddingBottom", "56px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 7)").add("paddingBottom", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `paddingTop: "64px"; paddingBottom: "64px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 8)"; paddingBottom: "calc(var(--t-spacing) * 8)"`. */
   get py8() {
-    return this.add("paddingTop", "64px").add("paddingBottom", "64px");
+    return this.add("paddingTop", "calc(var(--t-spacing) * 8)").add("paddingBottom", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `paddingTop: "v"; paddingBottom: "v"`. */
   py(v) {
@@ -3179,68 +3185,68 @@ var CssBuilder = class _CssBuilder {
   pyPx(px2) {
     return this.add("paddingTop", `${px2}px`).add("paddingBottom", `${px2}px`);
   }
-  /** Sets `paddingTop: "0px"; paddingBottom: "0px"; paddingRight: "0px"; paddingLeft: "0px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 0)"; paddingBottom: "calc(var(--t-spacing) * 0)"; paddingRight: "calc(var(--t-spacing) * 0)"; paddingLeft: "calc(var(--t-spacing) * 0)"`. */
   get p0() {
-    return this.add("paddingTop", "0px").add("paddingBottom", "0px").add("paddingRight", "0px").add(
-      "paddingLeft",
-      "0px"
-    );
+    return this.add("paddingTop", "calc(var(--t-spacing) * 0)").add("paddingBottom", "calc(var(--t-spacing) * 0)").add(
+      "paddingRight",
+      "calc(var(--t-spacing) * 0)"
+    ).add("paddingLeft", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `paddingTop: "8px"; paddingBottom: "8px"; paddingRight: "8px"; paddingLeft: "8px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 1)"; paddingBottom: "calc(var(--t-spacing) * 1)"; paddingRight: "calc(var(--t-spacing) * 1)"; paddingLeft: "calc(var(--t-spacing) * 1)"`. */
   get p1() {
-    return this.add("paddingTop", "8px").add("paddingBottom", "8px").add("paddingRight", "8px").add(
-      "paddingLeft",
-      "8px"
-    );
+    return this.add("paddingTop", "calc(var(--t-spacing) * 1)").add("paddingBottom", "calc(var(--t-spacing) * 1)").add(
+      "paddingRight",
+      "calc(var(--t-spacing) * 1)"
+    ).add("paddingLeft", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `paddingTop: "16px"; paddingBottom: "16px"; paddingRight: "16px"; paddingLeft: "16px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 2)"; paddingBottom: "calc(var(--t-spacing) * 2)"; paddingRight: "calc(var(--t-spacing) * 2)"; paddingLeft: "calc(var(--t-spacing) * 2)"`. */
   get p2() {
-    return this.add("paddingTop", "16px").add("paddingBottom", "16px").add("paddingRight", "16px").add(
-      "paddingLeft",
-      "16px"
-    );
+    return this.add("paddingTop", "calc(var(--t-spacing) * 2)").add("paddingBottom", "calc(var(--t-spacing) * 2)").add(
+      "paddingRight",
+      "calc(var(--t-spacing) * 2)"
+    ).add("paddingLeft", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `paddingTop: "24px"; paddingBottom: "24px"; paddingRight: "24px"; paddingLeft: "24px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 3)"; paddingBottom: "calc(var(--t-spacing) * 3)"; paddingRight: "calc(var(--t-spacing) * 3)"; paddingLeft: "calc(var(--t-spacing) * 3)"`. */
   get p3() {
-    return this.add("paddingTop", "24px").add("paddingBottom", "24px").add("paddingRight", "24px").add(
-      "paddingLeft",
-      "24px"
-    );
+    return this.add("paddingTop", "calc(var(--t-spacing) * 3)").add("paddingBottom", "calc(var(--t-spacing) * 3)").add(
+      "paddingRight",
+      "calc(var(--t-spacing) * 3)"
+    ).add("paddingLeft", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `paddingTop: "32px"; paddingBottom: "32px"; paddingRight: "32px"; paddingLeft: "32px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 4)"; paddingBottom: "calc(var(--t-spacing) * 4)"; paddingRight: "calc(var(--t-spacing) * 4)"; paddingLeft: "calc(var(--t-spacing) * 4)"`. */
   get p4() {
-    return this.add("paddingTop", "32px").add("paddingBottom", "32px").add("paddingRight", "32px").add(
-      "paddingLeft",
-      "32px"
-    );
+    return this.add("paddingTop", "calc(var(--t-spacing) * 4)").add("paddingBottom", "calc(var(--t-spacing) * 4)").add(
+      "paddingRight",
+      "calc(var(--t-spacing) * 4)"
+    ).add("paddingLeft", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `paddingTop: "40px"; paddingBottom: "40px"; paddingRight: "40px"; paddingLeft: "40px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 5)"; paddingBottom: "calc(var(--t-spacing) * 5)"; paddingRight: "calc(var(--t-spacing) * 5)"; paddingLeft: "calc(var(--t-spacing) * 5)"`. */
   get p5() {
-    return this.add("paddingTop", "40px").add("paddingBottom", "40px").add("paddingRight", "40px").add(
-      "paddingLeft",
-      "40px"
-    );
+    return this.add("paddingTop", "calc(var(--t-spacing) * 5)").add("paddingBottom", "calc(var(--t-spacing) * 5)").add(
+      "paddingRight",
+      "calc(var(--t-spacing) * 5)"
+    ).add("paddingLeft", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `paddingTop: "48px"; paddingBottom: "48px"; paddingRight: "48px"; paddingLeft: "48px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 6)"; paddingBottom: "calc(var(--t-spacing) * 6)"; paddingRight: "calc(var(--t-spacing) * 6)"; paddingLeft: "calc(var(--t-spacing) * 6)"`. */
   get p6() {
-    return this.add("paddingTop", "48px").add("paddingBottom", "48px").add("paddingRight", "48px").add(
-      "paddingLeft",
-      "48px"
-    );
+    return this.add("paddingTop", "calc(var(--t-spacing) * 6)").add("paddingBottom", "calc(var(--t-spacing) * 6)").add(
+      "paddingRight",
+      "calc(var(--t-spacing) * 6)"
+    ).add("paddingLeft", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `paddingTop: "56px"; paddingBottom: "56px"; paddingRight: "56px"; paddingLeft: "56px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 7)"; paddingBottom: "calc(var(--t-spacing) * 7)"; paddingRight: "calc(var(--t-spacing) * 7)"; paddingLeft: "calc(var(--t-spacing) * 7)"`. */
   get p7() {
-    return this.add("paddingTop", "56px").add("paddingBottom", "56px").add("paddingRight", "56px").add(
-      "paddingLeft",
-      "56px"
-    );
+    return this.add("paddingTop", "calc(var(--t-spacing) * 7)").add("paddingBottom", "calc(var(--t-spacing) * 7)").add(
+      "paddingRight",
+      "calc(var(--t-spacing) * 7)"
+    ).add("paddingLeft", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `paddingTop: "64px"; paddingBottom: "64px"; paddingRight: "64px"; paddingLeft: "64px"`. */
+  /** Sets `paddingTop: "calc(var(--t-spacing) * 8)"; paddingBottom: "calc(var(--t-spacing) * 8)"; paddingRight: "calc(var(--t-spacing) * 8)"; paddingLeft: "calc(var(--t-spacing) * 8)"`. */
   get p8() {
-    return this.add("paddingTop", "64px").add("paddingBottom", "64px").add("paddingRight", "64px").add(
-      "paddingLeft",
-      "64px"
-    );
+    return this.add("paddingTop", "calc(var(--t-spacing) * 8)").add("paddingBottom", "calc(var(--t-spacing) * 8)").add(
+      "paddingRight",
+      "calc(var(--t-spacing) * 8)"
+    ).add("paddingLeft", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `paddingTop: "v"; paddingBottom: "v"; paddingRight: "v"; paddingLeft: "v"`. */
   p(v) {
@@ -3594,41 +3600,41 @@ var CssBuilder = class _CssBuilder {
   maxwPx(px2) {
     return this.maxw(`${px2}px`);
   }
-  /** Sets `width: "0px"`. */
+  /** Sets `width: "calc(var(--t-spacing) * 0)"`. */
   get w0() {
-    return this.add("width", "0px");
+    return this.add("width", "calc(var(--t-spacing) * 0)");
   }
-  /** Sets `width: "8px"`. */
+  /** Sets `width: "calc(var(--t-spacing) * 1)"`. */
   get w1() {
-    return this.add("width", "8px");
+    return this.add("width", "calc(var(--t-spacing) * 1)");
   }
-  /** Sets `width: "16px"`. */
+  /** Sets `width: "calc(var(--t-spacing) * 2)"`. */
   get w2() {
-    return this.add("width", "16px");
+    return this.add("width", "calc(var(--t-spacing) * 2)");
   }
-  /** Sets `width: "24px"`. */
+  /** Sets `width: "calc(var(--t-spacing) * 3)"`. */
   get w3() {
-    return this.add("width", "24px");
+    return this.add("width", "calc(var(--t-spacing) * 3)");
   }
-  /** Sets `width: "32px"`. */
+  /** Sets `width: "calc(var(--t-spacing) * 4)"`. */
   get w4() {
-    return this.add("width", "32px");
+    return this.add("width", "calc(var(--t-spacing) * 4)");
   }
-  /** Sets `width: "40px"`. */
+  /** Sets `width: "calc(var(--t-spacing) * 5)"`. */
   get w5() {
-    return this.add("width", "40px");
+    return this.add("width", "calc(var(--t-spacing) * 5)");
   }
-  /** Sets `width: "48px"`. */
+  /** Sets `width: "calc(var(--t-spacing) * 6)"`. */
   get w6() {
-    return this.add("width", "48px");
+    return this.add("width", "calc(var(--t-spacing) * 6)");
   }
-  /** Sets `width: "56px"`. */
+  /** Sets `width: "calc(var(--t-spacing) * 7)"`. */
   get w7() {
-    return this.add("width", "56px");
+    return this.add("width", "calc(var(--t-spacing) * 7)");
   }
-  /** Sets `width: "64px"`. */
+  /** Sets `width: "calc(var(--t-spacing) * 8)"`. */
   get w8() {
-    return this.add("width", "64px");
+    return this.add("width", "calc(var(--t-spacing) * 8)");
   }
   /** Sets `width: "auto"`. */
   get wa() {
@@ -3860,7 +3866,7 @@ var CssBuilder = class _CssBuilder {
       if (this.opts.elseApplied) {
         throw new Error("else was already called");
       }
-      return this.newCss({ selector: invertMediaQuery(this.selector), elseApplied: true });
+      return this.newCss({ selector: __invertTrussMediaQuery(this.selector), elseApplied: true });
     }
     if (this.opts.elseApplied) {
       throw new Error("else was already called");
@@ -3901,6 +3907,11 @@ var CssBuilder = class _CssBuilder {
     void inlineStyle;
     return this.unsupportedRuntime("style() cannot be used in RuntimeStyle css expressions.");
   }
+  /** Set CSS custom properties via atomic classes (resolved at build time on web). */
+  setVar(_values) {
+    void _values;
+    return this.unsupportedRuntime("setVar() cannot be used in RuntimeStyle css expressions.");
+  }
   /** Convert a style hash into `{ className, style }` props for manual spreading into non-`css=` contexts. */
   props(styles) {
     return trussProps(styles);
@@ -3926,7 +3937,7 @@ var CssBuilder = class _CssBuilder {
   }
 };
 function maybeInc(inc) {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 }
 function increment(inc) {
   return inc * 8;
@@ -4044,27 +4055,6 @@ var Breakpoints = /* @__PURE__ */ ((Breakpoints2) => {
   Breakpoints2["mdOrLg"] = "@media screen and (min-width: 600px)";
   return Breakpoints2;
 })(Breakpoints || {});
-function invertMediaQuery(query) {
-  const screenPrefix = "@media screen and ";
-  if (query.startsWith(screenPrefix)) {
-    const conditions = query.slice(screenPrefix.length).trim();
-    const rangeMatch = conditions.match(/^(min-width: (d+)px) and (max-width: (d+)px)$/);
-    if (rangeMatch) {
-      const min = Number(rangeMatch[1]);
-      const max = Number(rangeMatch[2]);
-      return `@media screen and (max-width: ${min - 1}px), screen and (min-width: ${max + 1}px)`;
-    }
-    const minMatch = conditions.match(/^(min-width: (d+)px)$/);
-    if (minMatch) {
-      return `@media screen and (max-width: ${Number(minMatch[1]) - 1}px)`;
-    }
-    const maxMatch = conditions.match(/^(max-width: (d+)px)$/);
-    if (maxMatch) {
-      return `@media screen and (min-width: ${Number(maxMatch[1]) + 1}px)`;
-    }
-  }
-  return query.replace("@media", "@media not");
-}
 
 // src/components/AutoSaveStatus/AutoSaveStatusProvider.tsx
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -4914,7 +4904,7 @@ import { createContext as createContext2, useContext as useContext3, useEffect a
 import { trussProps as trussProps5 } from "@homebound/truss/runtime";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var __maybeInc = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var ScrollableParentContext = createContext2({
   scrollableEl: null,
@@ -4997,7 +4987,7 @@ function useScrollableParent() {
 import { trussProps as trussProps6 } from "@homebound/truss/runtime";
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var __maybeInc2 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var VirtualizedScrollParentContext = createContext3(null);
 function ScrollableContent(props) {
@@ -6794,7 +6784,7 @@ import { useContext as useContext9 } from "react";
 import { trussProps as trussProps17 } from "@homebound/truss/runtime";
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var __maybeInc3 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function KeptGroupRow(props) {
   const {
@@ -7629,7 +7619,7 @@ import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
 import { trussProps as trussProps18, mergeProps as mergeProps_12 } from "@homebound/truss/runtime";
 import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var __maybeInc4 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var __typography2 = {
   xs2: {
@@ -8047,7 +8037,7 @@ function getFieldWidth(fullWidth) {
 import { trussProps as trussProps20, mergeProps as mergeProps_13 } from "@homebound/truss/runtime";
 import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var __maybeInc5 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var __typography3 = {
   xs2: {
@@ -8227,7 +8217,7 @@ function TextFieldBase(props) {
       ...borderless && !compound ? {
         borderColor: "bcTransparent",
         width: "w_calc_100_16px",
-        marginLeft: "ml_neg8px"
+        marginLeft: "ml_neg1"
       } : {
         borderColor: "bcGray300",
         ...contrast ? {
@@ -12968,6 +12958,7 @@ function RadioGroupField(props) {
     disabled = false,
     errorMsg,
     helperText,
+    layout = "vertical",
     ...otherProps
   } = props;
   const name = useMemo19(() => `radio-group-${++nextNameId}`, []);
@@ -13001,13 +12992,23 @@ function RadioGroupField(props) {
     }), children: [
       /* @__PURE__ */ jsx69(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ jsxs43("div", { ...radioGroupProps, children: [
-        options.map((option) => {
+        /* @__PURE__ */ jsx69("div", { ...trussProps44({
+          display: "df",
+          ...layout === "horizontal" ? {
+            flexDirection: "fdr",
+            flexWrap: "fww",
+            gap: "gap3"
+          } : {
+            flexDirection: "fdc",
+            gap: "gap1"
+          }
+        }), children: options.map((option) => {
           return /* @__PURE__ */ jsx69(Fragment19, { children: maybeTooltip({
             title: resolveTooltip(option.disabled),
             placement: "bottom",
             children: /* @__PURE__ */ jsx69(Radio, { parentId: name, option, state, isOptionDisabled: !!option.disabled, ...otherProps, ...tid[option.value] })
           }) }, option.value);
-        }),
+        }) }),
         errorMsg && /* @__PURE__ */ jsx69(ErrorMessage, { errorMsg, ...tid.errorMsg }),
         helperText && /* @__PURE__ */ jsx69(HelperText, { helperText })
       ] })
@@ -13051,7 +13052,6 @@ function Radio(props) {
   return /* @__PURE__ */ jsxs43("label", { ...trussProps44({
     display: "df",
     cursor: "cursorPointer",
-    marginBottom: "mb1",
     ...disabled ? {
       cursor: "cursor_initial"
     } : {}
@@ -13416,7 +13416,7 @@ import { useFocusRing as useFocusRing7, useHover as useHover13, useSwitch, Visua
 import { trussProps as trussProps46 } from "@homebound/truss/runtime";
 import { jsx as jsx73, jsxs as jsxs45 } from "react/jsx-runtime";
 var __maybeInc6 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Switch(props) {
   const {
@@ -13844,7 +13844,7 @@ import { useCheckboxGroupState as useCheckboxGroupState2 } from "react-stately";
 import { trussProps as trussProps48 } from "@homebound/truss/runtime";
 import { jsx as jsx77, jsxs as jsxs47 } from "react/jsx-runtime";
 var __maybeInc7 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function ToggleChipGroup(props) {
   const {
@@ -15814,7 +15814,7 @@ import { useFocusRing as useFocusRing10 } from "react-aria";
 import { trussProps as trussProps52 } from "@homebound/truss/runtime";
 import { jsx as jsx83, jsxs as jsxs50 } from "react/jsx-runtime";
 var __maybeInc8 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Accordion(props) {
   const {
@@ -17524,7 +17524,7 @@ import { Children, cloneElement } from "react";
 import { trussProps as trussProps59 } from "@homebound/truss/runtime";
 import { jsx as jsx113 } from "react/jsx-runtime";
 var __maybeInc9 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FormLines(props) {
   const {
@@ -18131,7 +18131,7 @@ function PageHeaderBreadcrumbs({
   }
   return /* @__PURE__ */ jsx123("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ jsxs63(Fragment27, { children: [
     renderBreadcrumb(breadcrumbs[0], 0),
-    /* @__PURE__ */ jsx123("button", { ...tids.expand, className: "gray700 pl1 pr1", onClick: () => setCollapsed(false), children: "..." }),
+    /* @__PURE__ */ jsx123("button", { ...tids.expand, className: "gray700 pl_8px pr_8px", onClick: () => setCollapsed(false), children: "..." }),
     renderBreadcrumb(breadcrumbs[breadcrumbs.length - 2], breadcrumbs.length - 2, true),
     renderBreadcrumb(breadcrumbs[breadcrumbs.length - 1], breadcrumbs.length - 1)
   ] }) : breadcrumbs.map((bc, i) => renderBreadcrumb(bc, i)) });
@@ -18432,7 +18432,7 @@ function useActiveSection(sectionsWithRefs) {
 import { mergeProps as mergeProps21 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement3 } from "react";
 var __maybeInc10 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FullBleed({
   children,
@@ -19666,7 +19666,7 @@ import { useEffect as useEffect28 } from "react";
 import { trussProps as trussProps72 } from "@homebound/truss/runtime";
 import { Fragment as Fragment36, jsx as jsx148, jsxs as jsxs76 } from "react/jsx-runtime";
 var __maybeInc11 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function RightPaneLayout(props) {
   const {
@@ -19721,12 +19721,12 @@ function RightPaneLayout(props) {
         width: ["w_var", {
           "--width": `${paneWidth}px`
         }],
-        left: "left_0px",
+        left: "left_0",
         position: "absolute",
         transition: "transition_all_3s_ease_in_out",
         ...isRightPaneOpen ? {
           opacity: "opacity_0",
-          left: "left_800px"
+          left: "left_100"
         } : {}
       }), children: defaultPaneContent }),
       /* @__PURE__ */ jsx148(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx148(
@@ -20756,7 +20756,7 @@ function ResponsiveGridItem(props) {
 // src/components/Grid/useResponsiveGrid.ts
 import { useMemo as useMemo44 } from "react";
 var __maybeInc12 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function useResponsiveGrid(props) {
   const {
@@ -21143,7 +21143,7 @@ import { trussProps as trussProps83 } from "@homebound/truss/runtime";
 import { jsx as jsx165, jsxs as jsxs86 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
 var __maybeInc13 = (inc) => {
-  return typeof inc === "string" ? inc : `${inc * 8}px`;
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Stepper(props) {
   const {