/// <reference types="react" />
import { ThemeProps } from '@codecademy/variance';
import { CSSObject, Theme } from '@emotion/react';
export type Colors = keyof Theme['colors'];
export type ColorModeConfig = Theme['modes'];
export type ColorModes = keyof ColorModeConfig;
export type ColorModeShape = ColorModeConfig[ColorModes];
export type ColorAlias = keyof ColorModeShape;
export type ColorModeProps = {
    mode: ColorModes | 'system';
    bg?: Colors;
};
export declare const providerProps: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").Compose<[import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
    readonly flexBasis: {
        readonly property: "flexBasis";
    };
    readonly flexShrink: {
        readonly property: "flexShrink";
    };
    readonly flexGrow: {
        readonly property: "flexGrow";
    };
    readonly order: {
        readonly property: "order";
    };
    readonly gridColumn: {
        readonly property: "gridColumn";
    };
    readonly gridRow: {
        readonly property: "gridRow";
    };
    readonly gridColumnStart: {
        readonly property: "gridColumnStart";
    };
    readonly gridRowStart: {
        readonly property: "gridRowStart";
    };
    readonly gridColumnEnd: {
        readonly property: "gridColumnEnd";
    };
    readonly gridRowEnd: {
        readonly property: "gridRowEnd";
    };
    readonly justifySelf: {
        readonly property: "justifySelf";
    };
    readonly alignSelf: {
        readonly property: "alignSelf";
    };
    readonly gridArea: {
        readonly property: "gridArea";
    };
    readonly containerType: {
        readonly property: "containerType";
    };
    readonly display: {
        readonly property: "display";
    };
    readonly overflow: {
        readonly property: "overflow";
    };
    readonly overflowX: {
        readonly property: "overflowX";
    };
    readonly overflowY: {
        readonly property: "overflowY";
    };
    readonly dimensions: {
        readonly property: "width";
        readonly properties: readonly ["width", "height"];
        readonly transform: (value: string | number) => string | 0;
    };
    readonly width: {
        readonly property: "width";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly minWidth: {
        readonly property: "minWidth";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly maxWidth: {
        readonly property: "maxWidth";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly height: {
        readonly property: "height";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly minHeight: {
        readonly property: "minHeight";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly maxHeight: {
        readonly property: "maxHeight";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly verticalAlign: {
        readonly property: "verticalAlign";
    };
}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
    readonly color: {
        readonly property: "color";
        readonly scale: "colors";
    };
    readonly textColor: {
        readonly property: "color";
        readonly scale: "colors";
    };
    readonly bg: {
        readonly property: "backgroundColor";
        readonly scale: "colors";
    };
    readonly borderColor: {
        readonly property: "borderColor";
        readonly scale: "colors";
    };
    readonly borderColorX: {
        readonly property: "borderColor";
        readonly properties: readonly ["borderLeftColor", "borderRightColor"];
        readonly scale: "colors";
    };
    readonly borderColorY: {
        readonly property: "borderColor";
        readonly properties: readonly ["borderTopColor", "borderBottomColor"];
        readonly scale: "colors";
    };
    readonly borderColorLeft: {
        readonly property: "borderLeftColor";
        readonly scale: "colors";
    };
    readonly borderColorRight: {
        readonly property: "borderRightColor";
        readonly scale: "colors";
    };
    readonly borderColorTop: {
        readonly property: "borderTopColor";
        readonly scale: "colors";
    };
    readonly borderColorBottom: {
        readonly property: "borderBottomColor";
        readonly scale: "colors";
    };
}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
    readonly gridColumn: {
        readonly property: "gridColumn";
    };
    readonly gridRow: {
        readonly property: "gridRow";
    };
    readonly gridColumnStart: {
        readonly property: "gridColumnStart";
    };
    readonly gridRowStart: {
        readonly property: "gridRowStart";
    };
    readonly gridColumnEnd: {
        readonly property: "gridColumnEnd";
    };
    readonly gridRowEnd: {
        readonly property: "gridRowEnd";
    };
    readonly justifySelf: {
        readonly property: "justifySelf";
    };
    readonly alignSelf: {
        readonly property: "alignSelf";
    };
    readonly gridArea: {
        readonly property: "gridArea";
    };
    readonly justifyContent: {
        readonly property: "justifyContent";
    };
    readonly justifyItems: {
        readonly property: "justifyItems";
    };
    readonly alignItems: {
        readonly property: "alignItems";
    };
    readonly alignContent: {
        readonly property: "alignContent";
    };
    readonly gridAutoColumns: {
        readonly property: "gridAutoColumns";
    };
    readonly gridAutoRows: {
        readonly property: "gridAutoRows";
    };
    readonly gridTemplateColumns: {
        readonly property: "gridTemplateColumns";
    };
    readonly gridTemplateRows: {
        readonly property: "gridTemplateRows";
    };
    readonly gridTemplateAreas: {
        readonly property: "gridTemplateAreas";
    };
    readonly gridAutoFlow: {
        readonly property: "gridAutoFlow";
    };
    readonly gap: {
        readonly property: "gap";
        readonly scale: "spacing";
    };
    readonly rowGap: {
        readonly property: "rowGap";
        readonly scale: "spacing";
    };
    readonly columnGap: {
        readonly property: "columnGap";
        readonly scale: "spacing";
    };
}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
    readonly flexBasis: {
        readonly property: "flexBasis";
    };
    readonly flexShrink: {
        readonly property: "flexShrink";
    };
    readonly flexGrow: {
        readonly property: "flexGrow";
    };
    readonly order: {
        readonly property: "order";
    };
    readonly justifySelf: {
        readonly property: "justifySelf";
    };
    readonly alignSelf: {
        readonly property: "alignSelf";
    };
    readonly gridArea: {
        readonly property: "gridArea";
    };
    readonly justifyContent: {
        readonly property: "justifyContent";
    };
    readonly justifyItems: {
        readonly property: "justifyItems";
    };
    readonly alignItems: {
        readonly property: "alignItems";
    };
    readonly alignContent: {
        readonly property: "alignContent";
    };
    readonly flexDirection: {
        readonly property: "flexDirection";
    };
    readonly flexWrap: {
        readonly property: "flexWrap";
    };
    readonly flex: {
        readonly property: "flex";
    };
}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
    readonly position: {
        readonly property: "position";
    };
    readonly inset: {
        readonly property: "inset";
        readonly properties: readonly ["top", "right", "bottom", "left"];
        readonly transform: (value: string | number) => string | 0;
    };
    readonly top: {
        readonly property: "top";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly right: {
        readonly property: "right";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly bottom: {
        readonly property: "bottom";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly left: {
        readonly property: "left";
        readonly transform: (value: string | number) => string | 0;
    };
    readonly zIndex: {
        readonly property: "zIndex";
    };
    readonly opacity: {
        readonly property: "opacity";
    };
}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
    readonly p: {
        readonly property: "padding";
        readonly scale: "spacing";
    };
    readonly px: {
        readonly property: "padding";
        readonly properties: readonly ["paddingLeft", "paddingRight"];
        readonly scale: "spacing";
    };
    readonly py: {
        readonly property: "padding";
        readonly properties: readonly ["paddingTop", "paddingBottom"];
        readonly scale: "spacing";
    };
    readonly pt: {
        readonly property: "paddingTop";
        readonly scale: "spacing";
    };
    readonly pb: {
        readonly property: "paddingBottom";
        readonly scale: "spacing";
    };
    readonly pr: {
        readonly property: "paddingRight";
        readonly scale: "spacing";
    };
    readonly pl: {
        readonly property: "paddingLeft";
        readonly scale: "spacing";
    };
    readonly m: {
        readonly property: "margin";
        readonly scale: "spacing";
    };
    readonly mx: {
        readonly property: "margin";
        readonly properties: readonly ["marginLeft", "marginRight"];
        readonly scale: "spacing";
    };
    readonly my: {
        readonly property: "margin";
        readonly properties: readonly ["marginTop", "marginBottom"];
        readonly scale: "spacing";
    };
    readonly mt: {
        readonly property: "marginTop";
        readonly scale: "spacing";
    };
    readonly mb: {
        readonly property: "marginBottom";
        readonly scale: "spacing";
    };
    readonly mr: {
        readonly property: "marginRight";
        readonly scale: "spacing";
    };
    readonly ml: {
        readonly property: "marginLeft";
        readonly scale: "spacing";
    };
}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
    readonly border: {
        readonly property: "border";
        readonly scale: "borders";
    };
    readonly borderX: {
        readonly property: "border";
        readonly properties: readonly ["borderLeft", "borderRight"];
        readonly scale: "borders";
    };
    readonly borderY: {
        readonly property: "border";
        readonly properties: readonly ["borderTop", "borderBottom"];
        readonly scale: "borders";
    };
    readonly borderTop: {
        readonly property: "borderTop";
        readonly scale: "borders";
    };
    readonly borderRight: {
        readonly property: "borderRight";
        readonly scale: "borders";
    };
    readonly borderBottom: {
        readonly property: "borderBottom";
        readonly scale: "borders";
    };
    readonly borderLeft: {
        readonly property: "borderLeft";
        readonly scale: "borders";
    };
    readonly borderWidth: {
        readonly property: "borderWidth";
    };
    readonly borderWidthX: {
        readonly property: "borderWidth";
        readonly properties: readonly ["borderLeftWidth", "borderRightWidth"];
    };
    readonly borderWidthY: {
        readonly property: "borderWidth";
        readonly properties: readonly ["borderTopWidth", "borderBottomWidth"];
    };
    readonly borderWidthLeft: {
        readonly property: "borderLeftWidth";
    };
    readonly borderWidthRight: {
        readonly property: "borderRightWidth";
    };
    readonly borderWidthTop: {
        readonly property: "borderTopWidth";
    };
    readonly borderWidthBottom: {
        readonly property: "borderBottomWidth";
    };
    readonly borderRadius: {
        readonly property: "borderRadius";
        readonly scale: "borderRadii";
    };
    readonly borderRadiusLeft: {
        readonly property: "borderRadius";
        readonly properties: readonly ["borderTopLeftRadius", "borderBottomLeftRadius"];
        readonly scale: "borderRadii";
    };
    readonly borderRadiusTop: {
        readonly property: "borderRadius";
        readonly properties: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
        readonly scale: "borderRadii";
    };
    readonly borderRadiusBottom: {
        readonly property: "borderRadius";
        readonly properties: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
        readonly scale: "borderRadii";
    };
    readonly borderRadiusRight: {
        readonly property: "borderRadius";
        readonly properties: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
        readonly scale: "borderRadii";
    };
    readonly borderRadiusTopLeft: {
        readonly property: "borderTopLeftRadius";
        readonly scale: "borderRadii";
    };
    readonly borderRadiusTopRight: {
        readonly property: "borderTopRightRadius";
        readonly scale: "borderRadii";
    };
    readonly borderRadiusBottomRight: {
        readonly property: "borderBottomRightRadius";
        readonly scale: "borderRadii";
    };
    readonly borderRadiusBottomLeft: {
        readonly property: "borderBottomLeftRadius";
        readonly scale: "borderRadii";
    };
    readonly borderStyle: {
        readonly property: "borderStyle";
    };
    readonly borderStyleX: {
        readonly property: "borderStyle";
        readonly properties: readonly ["borderLeftStyle", "borderRightStyle"];
    };
    readonly borderStyleY: {
        readonly property: "borderStyle";
        readonly properties: readonly ["borderTopStyle", "borderBottomStyle"];
    };
    readonly borderStyleLeft: {
        readonly property: "borderLeftStyle";
    };
    readonly borderStyleRight: {
        readonly property: "borderRightStyle";
    };
    readonly borderStyleTop: {
        readonly property: "borderTopStyle";
    };
    readonly borderStyleBottom: {
        readonly property: "borderBottomStyle";
    };
}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
    readonly background: {
        readonly property: "background";
    };
    readonly backgroundImage: {
        readonly property: "backgroundImage";
    };
    readonly backgroundSize: {
        readonly property: "backgroundSize";
    };
    readonly backgroundRepeat: {
        readonly property: "backgroundRepeat";
    };
    readonly backgroundPosition: {
        readonly property: "backgroundPosition";
    };
}>>]>>;
export declare const modeColorProps: ({ theme, mode, }: ThemeProps<{
    mode?: "light" | "dark" | undefined;
}>) => import("@codecademy/variance").CSSObject;
export declare function useColorModes(): [
    ColorModes,
    ColorModeShape,
    ColorModeConfig,
    (color: Colors) => string
];
export declare function useCurrentMode(mode?: ColorModes): "light" | "dark";
export declare function usePrefersDarkMode(): boolean;
export declare const VariableProvider: import("@emotion/styled").StyledComponent<{
    theme?: Theme | undefined;
    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
} & {
    color?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "color";
        readonly scale: "colors";
    }>;
    background?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "background";
    }>;
    border?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "border";
        readonly scale: "borders";
    }>;
    p?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "padding";
        readonly scale: "spacing";
    }>;
    alignContent?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "alignContent";
    }>;
    alignItems?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "alignItems";
    }>;
    alignSelf?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "alignSelf";
    }>;
    backgroundImage?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundImage";
    }>;
    backgroundRepeat?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundRepeat";
    }>;
    backgroundSize?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundSize";
    }>;
    bottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "bottom";
        readonly transform: (value: string | number) => string | 0;
    }>;
    columnGap?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "columnGap";
        readonly scale: "spacing";
    }>;
    containerType?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "containerType";
    }>;
    display?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "display";
    }>;
    flexBasis?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexBasis";
    }>;
    flexDirection?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexDirection";
    }>;
    flexGrow?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexGrow";
    }>;
    flexShrink?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexShrink";
    }>;
    flexWrap?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexWrap";
    }>;
    gridAutoColumns?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridAutoColumns";
    }>;
    gridAutoFlow?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridAutoFlow";
    }>;
    gridAutoRows?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridAutoRows";
    }>;
    gridColumnEnd?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridColumnEnd";
    }>;
    gridColumnStart?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridColumnStart";
    }>;
    gridRowEnd?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridRowEnd";
    }>;
    gridRowStart?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridRowStart";
    }>;
    gridTemplateAreas?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridTemplateAreas";
    }>;
    gridTemplateColumns?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridTemplateColumns";
    }>;
    gridTemplateRows?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridTemplateRows";
    }>;
    height?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "height";
        readonly transform: (value: string | number) => string | 0;
    }>;
    justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "justifyContent";
    }>;
    justifyItems?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "justifyItems";
    }>;
    justifySelf?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "justifySelf";
    }>;
    left?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "left";
        readonly transform: (value: string | number) => string | 0;
    }>;
    maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "maxHeight";
        readonly transform: (value: string | number) => string | 0;
    }>;
    maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "maxWidth";
        readonly transform: (value: string | number) => string | 0;
    }>;
    minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "minHeight";
        readonly transform: (value: string | number) => string | 0;
    }>;
    minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "minWidth";
        readonly transform: (value: string | number) => string | 0;
    }>;
    opacity?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "opacity";
    }>;
    order?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "order";
    }>;
    overflowX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "overflowX";
    }>;
    overflowY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "overflowY";
    }>;
    position?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "position";
    }>;
    right?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "right";
        readonly transform: (value: string | number) => string | 0;
    }>;
    rowGap?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "rowGap";
        readonly scale: "spacing";
    }>;
    top?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "top";
        readonly transform: (value: string | number) => string | 0;
    }>;
    verticalAlign?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "verticalAlign";
    }>;
    width?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "width";
        readonly transform: (value: string | number) => string | 0;
    }>;
    zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "zIndex";
    }>;
    backgroundPosition?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundPosition";
    }>;
    borderBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottom";
        readonly scale: "borders";
    }>;
    borderColor?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderColor";
        readonly scale: "colors";
    }>;
    borderLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderLeft";
        readonly scale: "borders";
    }>;
    borderRadius?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly scale: "borderRadii";
    }>;
    borderRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRight";
        readonly scale: "borders";
    }>;
    borderStyle?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderStyle";
    }>;
    borderTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTop";
        readonly scale: "borders";
    }>;
    borderWidth?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderWidth";
    }>;
    flex?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flex";
    }>;
    gap?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gap";
        readonly scale: "spacing";
    }>;
    gridArea?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridArea";
    }>;
    gridColumn?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridColumn";
    }>;
    gridRow?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridRow";
    }>;
    inset?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "inset";
        readonly properties: readonly ["top", "right", "bottom", "left"];
        readonly transform: (value: string | number) => string | 0;
    }>;
    overflow?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "overflow";
    }>;
    dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "width";
        readonly properties: readonly ["width", "height"];
        readonly transform: (value: string | number) => string | 0;
    }>;
    textColor?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "color";
        readonly scale: "colors";
    }>;
    bg?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundColor";
        readonly scale: "colors";
    }>;
    borderColorX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderColor";
        readonly properties: readonly ["borderLeftColor", "borderRightColor"];
        readonly scale: "colors";
    }>;
    borderColorY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderColor";
        readonly properties: readonly ["borderTopColor", "borderBottomColor"];
        readonly scale: "colors";
    }>;
    borderColorLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderLeftColor";
        readonly scale: "colors";
    }>;
    borderColorRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRightColor";
        readonly scale: "colors";
    }>;
    borderColorTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopColor";
        readonly scale: "colors";
    }>;
    borderColorBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomColor";
        readonly scale: "colors";
    }>;
    px?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "padding";
        readonly properties: readonly ["paddingLeft", "paddingRight"];
        readonly scale: "spacing";
    }>;
    py?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "padding";
        readonly properties: readonly ["paddingTop", "paddingBottom"];
        readonly scale: "spacing";
    }>;
    pt?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "paddingTop";
        readonly scale: "spacing";
    }>;
    pb?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "paddingBottom";
        readonly scale: "spacing";
    }>;
    pr?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "paddingRight";
        readonly scale: "spacing";
    }>;
    pl?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "paddingLeft";
        readonly scale: "spacing";
    }>;
    m?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "margin";
        readonly scale: "spacing";
    }>;
    mx?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "margin";
        readonly properties: readonly ["marginLeft", "marginRight"];
        readonly scale: "spacing";
    }>;
    my?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "margin";
        readonly properties: readonly ["marginTop", "marginBottom"];
        readonly scale: "spacing";
    }>;
    mt?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "marginTop";
        readonly scale: "spacing";
    }>;
    mb?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "marginBottom";
        readonly scale: "spacing";
    }>;
    mr?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "marginRight";
        readonly scale: "spacing";
    }>;
    ml?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "marginLeft";
        readonly scale: "spacing";
    }>;
    borderX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "border";
        readonly properties: readonly ["borderLeft", "borderRight"];
        readonly scale: "borders";
    }>;
    borderY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "border";
        readonly properties: readonly ["borderTop", "borderBottom"];
        readonly scale: "borders";
    }>;
    borderWidthX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderWidth";
        readonly properties: readonly ["borderLeftWidth", "borderRightWidth"];
    }>;
    borderWidthY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderWidth";
        readonly properties: readonly ["borderTopWidth", "borderBottomWidth"];
    }>;
    borderWidthLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderLeftWidth";
    }>;
    borderWidthRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRightWidth";
    }>;
    borderWidthTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopWidth";
    }>;
    borderWidthBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomWidth";
    }>;
    borderRadiusLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly properties: readonly ["borderTopLeftRadius", "borderBottomLeftRadius"];
        readonly scale: "borderRadii";
    }>;
    borderRadiusTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly properties: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
        readonly scale: "borderRadii";
    }>;
    borderRadiusBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly properties: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
        readonly scale: "borderRadii";
    }>;
    borderRadiusRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly properties: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
        readonly scale: "borderRadii";
    }>;
    borderRadiusTopLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopLeftRadius";
        readonly scale: "borderRadii";
    }>;
    borderRadiusTopRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopRightRadius";
        readonly scale: "borderRadii";
    }>;
    borderRadiusBottomRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomRightRadius";
        readonly scale: "borderRadii";
    }>;
    borderRadiusBottomLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomLeftRadius";
        readonly scale: "borderRadii";
    }>;
    borderStyleX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderStyle";
        readonly properties: readonly ["borderLeftStyle", "borderRightStyle"];
    }>;
    borderStyleY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderStyle";
        readonly properties: readonly ["borderTopStyle", "borderBottomStyle"];
    }>;
    borderStyleLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderLeftStyle";
    }>;
    borderStyleRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRightStyle";
    }>;
    borderStyleTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopStyle";
    }>;
    borderStyleBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomStyle";
    }>;
} & {
    theme?: Theme | undefined;
} & {
    variables?: CSSObject | undefined;
    alwaysSetVariables?: boolean | undefined;
}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<Omit<{
    theme?: Theme | undefined;
    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
} & {
    color?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "color";
        readonly scale: "colors";
    }>;
    background?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "background";
    }>;
    border?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "border";
        readonly scale: "borders";
    }>;
    p?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "padding";
        readonly scale: "spacing";
    }>;
    alignContent?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "alignContent";
    }>;
    alignItems?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "alignItems";
    }>;
    alignSelf?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "alignSelf";
    }>;
    backgroundImage?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundImage";
    }>;
    backgroundRepeat?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundRepeat";
    }>;
    backgroundSize?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundSize";
    }>;
    bottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "bottom";
        readonly transform: (value: string | number) => string | 0;
    }>;
    columnGap?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "columnGap";
        readonly scale: "spacing";
    }>;
    containerType?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "containerType";
    }>;
    display?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "display";
    }>;
    flexBasis?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexBasis";
    }>;
    flexDirection?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexDirection";
    }>;
    flexGrow?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexGrow";
    }>;
    flexShrink?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexShrink";
    }>;
    flexWrap?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flexWrap";
    }>;
    gridAutoColumns?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridAutoColumns";
    }>;
    gridAutoFlow?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridAutoFlow";
    }>;
    gridAutoRows?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridAutoRows";
    }>;
    gridColumnEnd?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridColumnEnd";
    }>;
    gridColumnStart?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridColumnStart";
    }>;
    gridRowEnd?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridRowEnd";
    }>;
    gridRowStart?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridRowStart";
    }>;
    gridTemplateAreas?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridTemplateAreas";
    }>;
    gridTemplateColumns?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridTemplateColumns";
    }>;
    gridTemplateRows?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridTemplateRows";
    }>;
    height?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "height";
        readonly transform: (value: string | number) => string | 0;
    }>;
    justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "justifyContent";
    }>;
    justifyItems?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "justifyItems";
    }>;
    justifySelf?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "justifySelf";
    }>;
    left?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "left";
        readonly transform: (value: string | number) => string | 0;
    }>;
    maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "maxHeight";
        readonly transform: (value: string | number) => string | 0;
    }>;
    maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "maxWidth";
        readonly transform: (value: string | number) => string | 0;
    }>;
    minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "minHeight";
        readonly transform: (value: string | number) => string | 0;
    }>;
    minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "minWidth";
        readonly transform: (value: string | number) => string | 0;
    }>;
    opacity?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "opacity";
    }>;
    order?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "order";
    }>;
    overflowX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "overflowX";
    }>;
    overflowY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "overflowY";
    }>;
    position?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "position";
    }>;
    right?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "right";
        readonly transform: (value: string | number) => string | 0;
    }>;
    rowGap?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "rowGap";
        readonly scale: "spacing";
    }>;
    top?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "top";
        readonly transform: (value: string | number) => string | 0;
    }>;
    verticalAlign?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "verticalAlign";
    }>;
    width?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "width";
        readonly transform: (value: string | number) => string | 0;
    }>;
    zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "zIndex";
    }>;
    backgroundPosition?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundPosition";
    }>;
    borderBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottom";
        readonly scale: "borders";
    }>;
    borderColor?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderColor";
        readonly scale: "colors";
    }>;
    borderLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderLeft";
        readonly scale: "borders";
    }>;
    borderRadius?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly scale: "borderRadii";
    }>;
    borderRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRight";
        readonly scale: "borders";
    }>;
    borderStyle?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderStyle";
    }>;
    borderTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTop";
        readonly scale: "borders";
    }>;
    borderWidth?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderWidth";
    }>;
    flex?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "flex";
    }>;
    gap?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gap";
        readonly scale: "spacing";
    }>;
    gridArea?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridArea";
    }>;
    gridColumn?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridColumn";
    }>;
    gridRow?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "gridRow";
    }>;
    inset?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "inset";
        readonly properties: readonly ["top", "right", "bottom", "left"];
        readonly transform: (value: string | number) => string | 0;
    }>;
    overflow?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "overflow";
    }>;
    dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "width";
        readonly properties: readonly ["width", "height"];
        readonly transform: (value: string | number) => string | 0;
    }>;
    textColor?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "color";
        readonly scale: "colors";
    }>;
    bg?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "backgroundColor";
        readonly scale: "colors";
    }>;
    borderColorX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderColor";
        readonly properties: readonly ["borderLeftColor", "borderRightColor"];
        readonly scale: "colors";
    }>;
    borderColorY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderColor";
        readonly properties: readonly ["borderTopColor", "borderBottomColor"];
        readonly scale: "colors";
    }>;
    borderColorLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderLeftColor";
        readonly scale: "colors";
    }>;
    borderColorRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRightColor";
        readonly scale: "colors";
    }>;
    borderColorTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopColor";
        readonly scale: "colors";
    }>;
    borderColorBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomColor";
        readonly scale: "colors";
    }>;
    px?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "padding";
        readonly properties: readonly ["paddingLeft", "paddingRight"];
        readonly scale: "spacing";
    }>;
    py?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "padding";
        readonly properties: readonly ["paddingTop", "paddingBottom"];
        readonly scale: "spacing";
    }>;
    pt?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "paddingTop";
        readonly scale: "spacing";
    }>;
    pb?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "paddingBottom";
        readonly scale: "spacing";
    }>;
    pr?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "paddingRight";
        readonly scale: "spacing";
    }>;
    pl?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "paddingLeft";
        readonly scale: "spacing";
    }>;
    m?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "margin";
        readonly scale: "spacing";
    }>;
    mx?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "margin";
        readonly properties: readonly ["marginLeft", "marginRight"];
        readonly scale: "spacing";
    }>;
    my?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "margin";
        readonly properties: readonly ["marginTop", "marginBottom"];
        readonly scale: "spacing";
    }>;
    mt?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "marginTop";
        readonly scale: "spacing";
    }>;
    mb?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "marginBottom";
        readonly scale: "spacing";
    }>;
    mr?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "marginRight";
        readonly scale: "spacing";
    }>;
    ml?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "marginLeft";
        readonly scale: "spacing";
    }>;
    borderX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "border";
        readonly properties: readonly ["borderLeft", "borderRight"];
        readonly scale: "borders";
    }>;
    borderY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "border";
        readonly properties: readonly ["borderTop", "borderBottom"];
        readonly scale: "borders";
    }>;
    borderWidthX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderWidth";
        readonly properties: readonly ["borderLeftWidth", "borderRightWidth"];
    }>;
    borderWidthY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderWidth";
        readonly properties: readonly ["borderTopWidth", "borderBottomWidth"];
    }>;
    borderWidthLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderLeftWidth";
    }>;
    borderWidthRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRightWidth";
    }>;
    borderWidthTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopWidth";
    }>;
    borderWidthBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomWidth";
    }>;
    borderRadiusLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly properties: readonly ["borderTopLeftRadius", "borderBottomLeftRadius"];
        readonly scale: "borderRadii";
    }>;
    borderRadiusTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly properties: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
        readonly scale: "borderRadii";
    }>;
    borderRadiusBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly properties: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
        readonly scale: "borderRadii";
    }>;
    borderRadiusRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRadius";
        readonly properties: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
        readonly scale: "borderRadii";
    }>;
    borderRadiusTopLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopLeftRadius";
        readonly scale: "borderRadii";
    }>;
    borderRadiusTopRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopRightRadius";
        readonly scale: "borderRadii";
    }>;
    borderRadiusBottomRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomRightRadius";
        readonly scale: "borderRadii";
    }>;
    borderRadiusBottomLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomLeftRadius";
        readonly scale: "borderRadii";
    }>;
    borderStyleX?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderStyle";
        readonly properties: readonly ["borderLeftStyle", "borderRightStyle"];
    }>;
    borderStyleY?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderStyle";
        readonly properties: readonly ["borderTopStyle", "borderBottomStyle"];
    }>;
    borderStyleLeft?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderLeftStyle";
    }>;
    borderStyleRight?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderRightStyle";
    }>;
    borderStyleTop?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderTopStyle";
    }>;
    borderStyleBottom?: import("@codecademy/variance/dist/types/config").Scale<{
        readonly property: "borderBottomStyle";
    }>;
} & {
    theme?: Theme | undefined;
} & {
    variables?: CSSObject | undefined;
    alwaysSetVariables?: boolean | undefined;
} & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | keyof import("react").ClassAttributes<HTMLDivElement>>, "bg"> & ColorModeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
