interface SquareProps {
    __css?: SystemStyleObject;
    _active?: SystemStyleObject;
    _activeLink?: SystemStyleObject;
    _activeStep?: SystemStyleObject;
    _after?: SystemStyleObject;
    _autofill?: SystemStyleObject;
    _before?: SystemStyleObject;
    _checked?: SystemStyleObject;
    _dark?: SystemStyleObject;
    _disabled?: SystemStyleObject;
    _empty?: SystemStyleObject;
    _even?: SystemStyleObject;
    _expanded?: SystemStyleObject;
    _first?: SystemStyleObject;
    _firstLetter?: SystemStyleObject;
    _focus?: SystemStyleObject;
    _focusVisible?: SystemStyleObject;
    _focusWithin?: SystemStyleObject;
    _fullScreen?: SystemStyleObject;
    _grabbed?: SystemStyleObject;
    _groupActive?: SystemStyleObject;
    _groupChecked?: SystemStyleObject;
    _groupDisabled?: SystemStyleObject;
    _groupFocus?: SystemStyleObject;
    _groupFocusVisible?: SystemStyleObject;
    _groupFocusWithin?: SystemStyleObject;
    _groupHover?: SystemStyleObject;
    _groupInvalid?: SystemStyleObject;
    _hidden?: SystemStyleObject;
    _highlighted?: SystemStyleObject;
    _horizontal?: SystemStyleObject;
    _hover?: SystemStyleObject;
    _indeterminate?: SystemStyleObject;
    _invalid?: SystemStyleObject;
    _last?: SystemStyleObject;
    _light?: SystemStyleObject;
    _loading?: SystemStyleObject;
    _ltr?: SystemStyleObject;
    _mediaDark?: SystemStyleObject;
    _mediaReduceMotion?: SystemStyleObject;
    _notFirst?: SystemStyleObject;
    _notLast?: SystemStyleObject;
    _odd?: SystemStyleObject;
    _peerActive?: SystemStyleObject;
    _peerChecked?: SystemStyleObject;
    _peerDisabled?: SystemStyleObject;
    _peerFocus?: SystemStyleObject;
    _peerFocusVisible?: SystemStyleObject;
    _peerFocusWithin?: SystemStyleObject;
    _peerHover?: SystemStyleObject;
    _peerInvalid?: SystemStyleObject;
    _peerPlaceholderShown?: SystemStyleObject;
    _placeholder?: SystemStyleObject;
    _placeholderShown?: SystemStyleObject;
    _pressed?: SystemStyleObject;
    _readOnly?: SystemStyleObject;
    _rtl?: SystemStyleObject;
    _selected?: SystemStyleObject;
    _selection?: SystemStyleObject;
    _valid?: SystemStyleObject;
    _vertical?: SystemStyleObject;
    _visited?: SystemStyleObject;
    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)>;
    boxSizing?: BoxSizing;
    brightness?: ResponsiveValue<Length>;
    centerContent?: boolean;
    clipPath?: ResponsiveValue<ClipPath>;
    color?: ResponsiveValue<string | number | string & {}>;
    columnGap?: ResponsiveValue<ColumnGap<Length>>;
    contrast?: ResponsiveValue<Length>;
    css?: Interpolation<{}>;
    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 & {}>>;
    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)>;
    size?: 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">;
    skewX?: ResponsiveValue<Length>;
    skewY?: ResponsiveValue<Length>;
    srOnly?: true | "focusable";
    stroke?: ResponsiveValue<string | number | string & {}>;
    sx?: SystemStyleObject;
    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>;
    whiteSpace?: ResponsiveValue<WhiteSpace>;
    willChange?: ResponsiveValue<WillChange>;
    wordBreak?: ResponsiveValue<WordBreak>;
    zIndex?: ResponsiveValue<ZIndex>;
}

Hierarchy

Properties

__css? _active? _activeLink? _activeStep? _after? _autofill? _before? _checked? _dark? _disabled? _empty? _even? _expanded? _first? _firstLetter? _focus? _focusVisible? _focusWithin? _fullScreen? _grabbed? _groupActive? _groupChecked? _groupDisabled? _groupFocus? _groupFocusVisible? _groupFocusWithin? _groupHover? _groupInvalid? _hidden? _highlighted? _horizontal? _hover? _indeterminate? _invalid? _last? _light? _loading? _ltr? _mediaDark? _mediaReduceMotion? _notFirst? _notLast? _odd? _peerActive? _peerChecked? _peerDisabled? _peerFocus? _peerFocusVisible? _peerFocusWithin? _peerHover? _peerInvalid? _peerPlaceholderShown? _placeholder? _placeholderShown? _pressed? _readOnly? _rtl? _selected? _selection? _valid? _vertical? _visited? 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? boxSizing? brightness? centerContent? clipPath? color? columnGap? contrast? css? 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? 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? size? skewX? skewY? srOnly? stroke? sx? 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? whiteSpace? willChange? wordBreak? zIndex?

Properties

Used for internal css management

Styles for CSS Selector &:active

_activeLink?: SystemStyleObject

Used to style the active link in a navigation Styles for CSS Selector &[aria-current=page]

_activeStep?: SystemStyleObject

Used to style the current step within a process Styles for CSS Selector &[aria-current=step]

Styles for CSS selector &::after

NOTE:When using this, ensure the content is wrapped in a backtick.

Example

<Box _after={{content:`""` }}/>
_autofill?: SystemStyleObject

Styles for CSS Selector &:-webkit-autofill

Styles for CSS selector &::before

NOTE:When using this, ensure the content is wrapped in a backtick.

Example

<Box _before={{content:`""` }}/>

Styles to apply when the ARIA attribute aria-checked is true

  • CSS selector &[aria-checked=true]

Styles for when data-theme is applied to any parent of this component or element.

_disabled?: SystemStyleObject

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

  • &[aria-disabled=true]
  • &:disabled
  • &[data-disabled]
  • &[disabled]

Styles for CSS selector &:empty

Styles for CSS Selector &:nth-child(even)

_expanded?: SystemStyleObject

Styles to apply when the ARIA attribute aria-expanded is true

  • CSS selector &[aria-expanded=true]

Styles for CSS Selector &:first-of-type

_firstLetter?: SystemStyleObject

Styles for CSS selector &::first-letter

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>

Styles for CSS selector &:focus

_focusVisible?: SystemStyleObject

Styles to apply when this element has received focus via tabbing

  • CSS Selector &:focus-visible
_focusWithin?: SystemStyleObject

Styles to apply when a child of this element has received focus

  • CSS Selector &:focus-within
_fullScreen?: SystemStyleObject

Styles for CSS Selector &:fullscreen.

Styles to apply when the ARIA attribute aria-grabbed is true

  • CSS selector &[aria-grabbed=true]
_groupActive?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is active

_groupChecked?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is checked

_groupDisabled?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is disabled

_groupFocus?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is focused

_groupFocusVisible?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group has visible focus

_groupFocusWithin?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group has focus within

_groupHover?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is hovered

_groupInvalid?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is invalid

Styles for CSS Selector [hidden=true]

_highlighted?: SystemStyleObject

Styles for the highlighted state.

_horizontal?: SystemStyleObject

Styles for the CSS Selector &[data-orientation=horizontal]

Styles for CSS selector &:hover

_indeterminate?: SystemStyleObject

Styles to apply when the ARIA attribute aria-checked is mixed

  • CSS selector &[aria-checked=mixed]

Styles to apply when the ARIA attribute aria-invalid is true

  • CSS selector &[aria-invalid=true]

Styles for CSS Selector &:last-of-type

Styles for when data-theme is applied to any parent of this component or element.

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. Useful for styling loading states

Styles for CSS Selector [dir=ltr] & It is applied when a parent element or this element has dir="ltr"

_mediaDark?: SystemStyleObject

Styles for CSS Selector @media (prefers-color-scheme: dark) It is used when the user has requested the system use a light or dark color theme.

_mediaReduceMotion?: SystemStyleObject

Styles for CSS Selector @media (prefers-reduced-motion: reduce) It is used when the user has requested the system to reduce the amount of animations.

_notFirst?: SystemStyleObject

Styles for CSS Selector &:not(:first-of-type)

Styles for CSS Selector &:not(:last-of-type)

Styles for CSS Selector &:nth-child(odd)

_peerActive?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is active

_peerChecked?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is checked

_peerDisabled?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is disabled

_peerFocus?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is focused

_peerFocusVisible?: SystemStyleObject

Styles to apply when a sibling element with .peeror data-peer has visible focus

_peerFocusWithin?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer has focus within

_peerHover?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is hovered

_peerInvalid?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is invalid

_peerPlaceholderShown?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

_placeholder?: SystemStyleObject

Styles for CSS Selector &::placeholder.

_placeholderShown?: SystemStyleObject

Styles for CSS Selector &:placeholder-shown.

Styles for CSS Selector &[aria-pressed=true] Typically used to style the current "pressed" state of toggle buttons

_readOnly?: SystemStyleObject

Styles for CSS Selector &:readonly

Styles for CSS Selector [dir=rtl] & It is applied when a parent element or this element has dir="rtl"

_selected?: SystemStyleObject

Styles to apply when the ARIA attribute aria-selected is true

  • CSS selector &[aria-selected=true]
_selection?: SystemStyleObject

Styles for CSS Selector &::selection

Styles for the valid state

  • CSS selector &[data-valid], &[data-state=valid]
_vertical?: SystemStyleObject

Styles for the CSS Selector &[data-orientation=vertical]

Styles for CSS Selector &:visited

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

      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

      centerContent?: boolean

      If true, the content will be centered in the square

      Default

      false
      
      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

      css?: Interpolation<{}>

      The emotion's css style object

      Type declaration

        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.

        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 truncate text at a specific 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

        size?: 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 size (width and height) of the square

        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

        Used to pass theme-aware style props. NB: This is the public API for user-land

        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

        whiteSpace?: ResponsiveValue<WhiteSpace>

        The CSS white-space 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