@homebound/beam 2.378.1 → 2.379.0

package/dist/Css.js

@@ -1,3988 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Breakpoints = exports.Css = exports.Palette = void 0;
-exports.maybeInc = maybeInc;
-exports.increment = increment;
-exports.px = px;
-exports.Container = Container;
-class CssBuilder {
-    opts;
-    constructor(opts) {
-        this.opts = opts;
-    }
-    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
-    /** 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(255,255,255,1)"`. */
-    get bcWhite() {
-        return this.add("borderColor", "rgba(255,255,255,1)");
-    }
-    /** Sets `borderColor: "rgba(0,0,0,0)"`. */
-    get bcTransparent() {
-        return this.add("borderColor", "rgba(0,0,0,0)");
-    }
-    /** Sets `borderColor: "rgba(255, 253, 253, 1)"`. */
-    get bcGray50() {
-        return this.add("borderColor", "rgba(255, 253, 253, 1)");
-    }
-    /** Sets `borderColor: "rgba(247, 245, 245, 1)"`. */
-    get bcGray100() {
-        return this.add("borderColor", "rgba(247, 245, 245, 1)");
-    }
-    /** Sets `borderColor: "rgba(236, 235, 235, 1)"`. */
-    get bcGray200() {
-        return this.add("borderColor", "rgba(236, 235, 235, 1)");
-    }
-    /** Sets `borderColor: "rgba(221, 220, 220, 1)"`. */
-    get bcGray300() {
-        return this.add("borderColor", "rgba(221, 220, 220, 1)");
-    }
-    /** Sets `borderColor: "rgba(201, 201, 201, 1)"`. */
-    get bcGray400() {
-        return this.add("borderColor", "rgba(201, 201, 201, 1)");
-    }
-    /** Sets `borderColor: "rgba(175, 175, 175, 1)"`. */
-    get bcGray500() {
-        return this.add("borderColor", "rgba(175, 175, 175, 1)");
-    }
-    /** Sets `borderColor: "rgba(141, 141, 141, 1)"`. */
-    get bcGray600() {
-        return this.add("borderColor", "rgba(141, 141, 141, 1)");
-    }
-    /** Sets `borderColor: "rgba(100, 100, 100, 1)"`. */
-    get bcGray700() {
-        return this.add("borderColor", "rgba(100, 100, 100, 1)");
-    }
-    /** Sets `borderColor: "rgba(53, 53, 53, 1)"`. */
-    get bcGray800() {
-        return this.add("borderColor", "rgba(53, 53, 53, 1)");
-    }
-    /** Sets `borderColor: "rgba(36, 36, 36, 1)"`. */
-    get bcGray900() {
-        return this.add("borderColor", "rgba(36, 36, 36, 1)");
-    }
-    /** Sets `borderColor: "rgba(239, 246, 255, 1)"`. */
-    get bcBlue50() {
-        return this.add("borderColor", "rgba(239, 246, 255, 1)");
-    }
-    /** Sets `borderColor: "rgba(219, 234, 254, 1)"`. */
-    get bcBlue100() {
-        return this.add("borderColor", "rgba(219, 234, 254, 1)");
-    }
-    /** Sets `borderColor: "rgba(191, 219, 254, 1)"`. */
-    get bcBlue200() {
-        return this.add("borderColor", "rgba(191, 219, 254, 1)");
-    }
-    /** Sets `borderColor: "rgba(147, 197, 253, 1)"`. */
-    get bcBlue300() {
-        return this.add("borderColor", "rgba(147, 197, 253, 1)");
-    }
-    /** Sets `borderColor: "rgba(96, 165, 250, 1)"`. */
-    get bcBlue400() {
-        return this.add("borderColor", "rgba(96, 165, 250, 1)");
-    }
-    /** Sets `borderColor: "rgba(59, 130, 246, 1)"`. */
-    get bcBlue500() {
-        return this.add("borderColor", "rgba(59, 130, 246, 1)");
-    }
-    /** Sets `borderColor: "rgba(37, 99, 235, 1)"`. */
-    get bcBlue600() {
-        return this.add("borderColor", "rgba(37, 99, 235, 1)");
-    }
-    /** Sets `borderColor: "rgba(29, 78, 216, 1)"`. */
-    get bcBlue700() {
-        return this.add("borderColor", "rgba(29, 78, 216, 1)");
-    }
-    /** Sets `borderColor: "rgba(30, 64, 175, 1)"`. */
-    get bcBlue800() {
-        return this.add("borderColor", "rgba(30, 64, 175, 1)");
-    }
-    /** Sets `borderColor: "rgba(30, 58, 138, 1)"`. */
-    get bcBlue900() {
-        return this.add("borderColor", "rgba(30, 58, 138, 1)");
-    }
-    /** Sets `borderColor: "rgba(254, 242, 242, 1)"`. */
-    get bcRed50() {
-        return this.add("borderColor", "rgba(254, 242, 242, 1)");
-    }
-    /** Sets `borderColor: "rgba(254, 226, 226, 1)"`. */
-    get bcRed100() {
-        return this.add("borderColor", "rgba(254, 226, 226, 1)");
-    }
-    /** Sets `borderColor: "rgba(254, 202, 202, 1)"`. */
-    get bcRed200() {
-        return this.add("borderColor", "rgba(254, 202, 202, 1)");
-    }
-    /** Sets `borderColor: "rgba(252, 165, 165, 1)"`. */
-    get bcRed300() {
-        return this.add("borderColor", "rgba(252, 165, 165, 1)");
-    }
-    /** Sets `borderColor: "rgba(248, 113, 113, 1)"`. */
-    get bcRed400() {
-        return this.add("borderColor", "rgba(248, 113, 113, 1)");
-    }
-    /** Sets `borderColor: "rgba(239, 68, 68, 1)"`. */
-    get bcRed500() {
-        return this.add("borderColor", "rgba(239, 68, 68, 1)");
-    }
-    /** Sets `borderColor: "rgba(220, 38, 38, 1)"`. */
-    get bcRed600() {
-        return this.add("borderColor", "rgba(220, 38, 38, 1)");
-    }
-    /** Sets `borderColor: "rgba(185, 28, 28, 1)"`. */
-    get bcRed700() {
-        return this.add("borderColor", "rgba(185, 28, 28, 1)");
-    }
-    /** Sets `borderColor: "rgba(153, 27, 27, 1)"`. */
-    get bcRed800() {
-        return this.add("borderColor", "rgba(153, 27, 27, 1)");
-    }
-    /** Sets `borderColor: "rgba(127, 29, 29, 1)"`. */
-    get bcRed900() {
-        return this.add("borderColor", "rgba(127, 29, 29, 1)");
-    }
-    /** Sets `borderColor: "rgba(254, 252, 232, 1)"`. */
-    get bcYellow50() {
-        return this.add("borderColor", "rgba(254, 252, 232, 1)");
-    }
-    /** Sets `borderColor: "rgba(254, 249, 195, 1)"`. */
-    get bcYellow100() {
-        return this.add("borderColor", "rgba(254, 249, 195, 1)");
-    }
-    /** Sets `borderColor: "rgba(254, 240, 138, 1)"`. */
-    get bcYellow200() {
-        return this.add("borderColor", "rgba(254, 240, 138, 1)");
-    }
-    /** Sets `borderColor: "rgba(253, 224, 71, 1)"`. */
-    get bcYellow300() {
-        return this.add("borderColor", "rgba(253, 224, 71, 1)");
-    }
-    /** Sets `borderColor: "rgba(250, 204, 21, 1)"`. */
-    get bcYellow400() {
-        return this.add("borderColor", "rgba(250, 204, 21, 1)");
-    }
-    /** Sets `borderColor: "rgba(234, 179, 8, 1)"`. */
-    get bcYellow500() {
-        return this.add("borderColor", "rgba(234, 179, 8, 1)");
-    }
-    /** Sets `borderColor: "rgba(202, 138, 4, 1)"`. */
-    get bcYellow600() {
-        return this.add("borderColor", "rgba(202, 138, 4, 1)");
-    }
-    /** Sets `borderColor: "rgba(161, 98, 7, 1)"`. */
-    get bcYellow700() {
-        return this.add("borderColor", "rgba(161, 98, 7, 1)");
-    }
-    /** Sets `borderColor: "rgba(133, 77, 14, 1)"`. */
-    get bcYellow800() {
-        return this.add("borderColor", "rgba(133, 77, 14, 1)");
-    }
-    /** Sets `borderColor: "rgba(113, 63, 18, 1)"`. */
-    get bcYellow900() {
-        return this.add("borderColor", "rgba(113, 63, 18, 1)");
-    }
-    /** Sets `borderColor: "rgba(236, 253, 245, 1)"`. */
-    get bcGreen50() {
-        return this.add("borderColor", "rgba(236, 253, 245, 1)");
-    }
-    /** Sets `borderColor: "rgba(209, 250, 229, 1)"`. */
-    get bcGreen100() {
-        return this.add("borderColor", "rgba(209, 250, 229, 1)");
-    }
-    /** Sets `borderColor: "rgba(167, 243, 208, 1)"`. */
-    get bcGreen200() {
-        return this.add("borderColor", "rgba(167, 243, 208, 1)");
-    }
-    /** Sets `borderColor: "rgba(110, 231, 183, 1)"`. */
-    get bcGreen300() {
-        return this.add("borderColor", "rgba(110, 231, 183, 1)");
-    }
-    /** Sets `borderColor: "rgba(52, 211, 153, 1)"`. */
-    get bcGreen400() {
-        return this.add("borderColor", "rgba(52, 211, 153, 1)");
-    }
-    /** Sets `borderColor: "rgba(16, 185, 129, 1)"`. */
-    get bcGreen500() {
-        return this.add("borderColor", "rgba(16, 185, 129, 1)");
-    }
-    /** Sets `borderColor: "rgba(5, 150, 105, 1)"`. */
-    get bcGreen600() {
-        return this.add("borderColor", "rgba(5, 150, 105, 1)");
-    }
-    /** Sets `borderColor: "rgba(4, 120, 87, 1)"`. */
-    get bcGreen700() {
-        return this.add("borderColor", "rgba(4, 120, 87, 1)");
-    }
-    /** Sets `borderColor: "rgba(6, 95, 70, 1)"`. */
-    get bcGreen800() {
-        return this.add("borderColor", "rgba(6, 95, 70, 1)");
-    }
-    /** Sets `borderColor: "rgba(6, 78, 59, 1)"`. */
-    get bcGreen900() {
-        return this.add("borderColor", "rgba(6, 78, 59, 1)");
-    }
-    /** Sets `borderColor: "rgba(245, 243, 255, 1)"`. */
-    get bcPurple50() {
-        return this.add("borderColor", "rgba(245, 243, 255, 1)");
-    }
-    /** Sets `borderColor: "rgba(237, 233, 254, 1)"`. */
-    get bcPurple100() {
-        return this.add("borderColor", "rgba(237, 233, 254, 1)");
-    }
-    /** Sets `borderColor: "rgba(221, 214, 254, 1)"`. */
-    get bcPurple200() {
-        return this.add("borderColor", "rgba(221, 214, 254, 1)");
-    }
-    /** Sets `borderColor: "rgba(196, 181, 253, 1)"`. */
-    get bcPurple300() {
-        return this.add("borderColor", "rgba(196, 181, 253, 1)");
-    }
-    /** Sets `borderColor: "rgba(167, 139, 250, 1)"`. */
-    get bcPurple400() {
-        return this.add("borderColor", "rgba(167, 139, 250, 1)");
-    }
-    /** Sets `borderColor: "rgba(139, 92, 246, 1)"`. */
-    get bcPurple500() {
-        return this.add("borderColor", "rgba(139, 92, 246, 1)");
-    }
-    /** Sets `borderColor: "rgba(124, 58, 237, 1)"`. */
-    get bcPurple600() {
-        return this.add("borderColor", "rgba(124, 58, 237, 1)");
-    }
-    /** Sets `borderColor: "rgba(109, 40, 217, 1)"`. */
-    get bcPurple700() {
-        return this.add("borderColor", "rgba(109, 40, 217, 1)");
-    }
-    /** Sets `borderColor: "rgba(91, 33, 182, 1)"`. */
-    get bcPurple800() {
-        return this.add("borderColor", "rgba(91, 33, 182, 1)");
-    }
-    /** Sets `borderColor: "rgba(76, 29, 149, 1)"`. */
-    get bcPurple900() {
-        return this.add("borderColor", "rgba(76, 29, 149, 1)");
-    }
-    /** Sets `borderColor: "rgba(255, 247, 237, 1)"`. */
-    get bcOrange50() {
-        return this.add("borderColor", "rgba(255, 247, 237, 1)");
-    }
-    /** Sets `borderColor: "rgba(255, 237, 213, 1)"`. */
-    get bcOrange100() {
-        return this.add("borderColor", "rgba(255, 237, 213, 1)");
-    }
-    /** Sets `borderColor: "rgba(254, 215, 170, 1)"`. */
-    get bcOrange200() {
-        return this.add("borderColor", "rgba(254, 215, 170, 1)");
-    }
-    /** Sets `borderColor: "rgba(253, 186, 116, 1)"`. */
-    get bcOrange300() {
-        return this.add("borderColor", "rgba(253, 186, 116, 1)");
-    }
-    /** Sets `borderColor: "rgba(251, 146, 60, 1)"`. */
-    get bcOrange400() {
-        return this.add("borderColor", "rgba(251, 146, 60, 1)");
-    }
-    /** Sets `borderColor: "rgba(249, 115, 22, 1)"`. */
-    get bcOrange500() {
-        return this.add("borderColor", "rgba(249, 115, 22, 1)");
-    }
-    /** Sets `borderColor: "rgba(234, 88, 12, 1)"`. */
-    get bcOrange600() {
-        return this.add("borderColor", "rgba(234, 88, 12, 1)");
-    }
-    /** Sets `borderColor: "rgba(194, 65, 12, 1)"`. */
-    get bcOrange700() {
-        return this.add("borderColor", "rgba(194, 65, 12, 1)");
-    }
-    /** Sets `borderColor: "rgba(154, 52, 18, 1)"`. */
-    get bcOrange800() {
-        return this.add("borderColor", "rgba(154, 52, 18, 1)");
-    }
-    /** Sets `borderColor: "rgba(124, 45, 18, 1)"`. */
-    get bcOrange900() {
-        return this.add("borderColor", "rgba(124, 45, 18, 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 bsn() {
-        return this.add("borderStyle", "none");
-    }
-    /** Sets `borderStyle: "solid"`. */
-    get bss() {
-        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 4px 8px rgba(53, 53, 53, 0.08), 0px 2px 16px rgba(53, 53, 53, 0.03);"`. */
-    get bshBasic() {
-        return this.add("boxShadow", "0px 4px 8px rgba(53, 53, 53, 0.08), 0px 2px 16px rgba(53, 53, 53, 0.03);");
-    }
-    /** Sets `boxShadow: "0px 4px 8px rgba(53, 53, 53, 0.1), 0px 2px 24px rgba(53, 53, 53, 0.08);"`. */
-    get bshHover() {
-        return this.add("boxShadow", "0px 4px 8px rgba(53, 53, 53, 0.1), 0px 2px 24px rgba(53, 53, 53, 0.08);");
-    }
-    /** Sets `boxShadow: "0px 0px 0px 2px rgba(255,255,255,1), 0px 0px 0px 4px rgba(29, 78, 216, 1)"`. */
-    get bshFocus() {
-        return this.add("boxShadow", "0px 0px 0px 2px rgba(255,255,255,1), 0px 0px 0px 4px rgba(29, 78, 216, 1)");
-    }
-    /** Sets `boxShadow: "0px 0px 0px 2px rgba(255,255,255,1), 0px 0px 0px 4px rgba(153, 27, 27, 1)"`. */
-    get bshDanger() {
-        return this.add("boxShadow", "0px 0px 0px 2px rgba(255,255,255,1), 0px 0px 0px 4px rgba(153, 27, 27, 1)");
-    }
-    /** Sets `boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04)"`. */
-    get bshModal() {
-        return this.add("boxShadow", "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04)");
-    }
-    /** Sets `boxShadow: value`. */
-    boxShadow(value) {
-        return this.add("boxShadow", value);
-    }
-    // container
-    /** Sets `containerType: "size"`. */
-    get cts() {
-        return this.add("containerType", "size");
-    }
-    /** Sets `containerType: "inline-size"`. */
-    get ctis() {
-        return this.add("containerType", "inline-size");
-    }
-    /** Sets `containerType: "normal"`. */
-    get ctn() {
-        return this.add("containerType", "normal");
-    }
-    /** Sets `containerType: value`. */
-    ct(value) {
-        return this.add("containerType", value);
-    }
-    /** Sets `containerName: value`. */
-    cn(value) {
-        return this.add("containerName", value);
-    }
-    // coordinates
-    /** Sets `top: "0px"`. */
-    get top0() {
-        return this.add("top", "0px");
-    }
-    /** Sets `top: "8px"`. */
-    get top1() {
-        return this.add("top", "8px");
-    }
-    /** Sets `top: "16px"`. */
-    get top2() {
-        return this.add("top", "16px");
-    }
-    /** Sets `top: "24px"`. */
-    get top3() {
-        return this.add("top", "24px");
-    }
-    /** Sets `top: "32px"`. */
-    get top4() {
-        return this.add("top", "32px");
-    }
-    /** Sets `top: "40px"`. */
-    get top5() {
-        return this.add("top", "40px");
-    }
-    /** Sets `top: "48px"`. */
-    get top6() {
-        return this.add("top", "48px");
-    }
-    /** Sets `top: "56px"`. */
-    get top7() {
-        return this.add("top", "56px");
-    }
-    /** Sets `top: "64px"`. */
-    get top8() {
-        return this.add("top", "64px");
-    }
-    /** Sets `top: "v"`. */
-    top(v) {
-        return this.add("top", maybeInc(v));
-    }
-    /** Sets `top: px`. */
-    topPx(px) {
-        return this.add("top", `${px}px`);
-    }
-    /** Sets `right: "0px"`. */
-    get right0() {
-        return this.add("right", "0px");
-    }
-    /** Sets `right: "8px"`. */
-    get right1() {
-        return this.add("right", "8px");
-    }
-    /** Sets `right: "16px"`. */
-    get right2() {
-        return this.add("right", "16px");
-    }
-    /** Sets `right: "24px"`. */
-    get right3() {
-        return this.add("right", "24px");
-    }
-    /** Sets `right: "32px"`. */
-    get right4() {
-        return this.add("right", "32px");
-    }
-    /** Sets `right: "40px"`. */
-    get right5() {
-        return this.add("right", "40px");
-    }
-    /** Sets `right: "48px"`. */
-    get right6() {
-        return this.add("right", "48px");
-    }
-    /** Sets `right: "56px"`. */
-    get right7() {
-        return this.add("right", "56px");
-    }
-    /** Sets `right: "64px"`. */
-    get right8() {
-        return this.add("right", "64px");
-    }
-    /** Sets `right: "v"`. */
-    right(v) {
-        return this.add("right", maybeInc(v));
-    }
-    /** Sets `right: px`. */
-    rightPx(px) {
-        return this.add("right", `${px}px`);
-    }
-    /** Sets `bottom: "0px"`. */
-    get bottom0() {
-        return this.add("bottom", "0px");
-    }
-    /** Sets `bottom: "8px"`. */
-    get bottom1() {
-        return this.add("bottom", "8px");
-    }
-    /** Sets `bottom: "16px"`. */
-    get bottom2() {
-        return this.add("bottom", "16px");
-    }
-    /** Sets `bottom: "24px"`. */
-    get bottom3() {
-        return this.add("bottom", "24px");
-    }
-    /** Sets `bottom: "32px"`. */
-    get bottom4() {
-        return this.add("bottom", "32px");
-    }
-    /** Sets `bottom: "40px"`. */
-    get bottom5() {
-        return this.add("bottom", "40px");
-    }
-    /** Sets `bottom: "48px"`. */
-    get bottom6() {
-        return this.add("bottom", "48px");
-    }
-    /** Sets `bottom: "56px"`. */
-    get bottom7() {
-        return this.add("bottom", "56px");
-    }
-    /** Sets `bottom: "64px"`. */
-    get bottom8() {
-        return this.add("bottom", "64px");
-    }
-    /** Sets `bottom: "v"`. */
-    bottom(v) {
-        return this.add("bottom", maybeInc(v));
-    }
-    /** Sets `bottom: px`. */
-    bottomPx(px) {
-        return this.add("bottom", `${px}px`);
-    }
-    /** Sets `left: "0px"`. */
-    get left0() {
-        return this.add("left", "0px");
-    }
-    /** Sets `left: "8px"`. */
-    get left1() {
-        return this.add("left", "8px");
-    }
-    /** Sets `left: "16px"`. */
-    get left2() {
-        return this.add("left", "16px");
-    }
-    /** Sets `left: "24px"`. */
-    get left3() {
-        return this.add("left", "24px");
-    }
-    /** Sets `left: "32px"`. */
-    get left4() {
-        return this.add("left", "32px");
-    }
-    /** Sets `left: "40px"`. */
-    get left5() {
-        return this.add("left", "40px");
-    }
-    /** Sets `left: "48px"`. */
-    get left6() {
-        return this.add("left", "48px");
-    }
-    /** Sets `left: "56px"`. */
-    get left7() {
-        return this.add("left", "56px");
-    }
-    /** Sets `left: "64px"`. */
-    get left8() {
-        return this.add("left", "64px");
-    }
-    /** Sets `left: "v"`. */
-    left(v) {
-        return this.add("left", maybeInc(v));
-    }
-    /** Sets `left: px`. */
-    leftPx(px) {
-        return this.add("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 `justifySelf: "auto"`. */
-    get jsa() {
-        return this.add("justifySelf", "auto");
-    }
-    /** Sets `justifySelf: "center"`. */
-    get jsc() {
-        return this.add("justifySelf", "center");
-    }
-    /** Sets `justifySelf: "start"`. */
-    get jss() {
-        return this.add("justifySelf", "start");
-    }
-    /** Sets `justifySelf: "end"`. */
-    get jse() {
-        return this.add("justifySelf", "end");
-    }
-    /** Sets `justifySelf: value`. */
-    js(value) {
-        return this.add("justifySelf", 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: "start"`. */
-    get ais() {
-        return this.add("alignItems", "start");
-    }
-    /** Sets `alignItems: "end"`. */
-    get aie() {
-        return this.add("alignItems", "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 aiStretch() {
-        return this.add("alignItems", "stretch");
-    }
-    /** Sets `alignItems: value`. */
-    ai(value) {
-        return this.add("alignItems", value);
-    }
-    /** Sets `placeSelf: "auto"`. */
-    get psa() {
-        return this.add("placeSelf", "auto");
-    }
-    /** Sets `placeSelf: "center"`. */
-    get psc() {
-        return this.add("placeSelf", "center");
-    }
-    /** Sets `placeSelf: "start"`. */
-    get pss() {
-        return this.add("placeSelf", "start");
-    }
-    /** Sets `placeSelf: "end"`. */
-    get pse() {
-        return this.add("placeSelf", "end");
-    }
-    /** Sets `placeSelf: "flex-start"`. */
-    get psfs() {
-        return this.add("placeSelf", "flex-start");
-    }
-    /** Sets `placeSelf: "flex-end"`. */
-    get psfe() {
-        return this.add("placeSelf", "flex-end");
-    }
-    /** Sets `placeSelf: "stretch"`. */
-    get psStretch() {
-        return this.add("placeSelf", "stretch");
-    }
-    /** Sets `placeSelf: value`. */
-    ps(value) {
-        return this.add("placeSelf", value);
-    }
-    /** Sets `placeContent: "center"`. */
-    get pcc() {
-        return this.add("placeContent", "center");
-    }
-    /** Sets `placeContent: "start"`. */
-    get pcs() {
-        return this.add("placeContent", "start");
-    }
-    /** Sets `placeContent: "end"`. */
-    get pce() {
-        return this.add("placeContent", "end");
-    }
-    /** Sets `placeContent: "space-between"`. */
-    get pcsb() {
-        return this.add("placeContent", "space-between");
-    }
-    /** Sets `placeContent: "space-around"`. */
-    get pcsa() {
-        return this.add("placeContent", "space-around");
-    }
-    /** Sets `placeContent: "space-evenly"`. */
-    get pcse() {
-        return this.add("placeContent", "space-evenly");
-    }
-    /** Sets `placeContent: "baseline"`. */
-    get pcb() {
-        return this.add("placeContent", "baseline");
-    }
-    /** Sets `placeContent: "stretch"`. */
-    get pcStretch() {
-        return this.add("placeContent", "stretch");
-    }
-    /** Sets `placeContent: value`. */
-    pc(value) {
-        return this.add("placeContent", value);
-    }
-    /** Sets `placeItems: "center"`. */
-    get pic() {
-        return this.add("placeItems", "center");
-    }
-    /** Sets `placeItems: "start"`. */
-    get pis() {
-        return this.add("placeItems", "start");
-    }
-    /** Sets `placeItems: "end"`. */
-    get pie() {
-        return this.add("placeItems", "end");
-    }
-    /** Sets `placeItems: "space-between"`. */
-    get pisb() {
-        return this.add("placeItems", "space-between");
-    }
-    /** Sets `placeItems: "space-around"`. */
-    get pisa() {
-        return this.add("placeItems", "space-around");
-    }
-    /** Sets `placeItems: "space-evenly"`. */
-    get pise() {
-        return this.add("placeItems", "space-evenly");
-    }
-    /** Sets `placeItems: "baseline"`. */
-    get pib() {
-        return this.add("placeItems", "baseline");
-    }
-    /** Sets `placeItems: "stretch"`. */
-    get piStretch() {
-        return this.add("placeItems", "stretch");
-    }
-    /** Sets `placeItems: value`. */
-    pi(value) {
-        return this.add("placeItems", 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 `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);
-    }
-    /** Sets `flexWrap: "wrap"`. */
-    get fww() {
-        return this.add("flexWrap", "wrap");
-    }
-    /** Sets `flexWrap: "wrap-reverse"`. */
-    get fwr() {
-        return this.add("flexWrap", "wrap-reverse");
-    }
-    /** Sets `flexWrap: "nowrap"`. */
-    get fwnw() {
-        return this.add("flexWrap", "nowrap");
-    }
-    /** Sets `flexWrap: value`. */
-    flexWrap(value) {
-        return this.add("flexWrap", value);
-    }
-    /** Sets `order: value`. */
-    order(value) {
-        return this.add("order", 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 fwn() {
-        return this.add("fontWeight", "normal");
-    }
-    /** Sets `fontWeight: "bold"`. */
-    get fwb() {
-        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 `gridAutoRows: value`. */
-    gar(value) {
-        return this.add("gridAutoRows", value);
-    }
-    /** Sets `gridAutoColumns: value`. */
-    gac(value) {
-        return this.add("gridAutoColumns", value);
-    }
-    /** Sets `gap: "0px"`. */
-    get gap0() {
-        return this.add("gap", "0px");
-    }
-    /** Sets `gap: "8px"`. */
-    get gap1() {
-        return this.add("gap", "8px");
-    }
-    /** Sets `gap: "16px"`. */
-    get gap2() {
-        return this.add("gap", "16px");
-    }
-    /** Sets `gap: "24px"`. */
-    get gap3() {
-        return this.add("gap", "24px");
-    }
-    /** Sets `gap: "32px"`. */
-    get gap4() {
-        return this.add("gap", "32px");
-    }
-    /** Sets `gap: "40px"`. */
-    get gap5() {
-        return this.add("gap", "40px");
-    }
-    /** Sets `gap: "48px"`. */
-    get gap6() {
-        return this.add("gap", "48px");
-    }
-    /** Sets `gap: "56px"`. */
-    get gap7() {
-        return this.add("gap", "56px");
-    }
-    /** Sets `gap: "64px"`. */
-    get gap8() {
-        return this.add("gap", "64px");
-    }
-    /** Sets `gap: "v"`. */
-    gap(v) {
-        return this.add("gap", maybeInc(v));
-    }
-    /** Sets `gap: px`. */
-    gapPx(px) {
-        return this.add("gap", `${px}px`);
-    }
-    /** Sets `rowGap: "0px"`. */
-    get rg0() {
-        return this.add("rowGap", "0px");
-    }
-    /** Sets `rowGap: "8px"`. */
-    get rg1() {
-        return this.add("rowGap", "8px");
-    }
-    /** Sets `rowGap: "16px"`. */
-    get rg2() {
-        return this.add("rowGap", "16px");
-    }
-    /** Sets `rowGap: "24px"`. */
-    get rg3() {
-        return this.add("rowGap", "24px");
-    }
-    /** Sets `rowGap: "32px"`. */
-    get rg4() {
-        return this.add("rowGap", "32px");
-    }
-    /** Sets `rowGap: "40px"`. */
-    get rg5() {
-        return this.add("rowGap", "40px");
-    }
-    /** Sets `rowGap: "48px"`. */
-    get rg6() {
-        return this.add("rowGap", "48px");
-    }
-    /** Sets `rowGap: "56px"`. */
-    get rg7() {
-        return this.add("rowGap", "56px");
-    }
-    /** Sets `rowGap: "64px"`. */
-    get rg8() {
-        return this.add("rowGap", "64px");
-    }
-    /** Sets `rowGap: "v"`. */
-    rg(v) {
-        return this.add("rowGap", maybeInc(v));
-    }
-    /** Sets `rowGap: px`. */
-    rgPx(px) {
-        return this.add("rowGap", `${px}px`);
-    }
-    /** Sets `columnGap: "0px"`. */
-    get cg0() {
-        return this.add("columnGap", "0px");
-    }
-    /** Sets `columnGap: "8px"`. */
-    get cg1() {
-        return this.add("columnGap", "8px");
-    }
-    /** Sets `columnGap: "16px"`. */
-    get cg2() {
-        return this.add("columnGap", "16px");
-    }
-    /** Sets `columnGap: "24px"`. */
-    get cg3() {
-        return this.add("columnGap", "24px");
-    }
-    /** Sets `columnGap: "32px"`. */
-    get cg4() {
-        return this.add("columnGap", "32px");
-    }
-    /** Sets `columnGap: "40px"`. */
-    get cg5() {
-        return this.add("columnGap", "40px");
-    }
-    /** Sets `columnGap: "48px"`. */
-    get cg6() {
-        return this.add("columnGap", "48px");
-    }
-    /** Sets `columnGap: "56px"`. */
-    get cg7() {
-        return this.add("columnGap", "56px");
-    }
-    /** Sets `columnGap: "64px"`. */
-    get cg8() {
-        return this.add("columnGap", "64px");
-    }
-    /** Sets `columnGap: "v"`. */
-    cg(v) {
-        return this.add("columnGap", maybeInc(v));
-    }
-    /** Sets `columnGap: px`. */
-    cgPx(px) {
-        return this.add("columnGap", `${px}px`);
-    }
-    // height
-    /** Sets `height: "0px"`. */
-    get h0() {
-        return this.add("height", "0px");
-    }
-    /** Sets `height: "8px"`. */
-    get h1() {
-        return this.add("height", "8px");
-    }
-    /** Sets `height: "16px"`. */
-    get h2() {
-        return this.add("height", "16px");
-    }
-    /** Sets `height: "24px"`. */
-    get h3() {
-        return this.add("height", "24px");
-    }
-    /** Sets `height: "32px"`. */
-    get h4() {
-        return this.add("height", "32px");
-    }
-    /** Sets `height: "40px"`. */
-    get h5() {
-        return this.add("height", "40px");
-    }
-    /** Sets `height: "48px"`. */
-    get h6() {
-        return this.add("height", "48px");
-    }
-    /** Sets `height: "56px"`. */
-    get h7() {
-        return this.add("height", "56px");
-    }
-    /** Sets `height: "64px"`. */
-    get h8() {
-        return this.add("height", "64px");
-    }
-    /** Sets `height: "auto"`. */
-    get ha() {
-        return this.add("height", "auto");
-    }
-    /** Sets `height: "v"`. */
-    h(v) {
-        return this.add("height", maybeInc(v));
-    }
-    /** Sets `height: px`. */
-    hPx(px) {
-        return this.add("height", `${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 `height: "fit-content"`. */
-    get hfc() {
-        return this.add("height", "fit-content");
-    }
-    /** Sets `height: "max-content"`. */
-    get hmaxc() {
-        return this.add("height", "max-content");
-    }
-    /** Sets `height: "min-content"`. */
-    get hminc() {
-        return this.add("height", "min-content");
-    }
-    /** 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"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 1`. */
-    get lineClamp1() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 1);
-    }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 2`. */
-    get lineClamp2() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 2);
-    }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 3`. */
-    get lineClamp3() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 3);
-    }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 4`. */
-    get lineClamp4() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 4);
-    }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 5`. */
-    get lineClamp5() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 5);
-    }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 6`. */
-    get lineClamp6() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 6);
-    }
-    /** Sets `WebkitLineClamp: "unset"`. */
-    get lineClampNone() {
-        return this.add("WebkitLineClamp", "unset");
-    }
-    /** Sets `WebkitLineClamp: value`. */
-    lineClamp(value) {
-        return this.add("WebkitLineClamp", value).add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
-    }
-    // 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);
-    }
-    // opacity
-    /** Sets `opacity: "0"`. */
-    get o0() {
-        return this.add("opacity", "0");
-    }
-    /** Sets `opacity: "0.25"`. */
-    get o25() {
-        return this.add("opacity", "0.25");
-    }
-    /** Sets `opacity: "0.5"`. */
-    get o50() {
-        return this.add("opacity", "0.5");
-    }
-    /** Sets `opacity: "0.75"`. */
-    get o75() {
-        return this.add("opacity", "0.75");
-    }
-    /** Sets `opacity: "1"`. */
-    get o100() {
-        return this.add("opacity", "1");
-    }
-    /** Sets `opacity: value`. */
-    o(value) {
-        return this.add("opacity", 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 ov() {
-        return this.add("overflow", "visible");
-    }
-    /** Sets `overflow: "hidden"`. */
-    get oh() {
-        return this.add("overflow", "hidden");
-    }
-    /** Sets `overflow: "scroll"`. */
-    get os() {
-        return this.add("overflow", "scroll");
-    }
-    /** Sets `overflow: "auto"`. */
-    get oa() {
-        return this.add("overflow", "auto");
-    }
-    /** Sets `overflow: value`. */
-    overflow(value) {
-        return this.add("overflow", value);
-    }
-    /** Sets `overflowY: "visible"`. */
-    get oyv() {
-        return this.add("overflowY", "visible");
-    }
-    /** Sets `overflowY: "hidden"`. */
-    get oyh() {
-        return this.add("overflowY", "hidden");
-    }
-    /** Sets `overflowY: "scroll"`. */
-    get oys() {
-        return this.add("overflowY", "scroll");
-    }
-    /** Sets `overflowY: "auto"`. */
-    get oya() {
-        return this.add("overflowY", "auto");
-    }
-    /** Sets `overflowY: value`. */
-    overflowY(value) {
-        return this.add("overflowY", value);
-    }
-    /** Sets `overflowX: "visible"`. */
-    get oxv() {
-        return this.add("overflowX", "visible");
-    }
-    /** Sets `overflowX: "hidden"`. */
-    get oxh() {
-        return this.add("overflowX", "hidden");
-    }
-    /** Sets `overflowX: "scroll"`. */
-    get oxs() {
-        return this.add("overflowX", "scroll");
-    }
-    /** Sets `overflowX: "auto"`. */
-    get oxa() {
-        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(255,255,255,1)"`. */
-    get white() {
-        return this.add("color", "rgba(255,255,255,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(239, 246, 255, 1)"`. */
-    get blue50() {
-        return this.add("color", "rgba(239, 246, 255, 1)");
-    }
-    /** Sets `color: "rgba(219, 234, 254, 1)"`. */
-    get blue100() {
-        return this.add("color", "rgba(219, 234, 254, 1)");
-    }
-    /** Sets `color: "rgba(191, 219, 254, 1)"`. */
-    get blue200() {
-        return this.add("color", "rgba(191, 219, 254, 1)");
-    }
-    /** Sets `color: "rgba(147, 197, 253, 1)"`. */
-    get blue300() {
-        return this.add("color", "rgba(147, 197, 253, 1)");
-    }
-    /** Sets `color: "rgba(96, 165, 250, 1)"`. */
-    get blue400() {
-        return this.add("color", "rgba(96, 165, 250, 1)");
-    }
-    /** Sets `color: "rgba(59, 130, 246, 1)"`. */
-    get blue500() {
-        return this.add("color", "rgba(59, 130, 246, 1)");
-    }
-    /** Sets `color: "rgba(37, 99, 235, 1)"`. */
-    get blue600() {
-        return this.add("color", "rgba(37, 99, 235, 1)");
-    }
-    /** Sets `color: "rgba(29, 78, 216, 1)"`. */
-    get blue700() {
-        return this.add("color", "rgba(29, 78, 216, 1)");
-    }
-    /** Sets `color: "rgba(30, 64, 175, 1)"`. */
-    get blue800() {
-        return this.add("color", "rgba(30, 64, 175, 1)");
-    }
-    /** Sets `color: "rgba(30, 58, 138, 1)"`. */
-    get blue900() {
-        return this.add("color", "rgba(30, 58, 138, 1)");
-    }
-    /** Sets `color: "rgba(254, 242, 242, 1)"`. */
-    get red50() {
-        return this.add("color", "rgba(254, 242, 242, 1)");
-    }
-    /** Sets `color: "rgba(254, 226, 226, 1)"`. */
-    get red100() {
-        return this.add("color", "rgba(254, 226, 226, 1)");
-    }
-    /** Sets `color: "rgba(254, 202, 202, 1)"`. */
-    get red200() {
-        return this.add("color", "rgba(254, 202, 202, 1)");
-    }
-    /** Sets `color: "rgba(252, 165, 165, 1)"`. */
-    get red300() {
-        return this.add("color", "rgba(252, 165, 165, 1)");
-    }
-    /** Sets `color: "rgba(248, 113, 113, 1)"`. */
-    get red400() {
-        return this.add("color", "rgba(248, 113, 113, 1)");
-    }
-    /** Sets `color: "rgba(239, 68, 68, 1)"`. */
-    get red500() {
-        return this.add("color", "rgba(239, 68, 68, 1)");
-    }
-    /** Sets `color: "rgba(220, 38, 38, 1)"`. */
-    get red600() {
-        return this.add("color", "rgba(220, 38, 38, 1)");
-    }
-    /** Sets `color: "rgba(185, 28, 28, 1)"`. */
-    get red700() {
-        return this.add("color", "rgba(185, 28, 28, 1)");
-    }
-    /** Sets `color: "rgba(153, 27, 27, 1)"`. */
-    get red800() {
-        return this.add("color", "rgba(153, 27, 27, 1)");
-    }
-    /** Sets `color: "rgba(127, 29, 29, 1)"`. */
-    get red900() {
-        return this.add("color", "rgba(127, 29, 29, 1)");
-    }
-    /** Sets `color: "rgba(254, 252, 232, 1)"`. */
-    get yellow50() {
-        return this.add("color", "rgba(254, 252, 232, 1)");
-    }
-    /** Sets `color: "rgba(254, 249, 195, 1)"`. */
-    get yellow100() {
-        return this.add("color", "rgba(254, 249, 195, 1)");
-    }
-    /** Sets `color: "rgba(254, 240, 138, 1)"`. */
-    get yellow200() {
-        return this.add("color", "rgba(254, 240, 138, 1)");
-    }
-    /** Sets `color: "rgba(253, 224, 71, 1)"`. */
-    get yellow300() {
-        return this.add("color", "rgba(253, 224, 71, 1)");
-    }
-    /** Sets `color: "rgba(250, 204, 21, 1)"`. */
-    get yellow400() {
-        return this.add("color", "rgba(250, 204, 21, 1)");
-    }
-    /** Sets `color: "rgba(234, 179, 8, 1)"`. */
-    get yellow500() {
-        return this.add("color", "rgba(234, 179, 8, 1)");
-    }
-    /** Sets `color: "rgba(202, 138, 4, 1)"`. */
-    get yellow600() {
-        return this.add("color", "rgba(202, 138, 4, 1)");
-    }
-    /** Sets `color: "rgba(161, 98, 7, 1)"`. */
-    get yellow700() {
-        return this.add("color", "rgba(161, 98, 7, 1)");
-    }
-    /** Sets `color: "rgba(133, 77, 14, 1)"`. */
-    get yellow800() {
-        return this.add("color", "rgba(133, 77, 14, 1)");
-    }
-    /** Sets `color: "rgba(113, 63, 18, 1)"`. */
-    get yellow900() {
-        return this.add("color", "rgba(113, 63, 18, 1)");
-    }
-    /** Sets `color: "rgba(236, 253, 245, 1)"`. */
-    get green50() {
-        return this.add("color", "rgba(236, 253, 245, 1)");
-    }
-    /** Sets `color: "rgba(209, 250, 229, 1)"`. */
-    get green100() {
-        return this.add("color", "rgba(209, 250, 229, 1)");
-    }
-    /** Sets `color: "rgba(167, 243, 208, 1)"`. */
-    get green200() {
-        return this.add("color", "rgba(167, 243, 208, 1)");
-    }
-    /** Sets `color: "rgba(110, 231, 183, 1)"`. */
-    get green300() {
-        return this.add("color", "rgba(110, 231, 183, 1)");
-    }
-    /** Sets `color: "rgba(52, 211, 153, 1)"`. */
-    get green400() {
-        return this.add("color", "rgba(52, 211, 153, 1)");
-    }
-    /** Sets `color: "rgba(16, 185, 129, 1)"`. */
-    get green500() {
-        return this.add("color", "rgba(16, 185, 129, 1)");
-    }
-    /** Sets `color: "rgba(5, 150, 105, 1)"`. */
-    get green600() {
-        return this.add("color", "rgba(5, 150, 105, 1)");
-    }
-    /** Sets `color: "rgba(4, 120, 87, 1)"`. */
-    get green700() {
-        return this.add("color", "rgba(4, 120, 87, 1)");
-    }
-    /** Sets `color: "rgba(6, 95, 70, 1)"`. */
-    get green800() {
-        return this.add("color", "rgba(6, 95, 70, 1)");
-    }
-    /** Sets `color: "rgba(6, 78, 59, 1)"`. */
-    get green900() {
-        return this.add("color", "rgba(6, 78, 59, 1)");
-    }
-    /** Sets `color: "rgba(245, 243, 255, 1)"`. */
-    get purple50() {
-        return this.add("color", "rgba(245, 243, 255, 1)");
-    }
-    /** Sets `color: "rgba(237, 233, 254, 1)"`. */
-    get purple100() {
-        return this.add("color", "rgba(237, 233, 254, 1)");
-    }
-    /** Sets `color: "rgba(221, 214, 254, 1)"`. */
-    get purple200() {
-        return this.add("color", "rgba(221, 214, 254, 1)");
-    }
-    /** Sets `color: "rgba(196, 181, 253, 1)"`. */
-    get purple300() {
-        return this.add("color", "rgba(196, 181, 253, 1)");
-    }
-    /** Sets `color: "rgba(167, 139, 250, 1)"`. */
-    get purple400() {
-        return this.add("color", "rgba(167, 139, 250, 1)");
-    }
-    /** Sets `color: "rgba(139, 92, 246, 1)"`. */
-    get purple500() {
-        return this.add("color", "rgba(139, 92, 246, 1)");
-    }
-    /** Sets `color: "rgba(124, 58, 237, 1)"`. */
-    get purple600() {
-        return this.add("color", "rgba(124, 58, 237, 1)");
-    }
-    /** Sets `color: "rgba(109, 40, 217, 1)"`. */
-    get purple700() {
-        return this.add("color", "rgba(109, 40, 217, 1)");
-    }
-    /** Sets `color: "rgba(91, 33, 182, 1)"`. */
-    get purple800() {
-        return this.add("color", "rgba(91, 33, 182, 1)");
-    }
-    /** Sets `color: "rgba(76, 29, 149, 1)"`. */
-    get purple900() {
-        return this.add("color", "rgba(76, 29, 149, 1)");
-    }
-    /** Sets `color: "rgba(255, 247, 237, 1)"`. */
-    get orange50() {
-        return this.add("color", "rgba(255, 247, 237, 1)");
-    }
-    /** Sets `color: "rgba(255, 237, 213, 1)"`. */
-    get orange100() {
-        return this.add("color", "rgba(255, 237, 213, 1)");
-    }
-    /** Sets `color: "rgba(254, 215, 170, 1)"`. */
-    get orange200() {
-        return this.add("color", "rgba(254, 215, 170, 1)");
-    }
-    /** Sets `color: "rgba(253, 186, 116, 1)"`. */
-    get orange300() {
-        return this.add("color", "rgba(253, 186, 116, 1)");
-    }
-    /** Sets `color: "rgba(251, 146, 60, 1)"`. */
-    get orange400() {
-        return this.add("color", "rgba(251, 146, 60, 1)");
-    }
-    /** Sets `color: "rgba(249, 115, 22, 1)"`. */
-    get orange500() {
-        return this.add("color", "rgba(249, 115, 22, 1)");
-    }
-    /** Sets `color: "rgba(234, 88, 12, 1)"`. */
-    get orange600() {
-        return this.add("color", "rgba(234, 88, 12, 1)");
-    }
-    /** Sets `color: "rgba(194, 65, 12, 1)"`. */
-    get orange700() {
-        return this.add("color", "rgba(194, 65, 12, 1)");
-    }
-    /** Sets `color: "rgba(154, 52, 18, 1)"`. */
-    get orange800() {
-        return this.add("color", "rgba(154, 52, 18, 1)");
-    }
-    /** Sets `color: "rgba(124, 45, 18, 1)"`. */
-    get orange900() {
-        return this.add("color", "rgba(124, 45, 18, 1)");
-    }
-    /** Sets `color: value`. */
-    color(value) {
-        return this.add("color", value);
-    }
-    /** Sets `backgroundColor: "rgba(255,255,255,1)"`. */
-    get bgWhite() {
-        return this.add("backgroundColor", "rgba(255,255,255,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(239, 246, 255, 1)"`. */
-    get bgBlue50() {
-        return this.add("backgroundColor", "rgba(239, 246, 255, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(219, 234, 254, 1)"`. */
-    get bgBlue100() {
-        return this.add("backgroundColor", "rgba(219, 234, 254, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(191, 219, 254, 1)"`. */
-    get bgBlue200() {
-        return this.add("backgroundColor", "rgba(191, 219, 254, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(147, 197, 253, 1)"`. */
-    get bgBlue300() {
-        return this.add("backgroundColor", "rgba(147, 197, 253, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(96, 165, 250, 1)"`. */
-    get bgBlue400() {
-        return this.add("backgroundColor", "rgba(96, 165, 250, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(59, 130, 246, 1)"`. */
-    get bgBlue500() {
-        return this.add("backgroundColor", "rgba(59, 130, 246, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(37, 99, 235, 1)"`. */
-    get bgBlue600() {
-        return this.add("backgroundColor", "rgba(37, 99, 235, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(29, 78, 216, 1)"`. */
-    get bgBlue700() {
-        return this.add("backgroundColor", "rgba(29, 78, 216, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(30, 64, 175, 1)"`. */
-    get bgBlue800() {
-        return this.add("backgroundColor", "rgba(30, 64, 175, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(30, 58, 138, 1)"`. */
-    get bgBlue900() {
-        return this.add("backgroundColor", "rgba(30, 58, 138, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(254, 242, 242, 1)"`. */
-    get bgRed50() {
-        return this.add("backgroundColor", "rgba(254, 242, 242, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(254, 226, 226, 1)"`. */
-    get bgRed100() {
-        return this.add("backgroundColor", "rgba(254, 226, 226, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(254, 202, 202, 1)"`. */
-    get bgRed200() {
-        return this.add("backgroundColor", "rgba(254, 202, 202, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(252, 165, 165, 1)"`. */
-    get bgRed300() {
-        return this.add("backgroundColor", "rgba(252, 165, 165, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(248, 113, 113, 1)"`. */
-    get bgRed400() {
-        return this.add("backgroundColor", "rgba(248, 113, 113, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(239, 68, 68, 1)"`. */
-    get bgRed500() {
-        return this.add("backgroundColor", "rgba(239, 68, 68, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(220, 38, 38, 1)"`. */
-    get bgRed600() {
-        return this.add("backgroundColor", "rgba(220, 38, 38, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(185, 28, 28, 1)"`. */
-    get bgRed700() {
-        return this.add("backgroundColor", "rgba(185, 28, 28, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(153, 27, 27, 1)"`. */
-    get bgRed800() {
-        return this.add("backgroundColor", "rgba(153, 27, 27, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(127, 29, 29, 1)"`. */
-    get bgRed900() {
-        return this.add("backgroundColor", "rgba(127, 29, 29, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(254, 252, 232, 1)"`. */
-    get bgYellow50() {
-        return this.add("backgroundColor", "rgba(254, 252, 232, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(254, 249, 195, 1)"`. */
-    get bgYellow100() {
-        return this.add("backgroundColor", "rgba(254, 249, 195, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(254, 240, 138, 1)"`. */
-    get bgYellow200() {
-        return this.add("backgroundColor", "rgba(254, 240, 138, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(253, 224, 71, 1)"`. */
-    get bgYellow300() {
-        return this.add("backgroundColor", "rgba(253, 224, 71, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(250, 204, 21, 1)"`. */
-    get bgYellow400() {
-        return this.add("backgroundColor", "rgba(250, 204, 21, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(234, 179, 8, 1)"`. */
-    get bgYellow500() {
-        return this.add("backgroundColor", "rgba(234, 179, 8, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(202, 138, 4, 1)"`. */
-    get bgYellow600() {
-        return this.add("backgroundColor", "rgba(202, 138, 4, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(161, 98, 7, 1)"`. */
-    get bgYellow700() {
-        return this.add("backgroundColor", "rgba(161, 98, 7, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(133, 77, 14, 1)"`. */
-    get bgYellow800() {
-        return this.add("backgroundColor", "rgba(133, 77, 14, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(113, 63, 18, 1)"`. */
-    get bgYellow900() {
-        return this.add("backgroundColor", "rgba(113, 63, 18, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(236, 253, 245, 1)"`. */
-    get bgGreen50() {
-        return this.add("backgroundColor", "rgba(236, 253, 245, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(209, 250, 229, 1)"`. */
-    get bgGreen100() {
-        return this.add("backgroundColor", "rgba(209, 250, 229, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(167, 243, 208, 1)"`. */
-    get bgGreen200() {
-        return this.add("backgroundColor", "rgba(167, 243, 208, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(110, 231, 183, 1)"`. */
-    get bgGreen300() {
-        return this.add("backgroundColor", "rgba(110, 231, 183, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(52, 211, 153, 1)"`. */
-    get bgGreen400() {
-        return this.add("backgroundColor", "rgba(52, 211, 153, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(16, 185, 129, 1)"`. */
-    get bgGreen500() {
-        return this.add("backgroundColor", "rgba(16, 185, 129, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(5, 150, 105, 1)"`. */
-    get bgGreen600() {
-        return this.add("backgroundColor", "rgba(5, 150, 105, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(4, 120, 87, 1)"`. */
-    get bgGreen700() {
-        return this.add("backgroundColor", "rgba(4, 120, 87, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(6, 95, 70, 1)"`. */
-    get bgGreen800() {
-        return this.add("backgroundColor", "rgba(6, 95, 70, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(6, 78, 59, 1)"`. */
-    get bgGreen900() {
-        return this.add("backgroundColor", "rgba(6, 78, 59, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(245, 243, 255, 1)"`. */
-    get bgPurple50() {
-        return this.add("backgroundColor", "rgba(245, 243, 255, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(237, 233, 254, 1)"`. */
-    get bgPurple100() {
-        return this.add("backgroundColor", "rgba(237, 233, 254, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(221, 214, 254, 1)"`. */
-    get bgPurple200() {
-        return this.add("backgroundColor", "rgba(221, 214, 254, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(196, 181, 253, 1)"`. */
-    get bgPurple300() {
-        return this.add("backgroundColor", "rgba(196, 181, 253, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(167, 139, 250, 1)"`. */
-    get bgPurple400() {
-        return this.add("backgroundColor", "rgba(167, 139, 250, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(139, 92, 246, 1)"`. */
-    get bgPurple500() {
-        return this.add("backgroundColor", "rgba(139, 92, 246, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(124, 58, 237, 1)"`. */
-    get bgPurple600() {
-        return this.add("backgroundColor", "rgba(124, 58, 237, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(109, 40, 217, 1)"`. */
-    get bgPurple700() {
-        return this.add("backgroundColor", "rgba(109, 40, 217, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(91, 33, 182, 1)"`. */
-    get bgPurple800() {
-        return this.add("backgroundColor", "rgba(91, 33, 182, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(76, 29, 149, 1)"`. */
-    get bgPurple900() {
-        return this.add("backgroundColor", "rgba(76, 29, 149, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(255, 247, 237, 1)"`. */
-    get bgOrange50() {
-        return this.add("backgroundColor", "rgba(255, 247, 237, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(255, 237, 213, 1)"`. */
-    get bgOrange100() {
-        return this.add("backgroundColor", "rgba(255, 237, 213, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(254, 215, 170, 1)"`. */
-    get bgOrange200() {
-        return this.add("backgroundColor", "rgba(254, 215, 170, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(253, 186, 116, 1)"`. */
-    get bgOrange300() {
-        return this.add("backgroundColor", "rgba(253, 186, 116, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(251, 146, 60, 1)"`. */
-    get bgOrange400() {
-        return this.add("backgroundColor", "rgba(251, 146, 60, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(249, 115, 22, 1)"`. */
-    get bgOrange500() {
-        return this.add("backgroundColor", "rgba(249, 115, 22, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(234, 88, 12, 1)"`. */
-    get bgOrange600() {
-        return this.add("backgroundColor", "rgba(234, 88, 12, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(194, 65, 12, 1)"`. */
-    get bgOrange700() {
-        return this.add("backgroundColor", "rgba(194, 65, 12, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(154, 52, 18, 1)"`. */
-    get bgOrange800() {
-        return this.add("backgroundColor", "rgba(154, 52, 18, 1)");
-    }
-    /** Sets `backgroundColor: "rgba(124, 45, 18, 1)"`. */
-    get bgOrange900() {
-        return this.add("backgroundColor", "rgba(124, 45, 18, 1)");
-    }
-    /** Sets `backgroundColor: value`. */
-    bgColor(value) {
-        return this.add("backgroundColor", value);
-    }
-    /** Sets `fill: "rgba(255,255,255,1)"`. */
-    get fWhite() {
-        return this.add("fill", "rgba(255,255,255,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(239, 246, 255, 1)"`. */
-    get fBlue50() {
-        return this.add("fill", "rgba(239, 246, 255, 1)");
-    }
-    /** Sets `fill: "rgba(219, 234, 254, 1)"`. */
-    get fBlue100() {
-        return this.add("fill", "rgba(219, 234, 254, 1)");
-    }
-    /** Sets `fill: "rgba(191, 219, 254, 1)"`. */
-    get fBlue200() {
-        return this.add("fill", "rgba(191, 219, 254, 1)");
-    }
-    /** Sets `fill: "rgba(147, 197, 253, 1)"`. */
-    get fBlue300() {
-        return this.add("fill", "rgba(147, 197, 253, 1)");
-    }
-    /** Sets `fill: "rgba(96, 165, 250, 1)"`. */
-    get fBlue400() {
-        return this.add("fill", "rgba(96, 165, 250, 1)");
-    }
-    /** Sets `fill: "rgba(59, 130, 246, 1)"`. */
-    get fBlue500() {
-        return this.add("fill", "rgba(59, 130, 246, 1)");
-    }
-    /** Sets `fill: "rgba(37, 99, 235, 1)"`. */
-    get fBlue600() {
-        return this.add("fill", "rgba(37, 99, 235, 1)");
-    }
-    /** Sets `fill: "rgba(29, 78, 216, 1)"`. */
-    get fBlue700() {
-        return this.add("fill", "rgba(29, 78, 216, 1)");
-    }
-    /** Sets `fill: "rgba(30, 64, 175, 1)"`. */
-    get fBlue800() {
-        return this.add("fill", "rgba(30, 64, 175, 1)");
-    }
-    /** Sets `fill: "rgba(30, 58, 138, 1)"`. */
-    get fBlue900() {
-        return this.add("fill", "rgba(30, 58, 138, 1)");
-    }
-    /** Sets `fill: "rgba(254, 242, 242, 1)"`. */
-    get fRed50() {
-        return this.add("fill", "rgba(254, 242, 242, 1)");
-    }
-    /** Sets `fill: "rgba(254, 226, 226, 1)"`. */
-    get fRed100() {
-        return this.add("fill", "rgba(254, 226, 226, 1)");
-    }
-    /** Sets `fill: "rgba(254, 202, 202, 1)"`. */
-    get fRed200() {
-        return this.add("fill", "rgba(254, 202, 202, 1)");
-    }
-    /** Sets `fill: "rgba(252, 165, 165, 1)"`. */
-    get fRed300() {
-        return this.add("fill", "rgba(252, 165, 165, 1)");
-    }
-    /** Sets `fill: "rgba(248, 113, 113, 1)"`. */
-    get fRed400() {
-        return this.add("fill", "rgba(248, 113, 113, 1)");
-    }
-    /** Sets `fill: "rgba(239, 68, 68, 1)"`. */
-    get fRed500() {
-        return this.add("fill", "rgba(239, 68, 68, 1)");
-    }
-    /** Sets `fill: "rgba(220, 38, 38, 1)"`. */
-    get fRed600() {
-        return this.add("fill", "rgba(220, 38, 38, 1)");
-    }
-    /** Sets `fill: "rgba(185, 28, 28, 1)"`. */
-    get fRed700() {
-        return this.add("fill", "rgba(185, 28, 28, 1)");
-    }
-    /** Sets `fill: "rgba(153, 27, 27, 1)"`. */
-    get fRed800() {
-        return this.add("fill", "rgba(153, 27, 27, 1)");
-    }
-    /** Sets `fill: "rgba(127, 29, 29, 1)"`. */
-    get fRed900() {
-        return this.add("fill", "rgba(127, 29, 29, 1)");
-    }
-    /** Sets `fill: "rgba(254, 252, 232, 1)"`. */
-    get fYellow50() {
-        return this.add("fill", "rgba(254, 252, 232, 1)");
-    }
-    /** Sets `fill: "rgba(254, 249, 195, 1)"`. */
-    get fYellow100() {
-        return this.add("fill", "rgba(254, 249, 195, 1)");
-    }
-    /** Sets `fill: "rgba(254, 240, 138, 1)"`. */
-    get fYellow200() {
-        return this.add("fill", "rgba(254, 240, 138, 1)");
-    }
-    /** Sets `fill: "rgba(253, 224, 71, 1)"`. */
-    get fYellow300() {
-        return this.add("fill", "rgba(253, 224, 71, 1)");
-    }
-    /** Sets `fill: "rgba(250, 204, 21, 1)"`. */
-    get fYellow400() {
-        return this.add("fill", "rgba(250, 204, 21, 1)");
-    }
-    /** Sets `fill: "rgba(234, 179, 8, 1)"`. */
-    get fYellow500() {
-        return this.add("fill", "rgba(234, 179, 8, 1)");
-    }
-    /** Sets `fill: "rgba(202, 138, 4, 1)"`. */
-    get fYellow600() {
-        return this.add("fill", "rgba(202, 138, 4, 1)");
-    }
-    /** Sets `fill: "rgba(161, 98, 7, 1)"`. */
-    get fYellow700() {
-        return this.add("fill", "rgba(161, 98, 7, 1)");
-    }
-    /** Sets `fill: "rgba(133, 77, 14, 1)"`. */
-    get fYellow800() {
-        return this.add("fill", "rgba(133, 77, 14, 1)");
-    }
-    /** Sets `fill: "rgba(113, 63, 18, 1)"`. */
-    get fYellow900() {
-        return this.add("fill", "rgba(113, 63, 18, 1)");
-    }
-    /** Sets `fill: "rgba(236, 253, 245, 1)"`. */
-    get fGreen50() {
-        return this.add("fill", "rgba(236, 253, 245, 1)");
-    }
-    /** Sets `fill: "rgba(209, 250, 229, 1)"`. */
-    get fGreen100() {
-        return this.add("fill", "rgba(209, 250, 229, 1)");
-    }
-    /** Sets `fill: "rgba(167, 243, 208, 1)"`. */
-    get fGreen200() {
-        return this.add("fill", "rgba(167, 243, 208, 1)");
-    }
-    /** Sets `fill: "rgba(110, 231, 183, 1)"`. */
-    get fGreen300() {
-        return this.add("fill", "rgba(110, 231, 183, 1)");
-    }
-    /** Sets `fill: "rgba(52, 211, 153, 1)"`. */
-    get fGreen400() {
-        return this.add("fill", "rgba(52, 211, 153, 1)");
-    }
-    /** Sets `fill: "rgba(16, 185, 129, 1)"`. */
-    get fGreen500() {
-        return this.add("fill", "rgba(16, 185, 129, 1)");
-    }
-    /** Sets `fill: "rgba(5, 150, 105, 1)"`. */
-    get fGreen600() {
-        return this.add("fill", "rgba(5, 150, 105, 1)");
-    }
-    /** Sets `fill: "rgba(4, 120, 87, 1)"`. */
-    get fGreen700() {
-        return this.add("fill", "rgba(4, 120, 87, 1)");
-    }
-    /** Sets `fill: "rgba(6, 95, 70, 1)"`. */
-    get fGreen800() {
-        return this.add("fill", "rgba(6, 95, 70, 1)");
-    }
-    /** Sets `fill: "rgba(6, 78, 59, 1)"`. */
-    get fGreen900() {
-        return this.add("fill", "rgba(6, 78, 59, 1)");
-    }
-    /** Sets `fill: "rgba(245, 243, 255, 1)"`. */
-    get fPurple50() {
-        return this.add("fill", "rgba(245, 243, 255, 1)");
-    }
-    /** Sets `fill: "rgba(237, 233, 254, 1)"`. */
-    get fPurple100() {
-        return this.add("fill", "rgba(237, 233, 254, 1)");
-    }
-    /** Sets `fill: "rgba(221, 214, 254, 1)"`. */
-    get fPurple200() {
-        return this.add("fill", "rgba(221, 214, 254, 1)");
-    }
-    /** Sets `fill: "rgba(196, 181, 253, 1)"`. */
-    get fPurple300() {
-        return this.add("fill", "rgba(196, 181, 253, 1)");
-    }
-    /** Sets `fill: "rgba(167, 139, 250, 1)"`. */
-    get fPurple400() {
-        return this.add("fill", "rgba(167, 139, 250, 1)");
-    }
-    /** Sets `fill: "rgba(139, 92, 246, 1)"`. */
-    get fPurple500() {
-        return this.add("fill", "rgba(139, 92, 246, 1)");
-    }
-    /** Sets `fill: "rgba(124, 58, 237, 1)"`. */
-    get fPurple600() {
-        return this.add("fill", "rgba(124, 58, 237, 1)");
-    }
-    /** Sets `fill: "rgba(109, 40, 217, 1)"`. */
-    get fPurple700() {
-        return this.add("fill", "rgba(109, 40, 217, 1)");
-    }
-    /** Sets `fill: "rgba(91, 33, 182, 1)"`. */
-    get fPurple800() {
-        return this.add("fill", "rgba(91, 33, 182, 1)");
-    }
-    /** Sets `fill: "rgba(76, 29, 149, 1)"`. */
-    get fPurple900() {
-        return this.add("fill", "rgba(76, 29, 149, 1)");
-    }
-    /** Sets `fill: "rgba(255, 247, 237, 1)"`. */
-    get fOrange50() {
-        return this.add("fill", "rgba(255, 247, 237, 1)");
-    }
-    /** Sets `fill: "rgba(255, 237, 213, 1)"`. */
-    get fOrange100() {
-        return this.add("fill", "rgba(255, 237, 213, 1)");
-    }
-    /** Sets `fill: "rgba(254, 215, 170, 1)"`. */
-    get fOrange200() {
-        return this.add("fill", "rgba(254, 215, 170, 1)");
-    }
-    /** Sets `fill: "rgba(253, 186, 116, 1)"`. */
-    get fOrange300() {
-        return this.add("fill", "rgba(253, 186, 116, 1)");
-    }
-    /** Sets `fill: "rgba(251, 146, 60, 1)"`. */
-    get fOrange400() {
-        return this.add("fill", "rgba(251, 146, 60, 1)");
-    }
-    /** Sets `fill: "rgba(249, 115, 22, 1)"`. */
-    get fOrange500() {
-        return this.add("fill", "rgba(249, 115, 22, 1)");
-    }
-    /** Sets `fill: "rgba(234, 88, 12, 1)"`. */
-    get fOrange600() {
-        return this.add("fill", "rgba(234, 88, 12, 1)");
-    }
-    /** Sets `fill: "rgba(194, 65, 12, 1)"`. */
-    get fOrange700() {
-        return this.add("fill", "rgba(194, 65, 12, 1)");
-    }
-    /** Sets `fill: "rgba(154, 52, 18, 1)"`. */
-    get fOrange800() {
-        return this.add("fill", "rgba(154, 52, 18, 1)");
-    }
-    /** Sets `fill: "rgba(124, 45, 18, 1)"`. */
-    get fOrange900() {
-        return this.add("fill", "rgba(124, 45, 18, 1)");
-    }
-    /** Sets `fill: value`. */
-    fill(value) {
-        return this.add("fill", value);
-    }
-    // spacing
-    /** Sets `marginTop: "0px"`. */
-    get mt0() {
-        return this.add("marginTop", "0px");
-    }
-    /** Sets `marginTop: "8px"`. */
-    get mt1() {
-        return this.add("marginTop", "8px");
-    }
-    /** Sets `marginTop: "16px"`. */
-    get mt2() {
-        return this.add("marginTop", "16px");
-    }
-    /** Sets `marginTop: "24px"`. */
-    get mt3() {
-        return this.add("marginTop", "24px");
-    }
-    /** Sets `marginTop: "32px"`. */
-    get mt4() {
-        return this.add("marginTop", "32px");
-    }
-    /** Sets `marginTop: "40px"`. */
-    get mt5() {
-        return this.add("marginTop", "40px");
-    }
-    /** Sets `marginTop: "48px"`. */
-    get mt6() {
-        return this.add("marginTop", "48px");
-    }
-    /** Sets `marginTop: "56px"`. */
-    get mt7() {
-        return this.add("marginTop", "56px");
-    }
-    /** Sets `marginTop: "64px"`. */
-    get mt8() {
-        return this.add("marginTop", "64px");
-    }
-    /** Sets `marginTop: "auto"`. */
-    get mta() {
-        return this.add("marginTop", "auto");
-    }
-    /** Sets `marginTop: "v"`. */
-    mt(v) {
-        return this.add("marginTop", maybeInc(v));
-    }
-    /** Sets `marginTop: px`. */
-    mtPx(px) {
-        return this.add("marginTop", `${px}px`);
-    }
-    /** Sets `marginRight: "0px"`. */
-    get mr0() {
-        return this.add("marginRight", "0px");
-    }
-    /** Sets `marginRight: "8px"`. */
-    get mr1() {
-        return this.add("marginRight", "8px");
-    }
-    /** Sets `marginRight: "16px"`. */
-    get mr2() {
-        return this.add("marginRight", "16px");
-    }
-    /** Sets `marginRight: "24px"`. */
-    get mr3() {
-        return this.add("marginRight", "24px");
-    }
-    /** Sets `marginRight: "32px"`. */
-    get mr4() {
-        return this.add("marginRight", "32px");
-    }
-    /** Sets `marginRight: "40px"`. */
-    get mr5() {
-        return this.add("marginRight", "40px");
-    }
-    /** Sets `marginRight: "48px"`. */
-    get mr6() {
-        return this.add("marginRight", "48px");
-    }
-    /** Sets `marginRight: "56px"`. */
-    get mr7() {
-        return this.add("marginRight", "56px");
-    }
-    /** Sets `marginRight: "64px"`. */
-    get mr8() {
-        return this.add("marginRight", "64px");
-    }
-    /** Sets `marginRight: "auto"`. */
-    get mra() {
-        return this.add("marginRight", "auto");
-    }
-    /** Sets `marginRight: "v"`. */
-    mr(v) {
-        return this.add("marginRight", maybeInc(v));
-    }
-    /** Sets `marginRight: px`. */
-    mrPx(px) {
-        return this.add("marginRight", `${px}px`);
-    }
-    /** Sets `marginBottom: "0px"`. */
-    get mb0() {
-        return this.add("marginBottom", "0px");
-    }
-    /** Sets `marginBottom: "8px"`. */
-    get mb1() {
-        return this.add("marginBottom", "8px");
-    }
-    /** Sets `marginBottom: "16px"`. */
-    get mb2() {
-        return this.add("marginBottom", "16px");
-    }
-    /** Sets `marginBottom: "24px"`. */
-    get mb3() {
-        return this.add("marginBottom", "24px");
-    }
-    /** Sets `marginBottom: "32px"`. */
-    get mb4() {
-        return this.add("marginBottom", "32px");
-    }
-    /** Sets `marginBottom: "40px"`. */
-    get mb5() {
-        return this.add("marginBottom", "40px");
-    }
-    /** Sets `marginBottom: "48px"`. */
-    get mb6() {
-        return this.add("marginBottom", "48px");
-    }
-    /** Sets `marginBottom: "56px"`. */
-    get mb7() {
-        return this.add("marginBottom", "56px");
-    }
-    /** Sets `marginBottom: "64px"`. */
-    get mb8() {
-        return this.add("marginBottom", "64px");
-    }
-    /** Sets `marginBottom: "auto"`. */
-    get mba() {
-        return this.add("marginBottom", "auto");
-    }
-    /** Sets `marginBottom: "v"`. */
-    mb(v) {
-        return this.add("marginBottom", maybeInc(v));
-    }
-    /** Sets `marginBottom: px`. */
-    mbPx(px) {
-        return this.add("marginBottom", `${px}px`);
-    }
-    /** Sets `marginLeft: "0px"`. */
-    get ml0() {
-        return this.add("marginLeft", "0px");
-    }
-    /** Sets `marginLeft: "8px"`. */
-    get ml1() {
-        return this.add("marginLeft", "8px");
-    }
-    /** Sets `marginLeft: "16px"`. */
-    get ml2() {
-        return this.add("marginLeft", "16px");
-    }
-    /** Sets `marginLeft: "24px"`. */
-    get ml3() {
-        return this.add("marginLeft", "24px");
-    }
-    /** Sets `marginLeft: "32px"`. */
-    get ml4() {
-        return this.add("marginLeft", "32px");
-    }
-    /** Sets `marginLeft: "40px"`. */
-    get ml5() {
-        return this.add("marginLeft", "40px");
-    }
-    /** Sets `marginLeft: "48px"`. */
-    get ml6() {
-        return this.add("marginLeft", "48px");
-    }
-    /** Sets `marginLeft: "56px"`. */
-    get ml7() {
-        return this.add("marginLeft", "56px");
-    }
-    /** Sets `marginLeft: "64px"`. */
-    get ml8() {
-        return this.add("marginLeft", "64px");
-    }
-    /** Sets `marginLeft: "auto"`. */
-    get mla() {
-        return this.add("marginLeft", "auto");
-    }
-    /** Sets `marginLeft: "v"`. */
-    ml(v) {
-        return this.add("marginLeft", maybeInc(v));
-    }
-    /** Sets `marginLeft: px`. */
-    mlPx(px) {
-        return this.add("marginLeft", `${px}px`);
-    }
-    /** Sets `marginLeft: "0px"; marginRight: "0px"`. */
-    get mx0() {
-        return this.add("marginLeft", "0px").add("marginRight", "0px");
-    }
-    /** Sets `marginLeft: "8px"; marginRight: "8px"`. */
-    get mx1() {
-        return this.add("marginLeft", "8px").add("marginRight", "8px");
-    }
-    /** Sets `marginLeft: "16px"; marginRight: "16px"`. */
-    get mx2() {
-        return this.add("marginLeft", "16px").add("marginRight", "16px");
-    }
-    /** Sets `marginLeft: "24px"; marginRight: "24px"`. */
-    get mx3() {
-        return this.add("marginLeft", "24px").add("marginRight", "24px");
-    }
-    /** Sets `marginLeft: "32px"; marginRight: "32px"`. */
-    get mx4() {
-        return this.add("marginLeft", "32px").add("marginRight", "32px");
-    }
-    /** Sets `marginLeft: "40px"; marginRight: "40px"`. */
-    get mx5() {
-        return this.add("marginLeft", "40px").add("marginRight", "40px");
-    }
-    /** Sets `marginLeft: "48px"; marginRight: "48px"`. */
-    get mx6() {
-        return this.add("marginLeft", "48px").add("marginRight", "48px");
-    }
-    /** Sets `marginLeft: "56px"; marginRight: "56px"`. */
-    get mx7() {
-        return this.add("marginLeft", "56px").add("marginRight", "56px");
-    }
-    /** Sets `marginLeft: "64px"; marginRight: "64px"`. */
-    get mx8() {
-        return this.add("marginLeft", "64px").add("marginRight", "64px");
-    }
-    /** Sets `marginLeft: "auto"; marginRight: "auto"`. */
-    get mxa() {
-        return this.add("marginLeft", "auto").add("marginRight", "auto");
-    }
-    /** Sets `marginLeft: "v"; marginRight: "v"`. */
-    mx(v) {
-        return this.add("marginLeft", maybeInc(v)).add("marginRight", maybeInc(v));
-    }
-    /** Sets `marginLeft: px; marginRight: px`. */
-    mxPx(px) {
-        return this.add("marginLeft", `${px}px`).add("marginRight", `${px}px`);
-    }
-    /** Sets `marginTop: "0px"; marginBottom: "0px"`. */
-    get my0() {
-        return this.add("marginTop", "0px").add("marginBottom", "0px");
-    }
-    /** Sets `marginTop: "8px"; marginBottom: "8px"`. */
-    get my1() {
-        return this.add("marginTop", "8px").add("marginBottom", "8px");
-    }
-    /** Sets `marginTop: "16px"; marginBottom: "16px"`. */
-    get my2() {
-        return this.add("marginTop", "16px").add("marginBottom", "16px");
-    }
-    /** Sets `marginTop: "24px"; marginBottom: "24px"`. */
-    get my3() {
-        return this.add("marginTop", "24px").add("marginBottom", "24px");
-    }
-    /** Sets `marginTop: "32px"; marginBottom: "32px"`. */
-    get my4() {
-        return this.add("marginTop", "32px").add("marginBottom", "32px");
-    }
-    /** Sets `marginTop: "40px"; marginBottom: "40px"`. */
-    get my5() {
-        return this.add("marginTop", "40px").add("marginBottom", "40px");
-    }
-    /** Sets `marginTop: "48px"; marginBottom: "48px"`. */
-    get my6() {
-        return this.add("marginTop", "48px").add("marginBottom", "48px");
-    }
-    /** Sets `marginTop: "56px"; marginBottom: "56px"`. */
-    get my7() {
-        return this.add("marginTop", "56px").add("marginBottom", "56px");
-    }
-    /** Sets `marginTop: "64px"; marginBottom: "64px"`. */
-    get my8() {
-        return this.add("marginTop", "64px").add("marginBottom", "64px");
-    }
-    /** Sets `marginTop: "auto"; marginBottom: "auto"`. */
-    get mya() {
-        return this.add("marginTop", "auto").add("marginBottom", "auto");
-    }
-    /** Sets `marginTop: "v"; marginBottom: "v"`. */
-    my(v) {
-        return this.add("marginTop", maybeInc(v)).add("marginBottom", maybeInc(v));
-    }
-    /** Sets `marginTop: px; marginBottom: px`. */
-    myPx(px) {
-        return this.add("marginTop", `${px}px`).add("marginBottom", `${px}px`);
-    }
-    /** Sets `marginTop: "0px"; marginBottom: "0px"; marginRight: "0px"; marginLeft: "0px"`. */
-    get m0() {
-        return this.add("marginTop", "0px").add("marginBottom", "0px").add("marginRight", "0px").add("marginLeft", "0px");
-    }
-    /** Sets `marginTop: "8px"; marginBottom: "8px"; marginRight: "8px"; marginLeft: "8px"`. */
-    get m1() {
-        return this.add("marginTop", "8px").add("marginBottom", "8px").add("marginRight", "8px").add("marginLeft", "8px");
-    }
-    /** Sets `marginTop: "16px"; marginBottom: "16px"; marginRight: "16px"; marginLeft: "16px"`. */
-    get m2() {
-        return this.add("marginTop", "16px").add("marginBottom", "16px").add("marginRight", "16px").add("marginLeft", "16px");
-    }
-    /** Sets `marginTop: "24px"; marginBottom: "24px"; marginRight: "24px"; marginLeft: "24px"`. */
-    get m3() {
-        return this.add("marginTop", "24px").add("marginBottom", "24px").add("marginRight", "24px").add("marginLeft", "24px");
-    }
-    /** Sets `marginTop: "32px"; marginBottom: "32px"; marginRight: "32px"; marginLeft: "32px"`. */
-    get m4() {
-        return this.add("marginTop", "32px").add("marginBottom", "32px").add("marginRight", "32px").add("marginLeft", "32px");
-    }
-    /** Sets `marginTop: "40px"; marginBottom: "40px"; marginRight: "40px"; marginLeft: "40px"`. */
-    get m5() {
-        return this.add("marginTop", "40px").add("marginBottom", "40px").add("marginRight", "40px").add("marginLeft", "40px");
-    }
-    /** Sets `marginTop: "48px"; marginBottom: "48px"; marginRight: "48px"; marginLeft: "48px"`. */
-    get m6() {
-        return this.add("marginTop", "48px").add("marginBottom", "48px").add("marginRight", "48px").add("marginLeft", "48px");
-    }
-    /** Sets `marginTop: "56px"; marginBottom: "56px"; marginRight: "56px"; marginLeft: "56px"`. */
-    get m7() {
-        return this.add("marginTop", "56px").add("marginBottom", "56px").add("marginRight", "56px").add("marginLeft", "56px");
-    }
-    /** Sets `marginTop: "64px"; marginBottom: "64px"; marginRight: "64px"; marginLeft: "64px"`. */
-    get m8() {
-        return this.add("marginTop", "64px").add("marginBottom", "64px").add("marginRight", "64px").add("marginLeft", "64px");
-    }
-    /** Sets `marginTop: "auto"; marginBottom: "auto"; marginRight: "auto"; marginLeft: "auto"`. */
-    get ma() {
-        return this.add("marginTop", "auto").add("marginBottom", "auto").add("marginRight", "auto").add("marginLeft", "auto");
-    }
-    /** Sets `marginTop: "v"; marginBottom: "v"; marginRight: "v"; marginLeft: "v"`. */
-    m(v) {
-        return this.add("marginTop", maybeInc(v)).add("marginBottom", maybeInc(v)).add("marginRight", maybeInc(v)).add("marginLeft", maybeInc(v));
-    }
-    /** Sets `marginTop: px; marginBottom: px; marginRight: px; marginLeft: px`. */
-    mPx(px) {
-        return this.add("marginTop", `${px}px`).add("marginBottom", `${px}px`).add("marginRight", `${px}px`).add("marginLeft", `${px}px`);
-    }
-    /** Sets `paddingTop: "0px"`. */
-    get pt0() {
-        return this.add("paddingTop", "0px");
-    }
-    /** Sets `paddingTop: "8px"`. */
-    get pt1() {
-        return this.add("paddingTop", "8px");
-    }
-    /** Sets `paddingTop: "16px"`. */
-    get pt2() {
-        return this.add("paddingTop", "16px");
-    }
-    /** Sets `paddingTop: "24px"`. */
-    get pt3() {
-        return this.add("paddingTop", "24px");
-    }
-    /** Sets `paddingTop: "32px"`. */
-    get pt4() {
-        return this.add("paddingTop", "32px");
-    }
-    /** Sets `paddingTop: "40px"`. */
-    get pt5() {
-        return this.add("paddingTop", "40px");
-    }
-    /** Sets `paddingTop: "48px"`. */
-    get pt6() {
-        return this.add("paddingTop", "48px");
-    }
-    /** Sets `paddingTop: "56px"`. */
-    get pt7() {
-        return this.add("paddingTop", "56px");
-    }
-    /** Sets `paddingTop: "64px"`. */
-    get pt8() {
-        return this.add("paddingTop", "64px");
-    }
-    /** Sets `paddingTop: "v"`. */
-    pt(v) {
-        return this.add("paddingTop", maybeInc(v));
-    }
-    /** Sets `paddingTop: px`. */
-    ptPx(px) {
-        return this.add("paddingTop", `${px}px`);
-    }
-    /** Sets `paddingRight: "0px"`. */
-    get pr0() {
-        return this.add("paddingRight", "0px");
-    }
-    /** Sets `paddingRight: "8px"`. */
-    get pr1() {
-        return this.add("paddingRight", "8px");
-    }
-    /** Sets `paddingRight: "16px"`. */
-    get pr2() {
-        return this.add("paddingRight", "16px");
-    }
-    /** Sets `paddingRight: "24px"`. */
-    get pr3() {
-        return this.add("paddingRight", "24px");
-    }
-    /** Sets `paddingRight: "32px"`. */
-    get pr4() {
-        return this.add("paddingRight", "32px");
-    }
-    /** Sets `paddingRight: "40px"`. */
-    get pr5() {
-        return this.add("paddingRight", "40px");
-    }
-    /** Sets `paddingRight: "48px"`. */
-    get pr6() {
-        return this.add("paddingRight", "48px");
-    }
-    /** Sets `paddingRight: "56px"`. */
-    get pr7() {
-        return this.add("paddingRight", "56px");
-    }
-    /** Sets `paddingRight: "64px"`. */
-    get pr8() {
-        return this.add("paddingRight", "64px");
-    }
-    /** Sets `paddingRight: "v"`. */
-    pr(v) {
-        return this.add("paddingRight", maybeInc(v));
-    }
-    /** Sets `paddingRight: px`. */
-    prPx(px) {
-        return this.add("paddingRight", `${px}px`);
-    }
-    /** Sets `paddingBottom: "0px"`. */
-    get pb0() {
-        return this.add("paddingBottom", "0px");
-    }
-    /** Sets `paddingBottom: "8px"`. */
-    get pb1() {
-        return this.add("paddingBottom", "8px");
-    }
-    /** Sets `paddingBottom: "16px"`. */
-    get pb2() {
-        return this.add("paddingBottom", "16px");
-    }
-    /** Sets `paddingBottom: "24px"`. */
-    get pb3() {
-        return this.add("paddingBottom", "24px");
-    }
-    /** Sets `paddingBottom: "32px"`. */
-    get pb4() {
-        return this.add("paddingBottom", "32px");
-    }
-    /** Sets `paddingBottom: "40px"`. */
-    get pb5() {
-        return this.add("paddingBottom", "40px");
-    }
-    /** Sets `paddingBottom: "48px"`. */
-    get pb6() {
-        return this.add("paddingBottom", "48px");
-    }
-    /** Sets `paddingBottom: "56px"`. */
-    get pb7() {
-        return this.add("paddingBottom", "56px");
-    }
-    /** Sets `paddingBottom: "64px"`. */
-    get pb8() {
-        return this.add("paddingBottom", "64px");
-    }
-    /** Sets `paddingBottom: "v"`. */
-    pb(v) {
-        return this.add("paddingBottom", maybeInc(v));
-    }
-    /** Sets `paddingBottom: px`. */
-    pbPx(px) {
-        return this.add("paddingBottom", `${px}px`);
-    }
-    /** Sets `paddingLeft: "0px"`. */
-    get pl0() {
-        return this.add("paddingLeft", "0px");
-    }
-    /** Sets `paddingLeft: "8px"`. */
-    get pl1() {
-        return this.add("paddingLeft", "8px");
-    }
-    /** Sets `paddingLeft: "16px"`. */
-    get pl2() {
-        return this.add("paddingLeft", "16px");
-    }
-    /** Sets `paddingLeft: "24px"`. */
-    get pl3() {
-        return this.add("paddingLeft", "24px");
-    }
-    /** Sets `paddingLeft: "32px"`. */
-    get pl4() {
-        return this.add("paddingLeft", "32px");
-    }
-    /** Sets `paddingLeft: "40px"`. */
-    get pl5() {
-        return this.add("paddingLeft", "40px");
-    }
-    /** Sets `paddingLeft: "48px"`. */
-    get pl6() {
-        return this.add("paddingLeft", "48px");
-    }
-    /** Sets `paddingLeft: "56px"`. */
-    get pl7() {
-        return this.add("paddingLeft", "56px");
-    }
-    /** Sets `paddingLeft: "64px"`. */
-    get pl8() {
-        return this.add("paddingLeft", "64px");
-    }
-    /** Sets `paddingLeft: "v"`. */
-    pl(v) {
-        return this.add("paddingLeft", maybeInc(v));
-    }
-    /** Sets `paddingLeft: px`. */
-    plPx(px) {
-        return this.add("paddingLeft", `${px}px`);
-    }
-    /** Sets `paddingLeft: "0px"; paddingRight: "0px"`. */
-    get px0() {
-        return this.add("paddingLeft", "0px").add("paddingRight", "0px");
-    }
-    /** Sets `paddingLeft: "8px"; paddingRight: "8px"`. */
-    get px1() {
-        return this.add("paddingLeft", "8px").add("paddingRight", "8px");
-    }
-    /** Sets `paddingLeft: "16px"; paddingRight: "16px"`. */
-    get px2() {
-        return this.add("paddingLeft", "16px").add("paddingRight", "16px");
-    }
-    /** Sets `paddingLeft: "24px"; paddingRight: "24px"`. */
-    get px3() {
-        return this.add("paddingLeft", "24px").add("paddingRight", "24px");
-    }
-    /** Sets `paddingLeft: "32px"; paddingRight: "32px"`. */
-    get px4() {
-        return this.add("paddingLeft", "32px").add("paddingRight", "32px");
-    }
-    /** Sets `paddingLeft: "40px"; paddingRight: "40px"`. */
-    get px5() {
-        return this.add("paddingLeft", "40px").add("paddingRight", "40px");
-    }
-    /** Sets `paddingLeft: "48px"; paddingRight: "48px"`. */
-    get px6() {
-        return this.add("paddingLeft", "48px").add("paddingRight", "48px");
-    }
-    /** Sets `paddingLeft: "56px"; paddingRight: "56px"`. */
-    get px7() {
-        return this.add("paddingLeft", "56px").add("paddingRight", "56px");
-    }
-    /** Sets `paddingLeft: "64px"; paddingRight: "64px"`. */
-    get px8() {
-        return this.add("paddingLeft", "64px").add("paddingRight", "64px");
-    }
-    /** Sets `paddingLeft: "v"; paddingRight: "v"`. */
-    px(v) {
-        return this.add("paddingLeft", maybeInc(v)).add("paddingRight", maybeInc(v));
-    }
-    /** Sets `paddingLeft: px; paddingRight: px`. */
-    pxPx(px) {
-        return this.add("paddingLeft", `${px}px`).add("paddingRight", `${px}px`);
-    }
-    /** Sets `paddingTop: "0px"; paddingBottom: "0px"`. */
-    get py0() {
-        return this.add("paddingTop", "0px").add("paddingBottom", "0px");
-    }
-    /** Sets `paddingTop: "8px"; paddingBottom: "8px"`. */
-    get py1() {
-        return this.add("paddingTop", "8px").add("paddingBottom", "8px");
-    }
-    /** Sets `paddingTop: "16px"; paddingBottom: "16px"`. */
-    get py2() {
-        return this.add("paddingTop", "16px").add("paddingBottom", "16px");
-    }
-    /** Sets `paddingTop: "24px"; paddingBottom: "24px"`. */
-    get py3() {
-        return this.add("paddingTop", "24px").add("paddingBottom", "24px");
-    }
-    /** Sets `paddingTop: "32px"; paddingBottom: "32px"`. */
-    get py4() {
-        return this.add("paddingTop", "32px").add("paddingBottom", "32px");
-    }
-    /** Sets `paddingTop: "40px"; paddingBottom: "40px"`. */
-    get py5() {
-        return this.add("paddingTop", "40px").add("paddingBottom", "40px");
-    }
-    /** Sets `paddingTop: "48px"; paddingBottom: "48px"`. */
-    get py6() {
-        return this.add("paddingTop", "48px").add("paddingBottom", "48px");
-    }
-    /** Sets `paddingTop: "56px"; paddingBottom: "56px"`. */
-    get py7() {
-        return this.add("paddingTop", "56px").add("paddingBottom", "56px");
-    }
-    /** Sets `paddingTop: "64px"; paddingBottom: "64px"`. */
-    get py8() {
-        return this.add("paddingTop", "64px").add("paddingBottom", "64px");
-    }
-    /** Sets `paddingTop: "v"; paddingBottom: "v"`. */
-    py(v) {
-        return this.add("paddingTop", maybeInc(v)).add("paddingBottom", maybeInc(v));
-    }
-    /** Sets `paddingTop: px; paddingBottom: px`. */
-    pyPx(px) {
-        return this.add("paddingTop", `${px}px`).add("paddingBottom", `${px}px`);
-    }
-    /** Sets `paddingTop: "0px"; paddingBottom: "0px"; paddingRight: "0px"; paddingLeft: "0px"`. */
-    get p0() {
-        return this.add("paddingTop", "0px").add("paddingBottom", "0px").add("paddingRight", "0px").add("paddingLeft", "0px");
-    }
-    /** Sets `paddingTop: "8px"; paddingBottom: "8px"; paddingRight: "8px"; paddingLeft: "8px"`. */
-    get p1() {
-        return this.add("paddingTop", "8px").add("paddingBottom", "8px").add("paddingRight", "8px").add("paddingLeft", "8px");
-    }
-    /** Sets `paddingTop: "16px"; paddingBottom: "16px"; paddingRight: "16px"; paddingLeft: "16px"`. */
-    get p2() {
-        return this.add("paddingTop", "16px").add("paddingBottom", "16px").add("paddingRight", "16px").add("paddingLeft", "16px");
-    }
-    /** Sets `paddingTop: "24px"; paddingBottom: "24px"; paddingRight: "24px"; paddingLeft: "24px"`. */
-    get p3() {
-        return this.add("paddingTop", "24px").add("paddingBottom", "24px").add("paddingRight", "24px").add("paddingLeft", "24px");
-    }
-    /** Sets `paddingTop: "32px"; paddingBottom: "32px"; paddingRight: "32px"; paddingLeft: "32px"`. */
-    get p4() {
-        return this.add("paddingTop", "32px").add("paddingBottom", "32px").add("paddingRight", "32px").add("paddingLeft", "32px");
-    }
-    /** Sets `paddingTop: "40px"; paddingBottom: "40px"; paddingRight: "40px"; paddingLeft: "40px"`. */
-    get p5() {
-        return this.add("paddingTop", "40px").add("paddingBottom", "40px").add("paddingRight", "40px").add("paddingLeft", "40px");
-    }
-    /** Sets `paddingTop: "48px"; paddingBottom: "48px"; paddingRight: "48px"; paddingLeft: "48px"`. */
-    get p6() {
-        return this.add("paddingTop", "48px").add("paddingBottom", "48px").add("paddingRight", "48px").add("paddingLeft", "48px");
-    }
-    /** Sets `paddingTop: "56px"; paddingBottom: "56px"; paddingRight: "56px"; paddingLeft: "56px"`. */
-    get p7() {
-        return this.add("paddingTop", "56px").add("paddingBottom", "56px").add("paddingRight", "56px").add("paddingLeft", "56px");
-    }
-    /** Sets `paddingTop: "64px"; paddingBottom: "64px"; paddingRight: "64px"; paddingLeft: "64px"`. */
-    get p8() {
-        return this.add("paddingTop", "64px").add("paddingBottom", "64px").add("paddingRight", "64px").add("paddingLeft", "64px");
-    }
-    /** Sets `paddingTop: "v"; paddingBottom: "v"; paddingRight: "v"; paddingLeft: "v"`. */
-    p(v) {
-        return this.add("paddingTop", maybeInc(v)).add("paddingBottom", maybeInc(v)).add("paddingRight", maybeInc(v)).add("paddingLeft", maybeInc(v));
-    }
-    /** Sets `paddingTop: px; paddingBottom: px; paddingRight: px; paddingLeft: px`. */
-    pPx(px) {
-        return this.add("paddingTop", `${px}px`).add("paddingBottom", `${px}px`).add("paddingRight", `${px}px`).add("paddingLeft", `${px}px`);
-    }
-    // textAlign
-    /** Sets `textAlign: "left"`. */
-    get tal() {
-        return this.add("textAlign", "left");
-    }
-    /** Sets `textAlign: "center"`. */
-    get tac() {
-        return this.add("textAlign", "center");
-    }
-    /** Sets `textAlign: "right"`. */
-    get tar() {
-        return this.add("textAlign", "right");
-    }
-    /** Sets `textAlign: "justify"`. */
-    get taj() {
-        return this.add("textAlign", "justify");
-    }
-    /** Sets `textAlign: value`. */
-    ta(value) {
-        return this.add("textAlign", value);
-    }
-    // textDecoration
-    /** Sets `textDecoration: "none"`. */
-    get tdn() {
-        return this.add("textDecoration", "none");
-    }
-    /** Sets `textDecoration: "line-through"`. */
-    get tdlt() {
-        return this.add("textDecoration", "line-through");
-    }
-    /** Sets `textDecoration: "underline"`. */
-    get tdu() {
-        return this.add("textDecoration", "underline");
-    }
-    /** Sets `textDecoration: value`. */
-    textDecoration(value) {
-        return this.add("textDecoration", value);
-    }
-    // textTransform
-    /** 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
-    /** 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
-    /** 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 `fontSize: value`. */
-    fs(value) {
-        return this.add("fontSize", value);
-    }
-    /** Sets `fontSize: px`. */
-    fsPx(px) {
-        return this.fs(`${px}px`);
-    }
-    /** Sets `lineHeight: value`. */
-    lh(value) {
-        return this.add("lineHeight", value);
-    }
-    /** Sets `lineHeight: px`. */
-    lhPx(px) {
-        return this.lh(`${px}px`);
-    }
-    // userSelect
-    /** Sets `userSelect: "none"`. */
-    get usn() {
-        return this.add("userSelect", "none");
-    }
-    /** Sets `userSelect: "text"`. */
-    get ust() {
-        return this.add("userSelect", "text");
-    }
-    /** Sets `userSelect: "all"`. */
-    get usAll() {
-        return this.add("userSelect", "all");
-    }
-    /** Sets `userSelect: "auto"`. */
-    get usAuto() {
-        return this.add("userSelect", "auto");
-    }
-    /** Sets `userSelect: value`. */
-    select(value) {
-        return this.add("userSelect", value);
-    }
-    // verticalAlign
-    /** Sets `verticalAlign: "baseline"`. */
-    get vaBaseline() {
-        return this.add("verticalAlign", "baseline");
-    }
-    /** Sets `verticalAlign: "middle"`. */
-    get vam() {
-        return this.add("verticalAlign", "middle");
-    }
-    /** Sets `verticalAlign: "top"`. */
-    get vat() {
-        return this.add("verticalAlign", "top");
-    }
-    /** Sets `verticalAlign: "bottom"`. */
-    get vaBottom() {
-        return this.add("verticalAlign", "bottom");
-    }
-    /** Sets `verticalAlign: value`. */
-    va(value) {
-        return this.add("verticalAlign", value);
-    }
-    // visibility
-    /** Sets `visibility: "visible"`. */
-    get vv() {
-        return this.add("visibility", "visible");
-    }
-    /** Sets `visibility: "hidden"`. */
-    get vh() {
-        return this.add("visibility", "hidden");
-    }
-    /** Sets `visibility: value`. */
-    visibility(value) {
-        return this.add("visibility", value);
-    }
-    // whitespace
-    /** Sets `whiteSpace: "pre"`. */
-    get wsp() {
-        return this.add("whiteSpace", "pre");
-    }
-    /** Sets `whiteSpace: "normal"`. */
-    get wsn() {
-        return this.add("whiteSpace", "normal");
-    }
-    /** Sets `whiteSpace: "nowrap"`. */
-    get wsnw() {
-        return this.add("whiteSpace", "nowrap");
-    }
-    /** Sets `whiteSpace: "break-spaces"`. */
-    get wsbs() {
-        return this.add("whiteSpace", "break-spaces");
-    }
-    /** Sets `whiteSpace: "pre-wrap"`. */
-    get wspw() {
-        return this.add("whiteSpace", "pre-wrap");
-    }
-    /** Sets `whiteSpace: "pre-line"`. */
-    get wspl() {
-        return this.add("whiteSpace", "pre-line");
-    }
-    /** Sets `whiteSpace: value`. */
-    whiteSpace(value) {
-        return this.add("whiteSpace", value);
-    }
-    // width
-    /** 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 `width: "fit-content"`. */
-    get wfc() {
-        return this.add("width", "fit-content");
-    }
-    /** Sets `width: "max-content"`. */
-    get wmaxc() {
-        return this.add("width", "max-content");
-    }
-    /** Sets `width: "min-content"`. */
-    get wminc() {
-        return this.add("width", "min-content");
-    }
-    /** 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: "fit-content"`. */
-    get mwfc() {
-        return this.add("minWidth", "fit-content");
-    }
-    /** Sets `minWidth: "min-content"`. */
-    get mwminc() {
-        return this.add("minWidth", "min-content");
-    }
-    /** Sets `minWidth: "max-content"`. */
-    get mwmaxc() {
-        return this.add("minWidth", "max-content");
-    }
-    /** 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: "fit-content"`. */
-    get maxwfc() {
-        return this.add("maxWidth", "fit-content");
-    }
-    /** Sets `maxWidth: "min-content"`. */
-    get maxwminc() {
-        return this.add("maxWidth", "min-content");
-    }
-    /** Sets `maxWidth: "max-content"`. */
-    get maxwmaxc() {
-        return this.add("maxWidth", "max-content");
-    }
-    /** 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.add("width", "0px");
-    }
-    /** Sets `width: "8px"`. */
-    get w1() {
-        return this.add("width", "8px");
-    }
-    /** Sets `width: "16px"`. */
-    get w2() {
-        return this.add("width", "16px");
-    }
-    /** Sets `width: "24px"`. */
-    get w3() {
-        return this.add("width", "24px");
-    }
-    /** Sets `width: "32px"`. */
-    get w4() {
-        return this.add("width", "32px");
-    }
-    /** Sets `width: "40px"`. */
-    get w5() {
-        return this.add("width", "40px");
-    }
-    /** Sets `width: "48px"`. */
-    get w6() {
-        return this.add("width", "48px");
-    }
-    /** Sets `width: "56px"`. */
-    get w7() {
-        return this.add("width", "56px");
-    }
-    /** Sets `width: "64px"`. */
-    get w8() {
-        return this.add("width", "64px");
-    }
-    /** Sets `width: "auto"`. */
-    get wa() {
-        return this.add("width", "auto");
-    }
-    /** Sets `width: "v"`. */
-    w(v) {
-        return this.add("width", maybeInc(v));
-    }
-    /** Sets `width: px`. */
-    wPx(px) {
-        return this.add("width", `${px}px`);
-    }
-    // wordBreak
-    /** Sets `wordBreak: "normal"`. */
-    get wbn() {
-        return this.add("wordBreak", "normal");
-    }
-    /** Sets `wordBreak: "break-all"`. */
-    get wbba() {
-        return this.add("wordBreak", "break-all");
-    }
-    /** Sets `wordBreak: "keep-all"`. */
-    get wbka() {
-        return this.add("wordBreak", "keep-all");
-    }
-    /** Sets `wordBreak: "break-word"`. */
-    get wbbw() {
-        return this.add("wordBreak", "break-word");
-    }
-    /** Sets `wordBreak: value`. */
-    wordBreak(value) {
-        return this.add("wordBreak", value);
-    }
-    // zIndex
-    /** 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
-    /** 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
-    /** 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
-    /** 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
-    /** Sets `padding: 0; margin: 0; listStyle: "none"`. */
-    get listReset() {
-        return this.add("padding", 0).add("margin", 0).add("listStyle", "none");
-    }
-    // underlay
-    /** Sets `position: "fixed"; top: 0; bottom: 0; left: 0; right: 0; display: "flex"; alignItems: "center"; justifyContent: "center"; backgroundColor: "rgba(36,36,36,0.6)"`. */
-    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.6)");
-    }
-    // visuallyHidden
-    /** Sets `position: "absolute"; overflow: "hidden"; clip: "inset(50%)"; clipPath: ""; border: 0; height: "1px"; margin: "-1px"; width: "1px"; padding: 0; whiteSpace: "nowrap"; opacity: 0`. */
-    get visuallyHidden() {
-        return this.add("position", "absolute").add("overflow", "hidden").add("clip", "inset(50%)").add("clipPath", "").add("border", 0).add("height", "1px").add("margin", "-1px").add("width", "1px").add("padding", 0).add("whiteSpace", "nowrap").add("opacity", 0);
-    }
-    // contentEmpty
-    /** Sets `content: "''"`. */
-    get contentEmpty() {
-        return this.add("content", "''");
-    }
-    // aliases
-    get $() {
-        return maybeImportant(sortObject(this.rules), this.opts.important);
-    }
-    if(arg, value) {
-        if (value !== undefined) {
-            return this.newCss({ selector: `[${arg}='${value}']` });
-        }
-        else if (typeof arg === "boolean") {
-            return this.newCss({ enabled: arg });
-        }
-        else {
-            return this.newCss({ selector: Breakpoints[arg] });
-        }
-    }
-    get onHover() {
-        return this.newCss({ selector: ":hover" });
-    }
-    ifContainer(props) {
-        return this.newCss({ selector: Container(props) });
-    }
-    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) {
-            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 });
-    }
-    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.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;
-        }
-        const rules = { ...this.rules, [selector]: { ...this.rules[selector], ...newRules } };
-        return this.newCss({ rules: rules });
-    }
-}
-/** 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) => {
-        acc[key] = obj[key];
-        return acc;
-    }, {});
-}
-/** Conditionally adds `important!` to everything. */
-function maybeImportant(obj, important) {
-    if (important) {
-        Object.keys(obj).forEach((key) => {
-            obj[key] = `${obj[key]} !important`;
-        });
-    }
-    return obj;
-}
-/** Converts `inc` into pixels value with a `px` suffix. */
-function maybeInc(inc) {
-    return typeof inc === "string" ? inc : `${increment(inc)}px`;
-}
-/** Converts `inc` into pixels. */
-function increment(inc) {
-    return inc * 8;
-}
-/** Convert `pixels` to a `px` units string so it's not ambiguous. */
-function px(pixels) {
-    return `${pixels}px`;
-}
-var Palette;
-(function (Palette) {
-    Palette["White"] = "rgba(255,255,255,1)";
-    Palette["Transparent"] = "rgba(0,0,0,0)";
-    Palette["Gray50"] = "rgba(255, 253, 253, 1)";
-    Palette["Gray100"] = "rgba(247, 245, 245, 1)";
-    Palette["Gray200"] = "rgba(236, 235, 235, 1)";
-    Palette["Gray300"] = "rgba(221, 220, 220, 1)";
-    Palette["Gray400"] = "rgba(201, 201, 201, 1)";
-    Palette["Gray500"] = "rgba(175, 175, 175, 1)";
-    Palette["Gray600"] = "rgba(141, 141, 141, 1)";
-    Palette["Gray700"] = "rgba(100, 100, 100, 1)";
-    Palette["Gray800"] = "rgba(53, 53, 53, 1)";
-    Palette["Gray900"] = "rgba(36, 36, 36, 1)";
-    Palette["Blue50"] = "rgba(239, 246, 255, 1)";
-    Palette["Blue100"] = "rgba(219, 234, 254, 1)";
-    Palette["Blue200"] = "rgba(191, 219, 254, 1)";
-    Palette["Blue300"] = "rgba(147, 197, 253, 1)";
-    Palette["Blue400"] = "rgba(96, 165, 250, 1)";
-    Palette["Blue500"] = "rgba(59, 130, 246, 1)";
-    Palette["Blue600"] = "rgba(37, 99, 235, 1)";
-    Palette["Blue700"] = "rgba(29, 78, 216, 1)";
-    Palette["Blue800"] = "rgba(30, 64, 175, 1)";
-    Palette["Blue900"] = "rgba(30, 58, 138, 1)";
-    Palette["Red50"] = "rgba(254, 242, 242, 1)";
-    Palette["Red100"] = "rgba(254, 226, 226, 1)";
-    Palette["Red200"] = "rgba(254, 202, 202, 1)";
-    Palette["Red300"] = "rgba(252, 165, 165, 1)";
-    Palette["Red400"] = "rgba(248, 113, 113, 1)";
-    Palette["Red500"] = "rgba(239, 68, 68, 1)";
-    Palette["Red600"] = "rgba(220, 38, 38, 1)";
-    Palette["Red700"] = "rgba(185, 28, 28, 1)";
-    Palette["Red800"] = "rgba(153, 27, 27, 1)";
-    Palette["Red900"] = "rgba(127, 29, 29, 1)";
-    Palette["Yellow50"] = "rgba(254, 252, 232, 1)";
-    Palette["Yellow100"] = "rgba(254, 249, 195, 1)";
-    Palette["Yellow200"] = "rgba(254, 240, 138, 1)";
-    Palette["Yellow300"] = "rgba(253, 224, 71, 1)";
-    Palette["Yellow400"] = "rgba(250, 204, 21, 1)";
-    Palette["Yellow500"] = "rgba(234, 179, 8, 1)";
-    Palette["Yellow600"] = "rgba(202, 138, 4, 1)";
-    Palette["Yellow700"] = "rgba(161, 98, 7, 1)";
-    Palette["Yellow800"] = "rgba(133, 77, 14, 1)";
-    Palette["Yellow900"] = "rgba(113, 63, 18, 1)";
-    Palette["Green50"] = "rgba(236, 253, 245, 1)";
-    Palette["Green100"] = "rgba(209, 250, 229, 1)";
-    Palette["Green200"] = "rgba(167, 243, 208, 1)";
-    Palette["Green300"] = "rgba(110, 231, 183, 1)";
-    Palette["Green400"] = "rgba(52, 211, 153, 1)";
-    Palette["Green500"] = "rgba(16, 185, 129, 1)";
-    Palette["Green600"] = "rgba(5, 150, 105, 1)";
-    Palette["Green700"] = "rgba(4, 120, 87, 1)";
-    Palette["Green800"] = "rgba(6, 95, 70, 1)";
-    Palette["Green900"] = "rgba(6, 78, 59, 1)";
-    Palette["Purple50"] = "rgba(245, 243, 255, 1)";
-    Palette["Purple100"] = "rgba(237, 233, 254, 1)";
-    Palette["Purple200"] = "rgba(221, 214, 254, 1)";
-    Palette["Purple300"] = "rgba(196, 181, 253, 1)";
-    Palette["Purple400"] = "rgba(167, 139, 250, 1)";
-    Palette["Purple500"] = "rgba(139, 92, 246, 1)";
-    Palette["Purple600"] = "rgba(124, 58, 237, 1)";
-    Palette["Purple700"] = "rgba(109, 40, 217, 1)";
-    Palette["Purple800"] = "rgba(91, 33, 182, 1)";
-    Palette["Purple900"] = "rgba(76, 29, 149, 1)";
-    Palette["Orange50"] = "rgba(255, 247, 237, 1)";
-    Palette["Orange100"] = "rgba(255, 237, 213, 1)";
-    Palette["Orange200"] = "rgba(254, 215, 170, 1)";
-    Palette["Orange300"] = "rgba(253, 186, 116, 1)";
-    Palette["Orange400"] = "rgba(251, 146, 60, 1)";
-    Palette["Orange500"] = "rgba(249, 115, 22, 1)";
-    Palette["Orange600"] = "rgba(234, 88, 12, 1)";
-    Palette["Orange700"] = "rgba(194, 65, 12, 1)";
-    Palette["Orange800"] = "rgba(154, 52, 18, 1)";
-    Palette["Orange900"] = "rgba(124, 45, 18, 1)";
-})(Palette || (exports.Palette = Palette = {}));
-/** An entry point for Css expressions. CssBuilder is immutable so this is safe to share. */
-exports.Css = new CssBuilder({ rules: {}, enabled: true, important: false, selector: undefined });
-var Breakpoints;
-(function (Breakpoints) {
-    Breakpoints["print"] = "@media print";
-    Breakpoints["sm"] = "@media screen and (max-width:599px)";
-    Breakpoints["md"] = "@media screen and (min-width:600px) and (max-width:1024px)";
-    Breakpoints["smOrMd"] = "@media screen and (max-width:1024px)";
-    Breakpoints["mdAndUp"] = "@media screen and (min-width:600px)";
-    Breakpoints["mdAndDown"] = "@media screen and (max-width:1024px)";
-    Breakpoints["lg"] = "@media screen and (min-width:1025px)";
-    Breakpoints["mdOrLg"] = "@media screen and (min-width:600px)";
-})(Breakpoints || (exports.Breakpoints = Breakpoints = {}));
-function Container(props) {
-    const { name = "" } = props;
-    const lt = "lt" in props ? props.lt : undefined;
-    const gt = "gt" in props ? props.gt : undefined;
-    const ltQuery = lt !== undefined ? `(max-width: ${lt}px)` : "";
-    const gtQuery = gt !== undefined ? `(min-width: ${gt + 1}px)` : "";
-    const query = [ltQuery, gtQuery].filter(Boolean).join(" and ");
-    return `@container ${name} ${query}`;
-}