@codecademy/gamut-styles 12.1.1 → 12.1.2-alpha.a809e8.0

package/dist/ColorMode.d.ts

@@ -1,1277 +0,0 @@
-import { ThemeProps } from '@codecademy/variance';
-import { CSSObject, Theme } from '@emotion/react';
-import React from 'react';
-export declare type Colors = keyof Theme['colors'];
-export declare type ColorModeConfig = Theme['modes'];
-export declare type ColorModes = keyof ColorModeConfig;
-export declare type ColorModeShape = ColorModeConfig[ColorModes];
-export declare type ColorAlias = keyof ColorModeShape;
-export declare type ColorModeProps = {
-    mode: ColorModes;
-    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 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 borderRadiusLeft: {
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderTopLeftRadius", "borderBottomLeftRadius"];
-    };
-    readonly borderRadiusTop: {
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
-    };
-    readonly borderRadiusBottom: {
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
-    };
-    readonly borderRadiusRight: {
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
-    };
-    readonly borderRadiusTopLeft: {
-        readonly property: "borderTopLeftRadius";
-    };
-    readonly borderRadiusTopRight: {
-        readonly property: "borderTopRightRadius";
-    };
-    readonly borderRadiusBottomRight: {
-        readonly property: "borderBottomRightRadius";
-    };
-    readonly borderRadiusBottomLeft: {
-        readonly property: "borderBottomLeftRadius";
-    };
-    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 const VariableProvider: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & {
-    p?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "padding";
-        readonly scale: "spacing";
-    }>;
-    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";
-    }>;
-    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";
-    }>;
-    backgroundPosition?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "backgroundPosition";
-    }>;
-    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";
-    }>;
-    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;
-    }>;
-    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;
-    }>;
-    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";
-    }>;
-    border?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "border";
-        readonly scale: "borders";
-    }>;
-    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";
-    }>;
-    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";
-    }>;
-    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"];
-    }>;
-    borderRadiusTop?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
-    }>;
-    borderRadiusBottom?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
-    }>;
-    borderRadiusRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
-    }>;
-    borderRadiusTopLeft?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderTopLeftRadius";
-    }>;
-    borderRadiusTopRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderTopRightRadius";
-    }>;
-    borderRadiusBottomRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderBottomRightRadius";
-    }>;
-    borderRadiusBottomLeft?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderBottomLeftRadius";
-    }>;
-    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<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "dir" | "slot" | "style" | "title" | "id" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
-export declare const ColorMode: React.ForwardRefExoticComponent<Pick<Omit<{
-    theme?: Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & {
-    p?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "padding";
-        readonly scale: "spacing";
-    }>;
-    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";
-    }>;
-    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";
-    }>;
-    backgroundPosition?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "backgroundPosition";
-    }>;
-    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";
-    }>;
-    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;
-    }>;
-    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;
-    }>;
-    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";
-    }>;
-    border?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "border";
-        readonly scale: "borders";
-    }>;
-    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";
-    }>;
-    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";
-    }>;
-    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"];
-    }>;
-    borderRadiusTop?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
-    }>;
-    borderRadiusBottom?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
-    }>;
-    borderRadiusRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderRadius";
-        readonly properties: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
-    }>;
-    borderRadiusTopLeft?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderTopLeftRadius";
-    }>;
-    borderRadiusTopRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderTopRightRadius";
-    }>;
-    borderRadiusBottomRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderBottomRightRadius";
-    }>;
-    borderRadiusBottomLeft?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderBottomLeftRadius";
-    }>;
-    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<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "dir" | "slot" | "style" | "title" | "id" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof React.ClassAttributes<HTMLDivElement>> & {
-    children?: React.ReactNode;
-}, "bg"> & ColorModeProps, "dir" | "p" | "slot" | "style" | "title" | "id" | "key" | "color" | "background" | "property" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "inset" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "hidden" | "children" | "variables" | "theme" | "dimensions" | "textColor" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "alwaysSetVariables" | keyof ColorModeProps> & React.RefAttributes<HTMLDivElement>>;