@homebound/beam 2.217.1 → 2.218.0

package/dist/Css.js

@@ -1,896 +1,3365 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mdOrLg = exports.lg = exports.mdAndDown = exports.mdAndUp = exports.smOrMd = exports.md = exports.sm = exports.print = exports.Breakpoints = exports.Css = exports.Palette = exports.px = exports.increment = exports.maybeInc = void 0;
-// prettier-ignore
+exports.Breakpoints = exports.Css = exports.Palette = exports.px = exports.increment = exports.maybeInc = void 0;
 class CssBuilder {
     constructor(opts) {
         this.opts = opts;
     }
-    get rules() { return this.opts.rules; }
-    ;
-    get enabled() { return this.opts.enabled; }
-    ;
-    get selector() { return this.opts.selector; }
-    ;
+    get rules() {
+        return this.opts.rules;
+    }
+    get enabled() {
+        return this.opts.enabled;
+    }
+    get selector() {
+        return this.opts.selector;
+    }
     newCss(opts) {
         return new CssBuilder({ ...this.opts, ...opts });
     }
-    // border
-    get ba() { return this.add("borderStyle", "solid").add("borderWidth", "1px"); }
-    get bt() { return this.add("borderTopStyle", "solid").add("borderTopWidth", "1px"); }
-    get br() { return this.add("borderRightStyle", "solid").add("borderRightWidth", "1px"); }
-    get bb() { return this.add("borderBottomStyle", "solid").add("borderBottomWidth", "1px"); }
-    get bl() { return this.add("borderLeftStyle", "solid").add("borderLeftWidth", "1px"); }
-    get bn() { return this.add("borderStyle", "none").add("borderWidth", "0"); }
-    // borderColor
-    get bWhite() { return this.add("borderColor", "rgba(254,254,254,1)"); }
-    get bTransparent() { return this.add("borderColor", "rgba(0,0,0,0)"); }
-    get bGray50() { return this.add("borderColor", "rgba(255,253,253,1)"); }
-    get bGray100() { return this.add("borderColor", "rgba(247,245,245,1)"); }
-    get bGray200() { return this.add("borderColor", "rgba(236,235,235,1)"); }
-    get bGray300() { return this.add("borderColor", "rgba(221,220,220,1)"); }
-    get bGray400() { return this.add("borderColor", "rgba(201,201,201,1)"); }
-    get bGray500() { return this.add("borderColor", "rgba(175,175,175,1)"); }
-    get bGray600() { return this.add("borderColor", "rgba(141,141,141,1)"); }
-    get bGray700() { return this.add("borderColor", "rgba(100,100,100,1)"); }
-    get bGray800() { return this.add("borderColor", "rgba(53,53,53,1)"); }
-    get bGray900() { return this.add("borderColor", "rgba(36,36,36,1)"); }
-    get bLightBlue50() { return this.add("borderColor", "rgba(240,249,255,1)"); }
-    get bLightBlue100() { return this.add("borderColor", "rgba(224,242,254,1)"); }
-    get bLightBlue200() { return this.add("borderColor", "rgba(186,230,253,1)"); }
-    get bLightBlue300() { return this.add("borderColor", "rgba(125,211,252,1)"); }
-    get bLightBlue400() { return this.add("borderColor", "rgba(56,189,248,1)"); }
-    get bLightBlue500() { return this.add("borderColor", "rgba(14,165,233,1)"); }
-    get bLightBlue600() { return this.add("borderColor", "rgba(2,143,199,1)"); }
-    get bLightBlue700() { return this.add("borderColor", "rgba(3,105,161,1)"); }
-    get bLightBlue800() { return this.add("borderColor", "rgba(7,89,133,1)"); }
-    get bLightBlue900() { return this.add("borderColor", "rgba(12,74,110,1)"); }
-    get bRed50() { return this.add("borderColor", "rgba(255,242,242,1)"); }
-    get bRed100() { return this.add("borderColor", "rgba(253,210,209,1)"); }
-    get bRed200() { return this.add("borderColor", "rgba(249,181,177,1)"); }
-    get bRed300() { return this.add("borderColor", "rgba(242,155,148,1)"); }
-    get bRed400() { return this.add("borderColor", "rgba(232,133,122,1)"); }
-    get bRed500() { return this.add("borderColor", "rgba(218,114,100,1)"); }
-    get bRed600() { return this.add("borderColor", "rgba(200,98,81,1)"); }
-    get bRed700() { return this.add("borderColor", "rgba(176,83,73,1)"); }
-    get bRed800() { return this.add("borderColor", "rgba(149,68,64,1)"); }
-    get bRed900() { return this.add("borderColor", "rgba(120,54,54,1)"); }
-    get bYellow50() { return this.add("borderColor", "rgba(255,254,242,1)"); }
-    get bYellow100() { return this.add("borderColor", "rgba(255,254,212,1)"); }
-    get bYellow200() { return this.add("borderColor", "rgba(255,250,180,1)"); }
-    get bYellow300() { return this.add("borderColor", "rgba(255,240,150,1)"); }
-    get bYellow400() { return this.add("borderColor", "rgba(255,225,123,1)"); }
-    get bYellow500() { return this.add("borderColor", "rgba(255,204,99,1)"); }
-    get bYellow600() { return this.add("borderColor", "rgba(246,177,78,1)"); }
-    get bYellow700() { return this.add("borderColor", "rgba(207,150,73,1)"); }
-    get bYellow800() { return this.add("borderColor", "rgba(164,120,66,1)"); }
-    get bYellow900() { return this.add("borderColor", "rgba(120,89,54,1)"); }
-    get bGreen50() { return this.add("borderColor", "rgba(250,255,250,1)"); }
-    get bGreen100() { return this.add("borderColor", "rgba(223,248,216,1)"); }
-    get bGreen200() { return this.add("borderColor", "rgba(199,239,183,1)"); }
-    get bGreen300() { return this.add("borderColor", "rgba(179,226,153,1)"); }
-    get bGreen400() { return this.add("borderColor", "rgba(163,208,126,1)"); }
-    get bGreen500() { return this.add("borderColor", "rgba(146,185,101,1)"); }
-    get bGreen600() { return this.add("borderColor", "rgba(126,156,79,1)"); }
-    get bGreen700() { return this.add("borderColor", "rgba(101,120,57,1)"); }
-    get bGreen800() { return this.add("borderColor", "rgba(64,93,44,1)"); }
-    get bGreen900() { return this.add("borderColor", "rgba(34,64,31,1)"); }
-    get bViolet50() { return this.add("borderColor", "rgba(245,243,255,1)"); }
-    get bViolet100() { return this.add("borderColor", "rgba(238,234,253,1)"); }
-    get bViolet200() { return this.add("borderColor", "rgba(232,225,252,1)"); }
-    get bViolet300() { return this.add("borderColor", "rgba(218,205,246,1)"); }
-    get bViolet400() { return this.add("borderColor", "rgba(204,186,236,1)"); }
-    get bViolet500() { return this.add("borderColor", "rgba(190,167,223,1)"); }
-    get bViolet600() { return this.add("borderColor", "rgba(173,147,205,1)"); }
-    get bViolet700() { return this.add("borderColor", "rgba(153,126,181,1)"); }
-    get bViolet800() { return this.add("borderColor", "rgba(128,103,151,1)"); }
-    get bViolet900() { return this.add("borderColor", "rgba(100,78,116,1)"); }
-    bc(value) { return this.add("borderColor", value); }
-    // borderRadius
-    get br0() { return this.add("borderRadius", "0"); }
-    get br4() { return this.add("borderRadius", "4px"); }
-    get br8() { return this.add("borderRadius", "8px"); }
-    get br12() { return this.add("borderRadius", "12px"); }
-    get br16() { return this.add("borderRadius", "16px"); }
-    get br24() { return this.add("borderRadius", "24px"); }
-    get br100() { return this.add("borderRadius", "100%"); }
-    borderRadius(value) { return this.add("borderRadius", value); }
-    get brt4() { return this.add("borderTopRightRadius", "4px").add("borderTopLeftRadius", "4px"); }
-    get brb4() { return this.add("borderBottomRightRadius", "4px").add("borderBottomLeftRadius", "4px"); }
-    // borderStyle
-    get bsDashed() { return this.add("borderStyle", "dashed"); }
-    get bsDotted() { return this.add("borderStyle", "dotted"); }
-    get bsNone() { return this.add("borderStyle", "none"); }
-    get bsSolid() { return this.add("borderStyle", "solid"); }
-    bs(value) { return this.add("borderStyle", value); }
-    // borderWidth
-    get bw1() { return this.add("borderWidth", "1px"); }
-    get bw2() { return this.add("borderWidth", "2px"); }
-    bw(value) { return this.add("borderWidth", value); }
-    // boxShadow
-    get bsh0() { return this.add("boxShadow", "none"); }
-    get bshBasic() { return this.add("boxShadow", "0px 2px 16px 0px rgba(17,24,39,0.03), 0px 4px 8px 0px rgba(17,24,39,0.08)"); }
-    get bshHover() { return this.add("boxShadow", "0px 2px 24px 0px rgba(17,24,39,0.08), 0px 4px 8px 0px rgba(17,24,39,0.1)"); }
-    get bshFocus() { return this.add("boxShadow", "0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px rgba(3,105,161,1)"); }
-    get bshDanger() { return this.add("boxShadow", "0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px rgba(149,68,64,1)"); }
-    get bshModal() { return this.add("boxShadow", "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04)"); }
-    boxShadow(value) { return this.add("boxShadow", value); }
-    // coordinates
-    get top0() { return this.top(0); }
-    get top1() { return this.top(1); }
-    get top2() { return this.top(2); }
-    get top3() { return this.top(3); }
-    get top4() { return this.top(4); }
-    get top5() { return this.top(5); }
-    get top6() { return this.top(6); }
-    get top7() { return this.top(7); }
-    get top8() { return this.top(8); }
-    top(inc) { return this.add("top", maybeInc(inc)); }
-    topPx(px) { return this.top(`${px}px`); }
-    get right0() { return this.right(0); }
-    get right1() { return this.right(1); }
-    get right2() { return this.right(2); }
-    get right3() { return this.right(3); }
-    get right4() { return this.right(4); }
-    get right5() { return this.right(5); }
-    get right6() { return this.right(6); }
-    get right7() { return this.right(7); }
-    get right8() { return this.right(8); }
-    right(inc) { return this.add("right", maybeInc(inc)); }
-    rightPx(px) { return this.right(`${px}px`); }
-    get bottom0() { return this.bottom(0); }
-    get bottom1() { return this.bottom(1); }
-    get bottom2() { return this.bottom(2); }
-    get bottom3() { return this.bottom(3); }
-    get bottom4() { return this.bottom(4); }
-    get bottom5() { return this.bottom(5); }
-    get bottom6() { return this.bottom(6); }
-    get bottom7() { return this.bottom(7); }
-    get bottom8() { return this.bottom(8); }
-    bottom(inc) { return this.add("bottom", maybeInc(inc)); }
-    bottomPx(px) { return this.bottom(`${px}px`); }
-    get left0() { return this.left(0); }
-    get left1() { return this.left(1); }
-    get left2() { return this.left(2); }
-    get left3() { return this.left(3); }
-    get left4() { return this.left(4); }
-    get left5() { return this.left(5); }
-    get left6() { return this.left(6); }
-    get left7() { return this.left(7); }
-    get left8() { return this.left(8); }
-    left(inc) { return this.add("left", maybeInc(inc)); }
-    leftPx(px) { return this.left(`${px}px`); }
-    // cursor
-    get cursorPointer() { return this.add("cursor", "pointer"); }
-    get cursorNotAllowed() { return this.add("cursor", "not-allowed"); }
-    cursor(value) { return this.add("cursor", value); }
-    // display
-    get dn() { return this.add("display", "none"); }
-    get db() { return this.add("display", "block"); }
-    get dib() { return this.add("display", "inline-block"); }
-    get dit() { return this.add("display", "inline-table"); }
-    get dt() { return this.add("display", "table"); }
-    get dtc() { return this.add("display", "table-cell"); }
-    get dtRow() { return this.add("display", "table-row"); }
-    get dtColumn() { return this.add("display", "table-column"); }
-    get dtColumnGroup() { return this.add("display", "table-column-group"); }
-    get dg() { return this.add("display", "grid"); }
-    get dig() { return this.add("display", "inline-grid"); }
-    get df() { return this.add("display", "flex"); }
-    get dif() { return this.add("display", "inline-flex"); }
-    display(value) { return this.add("display", value); }
-    // flexbox
-    get fi() { return this.add("flex", "initial"); }
-    get fa() { return this.add("flex", "auto"); }
-    get fn() { return this.add("flex", "none"); }
-    get f1() { return this.add("flex", "1"); }
-    get f2() { return this.add("flex", "2"); }
-    get f3() { return this.add("flex", "3"); }
-    get f4() { return this.add("flex", "4"); }
-    get f5() { return this.add("flex", "5"); }
-    f(value) { return this.add("flex", value); }
-    get jcfs() { return this.add("justifyContent", "flex-start"); }
-    get jcfe() { return this.add("justifyContent", "flex-end"); }
-    get jcc() { return this.add("justifyContent", "center"); }
-    get jcsb() { return this.add("justifyContent", "space-between"); }
-    get jcsa() { return this.add("justifyContent", "space-around"); }
-    get jcse() { return this.add("justifyContent", "space-evenly"); }
-    jc(value) { return this.add("justifyContent", value); }
-    get jifs() { return this.add("justifyItems", "flex-start"); }
-    get jife() { return this.add("justifyItems", "flex-end"); }
-    get jic() { return this.add("justifyItems", "center"); }
-    get jisb() { return this.add("justifyItems", "space-between"); }
-    get jisa() { return this.add("justifyItems", "space-around"); }
-    get jise() { return this.add("justifyItems", "space-evenly"); }
-    ji(value) { return this.add("justifyItems", value); }
-    get asfs() { return this.add("alignSelf", "flex-start"); }
-    get asfe() { return this.add("alignSelf", "flex-end"); }
-    get asc() { return this.add("alignSelf", "center"); }
-    get asb() { return this.add("alignSelf", "baseline"); }
-    get asStretch() { return this.add("alignSelf", "stretch"); }
-    as(value) { return this.add("alignSelf", value); }
-    get aifs() { return this.add("alignItems", "flex-start"); }
-    get aife() { return this.add("alignItems", "flex-end"); }
-    get aic() { return this.add("alignItems", "center"); }
-    get aib() { return this.add("alignItems", "baseline"); }
-    get ais() { return this.add("alignItems", "stretch"); }
-    ai(value) { return this.add("alignItems", value); }
-    get fb1() { return this.add("flexBasis", "100%"); }
-    get fb2() { return this.add("flexBasis", "50%"); }
-    get fb3() { return this.add("flexBasis", "33.333333%"); }
-    get fb4() { return this.add("flexBasis", "25%"); }
-    get fb5() { return this.add("flexBasis", "20%"); }
-    get fb6() { return this.add("flexBasis", "16.666666%"); }
-    get fb7() { return this.add("flexBasis", "14.285714%"); }
-    get fb0() { return this.add("flexBasis", "12.5%"); }
-    fb(value) { return this.add("flexBasis", value); }
-    get flexAuto() { return this.add("flex", "auto"); }
-    get flexNone() { return this.add("flex", "none"); }
-    flex(value) { return this.add("flex", value); }
-    get fg0() { return this.add("flexGrow", 0); }
-    get fg1() { return this.add("flexGrow", 1); }
-    flexGrow(value) { return this.add("flexGrow", value); }
-    get fs0() { return this.add("flexShrink", 0); }
-    get fs1() { return this.add("flexShrink", 1); }
-    flexShrink(value) { return this.add("flexShrink", value); }
-    get fdr() { return this.add("flexDirection", "row"); }
-    get fdrr() { return this.add("flexDirection", "row-reverse"); }
-    get fdc() { return this.add("flexDirection", "column"); }
-    get fdcr() { return this.add("flexDirection", "column-reverse"); }
-    fd(value) { return this.add("flexDirection", value); }
-    // float
-    get fl() { return this.add("float", "left"); }
-    get fr() { return this.add("float", "right"); }
-    float(value) { return this.add("float", value); }
-    // fontWeight
-    get normal() { return this.add("fontWeight", "normal"); }
-    get b() { return this.add("fontWeight", "bold"); }
-    get fw1() { return this.add("fontWeight", 100); }
-    get fw2() { return this.add("fontWeight", 200); }
-    get fw3() { return this.add("fontWeight", 300); }
-    get fw4() { return this.add("fontWeight", 400); }
-    get fw5() { return this.add("fontWeight", 500); }
-    get fw6() { return this.add("fontWeight", 600); }
-    get fw7() { return this.add("fontWeight", 700); }
-    get fw8() { return this.add("fontWeight", 800); }
-    get fw9() { return this.add("fontWeight", 900); }
-    fw(value) { return this.add("fontWeight", value); }
-    // grid
-    gtc(value) { return this.add("gridTemplateColumns", value); }
-    gtr(value) { return this.add("gridTemplateRows", value); }
-    gr(value) { return this.add("gridRow", value); }
-    gc(value) { return this.add("gridColumn", value); }
-    get gap0() { return this.gap(0); }
-    get gap1() { return this.gap(1); }
-    get gap2() { return this.gap(2); }
-    get gap3() { return this.gap(3); }
-    get gap4() { return this.gap(4); }
-    get gap5() { return this.gap(5); }
-    get gap6() { return this.gap(6); }
-    get gap7() { return this.gap(7); }
-    get gap8() { return this.gap(8); }
-    gap(inc) { return this.add("gap", maybeInc(inc)); }
-    gapPx(px) { return this.gap(`${px}px`); }
-    get rg0() { return this.rg(0); }
-    get rg1() { return this.rg(1); }
-    get rg2() { return this.rg(2); }
-    get rg3() { return this.rg(3); }
-    get rg4() { return this.rg(4); }
-    get rg5() { return this.rg(5); }
-    get rg6() { return this.rg(6); }
-    get rg7() { return this.rg(7); }
-    get rg8() { return this.rg(8); }
-    rg(inc) { return this.add("rowGap", maybeInc(inc)); }
-    rgPx(px) { return this.rg(`${px}px`); }
-    get cg0() { return this.cg(0); }
-    get cg1() { return this.cg(1); }
-    get cg2() { return this.cg(2); }
-    get cg3() { return this.cg(3); }
-    get cg4() { return this.cg(4); }
-    get cg5() { return this.cg(5); }
-    get cg6() { return this.cg(6); }
-    get cg7() { return this.cg(7); }
-    get cg8() { return this.cg(8); }
-    cg(inc) { return this.add("columnGap", maybeInc(inc)); }
-    cgPx(px) { return this.cg(`${px}px`); }
-    // height
-    get h0() { return this.h(0); }
-    get h1() { return this.h(1); }
-    get h2() { return this.h(2); }
-    get h3() { return this.h(3); }
-    get h4() { return this.h(4); }
-    get h5() { return this.h(5); }
-    get h6() { return this.h(6); }
-    get h7() { return this.h(7); }
-    get h8() { return this.h(8); }
-    h(inc) { return this.add("height", maybeInc(inc)); }
-    hPx(px) { return this.h(`${px}px`); }
-    get h25() { return this.add("height", "25%"); }
-    get h50() { return this.add("height", "50%"); }
-    get h75() { return this.add("height", "75%"); }
-    get h100() { return this.add("height", "100%"); }
-    get vh25() { return this.add("height", "25vh"); }
-    get vh50() { return this.add("height", "50vh"); }
-    get vh75() { return this.add("height", "75vh"); }
-    get vh100() { return this.add("height", "100vh"); }
-    get mh0() { return this.add("minHeight", 0); }
-    get mh25() { return this.add("minHeight", "25%"); }
-    get mh50() { return this.add("minHeight", "50%"); }
-    get mh75() { return this.add("minHeight", "75%"); }
-    get mh100() { return this.add("minHeight", "100%"); }
-    get mvh100() { return this.add("minHeight", "100vh"); }
-    mh(value) { return this.add("minHeight", value); }
-    mhPx(px) { return this.add("minHeight", `${px}px`); }
-    get maxh0() { return this.add("maxHeight", "0"); }
-    get maxh25() { return this.add("maxHeight", "25%"); }
-    get maxh50() { return this.add("maxHeight", "50%"); }
-    get maxh75() { return this.add("maxHeight", "75%"); }
-    get maxh100() { return this.add("maxHeight", "100%"); }
-    maxh(value) { return this.add("maxHeight", value); }
-    maxhPx(px) { return this.add("maxHeight", `${px}px`); }
-    // lineClamp
-    get lineClamp1() { return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("WebkitLineClamp", 1).add("textOverflow", "ellipsis"); }
-    get lineClamp2() { return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("WebkitLineClamp", 2).add("textOverflow", "ellipsis"); }
-    get lineClamp3() { return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("WebkitLineClamp", 3).add("textOverflow", "ellipsis"); }
-    get lineClamp4() { return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("WebkitLineClamp", 4).add("textOverflow", "ellipsis"); }
-    get lineClamp5() { return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("WebkitLineClamp", 5).add("textOverflow", "ellipsis"); }
-    get lineClamp6() { return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("WebkitLineClamp", 6).add("textOverflow", "ellipsis"); }
-    get lineClampNone() { return this.add("WebkitLineClamp", "unset"); }
-    // objectFit
-    get objectContain() { return this.add("objectFit", "contain"); }
-    get objectCover() { return this.add("objectFit", "cover"); }
-    get objectFill() { return this.add("objectFit", "fill"); }
-    get objectNone() { return this.add("objectFit", "none"); }
-    get objectScaleDown() { return this.add("objectFit", "scale-down"); }
-    objectFit(value) { return this.add("objectFit", value); }
-    // outline
-    get outline1() { return this.add("outline", "1px solid"); }
-    get outlineTransparent() { return this.add("outline", "1px solid transparent"); }
-    get outline0() { return this.add("outline", "0"); }
-    outline(value) { return this.add("outline", value); }
-    // overflow
-    get overflowVisible() { return this.add("overflow", "visible"); }
-    get overflowHidden() { return this.add("overflow", "hidden"); }
-    get overflowScroll() { return this.add("overflow", "scroll"); }
-    get overflowAuto() { return this.add("overflow", "auto"); }
-    overflow(value) { return this.add("overflow", value); }
-    get overflowYVisible() { return this.add("overflowY", "visible"); }
-    get overflowYHidden() { return this.add("overflowY", "hidden"); }
-    get overflowYScroll() { return this.add("overflowY", "scroll"); }
-    get overflowYAuto() { return this.add("overflowY", "auto"); }
-    overflowY(value) { return this.add("overflowY", value); }
-    get overflowXVisible() { return this.add("overflowX", "visible"); }
-    get overflowXHidden() { return this.add("overflowX", "hidden"); }
-    get overflowXScroll() { return this.add("overflowX", "scroll"); }
-    get overflowXAuto() { return this.add("overflowX", "auto"); }
-    overflowX(value) { return this.add("overflowX", value); }
-    // position
-    get absolute() { return this.add("position", "absolute"); }
-    get fixed() { return this.add("position", "fixed"); }
-    get static() { return this.add("position", "static"); }
-    get relative() { return this.add("position", "relative"); }
-    get sticky() { return this.add("position", "sticky"); }
-    position(value) { return this.add("position", value); }
-    // skins
-    get white() { return this.add("color", "rgba(254,254,254,1)"); }
-    get transparent() { return this.add("color", "rgba(0,0,0,0)"); }
-    get gray50() { return this.add("color", "rgba(255,253,253,1)"); }
-    get gray100() { return this.add("color", "rgba(247,245,245,1)"); }
-    get gray200() { return this.add("color", "rgba(236,235,235,1)"); }
-    get gray300() { return this.add("color", "rgba(221,220,220,1)"); }
-    get gray400() { return this.add("color", "rgba(201,201,201,1)"); }
-    get gray500() { return this.add("color", "rgba(175,175,175,1)"); }
-    get gray600() { return this.add("color", "rgba(141,141,141,1)"); }
-    get gray700() { return this.add("color", "rgba(100,100,100,1)"); }
-    get gray800() { return this.add("color", "rgba(53,53,53,1)"); }
-    get gray900() { return this.add("color", "rgba(36,36,36,1)"); }
-    get lightBlue50() { return this.add("color", "rgba(240,249,255,1)"); }
-    get lightBlue100() { return this.add("color", "rgba(224,242,254,1)"); }
-    get lightBlue200() { return this.add("color", "rgba(186,230,253,1)"); }
-    get lightBlue300() { return this.add("color", "rgba(125,211,252,1)"); }
-    get lightBlue400() { return this.add("color", "rgba(56,189,248,1)"); }
-    get lightBlue500() { return this.add("color", "rgba(14,165,233,1)"); }
-    get lightBlue600() { return this.add("color", "rgba(2,143,199,1)"); }
-    get lightBlue700() { return this.add("color", "rgba(3,105,161,1)"); }
-    get lightBlue800() { return this.add("color", "rgba(7,89,133,1)"); }
-    get lightBlue900() { return this.add("color", "rgba(12,74,110,1)"); }
-    get red50() { return this.add("color", "rgba(255,242,242,1)"); }
-    get red100() { return this.add("color", "rgba(253,210,209,1)"); }
-    get red200() { return this.add("color", "rgba(249,181,177,1)"); }
-    get red300() { return this.add("color", "rgba(242,155,148,1)"); }
-    get red400() { return this.add("color", "rgba(232,133,122,1)"); }
-    get red500() { return this.add("color", "rgba(218,114,100,1)"); }
-    get red600() { return this.add("color", "rgba(200,98,81,1)"); }
-    get red700() { return this.add("color", "rgba(176,83,73,1)"); }
-    get red800() { return this.add("color", "rgba(149,68,64,1)"); }
-    get red900() { return this.add("color", "rgba(120,54,54,1)"); }
-    get yellow50() { return this.add("color", "rgba(255,254,242,1)"); }
-    get yellow100() { return this.add("color", "rgba(255,254,212,1)"); }
-    get yellow200() { return this.add("color", "rgba(255,250,180,1)"); }
-    get yellow300() { return this.add("color", "rgba(255,240,150,1)"); }
-    get yellow400() { return this.add("color", "rgba(255,225,123,1)"); }
-    get yellow500() { return this.add("color", "rgba(255,204,99,1)"); }
-    get yellow600() { return this.add("color", "rgba(246,177,78,1)"); }
-    get yellow700() { return this.add("color", "rgba(207,150,73,1)"); }
-    get yellow800() { return this.add("color", "rgba(164,120,66,1)"); }
-    get yellow900() { return this.add("color", "rgba(120,89,54,1)"); }
-    get green50() { return this.add("color", "rgba(250,255,250,1)"); }
-    get green100() { return this.add("color", "rgba(223,248,216,1)"); }
-    get green200() { return this.add("color", "rgba(199,239,183,1)"); }
-    get green300() { return this.add("color", "rgba(179,226,153,1)"); }
-    get green400() { return this.add("color", "rgba(163,208,126,1)"); }
-    get green500() { return this.add("color", "rgba(146,185,101,1)"); }
-    get green600() { return this.add("color", "rgba(126,156,79,1)"); }
-    get green700() { return this.add("color", "rgba(101,120,57,1)"); }
-    get green800() { return this.add("color", "rgba(64,93,44,1)"); }
-    get green900() { return this.add("color", "rgba(34,64,31,1)"); }
-    get violet50() { return this.add("color", "rgba(245,243,255,1)"); }
-    get violet100() { return this.add("color", "rgba(238,234,253,1)"); }
-    get violet200() { return this.add("color", "rgba(232,225,252,1)"); }
-    get violet300() { return this.add("color", "rgba(218,205,246,1)"); }
-    get violet400() { return this.add("color", "rgba(204,186,236,1)"); }
-    get violet500() { return this.add("color", "rgba(190,167,223,1)"); }
-    get violet600() { return this.add("color", "rgba(173,147,205,1)"); }
-    get violet700() { return this.add("color", "rgba(153,126,181,1)"); }
-    get violet800() { return this.add("color", "rgba(128,103,151,1)"); }
-    get violet900() { return this.add("color", "rgba(100,78,116,1)"); }
-    color(value) { return this.add("color", value); }
-    get bgWhite() { return this.add("backgroundColor", "rgba(254,254,254,1)"); }
-    get bgTransparent() { return this.add("backgroundColor", "rgba(0,0,0,0)"); }
-    get bgGray50() { return this.add("backgroundColor", "rgba(255,253,253,1)"); }
-    get bgGray100() { return this.add("backgroundColor", "rgba(247,245,245,1)"); }
-    get bgGray200() { return this.add("backgroundColor", "rgba(236,235,235,1)"); }
-    get bgGray300() { return this.add("backgroundColor", "rgba(221,220,220,1)"); }
-    get bgGray400() { return this.add("backgroundColor", "rgba(201,201,201,1)"); }
-    get bgGray500() { return this.add("backgroundColor", "rgba(175,175,175,1)"); }
-    get bgGray600() { return this.add("backgroundColor", "rgba(141,141,141,1)"); }
-    get bgGray700() { return this.add("backgroundColor", "rgba(100,100,100,1)"); }
-    get bgGray800() { return this.add("backgroundColor", "rgba(53,53,53,1)"); }
-    get bgGray900() { return this.add("backgroundColor", "rgba(36,36,36,1)"); }
-    get bgLightBlue50() { return this.add("backgroundColor", "rgba(240,249,255,1)"); }
-    get bgLightBlue100() { return this.add("backgroundColor", "rgba(224,242,254,1)"); }
-    get bgLightBlue200() { return this.add("backgroundColor", "rgba(186,230,253,1)"); }
-    get bgLightBlue300() { return this.add("backgroundColor", "rgba(125,211,252,1)"); }
-    get bgLightBlue400() { return this.add("backgroundColor", "rgba(56,189,248,1)"); }
-    get bgLightBlue500() { return this.add("backgroundColor", "rgba(14,165,233,1)"); }
-    get bgLightBlue600() { return this.add("backgroundColor", "rgba(2,143,199,1)"); }
-    get bgLightBlue700() { return this.add("backgroundColor", "rgba(3,105,161,1)"); }
-    get bgLightBlue800() { return this.add("backgroundColor", "rgba(7,89,133,1)"); }
-    get bgLightBlue900() { return this.add("backgroundColor", "rgba(12,74,110,1)"); }
-    get bgRed50() { return this.add("backgroundColor", "rgba(255,242,242,1)"); }
-    get bgRed100() { return this.add("backgroundColor", "rgba(253,210,209,1)"); }
-    get bgRed200() { return this.add("backgroundColor", "rgba(249,181,177,1)"); }
-    get bgRed300() { return this.add("backgroundColor", "rgba(242,155,148,1)"); }
-    get bgRed400() { return this.add("backgroundColor", "rgba(232,133,122,1)"); }
-    get bgRed500() { return this.add("backgroundColor", "rgba(218,114,100,1)"); }
-    get bgRed600() { return this.add("backgroundColor", "rgba(200,98,81,1)"); }
-    get bgRed700() { return this.add("backgroundColor", "rgba(176,83,73,1)"); }
-    get bgRed800() { return this.add("backgroundColor", "rgba(149,68,64,1)"); }
-    get bgRed900() { return this.add("backgroundColor", "rgba(120,54,54,1)"); }
-    get bgYellow50() { return this.add("backgroundColor", "rgba(255,254,242,1)"); }
-    get bgYellow100() { return this.add("backgroundColor", "rgba(255,254,212,1)"); }
-    get bgYellow200() { return this.add("backgroundColor", "rgba(255,250,180,1)"); }
-    get bgYellow300() { return this.add("backgroundColor", "rgba(255,240,150,1)"); }
-    get bgYellow400() { return this.add("backgroundColor", "rgba(255,225,123,1)"); }
-    get bgYellow500() { return this.add("backgroundColor", "rgba(255,204,99,1)"); }
-    get bgYellow600() { return this.add("backgroundColor", "rgba(246,177,78,1)"); }
-    get bgYellow700() { return this.add("backgroundColor", "rgba(207,150,73,1)"); }
-    get bgYellow800() { return this.add("backgroundColor", "rgba(164,120,66,1)"); }
-    get bgYellow900() { return this.add("backgroundColor", "rgba(120,89,54,1)"); }
-    get bgGreen50() { return this.add("backgroundColor", "rgba(250,255,250,1)"); }
-    get bgGreen100() { return this.add("backgroundColor", "rgba(223,248,216,1)"); }
-    get bgGreen200() { return this.add("backgroundColor", "rgba(199,239,183,1)"); }
-    get bgGreen300() { return this.add("backgroundColor", "rgba(179,226,153,1)"); }
-    get bgGreen400() { return this.add("backgroundColor", "rgba(163,208,126,1)"); }
-    get bgGreen500() { return this.add("backgroundColor", "rgba(146,185,101,1)"); }
-    get bgGreen600() { return this.add("backgroundColor", "rgba(126,156,79,1)"); }
-    get bgGreen700() { return this.add("backgroundColor", "rgba(101,120,57,1)"); }
-    get bgGreen800() { return this.add("backgroundColor", "rgba(64,93,44,1)"); }
-    get bgGreen900() { return this.add("backgroundColor", "rgba(34,64,31,1)"); }
-    get bgViolet50() { return this.add("backgroundColor", "rgba(245,243,255,1)"); }
-    get bgViolet100() { return this.add("backgroundColor", "rgba(238,234,253,1)"); }
-    get bgViolet200() { return this.add("backgroundColor", "rgba(232,225,252,1)"); }
-    get bgViolet300() { return this.add("backgroundColor", "rgba(218,205,246,1)"); }
-    get bgViolet400() { return this.add("backgroundColor", "rgba(204,186,236,1)"); }
-    get bgViolet500() { return this.add("backgroundColor", "rgba(190,167,223,1)"); }
-    get bgViolet600() { return this.add("backgroundColor", "rgba(173,147,205,1)"); }
-    get bgViolet700() { return this.add("backgroundColor", "rgba(153,126,181,1)"); }
-    get bgViolet800() { return this.add("backgroundColor", "rgba(128,103,151,1)"); }
-    get bgViolet900() { return this.add("backgroundColor", "rgba(100,78,116,1)"); }
-    bgColor(value) { return this.add("backgroundColor", value); }
-    get fWhite() { return this.add("fill", "rgba(254,254,254,1)"); }
-    get fTransparent() { return this.add("fill", "rgba(0,0,0,0)"); }
-    get fGray50() { return this.add("fill", "rgba(255,253,253,1)"); }
-    get fGray100() { return this.add("fill", "rgba(247,245,245,1)"); }
-    get fGray200() { return this.add("fill", "rgba(236,235,235,1)"); }
-    get fGray300() { return this.add("fill", "rgba(221,220,220,1)"); }
-    get fGray400() { return this.add("fill", "rgba(201,201,201,1)"); }
-    get fGray500() { return this.add("fill", "rgba(175,175,175,1)"); }
-    get fGray600() { return this.add("fill", "rgba(141,141,141,1)"); }
-    get fGray700() { return this.add("fill", "rgba(100,100,100,1)"); }
-    get fGray800() { return this.add("fill", "rgba(53,53,53,1)"); }
-    get fGray900() { return this.add("fill", "rgba(36,36,36,1)"); }
-    get fLightBlue50() { return this.add("fill", "rgba(240,249,255,1)"); }
-    get fLightBlue100() { return this.add("fill", "rgba(224,242,254,1)"); }
-    get fLightBlue200() { return this.add("fill", "rgba(186,230,253,1)"); }
-    get fLightBlue300() { return this.add("fill", "rgba(125,211,252,1)"); }
-    get fLightBlue400() { return this.add("fill", "rgba(56,189,248,1)"); }
-    get fLightBlue500() { return this.add("fill", "rgba(14,165,233,1)"); }
-    get fLightBlue600() { return this.add("fill", "rgba(2,143,199,1)"); }
-    get fLightBlue700() { return this.add("fill", "rgba(3,105,161,1)"); }
-    get fLightBlue800() { return this.add("fill", "rgba(7,89,133,1)"); }
-    get fLightBlue900() { return this.add("fill", "rgba(12,74,110,1)"); }
-    get fRed50() { return this.add("fill", "rgba(255,242,242,1)"); }
-    get fRed100() { return this.add("fill", "rgba(253,210,209,1)"); }
-    get fRed200() { return this.add("fill", "rgba(249,181,177,1)"); }
-    get fRed300() { return this.add("fill", "rgba(242,155,148,1)"); }
-    get fRed400() { return this.add("fill", "rgba(232,133,122,1)"); }
-    get fRed500() { return this.add("fill", "rgba(218,114,100,1)"); }
-    get fRed600() { return this.add("fill", "rgba(200,98,81,1)"); }
-    get fRed700() { return this.add("fill", "rgba(176,83,73,1)"); }
-    get fRed800() { return this.add("fill", "rgba(149,68,64,1)"); }
-    get fRed900() { return this.add("fill", "rgba(120,54,54,1)"); }
-    get fYellow50() { return this.add("fill", "rgba(255,254,242,1)"); }
-    get fYellow100() { return this.add("fill", "rgba(255,254,212,1)"); }
-    get fYellow200() { return this.add("fill", "rgba(255,250,180,1)"); }
-    get fYellow300() { return this.add("fill", "rgba(255,240,150,1)"); }
-    get fYellow400() { return this.add("fill", "rgba(255,225,123,1)"); }
-    get fYellow500() { return this.add("fill", "rgba(255,204,99,1)"); }
-    get fYellow600() { return this.add("fill", "rgba(246,177,78,1)"); }
-    get fYellow700() { return this.add("fill", "rgba(207,150,73,1)"); }
-    get fYellow800() { return this.add("fill", "rgba(164,120,66,1)"); }
-    get fYellow900() { return this.add("fill", "rgba(120,89,54,1)"); }
-    get fGreen50() { return this.add("fill", "rgba(250,255,250,1)"); }
-    get fGreen100() { return this.add("fill", "rgba(223,248,216,1)"); }
-    get fGreen200() { return this.add("fill", "rgba(199,239,183,1)"); }
-    get fGreen300() { return this.add("fill", "rgba(179,226,153,1)"); }
-    get fGreen400() { return this.add("fill", "rgba(163,208,126,1)"); }
-    get fGreen500() { return this.add("fill", "rgba(146,185,101,1)"); }
-    get fGreen600() { return this.add("fill", "rgba(126,156,79,1)"); }
-    get fGreen700() { return this.add("fill", "rgba(101,120,57,1)"); }
-    get fGreen800() { return this.add("fill", "rgba(64,93,44,1)"); }
-    get fGreen900() { return this.add("fill", "rgba(34,64,31,1)"); }
-    get fViolet50() { return this.add("fill", "rgba(245,243,255,1)"); }
-    get fViolet100() { return this.add("fill", "rgba(238,234,253,1)"); }
-    get fViolet200() { return this.add("fill", "rgba(232,225,252,1)"); }
-    get fViolet300() { return this.add("fill", "rgba(218,205,246,1)"); }
-    get fViolet400() { return this.add("fill", "rgba(204,186,236,1)"); }
-    get fViolet500() { return this.add("fill", "rgba(190,167,223,1)"); }
-    get fViolet600() { return this.add("fill", "rgba(173,147,205,1)"); }
-    get fViolet700() { return this.add("fill", "rgba(153,126,181,1)"); }
-    get fViolet800() { return this.add("fill", "rgba(128,103,151,1)"); }
-    get fViolet900() { return this.add("fill", "rgba(100,78,116,1)"); }
-    fill(value) { return this.add("fill", value); }
-    // spacing
-    get mt0() { return this.mt(0); }
-    get mt1() { return this.mt(1); }
-    get mt2() { return this.mt(2); }
-    get mt3() { return this.mt(3); }
-    get mt4() { return this.mt(4); }
-    get mt5() { return this.mt(5); }
-    get mt6() { return this.mt(6); }
-    get mt7() { return this.mt(7); }
-    get mt8() { return this.mt(8); }
-    mt(inc) { return this.add("marginTop", maybeInc(inc)); }
-    mtPx(px) { return this.mt(`${px}px`); }
-    get mr0() { return this.mr(0); }
-    get mr1() { return this.mr(1); }
-    get mr2() { return this.mr(2); }
-    get mr3() { return this.mr(3); }
-    get mr4() { return this.mr(4); }
-    get mr5() { return this.mr(5); }
-    get mr6() { return this.mr(6); }
-    get mr7() { return this.mr(7); }
-    get mr8() { return this.mr(8); }
-    mr(inc) { return this.add("marginRight", maybeInc(inc)); }
-    mrPx(px) { return this.mr(`${px}px`); }
-    get mb0() { return this.mb(0); }
-    get mb1() { return this.mb(1); }
-    get mb2() { return this.mb(2); }
-    get mb3() { return this.mb(3); }
-    get mb4() { return this.mb(4); }
-    get mb5() { return this.mb(5); }
-    get mb6() { return this.mb(6); }
-    get mb7() { return this.mb(7); }
-    get mb8() { return this.mb(8); }
-    mb(inc) { return this.add("marginBottom", maybeInc(inc)); }
-    mbPx(px) { return this.mb(`${px}px`); }
-    get ml0() { return this.ml(0); }
-    get ml1() { return this.ml(1); }
-    get ml2() { return this.ml(2); }
-    get ml3() { return this.ml(3); }
-    get ml4() { return this.ml(4); }
-    get ml5() { return this.ml(5); }
-    get ml6() { return this.ml(6); }
-    get ml7() { return this.ml(7); }
-    get ml8() { return this.ml(8); }
-    ml(inc) { return this.add("marginLeft", maybeInc(inc)); }
-    mlPx(px) { return this.ml(`${px}px`); }
-    get mx0() { return this.mx(0); }
-    get mx1() { return this.mx(1); }
-    get mx2() { return this.mx(2); }
-    get mx3() { return this.mx(3); }
-    get mx4() { return this.mx(4); }
-    get mx5() { return this.mx(5); }
-    get mx6() { return this.mx(6); }
-    get mx7() { return this.mx(7); }
-    get mx8() { return this.mx(8); }
-    mx(inc) { return this.ml(inc).mr(inc); }
-    mxPx(px) { return this.mlPx(px).mrPx(px); }
-    get my0() { return this.my(0); }
-    get my1() { return this.my(1); }
-    get my2() { return this.my(2); }
-    get my3() { return this.my(3); }
-    get my4() { return this.my(4); }
-    get my5() { return this.my(5); }
-    get my6() { return this.my(6); }
-    get my7() { return this.my(7); }
-    get my8() { return this.my(8); }
-    my(inc) { return this.mt(inc).mb(inc); }
-    myPx(px) { return this.mtPx(px).mbPx(px); }
-    get m0() { return this.m(0); }
-    get m1() { return this.m(1); }
-    get m2() { return this.m(2); }
-    get m3() { return this.m(3); }
-    get m4() { return this.m(4); }
-    get m5() { return this.m(5); }
-    get m6() { return this.m(6); }
-    get m7() { return this.m(7); }
-    get m8() { return this.m(8); }
-    m(inc) { return this.mt(inc).mb(inc).mr(inc).ml(inc); }
-    mPx(px) { return this.mtPx(px).mbPx(px).mrPx(px).mlPx(px); }
-    get pt0() { return this.pt(0); }
-    get pt1() { return this.pt(1); }
-    get pt2() { return this.pt(2); }
-    get pt3() { return this.pt(3); }
-    get pt4() { return this.pt(4); }
-    get pt5() { return this.pt(5); }
-    get pt6() { return this.pt(6); }
-    get pt7() { return this.pt(7); }
-    get pt8() { return this.pt(8); }
-    pt(inc) { return this.add("paddingTop", maybeInc(inc)); }
-    ptPx(px) { return this.pt(`${px}px`); }
-    get pr0() { return this.pr(0); }
-    get pr1() { return this.pr(1); }
-    get pr2() { return this.pr(2); }
-    get pr3() { return this.pr(3); }
-    get pr4() { return this.pr(4); }
-    get pr5() { return this.pr(5); }
-    get pr6() { return this.pr(6); }
-    get pr7() { return this.pr(7); }
-    get pr8() { return this.pr(8); }
-    pr(inc) { return this.add("paddingRight", maybeInc(inc)); }
-    prPx(px) { return this.pr(`${px}px`); }
-    get pb0() { return this.pb(0); }
-    get pb1() { return this.pb(1); }
-    get pb2() { return this.pb(2); }
-    get pb3() { return this.pb(3); }
-    get pb4() { return this.pb(4); }
-    get pb5() { return this.pb(5); }
-    get pb6() { return this.pb(6); }
-    get pb7() { return this.pb(7); }
-    get pb8() { return this.pb(8); }
-    pb(inc) { return this.add("paddingBottom", maybeInc(inc)); }
-    pbPx(px) { return this.pb(`${px}px`); }
-    get pl0() { return this.pl(0); }
-    get pl1() { return this.pl(1); }
-    get pl2() { return this.pl(2); }
-    get pl3() { return this.pl(3); }
-    get pl4() { return this.pl(4); }
-    get pl5() { return this.pl(5); }
-    get pl6() { return this.pl(6); }
-    get pl7() { return this.pl(7); }
-    get pl8() { return this.pl(8); }
-    pl(inc) { return this.add("paddingLeft", maybeInc(inc)); }
-    plPx(px) { return this.pl(`${px}px`); }
-    get px0() { return this.px(0); }
-    get px1() { return this.px(1); }
-    get px2() { return this.px(2); }
-    get px3() { return this.px(3); }
-    get px4() { return this.px(4); }
-    get px5() { return this.px(5); }
-    get px6() { return this.px(6); }
-    get px7() { return this.px(7); }
-    get px8() { return this.px(8); }
-    px(inc) { return this.pl(inc).pr(inc); }
-    pxPx(px) { return this.plPx(px).prPx(px); }
-    get py0() { return this.py(0); }
-    get py1() { return this.py(1); }
-    get py2() { return this.py(2); }
-    get py3() { return this.py(3); }
-    get py4() { return this.py(4); }
-    get py5() { return this.py(5); }
-    get py6() { return this.py(6); }
-    get py7() { return this.py(7); }
-    get py8() { return this.py(8); }
-    py(inc) { return this.pt(inc).pb(inc); }
-    pyPx(px) { return this.ptPx(px).pbPx(px); }
-    get p0() { return this.p(0); }
-    get p1() { return this.p(1); }
-    get p2() { return this.p(2); }
-    get p3() { return this.p(3); }
-    get p4() { return this.p(4); }
-    get p5() { return this.p(5); }
-    get p6() { return this.p(6); }
-    get p7() { return this.p(7); }
-    get p8() { return this.p(8); }
-    p(inc) { return this.pt(inc).pb(inc).pr(inc).pl(inc); }
-    pPx(px) { return this.ptPx(px).pbPx(px).prPx(px).plPx(px); }
+    // border
+    /** Sets `borderStyle: "solid"; borderWidth: "1px"`. */
+    get ba() {
+        return this.add("borderStyle", "solid").add("borderWidth", "1px");
+    }
+    /** Sets `borderTopStyle: "solid"; borderTopWidth: "1px"`. */
+    get bt() {
+        return this.add("borderTopStyle", "solid").add("borderTopWidth", "1px");
+    }
+    /** Sets `borderRightStyle: "solid"; borderRightWidth: "1px"`. */
+    get br() {
+        return this.add("borderRightStyle", "solid").add("borderRightWidth", "1px");
+    }
+    /** Sets `borderBottomStyle: "solid"; borderBottomWidth: "1px"`. */
+    get bb() {
+        return this.add("borderBottomStyle", "solid").add("borderBottomWidth", "1px");
+    }
+    /** Sets `borderLeftStyle: "solid"; borderLeftWidth: "1px"`. */
+    get bl() {
+        return this.add("borderLeftStyle", "solid").add("borderLeftWidth", "1px");
+    }
+    /** Sets `borderStyle: "none"; borderWidth: "0"`. */
+    get bn() {
+        return this.add("borderStyle", "none").add("borderWidth", "0");
+    }
+    // borderColor
+    /** Sets `borderColor: "rgba(254,254,254,1)"`. */
+    get bWhite() {
+        return this.add("borderColor", "rgba(254,254,254,1)");
+    }
+    /** Sets `borderColor: "rgba(0,0,0,0)"`. */
+    get bTransparent() {
+        return this.add("borderColor", "rgba(0,0,0,0)");
+    }
+    /** Sets `borderColor: "rgba(255,253,253,1)"`. */
+    get bGray50() {
+        return this.add("borderColor", "rgba(255,253,253,1)");
+    }
+    /** Sets `borderColor: "rgba(247,245,245,1)"`. */
+    get bGray100() {
+        return this.add("borderColor", "rgba(247,245,245,1)");
+    }
+    /** Sets `borderColor: "rgba(236,235,235,1)"`. */
+    get bGray200() {
+        return this.add("borderColor", "rgba(236,235,235,1)");
+    }
+    /** Sets `borderColor: "rgba(221,220,220,1)"`. */
+    get bGray300() {
+        return this.add("borderColor", "rgba(221,220,220,1)");
+    }
+    /** Sets `borderColor: "rgba(201,201,201,1)"`. */
+    get bGray400() {
+        return this.add("borderColor", "rgba(201,201,201,1)");
+    }
+    /** Sets `borderColor: "rgba(175,175,175,1)"`. */
+    get bGray500() {
+        return this.add("borderColor", "rgba(175,175,175,1)");
+    }
+    /** Sets `borderColor: "rgba(141,141,141,1)"`. */
+    get bGray600() {
+        return this.add("borderColor", "rgba(141,141,141,1)");
+    }
+    /** Sets `borderColor: "rgba(100,100,100,1)"`. */
+    get bGray700() {
+        return this.add("borderColor", "rgba(100,100,100,1)");
+    }
+    /** Sets `borderColor: "rgba(53,53,53,1)"`. */
+    get bGray800() {
+        return this.add("borderColor", "rgba(53,53,53,1)");
+    }
+    /** Sets `borderColor: "rgba(36,36,36,1)"`. */
+    get bGray900() {
+        return this.add("borderColor", "rgba(36,36,36,1)");
+    }
+    /** Sets `borderColor: "rgba(240,249,255,1)"`. */
+    get bLightBlue50() {
+        return this.add("borderColor", "rgba(240,249,255,1)");
+    }
+    /** Sets `borderColor: "rgba(224,242,254,1)"`. */
+    get bLightBlue100() {
+        return this.add("borderColor", "rgba(224,242,254,1)");
+    }
+    /** Sets `borderColor: "rgba(186,230,253,1)"`. */
+    get bLightBlue200() {
+        return this.add("borderColor", "rgba(186,230,253,1)");
+    }
+    /** Sets `borderColor: "rgba(125,211,252,1)"`. */
+    get bLightBlue300() {
+        return this.add("borderColor", "rgba(125,211,252,1)");
+    }
+    /** Sets `borderColor: "rgba(56,189,248,1)"`. */
+    get bLightBlue400() {
+        return this.add("borderColor", "rgba(56,189,248,1)");
+    }
+    /** Sets `borderColor: "rgba(14,165,233,1)"`. */
+    get bLightBlue500() {
+        return this.add("borderColor", "rgba(14,165,233,1)");
+    }
+    /** Sets `borderColor: "rgba(2,143,199,1)"`. */
+    get bLightBlue600() {
+        return this.add("borderColor", "rgba(2,143,199,1)");
+    }
+    /** Sets `borderColor: "rgba(3,105,161,1)"`. */
+    get bLightBlue700() {
+        return this.add("borderColor", "rgba(3,105,161,1)");
+    }
+    /** Sets `borderColor: "rgba(7,89,133,1)"`. */
+    get bLightBlue800() {
+        return this.add("borderColor", "rgba(7,89,133,1)");
+    }
+    /** Sets `borderColor: "rgba(12,74,110,1)"`. */
+    get bLightBlue900() {
+        return this.add("borderColor", "rgba(12,74,110,1)");
+    }
+    /** Sets `borderColor: "rgba(255,242,242,1)"`. */
+    get bRed50() {
+        return this.add("borderColor", "rgba(255,242,242,1)");
+    }
+    /** Sets `borderColor: "rgba(253,210,209,1)"`. */
+    get bRed100() {
+        return this.add("borderColor", "rgba(253,210,209,1)");
+    }
+    /** Sets `borderColor: "rgba(249,181,177,1)"`. */
+    get bRed200() {
+        return this.add("borderColor", "rgba(249,181,177,1)");
+    }
+    /** Sets `borderColor: "rgba(242,155,148,1)"`. */
+    get bRed300() {
+        return this.add("borderColor", "rgba(242,155,148,1)");
+    }
+    /** Sets `borderColor: "rgba(232,133,122,1)"`. */
+    get bRed400() {
+        return this.add("borderColor", "rgba(232,133,122,1)");
+    }
+    /** Sets `borderColor: "rgba(218,114,100,1)"`. */
+    get bRed500() {
+        return this.add("borderColor", "rgba(218,114,100,1)");
+    }
+    /** Sets `borderColor: "rgba(200,98,81,1)"`. */
+    get bRed600() {
+        return this.add("borderColor", "rgba(200,98,81,1)");
+    }
+    /** Sets `borderColor: "rgba(176,83,73,1)"`. */
+    get bRed700() {
+        return this.add("borderColor", "rgba(176,83,73,1)");
+    }
+    /** Sets `borderColor: "rgba(149,68,64,1)"`. */
+    get bRed800() {
+        return this.add("borderColor", "rgba(149,68,64,1)");
+    }
+    /** Sets `borderColor: "rgba(120,54,54,1)"`. */
+    get bRed900() {
+        return this.add("borderColor", "rgba(120,54,54,1)");
+    }
+    /** Sets `borderColor: "rgba(255,254,242,1)"`. */
+    get bYellow50() {
+        return this.add("borderColor", "rgba(255,254,242,1)");
+    }
+    /** Sets `borderColor: "rgba(255,254,212,1)"`. */
+    get bYellow100() {
+        return this.add("borderColor", "rgba(255,254,212,1)");
+    }
+    /** Sets `borderColor: "rgba(255,250,180,1)"`. */
+    get bYellow200() {
+        return this.add("borderColor", "rgba(255,250,180,1)");
+    }
+    /** Sets `borderColor: "rgba(255,240,150,1)"`. */
+    get bYellow300() {
+        return this.add("borderColor", "rgba(255,240,150,1)");
+    }
+    /** Sets `borderColor: "rgba(255,225,123,1)"`. */
+    get bYellow400() {
+        return this.add("borderColor", "rgba(255,225,123,1)");
+    }
+    /** Sets `borderColor: "rgba(255,204,99,1)"`. */
+    get bYellow500() {
+        return this.add("borderColor", "rgba(255,204,99,1)");
+    }
+    /** Sets `borderColor: "rgba(246,177,78,1)"`. */
+    get bYellow600() {
+        return this.add("borderColor", "rgba(246,177,78,1)");
+    }
+    /** Sets `borderColor: "rgba(207,150,73,1)"`. */
+    get bYellow700() {
+        return this.add("borderColor", "rgba(207,150,73,1)");
+    }
+    /** Sets `borderColor: "rgba(164,120,66,1)"`. */
+    get bYellow800() {
+        return this.add("borderColor", "rgba(164,120,66,1)");
+    }
+    /** Sets `borderColor: "rgba(120,89,54,1)"`. */
+    get bYellow900() {
+        return this.add("borderColor", "rgba(120,89,54,1)");
+    }
+    /** Sets `borderColor: "rgba(250,255,250,1)"`. */
+    get bGreen50() {
+        return this.add("borderColor", "rgba(250,255,250,1)");
+    }
+    /** Sets `borderColor: "rgba(223,248,216,1)"`. */
+    get bGreen100() {
+        return this.add("borderColor", "rgba(223,248,216,1)");
+    }
+    /** Sets `borderColor: "rgba(199,239,183,1)"`. */
+    get bGreen200() {
+        return this.add("borderColor", "rgba(199,239,183,1)");
+    }
+    /** Sets `borderColor: "rgba(179,226,153,1)"`. */
+    get bGreen300() {
+        return this.add("borderColor", "rgba(179,226,153,1)");
+    }
+    /** Sets `borderColor: "rgba(163,208,126,1)"`. */
+    get bGreen400() {
+        return this.add("borderColor", "rgba(163,208,126,1)");
+    }
+    /** Sets `borderColor: "rgba(146,185,101,1)"`. */
+    get bGreen500() {
+        return this.add("borderColor", "rgba(146,185,101,1)");
+    }
+    /** Sets `borderColor: "rgba(126,156,79,1)"`. */
+    get bGreen600() {
+        return this.add("borderColor", "rgba(126,156,79,1)");
+    }
+    /** Sets `borderColor: "rgba(101,120,57,1)"`. */
+    get bGreen700() {
+        return this.add("borderColor", "rgba(101,120,57,1)");
+    }
+    /** Sets `borderColor: "rgba(64,93,44,1)"`. */
+    get bGreen800() {
+        return this.add("borderColor", "rgba(64,93,44,1)");
+    }
+    /** Sets `borderColor: "rgba(34,64,31,1)"`. */
+    get bGreen900() {
+        return this.add("borderColor", "rgba(34,64,31,1)");
+    }
+    /** Sets `borderColor: "rgba(245,243,255,1)"`. */
+    get bViolet50() {
+        return this.add("borderColor", "rgba(245,243,255,1)");
+    }
+    /** Sets `borderColor: "rgba(238,234,253,1)"`. */
+    get bViolet100() {
+        return this.add("borderColor", "rgba(238,234,253,1)");
+    }
+    /** Sets `borderColor: "rgba(232,225,252,1)"`. */
+    get bViolet200() {
+        return this.add("borderColor", "rgba(232,225,252,1)");
+    }
+    /** Sets `borderColor: "rgba(218,205,246,1)"`. */
+    get bViolet300() {
+        return this.add("borderColor", "rgba(218,205,246,1)");
+    }
+    /** Sets `borderColor: "rgba(204,186,236,1)"`. */
+    get bViolet400() {
+        return this.add("borderColor", "rgba(204,186,236,1)");
+    }
+    /** Sets `borderColor: "rgba(190,167,223,1)"`. */
+    get bViolet500() {
+        return this.add("borderColor", "rgba(190,167,223,1)");
+    }
+    /** Sets `borderColor: "rgba(173,147,205,1)"`. */
+    get bViolet600() {
+        return this.add("borderColor", "rgba(173,147,205,1)");
+    }
+    /** Sets `borderColor: "rgba(153,126,181,1)"`. */
+    get bViolet700() {
+        return this.add("borderColor", "rgba(153,126,181,1)");
+    }
+    /** Sets `borderColor: "rgba(128,103,151,1)"`. */
+    get bViolet800() {
+        return this.add("borderColor", "rgba(128,103,151,1)");
+    }
+    /** Sets `borderColor: "rgba(100,78,116,1)"`. */
+    get bViolet900() {
+        return this.add("borderColor", "rgba(100,78,116,1)");
+    }
+    /** Sets `borderColor: value`. */
+    bc(value) {
+        return this.add("borderColor", value);
+    }
+    // borderRadius
+    /** Sets `borderRadius: "0"`. */
+    get br0() {
+        return this.add("borderRadius", "0");
+    }
+    /** Sets `borderRadius: "4px"`. */
+    get br4() {
+        return this.add("borderRadius", "4px");
+    }
+    /** Sets `borderRadius: "8px"`. */
+    get br8() {
+        return this.add("borderRadius", "8px");
+    }
+    /** Sets `borderRadius: "12px"`. */
+    get br12() {
+        return this.add("borderRadius", "12px");
+    }
+    /** Sets `borderRadius: "16px"`. */
+    get br16() {
+        return this.add("borderRadius", "16px");
+    }
+    /** Sets `borderRadius: "24px"`. */
+    get br24() {
+        return this.add("borderRadius", "24px");
+    }
+    /** Sets `borderRadius: "100%"`. */
+    get br100() {
+        return this.add("borderRadius", "100%");
+    }
+    /** Sets `borderRadius: value`. */
+    borderRadius(value) {
+        return this.add("borderRadius", value);
+    }
+    /** Sets `borderTopRightRadius: "4px"; borderTopLeftRadius: "4px"`. */
+    get brt4() {
+        return this.add("borderTopRightRadius", "4px").add("borderTopLeftRadius", "4px");
+    }
+    /** Sets `borderBottomRightRadius: "4px"; borderBottomLeftRadius: "4px"`. */
+    get brb4() {
+        return this.add("borderBottomRightRadius", "4px").add("borderBottomLeftRadius", "4px");
+    }
+    // borderStyle
+    /** Sets `borderStyle: "dashed"`. */
+    get bsDashed() {
+        return this.add("borderStyle", "dashed");
+    }
+    /** Sets `borderStyle: "dotted"`. */
+    get bsDotted() {
+        return this.add("borderStyle", "dotted");
+    }
+    /** Sets `borderStyle: "none"`. */
+    get bsNone() {
+        return this.add("borderStyle", "none");
+    }
+    /** Sets `borderStyle: "solid"`. */
+    get bsSolid() {
+        return this.add("borderStyle", "solid");
+    }
+    /** Sets `borderStyle: value`. */
+    bs(value) {
+        return this.add("borderStyle", value);
+    }
+    // borderWidth
+    /** Sets `borderWidth: "1px"`. */
+    get bw1() {
+        return this.add("borderWidth", "1px");
+    }
+    /** Sets `borderWidth: "2px"`. */
+    get bw2() {
+        return this.add("borderWidth", "2px");
+    }
+    /** Sets `borderWidth: value`. */
+    bw(value) {
+        return this.add("borderWidth", value);
+    }
+    // boxShadow
+    /** Sets `boxShadow: "none"`. */
+    get bsh0() {
+        return this.add("boxShadow", "none");
+    }
+    /** Sets `boxShadow: "0px 2px 16px 0px rgba(17,24,39,0.03), 0px 4px 8px 0px rgba(17,24,39,0.08)"`. */
+    get bshBasic() {
+        return this.add("boxShadow", "0px 2px 16px 0px rgba(17,24,39,0.03), 0px 4px 8px 0px rgba(17,24,39,0.08)");
+    }
+    /** Sets `boxShadow: "0px 2px 24px 0px rgba(17,24,39,0.08), 0px 4px 8px 0px rgba(17,24,39,0.1)"`. */
+    get bshHover() {
+        return this.add("boxShadow", "0px 2px 24px 0px rgba(17,24,39,0.08), 0px 4px 8px 0px rgba(17,24,39,0.1)");
+    }
+    /** Sets `boxShadow: "0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px rgba(3,105,161,1)"`. */
+    get bshFocus() {
+        return this.add("boxShadow", "0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px rgba(3,105,161,1)");
+    }
+    /** Sets `boxShadow: "0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px rgba(149,68,64,1)"`. */
+    get bshDanger() {
+        return this.add("boxShadow", "0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px rgba(149,68,64,1)");
+    }
+    /** Sets `boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04)"`. */
+    get bshModal() {
+        return this.add("boxShadow", "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04)");
+    }
+    /** Sets `boxShadow: value`. */
+    boxShadow(value) {
+        return this.add("boxShadow", value);
+    }
+    // coordinates
+    /** Sets `top: "0px"`. */
+    get top0() {
+        return this.top(0);
+    }
+    /** Sets `top: "8px"`. */
+    get top1() {
+        return this.top(1);
+    }
+    /** Sets `top: "16px"`. */
+    get top2() {
+        return this.top(2);
+    }
+    /** Sets `top: "24px"`. */
+    get top3() {
+        return this.top(3);
+    }
+    /** Sets `top: "32px"`. */
+    get top4() {
+        return this.top(4);
+    }
+    /** Sets `top: "40px"`. */
+    get top5() {
+        return this.top(5);
+    }
+    /** Sets `top: "48px"`. */
+    get top6() {
+        return this.top(6);
+    }
+    /** Sets `top: "56px"`. */
+    get top7() {
+        return this.top(7);
+    }
+    /** Sets `top: "64px"`. */
+    get top8() {
+        return this.top(8);
+    }
+    /** Sets `top: inc`. */
+    top(inc) {
+        return this.add("top", maybeInc(inc));
+    }
+    /** Sets `top: px`. */
+    topPx(px) {
+        return this.top(`${px}px`);
+    }
+    /** Sets `right: "0px"`. */
+    get right0() {
+        return this.right(0);
+    }
+    /** Sets `right: "8px"`. */
+    get right1() {
+        return this.right(1);
+    }
+    /** Sets `right: "16px"`. */
+    get right2() {
+        return this.right(2);
+    }
+    /** Sets `right: "24px"`. */
+    get right3() {
+        return this.right(3);
+    }
+    /** Sets `right: "32px"`. */
+    get right4() {
+        return this.right(4);
+    }
+    /** Sets `right: "40px"`. */
+    get right5() {
+        return this.right(5);
+    }
+    /** Sets `right: "48px"`. */
+    get right6() {
+        return this.right(6);
+    }
+    /** Sets `right: "56px"`. */
+    get right7() {
+        return this.right(7);
+    }
+    /** Sets `right: "64px"`. */
+    get right8() {
+        return this.right(8);
+    }
+    /** Sets `right: inc`. */
+    right(inc) {
+        return this.add("right", maybeInc(inc));
+    }
+    /** Sets `right: px`. */
+    rightPx(px) {
+        return this.right(`${px}px`);
+    }
+    /** Sets `bottom: "0px"`. */
+    get bottom0() {
+        return this.bottom(0);
+    }
+    /** Sets `bottom: "8px"`. */
+    get bottom1() {
+        return this.bottom(1);
+    }
+    /** Sets `bottom: "16px"`. */
+    get bottom2() {
+        return this.bottom(2);
+    }
+    /** Sets `bottom: "24px"`. */
+    get bottom3() {
+        return this.bottom(3);
+    }
+    /** Sets `bottom: "32px"`. */
+    get bottom4() {
+        return this.bottom(4);
+    }
+    /** Sets `bottom: "40px"`. */
+    get bottom5() {
+        return this.bottom(5);
+    }
+    /** Sets `bottom: "48px"`. */
+    get bottom6() {
+        return this.bottom(6);
+    }
+    /** Sets `bottom: "56px"`. */
+    get bottom7() {
+        return this.bottom(7);
+    }
+    /** Sets `bottom: "64px"`. */
+    get bottom8() {
+        return this.bottom(8);
+    }
+    /** Sets `bottom: inc`. */
+    bottom(inc) {
+        return this.add("bottom", maybeInc(inc));
+    }
+    /** Sets `bottom: px`. */
+    bottomPx(px) {
+        return this.bottom(`${px}px`);
+    }
+    /** Sets `left: "0px"`. */
+    get left0() {
+        return this.left(0);
+    }
+    /** Sets `left: "8px"`. */
+    get left1() {
+        return this.left(1);
+    }
+    /** Sets `left: "16px"`. */
+    get left2() {
+        return this.left(2);
+    }
+    /** Sets `left: "24px"`. */
+    get left3() {
+        return this.left(3);
+    }
+    /** Sets `left: "32px"`. */
+    get left4() {
+        return this.left(4);
+    }
+    /** Sets `left: "40px"`. */
+    get left5() {
+        return this.left(5);
+    }
+    /** Sets `left: "48px"`. */
+    get left6() {
+        return this.left(6);
+    }
+    /** Sets `left: "56px"`. */
+    get left7() {
+        return this.left(7);
+    }
+    /** Sets `left: "64px"`. */
+    get left8() {
+        return this.left(8);
+    }
+    /** Sets `left: inc`. */
+    left(inc) {
+        return this.add("left", maybeInc(inc));
+    }
+    /** Sets `left: px`. */
+    leftPx(px) {
+        return this.left(`${px}px`);
+    }
+    // cursor
+    /** Sets `cursor: "pointer"`. */
+    get cursorPointer() {
+        return this.add("cursor", "pointer");
+    }
+    /** Sets `cursor: "not-allowed"`. */
+    get cursorNotAllowed() {
+        return this.add("cursor", "not-allowed");
+    }
+    /** Sets `cursor: value`. */
+    cursor(value) {
+        return this.add("cursor", value);
+    }
+    // display
+    /** Sets `display: "none"`. */
+    get dn() {
+        return this.add("display", "none");
+    }
+    /** Sets `display: "block"`. */
+    get db() {
+        return this.add("display", "block");
+    }
+    /** Sets `display: "inline-block"`. */
+    get dib() {
+        return this.add("display", "inline-block");
+    }
+    /** Sets `display: "inline-table"`. */
+    get dit() {
+        return this.add("display", "inline-table");
+    }
+    /** Sets `display: "table"`. */
+    get dt() {
+        return this.add("display", "table");
+    }
+    /** Sets `display: "table-cell"`. */
+    get dtc() {
+        return this.add("display", "table-cell");
+    }
+    /** Sets `display: "table-row"`. */
+    get dtRow() {
+        return this.add("display", "table-row");
+    }
+    /** Sets `display: "table-column"`. */
+    get dtColumn() {
+        return this.add("display", "table-column");
+    }
+    /** Sets `display: "table-column-group"`. */
+    get dtColumnGroup() {
+        return this.add("display", "table-column-group");
+    }
+    /** Sets `display: "grid"`. */
+    get dg() {
+        return this.add("display", "grid");
+    }
+    /** Sets `display: "inline-grid"`. */
+    get dig() {
+        return this.add("display", "inline-grid");
+    }
+    /** Sets `display: "flex"`. */
+    get df() {
+        return this.add("display", "flex");
+    }
+    /** Sets `display: "inline-flex"`. */
+    get dif() {
+        return this.add("display", "inline-flex");
+    }
+    /** Sets `display: value`. */
+    display(value) {
+        return this.add("display", value);
+    }
+    // flexbox
+    /** Sets `flex: "initial"`. */
+    get fi() {
+        return this.add("flex", "initial");
+    }
+    /** Sets `flex: "auto"`. */
+    get fa() {
+        return this.add("flex", "auto");
+    }
+    /** Sets `flex: "none"`. */
+    get fn() {
+        return this.add("flex", "none");
+    }
+    /** Sets `flex: "1"`. */
+    get f1() {
+        return this.add("flex", "1");
+    }
+    /** Sets `flex: "2"`. */
+    get f2() {
+        return this.add("flex", "2");
+    }
+    /** Sets `flex: "3"`. */
+    get f3() {
+        return this.add("flex", "3");
+    }
+    /** Sets `flex: "4"`. */
+    get f4() {
+        return this.add("flex", "4");
+    }
+    /** Sets `flex: "5"`. */
+    get f5() {
+        return this.add("flex", "5");
+    }
+    /** Sets `flex: value`. */
+    f(value) {
+        return this.add("flex", value);
+    }
+    /** Sets `justifyContent: "flex-start"`. */
+    get jcfs() {
+        return this.add("justifyContent", "flex-start");
+    }
+    /** Sets `justifyContent: "flex-end"`. */
+    get jcfe() {
+        return this.add("justifyContent", "flex-end");
+    }
+    /** Sets `justifyContent: "center"`. */
+    get jcc() {
+        return this.add("justifyContent", "center");
+    }
+    /** Sets `justifyContent: "space-between"`. */
+    get jcsb() {
+        return this.add("justifyContent", "space-between");
+    }
+    /** Sets `justifyContent: "space-around"`. */
+    get jcsa() {
+        return this.add("justifyContent", "space-around");
+    }
+    /** Sets `justifyContent: "space-evenly"`. */
+    get jcse() {
+        return this.add("justifyContent", "space-evenly");
+    }
+    /** Sets `justifyContent: value`. */
+    jc(value) {
+        return this.add("justifyContent", value);
+    }
+    /** Sets `justifyItems: "flex-start"`. */
+    get jifs() {
+        return this.add("justifyItems", "flex-start");
+    }
+    /** Sets `justifyItems: "flex-end"`. */
+    get jife() {
+        return this.add("justifyItems", "flex-end");
+    }
+    /** Sets `justifyItems: "center"`. */
+    get jic() {
+        return this.add("justifyItems", "center");
+    }
+    /** Sets `justifyItems: "space-between"`. */
+    get jisb() {
+        return this.add("justifyItems", "space-between");
+    }
+    /** Sets `justifyItems: "space-around"`. */
+    get jisa() {
+        return this.add("justifyItems", "space-around");
+    }
+    /** Sets `justifyItems: "space-evenly"`. */
+    get jise() {
+        return this.add("justifyItems", "space-evenly");
+    }
+    /** Sets `justifyItems: value`. */
+    ji(value) {
+        return this.add("justifyItems", value);
+    }
+    /** Sets `alignSelf: "flex-start"`. */
+    get asfs() {
+        return this.add("alignSelf", "flex-start");
+    }
+    /** Sets `alignSelf: "flex-end"`. */
+    get asfe() {
+        return this.add("alignSelf", "flex-end");
+    }
+    /** Sets `alignSelf: "center"`. */
+    get asc() {
+        return this.add("alignSelf", "center");
+    }
+    /** Sets `alignSelf: "baseline"`. */
+    get asb() {
+        return this.add("alignSelf", "baseline");
+    }
+    /** Sets `alignSelf: "stretch"`. */
+    get asStretch() {
+        return this.add("alignSelf", "stretch");
+    }
+    /** Sets `alignSelf: value`. */
+    as(value) {
+        return this.add("alignSelf", value);
+    }
+    /** Sets `alignItems: "flex-start"`. */
+    get aifs() {
+        return this.add("alignItems", "flex-start");
+    }
+    /** Sets `alignItems: "flex-end"`. */
+    get aife() {
+        return this.add("alignItems", "flex-end");
+    }
+    /** Sets `alignItems: "center"`. */
+    get aic() {
+        return this.add("alignItems", "center");
+    }
+    /** Sets `alignItems: "baseline"`. */
+    get aib() {
+        return this.add("alignItems", "baseline");
+    }
+    /** Sets `alignItems: "stretch"`. */
+    get ais() {
+        return this.add("alignItems", "stretch");
+    }
+    /** Sets `alignItems: value`. */
+    ai(value) {
+        return this.add("alignItems", value);
+    }
+    /** Sets `flexBasis: "100%"`. */
+    get fb1() {
+        return this.add("flexBasis", "100%");
+    }
+    /** Sets `flexBasis: "50%"`. */
+    get fb2() {
+        return this.add("flexBasis", "50%");
+    }
+    /** Sets `flexBasis: "33.333333%"`. */
+    get fb3() {
+        return this.add("flexBasis", "33.333333%");
+    }
+    /** Sets `flexBasis: "25%"`. */
+    get fb4() {
+        return this.add("flexBasis", "25%");
+    }
+    /** Sets `flexBasis: "20%"`. */
+    get fb5() {
+        return this.add("flexBasis", "20%");
+    }
+    /** Sets `flexBasis: "16.666666%"`. */
+    get fb6() {
+        return this.add("flexBasis", "16.666666%");
+    }
+    /** Sets `flexBasis: "14.285714%"`. */
+    get fb7() {
+        return this.add("flexBasis", "14.285714%");
+    }
+    /** Sets `flexBasis: "12.5%"`. */
+    get fb0() {
+        return this.add("flexBasis", "12.5%");
+    }
+    /** Sets `flexBasis: value`. */
+    fb(value) {
+        return this.add("flexBasis", value);
+    }
+    /** Sets `flex: "auto"`. */
+    get flexAuto() {
+        return this.add("flex", "auto");
+    }
+    /** Sets `flex: "none"`. */
+    get flexNone() {
+        return this.add("flex", "none");
+    }
+    /** Sets `flex: value`. */
+    flex(value) {
+        return this.add("flex", value);
+    }
+    /** Sets `flexGrow: 0`. */
+    get fg0() {
+        return this.add("flexGrow", 0);
+    }
+    /** Sets `flexGrow: 1`. */
+    get fg1() {
+        return this.add("flexGrow", 1);
+    }
+    /** Sets `flexGrow: value`. */
+    flexGrow(value) {
+        return this.add("flexGrow", value);
+    }
+    /** Sets `flexShrink: 0`. */
+    get fs0() {
+        return this.add("flexShrink", 0);
+    }
+    /** Sets `flexShrink: 1`. */
+    get fs1() {
+        return this.add("flexShrink", 1);
+    }
+    /** Sets `flexShrink: value`. */
+    flexShrink(value) {
+        return this.add("flexShrink", value);
+    }
+    /** Sets `flexDirection: "row"`. */
+    get fdr() {
+        return this.add("flexDirection", "row");
+    }
+    /** Sets `flexDirection: "row-reverse"`. */
+    get fdrr() {
+        return this.add("flexDirection", "row-reverse");
+    }
+    /** Sets `flexDirection: "column"`. */
+    get fdc() {
+        return this.add("flexDirection", "column");
+    }
+    /** Sets `flexDirection: "column-reverse"`. */
+    get fdcr() {
+        return this.add("flexDirection", "column-reverse");
+    }
+    /** Sets `flexDirection: value`. */
+    fd(value) {
+        return this.add("flexDirection", value);
+    }
+    // float
+    /** Sets `float: "left"`. */
+    get fl() {
+        return this.add("float", "left");
+    }
+    /** Sets `float: "right"`. */
+    get fr() {
+        return this.add("float", "right");
+    }
+    /** Sets `float: value`. */
+    float(value) {
+        return this.add("float", value);
+    }
+    // fontWeight
+    /** Sets `fontWeight: "normal"`. */
+    get normal() {
+        return this.add("fontWeight", "normal");
+    }
+    /** Sets `fontWeight: "bold"`. */
+    get b() {
+        return this.add("fontWeight", "bold");
+    }
+    /** Sets `fontWeight: 100`. */
+    get fw1() {
+        return this.add("fontWeight", 100);
+    }
+    /** Sets `fontWeight: 200`. */
+    get fw2() {
+        return this.add("fontWeight", 200);
+    }
+    /** Sets `fontWeight: 300`. */
+    get fw3() {
+        return this.add("fontWeight", 300);
+    }
+    /** Sets `fontWeight: 400`. */
+    get fw4() {
+        return this.add("fontWeight", 400);
+    }
+    /** Sets `fontWeight: 500`. */
+    get fw5() {
+        return this.add("fontWeight", 500);
+    }
+    /** Sets `fontWeight: 600`. */
+    get fw6() {
+        return this.add("fontWeight", 600);
+    }
+    /** Sets `fontWeight: 700`. */
+    get fw7() {
+        return this.add("fontWeight", 700);
+    }
+    /** Sets `fontWeight: 800`. */
+    get fw8() {
+        return this.add("fontWeight", 800);
+    }
+    /** Sets `fontWeight: 900`. */
+    get fw9() {
+        return this.add("fontWeight", 900);
+    }
+    /** Sets `fontWeight: value`. */
+    fw(value) {
+        return this.add("fontWeight", value);
+    }
+    // grid
+    /** Sets `gridTemplateColumns: value`. */
+    gtc(value) {
+        return this.add("gridTemplateColumns", value);
+    }
+    /** Sets `gridTemplateRows: value`. */
+    gtr(value) {
+        return this.add("gridTemplateRows", value);
+    }
+    /** Sets `gridRow: value`. */
+    gr(value) {
+        return this.add("gridRow", value);
+    }
+    /** Sets `gridColumn: value`. */
+    gc(value) {
+        return this.add("gridColumn", value);
+    }
+    /** Sets `gap: "0px"`. */
+    get gap0() {
+        return this.gap(0);
+    }
+    /** Sets `gap: "8px"`. */
+    get gap1() {
+        return this.gap(1);
+    }
+    /** Sets `gap: "16px"`. */
+    get gap2() {
+        return this.gap(2);
+    }
+    /** Sets `gap: "24px"`. */
+    get gap3() {
+        return this.gap(3);
+    }
+    /** Sets `gap: "32px"`. */
+    get gap4() {
+        return this.gap(4);
+    }
+    /** Sets `gap: "40px"`. */
+    get gap5() {
+        return this.gap(5);
+    }
+    /** Sets `gap: "48px"`. */
+    get gap6() {
+        return this.gap(6);
+    }
+    /** Sets `gap: "56px"`. */
+    get gap7() {
+        return this.gap(7);
+    }
+    /** Sets `gap: "64px"`. */
+    get gap8() {
+        return this.gap(8);
+    }
+    /** Sets `gap: inc`. */
+    gap(inc) {
+        return this.add("gap", maybeInc(inc));
+    }
+    /** Sets `gap: px`. */
+    gapPx(px) {
+        return this.gap(`${px}px`);
+    }
+    /** Sets `rowGap: "0px"`. */
+    get rg0() {
+        return this.rg(0);
+    }
+    /** Sets `rowGap: "8px"`. */
+    get rg1() {
+        return this.rg(1);
+    }
+    /** Sets `rowGap: "16px"`. */
+    get rg2() {
+        return this.rg(2);
+    }
+    /** Sets `rowGap: "24px"`. */
+    get rg3() {
+        return this.rg(3);
+    }
+    /** Sets `rowGap: "32px"`. */
+    get rg4() {
+        return this.rg(4);
+    }
+    /** Sets `rowGap: "40px"`. */
+    get rg5() {
+        return this.rg(5);
+    }
+    /** Sets `rowGap: "48px"`. */
+    get rg6() {
+        return this.rg(6);
+    }
+    /** Sets `rowGap: "56px"`. */
+    get rg7() {
+        return this.rg(7);
+    }
+    /** Sets `rowGap: "64px"`. */
+    get rg8() {
+        return this.rg(8);
+    }
+    /** Sets `rowGap: inc`. */
+    rg(inc) {
+        return this.add("rowGap", maybeInc(inc));
+    }
+    /** Sets `rowGap: px`. */
+    rgPx(px) {
+        return this.rg(`${px}px`);
+    }
+    /** Sets `columnGap: "0px"`. */
+    get cg0() {
+        return this.cg(0);
+    }
+    /** Sets `columnGap: "8px"`. */
+    get cg1() {
+        return this.cg(1);
+    }
+    /** Sets `columnGap: "16px"`. */
+    get cg2() {
+        return this.cg(2);
+    }
+    /** Sets `columnGap: "24px"`. */
+    get cg3() {
+        return this.cg(3);
+    }
+    /** Sets `columnGap: "32px"`. */
+    get cg4() {
+        return this.cg(4);
+    }
+    /** Sets `columnGap: "40px"`. */
+    get cg5() {
+        return this.cg(5);
+    }
+    /** Sets `columnGap: "48px"`. */
+    get cg6() {
+        return this.cg(6);
+    }
+    /** Sets `columnGap: "56px"`. */
+    get cg7() {
+        return this.cg(7);
+    }
+    /** Sets `columnGap: "64px"`. */
+    get cg8() {
+        return this.cg(8);
+    }
+    /** Sets `columnGap: inc`. */
+    cg(inc) {
+        return this.add("columnGap", maybeInc(inc));
+    }
+    /** Sets `columnGap: px`. */
+    cgPx(px) {
+        return this.cg(`${px}px`);
+    }
+    // height
+    /** Sets `height: "0px"`. */
+    get h0() {
+        return this.h(0);
+    }
+    /** Sets `height: "8px"`. */
+    get h1() {
+        return this.h(1);
+    }
+    /** Sets `height: "16px"`. */
+    get h2() {
+        return this.h(2);
+    }
+    /** Sets `height: "24px"`. */
+    get h3() {
+        return this.h(3);
+    }
+    /** Sets `height: "32px"`. */
+    get h4() {
+        return this.h(4);
+    }
+    /** Sets `height: "40px"`. */
+    get h5() {
+        return this.h(5);
+    }
+    /** Sets `height: "48px"`. */
+    get h6() {
+        return this.h(6);
+    }
+    /** Sets `height: "56px"`. */
+    get h7() {
+        return this.h(7);
+    }
+    /** Sets `height: "64px"`. */
+    get h8() {
+        return this.h(8);
+    }
+    /** Sets `height: inc`. */
+    h(inc) {
+        return this.add("height", maybeInc(inc));
+    }
+    /** Sets `height: px`. */
+    hPx(px) {
+        return this.h(`${px}px`);
+    }
+    /** Sets `height: "25%"`. */
+    get h25() {
+        return this.add("height", "25%");
+    }
+    /** Sets `height: "50%"`. */
+    get h50() {
+        return this.add("height", "50%");
+    }
+    /** Sets `height: "75%"`. */
+    get h75() {
+        return this.add("height", "75%");
+    }
+    /** Sets `height: "100%"`. */
+    get h100() {
+        return this.add("height", "100%");
+    }
+    /** Sets `height: "25vh"`. */
+    get vh25() {
+        return this.add("height", "25vh");
+    }
+    /** Sets `height: "50vh"`. */
+    get vh50() {
+        return this.add("height", "50vh");
+    }
+    /** Sets `height: "75vh"`. */
+    get vh75() {
+        return this.add("height", "75vh");
+    }
+    /** Sets `height: "100vh"`. */
+    get vh100() {
+        return this.add("height", "100vh");
+    }
+    /** Sets `minHeight: 0`. */
+    get mh0() {
+        return this.add("minHeight", 0);
+    }
+    /** Sets `minHeight: "25%"`. */
+    get mh25() {
+        return this.add("minHeight", "25%");
+    }
+    /** Sets `minHeight: "50%"`. */
+    get mh50() {
+        return this.add("minHeight", "50%");
+    }
+    /** Sets `minHeight: "75%"`. */
+    get mh75() {
+        return this.add("minHeight", "75%");
+    }
+    /** Sets `minHeight: "100%"`. */
+    get mh100() {
+        return this.add("minHeight", "100%");
+    }
+    /** Sets `minHeight: "100vh"`. */
+    get mvh100() {
+        return this.add("minHeight", "100vh");
+    }
+    /** Sets `minHeight: value`. */
+    mh(value) {
+        return this.add("minHeight", value);
+    }
+    /** Sets `minHeight: px`. */
+    mhPx(px) {
+        return this.mh(`${px}px`);
+    }
+    /** Sets `maxHeight: "0"`. */
+    get maxh0() {
+        return this.add("maxHeight", "0");
+    }
+    /** Sets `maxHeight: "25%"`. */
+    get maxh25() {
+        return this.add("maxHeight", "25%");
+    }
+    /** Sets `maxHeight: "50%"`. */
+    get maxh50() {
+        return this.add("maxHeight", "50%");
+    }
+    /** Sets `maxHeight: "75%"`. */
+    get maxh75() {
+        return this.add("maxHeight", "75%");
+    }
+    /** Sets `maxHeight: "100%"`. */
+    get maxh100() {
+        return this.add("maxHeight", "100%");
+    }
+    /** Sets `maxHeight: value`. */
+    maxh(value) {
+        return this.add("maxHeight", value);
+    }
+    /** Sets `maxHeight: px`. */
+    maxhPx(px) {
+        return this.maxh(`${px}px`);
+    }
+    /** Sets `height: px; width: px`. */
+    sqPx(px) {
+        return this.add("height", `${px}px`).add("width", `${px}px`);
+    }
+    // lineClamp
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 1; textOverflow: "ellipsis"`. */
+    get lineClamp1() {
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 1).add("textOverflow", "ellipsis");
+    }
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 2; textOverflow: "ellipsis"`. */
+    get lineClamp2() {
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 2).add("textOverflow", "ellipsis");
+    }
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 3; textOverflow: "ellipsis"`. */
+    get lineClamp3() {
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 3).add("textOverflow", "ellipsis");
+    }
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 4; textOverflow: "ellipsis"`. */
+    get lineClamp4() {
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 4).add("textOverflow", "ellipsis");
+    }
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 5; textOverflow: "ellipsis"`. */
+    get lineClamp5() {
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 5).add("textOverflow", "ellipsis");
+    }
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 6; textOverflow: "ellipsis"`. */
+    get lineClamp6() {
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 6).add("textOverflow", "ellipsis");
+    }
+    /** Sets `WebkitLineClamp: "unset"`. */
+    get lineClampNone() {
+        return this.add("WebkitLineClamp", "unset");
+    }
+    // objectFit
+    /** Sets `objectFit: "contain"`. */
+    get objectContain() {
+        return this.add("objectFit", "contain");
+    }
+    /** Sets `objectFit: "cover"`. */
+    get objectCover() {
+        return this.add("objectFit", "cover");
+    }
+    /** Sets `objectFit: "fill"`. */
+    get objectFill() {
+        return this.add("objectFit", "fill");
+    }
+    /** Sets `objectFit: "none"`. */
+    get objectNone() {
+        return this.add("objectFit", "none");
+    }
+    /** Sets `objectFit: "scale-down"`. */
+    get objectScaleDown() {
+        return this.add("objectFit", "scale-down");
+    }
+    /** Sets `objectFit: value`. */
+    objectFit(value) {
+        return this.add("objectFit", value);
+    }
+    // outline
+    /** Sets `outline: "1px solid"`. */
+    get outline1() {
+        return this.add("outline", "1px solid");
+    }
+    /** Sets `outline: "1px solid transparent"`. */
+    get outlineTransparent() {
+        return this.add("outline", "1px solid transparent");
+    }
+    /** Sets `outline: "0"`. */
+    get outline0() {
+        return this.add("outline", "0");
+    }
+    /** Sets `outline: value`. */
+    outline(value) {
+        return this.add("outline", value);
+    }
+    // overflow
+    /** Sets `overflow: "visible"`. */
+    get overflowVisible() {
+        return this.add("overflow", "visible");
+    }
+    /** Sets `overflow: "hidden"`. */
+    get overflowHidden() {
+        return this.add("overflow", "hidden");
+    }
+    /** Sets `overflow: "scroll"`. */
+    get overflowScroll() {
+        return this.add("overflow", "scroll");
+    }
+    /** Sets `overflow: "auto"`. */
+    get overflowAuto() {
+        return this.add("overflow", "auto");
+    }
+    /** Sets `overflow: value`. */
+    overflow(value) {
+        return this.add("overflow", value);
+    }
+    /** Sets `overflowY: "visible"`. */
+    get overflowYVisible() {
+        return this.add("overflowY", "visible");
+    }
+    /** Sets `overflowY: "hidden"`. */
+    get overflowYHidden() {
+        return this.add("overflowY", "hidden");
+    }
+    /** Sets `overflowY: "scroll"`. */
+    get overflowYScroll() {
+        return this.add("overflowY", "scroll");
+    }
+    /** Sets `overflowY: "auto"`. */
+    get overflowYAuto() {
+        return this.add("overflowY", "auto");
+    }
+    /** Sets `overflowY: value`. */
+    overflowY(value) {
+        return this.add("overflowY", value);
+    }
+    /** Sets `overflowX: "visible"`. */
+    get overflowXVisible() {
+        return this.add("overflowX", "visible");
+    }
+    /** Sets `overflowX: "hidden"`. */
+    get overflowXHidden() {
+        return this.add("overflowX", "hidden");
+    }
+    /** Sets `overflowX: "scroll"`. */
+    get overflowXScroll() {
+        return this.add("overflowX", "scroll");
+    }
+    /** Sets `overflowX: "auto"`. */
+    get overflowXAuto() {
+        return this.add("overflowX", "auto");
+    }
+    /** Sets `overflowX: value`. */
+    overflowX(value) {
+        return this.add("overflowX", value);
+    }
+    // position
+    /** Sets `position: "absolute"`. */
+    get absolute() {
+        return this.add("position", "absolute");
+    }
+    /** Sets `position: "fixed"`. */
+    get fixed() {
+        return this.add("position", "fixed");
+    }
+    /** Sets `position: "static"`. */
+    get static() {
+        return this.add("position", "static");
+    }
+    /** Sets `position: "relative"`. */
+    get relative() {
+        return this.add("position", "relative");
+    }
+    /** Sets `position: "sticky"`. */
+    get sticky() {
+        return this.add("position", "sticky");
+    }
+    /** Sets `position: value`. */
+    position(value) {
+        return this.add("position", value);
+    }
+    // skins
+    /** Sets `color: "rgba(254,254,254,1)"`. */
+    get white() {
+        return this.add("color", "rgba(254,254,254,1)");
+    }
+    /** Sets `color: "rgba(0,0,0,0)"`. */
+    get transparent() {
+        return this.add("color", "rgba(0,0,0,0)");
+    }
+    /** Sets `color: "rgba(255,253,253,1)"`. */
+    get gray50() {
+        return this.add("color", "rgba(255,253,253,1)");
+    }
+    /** Sets `color: "rgba(247,245,245,1)"`. */
+    get gray100() {
+        return this.add("color", "rgba(247,245,245,1)");
+    }
+    /** Sets `color: "rgba(236,235,235,1)"`. */
+    get gray200() {
+        return this.add("color", "rgba(236,235,235,1)");
+    }
+    /** Sets `color: "rgba(221,220,220,1)"`. */
+    get gray300() {
+        return this.add("color", "rgba(221,220,220,1)");
+    }
+    /** Sets `color: "rgba(201,201,201,1)"`. */
+    get gray400() {
+        return this.add("color", "rgba(201,201,201,1)");
+    }
+    /** Sets `color: "rgba(175,175,175,1)"`. */
+    get gray500() {
+        return this.add("color", "rgba(175,175,175,1)");
+    }
+    /** Sets `color: "rgba(141,141,141,1)"`. */
+    get gray600() {
+        return this.add("color", "rgba(141,141,141,1)");
+    }
+    /** Sets `color: "rgba(100,100,100,1)"`. */
+    get gray700() {
+        return this.add("color", "rgba(100,100,100,1)");
+    }
+    /** Sets `color: "rgba(53,53,53,1)"`. */
+    get gray800() {
+        return this.add("color", "rgba(53,53,53,1)");
+    }
+    /** Sets `color: "rgba(36,36,36,1)"`. */
+    get gray900() {
+        return this.add("color", "rgba(36,36,36,1)");
+    }
+    /** Sets `color: "rgba(240,249,255,1)"`. */
+    get lightBlue50() {
+        return this.add("color", "rgba(240,249,255,1)");
+    }
+    /** Sets `color: "rgba(224,242,254,1)"`. */
+    get lightBlue100() {
+        return this.add("color", "rgba(224,242,254,1)");
+    }
+    /** Sets `color: "rgba(186,230,253,1)"`. */
+    get lightBlue200() {
+        return this.add("color", "rgba(186,230,253,1)");
+    }
+    /** Sets `color: "rgba(125,211,252,1)"`. */
+    get lightBlue300() {
+        return this.add("color", "rgba(125,211,252,1)");
+    }
+    /** Sets `color: "rgba(56,189,248,1)"`. */
+    get lightBlue400() {
+        return this.add("color", "rgba(56,189,248,1)");
+    }
+    /** Sets `color: "rgba(14,165,233,1)"`. */
+    get lightBlue500() {
+        return this.add("color", "rgba(14,165,233,1)");
+    }
+    /** Sets `color: "rgba(2,143,199,1)"`. */
+    get lightBlue600() {
+        return this.add("color", "rgba(2,143,199,1)");
+    }
+    /** Sets `color: "rgba(3,105,161,1)"`. */
+    get lightBlue700() {
+        return this.add("color", "rgba(3,105,161,1)");
+    }
+    /** Sets `color: "rgba(7,89,133,1)"`. */
+    get lightBlue800() {
+        return this.add("color", "rgba(7,89,133,1)");
+    }
+    /** Sets `color: "rgba(12,74,110,1)"`. */
+    get lightBlue900() {
+        return this.add("color", "rgba(12,74,110,1)");
+    }
+    /** Sets `color: "rgba(255,242,242,1)"`. */
+    get red50() {
+        return this.add("color", "rgba(255,242,242,1)");
+    }
+    /** Sets `color: "rgba(253,210,209,1)"`. */
+    get red100() {
+        return this.add("color", "rgba(253,210,209,1)");
+    }
+    /** Sets `color: "rgba(249,181,177,1)"`. */
+    get red200() {
+        return this.add("color", "rgba(249,181,177,1)");
+    }
+    /** Sets `color: "rgba(242,155,148,1)"`. */
+    get red300() {
+        return this.add("color", "rgba(242,155,148,1)");
+    }
+    /** Sets `color: "rgba(232,133,122,1)"`. */
+    get red400() {
+        return this.add("color", "rgba(232,133,122,1)");
+    }
+    /** Sets `color: "rgba(218,114,100,1)"`. */
+    get red500() {
+        return this.add("color", "rgba(218,114,100,1)");
+    }
+    /** Sets `color: "rgba(200,98,81,1)"`. */
+    get red600() {
+        return this.add("color", "rgba(200,98,81,1)");
+    }
+    /** Sets `color: "rgba(176,83,73,1)"`. */
+    get red700() {
+        return this.add("color", "rgba(176,83,73,1)");
+    }
+    /** Sets `color: "rgba(149,68,64,1)"`. */
+    get red800() {
+        return this.add("color", "rgba(149,68,64,1)");
+    }
+    /** Sets `color: "rgba(120,54,54,1)"`. */
+    get red900() {
+        return this.add("color", "rgba(120,54,54,1)");
+    }
+    /** Sets `color: "rgba(255,254,242,1)"`. */
+    get yellow50() {
+        return this.add("color", "rgba(255,254,242,1)");
+    }
+    /** Sets `color: "rgba(255,254,212,1)"`. */
+    get yellow100() {
+        return this.add("color", "rgba(255,254,212,1)");
+    }
+    /** Sets `color: "rgba(255,250,180,1)"`. */
+    get yellow200() {
+        return this.add("color", "rgba(255,250,180,1)");
+    }
+    /** Sets `color: "rgba(255,240,150,1)"`. */
+    get yellow300() {
+        return this.add("color", "rgba(255,240,150,1)");
+    }
+    /** Sets `color: "rgba(255,225,123,1)"`. */
+    get yellow400() {
+        return this.add("color", "rgba(255,225,123,1)");
+    }
+    /** Sets `color: "rgba(255,204,99,1)"`. */
+    get yellow500() {
+        return this.add("color", "rgba(255,204,99,1)");
+    }
+    /** Sets `color: "rgba(246,177,78,1)"`. */
+    get yellow600() {
+        return this.add("color", "rgba(246,177,78,1)");
+    }
+    /** Sets `color: "rgba(207,150,73,1)"`. */
+    get yellow700() {
+        return this.add("color", "rgba(207,150,73,1)");
+    }
+    /** Sets `color: "rgba(164,120,66,1)"`. */
+    get yellow800() {
+        return this.add("color", "rgba(164,120,66,1)");
+    }
+    /** Sets `color: "rgba(120,89,54,1)"`. */
+    get yellow900() {
+        return this.add("color", "rgba(120,89,54,1)");
+    }
+    /** Sets `color: "rgba(250,255,250,1)"`. */
+    get green50() {
+        return this.add("color", "rgba(250,255,250,1)");
+    }
+    /** Sets `color: "rgba(223,248,216,1)"`. */
+    get green100() {
+        return this.add("color", "rgba(223,248,216,1)");
+    }
+    /** Sets `color: "rgba(199,239,183,1)"`. */
+    get green200() {
+        return this.add("color", "rgba(199,239,183,1)");
+    }
+    /** Sets `color: "rgba(179,226,153,1)"`. */
+    get green300() {
+        return this.add("color", "rgba(179,226,153,1)");
+    }
+    /** Sets `color: "rgba(163,208,126,1)"`. */
+    get green400() {
+        return this.add("color", "rgba(163,208,126,1)");
+    }
+    /** Sets `color: "rgba(146,185,101,1)"`. */
+    get green500() {
+        return this.add("color", "rgba(146,185,101,1)");
+    }
+    /** Sets `color: "rgba(126,156,79,1)"`. */
+    get green600() {
+        return this.add("color", "rgba(126,156,79,1)");
+    }
+    /** Sets `color: "rgba(101,120,57,1)"`. */
+    get green700() {
+        return this.add("color", "rgba(101,120,57,1)");
+    }
+    /** Sets `color: "rgba(64,93,44,1)"`. */
+    get green800() {
+        return this.add("color", "rgba(64,93,44,1)");
+    }
+    /** Sets `color: "rgba(34,64,31,1)"`. */
+    get green900() {
+        return this.add("color", "rgba(34,64,31,1)");
+    }
+    /** Sets `color: "rgba(245,243,255,1)"`. */
+    get violet50() {
+        return this.add("color", "rgba(245,243,255,1)");
+    }
+    /** Sets `color: "rgba(238,234,253,1)"`. */
+    get violet100() {
+        return this.add("color", "rgba(238,234,253,1)");
+    }
+    /** Sets `color: "rgba(232,225,252,1)"`. */
+    get violet200() {
+        return this.add("color", "rgba(232,225,252,1)");
+    }
+    /** Sets `color: "rgba(218,205,246,1)"`. */
+    get violet300() {
+        return this.add("color", "rgba(218,205,246,1)");
+    }
+    /** Sets `color: "rgba(204,186,236,1)"`. */
+    get violet400() {
+        return this.add("color", "rgba(204,186,236,1)");
+    }
+    /** Sets `color: "rgba(190,167,223,1)"`. */
+    get violet500() {
+        return this.add("color", "rgba(190,167,223,1)");
+    }
+    /** Sets `color: "rgba(173,147,205,1)"`. */
+    get violet600() {
+        return this.add("color", "rgba(173,147,205,1)");
+    }
+    /** Sets `color: "rgba(153,126,181,1)"`. */
+    get violet700() {
+        return this.add("color", "rgba(153,126,181,1)");
+    }
+    /** Sets `color: "rgba(128,103,151,1)"`. */
+    get violet800() {
+        return this.add("color", "rgba(128,103,151,1)");
+    }
+    /** Sets `color: "rgba(100,78,116,1)"`. */
+    get violet900() {
+        return this.add("color", "rgba(100,78,116,1)");
+    }
+    /** Sets `color: value`. */
+    color(value) {
+        return this.add("color", value);
+    }
+    /** Sets `backgroundColor: "rgba(254,254,254,1)"`. */
+    get bgWhite() {
+        return this.add("backgroundColor", "rgba(254,254,254,1)");
+    }
+    /** Sets `backgroundColor: "rgba(0,0,0,0)"`. */
+    get bgTransparent() {
+        return this.add("backgroundColor", "rgba(0,0,0,0)");
+    }
+    /** Sets `backgroundColor: "rgba(255,253,253,1)"`. */
+    get bgGray50() {
+        return this.add("backgroundColor", "rgba(255,253,253,1)");
+    }
+    /** Sets `backgroundColor: "rgba(247,245,245,1)"`. */
+    get bgGray100() {
+        return this.add("backgroundColor", "rgba(247,245,245,1)");
+    }
+    /** Sets `backgroundColor: "rgba(236,235,235,1)"`. */
+    get bgGray200() {
+        return this.add("backgroundColor", "rgba(236,235,235,1)");
+    }
+    /** Sets `backgroundColor: "rgba(221,220,220,1)"`. */
+    get bgGray300() {
+        return this.add("backgroundColor", "rgba(221,220,220,1)");
+    }
+    /** Sets `backgroundColor: "rgba(201,201,201,1)"`. */
+    get bgGray400() {
+        return this.add("backgroundColor", "rgba(201,201,201,1)");
+    }
+    /** Sets `backgroundColor: "rgba(175,175,175,1)"`. */
+    get bgGray500() {
+        return this.add("backgroundColor", "rgba(175,175,175,1)");
+    }
+    /** Sets `backgroundColor: "rgba(141,141,141,1)"`. */
+    get bgGray600() {
+        return this.add("backgroundColor", "rgba(141,141,141,1)");
+    }
+    /** Sets `backgroundColor: "rgba(100,100,100,1)"`. */
+    get bgGray700() {
+        return this.add("backgroundColor", "rgba(100,100,100,1)");
+    }
+    /** Sets `backgroundColor: "rgba(53,53,53,1)"`. */
+    get bgGray800() {
+        return this.add("backgroundColor", "rgba(53,53,53,1)");
+    }
+    /** Sets `backgroundColor: "rgba(36,36,36,1)"`. */
+    get bgGray900() {
+        return this.add("backgroundColor", "rgba(36,36,36,1)");
+    }
+    /** Sets `backgroundColor: "rgba(240,249,255,1)"`. */
+    get bgLightBlue50() {
+        return this.add("backgroundColor", "rgba(240,249,255,1)");
+    }
+    /** Sets `backgroundColor: "rgba(224,242,254,1)"`. */
+    get bgLightBlue100() {
+        return this.add("backgroundColor", "rgba(224,242,254,1)");
+    }
+    /** Sets `backgroundColor: "rgba(186,230,253,1)"`. */
+    get bgLightBlue200() {
+        return this.add("backgroundColor", "rgba(186,230,253,1)");
+    }
+    /** Sets `backgroundColor: "rgba(125,211,252,1)"`. */
+    get bgLightBlue300() {
+        return this.add("backgroundColor", "rgba(125,211,252,1)");
+    }
+    /** Sets `backgroundColor: "rgba(56,189,248,1)"`. */
+    get bgLightBlue400() {
+        return this.add("backgroundColor", "rgba(56,189,248,1)");
+    }
+    /** Sets `backgroundColor: "rgba(14,165,233,1)"`. */
+    get bgLightBlue500() {
+        return this.add("backgroundColor", "rgba(14,165,233,1)");
+    }
+    /** Sets `backgroundColor: "rgba(2,143,199,1)"`. */
+    get bgLightBlue600() {
+        return this.add("backgroundColor", "rgba(2,143,199,1)");
+    }
+    /** Sets `backgroundColor: "rgba(3,105,161,1)"`. */
+    get bgLightBlue700() {
+        return this.add("backgroundColor", "rgba(3,105,161,1)");
+    }
+    /** Sets `backgroundColor: "rgba(7,89,133,1)"`. */
+    get bgLightBlue800() {
+        return this.add("backgroundColor", "rgba(7,89,133,1)");
+    }
+    /** Sets `backgroundColor: "rgba(12,74,110,1)"`. */
+    get bgLightBlue900() {
+        return this.add("backgroundColor", "rgba(12,74,110,1)");
+    }
+    /** Sets `backgroundColor: "rgba(255,242,242,1)"`. */
+    get bgRed50() {
+        return this.add("backgroundColor", "rgba(255,242,242,1)");
+    }
+    /** Sets `backgroundColor: "rgba(253,210,209,1)"`. */
+    get bgRed100() {
+        return this.add("backgroundColor", "rgba(253,210,209,1)");
+    }
+    /** Sets `backgroundColor: "rgba(249,181,177,1)"`. */
+    get bgRed200() {
+        return this.add("backgroundColor", "rgba(249,181,177,1)");
+    }
+    /** Sets `backgroundColor: "rgba(242,155,148,1)"`. */
+    get bgRed300() {
+        return this.add("backgroundColor", "rgba(242,155,148,1)");
+    }
+    /** Sets `backgroundColor: "rgba(232,133,122,1)"`. */
+    get bgRed400() {
+        return this.add("backgroundColor", "rgba(232,133,122,1)");
+    }
+    /** Sets `backgroundColor: "rgba(218,114,100,1)"`. */
+    get bgRed500() {
+        return this.add("backgroundColor", "rgba(218,114,100,1)");
+    }
+    /** Sets `backgroundColor: "rgba(200,98,81,1)"`. */
+    get bgRed600() {
+        return this.add("backgroundColor", "rgba(200,98,81,1)");
+    }
+    /** Sets `backgroundColor: "rgba(176,83,73,1)"`. */
+    get bgRed700() {
+        return this.add("backgroundColor", "rgba(176,83,73,1)");
+    }
+    /** Sets `backgroundColor: "rgba(149,68,64,1)"`. */
+    get bgRed800() {
+        return this.add("backgroundColor", "rgba(149,68,64,1)");
+    }
+    /** Sets `backgroundColor: "rgba(120,54,54,1)"`. */
+    get bgRed900() {
+        return this.add("backgroundColor", "rgba(120,54,54,1)");
+    }
+    /** Sets `backgroundColor: "rgba(255,254,242,1)"`. */
+    get bgYellow50() {
+        return this.add("backgroundColor", "rgba(255,254,242,1)");
+    }
+    /** Sets `backgroundColor: "rgba(255,254,212,1)"`. */
+    get bgYellow100() {
+        return this.add("backgroundColor", "rgba(255,254,212,1)");
+    }
+    /** Sets `backgroundColor: "rgba(255,250,180,1)"`. */
+    get bgYellow200() {
+        return this.add("backgroundColor", "rgba(255,250,180,1)");
+    }
+    /** Sets `backgroundColor: "rgba(255,240,150,1)"`. */
+    get bgYellow300() {
+        return this.add("backgroundColor", "rgba(255,240,150,1)");
+    }
+    /** Sets `backgroundColor: "rgba(255,225,123,1)"`. */
+    get bgYellow400() {
+        return this.add("backgroundColor", "rgba(255,225,123,1)");
+    }
+    /** Sets `backgroundColor: "rgba(255,204,99,1)"`. */
+    get bgYellow500() {
+        return this.add("backgroundColor", "rgba(255,204,99,1)");
+    }
+    /** Sets `backgroundColor: "rgba(246,177,78,1)"`. */
+    get bgYellow600() {
+        return this.add("backgroundColor", "rgba(246,177,78,1)");
+    }
+    /** Sets `backgroundColor: "rgba(207,150,73,1)"`. */
+    get bgYellow700() {
+        return this.add("backgroundColor", "rgba(207,150,73,1)");
+    }
+    /** Sets `backgroundColor: "rgba(164,120,66,1)"`. */
+    get bgYellow800() {
+        return this.add("backgroundColor", "rgba(164,120,66,1)");
+    }
+    /** Sets `backgroundColor: "rgba(120,89,54,1)"`. */
+    get bgYellow900() {
+        return this.add("backgroundColor", "rgba(120,89,54,1)");
+    }
+    /** Sets `backgroundColor: "rgba(250,255,250,1)"`. */
+    get bgGreen50() {
+        return this.add("backgroundColor", "rgba(250,255,250,1)");
+    }
+    /** Sets `backgroundColor: "rgba(223,248,216,1)"`. */
+    get bgGreen100() {
+        return this.add("backgroundColor", "rgba(223,248,216,1)");
+    }
+    /** Sets `backgroundColor: "rgba(199,239,183,1)"`. */
+    get bgGreen200() {
+        return this.add("backgroundColor", "rgba(199,239,183,1)");
+    }
+    /** Sets `backgroundColor: "rgba(179,226,153,1)"`. */
+    get bgGreen300() {
+        return this.add("backgroundColor", "rgba(179,226,153,1)");
+    }
+    /** Sets `backgroundColor: "rgba(163,208,126,1)"`. */
+    get bgGreen400() {
+        return this.add("backgroundColor", "rgba(163,208,126,1)");
+    }
+    /** Sets `backgroundColor: "rgba(146,185,101,1)"`. */
+    get bgGreen500() {
+        return this.add("backgroundColor", "rgba(146,185,101,1)");
+    }
+    /** Sets `backgroundColor: "rgba(126,156,79,1)"`. */
+    get bgGreen600() {
+        return this.add("backgroundColor", "rgba(126,156,79,1)");
+    }
+    /** Sets `backgroundColor: "rgba(101,120,57,1)"`. */
+    get bgGreen700() {
+        return this.add("backgroundColor", "rgba(101,120,57,1)");
+    }
+    /** Sets `backgroundColor: "rgba(64,93,44,1)"`. */
+    get bgGreen800() {
+        return this.add("backgroundColor", "rgba(64,93,44,1)");
+    }
+    /** Sets `backgroundColor: "rgba(34,64,31,1)"`. */
+    get bgGreen900() {
+        return this.add("backgroundColor", "rgba(34,64,31,1)");
+    }
+    /** Sets `backgroundColor: "rgba(245,243,255,1)"`. */
+    get bgViolet50() {
+        return this.add("backgroundColor", "rgba(245,243,255,1)");
+    }
+    /** Sets `backgroundColor: "rgba(238,234,253,1)"`. */
+    get bgViolet100() {
+        return this.add("backgroundColor", "rgba(238,234,253,1)");
+    }
+    /** Sets `backgroundColor: "rgba(232,225,252,1)"`. */
+    get bgViolet200() {
+        return this.add("backgroundColor", "rgba(232,225,252,1)");
+    }
+    /** Sets `backgroundColor: "rgba(218,205,246,1)"`. */
+    get bgViolet300() {
+        return this.add("backgroundColor", "rgba(218,205,246,1)");
+    }
+    /** Sets `backgroundColor: "rgba(204,186,236,1)"`. */
+    get bgViolet400() {
+        return this.add("backgroundColor", "rgba(204,186,236,1)");
+    }
+    /** Sets `backgroundColor: "rgba(190,167,223,1)"`. */
+    get bgViolet500() {
+        return this.add("backgroundColor", "rgba(190,167,223,1)");
+    }
+    /** Sets `backgroundColor: "rgba(173,147,205,1)"`. */
+    get bgViolet600() {
+        return this.add("backgroundColor", "rgba(173,147,205,1)");
+    }
+    /** Sets `backgroundColor: "rgba(153,126,181,1)"`. */
+    get bgViolet700() {
+        return this.add("backgroundColor", "rgba(153,126,181,1)");
+    }
+    /** Sets `backgroundColor: "rgba(128,103,151,1)"`. */
+    get bgViolet800() {
+        return this.add("backgroundColor", "rgba(128,103,151,1)");
+    }
+    /** Sets `backgroundColor: "rgba(100,78,116,1)"`. */
+    get bgViolet900() {
+        return this.add("backgroundColor", "rgba(100,78,116,1)");
+    }
+    /** Sets `backgroundColor: value`. */
+    bgColor(value) {
+        return this.add("backgroundColor", value);
+    }
+    /** Sets `fill: "rgba(254,254,254,1)"`. */
+    get fWhite() {
+        return this.add("fill", "rgba(254,254,254,1)");
+    }
+    /** Sets `fill: "rgba(0,0,0,0)"`. */
+    get fTransparent() {
+        return this.add("fill", "rgba(0,0,0,0)");
+    }
+    /** Sets `fill: "rgba(255,253,253,1)"`. */
+    get fGray50() {
+        return this.add("fill", "rgba(255,253,253,1)");
+    }
+    /** Sets `fill: "rgba(247,245,245,1)"`. */
+    get fGray100() {
+        return this.add("fill", "rgba(247,245,245,1)");
+    }
+    /** Sets `fill: "rgba(236,235,235,1)"`. */
+    get fGray200() {
+        return this.add("fill", "rgba(236,235,235,1)");
+    }
+    /** Sets `fill: "rgba(221,220,220,1)"`. */
+    get fGray300() {
+        return this.add("fill", "rgba(221,220,220,1)");
+    }
+    /** Sets `fill: "rgba(201,201,201,1)"`. */
+    get fGray400() {
+        return this.add("fill", "rgba(201,201,201,1)");
+    }
+    /** Sets `fill: "rgba(175,175,175,1)"`. */
+    get fGray500() {
+        return this.add("fill", "rgba(175,175,175,1)");
+    }
+    /** Sets `fill: "rgba(141,141,141,1)"`. */
+    get fGray600() {
+        return this.add("fill", "rgba(141,141,141,1)");
+    }
+    /** Sets `fill: "rgba(100,100,100,1)"`. */
+    get fGray700() {
+        return this.add("fill", "rgba(100,100,100,1)");
+    }
+    /** Sets `fill: "rgba(53,53,53,1)"`. */
+    get fGray800() {
+        return this.add("fill", "rgba(53,53,53,1)");
+    }
+    /** Sets `fill: "rgba(36,36,36,1)"`. */
+    get fGray900() {
+        return this.add("fill", "rgba(36,36,36,1)");
+    }
+    /** Sets `fill: "rgba(240,249,255,1)"`. */
+    get fLightBlue50() {
+        return this.add("fill", "rgba(240,249,255,1)");
+    }
+    /** Sets `fill: "rgba(224,242,254,1)"`. */
+    get fLightBlue100() {
+        return this.add("fill", "rgba(224,242,254,1)");
+    }
+    /** Sets `fill: "rgba(186,230,253,1)"`. */
+    get fLightBlue200() {
+        return this.add("fill", "rgba(186,230,253,1)");
+    }
+    /** Sets `fill: "rgba(125,211,252,1)"`. */
+    get fLightBlue300() {
+        return this.add("fill", "rgba(125,211,252,1)");
+    }
+    /** Sets `fill: "rgba(56,189,248,1)"`. */
+    get fLightBlue400() {
+        return this.add("fill", "rgba(56,189,248,1)");
+    }
+    /** Sets `fill: "rgba(14,165,233,1)"`. */
+    get fLightBlue500() {
+        return this.add("fill", "rgba(14,165,233,1)");
+    }
+    /** Sets `fill: "rgba(2,143,199,1)"`. */
+    get fLightBlue600() {
+        return this.add("fill", "rgba(2,143,199,1)");
+    }
+    /** Sets `fill: "rgba(3,105,161,1)"`. */
+    get fLightBlue700() {
+        return this.add("fill", "rgba(3,105,161,1)");
+    }
+    /** Sets `fill: "rgba(7,89,133,1)"`. */
+    get fLightBlue800() {
+        return this.add("fill", "rgba(7,89,133,1)");
+    }
+    /** Sets `fill: "rgba(12,74,110,1)"`. */
+    get fLightBlue900() {
+        return this.add("fill", "rgba(12,74,110,1)");
+    }
+    /** Sets `fill: "rgba(255,242,242,1)"`. */
+    get fRed50() {
+        return this.add("fill", "rgba(255,242,242,1)");
+    }
+    /** Sets `fill: "rgba(253,210,209,1)"`. */
+    get fRed100() {
+        return this.add("fill", "rgba(253,210,209,1)");
+    }
+    /** Sets `fill: "rgba(249,181,177,1)"`. */
+    get fRed200() {
+        return this.add("fill", "rgba(249,181,177,1)");
+    }
+    /** Sets `fill: "rgba(242,155,148,1)"`. */
+    get fRed300() {
+        return this.add("fill", "rgba(242,155,148,1)");
+    }
+    /** Sets `fill: "rgba(232,133,122,1)"`. */
+    get fRed400() {
+        return this.add("fill", "rgba(232,133,122,1)");
+    }
+    /** Sets `fill: "rgba(218,114,100,1)"`. */
+    get fRed500() {
+        return this.add("fill", "rgba(218,114,100,1)");
+    }
+    /** Sets `fill: "rgba(200,98,81,1)"`. */
+    get fRed600() {
+        return this.add("fill", "rgba(200,98,81,1)");
+    }
+    /** Sets `fill: "rgba(176,83,73,1)"`. */
+    get fRed700() {
+        return this.add("fill", "rgba(176,83,73,1)");
+    }
+    /** Sets `fill: "rgba(149,68,64,1)"`. */
+    get fRed800() {
+        return this.add("fill", "rgba(149,68,64,1)");
+    }
+    /** Sets `fill: "rgba(120,54,54,1)"`. */
+    get fRed900() {
+        return this.add("fill", "rgba(120,54,54,1)");
+    }
+    /** Sets `fill: "rgba(255,254,242,1)"`. */
+    get fYellow50() {
+        return this.add("fill", "rgba(255,254,242,1)");
+    }
+    /** Sets `fill: "rgba(255,254,212,1)"`. */
+    get fYellow100() {
+        return this.add("fill", "rgba(255,254,212,1)");
+    }
+    /** Sets `fill: "rgba(255,250,180,1)"`. */
+    get fYellow200() {
+        return this.add("fill", "rgba(255,250,180,1)");
+    }
+    /** Sets `fill: "rgba(255,240,150,1)"`. */
+    get fYellow300() {
+        return this.add("fill", "rgba(255,240,150,1)");
+    }
+    /** Sets `fill: "rgba(255,225,123,1)"`. */
+    get fYellow400() {
+        return this.add("fill", "rgba(255,225,123,1)");
+    }
+    /** Sets `fill: "rgba(255,204,99,1)"`. */
+    get fYellow500() {
+        return this.add("fill", "rgba(255,204,99,1)");
+    }
+    /** Sets `fill: "rgba(246,177,78,1)"`. */
+    get fYellow600() {
+        return this.add("fill", "rgba(246,177,78,1)");
+    }
+    /** Sets `fill: "rgba(207,150,73,1)"`. */
+    get fYellow700() {
+        return this.add("fill", "rgba(207,150,73,1)");
+    }
+    /** Sets `fill: "rgba(164,120,66,1)"`. */
+    get fYellow800() {
+        return this.add("fill", "rgba(164,120,66,1)");
+    }
+    /** Sets `fill: "rgba(120,89,54,1)"`. */
+    get fYellow900() {
+        return this.add("fill", "rgba(120,89,54,1)");
+    }
+    /** Sets `fill: "rgba(250,255,250,1)"`. */
+    get fGreen50() {
+        return this.add("fill", "rgba(250,255,250,1)");
+    }
+    /** Sets `fill: "rgba(223,248,216,1)"`. */
+    get fGreen100() {
+        return this.add("fill", "rgba(223,248,216,1)");
+    }
+    /** Sets `fill: "rgba(199,239,183,1)"`. */
+    get fGreen200() {
+        return this.add("fill", "rgba(199,239,183,1)");
+    }
+    /** Sets `fill: "rgba(179,226,153,1)"`. */
+    get fGreen300() {
+        return this.add("fill", "rgba(179,226,153,1)");
+    }
+    /** Sets `fill: "rgba(163,208,126,1)"`. */
+    get fGreen400() {
+        return this.add("fill", "rgba(163,208,126,1)");
+    }
+    /** Sets `fill: "rgba(146,185,101,1)"`. */
+    get fGreen500() {
+        return this.add("fill", "rgba(146,185,101,1)");
+    }
+    /** Sets `fill: "rgba(126,156,79,1)"`. */
+    get fGreen600() {
+        return this.add("fill", "rgba(126,156,79,1)");
+    }
+    /** Sets `fill: "rgba(101,120,57,1)"`. */
+    get fGreen700() {
+        return this.add("fill", "rgba(101,120,57,1)");
+    }
+    /** Sets `fill: "rgba(64,93,44,1)"`. */
+    get fGreen800() {
+        return this.add("fill", "rgba(64,93,44,1)");
+    }
+    /** Sets `fill: "rgba(34,64,31,1)"`. */
+    get fGreen900() {
+        return this.add("fill", "rgba(34,64,31,1)");
+    }
+    /** Sets `fill: "rgba(245,243,255,1)"`. */
+    get fViolet50() {
+        return this.add("fill", "rgba(245,243,255,1)");
+    }
+    /** Sets `fill: "rgba(238,234,253,1)"`. */
+    get fViolet100() {
+        return this.add("fill", "rgba(238,234,253,1)");
+    }
+    /** Sets `fill: "rgba(232,225,252,1)"`. */
+    get fViolet200() {
+        return this.add("fill", "rgba(232,225,252,1)");
+    }
+    /** Sets `fill: "rgba(218,205,246,1)"`. */
+    get fViolet300() {
+        return this.add("fill", "rgba(218,205,246,1)");
+    }
+    /** Sets `fill: "rgba(204,186,236,1)"`. */
+    get fViolet400() {
+        return this.add("fill", "rgba(204,186,236,1)");
+    }
+    /** Sets `fill: "rgba(190,167,223,1)"`. */
+    get fViolet500() {
+        return this.add("fill", "rgba(190,167,223,1)");
+    }
+    /** Sets `fill: "rgba(173,147,205,1)"`. */
+    get fViolet600() {
+        return this.add("fill", "rgba(173,147,205,1)");
+    }
+    /** Sets `fill: "rgba(153,126,181,1)"`. */
+    get fViolet700() {
+        return this.add("fill", "rgba(153,126,181,1)");
+    }
+    /** Sets `fill: "rgba(128,103,151,1)"`. */
+    get fViolet800() {
+        return this.add("fill", "rgba(128,103,151,1)");
+    }
+    /** Sets `fill: "rgba(100,78,116,1)"`. */
+    get fViolet900() {
+        return this.add("fill", "rgba(100,78,116,1)");
+    }
+    /** Sets `fill: value`. */
+    fill(value) {
+        return this.add("fill", value);
+    }
+    // spacing
+    /** Sets `marginTop: "0px"`. */
+    get mt0() {
+        return this.mt(0);
+    }
+    /** Sets `marginTop: "8px"`. */
+    get mt1() {
+        return this.mt(1);
+    }
+    /** Sets `marginTop: "16px"`. */
+    get mt2() {
+        return this.mt(2);
+    }
+    /** Sets `marginTop: "24px"`. */
+    get mt3() {
+        return this.mt(3);
+    }
+    /** Sets `marginTop: "32px"`. */
+    get mt4() {
+        return this.mt(4);
+    }
+    /** Sets `marginTop: "40px"`. */
+    get mt5() {
+        return this.mt(5);
+    }
+    /** Sets `marginTop: "48px"`. */
+    get mt6() {
+        return this.mt(6);
+    }
+    /** Sets `marginTop: "56px"`. */
+    get mt7() {
+        return this.mt(7);
+    }
+    /** Sets `marginTop: "64px"`. */
+    get mt8() {
+        return this.mt(8);
+    }
+    /** Sets `marginTop: inc`. */
+    mt(inc) {
+        return this.add("marginTop", maybeInc(inc));
+    }
+    /** Sets `marginTop: px`. */
+    mtPx(px) {
+        return this.mt(`${px}px`);
+    }
+    /** Sets `marginRight: "0px"`. */
+    get mr0() {
+        return this.mr(0);
+    }
+    /** Sets `marginRight: "8px"`. */
+    get mr1() {
+        return this.mr(1);
+    }
+    /** Sets `marginRight: "16px"`. */
+    get mr2() {
+        return this.mr(2);
+    }
+    /** Sets `marginRight: "24px"`. */
+    get mr3() {
+        return this.mr(3);
+    }
+    /** Sets `marginRight: "32px"`. */
+    get mr4() {
+        return this.mr(4);
+    }
+    /** Sets `marginRight: "40px"`. */
+    get mr5() {
+        return this.mr(5);
+    }
+    /** Sets `marginRight: "48px"`. */
+    get mr6() {
+        return this.mr(6);
+    }
+    /** Sets `marginRight: "56px"`. */
+    get mr7() {
+        return this.mr(7);
+    }
+    /** Sets `marginRight: "64px"`. */
+    get mr8() {
+        return this.mr(8);
+    }
+    /** Sets `marginRight: inc`. */
+    mr(inc) {
+        return this.add("marginRight", maybeInc(inc));
+    }
+    /** Sets `marginRight: px`. */
+    mrPx(px) {
+        return this.mr(`${px}px`);
+    }
+    /** Sets `marginBottom: "0px"`. */
+    get mb0() {
+        return this.mb(0);
+    }
+    /** Sets `marginBottom: "8px"`. */
+    get mb1() {
+        return this.mb(1);
+    }
+    /** Sets `marginBottom: "16px"`. */
+    get mb2() {
+        return this.mb(2);
+    }
+    /** Sets `marginBottom: "24px"`. */
+    get mb3() {
+        return this.mb(3);
+    }
+    /** Sets `marginBottom: "32px"`. */
+    get mb4() {
+        return this.mb(4);
+    }
+    /** Sets `marginBottom: "40px"`. */
+    get mb5() {
+        return this.mb(5);
+    }
+    /** Sets `marginBottom: "48px"`. */
+    get mb6() {
+        return this.mb(6);
+    }
+    /** Sets `marginBottom: "56px"`. */
+    get mb7() {
+        return this.mb(7);
+    }
+    /** Sets `marginBottom: "64px"`. */
+    get mb8() {
+        return this.mb(8);
+    }
+    /** Sets `marginBottom: inc`. */
+    mb(inc) {
+        return this.add("marginBottom", maybeInc(inc));
+    }
+    /** Sets `marginBottom: px`. */
+    mbPx(px) {
+        return this.mb(`${px}px`);
+    }
+    /** Sets `marginLeft: "0px"`. */
+    get ml0() {
+        return this.ml(0);
+    }
+    /** Sets `marginLeft: "8px"`. */
+    get ml1() {
+        return this.ml(1);
+    }
+    /** Sets `marginLeft: "16px"`. */
+    get ml2() {
+        return this.ml(2);
+    }
+    /** Sets `marginLeft: "24px"`. */
+    get ml3() {
+        return this.ml(3);
+    }
+    /** Sets `marginLeft: "32px"`. */
+    get ml4() {
+        return this.ml(4);
+    }
+    /** Sets `marginLeft: "40px"`. */
+    get ml5() {
+        return this.ml(5);
+    }
+    /** Sets `marginLeft: "48px"`. */
+    get ml6() {
+        return this.ml(6);
+    }
+    /** Sets `marginLeft: "56px"`. */
+    get ml7() {
+        return this.ml(7);
+    }
+    /** Sets `marginLeft: "64px"`. */
+    get ml8() {
+        return this.ml(8);
+    }
+    /** Sets `marginLeft: inc`. */
+    ml(inc) {
+        return this.add("marginLeft", maybeInc(inc));
+    }
+    /** Sets `marginLeft: px`. */
+    mlPx(px) {
+        return this.ml(`${px}px`);
+    }
+    /** Sets `ml: "0px"; mr: "0px"`. */
+    get mx0() {
+        return this.mx(0);
+    }
+    /** Sets `ml: "8px"; mr: "8px"`. */
+    get mx1() {
+        return this.mx(1);
+    }
+    /** Sets `ml: "16px"; mr: "16px"`. */
+    get mx2() {
+        return this.mx(2);
+    }
+    /** Sets `ml: "24px"; mr: "24px"`. */
+    get mx3() {
+        return this.mx(3);
+    }
+    /** Sets `ml: "32px"; mr: "32px"`. */
+    get mx4() {
+        return this.mx(4);
+    }
+    /** Sets `ml: "40px"; mr: "40px"`. */
+    get mx5() {
+        return this.mx(5);
+    }
+    /** Sets `ml: "48px"; mr: "48px"`. */
+    get mx6() {
+        return this.mx(6);
+    }
+    /** Sets `ml: "56px"; mr: "56px"`. */
+    get mx7() {
+        return this.mx(7);
+    }
+    /** Sets `ml: "64px"; mr: "64px"`. */
+    get mx8() {
+        return this.mx(8);
+    }
+    mx(inc) {
+        return this.ml(inc).mr(inc);
+    }
+    mxPx(px) {
+        return this.mlPx(px).mrPx(px);
+    }
+    /** Sets `mt: "0px"; mb: "0px"`. */
+    get my0() {
+        return this.my(0);
+    }
+    /** Sets `mt: "8px"; mb: "8px"`. */
+    get my1() {
+        return this.my(1);
+    }
+    /** Sets `mt: "16px"; mb: "16px"`. */
+    get my2() {
+        return this.my(2);
+    }
+    /** Sets `mt: "24px"; mb: "24px"`. */
+    get my3() {
+        return this.my(3);
+    }
+    /** Sets `mt: "32px"; mb: "32px"`. */
+    get my4() {
+        return this.my(4);
+    }
+    /** Sets `mt: "40px"; mb: "40px"`. */
+    get my5() {
+        return this.my(5);
+    }
+    /** Sets `mt: "48px"; mb: "48px"`. */
+    get my6() {
+        return this.my(6);
+    }
+    /** Sets `mt: "56px"; mb: "56px"`. */
+    get my7() {
+        return this.my(7);
+    }
+    /** Sets `mt: "64px"; mb: "64px"`. */
+    get my8() {
+        return this.my(8);
+    }
+    my(inc) {
+        return this.mt(inc).mb(inc);
+    }
+    myPx(px) {
+        return this.mtPx(px).mbPx(px);
+    }
+    /** Sets `mt: "0px"; mb: "0px"; mr: "0px"; ml: "0px"`. */
+    get m0() {
+        return this.m(0);
+    }
+    /** Sets `mt: "8px"; mb: "8px"; mr: "8px"; ml: "8px"`. */
+    get m1() {
+        return this.m(1);
+    }
+    /** Sets `mt: "16px"; mb: "16px"; mr: "16px"; ml: "16px"`. */
+    get m2() {
+        return this.m(2);
+    }
+    /** Sets `mt: "24px"; mb: "24px"; mr: "24px"; ml: "24px"`. */
+    get m3() {
+        return this.m(3);
+    }
+    /** Sets `mt: "32px"; mb: "32px"; mr: "32px"; ml: "32px"`. */
+    get m4() {
+        return this.m(4);
+    }
+    /** Sets `mt: "40px"; mb: "40px"; mr: "40px"; ml: "40px"`. */
+    get m5() {
+        return this.m(5);
+    }
+    /** Sets `mt: "48px"; mb: "48px"; mr: "48px"; ml: "48px"`. */
+    get m6() {
+        return this.m(6);
+    }
+    /** Sets `mt: "56px"; mb: "56px"; mr: "56px"; ml: "56px"`. */
+    get m7() {
+        return this.m(7);
+    }
+    /** Sets `mt: "64px"; mb: "64px"; mr: "64px"; ml: "64px"`. */
+    get m8() {
+        return this.m(8);
+    }
+    m(inc) {
+        return this.mt(inc).mb(inc).mr(inc).ml(inc);
+    }
+    mPx(px) {
+        return this.mtPx(px).mbPx(px).mrPx(px).mlPx(px);
+    }
+    /** Sets `paddingTop: "0px"`. */
+    get pt0() {
+        return this.pt(0);
+    }
+    /** Sets `paddingTop: "8px"`. */
+    get pt1() {
+        return this.pt(1);
+    }
+    /** Sets `paddingTop: "16px"`. */
+    get pt2() {
+        return this.pt(2);
+    }
+    /** Sets `paddingTop: "24px"`. */
+    get pt3() {
+        return this.pt(3);
+    }
+    /** Sets `paddingTop: "32px"`. */
+    get pt4() {
+        return this.pt(4);
+    }
+    /** Sets `paddingTop: "40px"`. */
+    get pt5() {
+        return this.pt(5);
+    }
+    /** Sets `paddingTop: "48px"`. */
+    get pt6() {
+        return this.pt(6);
+    }
+    /** Sets `paddingTop: "56px"`. */
+    get pt7() {
+        return this.pt(7);
+    }
+    /** Sets `paddingTop: "64px"`. */
+    get pt8() {
+        return this.pt(8);
+    }
+    /** Sets `paddingTop: inc`. */
+    pt(inc) {
+        return this.add("paddingTop", maybeInc(inc));
+    }
+    /** Sets `paddingTop: px`. */
+    ptPx(px) {
+        return this.pt(`${px}px`);
+    }
+    /** Sets `paddingRight: "0px"`. */
+    get pr0() {
+        return this.pr(0);
+    }
+    /** Sets `paddingRight: "8px"`. */
+    get pr1() {
+        return this.pr(1);
+    }
+    /** Sets `paddingRight: "16px"`. */
+    get pr2() {
+        return this.pr(2);
+    }
+    /** Sets `paddingRight: "24px"`. */
+    get pr3() {
+        return this.pr(3);
+    }
+    /** Sets `paddingRight: "32px"`. */
+    get pr4() {
+        return this.pr(4);
+    }
+    /** Sets `paddingRight: "40px"`. */
+    get pr5() {
+        return this.pr(5);
+    }
+    /** Sets `paddingRight: "48px"`. */
+    get pr6() {
+        return this.pr(6);
+    }
+    /** Sets `paddingRight: "56px"`. */
+    get pr7() {
+        return this.pr(7);
+    }
+    /** Sets `paddingRight: "64px"`. */
+    get pr8() {
+        return this.pr(8);
+    }
+    /** Sets `paddingRight: inc`. */
+    pr(inc) {
+        return this.add("paddingRight", maybeInc(inc));
+    }
+    /** Sets `paddingRight: px`. */
+    prPx(px) {
+        return this.pr(`${px}px`);
+    }
+    /** Sets `paddingBottom: "0px"`. */
+    get pb0() {
+        return this.pb(0);
+    }
+    /** Sets `paddingBottom: "8px"`. */
+    get pb1() {
+        return this.pb(1);
+    }
+    /** Sets `paddingBottom: "16px"`. */
+    get pb2() {
+        return this.pb(2);
+    }
+    /** Sets `paddingBottom: "24px"`. */
+    get pb3() {
+        return this.pb(3);
+    }
+    /** Sets `paddingBottom: "32px"`. */
+    get pb4() {
+        return this.pb(4);
+    }
+    /** Sets `paddingBottom: "40px"`. */
+    get pb5() {
+        return this.pb(5);
+    }
+    /** Sets `paddingBottom: "48px"`. */
+    get pb6() {
+        return this.pb(6);
+    }
+    /** Sets `paddingBottom: "56px"`. */
+    get pb7() {
+        return this.pb(7);
+    }
+    /** Sets `paddingBottom: "64px"`. */
+    get pb8() {
+        return this.pb(8);
+    }
+    /** Sets `paddingBottom: inc`. */
+    pb(inc) {
+        return this.add("paddingBottom", maybeInc(inc));
+    }
+    /** Sets `paddingBottom: px`. */
+    pbPx(px) {
+        return this.pb(`${px}px`);
+    }
+    /** Sets `paddingLeft: "0px"`. */
+    get pl0() {
+        return this.pl(0);
+    }
+    /** Sets `paddingLeft: "8px"`. */
+    get pl1() {
+        return this.pl(1);
+    }
+    /** Sets `paddingLeft: "16px"`. */
+    get pl2() {
+        return this.pl(2);
+    }
+    /** Sets `paddingLeft: "24px"`. */
+    get pl3() {
+        return this.pl(3);
+    }
+    /** Sets `paddingLeft: "32px"`. */
+    get pl4() {
+        return this.pl(4);
+    }
+    /** Sets `paddingLeft: "40px"`. */
+    get pl5() {
+        return this.pl(5);
+    }
+    /** Sets `paddingLeft: "48px"`. */
+    get pl6() {
+        return this.pl(6);
+    }
+    /** Sets `paddingLeft: "56px"`. */
+    get pl7() {
+        return this.pl(7);
+    }
+    /** Sets `paddingLeft: "64px"`. */
+    get pl8() {
+        return this.pl(8);
+    }
+    /** Sets `paddingLeft: inc`. */
+    pl(inc) {
+        return this.add("paddingLeft", maybeInc(inc));
+    }
+    /** Sets `paddingLeft: px`. */
+    plPx(px) {
+        return this.pl(`${px}px`);
+    }
+    /** Sets `pl: "0px"; pr: "0px"`. */
+    get px0() {
+        return this.px(0);
+    }
+    /** Sets `pl: "8px"; pr: "8px"`. */
+    get px1() {
+        return this.px(1);
+    }
+    /** Sets `pl: "16px"; pr: "16px"`. */
+    get px2() {
+        return this.px(2);
+    }
+    /** Sets `pl: "24px"; pr: "24px"`. */
+    get px3() {
+        return this.px(3);
+    }
+    /** Sets `pl: "32px"; pr: "32px"`. */
+    get px4() {
+        return this.px(4);
+    }
+    /** Sets `pl: "40px"; pr: "40px"`. */
+    get px5() {
+        return this.px(5);
+    }
+    /** Sets `pl: "48px"; pr: "48px"`. */
+    get px6() {
+        return this.px(6);
+    }
+    /** Sets `pl: "56px"; pr: "56px"`. */
+    get px7() {
+        return this.px(7);
+    }
+    /** Sets `pl: "64px"; pr: "64px"`. */
+    get px8() {
+        return this.px(8);
+    }
+    px(inc) {
+        return this.pl(inc).pr(inc);
+    }
+    pxPx(px) {
+        return this.plPx(px).prPx(px);
+    }
+    /** Sets `pt: "0px"; pb: "0px"`. */
+    get py0() {
+        return this.py(0);
+    }
+    /** Sets `pt: "8px"; pb: "8px"`. */
+    get py1() {
+        return this.py(1);
+    }
+    /** Sets `pt: "16px"; pb: "16px"`. */
+    get py2() {
+        return this.py(2);
+    }
+    /** Sets `pt: "24px"; pb: "24px"`. */
+    get py3() {
+        return this.py(3);
+    }
+    /** Sets `pt: "32px"; pb: "32px"`. */
+    get py4() {
+        return this.py(4);
+    }
+    /** Sets `pt: "40px"; pb: "40px"`. */
+    get py5() {
+        return this.py(5);
+    }
+    /** Sets `pt: "48px"; pb: "48px"`. */
+    get py6() {
+        return this.py(6);
+    }
+    /** Sets `pt: "56px"; pb: "56px"`. */
+    get py7() {
+        return this.py(7);
+    }
+    /** Sets `pt: "64px"; pb: "64px"`. */
+    get py8() {
+        return this.py(8);
+    }
+    py(inc) {
+        return this.pt(inc).pb(inc);
+    }
+    pyPx(px) {
+        return this.ptPx(px).pbPx(px);
+    }
+    /** Sets `pt: "0px"; pb: "0px"; pr: "0px"; pl: "0px"`. */
+    get p0() {
+        return this.p(0);
+    }
+    /** Sets `pt: "8px"; pb: "8px"; pr: "8px"; pl: "8px"`. */
+    get p1() {
+        return this.p(1);
+    }
+    /** Sets `pt: "16px"; pb: "16px"; pr: "16px"; pl: "16px"`. */
+    get p2() {
+        return this.p(2);
+    }
+    /** Sets `pt: "24px"; pb: "24px"; pr: "24px"; pl: "24px"`. */
+    get p3() {
+        return this.p(3);
+    }
+    /** Sets `pt: "32px"; pb: "32px"; pr: "32px"; pl: "32px"`. */
+    get p4() {
+        return this.p(4);
+    }
+    /** Sets `pt: "40px"; pb: "40px"; pr: "40px"; pl: "40px"`. */
+    get p5() {
+        return this.p(5);
+    }
+    /** Sets `pt: "48px"; pb: "48px"; pr: "48px"; pl: "48px"`. */
+    get p6() {
+        return this.p(6);
+    }
+    /** Sets `pt: "56px"; pb: "56px"; pr: "56px"; pl: "56px"`. */
+    get p7() {
+        return this.p(7);
+    }
+    /** Sets `pt: "64px"; pb: "64px"; pr: "64px"; pl: "64px"`. */
+    get p8() {
+        return this.p(8);
+    }
+    p(inc) {
+        return this.pt(inc).pb(inc).pr(inc).pl(inc);
+    }
+    pPx(px) {
+        return this.ptPx(px).pbPx(px).prPx(px).plPx(px);
+    }
     // textAlign
-    get tl() { return this.add("textAlign", "left"); }
-    get tc() { return this.add("textAlign", "center"); }
-    get tr() { return this.add("textAlign", "right"); }
-    get tj() { return this.add("textAlign", "justify"); }
-    ta(value) { return this.add("textAlign", value); }
+    /** Sets `textAlign: "left"`. */
+    get tl() {
+        return this.add("textAlign", "left");
+    }
+    /** Sets `textAlign: "center"`. */
+    get tc() {
+        return this.add("textAlign", "center");
+    }
+    /** Sets `textAlign: "right"`. */
+    get tr() {
+        return this.add("textAlign", "right");
+    }
+    /** Sets `textAlign: "justify"`. */
+    get tj() {
+        return this.add("textAlign", "justify");
+    }
+    /** Sets `textAlign: value`. */
+    ta(value) {
+        return this.add("textAlign", value);
+    }
     // textDecoration
-    get noUnderline() { return this.add("textDecoration", "none"); }
-    get strike() { return this.add("textDecoration", "line-through"); }
-    get underline() { return this.add("textDecoration", "underline"); }
-    textDecoration(value) { return this.add("textDecoration", value); }
+    /** Sets `textDecoration: "none"`. */
+    get noUnderline() {
+        return this.add("textDecoration", "none");
+    }
+    /** Sets `textDecoration: "line-through"`. */
+    get strike() {
+        return this.add("textDecoration", "line-through");
+    }
+    /** Sets `textDecoration: "underline"`. */
+    get underline() {
+        return this.add("textDecoration", "underline");
+    }
+    /** Sets `textDecoration: value`. */
+    textDecoration(value) {
+        return this.add("textDecoration", value);
+    }
     // textTransform
-    get ttc() { return this.add("textTransform", "capitalize"); }
-    get ttl() { return this.add("textTransform", "lowercase"); }
-    get ttu() { return this.add("textTransform", "uppercase"); }
-    get ttn() { return this.add("textTransform", "none"); }
-    tt(value) { return this.add("textTransform", value); }
+    /** Sets `textTransform: "capitalize"`. */
+    get ttc() {
+        return this.add("textTransform", "capitalize");
+    }
+    /** Sets `textTransform: "lowercase"`. */
+    get ttl() {
+        return this.add("textTransform", "lowercase");
+    }
+    /** Sets `textTransform: "uppercase"`. */
+    get ttu() {
+        return this.add("textTransform", "uppercase");
+    }
+    /** Sets `textTransform: "none"`. */
+    get ttn() {
+        return this.add("textTransform", "none");
+    }
+    /** Sets `textTransform: value`. */
+    tt(value) {
+        return this.add("textTransform", value);
+    }
     // typeScale
-    get tiny() { return this.add("fontWeight", 400).add("fontSize", "10px").add("lineHeight", "14px"); }
-    get tinyMd() { return this.add("fontWeight", 500).add("fontSize", "10px").add("lineHeight", "14px"); }
-    get tinySb() { return this.add("fontWeight", 600).add("fontSize", "10px").add("lineHeight", "14px"); }
-    get tinyBd() { return this.add("fontWeight", 700).add("fontSize", "10px").add("lineHeight", "14px"); }
-    get xs() { return this.add("fontWeight", 400).add("fontSize", "12px").add("lineHeight", "16px"); }
-    get xsMd() { return this.add("fontWeight", 500).add("fontSize", "12px").add("lineHeight", "16px"); }
-    get xsSb() { return this.add("fontWeight", 600).add("fontSize", "12px").add("lineHeight", "16px"); }
-    get xsBd() { return this.add("fontWeight", 700).add("fontSize", "12px").add("lineHeight", "16px"); }
-    get sm() { return this.add("fontWeight", 400).add("fontSize", "14px").add("lineHeight", "20px"); }
-    get smMd() { return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px"); }
-    get smSb() { return this.add("fontWeight", 600).add("fontSize", "14px").add("lineHeight", "20px"); }
-    get smBd() { return this.add("fontWeight", 700).add("fontSize", "14px").add("lineHeight", "20px"); }
-    get base() { return this.add("fontWeight", 400).add("fontSize", "16px").add("lineHeight", "24px"); }
-    get baseMd() { return this.add("fontWeight", 500).add("fontSize", "16px").add("lineHeight", "24px"); }
-    get baseSb() { return this.add("fontWeight", 600).add("fontSize", "16px").add("lineHeight", "24px"); }
-    get baseBd() { return this.add("fontWeight", 700).add("fontSize", "16px").add("lineHeight", "24px"); }
-    get lg() { return this.add("fontWeight", 400).add("fontSize", "18px").add("lineHeight", "28px"); }
-    get lgMd() { return this.add("fontWeight", 500).add("fontSize", "18px").add("lineHeight", "28px"); }
-    get lgSb() { return this.add("fontWeight", 600).add("fontSize", "18px").add("lineHeight", "28px"); }
-    get lgBd() { return this.add("fontWeight", 700).add("fontSize", "18px").add("lineHeight", "28px"); }
-    get xl() { return this.add("fontWeight", 400).add("fontSize", "20px").add("lineHeight", "28px"); }
-    get xlMd() { return this.add("fontWeight", 500).add("fontSize", "20px").add("lineHeight", "28px"); }
-    get xlSb() { return this.add("fontWeight", 600).add("fontSize", "20px").add("lineHeight", "28px"); }
-    get xlBd() { return this.add("fontWeight", 700).add("fontSize", "20px").add("lineHeight", "28px"); }
-    get xl2() { return this.add("fontWeight", 400).add("fontSize", "24px").add("lineHeight", "32px"); }
-    get xl2Md() { return this.add("fontWeight", 500).add("fontSize", "24px").add("lineHeight", "32px"); }
-    get xl2Sb() { return this.add("fontWeight", 600).add("fontSize", "24px").add("lineHeight", "32px"); }
-    get xl2Bd() { return this.add("fontWeight", 700).add("fontSize", "24px").add("lineHeight", "32px"); }
-    get xl3() { return this.add("fontWeight", 400).add("fontSize", "30px").add("lineHeight", "36px"); }
-    get xl3Md() { return this.add("fontWeight", 500).add("fontSize", "30px").add("lineHeight", "36px"); }
-    get xl3Sb() { return this.add("fontWeight", 600).add("fontSize", "30px").add("lineHeight", "36px"); }
-    get xl3Bd() { return this.add("fontWeight", 700).add("fontSize", "30px").add("lineHeight", "36px"); }
-    get xl4() { return this.add("fontWeight", 400).add("fontSize", "36px").add("lineHeight", "40px"); }
-    get xl4Md() { return this.add("fontWeight", 500).add("fontSize", "36px").add("lineHeight", "40px"); }
-    get xl4Sb() { return this.add("fontWeight", 600).add("fontSize", "36px").add("lineHeight", "40px"); }
-    get xl4Bd() { return this.add("fontWeight", 700).add("fontSize", "36px").add("lineHeight", "40px"); }
-    get xl5() { return this.add("fontWeight", 400).add("fontSize", "48px").add("lineHeight", "48px"); }
-    get xl5Md() { return this.add("fontWeight", 500).add("fontSize", "48px").add("lineHeight", "48px"); }
-    get xl5Sb() { return this.add("fontWeight", 600).add("fontSize", "48px").add("lineHeight", "48px"); }
-    get xl5Bd() { return this.add("fontWeight", 700).add("fontSize", "48px").add("lineHeight", "48px"); }
+    /** Sets `fontWeight: 400; fontSize: "10px"; lineHeight: "14px"`. */
+    get tiny() {
+        return this.add("fontWeight", 400).add("fontSize", "10px").add("lineHeight", "14px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "10px"; lineHeight: "14px"`. */
+    get tinyMd() {
+        return this.add("fontWeight", 500).add("fontSize", "10px").add("lineHeight", "14px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "10px"; lineHeight: "14px"`. */
+    get tinySb() {
+        return this.add("fontWeight", 600).add("fontSize", "10px").add("lineHeight", "14px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "10px"; lineHeight: "14px"`. */
+    get tinyBd() {
+        return this.add("fontWeight", 700).add("fontSize", "10px").add("lineHeight", "14px");
+    }
+    /** Sets `fontWeight: 400; fontSize: "12px"; lineHeight: "16px"`. */
+    get xs() {
+        return this.add("fontWeight", 400).add("fontSize", "12px").add("lineHeight", "16px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "12px"; lineHeight: "16px"`. */
+    get xsMd() {
+        return this.add("fontWeight", 500).add("fontSize", "12px").add("lineHeight", "16px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "12px"; lineHeight: "16px"`. */
+    get xsSb() {
+        return this.add("fontWeight", 600).add("fontSize", "12px").add("lineHeight", "16px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "12px"; lineHeight: "16px"`. */
+    get xsBd() {
+        return this.add("fontWeight", 700).add("fontSize", "12px").add("lineHeight", "16px");
+    }
+    /** Sets `fontWeight: 400; fontSize: "14px"; lineHeight: "20px"`. */
+    get sm() {
+        return this.add("fontWeight", 400).add("fontSize", "14px").add("lineHeight", "20px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"`. */
+    get smMd() {
+        return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "14px"; lineHeight: "20px"`. */
+    get smSb() {
+        return this.add("fontWeight", 600).add("fontSize", "14px").add("lineHeight", "20px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "14px"; lineHeight: "20px"`. */
+    get smBd() {
+        return this.add("fontWeight", 700).add("fontSize", "14px").add("lineHeight", "20px");
+    }
+    /** Sets `fontWeight: 400; fontSize: "16px"; lineHeight: "24px"`. */
+    get base() {
+        return this.add("fontWeight", 400).add("fontSize", "16px").add("lineHeight", "24px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "16px"; lineHeight: "24px"`. */
+    get baseMd() {
+        return this.add("fontWeight", 500).add("fontSize", "16px").add("lineHeight", "24px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "16px"; lineHeight: "24px"`. */
+    get baseSb() {
+        return this.add("fontWeight", 600).add("fontSize", "16px").add("lineHeight", "24px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "16px"; lineHeight: "24px"`. */
+    get baseBd() {
+        return this.add("fontWeight", 700).add("fontSize", "16px").add("lineHeight", "24px");
+    }
+    /** Sets `fontWeight: 400; fontSize: "18px"; lineHeight: "28px"`. */
+    get lg() {
+        return this.add("fontWeight", 400).add("fontSize", "18px").add("lineHeight", "28px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "18px"; lineHeight: "28px"`. */
+    get lgMd() {
+        return this.add("fontWeight", 500).add("fontSize", "18px").add("lineHeight", "28px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "18px"; lineHeight: "28px"`. */
+    get lgSb() {
+        return this.add("fontWeight", 600).add("fontSize", "18px").add("lineHeight", "28px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "18px"; lineHeight: "28px"`. */
+    get lgBd() {
+        return this.add("fontWeight", 700).add("fontSize", "18px").add("lineHeight", "28px");
+    }
+    /** Sets `fontWeight: 400; fontSize: "20px"; lineHeight: "28px"`. */
+    get xl() {
+        return this.add("fontWeight", 400).add("fontSize", "20px").add("lineHeight", "28px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "20px"; lineHeight: "28px"`. */
+    get xlMd() {
+        return this.add("fontWeight", 500).add("fontSize", "20px").add("lineHeight", "28px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "20px"; lineHeight: "28px"`. */
+    get xlSb() {
+        return this.add("fontWeight", 600).add("fontSize", "20px").add("lineHeight", "28px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "20px"; lineHeight: "28px"`. */
+    get xlBd() {
+        return this.add("fontWeight", 700).add("fontSize", "20px").add("lineHeight", "28px");
+    }
+    /** Sets `fontWeight: 400; fontSize: "24px"; lineHeight: "32px"`. */
+    get xl2() {
+        return this.add("fontWeight", 400).add("fontSize", "24px").add("lineHeight", "32px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "24px"; lineHeight: "32px"`. */
+    get xl2Md() {
+        return this.add("fontWeight", 500).add("fontSize", "24px").add("lineHeight", "32px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "24px"; lineHeight: "32px"`. */
+    get xl2Sb() {
+        return this.add("fontWeight", 600).add("fontSize", "24px").add("lineHeight", "32px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "24px"; lineHeight: "32px"`. */
+    get xl2Bd() {
+        return this.add("fontWeight", 700).add("fontSize", "24px").add("lineHeight", "32px");
+    }
+    /** Sets `fontWeight: 400; fontSize: "30px"; lineHeight: "36px"`. */
+    get xl3() {
+        return this.add("fontWeight", 400).add("fontSize", "30px").add("lineHeight", "36px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "30px"; lineHeight: "36px"`. */
+    get xl3Md() {
+        return this.add("fontWeight", 500).add("fontSize", "30px").add("lineHeight", "36px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "30px"; lineHeight: "36px"`. */
+    get xl3Sb() {
+        return this.add("fontWeight", 600).add("fontSize", "30px").add("lineHeight", "36px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "30px"; lineHeight: "36px"`. */
+    get xl3Bd() {
+        return this.add("fontWeight", 700).add("fontSize", "30px").add("lineHeight", "36px");
+    }
+    /** Sets `fontWeight: 400; fontSize: "36px"; lineHeight: "40px"`. */
+    get xl4() {
+        return this.add("fontWeight", 400).add("fontSize", "36px").add("lineHeight", "40px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "36px"; lineHeight: "40px"`. */
+    get xl4Md() {
+        return this.add("fontWeight", 500).add("fontSize", "36px").add("lineHeight", "40px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "36px"; lineHeight: "40px"`. */
+    get xl4Sb() {
+        return this.add("fontWeight", 600).add("fontSize", "36px").add("lineHeight", "40px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "36px"; lineHeight: "40px"`. */
+    get xl4Bd() {
+        return this.add("fontWeight", 700).add("fontSize", "36px").add("lineHeight", "40px");
+    }
+    /** Sets `fontWeight: 400; fontSize: "48px"; lineHeight: "48px"`. */
+    get xl5() {
+        return this.add("fontWeight", 400).add("fontSize", "48px").add("lineHeight", "48px");
+    }
+    /** Sets `fontWeight: 500; fontSize: "48px"; lineHeight: "48px"`. */
+    get xl5Md() {
+        return this.add("fontWeight", 500).add("fontSize", "48px").add("lineHeight", "48px");
+    }
+    /** Sets `fontWeight: 600; fontSize: "48px"; lineHeight: "48px"`. */
+    get xl5Sb() {
+        return this.add("fontWeight", 600).add("fontSize", "48px").add("lineHeight", "48px");
+    }
+    /** Sets `fontWeight: 700; fontSize: "48px"; lineHeight: "48px"`. */
+    get xl5Bd() {
+        return this.add("fontWeight", 700).add("fontSize", "48px").add("lineHeight", "48px");
+    }
     // typography
-    get measure() { return this.add("maxWidth", "30em"); }
-    get measureWide() { return this.add("maxWidth", "34em"); }
-    get measureNarrow() { return this.add("maxWidth", "20em"); }
-    get indent() { return this.add("textIndent", "1em").add("marginTop", 0).add("marginBottom", 0); }
-    get smallCaps() { return this.add("fontVariant", "small-caps"); }
-    get truncate() { return this.add("whiteSpace", "nowrap").add("overflow", "hidden").add("textOverflow", "ellipsis"); }
-    lh(value) { return this.add("lineHeight", value); }
+    /** Sets `maxWidth: "30em"`. */
+    get measure() {
+        return this.add("maxWidth", "30em");
+    }
+    /** Sets `maxWidth: "34em"`. */
+    get measureWide() {
+        return this.add("maxWidth", "34em");
+    }
+    /** Sets `maxWidth: "20em"`. */
+    get measureNarrow() {
+        return this.add("maxWidth", "20em");
+    }
+    /** Sets `textIndent: "1em"; marginTop: 0; marginBottom: 0`. */
+    get indent() {
+        return this.add("textIndent", "1em").add("marginTop", 0).add("marginBottom", 0);
+    }
+    /** Sets `fontVariant: "small-caps"`. */
+    get smallCaps() {
+        return this.add("fontVariant", "small-caps");
+    }
+    /** Sets `whiteSpace: "nowrap"; overflow: "hidden"; textOverflow: "ellipsis"`. */
+    get truncate() {
+        return this.add("whiteSpace", "nowrap").add("overflow", "hidden").add("textOverflow", "ellipsis");
+    }
+    /** Sets `lineHeight: value`. */
+    lh(value) {
+        return this.add("lineHeight", value);
+    }
     // userSelect
-    get selectNone() { return this.add("userSelect", "none"); }
-    get selectText() { return this.add("userSelect", "text"); }
-    get selectAll() { return this.add("userSelect", "all"); }
-    get selectAuto() { return this.add("userSelect", "auto"); }
-    select(value) { return this.add("userSelect", value); }
+    /** Sets `userSelect: "none"`. */
+    get selectNone() {
+        return this.add("userSelect", "none");
+    }
+    /** Sets `userSelect: "text"`. */
+    get selectText() {
+        return this.add("userSelect", "text");
+    }
+    /** Sets `userSelect: "all"`. */
+    get selectAll() {
+        return this.add("userSelect", "all");
+    }
+    /** Sets `userSelect: "auto"`. */
+    get selectAuto() {
+        return this.add("userSelect", "auto");
+    }
+    /** Sets `userSelect: value`. */
+    select(value) {
+        return this.add("userSelect", value);
+    }
     // verticalAlign
-    get vBase() { return this.add("verticalAlign", "baseline"); }
-    get vMid() { return this.add("verticalAlign", "middle"); }
-    get vTop() { return this.add("verticalAlign", "top"); }
-    get vBottom() { return this.add("verticalAlign", "bottom"); }
-    va(value) { return this.add("verticalAlign", value); }
+    /** Sets `verticalAlign: "baseline"`. */
+    get vBase() {
+        return this.add("verticalAlign", "baseline");
+    }
+    /** Sets `verticalAlign: "middle"`. */
+    get vMid() {
+        return this.add("verticalAlign", "middle");
+    }
+    /** Sets `verticalAlign: "top"`. */
+    get vTop() {
+        return this.add("verticalAlign", "top");
+    }
+    /** Sets `verticalAlign: "bottom"`. */
+    get vBottom() {
+        return this.add("verticalAlign", "bottom");
+    }
+    /** Sets `verticalAlign: value`. */
+    va(value) {
+        return this.add("verticalAlign", value);
+    }
     // visibility
-    get visible() { return this.add("visibility", "visible"); }
-    get invisible() { return this.add("visibility", "hidden"); }
-    visibility(value) { return this.add("visibility", value); }
+    /** Sets `visibility: "visible"`. */
+    get visible() {
+        return this.add("visibility", "visible");
+    }
+    /** Sets `visibility: "hidden"`. */
+    get invisible() {
+        return this.add("visibility", "hidden");
+    }
+    /** Sets `visibility: value`. */
+    visibility(value) {
+        return this.add("visibility", value);
+    }
     // whitespace
-    get nowrap() { return this.add("whiteSpace", "nowrap"); }
-    get pre() { return this.add("whiteSpace", "pre"); }
-    get wsNormal() { return this.add("whiteSpace", "normal"); }
-    whiteSpace(value) { return this.add("whiteSpace", value); }
+    /** Sets `whiteSpace: "nowrap"`. */
+    get nowrap() {
+        return this.add("whiteSpace", "nowrap");
+    }
+    /** Sets `whiteSpace: "pre"`. */
+    get pre() {
+        return this.add("whiteSpace", "pre");
+    }
+    /** Sets `whiteSpace: "normal"`. */
+    get wsNormal() {
+        return this.add("whiteSpace", "normal");
+    }
+    /** Sets `whiteSpace: value`. */
+    whiteSpace(value) {
+        return this.add("whiteSpace", value);
+    }
     // width
-    get w25() { return this.add("width", "25%"); }
-    get w50() { return this.add("width", "50%"); }
-    get w75() { return this.add("width", "75%"); }
-    get w100() { return this.add("width", "100%"); }
-    get mw0() { return this.add("minWidth", 0); }
-    get mw25() { return this.add("minWidth", "25%"); }
-    get mw50() { return this.add("minWidth", "50%"); }
-    get mw75() { return this.add("minWidth", "75%"); }
-    get mw100() { return this.add("minWidth", "100%"); }
-    mw(value) { return this.add("minWidth", value); }
-    mwPx(px) { return this.mw(`${px}px`); }
-    get maxw0() { return this.add("maxWidth", "0"); }
-    get maxw25() { return this.add("maxWidth", "25%"); }
-    get maxw50() { return this.add("maxWidth", "50%"); }
-    get maxw75() { return this.add("maxWidth", "75%"); }
-    get maxw100() { return this.add("maxWidth", "100%"); }
-    maxw(value) { return this.add("maxWidth", value); }
-    maxwPx(px) { return this.maxw(`${px}px`); }
-    get w0() { return this.w(0); }
-    get w1() { return this.w(1); }
-    get w2() { return this.w(2); }
-    get w3() { return this.w(3); }
-    get w4() { return this.w(4); }
-    get w5() { return this.w(5); }
-    get w6() { return this.w(6); }
-    get w7() { return this.w(7); }
-    get w8() { return this.w(8); }
-    w(inc) { return this.add("width", maybeInc(inc)); }
-    wPx(px) { return this.w(`${px}px`); }
+    /** Sets `width: "25%"`. */
+    get w25() {
+        return this.add("width", "25%");
+    }
+    /** Sets `width: "50%"`. */
+    get w50() {
+        return this.add("width", "50%");
+    }
+    /** Sets `width: "75%"`. */
+    get w75() {
+        return this.add("width", "75%");
+    }
+    /** Sets `width: "100%"`. */
+    get w100() {
+        return this.add("width", "100%");
+    }
+    /** Sets `minWidth: 0`. */
+    get mw0() {
+        return this.add("minWidth", 0);
+    }
+    /** Sets `minWidth: "25%"`. */
+    get mw25() {
+        return this.add("minWidth", "25%");
+    }
+    /** Sets `minWidth: "50%"`. */
+    get mw50() {
+        return this.add("minWidth", "50%");
+    }
+    /** Sets `minWidth: "75%"`. */
+    get mw75() {
+        return this.add("minWidth", "75%");
+    }
+    /** Sets `minWidth: "100%"`. */
+    get mw100() {
+        return this.add("minWidth", "100%");
+    }
+    /** Sets `minWidth: value`. */
+    mw(value) {
+        return this.add("minWidth", value);
+    }
+    /** Sets `minWidth: px`. */
+    mwPx(px) {
+        return this.mw(`${px}px`);
+    }
+    /** Sets `maxWidth: "0"`. */
+    get maxw0() {
+        return this.add("maxWidth", "0");
+    }
+    /** Sets `maxWidth: "25%"`. */
+    get maxw25() {
+        return this.add("maxWidth", "25%");
+    }
+    /** Sets `maxWidth: "50%"`. */
+    get maxw50() {
+        return this.add("maxWidth", "50%");
+    }
+    /** Sets `maxWidth: "75%"`. */
+    get maxw75() {
+        return this.add("maxWidth", "75%");
+    }
+    /** Sets `maxWidth: "100%"`. */
+    get maxw100() {
+        return this.add("maxWidth", "100%");
+    }
+    /** Sets `maxWidth: value`. */
+    maxw(value) {
+        return this.add("maxWidth", value);
+    }
+    /** Sets `maxWidth: px`. */
+    maxwPx(px) {
+        return this.maxw(`${px}px`);
+    }
+    /** Sets `width: "0px"`. */
+    get w0() {
+        return this.w(0);
+    }
+    /** Sets `width: "8px"`. */
+    get w1() {
+        return this.w(1);
+    }
+    /** Sets `width: "16px"`. */
+    get w2() {
+        return this.w(2);
+    }
+    /** Sets `width: "24px"`. */
+    get w3() {
+        return this.w(3);
+    }
+    /** Sets `width: "32px"`. */
+    get w4() {
+        return this.w(4);
+    }
+    /** Sets `width: "40px"`. */
+    get w5() {
+        return this.w(5);
+    }
+    /** Sets `width: "48px"`. */
+    get w6() {
+        return this.w(6);
+    }
+    /** Sets `width: "56px"`. */
+    get w7() {
+        return this.w(7);
+    }
+    /** Sets `width: "64px"`. */
+    get w8() {
+        return this.w(8);
+    }
+    /** Sets `width: inc`. */
+    w(inc) {
+        return this.add("width", maybeInc(inc));
+    }
+    /** Sets `width: px`. */
+    wPx(px) {
+        return this.w(`${px}px`);
+    }
     // wordBreak
-    get breakNormal() { return this.add("wordBreak", "normal"); }
-    get breakAll() { return this.add("wordBreak", "break-all"); }
-    get breakKeepAll() { return this.add("wordBreak", "keep-all"); }
-    get breakWord() { return this.add("wordBreak", "break-word"); }
-    wordBreak(value) { return this.add("wordBreak", value); }
+    /** Sets `wordBreak: "normal"`. */
+    get breakNormal() {
+        return this.add("wordBreak", "normal");
+    }
+    /** Sets `wordBreak: "break-all"`. */
+    get breakAll() {
+        return this.add("wordBreak", "break-all");
+    }
+    /** Sets `wordBreak: "keep-all"`. */
+    get breakKeepAll() {
+        return this.add("wordBreak", "keep-all");
+    }
+    /** Sets `wordBreak: "break-word"`. */
+    get breakWord() {
+        return this.add("wordBreak", "break-word");
+    }
+    /** Sets `wordBreak: value`. */
+    wordBreak(value) {
+        return this.add("wordBreak", value);
+    }
     // zIndex
-    get z0() { return this.add("zIndex", 0); }
-    get z1() { return this.add("zIndex", 1); }
-    get z2() { return this.add("zIndex", 2); }
-    get z3() { return this.add("zIndex", 3); }
-    get z4() { return this.add("zIndex", 4); }
-    get z5() { return this.add("zIndex", 5); }
-    get z999() { return this.add("zIndex", 999); }
-    get z9999() { return this.add("zIndex", 9999); }
-    get zInherit() { return this.add("zIndex", "inherit"); }
-    get zInitial() { return this.add("zIndex", "initial"); }
-    get zUnset() { return this.add("zIndex", "unset"); }
-    z(value) { return this.add("zIndex", value); }
+    /** Sets `zIndex: 0`. */
+    get z0() {
+        return this.add("zIndex", 0);
+    }
+    /** Sets `zIndex: 1`. */
+    get z1() {
+        return this.add("zIndex", 1);
+    }
+    /** Sets `zIndex: 2`. */
+    get z2() {
+        return this.add("zIndex", 2);
+    }
+    /** Sets `zIndex: 3`. */
+    get z3() {
+        return this.add("zIndex", 3);
+    }
+    /** Sets `zIndex: 4`. */
+    get z4() {
+        return this.add("zIndex", 4);
+    }
+    /** Sets `zIndex: 5`. */
+    get z5() {
+        return this.add("zIndex", 5);
+    }
+    /** Sets `zIndex: 999`. */
+    get z999() {
+        return this.add("zIndex", 999);
+    }
+    /** Sets `zIndex: 9999`. */
+    get z9999() {
+        return this.add("zIndex", 9999);
+    }
+    /** Sets `zIndex: "inherit"`. */
+    get zInherit() {
+        return this.add("zIndex", "inherit");
+    }
+    /** Sets `zIndex: "initial"`. */
+    get zInitial() {
+        return this.add("zIndex", "initial");
+    }
+    /** Sets `zIndex: "unset"`. */
+    get zUnset() {
+        return this.add("zIndex", "unset");
+    }
+    /** Sets `zIndex: value`. */
+    z(value) {
+        return this.add("zIndex", value);
+    }
     // fontFamily
-    get sansSerif() { return this.add("fontFamily", "'Inter', sans-serif"); }
-    fontFamily(value) { return this.add("fontFamily", value); }
+    /** Sets `fontFamily: "'Inter', sans-serif"`. */
+    get sansSerif() {
+        return this.add("fontFamily", "'Inter', sans-serif");
+    }
+    /** Sets `fontFamily: value`. */
+    fontFamily(value) {
+        return this.add("fontFamily", value);
+    }
     // animation
-    get transition() { return this.add("transition", "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"); }
+    /** Sets `transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
+    get transition() {
+        return this.add("transition", "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms");
+    }
     // buttonBase
-    get buttonBase() { return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px").add("outline", 0).add("borderRadius", "4px").add("display", "inline-flex").add("alignItems", "center").add("whiteSpace", "nowrap").add("transition", "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"); }
+    /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "4px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
+    get buttonBase() {
+        return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px").add("outline", 0).add("borderRadius", "4px").add("display", "inline-flex").add("alignItems", "center").add("whiteSpace", "nowrap").add("transition", "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms");
+    }
     // listReset
-    get listReset() { return this.add("padding", 0).add("margin", 0).add("listStyle", "none"); }
+    /** Sets `padding: 0; margin: 0; listStyle: "none"`. */
+    get listReset() {
+        return this.add("padding", 0).add("margin", 0).add("listStyle", "none");
+    }
     // underlay
-    get underlay() { return this.add("position", "fixed").add("top", 0).add("bottom", 0).add("left", 0).add("right", 0).add("display", "flex").add("alignItems", "center").add("justifyContent", "center").add("backgroundColor", "rgba(36,36,36,0.2)"); }
+    /** Sets `position: "fixed"; top: 0; bottom: 0; left: 0; right: 0; display: "flex"; alignItems: "center"; justifyContent: "center"; backgroundColor: "rgba(36,36,36,0.2)"`. */
+    get underlay() {
+        return this.add("position", "fixed").add("top", 0).add("bottom", 0).add("left", 0).add("right", 0).add("display", "flex").add("alignItems", "center").add("justifyContent", "center").add("backgroundColor", "rgba(36,36,36,0.2)");
+    }
     // contentEmpty
-    get contentEmpty() { return this.add("content", "''"); }
+    /** Sets `content: "''"`. */
+    get contentEmpty() {
+        return this.add("content", "''");
+    }
     // aliases
-    get $() { return maybeImportant(sortObject(this.rules), this.opts.important); }
-    if(t) {
-        if (typeof t === "boolean") {
-            return this.newCss({ enabled: t });
+    get $() {
+        return maybeImportant(sortObject(this.rules), this.opts.important);
+    }
+    if(arg) {
+        if (typeof arg === "boolean") {
+            return this.newCss({ enabled: arg });
         }
         else {
-            return this.newCss({ selector: t });
+            return this.newCss({ selector: Breakpoints[arg] });
         }
     }
+    get onHover() {
+        return this.newCss({ selector: ":hover" });
+    }
+    get ifPrint() {
+        return this.newCss({ selector: "@media print" });
+    }
+    get ifSm() {
+        return this.newCss({ selector: "@media screen and (max-width:599px)" });
+    }
+    get ifMd() {
+        return this.newCss({ selector: "@media screen and (min-width:600px) and (max-width:1024px)" });
+    }
+    get ifSmOrMd() {
+        return this.newCss({ selector: "@media screen and (max-width:1024px)" });
+    }
+    get ifMdAndUp() {
+        return this.newCss({ selector: "@media screen and (min-width:600px)" });
+    }
+    get ifMdAndDown() {
+        return this.newCss({ selector: "@media screen and (max-width:1024px)" });
+    }
+    get ifLg() {
+        return this.newCss({ selector: "@media screen and (min-width:1025px)" });
+    }
+    get ifMdOrLg() {
+        return this.newCss({ selector: "@media screen and (min-width:600px)" });
+    }
     get else() {
         if (this.selector !== undefined) {
-            throw new Error("else is not supported with if(selector)");
+            if (this.selector.includes("not")) {
+                throw new Error("else was already called");
+            }
+            else {
+                return this.newCss({ selector: this.selector.replace("@media", "@media not") });
+            }
         }
         return this.newCss({ enabled: !this.enabled });
     }
-    get important() { return this.newCss({ important: true }); }
+    get important() {
+        return this.newCss({ important: true });
+    }
     add(propOrProperties, value) {
+        if (!this.enabled) {
+            return this;
+        }
         const newRules = typeof propOrProperties === "string" ? { [propOrProperties]: value } : propOrProperties;
         const rules = this.selector
             ? { ...this.rules, [this.selector]: { ...this.rules[this.selector], ...newRules } }
-            : this.enabled ? { ...this.rules, ...newRules } : this.rules;
+            : { ...this.rules, ...newRules };
         return this.newCss({ rules: rules });
     }
     addIn(selector, propOrProperties, value) {
         const newRules = typeof propOrProperties === "string" ? { [propOrProperties]: value } : propOrProperties;
+        if (!this.enabled) {
+            return this;
+        }
         if (newRules === undefined) {
             return this;
         }
@@ -900,9 +3369,7 @@ class CssBuilder {
 }
 /** Emotion treats the same rules, ordered differently as different classes, but naively they can be the same. */
 function sortObject(obj) {
-    return Object.keys(obj)
-        .sort()
-        .reduce((acc, key) => {
+    return Object.keys(obj).sort().reduce((acc, key) => {
         acc[key] = obj[key];
         return acc;
     }, {});
@@ -1009,11 +3476,3 @@ var Breakpoints;
     Breakpoints["lg"] = "@media screen and (min-width:1025px)";
     Breakpoints["mdOrLg"] = "@media screen and (min-width:600px)";
 })(Breakpoints = exports.Breakpoints || (exports.Breakpoints = {}));
-exports.print = "@media print";
-exports.sm = "@media screen and (max-width:599px)";
-exports.md = "@media screen and (min-width:600px) and (max-width:1024px)";
-exports.smOrMd = "@media screen and (max-width:1024px)";
-exports.mdAndUp = "@media screen and (min-width:600px)";
-exports.mdAndDown = "@media screen and (max-width:1024px)";
-exports.lg = "@media screen and (min-width:1025px)";
-exports.mdOrLg = "@media screen and (min-width:600px)";