@homebound/beam 3.6.0 → 3.7.0

package/dist/index.cjs

@@ -774,41 +774,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) {
@@ -818,41 +818,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) {
@@ -862,41 +862,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) {
@@ -906,41 +906,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) {
@@ -1480,41 +1480,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) {
@@ -1524,41 +1524,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) {
@@ -1568,41 +1568,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) {
@@ -1613,41 +1613,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() {
@@ -2854,41 +2854,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() {
@@ -2902,41 +2902,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() {
@@ -2950,41 +2950,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() {
@@ -2998,41 +2998,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() {
@@ -3046,41 +3046,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() {
@@ -3094,41 +3094,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() {
@@ -3142,62 +3142,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() {
@@ -3220,41 +3226,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) {
@@ -3264,41 +3270,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) {
@@ -3308,41 +3314,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) {
@@ -3352,41 +3358,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) {
@@ -3396,41 +3402,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) {
@@ -3440,41 +3446,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) {
@@ -3484,68 +3490,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) {
@@ -3899,41 +3905,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() {
@@ -4165,7 +4171,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: (0, import_runtime.__invertTrussMediaQuery)(this.selector), elseApplied: true });
     }
     if (this.opts.elseApplied) {
       throw new Error("else was already called");
@@ -4206,6 +4212,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 (0, import_runtime.trussProps)(styles);
@@ -4231,7 +4242,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;
@@ -4349,27 +4360,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
 var import_react = __toESM(require("react"), 1);
@@ -5323,7 +5313,7 @@ var import_react7 = require("react");
 var import_runtime6 = require("@homebound/truss/runtime");
 var import_jsx_runtime7 = require("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 = (0, import_react7.createContext)({
   scrollableEl: null,
@@ -5406,7 +5396,7 @@ function useScrollableParent() {
 var import_runtime7 = require("@homebound/truss/runtime");
 var import_jsx_runtime8 = require("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 = (0, import_react8.createContext)(null);
 function ScrollableContent(props) {
@@ -7203,7 +7193,7 @@ var import_react24 = require("react");
 var import_runtime19 = require("@homebound/truss/runtime");
 var import_jsx_runtime27 = require("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 {
@@ -8038,7 +8028,7 @@ var import_use_debounce2 = require("use-debounce");
 var import_runtime20 = require("@homebound/truss/runtime");
 var import_jsx_runtime28 = require("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: {
@@ -8456,7 +8446,7 @@ function getFieldWidth(fullWidth) {
 var import_runtime22 = require("@homebound/truss/runtime");
 var import_jsx_runtime30 = require("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: {
@@ -8636,7 +8626,7 @@ function TextFieldBase(props) {
       ...borderless && !compound ? {
         borderColor: "bcTransparent",
         width: "w_calc_100_16px",
-        marginLeft: "ml_neg8px"
+        marginLeft: "ml_neg1"
       } : {
         borderColor: "bcGray300",
         ...contrast ? {
@@ -13377,6 +13367,7 @@ function RadioGroupField(props) {
     disabled = false,
     errorMsg,
     helperText,
+    layout = "vertical",
     ...otherProps
   } = props;
   const name = (0, import_react55.useMemo)(() => `radio-group-${++nextNameId}`, []);
@@ -13410,13 +13401,23 @@ function RadioGroupField(props) {
     }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ...radioGroupProps, children: [
-        options.map((option) => {
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ...(0, import_runtime46.trussProps)({
+          display: "df",
+          ...layout === "horizontal" ? {
+            flexDirection: "fdr",
+            flexWrap: "fww",
+            gap: "gap3"
+          } : {
+            flexDirection: "fdc",
+            gap: "gap1"
+          }
+        }), children: options.map((option) => {
           return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react55.Fragment, { children: maybeTooltip({
             title: resolveTooltip(option.disabled),
             placement: "bottom",
             children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Radio, { parentId: name, option, state, isOptionDisabled: !!option.disabled, ...otherProps, ...tid[option.value] })
           }) }, option.value);
-        }),
+        }) }),
         errorMsg && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
         helperText && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(HelperText, { helperText })
       ] })
@@ -13460,7 +13461,6 @@ function Radio(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { ...(0, import_runtime46.trussProps)({
     display: "df",
     cursor: "cursorPointer",
-    marginBottom: "mb1",
     ...disabled ? {
       cursor: "cursor_initial"
     } : {}
@@ -13825,7 +13825,7 @@ var import_react_aria35 = require("react-aria");
 var import_runtime48 = require("@homebound/truss/runtime");
 var import_jsx_runtime73 = require("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 {
@@ -14253,7 +14253,7 @@ var import_react_stately15 = require("react-stately");
 var import_runtime50 = require("@homebound/truss/runtime");
 var import_jsx_runtime77 = require("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 {
@@ -16223,7 +16223,7 @@ var import_react_aria40 = require("react-aria");
 var import_runtime54 = require("@homebound/truss/runtime");
 var import_jsx_runtime83 = require("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 {
@@ -17933,7 +17933,7 @@ var import_react83 = require("react");
 var import_runtime61 = require("@homebound/truss/runtime");
 var import_jsx_runtime113 = require("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 {
@@ -18540,7 +18540,7 @@ function PageHeaderBreadcrumbs({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
     renderBreadcrumb(breadcrumbs[0], 0),
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("button", { ...tids.expand, className: "gray700 pl1 pr1", onClick: () => setCollapsed(false), children: "..." }),
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("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)) });
@@ -18841,7 +18841,7 @@ function useActiveSection(sectionsWithRefs) {
 var import_runtime69 = require("@homebound/truss/runtime");
 var import_react91 = require("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,
@@ -20075,7 +20075,7 @@ var import_react101 = require("react");
 var import_runtime76 = require("@homebound/truss/runtime");
 var import_jsx_runtime148 = require("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 {
@@ -20130,12 +20130,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__ */ (0, import_jsx_runtime148.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
@@ -21165,7 +21165,7 @@ function ResponsiveGridItem(props) {
 // src/components/Grid/useResponsiveGrid.ts
 var import_react113 = require("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 {
@@ -21552,7 +21552,7 @@ var import_runtime88 = require("@homebound/truss/runtime");
 var import_jsx_runtime165 = require("react/jsx-runtime");
 var import_react120 = require("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 {