Types for space related CSS properties

interface StyleProps {
    alignContent?: ResponsiveValue<AlignContent>;
    alignItems?: ResponsiveValue<AlignItems>;
    alignSelf?: ResponsiveValue<AlignSelf>;
    animation?: ResponsiveValue<Animation<string & {}>>;
    appearance?: ResponsiveValue<Appearance>;
    apply?: ResponsiveValue<string>;
    aspectRatio?: ResponsiveValue<AspectRatio>;
    backdropBlur?: ResponsiveValue<{}>;
    backdropBrightness?: ResponsiveValue<Length>;
    backdropContrast?: ResponsiveValue<Length>;
    backdropFilter?: ResponsiveValue<("auto" | BackdropFilter)>;
    backdropHueRotate?: ResponsiveValue<Length>;
    backdropInvert?: ResponsiveValue<Length>;
    backdropSaturate?: ResponsiveValue<Length>;
    background?: ResponsiveValue<string | number | string & {}>;
    backgroundAttachment?: ResponsiveValue<BackgroundAttachment>;
    backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>;
    backgroundClip?: ResponsiveValue<("text" | BackgroundClip)>;
    backgroundColor?: ResponsiveValue<string | number | string & {}>;
    backgroundImage?: ResponsiveValue<BackgroundImage>;
    backgroundPosition?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    backgroundRepeat?: ResponsiveValue<BackgroundRepeat>;
    backgroundSize?: ResponsiveValue<number | string & {} | "auto" | "contain" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "cover">;
    bg?: ResponsiveValue<string | number | string & {}>;
    bgAttachment?: ResponsiveValue<BackgroundAttachment>;
    bgBlendMode?: ResponsiveValue<BackgroundBlendMode>;
    bgClip?: ResponsiveValue<("text" | BackgroundClip)>;
    bgColor?: ResponsiveValue<string | number | string & {}>;
    bgGradient?: ResponsiveValue<BackgroundImage>;
    bgImage?: ResponsiveValue<BackgroundImage>;
    bgImg?: ResponsiveValue<BackgroundImage>;
    bgPos?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    bgPosition?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    bgRepeat?: ResponsiveValue<BackgroundRepeat>;
    bgSize?: ResponsiveValue<number | string & {} | "auto" | "contain" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "cover">;
    blendMode?: ResponsiveValue<MixBlendMode>;
    blockSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content">;
    blur?: ResponsiveValue<{}>;
    border?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderBlock?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderBlockEnd?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderBlockEndColor?: ResponsiveValue<string | number | string & {}>;
    borderBlockEndStyle?: ResponsiveValue<BorderBlockEndStyle>;
    borderBlockEndWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderBlockStart?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderBlockStartColor?: ResponsiveValue<string | number | string & {}>;
    borderBlockStartStyle?: ResponsiveValue<BorderBlockStartStyle>;
    borderBlockStartWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderBottom?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderBottomColor?: ResponsiveValue<string | number | string & {}>;
    borderBottomEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderBottomLeftRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderBottomRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderBottomRightRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderBottomStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderBottomStyle?: ResponsiveValue<BorderBottomStyle>;
    borderBottomWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderColor?: ResponsiveValue<string | number | string & {}>;
    borderEnd?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderEndColor?: ResponsiveValue<BorderInlineEndColor>;
    borderEndEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderEndStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderEndStyle?: ResponsiveValue<BorderInlineEndStyle>;
    borderEndWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderInline?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderInlineEnd?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderInlineEndColor?: ResponsiveValue<string | number | string & {}>;
    borderInlineEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderInlineEndStyle?: ResponsiveValue<BorderInlineEndStyle>;
    borderInlineEndWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderInlineStart?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderInlineStartColor?: ResponsiveValue<string | number | string & {}>;
    borderInlineStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderInlineStartStyle?: ResponsiveValue<BorderInlineStartStyle>;
    borderInlineStartWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderLeft?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderLeftColor?: ResponsiveValue<string | number | string & {}>;
    borderLeftRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderLeftStyle?: ResponsiveValue<BorderLeftStyle>;
    borderLeftWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderRight?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderRightColor?: ResponsiveValue<string | number | string & {}>;
    borderRightRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderRightStyle?: ResponsiveValue<BorderRightStyle>;
    borderRightWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderStart?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderStartColor?: ResponsiveValue<BorderInlineStartColor>;
    borderStartEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderStartStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderStartStyle?: ResponsiveValue<BorderInlineStartStyle>;
    borderStartWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderStyle?: ResponsiveValue<BorderStyle>;
    borderTop?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderTopColor?: ResponsiveValue<string | number | string & {}>;
    borderTopEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderTopLeftRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderTopRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderTopRightRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderTopStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    borderTopStyle?: ResponsiveValue<BorderTopStyle>;
    borderTopWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">;
    borderX?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    borderY?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">;
    bottom?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>;
    boxShadow?: ResponsiveValue<(number | BoxShadow)>;
    boxSize?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">;
    boxSizing?: BoxSizing;
    brightness?: ResponsiveValue<Length>;
    clipPath?: ResponsiveValue<ClipPath>;
    color?: ResponsiveValue<string | number | string & {}>;
    columnGap?: ResponsiveValue<ColumnGap<Length>>;
    contrast?: ResponsiveValue<Length>;
    cursor?: ResponsiveValue<Cursor>;
    display?: ResponsiveValue<Display>;
    dropShadow?: ResponsiveValue<BoxShadow>;
    fill?: ResponsiveValue<string | number | string & {}>;
    filter?: ResponsiveValue<("auto" | Filter)>;
    flex?: ResponsiveValue<Flex<Length>>;
    flexBasis?: ResponsiveValue<FlexBasis<Length>>;
    flexDir?: ResponsiveValue<FlexDirection>;
    flexDirection?: ResponsiveValue<FlexDirection>;
    flexFlow?: ResponsiveValue<FlexFlow>;
    flexGrow?: ResponsiveValue<FlexGrow>;
    flexShrink?: ResponsiveValue<FlexShrink>;
    flexWrap?: ResponsiveValue<FlexWrap>;
    float?: ResponsiveValue<Float>;
    fontFamily?: ResponsiveValue<FontFamily>;
    fontSize?: ResponsiveValue<number | "small" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller">;
    fontStyle?: ResponsiveValue<FontStyle>;
    fontWeight?: ResponsiveValue<string | number>;
    gap?: ResponsiveValue<Gap<Length>>;
    gridArea?: ResponsiveValue<GridArea>;
    gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>;
    gridAutoFlow?: ResponsiveValue<GridAutoFlow>;
    gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>;
    gridColumn?: ResponsiveValue<GridColumn>;
    gridColumnEnd?: ResponsiveValue<GridColumnEnd>;
    gridColumnGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    gridColumnStart?: ResponsiveValue<GridColumnStart>;
    gridGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    gridRow?: ResponsiveValue<GridRow>;
    gridRowEnd?: ResponsiveValue<GridRowEnd>;
    gridRowGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    gridRowStart?: ResponsiveValue<GridRowStart>;
    gridTemplate?: ResponsiveValue<GridTemplate>;
    gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>;
    gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>;
    gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>;
    h?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content">;
    height?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content">;
    hideBelow?: ResponsiveValue<string>;
    hideFrom?: ResponsiveValue<string>;
    hueRotate?: ResponsiveValue<Length>;
    inlineSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">;
    inset?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    insetBlock?: ResponsiveValue<InsetBlock<0 | string & {}>>;
    insetBlockEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    insetBlockStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    insetEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    insetInline?: ResponsiveValue<InsetInline<0 | string & {}>>;
    insetInlineEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    insetInlineStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    insetStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    insetX?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    insetY?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    invert?: ResponsiveValue<Length>;
    isTruncated?: boolean;
    isolation?: ResponsiveValue<Isolation>;
    justifyContent?: ResponsiveValue<JustifyContent>;
    justifyItems?: ResponsiveValue<JustifyItems>;
    justifySelf?: ResponsiveValue<JustifySelf>;
    layerStyle?: ResponsiveValue<string>;
    left?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    letterSpacing?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal">;
    lineHeight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | number & {}>;
    listStyleImage?: ResponsiveValue<ListStyleImage>;
    listStyleImg?: ResponsiveValue<ListStyleImage>;
    listStylePos?: ResponsiveValue<ListStylePosition>;
    listStylePosition?: ResponsiveValue<ListStylePosition>;
    listStyleType?: ResponsiveValue<ListStyleType>;
    m?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    margin?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginBlock?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginBlockEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginBlockStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginBottom?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginInline?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginInlineEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginInlineStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginLeft?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginRight?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginTop?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginX?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    marginY?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    maxBlockSize?: ResponsiveValue<number | "none" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-webkit-fill-available">;
    maxH?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    maxHeight?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    maxInlineSize?: ResponsiveValue<number | "none" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">;
    maxW?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    maxWidth?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    mb?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    me?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    minBlockSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-webkit-fill-available">;
    minH?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    minHeight?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    minInlineSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">;
    minW?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">;
    minWidth?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">;
    mixBlendMode?: ResponsiveValue<MixBlendMode>;
    ml?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    mr?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    ms?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    mt?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    mx?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    my?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    noOfLines?: ResponsiveValue<number>;
    objectFit?: ResponsiveValue<ObjectFit>;
    objectPosition?: ResponsiveValue<ObjectPosition<Length>>;
    opacity?: ResponsiveValue<Opacity>;
    order?: ResponsiveValue<Order>;
    outline?: ResponsiveValue<Outline<Length>>;
    outlineColor?: ResponsiveValue<string | number | string & {}>;
    outlineOffset?: ResponsiveValue<OutlineOffset<Length>>;
    overflow?: ResponsiveValue<Overflow>;
    overflowWrap?: ResponsiveValue<OverflowWrap>;
    overflowX?: ResponsiveValue<OverflowX>;
    overflowY?: ResponsiveValue<OverflowY>;
    overscroll?: ResponsiveValue<OverscrollBehavior>;
    overscrollBehavior?: ResponsiveValue<OverscrollBehavior>;
    overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>;
    overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>;
    overscrollX?: ResponsiveValue<OverscrollBehaviorX>;
    overscrollY?: ResponsiveValue<OverscrollBehaviorY>;
    p?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    padding?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingBlock?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingBlockEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingBlockStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingBottom?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingInline?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingInlineEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingInlineStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingTop?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingX?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    paddingY?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    pb?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    pe?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    pl?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    placeContent?: ResponsiveValue<PlaceContent>;
    placeItems?: ResponsiveValue<PlaceItems>;
    placeSelf?: ResponsiveValue<PlaceSelf>;
    pointerEvents?: ResponsiveValue<PointerEvents>;
    pos?: ResponsiveValue<Position>;
    position?: ResponsiveValue<Position>;
    pr?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    ps?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    pt?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    px?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    py?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    resize?: ResponsiveValue<Resize>;
    right?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    ring?: ResponsiveValue<Length>;
    ringColor?: ResponsiveValue<string | number | string & {}>;
    ringInset?: ResponsiveValue<"none" | "inset">;
    ringOffset?: ResponsiveValue<Length>;
    ringOffsetColor?: ResponsiveValue<string | number | string & {}>;
    rotate?: ResponsiveValue<Length>;
    rounded?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedBottom?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedBottomEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedBottomLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedBottomRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedBottomStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedTop?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedTopEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedTopLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedTopRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    roundedTopStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    rowGap?: ResponsiveValue<RowGap<Length>>;
    saturate?: ResponsiveValue<Length>;
    scale?: ResponsiveValue<Length>;
    scaleX?: ResponsiveValue<Length>;
    scaleY?: ResponsiveValue<Length>;
    scrollBehavior?: ResponsiveValue<ScrollBehavior>;
    scrollMargin?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollMarginBottom?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollMarginLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollMarginRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollMarginTop?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollMarginX?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollMarginY?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollPadding?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollPaddingBottom?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollPaddingLeft?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollPaddingRight?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollPaddingTop?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollPaddingX?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollPaddingY?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    scrollSnapAlign?: ResponsiveValue<ScrollSnapAlign>;
    scrollSnapStop?: ResponsiveValue<ScrollSnapStop>;
    scrollSnapType?: ResponsiveValue<ScrollSnapType>;
    shadow?: ResponsiveValue<(number | BoxShadow)>;
    skewX?: ResponsiveValue<Length>;
    skewY?: ResponsiveValue<Length>;
    srOnly?: true | "focusable";
    stroke?: ResponsiveValue<string | number | string & {}>;
    textAlign?: ResponsiveValue<TextAlign>;
    textColor?: ResponsiveValue<string | number | string & {}>;
    textDecor?: ResponsiveValue<number | "blink" | "none" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">;
    textDecoration?: ResponsiveValue<number | "blink" | "none" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">;
    textDecorationColor?: ResponsiveValue<string | number | string & {}>;
    textDecorationLine?: ResponsiveValue<TextDecorationLine>;
    textDecorationStyle?: ResponsiveValue<TextDecorationStyle>;
    textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>;
    textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>;
    textOverflow?: ResponsiveValue<TextOverflow>;
    textShadow?: ResponsiveValue<(number | TextShadow)>;
    textStyle?: ResponsiveValue<string>;
    textTransform?: ResponsiveValue<TextTransform>;
    textUnderlineOffset?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    top?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    transform?: ResponsiveValue<("auto" | Transform | "auto-gpu")>;
    transformOrigin?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    transition?: ResponsiveValue<Transition<string & {}>>;
    transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>;
    transitionDuration?: ResponsiveValue<string>;
    transitionProperty?: ResponsiveValue<TransitionProperty>;
    transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>;
    translateX?: ResponsiveValue<Length>;
    translateY?: ResponsiveValue<Length>;
    userSelect?: ResponsiveValue<UserSelect>;
    verticalAlign?: ResponsiveValue<VerticalAlign<Length>>;
    visibility?: ResponsiveValue<Visibility>;
    w?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">;
    whiteSpace?: ResponsiveValue<WhiteSpace>;
    width?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">;
    willChange?: ResponsiveValue<WillChange>;
    wordBreak?: ResponsiveValue<WordBreak>;
    zIndex?: ResponsiveValue<ZIndex>;
}

Hierarchy (view full)

Properties

alignContent? alignItems? alignSelf? animation? appearance? apply? aspectRatio? backdropBlur? backdropBrightness? backdropContrast? backdropFilter? backdropHueRotate? backdropInvert? backdropSaturate? background? backgroundAttachment? backgroundBlendMode? backgroundClip? backgroundColor? backgroundImage? backgroundPosition? backgroundRepeat? backgroundSize? bg? bgAttachment? bgBlendMode? bgClip? bgColor? bgGradient? bgImage? bgImg? bgPos? bgPosition? bgRepeat? bgSize? blendMode? blockSize? blur? border? borderBlock? borderBlockEnd? borderBlockEndColor? borderBlockEndStyle? borderBlockEndWidth? borderBlockStart? borderBlockStartColor? borderBlockStartStyle? borderBlockStartWidth? borderBottom? borderBottomColor? borderBottomEndRadius? borderBottomLeftRadius? borderBottomRadius? borderBottomRightRadius? borderBottomStartRadius? borderBottomStyle? borderBottomWidth? borderColor? borderEnd? borderEndColor? borderEndEndRadius? borderEndRadius? borderEndStartRadius? borderEndStyle? borderEndWidth? borderInline? borderInlineEnd? borderInlineEndColor? borderInlineEndRadius? borderInlineEndStyle? borderInlineEndWidth? borderInlineStart? borderInlineStartColor? borderInlineStartRadius? borderInlineStartStyle? borderInlineStartWidth? borderLeft? borderLeftColor? borderLeftRadius? borderLeftStyle? borderLeftWidth? borderRadius? borderRight? borderRightColor? borderRightRadius? borderRightStyle? borderRightWidth? borderStart? borderStartColor? borderStartEndRadius? borderStartRadius? borderStartStartRadius? borderStartStyle? borderStartWidth? borderStyle? borderTop? borderTopColor? borderTopEndRadius? borderTopLeftRadius? borderTopRadius? borderTopRightRadius? borderTopStartRadius? borderTopStyle? borderTopWidth? borderWidth? borderX? borderY? bottom? boxDecorationBreak? boxShadow? boxSize? boxSizing? brightness? clipPath? color? columnGap? contrast? cursor? display? dropShadow? fill? filter? flex? flexBasis? flexDir? flexDirection? flexFlow? flexGrow? flexShrink? flexWrap? float? fontFamily? fontSize? fontStyle? fontWeight? gap? gridArea? gridAutoColumns? gridAutoFlow? gridAutoRows? gridColumn? gridColumnEnd? gridColumnGap? gridColumnStart? gridGap? gridRow? gridRowEnd? gridRowGap? gridRowStart? gridTemplate? gridTemplateAreas? gridTemplateColumns? gridTemplateRows? h? height? hideBelow? hideFrom? hueRotate? inlineSize? inset? insetBlock? insetBlockEnd? insetBlockStart? insetEnd? insetInline? insetInlineEnd? insetInlineStart? insetStart? insetX? insetY? invert? isTruncated? isolation? justifyContent? justifyItems? justifySelf? layerStyle? left? letterSpacing? lineHeight? listStyleImage? listStyleImg? listStylePos? listStylePosition? listStyleType? m? margin? marginBlock? marginBlockEnd? marginBlockStart? marginBottom? marginEnd? marginInline? marginInlineEnd? marginInlineStart? marginLeft? marginRight? marginStart? marginTop? marginX? marginY? maxBlockSize? maxH? maxHeight? maxInlineSize? maxW? maxWidth? mb? me? minBlockSize? minH? minHeight? minInlineSize? minW? minWidth? mixBlendMode? ml? mr? ms? mt? mx? my? noOfLines? objectFit? objectPosition? opacity? order? outline? outlineColor? outlineOffset? overflow? overflowWrap? overflowX? overflowY? overscroll? overscrollBehavior? overscrollBehaviorX? overscrollBehaviorY? overscrollX? overscrollY? p? padding? paddingBlock? paddingBlockEnd? paddingBlockStart? paddingBottom? paddingEnd? paddingInline? paddingInlineEnd? paddingInlineStart? paddingLeft? paddingRight? paddingStart? paddingTop? paddingX? paddingY? pb? pe? pl? placeContent? placeItems? placeSelf? pointerEvents? pos? position? pr? ps? pt? px? py? resize? right? ring? ringColor? ringInset? ringOffset? ringOffsetColor? rotate? rounded? roundedBottom? roundedBottomEnd? roundedBottomLeft? roundedBottomRight? roundedBottomStart? roundedEnd? roundedLeft? roundedRight? roundedStart? roundedTop? roundedTopEnd? roundedTopLeft? roundedTopRight? roundedTopStart? rowGap? saturate? scale? scaleX? scaleY? scrollBehavior? scrollMargin? scrollMarginBottom? scrollMarginLeft? scrollMarginRight? scrollMarginTop? scrollMarginX? scrollMarginY? scrollPadding? scrollPaddingBottom? scrollPaddingLeft? scrollPaddingRight? scrollPaddingTop? scrollPaddingX? scrollPaddingY? scrollSnapAlign? scrollSnapStop? scrollSnapType? shadow? skewX? skewY? srOnly? stroke? textAlign? textColor? textDecor? textDecoration? textDecorationColor? textDecorationLine? textDecorationStyle? textDecorationThickness? textIndent? textOverflow? textShadow? textStyle? textTransform? textUnderlineOffset? top? transform? transformOrigin? transition? transitionDelay? transitionDuration? transitionProperty? transitionTimingFunction? translateX? translateY? userSelect? verticalAlign? visibility? w? whiteSpace? width? willChange? wordBreak? zIndex?

Properties

alignContent?: ResponsiveValue<AlignContent>

The CSS align-content property.

It defines the distribution of space between and around content items along a flexbox cross-axis or a grid's block axis.

alignItems?: ResponsiveValue<AlignItems>

The CSS align-items property.

It defines the align-self value on all direct children as a group.

  • In Flexbox, it controls the alignment of items on the Cross Axis.
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
alignSelf?: ResponsiveValue<AlignSelf>

The CSS align-self property.

It works like align-items, but applies only to a single flexbox item, instead of all of them.

animation?: ResponsiveValue<Animation<string & {}>>

The CSS animation property

appearance?: ResponsiveValue<Appearance>

The CSS appearance property

apply?: ResponsiveValue<string>

Apply theme-aware style objects in theme

Example

<Box apply="styles.h3">This is a div</Box>

This will apply styles defined in theme.styles.h3

aspectRatio?: ResponsiveValue<AspectRatio>

The CSS aspect-ratio property

backdropBlur?: ResponsiveValue<{}>

Sets the backdrop-blur filter value of an element. Value is assigned to --chakra-backdrop-blur css variable

Type declaration

    backdropBrightness?: ResponsiveValue<Length>

    Sets the backdrop-brightness filter value of an element. Value is assigned to --chakra-backdrop-brightness css variable

    backdropContrast?: ResponsiveValue<Length>

    Sets the backdrop-contrast filter value of an element. Value is assigned to --chakra-backdrop-contrast css variable

    backdropFilter?: ResponsiveValue<("auto" | BackdropFilter)>

    The CSS backdrop-filter property. When set to auto, you allow Chakra UI to define the color based on the backdrop filter style props (backdropBlur, backdropSaturate, etc.)

    backdropHueRotate?: ResponsiveValue<Length>

    Sets the backdrop-hue-rotate filter value of an element. Value is assigned to --chakra-backdrop-hue-rotate css variable

    backdropInvert?: ResponsiveValue<Length>

    Sets the backdrop-invert filter value of an element. Value is assigned to --chakra-backdrop-invert css variable

    backdropSaturate?: ResponsiveValue<Length>

    Sets the backdrop-saturate filter value of an element. Value is assigned to --chakra-backdrop-saturate css variable

    background?: ResponsiveValue<string | number | string & {}>

    The CSS background property

    backgroundAttachment?: ResponsiveValue<BackgroundAttachment>

    The CSS background-attachment property

    backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>

    The CSS background-blend-mode property

    backgroundClip?: ResponsiveValue<("text" | BackgroundClip)>

    The CSS background-clip property

    backgroundColor?: ResponsiveValue<string | number | string & {}>

    The CSS background-color property

    backgroundImage?: ResponsiveValue<BackgroundImage>

    The CSS background-image property

    backgroundPosition?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

    The CSS background-position property

    backgroundRepeat?: ResponsiveValue<BackgroundRepeat>

    The CSS background-repeat property

    backgroundSize?: ResponsiveValue<number | string & {} | "auto" | "contain" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "cover">

    The CSS background-size property

    bg?: ResponsiveValue<string | number | string & {}>

    The CSS background property

    bgAttachment?: ResponsiveValue<BackgroundAttachment>

    The CSS background-attachment property

    bgBlendMode?: ResponsiveValue<BackgroundBlendMode>

    The CSS background-blend-mode property

    bgClip?: ResponsiveValue<("text" | BackgroundClip)>

    The CSS background-clip property

    bgColor?: ResponsiveValue<string | number | string & {}>

    The CSS background-color property

    bgGradient?: ResponsiveValue<BackgroundImage>

    The background-gradient shorthand

    bgImage?: ResponsiveValue<BackgroundImage>

    The CSS background-image property

    bgImg?: ResponsiveValue<BackgroundImage>

    The CSS background-image property

    bgPos?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

    The CSS background-position property

    bgPosition?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

    The CSS background-position property

    bgRepeat?: ResponsiveValue<BackgroundRepeat>

    The CSS background-repeat property

    bgSize?: ResponsiveValue<number | string & {} | "auto" | "contain" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "cover">

    The CSS background-size property

    blendMode?: ResponsiveValue<MixBlendMode>

    The blend-mode property

    blockSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content">
    blur?: ResponsiveValue<{}>

    Sets the blur filter value of an element. Value is assigned to --chakra-filter css variable

    Type declaration

      border?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">

      The CSS border property

      borderBlock?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">
      borderBlockEnd?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">
      borderBlockEndColor?: ResponsiveValue<string | number | string & {}>
      borderBlockEndStyle?: ResponsiveValue<BorderBlockEndStyle>
      borderBlockEndWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">
      borderBlockStart?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">
      borderBlockStartColor?: ResponsiveValue<string | number | string & {}>
      borderBlockStartStyle?: ResponsiveValue<BorderBlockStartStyle>
      borderBlockStartWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">
      borderBottom?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">

      The CSS border-bottom property

      borderBottomColor?: ResponsiveValue<string | number | string & {}>

      The CSS border-bottom-color property

      borderBottomEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      borderBottomLeftRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-bottom-left-radius property

      borderBottomRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-bottom-radius property

      borderBottomRightRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-bottom-right-radius property

      borderBottomStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      borderBottomStyle?: ResponsiveValue<BorderBottomStyle>

      The CSS border-bottom-style property

      borderBottomWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

      The CSS border-bottom-width property

      borderColor?: ResponsiveValue<string | number | string & {}>

      The CSS border-color property

      borderEnd?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">
      borderEndColor?: ResponsiveValue<BorderInlineEndColor>
      borderEndEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      borderEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, borderEndRadius is equivalent to borderRightRadius. When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

      borderEndStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      borderEndStyle?: ResponsiveValue<BorderInlineEndStyle>
      borderEndWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">
      borderInline?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">
      borderInlineEnd?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">
      borderInlineEndColor?: ResponsiveValue<string | number | string & {}>
      borderInlineEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

      borderInlineEndStyle?: ResponsiveValue<BorderInlineEndStyle>
      borderInlineEndWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">
      borderInlineStart?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">
      borderInlineStartColor?: ResponsiveValue<string | number | string & {}>
      borderInlineStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

      borderInlineStartStyle?: ResponsiveValue<BorderInlineStartStyle>
      borderInlineStartWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">
      borderLeft?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">

      The CSS border-left property

      borderLeftColor?: ResponsiveValue<string | number | string & {}>

      The CSS border-left-color property

      borderLeftRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-left-radius property

      borderLeftStyle?: ResponsiveValue<BorderLeftStyle>

      The CSS border-left-style property

      borderLeftWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

      The CSS border-left-width property

      borderRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-radius property

      borderRight?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">

      The CSS border-right property

      borderRightColor?: ResponsiveValue<string | number | string & {}>

      The CSS border-right-color property

      borderRightRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-right-radius property

      borderRightStyle?: ResponsiveValue<BorderRightStyle>

      The CSS border-right-styles property

      borderRightWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

      The CSS border-right-width property

      borderStart?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">
      borderStartColor?: ResponsiveValue<BorderInlineStartColor>
      borderStartEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      borderStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

      borderStartStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      borderStartStyle?: ResponsiveValue<BorderInlineStartStyle>
      borderStartWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">
      borderStyle?: ResponsiveValue<BorderStyle>

      The CSS border-style property

      borderTop?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">

      The CSS border-top property

      borderTopColor?: ResponsiveValue<string | number | string & {}>

      The CSS border-top-color property

      borderTopEndRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      borderTopLeftRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-top-left-radius property

      borderTopRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-top-radius property

      borderTopRightRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-top-right-radius property

      borderTopStartRadius?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      borderTopStyle?: ResponsiveValue<BorderTopStyle>

      The CSS border-top-style property

      borderTopWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

      The CSS border-top-width property

      borderWidth?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

      The CSS border-width property

      borderX?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">

      The CSS border-right and border-left property

      borderY?: ResponsiveValue<number | "hidden" | "none" | string & {} | "inset" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "medium" | "thick" | "thin">

      The CSS border-top and border-bottom property

      bottom?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS bottom property

      boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>

      The CSS box-decoration property

      boxShadow?: ResponsiveValue<(number | BoxShadow)>

      The box-shadow property

      boxSize?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">

      The CSS width and height property

      boxSizing?: BoxSizing

      The CSS box-sizing property

      brightness?: ResponsiveValue<Length>

      Sets the brightness filter value of an element. Value is assigned to --chakra-brightness css variable

      clipPath?: ResponsiveValue<ClipPath>

      The CSS clip-path property.

      It creates a clipping region that sets what part of an element should be shown.

      color?: ResponsiveValue<string | number | string & {}>

      The CSS color property

      columnGap?: ResponsiveValue<ColumnGap<Length>>

      The CSS column-gap property.

      It sets the size of the gap (gutter) between an element's columns.

      contrast?: ResponsiveValue<Length>

      Sets the contrast filter value of an element. Value is assigned to --chakra-contrast css variable

      cursor?: ResponsiveValue<Cursor>

      The CSS cursor property

      display?: ResponsiveValue<Display>

      The CSS display property

      dropShadow?: ResponsiveValue<BoxShadow>

      Sets the drop-shadow filter value of an element. Value is assigned to --chakra-drop-shadow css variable

      fill?: ResponsiveValue<string | number | string & {}>

      The CSS fill property for icon svgs and paths

      filter?: ResponsiveValue<("auto" | Filter)>

      The CSS filter property. When set to auto, you allow Chakra UI to define the color based on the filter style props (blur, saturate, etc.)

      flex?: ResponsiveValue<Flex<Length>>

      The CSS flex property.

      It defines how a flex item will grow or shrink to fit the space available in its flex container.

      flexBasis?: ResponsiveValue<FlexBasis<Length>>

      The CSS flex-basis property.

      It defines the initial main size of a flex item.

      flexDir?: ResponsiveValue<FlexDirection>

      The CSS flex-direction property.

      It defines how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

      flexDirection?: ResponsiveValue<FlexDirection>

      The CSS flex-direction property.

      It defines how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

      flexFlow?: ResponsiveValue<FlexFlow>

      The CSS flex-flow property.

      It is a shorthand property for flex-direction and flex-wrap. It specifies the direction of a flex container, as well as its wrapping behavior.

      flexGrow?: ResponsiveValue<FlexGrow>

      The CSS flex-grow property.

      It defines how much a flexbox item should grow if there's space available.

      flexShrink?: ResponsiveValue<FlexShrink>

      The CSS flex-shrink property.

      It defines how much a flexbox item should shrink if there's not enough space available.

      flexWrap?: ResponsiveValue<FlexWrap>

      The CSS flex-wrap property.

      It defines whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

      float?: ResponsiveValue<Float>

      The CSS float property

      fontFamily?: ResponsiveValue<FontFamily>

      The CSS font-family property

      fontSize?: ResponsiveValue<number | "small" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller">

      The CSS font-size property

      fontStyle?: ResponsiveValue<FontStyle>

      The CSS font-style property

      fontWeight?: ResponsiveValue<string | number>

      The CSS font-weight property

      gap?: ResponsiveValue<Gap<Length>>

      The CSS gap property.

      It defines the gap between items in both flex and grid contexts.

      gridArea?: ResponsiveValue<GridArea>

      The CSS grid-areas property.

      It specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

      gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>

      The CSS grid-auto-columns property.

      It specifies the size of an implicitly-created grid column track or pattern of tracks.

      gridAutoFlow?: ResponsiveValue<GridAutoFlow>

      The CSS grid-auto-flow property

      It controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

      gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>

      The CSS grid-auto-rows property.

      It specifies the size of an implicitly-created grid row track or pattern of tracks.

      gridColumn?: ResponsiveValue<GridColumn>

      The CSS grid-column property.

      It specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

      gridColumnEnd?: ResponsiveValue<GridColumnEnd>

      The CSS grid-column property

      It specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

      gridColumnGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS grid-column-gap property.

      It defines the size of the gap (gutter) between an element's columns.

      gridColumnStart?: ResponsiveValue<GridColumnStart>

      The CSS grid-column property.

      It specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement

      gridGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS grid-gap property.

      It defines the gaps (gutters) between rows and columns

      gridRow?: ResponsiveValue<GridRow>

      The CSS grid-row property

      It specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

      gridRowEnd?: ResponsiveValue<GridRowEnd>

      The CSS grid-row-end property

      It specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

      gridRowGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS grid-row-gap property.

      It defines the size of the gap (gutter) between an element's grid rows.

      gridRowStart?: ResponsiveValue<GridRowStart>

      The CSS grid-row-start property

      It specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

      gridTemplate?: ResponsiveValue<GridTemplate>

      The CSS grid-template property.

      It is a shorthand property for defining grid columns, rows, and areas.

      gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>

      The CSS grid-template-areas property.

      gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>

      The CSS grid-template-columns property

      It defines the line names and track sizing functions of the grid columns.

      gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>

      The CSS grid-template-rows property.

      It defines the line names and track sizing functions of the grid rows.

      h?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content">

      The CSS height property

      height?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content">

      The CSS height property

      hideBelow?: ResponsiveValue<string>

      Hides an element below the specified breakpoint

      hideFrom?: ResponsiveValue<string>

      Hides an element from the specified breakpoint and up

      hueRotate?: ResponsiveValue<Length>

      Sets the hue-rotate filter value of an element. Value is assigned to --chakra-hue-rotate css variable

      inlineSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">
      inset?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS left, right, top, bottom property

      insetBlock?: ResponsiveValue<InsetBlock<0 | string & {}>>
      insetBlockEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      insetBlockStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      insetEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When the direction is ltr, insetEnd is equivalent to right. When the direction is rtl, insetEnd is equivalent to left.

      insetInline?: ResponsiveValue<InsetInline<0 | string & {}>>
      insetInlineEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When the direction is ltr, insetInlineEnd is equivalent to right. When the direction is rtl, insetInlineEnd is equivalent to left.

      insetInlineStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      insetStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When the direction is start, end is equivalent to left. When the direction is start, end is equivalent to right.

      insetX?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS left, and right property

      insetY?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS top, and bottom property

      invert?: ResponsiveValue<Length>

      Sets the invert filter value of an element. Value is assigned to --chakra-invert css variable

      isTruncated?: boolean

      If true, it clamps truncate a text after one line.

      isolation?: ResponsiveValue<Isolation>

      The CSS isolation property

      justifyContent?: ResponsiveValue<JustifyContent>

      The CSS justify-content property.

      It defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

      justifyItems?: ResponsiveValue<JustifyItems>

      The CSS justify-items property.

      It defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

      justifySelf?: ResponsiveValue<JustifySelf>

      The CSS justify-self property.

      It defines the way a box is justified inside its alignment container along the appropriate axis.

      layerStyle?: ResponsiveValue<string>

      The layer style object to apply. Note: Styles must be located in theme.layerStyles

      left?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS left property

      letterSpacing?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal">

      The CSS letter-spacing property

      lineHeight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | number & {}>

      The CSS line-height property

      listStyleImage?: ResponsiveValue<ListStyleImage>

      The CSS list-style-image property

      listStyleImg?: ResponsiveValue<ListStyleImage>

      The CSS list-style-image property

      listStylePos?: ResponsiveValue<ListStylePosition>

      The CSS list-style-position property

      listStylePosition?: ResponsiveValue<ListStylePosition>

      The CSS list-style-position property

      listStyleType?: ResponsiveValue<ListStyleType>
      m?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on top, left, bottom and right

      margin?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on top, left, bottom and right

      marginBlock?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      marginBlockEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      marginBlockStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      marginBottom?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on bottom

      marginEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, marginEnd is equivalent to marginRight. When direction is rtl, marginEnd is equivalent to marginLeft.

      marginInline?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      marginInlineEnd?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, marginInlineEnd is equivalent to marginRight. When direction is rtl, marginInlineEnd is equivalent to marginLeft.

      marginInlineStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, marginInlineStart is equivalent to marginLeft. When direction is rtl, marginInlineStart is equivalent to marginRight.

      marginLeft?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on left

      marginRight?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on right

      marginStart?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, marginStart is equivalent to marginLeft. When direction is rtl, marginStart is equivalent to marginRight.

      marginTop?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on top

      marginX?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on left and right

      marginY?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on top and bottom

      maxBlockSize?: ResponsiveValue<number | "none" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-webkit-fill-available">
      maxH?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

      The CSS max-height property

      maxHeight?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

      The CSS max-height property

      maxInlineSize?: ResponsiveValue<number | "none" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">
      maxW?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

      The CSS max-width property

      maxWidth?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

      The CSS max-width property

      mb?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on bottom

      me?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, me is equivalent to marginRight. When direction is rtl, me is equivalent to marginLeft.

      minBlockSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-webkit-fill-available">
      minH?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

      The CSS min-height property

      minHeight?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

      The CSS min-height property

      minInlineSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">
      minW?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">

      The CSS min-width property

      minWidth?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">

      The CSS min-width property

      mixBlendMode?: ResponsiveValue<MixBlendMode>

      The mix-blend-mode property

      ml?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on left

      mr?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on right

      ms?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, ms is equivalent to marginLeft. When direction is rtl, ms is equivalent to marginRight.

      mt?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on top

      mx?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on left and right

      my?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Margin on top and bottom

      noOfLines?: ResponsiveValue<number>

      Used to visually truncate a text after a number of lines.

      objectFit?: ResponsiveValue<ObjectFit>

      The CSS object-fit property

      objectPosition?: ResponsiveValue<ObjectPosition<Length>>

      The CSS object-position property

      opacity?: ResponsiveValue<Opacity>

      The CSS opacity property

      order?: ResponsiveValue<Order>

      The CSS order property.

      It defines the order to lay out an item in a flex or grid container.

      outline?: ResponsiveValue<Outline<Length>>

      The CSS outline property

      outlineColor?: ResponsiveValue<string | number | string & {}>

      The CSS outline-color property

      outlineOffset?: ResponsiveValue<OutlineOffset<Length>>

      The CSS outline-offset property

      overflow?: ResponsiveValue<Overflow>

      The CSS overflow property

      overflowWrap?: ResponsiveValue<OverflowWrap>

      The CSS overflow-wrap property

      overflowX?: ResponsiveValue<OverflowX>

      The CSS overflow-x property

      overflowY?: ResponsiveValue<OverflowY>

      The CSS overflow-y property

      overscroll?: ResponsiveValue<OverscrollBehavior>

      The CSS overscroll-behavior property

      overscrollBehavior?: ResponsiveValue<OverscrollBehavior>

      The CSS overscroll-behavior property

      overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>

      The CSS overscroll-behavior-x property

      overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>

      The CSS overscroll-behavior-y property

      overscrollX?: ResponsiveValue<OverscrollBehaviorX>

      The CSS overscroll-behavior-x property

      overscrollY?: ResponsiveValue<OverscrollBehaviorY>

      The CSS overscroll-behavior-y property

      p?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on top, left, bottom and right

      padding?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on top, left, bottom and right

      paddingBlock?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      paddingBlockEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      paddingBlockStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      paddingBottom?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on bottom

      paddingEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, paddingEnd is equivalent to paddingRight. When direction is rtl, paddingEnd is equivalent to paddingLeft.

      paddingInline?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      paddingInlineEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, paddingInlineEnd is equivalent to paddingRight. When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

      paddingInlineStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, paddingInlineStart is equivalent to paddingLeft. When direction is rtl, paddingInlineStart is equivalent to paddingRight.

      paddingLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on left

      paddingRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on right

      paddingStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, paddingStart is equivalent to paddingLeft. When direction is rtl, paddingStart is equivalent to paddingRight.

      paddingTop?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on top

      paddingX?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on left and right

      paddingY?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on top and bottom

      pb?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on bottom

      pe?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, pe is equivalent to paddingRight. When direction is rtl, pe is equivalent to paddingLeft.

      pl?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on left

      placeContent?: ResponsiveValue<PlaceContent>

      The CSS place-content property.

      It allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.

      placeItems?: ResponsiveValue<PlaceItems>

      The CSS place-items property.

      It allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flex.

      placeSelf?: ResponsiveValue<PlaceSelf>

      The CSS place-self property.

      It allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox.

      pointerEvents?: ResponsiveValue<PointerEvents>

      The CSS pointer-events property

      pos?: ResponsiveValue<Position>

      The CSS position property

      position?: ResponsiveValue<Position>

      The CSS position property

      pr?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on right

      ps?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, ps is equivalent to paddingLeft. When direction is rtl, ps is equivalent to paddingRight.

      pt?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on top

      px?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on left and right

      py?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      Padding on top and bottom

      resize?: ResponsiveValue<Resize>

      The CSS resize property

      right?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS right property

      ring?: ResponsiveValue<Length>

      Creates outline rings with CSS box-shadow property

      ringColor?: ResponsiveValue<string | number | string & {}>

      The color of the outline ring

      ringInset?: ResponsiveValue<"none" | "inset">

      If the outline ring should an inset

      ringOffset?: ResponsiveValue<Length>

      The thickness of the offset shadow when using outline rings

      ringOffsetColor?: ResponsiveValue<string | number | string & {}>

      The color of the offset shadow when adding outline rings

      rotate?: ResponsiveValue<Length>

      Sets the rotation value of the element

      rounded?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-radius property

      roundedBottom?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-bottom-radius property

      roundedBottomEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      roundedBottomLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-bottom-left-radius property

      roundedBottomRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-bottom-right-radius property

      roundedBottomStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      roundedEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, roundedEnd is equivalent to borderRightRadius. When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

      roundedLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-left-radius property

      roundedRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-right-radius property

      roundedStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      When direction is ltr, roundedEnd is equivalent to borderRightRadius. When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

      roundedTop?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-top-radius property

      roundedTopEnd?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      roundedTopLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-top-left-radius property

      roundedTopRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS border-top-right-radius property

      roundedTopStart?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      rowGap?: ResponsiveValue<RowGap<Length>>

      The CSS row-gap property.

      It sets the size of the gap (gutter) between an element's grid rows.

      saturate?: ResponsiveValue<Length>

      Sets the saturation filter value of an element. Value is assigned to --chakra-saturate css variable

      scale?: ResponsiveValue<Length>

      Sets the scale value of the element

      scaleX?: ResponsiveValue<Length>

      Scale value of an elements in the x-direction.

      • Only works if transform=auto
      • It sets the value of --chakra-scale-x
      scaleY?: ResponsiveValue<Length>

      Scale value of an elements in the y-direction.

      • Only works if transform=auto
      • It sets the value of --chakra-scale-y
      scrollBehavior?: ResponsiveValue<ScrollBehavior>
      scrollMargin?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollMarginBottom?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollMarginLeft?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollMarginRight?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollMarginTop?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollMarginX?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollMarginY?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollPadding?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollPaddingBottom?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollPaddingLeft?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollPaddingRight?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollPaddingTop?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollPaddingX?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollPaddingY?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">
      scrollSnapAlign?: ResponsiveValue<ScrollSnapAlign>
      scrollSnapStop?: ResponsiveValue<ScrollSnapStop>
      scrollSnapType?: ResponsiveValue<ScrollSnapType>
      shadow?: ResponsiveValue<(number | BoxShadow)>

      The box-shadow property

      skewX?: ResponsiveValue<Length>

      Skew value of an elements in the x-direction.

      • Only works if transform=auto
      • It sets the value of --chakra-skew-x
      skewY?: ResponsiveValue<Length>

      Skew value of an elements in the y-direction.

      • Only works if transform=auto
      • It sets the value of --chakra-skew-y
      srOnly?: true | "focusable"

      If true, hide an element visually without hiding it from screen readers.

      If focusable, the sr-only styles will be undone, making the element visible to sighted users as well as screen readers.

      stroke?: ResponsiveValue<string | number | string & {}>

      The CSS stroke property for icon svgs and paths

      textAlign?: ResponsiveValue<TextAlign>

      The CSS text-align property

      textColor?: ResponsiveValue<string | number | string & {}>

      The CSS color property

      textDecor?: ResponsiveValue<number | "blink" | "none" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">

      The CSS text-decoration property

      textDecoration?: ResponsiveValue<number | "blink" | "none" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">

      The CSS text-decoration property

      textDecorationColor?: ResponsiveValue<string | number | string & {}>

      The CSS text-decoration-color property

      textDecorationLine?: ResponsiveValue<TextDecorationLine>

      The CSS text-decoration-line property

      textDecorationStyle?: ResponsiveValue<TextDecorationStyle>

      The CSS text-decoration-style property

      textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>

      The CSS text-decoration-thickness property

      textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>

      The CSS text-indent property

      textOverflow?: ResponsiveValue<TextOverflow>

      The CSS text-overflow property

      textShadow?: ResponsiveValue<(number | TextShadow)>

      The text-shadow property

      textStyle?: ResponsiveValue<string>

      The text style object to apply. Note: Styles must be located in theme.textStyles

      textTransform?: ResponsiveValue<TextTransform>

      The CSS text-transform property

      textUnderlineOffset?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS text-underline-offset property

      top?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS top property

      transform?: ResponsiveValue<("auto" | Transform | "auto-gpu")>

      The CSS transform property

      transformOrigin?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

      The CSS transform-origin property

      transition?: ResponsiveValue<Transition<string & {}>>

      The CSS transition property

      transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>

      The CSS transition-delay property

      transitionDuration?: ResponsiveValue<string>

      The CSS transition-duration property

      transitionProperty?: ResponsiveValue<TransitionProperty>

      The CSS transition-property property

      transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>

      The CSS transition-timing-function property

      translateX?: ResponsiveValue<Length>

      Translate value of an elements in the x-direction.

      • Only works if transform=auto
      • It sets the value of --chakra-translate-x
      translateY?: ResponsiveValue<Length>

      Translate value of an elements in the y-direction.

      • Only works if transform=auto
      • It sets the value of --chakra-translate-y
      userSelect?: ResponsiveValue<UserSelect>

      The CSS user-select property

      verticalAlign?: ResponsiveValue<VerticalAlign<Length>>

      The CSS vertical-align property

      visibility?: ResponsiveValue<Visibility>

      The CSS visibility property

      w?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">

      The CSS width property

      whiteSpace?: ResponsiveValue<WhiteSpace>

      The CSS white-space property

      width?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">

      The CSS width property

      willChange?: ResponsiveValue<WillChange>

      The CSS will-change property

      wordBreak?: ResponsiveValue<WordBreak>

      The CSS word-break property

      zIndex?: ResponsiveValue<ZIndex>

      The CSS z-index property

      Generated using TypeDoc