npm - @homebound/beam - Versions diffs - 3.5.1 → 3.7.0 - Mend

@homebound/beam 3.5.1 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -40,6 +40,18 @@ type RuntimeStyles = RawCssProperties & {
     readonly __kind: "runtime";
 };
 type Typography = "xs2" | "xs2Sb" | "xs" | "xsSb" | "sm" | "smSb" | "md" | "mdSb" | "lg" | "xl" | "xl2";
+type CssSetVarKeys = `--${string}`;
+type CssSetVarScalar = string | number;
+type CssSetVarValue = CssSetVarScalar | {
+    default?: CssSetVarScalar;
+    media?: Partial<Record<Breakpoint, CssSetVarScalar>>;
+    container?: Array<{
+        name?: string;
+        gt?: number;
+        lt?: number;
+        value: CssSetVarScalar;
+    }>;
+};
 declare module "react" {
     interface HTMLAttributes<T> {
         css?: Properties;
@@ -515,39 +527,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     cn(value: Properties["containerName"]): CssBuilder<T & {
         containerName: csstype.Property.ContainerName | undefined;
     }, S>;
-    /** Sets `top: "0px"`. */
+    /** Sets `top: "calc(var(--t-spacing) * 0)"`. */
     get top0(): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
-    /** Sets `top: "8px"`. */
+    /** Sets `top: "calc(var(--t-spacing) * 1)"`. */
     get top1(): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
-    /** Sets `top: "16px"`. */
+    /** Sets `top: "calc(var(--t-spacing) * 2)"`. */
     get top2(): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
-    /** Sets `top: "24px"`. */
+    /** Sets `top: "calc(var(--t-spacing) * 3)"`. */
     get top3(): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
-    /** Sets `top: "32px"`. */
+    /** Sets `top: "calc(var(--t-spacing) * 4)"`. */
     get top4(): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
-    /** Sets `top: "40px"`. */
+    /** Sets `top: "calc(var(--t-spacing) * 5)"`. */
     get top5(): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
-    /** Sets `top: "48px"`. */
+    /** Sets `top: "calc(var(--t-spacing) * 6)"`. */
     get top6(): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
-    /** Sets `top: "56px"`. */
+    /** Sets `top: "calc(var(--t-spacing) * 7)"`. */
     get top7(): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
-    /** Sets `top: "64px"`. */
+    /** Sets `top: "calc(var(--t-spacing) * 8)"`. */
     get top8(): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
@@ -559,39 +571,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     topPx(px: number): CssBuilder<T & {
         top: csstype.Property.Top<string | 0> | undefined;
     }, S>;
-    /** Sets `right: "0px"`. */
+    /** Sets `right: "calc(var(--t-spacing) * 0)"`. */
     get right0(): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
-    /** Sets `right: "8px"`. */
+    /** Sets `right: "calc(var(--t-spacing) * 1)"`. */
     get right1(): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
-    /** Sets `right: "16px"`. */
+    /** Sets `right: "calc(var(--t-spacing) * 2)"`. */
     get right2(): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
-    /** Sets `right: "24px"`. */
+    /** Sets `right: "calc(var(--t-spacing) * 3)"`. */
     get right3(): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
-    /** Sets `right: "32px"`. */
+    /** Sets `right: "calc(var(--t-spacing) * 4)"`. */
     get right4(): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
-    /** Sets `right: "40px"`. */
+    /** Sets `right: "calc(var(--t-spacing) * 5)"`. */
     get right5(): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
-    /** Sets `right: "48px"`. */
+    /** Sets `right: "calc(var(--t-spacing) * 6)"`. */
     get right6(): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
-    /** Sets `right: "56px"`. */
+    /** Sets `right: "calc(var(--t-spacing) * 7)"`. */
     get right7(): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
-    /** Sets `right: "64px"`. */
+    /** Sets `right: "calc(var(--t-spacing) * 8)"`. */
     get right8(): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
@@ -603,39 +615,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     rightPx(px: number): CssBuilder<T & {
         right: csstype.Property.Right<string | 0> | undefined;
     }, S>;
-    /** Sets `bottom: "0px"`. */
+    /** Sets `bottom: "calc(var(--t-spacing) * 0)"`. */
     get bottom0(): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
-    /** Sets `bottom: "8px"`. */
+    /** Sets `bottom: "calc(var(--t-spacing) * 1)"`. */
     get bottom1(): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
-    /** Sets `bottom: "16px"`. */
+    /** Sets `bottom: "calc(var(--t-spacing) * 2)"`. */
     get bottom2(): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
-    /** Sets `bottom: "24px"`. */
+    /** Sets `bottom: "calc(var(--t-spacing) * 3)"`. */
     get bottom3(): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
-    /** Sets `bottom: "32px"`. */
+    /** Sets `bottom: "calc(var(--t-spacing) * 4)"`. */
     get bottom4(): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
-    /** Sets `bottom: "40px"`. */
+    /** Sets `bottom: "calc(var(--t-spacing) * 5)"`. */
     get bottom5(): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
-    /** Sets `bottom: "48px"`. */
+    /** Sets `bottom: "calc(var(--t-spacing) * 6)"`. */
     get bottom6(): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
-    /** Sets `bottom: "56px"`. */
+    /** Sets `bottom: "calc(var(--t-spacing) * 7)"`. */
     get bottom7(): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
-    /** Sets `bottom: "64px"`. */
+    /** Sets `bottom: "calc(var(--t-spacing) * 8)"`. */
     get bottom8(): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
@@ -647,39 +659,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     bottomPx(px: number): CssBuilder<T & {
         bottom: csstype.Property.Bottom<string | 0> | undefined;
     }, S>;
-    /** Sets `left: "0px"`. */
+    /** Sets `left: "calc(var(--t-spacing) * 0)"`. */
     get left0(): CssBuilder<T & {
         left: csstype.Property.Left<string | 0> | undefined;
     }, S>;
-    /** Sets `left: "8px"`. */
+    /** Sets `left: "calc(var(--t-spacing) * 1)"`. */
     get left1(): CssBuilder<T & {
         left: csstype.Property.Left<string | 0> | undefined;
     }, S>;
-    /** Sets `left: "16px"`. */
+    /** Sets `left: "calc(var(--t-spacing) * 2)"`. */
     get left2(): CssBuilder<T & {
         left: csstype.Property.Left<string | 0> | undefined;
     }, S>;
-    /** Sets `left: "24px"`. */
+    /** Sets `left: "calc(var(--t-spacing) * 3)"`. */
     get left3(): CssBuilder<T & {
         left: csstype.Property.Left<string | 0> | undefined;
     }, S>;
-    /** Sets `left: "32px"`. */
+    /** Sets `left: "calc(var(--t-spacing) * 4)"`. */
     get left4(): CssBuilder<T & {
         left: csstype.Property.Left<string | 0> | undefined;
     }, S>;
-    /** Sets `left: "40px"`. */
+    /** Sets `left: "calc(var(--t-spacing) * 5)"`. */
     get left5(): CssBuilder<T & {
         left: csstype.Property.Left<string | 0> | undefined;
     }, S>;
-    /** Sets `left: "48px"`. */
+    /** Sets `left: "calc(var(--t-spacing) * 6)"`. */
     get left6(): CssBuilder<T & {
         left: csstype.Property.Left<string | 0> | undefined;
     }, S>;
-    /** Sets `left: "56px"`. */
+    /** Sets `left: "calc(var(--t-spacing) * 7)"`. */
     get left7(): CssBuilder<T & {
         left: csstype.Property.Left<string | 0> | undefined;
     }, S>;
-    /** Sets `left: "64px"`. */
+    /** Sets `left: "calc(var(--t-spacing) * 8)"`. */
     get left8(): CssBuilder<T & {
         left: csstype.Property.Left<string | 0> | undefined;
     }, S>;
@@ -1215,39 +1227,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     gac(value: Properties["gridAutoColumns"]): CssBuilder<T & {
         gridAutoColumns: csstype.Property.GridAutoColumns<string | 0> | undefined;
     }, S>;
-    /** Sets `gap: "0px"`. */
+    /** Sets `gap: "calc(var(--t-spacing) * 0)"`. */
     get gap0(): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
-    /** Sets `gap: "8px"`. */
+    /** Sets `gap: "calc(var(--t-spacing) * 1)"`. */
     get gap1(): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
-    /** Sets `gap: "16px"`. */
+    /** Sets `gap: "calc(var(--t-spacing) * 2)"`. */
     get gap2(): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
-    /** Sets `gap: "24px"`. */
+    /** Sets `gap: "calc(var(--t-spacing) * 3)"`. */
     get gap3(): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
-    /** Sets `gap: "32px"`. */
+    /** Sets `gap: "calc(var(--t-spacing) * 4)"`. */
     get gap4(): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
-    /** Sets `gap: "40px"`. */
+    /** Sets `gap: "calc(var(--t-spacing) * 5)"`. */
     get gap5(): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
-    /** Sets `gap: "48px"`. */
+    /** Sets `gap: "calc(var(--t-spacing) * 6)"`. */
     get gap6(): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
-    /** Sets `gap: "56px"`. */
+    /** Sets `gap: "calc(var(--t-spacing) * 7)"`. */
     get gap7(): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
-    /** Sets `gap: "64px"`. */
+    /** Sets `gap: "calc(var(--t-spacing) * 8)"`. */
     get gap8(): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
@@ -1259,39 +1271,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     gapPx(px: number): CssBuilder<T & {
         gap: csstype.Property.Gap<string | 0> | undefined;
     }, S>;
-    /** Sets `rowGap: "0px"`. */
+    /** Sets `rowGap: "calc(var(--t-spacing) * 0)"`. */
     get rg0(): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
-    /** Sets `rowGap: "8px"`. */
+    /** Sets `rowGap: "calc(var(--t-spacing) * 1)"`. */
     get rg1(): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
-    /** Sets `rowGap: "16px"`. */
+    /** Sets `rowGap: "calc(var(--t-spacing) * 2)"`. */
     get rg2(): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
-    /** Sets `rowGap: "24px"`. */
+    /** Sets `rowGap: "calc(var(--t-spacing) * 3)"`. */
     get rg3(): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
-    /** Sets `rowGap: "32px"`. */
+    /** Sets `rowGap: "calc(var(--t-spacing) * 4)"`. */
     get rg4(): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
-    /** Sets `rowGap: "40px"`. */
+    /** Sets `rowGap: "calc(var(--t-spacing) * 5)"`. */
     get rg5(): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
-    /** Sets `rowGap: "48px"`. */
+    /** Sets `rowGap: "calc(var(--t-spacing) * 6)"`. */
     get rg6(): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
-    /** Sets `rowGap: "56px"`. */
+    /** Sets `rowGap: "calc(var(--t-spacing) * 7)"`. */
     get rg7(): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
-    /** Sets `rowGap: "64px"`. */
+    /** Sets `rowGap: "calc(var(--t-spacing) * 8)"`. */
     get rg8(): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
@@ -1303,39 +1315,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     rgPx(px: number): CssBuilder<T & {
         rowGap: csstype.Property.RowGap<string | 0> | undefined;
     }, S>;
-    /** Sets `columnGap: "0px"`. */
+    /** Sets `columnGap: "calc(var(--t-spacing) * 0)"`. */
     get cg0(): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
-    /** Sets `columnGap: "8px"`. */
+    /** Sets `columnGap: "calc(var(--t-spacing) * 1)"`. */
     get cg1(): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
-    /** Sets `columnGap: "16px"`. */
+    /** Sets `columnGap: "calc(var(--t-spacing) * 2)"`. */
     get cg2(): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
-    /** Sets `columnGap: "24px"`. */
+    /** Sets `columnGap: "calc(var(--t-spacing) * 3)"`. */
     get cg3(): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
-    /** Sets `columnGap: "32px"`. */
+    /** Sets `columnGap: "calc(var(--t-spacing) * 4)"`. */
     get cg4(): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
-    /** Sets `columnGap: "40px"`. */
+    /** Sets `columnGap: "calc(var(--t-spacing) * 5)"`. */
     get cg5(): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
-    /** Sets `columnGap: "48px"`. */
+    /** Sets `columnGap: "calc(var(--t-spacing) * 6)"`. */
     get cg6(): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
-    /** Sets `columnGap: "56px"`. */
+    /** Sets `columnGap: "calc(var(--t-spacing) * 7)"`. */
     get cg7(): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
-    /** Sets `columnGap: "64px"`. */
+    /** Sets `columnGap: "calc(var(--t-spacing) * 8)"`. */
     get cg8(): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
@@ -1347,39 +1359,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     cgPx(px: number): CssBuilder<T & {
         columnGap: csstype.Property.ColumnGap<string | 0> | undefined;
     }, S>;
-    /** Sets `height: "0px"`. */
+    /** Sets `height: "calc(var(--t-spacing) * 0)"`. */
     get h0(): CssBuilder<T & {
         height: csstype.Property.Height<string | 0> | undefined;
     }, S>;
-    /** Sets `height: "8px"`. */
+    /** Sets `height: "calc(var(--t-spacing) * 1)"`. */
     get h1(): CssBuilder<T & {
         height: csstype.Property.Height<string | 0> | undefined;
     }, S>;
-    /** Sets `height: "16px"`. */
+    /** Sets `height: "calc(var(--t-spacing) * 2)"`. */
     get h2(): CssBuilder<T & {
         height: csstype.Property.Height<string | 0> | undefined;
     }, S>;
-    /** Sets `height: "24px"`. */
+    /** Sets `height: "calc(var(--t-spacing) * 3)"`. */
     get h3(): CssBuilder<T & {
         height: csstype.Property.Height<string | 0> | undefined;
     }, S>;
-    /** Sets `height: "32px"`. */
+    /** Sets `height: "calc(var(--t-spacing) * 4)"`. */
     get h4(): CssBuilder<T & {
         height: csstype.Property.Height<string | 0> | undefined;
     }, S>;
-    /** Sets `height: "40px"`. */
+    /** Sets `height: "calc(var(--t-spacing) * 5)"`. */
     get h5(): CssBuilder<T & {
         height: csstype.Property.Height<string | 0> | undefined;
     }, S>;
-    /** Sets `height: "48px"`. */
+    /** Sets `height: "calc(var(--t-spacing) * 6)"`. */
     get h6(): CssBuilder<T & {
         height: csstype.Property.Height<string | 0> | undefined;
     }, S>;
-    /** Sets `height: "56px"`. */
+    /** Sets `height: "calc(var(--t-spacing) * 7)"`. */
     get h7(): CssBuilder<T & {
         height: csstype.Property.Height<string | 0> | undefined;
     }, S>;
-    /** Sets `height: "64px"`. */
+    /** Sets `height: "calc(var(--t-spacing) * 8)"`. */
     get h8(): CssBuilder<T & {
         height: csstype.Property.Height<string | 0> | undefined;
     }, S>;
@@ -2617,39 +2629,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     fill(value: Properties["fill"]): CssBuilder<T & {
         fill: csstype.Property.Fill | undefined;
     }, S>;
-    /** Sets `marginTop: "0px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 0)"`. */
     get mt0(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "8px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 1)"`. */
     get mt1(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "16px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 2)"`. */
     get mt2(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "24px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 3)"`. */
     get mt3(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "32px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 4)"`. */
     get mt4(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "40px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 5)"`. */
     get mt5(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "48px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 6)"`. */
     get mt6(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "56px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 7)"`. */
     get mt7(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "64px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 8)"`. */
     get mt8(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
@@ -2665,39 +2677,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     mtPx(px: number): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     }, S>;
-    /** Sets `marginRight: "0px"`. */
+    /** Sets `marginRight: "calc(var(--t-spacing) * 0)"`. */
     get mr0(): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginRight: "8px"`. */
+    /** Sets `marginRight: "calc(var(--t-spacing) * 1)"`. */
     get mr1(): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginRight: "16px"`. */
+    /** Sets `marginRight: "calc(var(--t-spacing) * 2)"`. */
     get mr2(): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginRight: "24px"`. */
+    /** Sets `marginRight: "calc(var(--t-spacing) * 3)"`. */
     get mr3(): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginRight: "32px"`. */
+    /** Sets `marginRight: "calc(var(--t-spacing) * 4)"`. */
     get mr4(): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginRight: "40px"`. */
+    /** Sets `marginRight: "calc(var(--t-spacing) * 5)"`. */
     get mr5(): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginRight: "48px"`. */
+    /** Sets `marginRight: "calc(var(--t-spacing) * 6)"`. */
     get mr6(): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginRight: "56px"`. */
+    /** Sets `marginRight: "calc(var(--t-spacing) * 7)"`. */
     get mr7(): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginRight: "64px"`. */
+    /** Sets `marginRight: "calc(var(--t-spacing) * 8)"`. */
     get mr8(): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
@@ -2713,39 +2725,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     mrPx(px: number): CssBuilder<T & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginBottom: "0px"`. */
+    /** Sets `marginBottom: "calc(var(--t-spacing) * 0)"`. */
     get mb0(): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginBottom: "8px"`. */
+    /** Sets `marginBottom: "calc(var(--t-spacing) * 1)"`. */
     get mb1(): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginBottom: "16px"`. */
+    /** Sets `marginBottom: "calc(var(--t-spacing) * 2)"`. */
     get mb2(): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginBottom: "24px"`. */
+    /** Sets `marginBottom: "calc(var(--t-spacing) * 3)"`. */
     get mb3(): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginBottom: "32px"`. */
+    /** Sets `marginBottom: "calc(var(--t-spacing) * 4)"`. */
     get mb4(): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginBottom: "40px"`. */
+    /** Sets `marginBottom: "calc(var(--t-spacing) * 5)"`. */
     get mb5(): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginBottom: "48px"`. */
+    /** Sets `marginBottom: "calc(var(--t-spacing) * 6)"`. */
     get mb6(): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginBottom: "56px"`. */
+    /** Sets `marginBottom: "calc(var(--t-spacing) * 7)"`. */
     get mb7(): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginBottom: "64px"`. */
+    /** Sets `marginBottom: "calc(var(--t-spacing) * 8)"`. */
     get mb8(): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
@@ -2761,39 +2773,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     mbPx(px: number): CssBuilder<T & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "0px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 0)"`. */
     get ml0(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "8px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 1)"`. */
     get ml1(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "16px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 2)"`. */
     get ml2(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "24px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 3)"`. */
     get ml3(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "32px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 4)"`. */
     get ml4(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "40px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 5)"`. */
     get ml5(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "48px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 6)"`. */
     get ml6(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "56px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 7)"`. */
     get ml7(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "64px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 8)"`. */
     get ml8(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
@@ -2809,55 +2821,55 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     mlPx(px: number): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "0px"; marginRight: "0px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 0)"; marginRight: "calc(var(--t-spacing) * 0)"`. */
     get mx0(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     } & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "8px"; marginRight: "8px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 1)"; marginRight: "calc(var(--t-spacing) * 1)"`. */
     get mx1(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     } & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "16px"; marginRight: "16px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 2)"; marginRight: "calc(var(--t-spacing) * 2)"`. */
     get mx2(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     } & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "24px"; marginRight: "24px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 3)"; marginRight: "calc(var(--t-spacing) * 3)"`. */
     get mx3(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     } & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "32px"; marginRight: "32px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 4)"; marginRight: "calc(var(--t-spacing) * 4)"`. */
     get mx4(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     } & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "40px"; marginRight: "40px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 5)"; marginRight: "calc(var(--t-spacing) * 5)"`. */
     get mx5(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     } & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "48px"; marginRight: "48px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 6)"; marginRight: "calc(var(--t-spacing) * 6)"`. */
     get mx6(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     } & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "56px"; marginRight: "56px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 7)"; marginRight: "calc(var(--t-spacing) * 7)"`. */
     get mx7(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     } & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginLeft: "64px"; marginRight: "64px"`. */
+    /** Sets `marginLeft: "calc(var(--t-spacing) * 8)"; marginRight: "calc(var(--t-spacing) * 8)"`. */
     get mx8(): CssBuilder<T & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     } & {
@@ -2881,55 +2893,55 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginRight: csstype.Property.MarginRight<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "0px"; marginBottom: "0px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 0)"; marginBottom: "calc(var(--t-spacing) * 0)"`. */
     get my0(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "8px"; marginBottom: "8px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 1)"; marginBottom: "calc(var(--t-spacing) * 1)"`. */
     get my1(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "16px"; marginBottom: "16px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 2)"; marginBottom: "calc(var(--t-spacing) * 2)"`. */
     get my2(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "24px"; marginBottom: "24px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 3)"; marginBottom: "calc(var(--t-spacing) * 3)"`. */
     get my3(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "32px"; marginBottom: "32px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 4)"; marginBottom: "calc(var(--t-spacing) * 4)"`. */
     get my4(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "40px"; marginBottom: "40px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 5)"; marginBottom: "calc(var(--t-spacing) * 5)"`. */
     get my5(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "48px"; marginBottom: "48px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 6)"; marginBottom: "calc(var(--t-spacing) * 6)"`. */
     get my6(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "56px"; marginBottom: "56px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 7)"; marginBottom: "calc(var(--t-spacing) * 7)"`. */
     get my7(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `marginTop: "64px"; marginBottom: "64px"`. */
+    /** Sets `marginTop: "calc(var(--t-spacing) * 8)"; marginBottom: "calc(var(--t-spacing) * 8)"`. */
     get my8(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -2953,7 +2965,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginBottom: csstype.Property.MarginBottom<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -2963,7 +2975,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -2973,7 +2985,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -2983,7 +2995,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -2993,7 +3005,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -3003,7 +3015,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -3013,7 +3025,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -3023,7 +3035,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -3033,7 +3045,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         marginTop: csstype.Property.MarginTop<string | 0> | undefined;
     } & {
@@ -3073,39 +3085,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         marginLeft: csstype.Property.MarginLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "0px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 0)"`. */
     get pt0(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "8px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 1)"`. */
     get pt1(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "16px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 2)"`. */
     get pt2(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "24px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 3)"`. */
     get pt3(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "32px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 4)"`. */
     get pt4(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "40px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 5)"`. */
     get pt5(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "48px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 6)"`. */
     get pt6(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "56px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 7)"`. */
     get pt7(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "64px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 8)"`. */
     get pt8(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
@@ -3117,39 +3129,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     ptPx(px: number): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingRight: "0px"`. */
+    /** Sets `paddingRight: "calc(var(--t-spacing) * 0)"`. */
     get pr0(): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingRight: "8px"`. */
+    /** Sets `paddingRight: "calc(var(--t-spacing) * 1)"`. */
     get pr1(): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingRight: "16px"`. */
+    /** Sets `paddingRight: "calc(var(--t-spacing) * 2)"`. */
     get pr2(): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingRight: "24px"`. */
+    /** Sets `paddingRight: "calc(var(--t-spacing) * 3)"`. */
     get pr3(): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingRight: "32px"`. */
+    /** Sets `paddingRight: "calc(var(--t-spacing) * 4)"`. */
     get pr4(): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingRight: "40px"`. */
+    /** Sets `paddingRight: "calc(var(--t-spacing) * 5)"`. */
     get pr5(): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingRight: "48px"`. */
+    /** Sets `paddingRight: "calc(var(--t-spacing) * 6)"`. */
     get pr6(): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingRight: "56px"`. */
+    /** Sets `paddingRight: "calc(var(--t-spacing) * 7)"`. */
     get pr7(): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingRight: "64px"`. */
+    /** Sets `paddingRight: "calc(var(--t-spacing) * 8)"`. */
     get pr8(): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
@@ -3161,39 +3173,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     prPx(px: number): CssBuilder<T & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingBottom: "0px"`. */
+    /** Sets `paddingBottom: "calc(var(--t-spacing) * 0)"`. */
     get pb0(): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingBottom: "8px"`. */
+    /** Sets `paddingBottom: "calc(var(--t-spacing) * 1)"`. */
     get pb1(): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingBottom: "16px"`. */
+    /** Sets `paddingBottom: "calc(var(--t-spacing) * 2)"`. */
     get pb2(): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingBottom: "24px"`. */
+    /** Sets `paddingBottom: "calc(var(--t-spacing) * 3)"`. */
     get pb3(): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingBottom: "32px"`. */
+    /** Sets `paddingBottom: "calc(var(--t-spacing) * 4)"`. */
     get pb4(): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingBottom: "40px"`. */
+    /** Sets `paddingBottom: "calc(var(--t-spacing) * 5)"`. */
     get pb5(): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingBottom: "48px"`. */
+    /** Sets `paddingBottom: "calc(var(--t-spacing) * 6)"`. */
     get pb6(): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingBottom: "56px"`. */
+    /** Sets `paddingBottom: "calc(var(--t-spacing) * 7)"`. */
     get pb7(): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingBottom: "64px"`. */
+    /** Sets `paddingBottom: "calc(var(--t-spacing) * 8)"`. */
     get pb8(): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
@@ -3205,39 +3217,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     pbPx(px: number): CssBuilder<T & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "0px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 0)"`. */
     get pl0(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "8px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 1)"`. */
     get pl1(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "16px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 2)"`. */
     get pl2(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "24px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 3)"`. */
     get pl3(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "32px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 4)"`. */
     get pl4(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "40px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 5)"`. */
     get pl5(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "48px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 6)"`. */
     get pl6(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "56px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 7)"`. */
     get pl7(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "64px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 8)"`. */
     get pl8(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
@@ -3249,55 +3261,55 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     plPx(px: number): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "0px"; paddingRight: "0px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 0)"; paddingRight: "calc(var(--t-spacing) * 0)"`. */
     get px0(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     } & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "8px"; paddingRight: "8px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 1)"; paddingRight: "calc(var(--t-spacing) * 1)"`. */
     get px1(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     } & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "16px"; paddingRight: "16px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 2)"; paddingRight: "calc(var(--t-spacing) * 2)"`. */
     get px2(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     } & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "24px"; paddingRight: "24px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 3)"; paddingRight: "calc(var(--t-spacing) * 3)"`. */
     get px3(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     } & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "32px"; paddingRight: "32px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 4)"; paddingRight: "calc(var(--t-spacing) * 4)"`. */
     get px4(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     } & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "40px"; paddingRight: "40px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 5)"; paddingRight: "calc(var(--t-spacing) * 5)"`. */
     get px5(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     } & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "48px"; paddingRight: "48px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 6)"; paddingRight: "calc(var(--t-spacing) * 6)"`. */
     get px6(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     } & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "56px"; paddingRight: "56px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 7)"; paddingRight: "calc(var(--t-spacing) * 7)"`. */
     get px7(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     } & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingLeft: "64px"; paddingRight: "64px"`. */
+    /** Sets `paddingLeft: "calc(var(--t-spacing) * 8)"; paddingRight: "calc(var(--t-spacing) * 8)"`. */
     get px8(): CssBuilder<T & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     } & {
@@ -3315,55 +3327,55 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "0px"; paddingBottom: "0px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 0)"; paddingBottom: "calc(var(--t-spacing) * 0)"`. */
     get py0(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "8px"; paddingBottom: "8px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 1)"; paddingBottom: "calc(var(--t-spacing) * 1)"`. */
     get py1(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "16px"; paddingBottom: "16px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 2)"; paddingBottom: "calc(var(--t-spacing) * 2)"`. */
     get py2(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "24px"; paddingBottom: "24px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 3)"; paddingBottom: "calc(var(--t-spacing) * 3)"`. */
     get py3(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "32px"; paddingBottom: "32px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 4)"; paddingBottom: "calc(var(--t-spacing) * 4)"`. */
     get py4(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "40px"; paddingBottom: "40px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 5)"; paddingBottom: "calc(var(--t-spacing) * 5)"`. */
     get py5(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "48px"; paddingBottom: "48px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 6)"; paddingBottom: "calc(var(--t-spacing) * 6)"`. */
     get py6(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "56px"; paddingBottom: "56px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 7)"; paddingBottom: "calc(var(--t-spacing) * 7)"`. */
     get py7(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** Sets `paddingTop: "64px"; paddingBottom: "64px"`. */
+    /** Sets `paddingTop: "calc(var(--t-spacing) * 8)"; paddingBottom: "calc(var(--t-spacing) * 8)"`. */
     get py8(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3381,7 +3393,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingBottom: csstype.Property.PaddingBottom<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3391,7 +3403,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3401,7 +3413,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3411,7 +3423,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3421,7 +3433,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3431,7 +3443,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3441,7 +3453,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3451,7 +3463,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3461,7 +3473,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
     }, S>;
-    /** 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(): CssBuilder<T & {
         paddingTop: csstype.Property.PaddingTop<string | 0> | undefined;
     } & {
@@ -3871,39 +3883,39 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     maxwPx(px: number): CssBuilder<T & {
         maxWidth: csstype.Property.MaxWidth<string | 0> | undefined;
     }, S>;
-    /** Sets `width: "0px"`. */
+    /** Sets `width: "calc(var(--t-spacing) * 0)"`. */
     get w0(): CssBuilder<T & {
         width: csstype.Property.Width<string | 0> | undefined;
     }, S>;
-    /** Sets `width: "8px"`. */
+    /** Sets `width: "calc(var(--t-spacing) * 1)"`. */
     get w1(): CssBuilder<T & {
         width: csstype.Property.Width<string | 0> | undefined;
     }, S>;
-    /** Sets `width: "16px"`. */
+    /** Sets `width: "calc(var(--t-spacing) * 2)"`. */
     get w2(): CssBuilder<T & {
         width: csstype.Property.Width<string | 0> | undefined;
     }, S>;
-    /** Sets `width: "24px"`. */
+    /** Sets `width: "calc(var(--t-spacing) * 3)"`. */
     get w3(): CssBuilder<T & {
         width: csstype.Property.Width<string | 0> | undefined;
     }, S>;
-    /** Sets `width: "32px"`. */
+    /** Sets `width: "calc(var(--t-spacing) * 4)"`. */
     get w4(): CssBuilder<T & {
         width: csstype.Property.Width<string | 0> | undefined;
     }, S>;
-    /** Sets `width: "40px"`. */
+    /** Sets `width: "calc(var(--t-spacing) * 5)"`. */
     get w5(): CssBuilder<T & {
         width: csstype.Property.Width<string | 0> | undefined;
     }, S>;
-    /** Sets `width: "48px"`. */
+    /** Sets `width: "calc(var(--t-spacing) * 6)"`. */
     get w6(): CssBuilder<T & {
         width: csstype.Property.Width<string | 0> | undefined;
     }, S>;
-    /** Sets `width: "56px"`. */
+    /** Sets `width: "calc(var(--t-spacing) * 7)"`. */
     get w7(): CssBuilder<T & {
         width: csstype.Property.Width<string | 0> | undefined;
     }, S>;
-    /** Sets `width: "64px"`. */
+    /** Sets `width: "calc(var(--t-spacing) * 8)"`. */
     get w8(): CssBuilder<T & {
         width: csstype.Property.Width<string | 0> | undefined;
     }, S>;
@@ -4098,6 +4110,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
      *
      * `when(":hover")` — same semantics as `onHover`
      * `when(":hover:not(:disabled)")` — hover only while enabled
+     * `when('[data-state="open"]')` — match an element state attribute
      */
     when(selector: string): CssBuilder<T, S>;
     /**
@@ -4110,7 +4123,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     /**
      * Apply different styles for each selector in the object.
      *
-     * `when({ ":hover": Css.blue.$, ":focus": Css.red.$ })`
+     * `when({ ":hover": Css.blue.$, '[data-state="open"]': Css.red.$ })`
      */
     when<W extends Record<string, Properties>>(selectors: W): CssBuilder<T & UnionToIntersection<W[keyof W]>, S>;
     ifContainer(_props: {
@@ -4146,6 +4159,8 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     className(className: string | undefined): CssBuilder<T, S>;
     /** Marker for the build-time transform to append raw inline styles. */
     style(inlineStyle: InlineStyle): CssBuilder<T, S>;
+    /** Set CSS custom properties via atomic classes (resolved at build time on web). */
+    setVar(_values: Partial<Record<CssSetVarKeys, CssSetVarValue>>): CssBuilder<T, S>;
     /** Convert a style hash into `{ className, style }` props for manual spreading into non-`css=` contexts. */
     props(styles: Properties): Record<string, unknown>;
     /** Tagged template literal for raw CSS in .css.ts files; passes through the string as-is. */
@@ -4156,7 +4171,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     private unsupportedRuntime;
     private newCss;
 }
-/** Converts `inc` into pixels value with a `px` suffix. */
+/** Converts `inc` into a spacing length using `--t-spacing` (build-time atomic CSS). */
 declare function maybeInc(inc: number | string): string;
 /** Converts `inc` into pixels. */
 declare function increment(inc: number): number;
@@ -6639,6 +6654,7 @@ type RadioFieldOption<K extends string> = {
     /** Disable only specific option, with an optional reason */
     disabled?: boolean | ReactNode;
 };
+type RadioGroupFieldLayout = "vertical" | "horizontal";
 type RadioGroupFieldProps<K extends string> = {
     /** The label for the choice itself, i.e. "Favorite Cheese". */
     label: string;
@@ -6653,6 +6669,8 @@ type RadioGroupFieldProps<K extends string> = {
     helperText?: string | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;
+    /** Direction of the options. Defaults to "vertical". */
+    layout?: RadioGroupFieldLayout;
 } & Pick<PresentationFieldProps, "labelStyle">;
 /**
  * Provides a radio group with label.
@@ -7668,173 +7686,6 @@ type HeaderBreadcrumb = {
     right?: ReactNode;
 };
-type FormSection<F> = {
-    title?: string;
-    icon?: IconKey;
-    rows: BoundFormInputConfig<F>;
-};
-type FormSectionConfig<F> = FormSection<F>[];
-type ActionButtonProps$1 = Pick<ButtonProps, "onClick" | "label" | "disabled" | "tooltip">;
-type FormPageLayoutProps<F> = {
-    pageTitle: string;
-    breadCrumb?: HeaderBreadcrumb | HeaderBreadcrumb[];
-    formState: ObjectState<F>;
-    formSections: FormSectionConfig<F>;
-    submitAction: ActionButtonProps$1;
-    cancelAction?: ActionButtonProps$1;
-    tertiaryAction?: ActionButtonProps$1;
-    rightSideBar?: SidebarContentProps[];
-};
-declare function FormPageLayoutComponent<F>(props: FormPageLayoutProps<F>): JSX.Element;
-declare const FormPageLayout: typeof FormPageLayoutComponent;
-/** Provides a way to extend the full width of the ScrollableParent */
-declare function FullBleed({ children, omitPadding }: {
-    children: ReactElement;
-    omitPadding?: boolean;
-}): ReactElement<any, string | React$1.JSXElementConstructor<any>>;
-type BreakpointsType = Record<Breakpoint, boolean>;
-/**
- * A React hook to return a record of responsive breakpoints that updates on resize.
- *
- * @example
- * const breakpoints = useBreakpoint();
- * if (breakpoints.mdAndDown) { ...do something cool }
- */
-declare function useBreakpoint(): BreakpointsType;
-/**
- * Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes.
- *
- * Some examples:
- *
- * ```ts
- * // Good, watching a single value
- * const firstName = useComputed(() => author.firstName, [author]);
- *
- * // Good, watching multiple values in a single `useComputed`
- * const { firstName, lastName } = useComputed(() => {
- *   // Make sure to read the values
- *   const { firstName, lastName } = author;
- *   return { firstName, lastName };
- * }, [author]);
- *
- * // Good, watching a form-state field
- * const firstName = useComputed(() => {
- *   return formState.firstName.value;
- * }, [formState]);
- *
- * // Good, watching an observable `formState` + a POJO/immutable `items` which is not an observable
- * const item = useComputed(() => {
- *   return items.find((i) => i.id === formState.itemId.value);
- * }, [formState, items]);
- *
- * // Bad, fn and deps are "watching the same thing".
- * const firstName = useComputed(() => {
- *   return formState.firstName.value;
- * }, [formState.firstName.value]);
- * ```
- *
- * Note that the difference between the `fn` and the `deps` is:
- *
- * - `fn` is "which values we are watching in the observable" (i.e. store or `formState`), and
- * - `deps` is "which observable we're watching" (i.e. store or `formState`)
- *
- * So the `deps` array shouldn't overlap with any of the "watched values" of the `fn` lambda,
- * other than the root observer itself (which admittedly should rarely change, i.e. our stores
- * are generally global-ish/very stable, but can change if the user switches pages i.e. "from
- * editing author:1 t editing author:2").
- */
-declare function useComputed<T>(fn: (prev: T | undefined) => T, deps: readonly any[]): T;
-interface UsePersistedFilterProps$1<F> {
-    filterDefs: FilterDefs<F>;
-}
-interface FilterHook<F> {
-    filter: F;
-    setFilter: (filter: F) => void;
-}
-declare function useFilter<F>({ filterDefs }: UsePersistedFilterProps$1<F>): FilterHook<F>;
-interface GroupByHook<G extends string> {
-    /** The current group by value. */
-    value: G;
-    /** Called when the group by have changed. */
-    setValue: (groupBy: G) => void;
-    /** The list of group by options. */
-    options: Array<{
-        id: G;
-        name: string;
-    }>;
-}
-declare function useGroupBy<G extends string>(opts: Record<G, string>): GroupByHook<G>;
-interface useHoverProps {
-    onHoverStart?: VoidFunction;
-    onHoverEnd?: VoidFunction;
-    onHoverChange?: (isHovering: boolean) => void;
-    disabled?: boolean;
-}
-declare function useHover(props: useHoverProps): {
-    hoverProps: HTMLAttributes<HTMLElement>;
-    isHovered: boolean;
-};
-type UsePersistedFilterProps<F> = {
-    filterDefs: FilterDefs<F>;
-    storageKey: string;
-};
-type PersistedFilterHook<F> = {
-    filter: F;
-    setFilter: (filter: F) => void;
-};
-/**
- * Persists filter details in both browser storage and query parameters.
- * If a valid filter is present in the query params, then that will be used.
- * Otherwise it looks at browser storage, and finally the defaultFilter prop.
- */
-declare function usePersistedFilter<F>({ storageKey, filterDefs }: UsePersistedFilterProps<F>): PersistedFilterHook<F>;
-type UseQueryState<V> = [V, (value: V) => void];
-/**
- * Very similar to `useState` but persists in the query string.
- *
- * It currently doesn't fallback on session storage, which maybe it should if
- * this is used for group bys, b/c that is what usePersistedFilter does.
- *
- * Also only supports string values right now.
- */
-declare function useQueryState<V extends string = string>(name: string, initialValue: V): UseQueryState<V>;
-type UseSessionStorage<T> = [T, (value: T) => void];
-declare function useSessionStorage<T>(key: string, defaultValue: T): UseSessionStorage<T>;
-/**
- * Page settings, either a pageNumber+pageSize or offset+limit.
- *
- * This component is implemented in terms of "page number + page size",
- * but our backend wants offset+limit, so we accept both and translate.
- */
-type PageSettings = PageNumberAndSize | OffsetAndLimit;
-type PageNumberAndSize = {
-    pageNumber: number;
-    pageSize: number;
-};
-type OffsetAndLimit = {
-    offset: number;
-    limit: number;
-};
-declare const defaultPage: OffsetAndLimit;
-interface PaginationProps {
-    page: readonly [PageNumberAndSize, Dispatch<PageNumberAndSize>] | readonly [OffsetAndLimit, Dispatch<OffsetAndLimit>];
-    totalCount: number;
-    pageSizes?: number[];
-}
-declare function Pagination(props: PaginationProps): JSX.Element;
-declare function toLimitAndOffset(page: PageSettings): OffsetAndLimit;
-declare function toPageNumberSize(page: PageSettings): PageNumberAndSize;
 interface GridTableCollapseToggleProps extends Pick<IconButtonProps, "compact"> {
     row: GridDataRow<any>;
 }
@@ -8042,8 +7893,8 @@ type QueryResult<QData> = {
     data?: QData;
 };
-type ActionButtonMenuProps = Omit<ButtonMenuProps, "trigger">;
-type ActionButtonProps = Pick<ButtonProps, "onClick" | "label" | "disabled" | "tooltip">;
+/** Shared action button props used across layout header and panel components. */
+type ActionButtonProps = Pick<ButtonProps, "onClick" | "label" | "disabled" | "tooltip" | "icon">;
 type OmittedTableProps = "filter" | "stickyHeader" | "style" | "rows";
 type BaseTableProps<R extends Kinded, X extends Only<GridTableXss, X>> = Omit<GridTableProps<R, X>, OmittedTableProps>;
 type GridTablePropsWithRows<R extends Kinded, X extends Only<GridTableXss, X>> = BaseTableProps<R, X> & {
@@ -8051,20 +7902,193 @@ type GridTablePropsWithRows<R extends Kinded, X extends Only<GridTableXss, X>> =
     query?: never;
     createRows?: never;
 };
-type QueryTablePropsWithQuery<R extends Kinded, X extends Only<GridTableXss, X>, QData> = BaseTableProps<R, X> & {
+type BaseQueryTableProps<R extends Kinded, X extends Only<GridTableXss, X>, QData> = BaseTableProps<R, X> & {
     query: QueryResult<QData>;
     createRows: (data: QData | undefined) => GridDataRow<R>[];
+    rows?: never;
+};
+declare function isGridTableProps<R extends Kinded, X extends Only<GridTableXss, X>, Q extends {
+    rows?: never;
+}>(props: GridTablePropsWithRows<R, X> | Q): props is GridTablePropsWithRows<R, X>;
+type FormSection<F> = {
+    title?: string;
+    icon?: IconKey;
+    rows: BoundFormInputConfig<F>;
+};
+type FormSectionConfig<F> = FormSection<F>[];
+type FormPageLayoutProps<F> = {
+    pageTitle: ReactNode;
+    breadCrumb?: HeaderBreadcrumb | HeaderBreadcrumb[];
+    formState: ObjectState<F>;
+    formSections: FormSectionConfig<F>;
+    submitAction: ActionButtonProps;
+    cancelAction?: ActionButtonProps;
+    tertiaryAction?: ActionButtonProps;
+    rightSideBar?: SidebarContentProps[];
+};
+declare function FormPageLayoutComponent<F>(props: FormPageLayoutProps<F>): JSX.Element;
+declare const FormPageLayout: typeof FormPageLayoutComponent;
+/** Provides a way to extend the full width of the ScrollableParent */
+declare function FullBleed({ children, omitPadding }: {
+    children: ReactElement;
+    omitPadding?: boolean;
+}): ReactElement<any, string | React$1.JSXElementConstructor<any>>;
+type BreakpointsType = Record<Breakpoint, boolean>;
+/**
+ * A React hook to return a record of responsive breakpoints that updates on resize.
+ *
+ * @example
+ * const breakpoints = useBreakpoint();
+ * if (breakpoints.mdAndDown) { ...do something cool }
+ */
+declare function useBreakpoint(): BreakpointsType;
+/**
+ * Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes.
+ *
+ * Some examples:
+ *
+ * ```ts
+ * // Good, watching a single value
+ * const firstName = useComputed(() => author.firstName, [author]);
+ *
+ * // Good, watching multiple values in a single `useComputed`
+ * const { firstName, lastName } = useComputed(() => {
+ *   // Make sure to read the values
+ *   const { firstName, lastName } = author;
+ *   return { firstName, lastName };
+ * }, [author]);
+ *
+ * // Good, watching a form-state field
+ * const firstName = useComputed(() => {
+ *   return formState.firstName.value;
+ * }, [formState]);
+ *
+ * // Good, watching an observable `formState` + a POJO/immutable `items` which is not an observable
+ * const item = useComputed(() => {
+ *   return items.find((i) => i.id === formState.itemId.value);
+ * }, [formState, items]);
+ *
+ * // Bad, fn and deps are "watching the same thing".
+ * const firstName = useComputed(() => {
+ *   return formState.firstName.value;
+ * }, [formState.firstName.value]);
+ * ```
+ *
+ * Note that the difference between the `fn` and the `deps` is:
+ *
+ * - `fn` is "which values we are watching in the observable" (i.e. store or `formState`), and
+ * - `deps` is "which observable we're watching" (i.e. store or `formState`)
+ *
+ * So the `deps` array shouldn't overlap with any of the "watched values" of the `fn` lambda,
+ * other than the root observer itself (which admittedly should rarely change, i.e. our stores
+ * are generally global-ish/very stable, but can change if the user switches pages i.e. "from
+ * editing author:1 t editing author:2").
+ */
+declare function useComputed<T>(fn: (prev: T | undefined) => T, deps: readonly any[]): T;
+interface UsePersistedFilterProps$1<F> {
+    filterDefs: FilterDefs<F>;
+}
+interface FilterHook<F> {
+    filter: F;
+    setFilter: (filter: F) => void;
+}
+declare function useFilter<F>({ filterDefs }: UsePersistedFilterProps$1<F>): FilterHook<F>;
+interface GroupByHook<G extends string> {
+    /** The current group by value. */
+    value: G;
+    /** Called when the group by have changed. */
+    setValue: (groupBy: G) => void;
+    /** The list of group by options. */
+    options: Array<{
+        id: G;
+        name: string;
+    }>;
+}
+declare function useGroupBy<G extends string>(opts: Record<G, string>): GroupByHook<G>;
+interface useHoverProps {
+    onHoverStart?: VoidFunction;
+    onHoverEnd?: VoidFunction;
+    onHoverChange?: (isHovering: boolean) => void;
+    disabled?: boolean;
+}
+declare function useHover(props: useHoverProps): {
+    hoverProps: HTMLAttributes<HTMLElement>;
+    isHovered: boolean;
+};
+type UsePersistedFilterProps<F> = {
+    filterDefs: FilterDefs<F>;
+    storageKey: string;
+};
+type PersistedFilterHook<F> = {
+    filter: F;
+    setFilter: (filter: F) => void;
+};
+/**
+ * Persists filter details in both browser storage and query parameters.
+ * If a valid filter is present in the query params, then that will be used.
+ * Otherwise it looks at browser storage, and finally the defaultFilter prop.
+ */
+declare function usePersistedFilter<F>({ storageKey, filterDefs }: UsePersistedFilterProps<F>): PersistedFilterHook<F>;
+type UseQueryState<V> = [V, (value: V) => void];
+/**
+ * Very similar to `useState` but persists in the query string.
+ *
+ * It currently doesn't fallback on session storage, which maybe it should if
+ * this is used for group bys, b/c that is what usePersistedFilter does.
+ *
+ * Also only supports string values right now.
+ */
+declare function useQueryState<V extends string = string>(name: string, initialValue: V): UseQueryState<V>;
+type UseSessionStorage<T> = [T, (value: T) => void];
+declare function useSessionStorage<T>(key: string, defaultValue: T): UseSessionStorage<T>;
+/**
+ * Page settings, either a pageNumber+pageSize or offset+limit.
+ *
+ * This component is implemented in terms of "page number + page size",
+ * but our backend wants offset+limit, so we accept both and translate.
+ */
+type PageSettings = PageNumberAndSize | OffsetAndLimit;
+type PageNumberAndSize = {
+    pageNumber: number;
+    pageSize: number;
+};
+type OffsetAndLimit = {
+    offset: number;
+    limit: number;
+};
+declare const defaultPage: OffsetAndLimit;
+interface PaginationProps {
+    page: readonly [PageNumberAndSize, Dispatch<PageNumberAndSize>] | readonly [OffsetAndLimit, Dispatch<OffsetAndLimit>];
+    totalCount: number;
+    pageSizes?: number[];
+}
+declare function Pagination(props: PaginationProps): JSX.Element;
+declare function toLimitAndOffset(page: PageSettings): OffsetAndLimit;
+declare function toPageNumberSize(page: PageSettings): PageNumberAndSize;
+type ActionButtonMenuProps = Omit<ButtonMenuProps, "trigger">;
+type QueryTablePropsWithQuery<R extends Kinded, X extends Only<GridTableXss, X>, QData> = BaseQueryTableProps<R, X, QData> & {
     getPageInfo?: (data: QData) => {
         hasNextPage: boolean;
     };
     emptyFallback?: string;
     keepHeaderWhenLoading?: boolean;
-    rows?: never;
 };
 type GridTableLayoutProps<F extends Record<string, unknown>, R extends Kinded, X extends Only<GridTableXss, X>, QData> = {
-    pageTitle: string;
+    pageTitle: ReactNode;
     tableProps: GridTablePropsWithRows<R, X> | QueryTablePropsWithQuery<R, X, QData>;
-    breadcrumb?: HeaderBreadcrumb | HeaderBreadcrumb[];
+    breadCrumb?: HeaderBreadcrumb | HeaderBreadcrumb[];
     layoutState?: ReturnType<typeof useGridTableLayoutState<F>>;
     /** Renders a ButtonMenu with "verticalDots" icon as trigger */
     actionMenu?: ActionButtonMenuProps;
@@ -8305,6 +8329,36 @@ interface ScrollableParentContextProviderProps {
 declare function ScrollableParent(props: PropsWithChildren<ScrollableParentContextProviderProps>): JSX.Element;
 declare function useScrollableParent(): ScrollableParentContextProps;
+type SidePanelProps = {
+    title: ReactNode;
+    content: ReactNode;
+    primaryAction?: ActionButtonProps;
+    secondaryAction?: ActionButtonProps;
+};
+type TableReviewLayoutProps<R extends Kinded, X extends Only<GridTableXss, X>, QData> = {
+    pageTitle: ReactNode;
+    breadCrumb?: HeaderBreadcrumb | HeaderBreadcrumb[];
+    /** Instructional text rendered below the title, above the table. */
+    description: ReactNode;
+    closeAction: VoidFunction;
+    tableProps: GridTablePropsWithRows<R, X> | BaseQueryTableProps<R, X, QData>;
+    /**
+     * Replaces the table region with centered content.
+     *
+     * For rows-based tables: shown automatically when `tableProps.rows` contains no data rows.
+     * For query-based tables: shown when prop is defined; TableReviewLayout does not peek into query results to determine if empty.
+     */
+    emptyState?: ReactNode;
+    /**
+     * When set, slides open the panel column and renders a `SidePanel` with the given props.
+     */
+    panelContent?: SidePanelProps;
+    onPanelClose?: VoidFunction;
+    /** Defaults to 450. */
+    rightPaneWidth?: number;
+};
+declare function TableReviewLayout<R extends Kinded, X extends Only<GridTableXss, X>, QData>(props: TableReviewLayoutProps<R, X, QData>): JSX.Element;
 interface LoaderProps {
     size?: "xs" | "sm" | "md" | "lg";
     contrast?: boolean;
@@ -8559,4 +8613,4 @@ declare function resolveTooltip(disabled?: boolean | ReactNode, tooltip?: ReactN
  */
 declare function defaultTestId(label: string): string;
-export { ASC, Accordion, AccordionList, type AccordionProps, type AccordionSize, AutoSaveIndicator, AutoSaveStatus, AutoSaveStatusContext, AutoSaveStatusProvider, Autocomplete, type AutocompleteProps, Avatar, AvatarButton, type AvatarButtonProps, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Banner, type BannerProps, type BannerTypes, BaseFilter, type BeamButtonProps, type BeamFocusableProps, BeamProvider, type BeamTextFieldProps, BoundCheckboxField, type BoundCheckboxFieldProps, BoundCheckboxGroupField, type BoundCheckboxGroupFieldProps, BoundChipSelectField, BoundDateField, type BoundDateFieldProps, BoundDateRangeField, type BoundDateRangeFieldProps, BoundForm, type BoundFormInputConfig, type BoundFormProps, type BoundFormRowInputs, BoundIconCardField, type BoundIconCardFieldProps, BoundIconCardGroupField, type BoundIconCardGroupFieldProps, BoundMultiLineSelectField, type BoundMultiLineSelectFieldProps, BoundMultiSelectField, type BoundMultiSelectFieldProps, BoundNumberField, type BoundNumberFieldProps, BoundRadioGroupField, type BoundRadioGroupFieldProps, BoundRichTextField, type BoundRichTextFieldProps, BoundSelectAndTextField, BoundSelectField, type BoundSelectFieldProps, BoundSwitchField, type BoundSwitchFieldProps, BoundTextAreaField, type BoundTextAreaFieldProps, BoundTextField, type BoundTextFieldProps, BoundToggleChipGroupField, type BoundToggleChipGroupFieldProps, BoundTreeSelectField, type BoundTreeSelectFieldProps, type Breakpoint, Breakpoints, type BuildtimeStyles, Button, ButtonDatePicker, ButtonGroup, type ButtonGroupButton, type ButtonGroupProps, ButtonMenu, type ButtonMenuProps, ButtonModal, type ButtonModalProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardTag, type CardType, type CheckFn, Checkbox, CheckboxGroup, type CheckboxGroupItemOption, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, ChipSelectField, type ChipSelectFieldProps, type ChipType, ChipTypes, type ChipValue, Chips, type ChipsProps, CollapseToggle, CollapsedContext, ConfirmCloseModal, type ContentStack, Copy, CountBadge, type CountBadgeProps, Css, CssReset, DESC, DateField, type DateFieldFormat, type DateFieldMode, type DateFieldProps, type DateFilterValue, type DateMatcher, type DateRange, DateRangeField, type DateRangeFieldProps, type DateRangeFilterValue, type Direction, type DiscriminateUnion, type DividerMenuItemType, DnDGrid, DnDGridItemHandle, type DnDGridItemHandleProps, type DnDGridItemProps, type DnDGridProps, type DragData, EXPANDABLE_HEADER, EditColumnsButton, ErrorMessage, FieldGroup, type Filter, type FilterDefs, _FilterDropdownMenu as FilterDropdownMenu, type FilterImpls, FilterModal, _Filters as Filters, type Font, FormDivider, FormHeading, type FormHeadingProps, FormLines, type FormLinesProps, FormPageLayout, FormRow, type FormSectionConfig, type FormWidth, FullBleed, type GridCellAlignment, type GridCellContent, type GridColumn, type GridColumnBorder, type GridColumnWithId, type GridDataRow, type GridRowKind, type GridRowLookup, type GridSortConfig, type GridStyle, GridTable, type GridTableApi, type GridTableCollapseToggleProps, type GridTableDefaults, GridTableLayout, type GridTableLayoutProps, type GridTableProps, type GridTableScrollOptions, type GridTableXss, type GroupByHook, HB_QUIPS_FLAVOR, HB_QUIPS_MISSION, HEADER, type HasIdAndName, HbLoadingSpinner, HbSpinnerProvider, HelperText, Icon, IconButton, type IconButtonProps, IconCard, type IconCardProps, type IconKey, type IconMenuItemType, type IconProps, Icons, type IfAny, type ImageFitType, type ImageMenuItemType, type InfiniteScroll, type InlineStyle, type InputStylePalette, KEPT_GROUP, type Kinded, Loader, LoadingSkeleton, type LoadingSkeletonProps, type Margin, type Marker, MaxLines, type MaxLinesProps, type MaybeFn, type MenuItem, type MenuSection, ModalBody, ModalFilterItem, ModalFooter, ModalHeader, type ModalProps, type ModalSize, MultiLineSelectField, type MultiLineSelectFieldProps, MultiSelectField, type MultiSelectFieldProps, NavLink, type NestedOption, type NestedOptionsOrLoad, NumberField, type NumberFieldProps, type NumberFieldType, type OffsetAndLimit, type OnRowDragEvent, type OnRowSelect, type Only, type OpenDetailOpts, type OpenInDrawerOpts, OpenModal, type OpenRightPaneOpts, type Optional, type Padding, type PageNumberAndSize, type PageSettings, Pagination, type PaginationConfig, Palette, type Pin, type Placement, type PlainDate, type PresentationFieldProps, PresentationProvider, PreventBrowserScroll, type Properties, RIGHT_SIDEBAR_MIN_WIDTH, type RadioFieldOption, RadioGroupField, type RadioGroupFieldProps, type RenderAs, type RenderCellFn, ResponsiveGrid, type ResponsiveGridConfig, ResponsiveGridContext, ResponsiveGridItem, type ResponsiveGridItemProps, type ResponsiveGridProps, RichTextField, RichTextFieldImpl, type RichTextFieldProps, RightPaneContext, RightPaneLayout, type RightPaneLayoutContextProps, RightPaneProvider, RightSidebar, type RightSidebarProps, type RouteTab, type RouteTabWithContent, Row, type RowStyle, type RowStyles, RuntimeCss, type RuntimeStyles, ScrollShadows, ScrollableContent, ScrollableFooter, ScrollableParent, SelectField, type SelectFieldProps, SelectToggle, type SelectedState, type SidebarContentProps, type SimpleHeaderAndData, SortHeader, type SortOn, type SortState, StaticField, type Step, Stepper, type StepperProps, type StyleKind, SubmitButton, type SubmitButtonProps, SuperDrawerContent, SuperDrawerHeader, SuperDrawerWidth, type SupportedDateFormat, Switch, type SwitchProps, TOTALS, type Tab, TabContent, type TabWithContent, TableState, TableStateContext, Tabs, TabsWithContent, Tag, type TagType, type TestIds, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldApi, type TextFieldInternalProps, type TextFieldProps, type TextFieldXss, Toast, ToggleButton, type ToggleButtonProps, ToggleChip, ToggleChipGroup, type ToggleChipGroupProps, type ToggleChipProps, ToggleChips, type ToggleChipsProps, Tooltip, TreeSelectField, type TreeSelectFieldProps, type TriggerNoticeProps, type Typography, type UseModalHook, type UsePersistedFilterProps, type UseQueryState, type UseRightPaneHook, type UseSnackbarHook, type UseSuperDrawerHook, type UseToastProps, type Value, type Xss, actionColumn, applyRowFn, assignDefaultColumnIds, booleanFilter, boundCheckboxField, boundCheckboxGroupField, boundDateField, boundDateRangeField, boundIconCardField, boundIconCardGroupField, boundMultiSelectField, boundMultilineSelectField, boundNumberField, boundRadioGroupField, boundRichTextField, boundSelectField, boundSwitchField, boundTextAreaField, boundTextField, boundToggleChipGroupField, boundTreeSelectField, calcColumnSizes, cardStyle, checkboxFilter, chipBaseStyles, chipDisabledStyles, chipHoverOnlyStyles, chipHoverStyles, collapseColumn, column, condensedStyle, createRowLookup, dateColumn, dateFilter, dateFormats, dateRangeFilter, defaultPage, defaultRenderFn, defaultStyle, defaultTestId, dragHandleColumn, emptyCell, ensureClientSideSortValueIsSortable, filterTestIdPrefix, formatDate, formatDateRange, formatPlainDate, formatValue, generateColumnId, getAlignment, getColumnBorderCss, getDateFormat, getFirstOrLastCellCss, getJustification, getTableRefWidthStyles, getTableStyles, headerRenderFn, hoverStyles, iconButtonCircleStylesHover, iconButtonContrastStylesHover, iconButtonStylesHover, iconCardStylesHover, increment, insertAtIndex, isCursorBelowMidpoint, isGridCellContent, isJSX, isListBoxSection, isPersistentItem, isPersistentKey, isValidDate, listFieldPrefix, loadArrayOrUndefined, marker, matchesFilter, maybeInc, maybeTooltip, multiFilter, navLink, newMethodMissingProxy, nonKindGridColumnKeys, numberRangeFilter, numericColumn, parseDate, parseDateRange, parseWidthToPx, persistentItemPrefix, pressedOverlayCss, px, recursivelyGetContainingRow, reservedRowKinds, resolveTooltip, rowClickRenderFn, rowLinkRenderFn, selectColumn, selectedStyles, setDefaultStyle, setGridTableDefaults, setRunningInJest, shouldSkipScrollTo, simpleDataRows, simpleHeader, singleFilter, sortFn, sortRows, switchFocusStyles, switchHoverStyles, switchSelectedHoverStyles, toContent, toLimitAndOffset, toPageNumberSize, toggleFilter, toggleFocusStyles, toggleHoverStyles, togglePressStyles, treeFilter, updateFilter, useAutoSaveStatus, useBreakpoint, useComputed, useDnDGridItem, type useDnDGridItemProps, useFilter, useGridTableApi, useGridTableLayoutState, useGroupBy, useHover, useModal, usePersistedFilter, useQueryState, useResponsiveGrid, useResponsiveGridItem, type useResponsiveGridProps, useRightPane, useRightPaneContext, useRuntimeStyle, useScrollableParent, useSessionStorage, useSetupColumnSizes, useSnackbar, useSuperDrawer, useTestIds, useToast, useTreeSelectFieldProvider, useVirtualizedScrollParent, visit, zIndices };
+export { ASC, Accordion, AccordionList, type AccordionProps, type AccordionSize, type ActionButtonProps, AutoSaveIndicator, AutoSaveStatus, AutoSaveStatusContext, AutoSaveStatusProvider, Autocomplete, type AutocompleteProps, Avatar, AvatarButton, type AvatarButtonProps, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Banner, type BannerProps, type BannerTypes, BaseFilter, type BaseQueryTableProps, type BaseTableProps, type BeamButtonProps, type BeamFocusableProps, BeamProvider, type BeamTextFieldProps, BoundCheckboxField, type BoundCheckboxFieldProps, BoundCheckboxGroupField, type BoundCheckboxGroupFieldProps, BoundChipSelectField, BoundDateField, type BoundDateFieldProps, BoundDateRangeField, type BoundDateRangeFieldProps, BoundForm, type BoundFormInputConfig, type BoundFormProps, type BoundFormRowInputs, BoundIconCardField, type BoundIconCardFieldProps, BoundIconCardGroupField, type BoundIconCardGroupFieldProps, BoundMultiLineSelectField, type BoundMultiLineSelectFieldProps, BoundMultiSelectField, type BoundMultiSelectFieldProps, BoundNumberField, type BoundNumberFieldProps, BoundRadioGroupField, type BoundRadioGroupFieldProps, BoundRichTextField, type BoundRichTextFieldProps, BoundSelectAndTextField, BoundSelectField, type BoundSelectFieldProps, BoundSwitchField, type BoundSwitchFieldProps, BoundTextAreaField, type BoundTextAreaFieldProps, BoundTextField, type BoundTextFieldProps, BoundToggleChipGroupField, type BoundToggleChipGroupFieldProps, BoundTreeSelectField, type BoundTreeSelectFieldProps, type Breakpoint, Breakpoints, type BuildtimeStyles, Button, ButtonDatePicker, ButtonGroup, type ButtonGroupButton, type ButtonGroupProps, ButtonMenu, type ButtonMenuProps, ButtonModal, type ButtonModalProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardTag, type CardType, type CheckFn, Checkbox, CheckboxGroup, type CheckboxGroupItemOption, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, ChipSelectField, type ChipSelectFieldProps, type ChipType, ChipTypes, type ChipValue, Chips, type ChipsProps, CollapseToggle, CollapsedContext, ConfirmCloseModal, type ContentStack, Copy, CountBadge, type CountBadgeProps, Css, CssReset, type CssSetVarKeys, type CssSetVarScalar, type CssSetVarValue, DESC, DateField, type DateFieldFormat, type DateFieldMode, type DateFieldProps, type DateFilterValue, type DateMatcher, type DateRange, DateRangeField, type DateRangeFieldProps, type DateRangeFilterValue, type Direction, type DiscriminateUnion, type DividerMenuItemType, DnDGrid, DnDGridItemHandle, type DnDGridItemHandleProps, type DnDGridItemProps, type DnDGridProps, type DragData, EXPANDABLE_HEADER, EditColumnsButton, ErrorMessage, FieldGroup, type Filter, type FilterDefs, _FilterDropdownMenu as FilterDropdownMenu, type FilterImpls, FilterModal, _Filters as Filters, type Font, FormDivider, FormHeading, type FormHeadingProps, FormLines, type FormLinesProps, FormPageLayout, FormRow, type FormSectionConfig, type FormWidth, FullBleed, type GridCellAlignment, type GridCellContent, type GridColumn, type GridColumnBorder, type GridColumnWithId, type GridDataRow, type GridRowKind, type GridRowLookup, type GridSortConfig, type GridStyle, GridTable, type GridTableApi, type GridTableCollapseToggleProps, type GridTableDefaults, GridTableLayout, type GridTableLayoutProps, type GridTableProps, type GridTablePropsWithRows, type GridTableScrollOptions, type GridTableXss, type GroupByHook, HB_QUIPS_FLAVOR, HB_QUIPS_MISSION, HEADER, type HasIdAndName, HbLoadingSpinner, HbSpinnerProvider, HelperText, Icon, IconButton, type IconButtonProps, IconCard, type IconCardProps, type IconKey, type IconMenuItemType, type IconProps, Icons, type IfAny, type ImageFitType, type ImageMenuItemType, type InfiniteScroll, type InlineStyle, type InputStylePalette, KEPT_GROUP, type Kinded, Loader, LoadingSkeleton, type LoadingSkeletonProps, type Margin, type Marker, MaxLines, type MaxLinesProps, type MaybeFn, type MenuItem, type MenuSection, ModalBody, ModalFilterItem, ModalFooter, ModalHeader, type ModalProps, type ModalSize, MultiLineSelectField, type MultiLineSelectFieldProps, MultiSelectField, type MultiSelectFieldProps, NavLink, type NestedOption, type NestedOptionsOrLoad, NumberField, type NumberFieldProps, type NumberFieldType, type OffsetAndLimit, type OnRowDragEvent, type OnRowSelect, type Only, type OpenDetailOpts, type OpenInDrawerOpts, OpenModal, type OpenRightPaneOpts, type Optional, type Padding, type PageNumberAndSize, type PageSettings, Pagination, type PaginationConfig, Palette, type Pin, type Placement, type PlainDate, type PresentationFieldProps, PresentationProvider, PreventBrowserScroll, type Properties, RIGHT_SIDEBAR_MIN_WIDTH, type RadioFieldOption, RadioGroupField, type RadioGroupFieldProps, type RenderAs, type RenderCellFn, ResponsiveGrid, type ResponsiveGridConfig, ResponsiveGridContext, ResponsiveGridItem, type ResponsiveGridItemProps, type ResponsiveGridProps, RichTextField, RichTextFieldImpl, type RichTextFieldProps, RightPaneContext, RightPaneLayout, type RightPaneLayoutContextProps, RightPaneProvider, RightSidebar, type RightSidebarProps, type RouteTab, type RouteTabWithContent, Row, type RowStyle, type RowStyles, RuntimeCss, type RuntimeStyles, ScrollShadows, ScrollableContent, ScrollableFooter, ScrollableParent, SelectField, type SelectFieldProps, SelectToggle, type SelectedState, type SidePanelProps, type SidebarContentProps, type SimpleHeaderAndData, SortHeader, type SortOn, type SortState, StaticField, type Step, Stepper, type StepperProps, type StyleKind, SubmitButton, type SubmitButtonProps, SuperDrawerContent, SuperDrawerHeader, SuperDrawerWidth, type SupportedDateFormat, Switch, type SwitchProps, TOTALS, type Tab, TabContent, type TabWithContent, TableReviewLayout, type TableReviewLayoutProps, TableState, TableStateContext, Tabs, TabsWithContent, Tag, type TagType, type TestIds, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldApi, type TextFieldInternalProps, type TextFieldProps, type TextFieldXss, Toast, ToggleButton, type ToggleButtonProps, ToggleChip, ToggleChipGroup, type ToggleChipGroupProps, type ToggleChipProps, ToggleChips, type ToggleChipsProps, Tooltip, TreeSelectField, type TreeSelectFieldProps, type TriggerNoticeProps, type Typography, type UseModalHook, type UsePersistedFilterProps, type UseQueryState, type UseRightPaneHook, type UseSnackbarHook, type UseSuperDrawerHook, type UseToastProps, type Value, type Xss, actionColumn, applyRowFn, assignDefaultColumnIds, booleanFilter, boundCheckboxField, boundCheckboxGroupField, boundDateField, boundDateRangeField, boundIconCardField, boundIconCardGroupField, boundMultiSelectField, boundMultilineSelectField, boundNumberField, boundRadioGroupField, boundRichTextField, boundSelectField, boundSwitchField, boundTextAreaField, boundTextField, boundToggleChipGroupField, boundTreeSelectField, calcColumnSizes, cardStyle, checkboxFilter, chipBaseStyles, chipDisabledStyles, chipHoverOnlyStyles, chipHoverStyles, collapseColumn, column, condensedStyle, createRowLookup, dateColumn, dateFilter, dateFormats, dateRangeFilter, defaultPage, defaultRenderFn, defaultStyle, defaultTestId, dragHandleColumn, emptyCell, ensureClientSideSortValueIsSortable, filterTestIdPrefix, formatDate, formatDateRange, formatPlainDate, formatValue, generateColumnId, getAlignment, getColumnBorderCss, getDateFormat, getFirstOrLastCellCss, getJustification, getTableRefWidthStyles, getTableStyles, headerRenderFn, hoverStyles, iconButtonCircleStylesHover, iconButtonContrastStylesHover, iconButtonStylesHover, iconCardStylesHover, increment, insertAtIndex, isCursorBelowMidpoint, isGridCellContent, isGridTableProps, isJSX, isListBoxSection, isPersistentItem, isPersistentKey, isValidDate, listFieldPrefix, loadArrayOrUndefined, marker, matchesFilter, maybeInc, maybeTooltip, multiFilter, navLink, newMethodMissingProxy, nonKindGridColumnKeys, numberRangeFilter, numericColumn, parseDate, parseDateRange, parseWidthToPx, persistentItemPrefix, pressedOverlayCss, px, recursivelyGetContainingRow, reservedRowKinds, resolveTooltip, rowClickRenderFn, rowLinkRenderFn, selectColumn, selectedStyles, setDefaultStyle, setGridTableDefaults, setRunningInJest, shouldSkipScrollTo, simpleDataRows, simpleHeader, singleFilter, sortFn, sortRows, switchFocusStyles, switchHoverStyles, switchSelectedHoverStyles, toContent, toLimitAndOffset, toPageNumberSize, toggleFilter, toggleFocusStyles, toggleHoverStyles, togglePressStyles, treeFilter, updateFilter, useAutoSaveStatus, useBreakpoint, useComputed, useDnDGridItem, type useDnDGridItemProps, useFilter, useGridTableApi, useGridTableLayoutState, useGroupBy, useHover, useModal, usePersistedFilter, useQueryState, useResponsiveGrid, useResponsiveGridItem, type useResponsiveGridProps, useRightPane, useRightPaneContext, useRuntimeStyle, useScrollableParent, useSessionStorage, useSetupColumnSizes, useSnackbar, useSuperDrawer, useTestIds, useToast, useTreeSelectFieldProvider, useVirtualizedScrollParent, visit, zIndices };