@atom-learning/components 2.29.0-beta.2 → 2.29.0-beta.3

package/dist/stitches.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CSS as StitchesCSS, PropertyValue, ScaleValue } from '@stitches/react';
 export declare const utils: {
     bg: (value: PropertyValue<'background'>) => {
@@ -119,7 +120,1953 @@ export declare const media: {
     allowMotion: string;
     hover: string;
 };
-declare const stitchesConfig: any;
-export declare const css: any, getCssText: any, createTheme: any, globalCss: any, keyframes: any, styled: any, theme: any;
+declare const stitchesConfig: import("@stitches/react/types/stitches").default<"", {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: PropertyValue<'background'>) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: ScaleValue<'space'> | number | string) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: ScaleValue<'size'> | number | string) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: ScaleValue<'space'> | number | string) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: ScaleValue<'space'> | number | string) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: ScaleValue<'space'> | number | string) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: ScaleValue<'space'> | number | string) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: ScaleValue<'space'> | number | string) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: ScaleValue<'space'> | number | string) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>;
+export declare const css: <Composers extends (string | import("@stitches/react/types/util").Function | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | {
+    [name: string]: unknown;
+})[], CSS_1 = import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: PropertyValue<'background'>) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: ScaleValue<'space'> | number | string) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: ScaleValue<'size'> | number | string) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: ScaleValue<'space'> | number | string) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: ScaleValue<'space'> | number | string) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: ScaleValue<'space'> | number | string) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: ScaleValue<'space'> | number | string) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: ScaleValue<'space'> | number | string) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: ScaleValue<'space'> | number | string) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("@stitches/react/types/util").Function | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS_1> & {
+    variants?: {
+        [x: string]: {
+            [x: string]: CSS_1;
+            [x: number]: CSS_1;
+        };
+    } | undefined;
+    compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : import("@stitches/react/types/util").WideObject) & {
+        css: CSS_1;
+    })[] | undefined;
+    defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/react/types/util").WideObject) | undefined;
+} & CSS_1 & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, CSS_1>, getCssText: () => string, createTheme: <Argument0 extends string | ({
+    colors?: {
+        textForeground?: string | number | boolean | undefined;
+        textSubtle?: string | number | boolean | undefined;
+        textPlaceholder?: string | number | boolean | undefined;
+        background?: string | number | boolean | undefined;
+        backgroundAccent?: string | number | boolean | undefined;
+        tonal50?: string | number | boolean | undefined;
+        tonal100?: string | number | boolean | undefined;
+        tonal200?: string | number | boolean | undefined;
+        tonal300?: string | number | boolean | undefined;
+        tonal400?: string | number | boolean | undefined;
+        tonal500?: string | number | boolean | undefined;
+        tonal600?: string | number | boolean | undefined;
+        alpha100?: string | number | boolean | undefined;
+        alpha150?: string | number | boolean | undefined;
+        alpha200?: string | number | boolean | undefined;
+        alpha250?: string | number | boolean | undefined;
+        alpha600?: string | number | boolean | undefined;
+        primaryLight?: string | number | boolean | undefined;
+        primary?: string | number | boolean | undefined;
+        primaryMid?: string | number | boolean | undefined;
+        primaryDark?: string | number | boolean | undefined;
+        secondary?: string | number | boolean | undefined;
+        brandRed?: string | number | boolean | undefined;
+        brandRedAccent?: string | number | boolean | undefined;
+        brandGreen?: string | number | boolean | undefined;
+        brandGreenAccent?: string | number | boolean | undefined;
+        brandPurple?: string | number | boolean | undefined;
+        brandPurpleAccent?: string | number | boolean | undefined;
+        brandYellow?: string | number | boolean | undefined;
+        brandYellowAccent?: string | number | boolean | undefined;
+        successLight?: string | number | boolean | undefined;
+        success?: string | number | boolean | undefined;
+        successMid?: string | number | boolean | undefined;
+        successDark?: string | number | boolean | undefined;
+        dangerLight?: string | number | boolean | undefined;
+        danger?: string | number | boolean | undefined;
+        dangerMid?: string | number | boolean | undefined;
+        dangerDark?: string | number | boolean | undefined;
+        warningLight?: string | number | boolean | undefined;
+        warning?: string | number | boolean | undefined;
+        warningMid?: string | number | boolean | undefined;
+        warningDark?: string | number | boolean | undefined;
+        warningText?: string | number | boolean | undefined;
+        subjectEnglish?: string | number | boolean | undefined;
+        subjectMaths?: string | number | boolean | undefined;
+        subjectScience?: string | number | boolean | undefined;
+        subjectVerbalReasoning?: string | number | boolean | undefined;
+        subjectNonVerbalReasoning?: string | number | boolean | undefined;
+        subjectCreativeWriting?: string | number | boolean | undefined;
+        subjectExamSkills?: string | number | boolean | undefined;
+    } | undefined;
+    space?: {
+        0?: string | number | boolean | undefined;
+        1?: string | number | boolean | undefined;
+        2?: string | number | boolean | undefined;
+        3?: string | number | boolean | undefined;
+        4?: string | number | boolean | undefined;
+        5?: string | number | boolean | undefined;
+        6?: string | number | boolean | undefined;
+        7?: string | number | boolean | undefined;
+        8?: string | number | boolean | undefined;
+        9?: string | number | boolean | undefined;
+    } | undefined;
+    fontSizes?: {
+        xs?: string | number | boolean | undefined;
+        sm?: string | number | boolean | undefined;
+        md?: string | number | boolean | undefined;
+        lg?: string | number | boolean | undefined;
+        xl?: string | number | boolean | undefined;
+        "2xl"?: string | number | boolean | undefined;
+        "3xl"?: string | number | boolean | undefined;
+        "4xl"?: string | number | boolean | undefined;
+    } | undefined;
+    fonts?: {
+        sans?: string | number | boolean | undefined;
+        mono?: string | number | boolean | undefined;
+        display?: string | number | boolean | undefined;
+        body?: string | number | boolean | undefined;
+    } | undefined;
+    sizes?: {
+        0?: string | number | boolean | undefined;
+        1?: string | number | boolean | undefined;
+        2?: string | number | boolean | undefined;
+        3?: string | number | boolean | undefined;
+        4?: string | number | boolean | undefined;
+        5?: string | number | boolean | undefined;
+        6?: string | number | boolean | undefined;
+        7?: string | number | boolean | undefined;
+        8?: string | number | boolean | undefined;
+    } | undefined;
+    radii?: {
+        0?: string | number | boolean | undefined;
+        1?: string | number | boolean | undefined;
+        2?: string | number | boolean | undefined;
+        3?: string | number | boolean | undefined;
+        round?: string | number | boolean | undefined;
+    } | undefined;
+    shadows?: {
+        0?: string | number | boolean | undefined;
+        1?: string | number | boolean | undefined;
+        2?: string | number | boolean | undefined;
+        3?: string | number | boolean | undefined;
+    } | undefined;
+} & {
+    [x: string]: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+}), Argument1 extends string | ({
+    colors?: {
+        textForeground?: string | number | boolean | undefined;
+        textSubtle?: string | number | boolean | undefined;
+        textPlaceholder?: string | number | boolean | undefined;
+        background?: string | number | boolean | undefined;
+        backgroundAccent?: string | number | boolean | undefined;
+        tonal50?: string | number | boolean | undefined;
+        tonal100?: string | number | boolean | undefined;
+        tonal200?: string | number | boolean | undefined;
+        tonal300?: string | number | boolean | undefined;
+        tonal400?: string | number | boolean | undefined;
+        tonal500?: string | number | boolean | undefined;
+        tonal600?: string | number | boolean | undefined;
+        alpha100?: string | number | boolean | undefined;
+        alpha150?: string | number | boolean | undefined;
+        alpha200?: string | number | boolean | undefined;
+        alpha250?: string | number | boolean | undefined;
+        alpha600?: string | number | boolean | undefined;
+        primaryLight?: string | number | boolean | undefined;
+        primary?: string | number | boolean | undefined;
+        primaryMid?: string | number | boolean | undefined;
+        primaryDark?: string | number | boolean | undefined;
+        secondary?: string | number | boolean | undefined;
+        brandRed?: string | number | boolean | undefined;
+        brandRedAccent?: string | number | boolean | undefined;
+        brandGreen?: string | number | boolean | undefined;
+        brandGreenAccent?: string | number | boolean | undefined;
+        brandPurple?: string | number | boolean | undefined;
+        brandPurpleAccent?: string | number | boolean | undefined;
+        brandYellow?: string | number | boolean | undefined;
+        brandYellowAccent?: string | number | boolean | undefined;
+        successLight?: string | number | boolean | undefined;
+        success?: string | number | boolean | undefined;
+        successMid?: string | number | boolean | undefined;
+        successDark?: string | number | boolean | undefined;
+        dangerLight?: string | number | boolean | undefined;
+        danger?: string | number | boolean | undefined;
+        dangerMid?: string | number | boolean | undefined;
+        dangerDark?: string | number | boolean | undefined;
+        warningLight?: string | number | boolean | undefined;
+        warning?: string | number | boolean | undefined;
+        warningMid?: string | number | boolean | undefined;
+        warningDark?: string | number | boolean | undefined;
+        warningText?: string | number | boolean | undefined;
+        subjectEnglish?: string | number | boolean | undefined;
+        subjectMaths?: string | number | boolean | undefined;
+        subjectScience?: string | number | boolean | undefined;
+        subjectVerbalReasoning?: string | number | boolean | undefined;
+        subjectNonVerbalReasoning?: string | number | boolean | undefined;
+        subjectCreativeWriting?: string | number | boolean | undefined;
+        subjectExamSkills?: string | number | boolean | undefined;
+    } | undefined;
+    space?: {
+        0?: string | number | boolean | undefined;
+        1?: string | number | boolean | undefined;
+        2?: string | number | boolean | undefined;
+        3?: string | number | boolean | undefined;
+        4?: string | number | boolean | undefined;
+        5?: string | number | boolean | undefined;
+        6?: string | number | boolean | undefined;
+        7?: string | number | boolean | undefined;
+        8?: string | number | boolean | undefined;
+        9?: string | number | boolean | undefined;
+    } | undefined;
+    fontSizes?: {
+        xs?: string | number | boolean | undefined;
+        sm?: string | number | boolean | undefined;
+        md?: string | number | boolean | undefined;
+        lg?: string | number | boolean | undefined;
+        xl?: string | number | boolean | undefined;
+        "2xl"?: string | number | boolean | undefined;
+        "3xl"?: string | number | boolean | undefined;
+        "4xl"?: string | number | boolean | undefined;
+    } | undefined;
+    fonts?: {
+        sans?: string | number | boolean | undefined;
+        mono?: string | number | boolean | undefined;
+        display?: string | number | boolean | undefined;
+        body?: string | number | boolean | undefined;
+    } | undefined;
+    sizes?: {
+        0?: string | number | boolean | undefined;
+        1?: string | number | boolean | undefined;
+        2?: string | number | boolean | undefined;
+        3?: string | number | boolean | undefined;
+        4?: string | number | boolean | undefined;
+        5?: string | number | boolean | undefined;
+        6?: string | number | boolean | undefined;
+        7?: string | number | boolean | undefined;
+        8?: string | number | boolean | undefined;
+    } | undefined;
+    radii?: {
+        0?: string | number | boolean | undefined;
+        1?: string | number | boolean | undefined;
+        2?: string | number | boolean | undefined;
+        3?: string | number | boolean | undefined;
+        round?: string | number | boolean | undefined;
+    } | undefined;
+    shadows?: {
+        0?: string | number | boolean | undefined;
+        1?: string | number | boolean | undefined;
+        2?: string | number | boolean | undefined;
+        3?: string | number | boolean | undefined;
+    } | undefined;
+} & {
+    [x: string]: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+})>(nameOrScalesArg0: Argument0, nameOrScalesArg1?: Argument1 | undefined) => string & {
+    className: string;
+    selector: string;
+} & (Argument0 extends string ? import("@stitches/react/types/stitches").ThemeTokens<Argument1, ""> : import("@stitches/react/types/stitches").ThemeTokens<Argument0, "">), globalCss: <Styles extends {
+    [K: string]: any;
+}>(...styles: ({
+    '@import'?: unknown;
+    '@font-face'?: unknown;
+} & { [K in keyof Styles]: K extends "@import" ? string | string[] : K extends "@font-face" ? import("@stitches/react/types/css").AtRule.FontFace | import("@stitches/react/types/css").AtRule.FontFace[] : K extends `@keyframes ${string}` ? {
+    [x: string]: import("@stitches/react/types/css-util").CSS<{
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        reducedMotion: string;
+        allowMotion: string;
+        hover: string;
+    }, {
+        colors: {
+            textForeground: any;
+            textSubtle: any;
+            textPlaceholder: any;
+            background: any;
+            backgroundAccent: any;
+            tonal50: any;
+            tonal100: any;
+            tonal200: any;
+            tonal300: any;
+            tonal400: any;
+            tonal500: any;
+            tonal600: any;
+            alpha100: any;
+            alpha150: any;
+            alpha200: any;
+            alpha250: any;
+            alpha600: any;
+            primaryLight: any;
+            primary: any;
+            primaryMid: any;
+            primaryDark: any;
+            secondary: any;
+            brandRed: any;
+            brandRedAccent: any;
+            brandGreen: any;
+            brandGreenAccent: any;
+            brandPurple: any;
+            brandPurpleAccent: any;
+            brandYellow: any;
+            brandYellowAccent: any;
+            successLight: any;
+            success: any;
+            successMid: any;
+            successDark: any;
+            dangerLight: any;
+            danger: any;
+            dangerMid: any;
+            dangerDark: any;
+            warningLight: any;
+            warning: any;
+            warningMid: any;
+            warningDark: any;
+            warningText: any;
+            subjectEnglish: any;
+            subjectMaths: any;
+            subjectScience: any;
+            subjectVerbalReasoning: any;
+            subjectNonVerbalReasoning: any;
+            subjectCreativeWriting: any;
+            subjectExamSkills: any;
+        };
+        space: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
+            "9": any;
+        };
+        fontSizes: {
+            xs: any;
+            sm: any;
+            md: any;
+            lg: any;
+            xl: any;
+            "2xl": any;
+            "3xl": any;
+            "4xl": any;
+        };
+        fonts: {
+            sans: any;
+            mono: any;
+            display: any;
+            body: any;
+        };
+        sizes: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
+        };
+        radii: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            round: any;
+        };
+        shadows: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+        };
+    }, import("@stitches/react/types/config").DefaultThemeMap, {
+        bg: (value: PropertyValue<'background'>) => {
+            background: {
+                readonly [$$PropertyValue]: "background";
+            };
+        };
+        inset: (value: ScaleValue<'space'> | number | string) => {
+            top: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            right: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            bottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            left: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        size: (value: ScaleValue<'size'> | number | string) => {
+            height: string | number | {
+                readonly [$$ScaleValue]: "size";
+            };
+            width: string | number | {
+                readonly [$$ScaleValue]: "size";
+            };
+        };
+        p: (value: ScaleValue<'space'> | number | string) => {
+            padding: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        pt: (value: ScaleValue<'space'> | number | string) => {
+            paddingTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        pr: (value: ScaleValue<'space'> | number | string) => {
+            paddingRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        pb: (value: ScaleValue<'space'> | number | string) => {
+            paddingBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        pl: (value: ScaleValue<'space'> | number | string) => {
+            paddingLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        px: (value: ScaleValue<'space'> | number | string) => {
+            paddingLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            paddingRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        py: (value: ScaleValue<'space'> | number | string) => {
+            paddingTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            paddingBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        m: (value: ScaleValue<'space'> | number | string) => {
+            margin: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mt: (value: ScaleValue<'space'> | number | string) => {
+            marginTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mr: (value: ScaleValue<'space'> | number | string) => {
+            marginRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mb: (value: ScaleValue<'space'> | number | string) => {
+            marginBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        ml: (value: ScaleValue<'space'> | number | string) => {
+            marginLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mx: (value: ScaleValue<'space'> | number | string) => {
+            marginLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        my: (value: ScaleValue<'space'> | number | string) => {
+            marginTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+    }>;
+} : K extends `@property ${string}` ? import("@stitches/react/types/css").AtRule.Property : import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: PropertyValue<'background'>) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: ScaleValue<'space'> | number | string) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: ScaleValue<'size'> | number | string) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: ScaleValue<'space'> | number | string) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: ScaleValue<'space'> | number | string) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: ScaleValue<'space'> | number | string) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: ScaleValue<'space'> | number | string) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: ScaleValue<'space'> | number | string) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: ScaleValue<'space'> | number | string) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>; })[]) => () => string, keyframes: (style: {
+    [offset: string]: import("@stitches/react/types/css-util").CSS<{
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        reducedMotion: string;
+        allowMotion: string;
+        hover: string;
+    }, {
+        colors: {
+            textForeground: any;
+            textSubtle: any;
+            textPlaceholder: any;
+            background: any;
+            backgroundAccent: any;
+            tonal50: any;
+            tonal100: any;
+            tonal200: any;
+            tonal300: any;
+            tonal400: any;
+            tonal500: any;
+            tonal600: any;
+            alpha100: any;
+            alpha150: any;
+            alpha200: any;
+            alpha250: any;
+            alpha600: any;
+            primaryLight: any;
+            primary: any;
+            primaryMid: any;
+            primaryDark: any;
+            secondary: any;
+            brandRed: any;
+            brandRedAccent: any;
+            brandGreen: any;
+            brandGreenAccent: any;
+            brandPurple: any;
+            brandPurpleAccent: any;
+            brandYellow: any;
+            brandYellowAccent: any;
+            successLight: any;
+            success: any;
+            successMid: any;
+            successDark: any;
+            dangerLight: any;
+            danger: any;
+            dangerMid: any;
+            dangerDark: any;
+            warningLight: any;
+            warning: any;
+            warningMid: any;
+            warningDark: any;
+            warningText: any;
+            subjectEnglish: any;
+            subjectMaths: any;
+            subjectScience: any;
+            subjectVerbalReasoning: any;
+            subjectNonVerbalReasoning: any;
+            subjectCreativeWriting: any;
+            subjectExamSkills: any;
+        };
+        space: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
+            "9": any;
+        };
+        fontSizes: {
+            xs: any;
+            sm: any;
+            md: any;
+            lg: any;
+            xl: any;
+            "2xl": any;
+            "3xl": any;
+            "4xl": any;
+        };
+        fonts: {
+            sans: any;
+            mono: any;
+            display: any;
+            body: any;
+        };
+        sizes: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
+        };
+        radii: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            round: any;
+        };
+        shadows: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+        };
+    }, import("@stitches/react/types/config").DefaultThemeMap, {
+        bg: (value: PropertyValue<'background'>) => {
+            background: {
+                readonly [$$PropertyValue]: "background";
+            };
+        };
+        inset: (value: ScaleValue<'space'> | number | string) => {
+            top: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            right: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            bottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            left: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        size: (value: ScaleValue<'size'> | number | string) => {
+            height: string | number | {
+                readonly [$$ScaleValue]: "size";
+            };
+            width: string | number | {
+                readonly [$$ScaleValue]: "size";
+            };
+        };
+        p: (value: ScaleValue<'space'> | number | string) => {
+            padding: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        pt: (value: ScaleValue<'space'> | number | string) => {
+            paddingTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        pr: (value: ScaleValue<'space'> | number | string) => {
+            paddingRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        pb: (value: ScaleValue<'space'> | number | string) => {
+            paddingBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        pl: (value: ScaleValue<'space'> | number | string) => {
+            paddingLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        px: (value: ScaleValue<'space'> | number | string) => {
+            paddingLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            paddingRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        py: (value: ScaleValue<'space'> | number | string) => {
+            paddingTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            paddingBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        m: (value: ScaleValue<'space'> | number | string) => {
+            margin: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mt: (value: ScaleValue<'space'> | number | string) => {
+            marginTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mr: (value: ScaleValue<'space'> | number | string) => {
+            marginRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mb: (value: ScaleValue<'space'> | number | string) => {
+            marginBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        ml: (value: ScaleValue<'space'> | number | string) => {
+            marginLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mx: (value: ScaleValue<'space'> | number | string) => {
+            marginLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        my: (value: ScaleValue<'space'> | number | string) => {
+            marginTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+    }>;
+}) => {
+    (): string;
+    name: string;
+}, styled: <Type extends import("@stitches/react/types/util").Function | keyof JSX.IntrinsicElements | import("react").ComponentType<any>, Composers extends (string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> | {
+    [name: string]: unknown;
+})[], CSS_1 = import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: PropertyValue<'background'>) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: ScaleValue<'space'> | number | string) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: ScaleValue<'size'> | number | string) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: ScaleValue<'space'> | number | string) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: ScaleValue<'space'> | number | string) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: ScaleValue<'space'> | number | string) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: ScaleValue<'space'> | number | string) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: ScaleValue<'space'> | number | string) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: ScaleValue<'space'> | number | string) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>(type: Type, ...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS_1> & {
+    variants?: {
+        [x: string]: {
+            [x: string]: CSS_1;
+            [x: number]: CSS_1;
+        };
+    } | undefined;
+    compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : import("@stitches/react/types/util").WideObject) & {
+        css: CSS_1;
+    })[] | undefined;
+    defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/react/types/util").WideObject) | undefined;
+} & CSS_1 & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: PropertyValue<'background'>) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: ScaleValue<'space'> | number | string) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: ScaleValue<'size'> | number | string) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: ScaleValue<'space'> | number | string) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: ScaleValue<'space'> | number | string) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: ScaleValue<'space'> | number | string) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: ScaleValue<'space'> | number | string) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: ScaleValue<'space'> | number | string) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: ScaleValue<'space'> | number | string) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: ScaleValue<'space'> | number | string) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: ScaleValue<'space'> | number | string) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: ScaleValue<'space'> | number | string) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: ScaleValue<'space'> | number | string) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>, theme: string & {
+    className: string;
+    selector: string;
+} & {
+    colors: {
+        textForeground: import("@stitches/react/types/theme").Token<"textForeground", string, "colors", "">;
+        textSubtle: import("@stitches/react/types/theme").Token<"textSubtle", string, "colors", "">;
+        textPlaceholder: import("@stitches/react/types/theme").Token<"textPlaceholder", string, "colors", "">;
+        background: import("@stitches/react/types/theme").Token<"background", string, "colors", "">;
+        backgroundAccent: import("@stitches/react/types/theme").Token<"backgroundAccent", string, "colors", "">;
+        tonal50: import("@stitches/react/types/theme").Token<"tonal50", string, "colors", "">;
+        tonal100: import("@stitches/react/types/theme").Token<"tonal100", string, "colors", "">;
+        tonal200: import("@stitches/react/types/theme").Token<"tonal200", string, "colors", "">;
+        tonal300: import("@stitches/react/types/theme").Token<"tonal300", string, "colors", "">;
+        tonal400: import("@stitches/react/types/theme").Token<"tonal400", string, "colors", "">;
+        tonal500: import("@stitches/react/types/theme").Token<"tonal500", string, "colors", "">;
+        tonal600: import("@stitches/react/types/theme").Token<"tonal600", string, "colors", "">;
+        alpha100: import("@stitches/react/types/theme").Token<"alpha100", string, "colors", "">;
+        alpha150: import("@stitches/react/types/theme").Token<"alpha150", string, "colors", "">;
+        alpha200: import("@stitches/react/types/theme").Token<"alpha200", string, "colors", "">;
+        alpha250: import("@stitches/react/types/theme").Token<"alpha250", string, "colors", "">;
+        alpha600: import("@stitches/react/types/theme").Token<"alpha600", string, "colors", "">;
+        primaryLight: import("@stitches/react/types/theme").Token<"primaryLight", string, "colors", "">;
+        primary: import("@stitches/react/types/theme").Token<"primary", string, "colors", "">;
+        primaryMid: import("@stitches/react/types/theme").Token<"primaryMid", string, "colors", "">;
+        primaryDark: import("@stitches/react/types/theme").Token<"primaryDark", string, "colors", "">;
+        secondary: import("@stitches/react/types/theme").Token<"secondary", string, "colors", "">;
+        brandRed: import("@stitches/react/types/theme").Token<"brandRed", string, "colors", "">;
+        brandRedAccent: import("@stitches/react/types/theme").Token<"brandRedAccent", string, "colors", "">;
+        brandGreen: import("@stitches/react/types/theme").Token<"brandGreen", string, "colors", "">;
+        brandGreenAccent: import("@stitches/react/types/theme").Token<"brandGreenAccent", string, "colors", "">;
+        brandPurple: import("@stitches/react/types/theme").Token<"brandPurple", string, "colors", "">;
+        brandPurpleAccent: import("@stitches/react/types/theme").Token<"brandPurpleAccent", string, "colors", "">;
+        brandYellow: import("@stitches/react/types/theme").Token<"brandYellow", string, "colors", "">;
+        brandYellowAccent: import("@stitches/react/types/theme").Token<"brandYellowAccent", string, "colors", "">;
+        successLight: import("@stitches/react/types/theme").Token<"successLight", string, "colors", "">;
+        success: import("@stitches/react/types/theme").Token<"success", string, "colors", "">;
+        successMid: import("@stitches/react/types/theme").Token<"successMid", string, "colors", "">;
+        successDark: import("@stitches/react/types/theme").Token<"successDark", string, "colors", "">;
+        dangerLight: import("@stitches/react/types/theme").Token<"dangerLight", string, "colors", "">;
+        danger: import("@stitches/react/types/theme").Token<"danger", string, "colors", "">;
+        dangerMid: import("@stitches/react/types/theme").Token<"dangerMid", string, "colors", "">;
+        dangerDark: import("@stitches/react/types/theme").Token<"dangerDark", string, "colors", "">;
+        warningLight: import("@stitches/react/types/theme").Token<"warningLight", string, "colors", "">;
+        warning: import("@stitches/react/types/theme").Token<"warning", string, "colors", "">;
+        warningMid: import("@stitches/react/types/theme").Token<"warningMid", string, "colors", "">;
+        warningDark: import("@stitches/react/types/theme").Token<"warningDark", string, "colors", "">;
+        warningText: import("@stitches/react/types/theme").Token<"warningText", string, "colors", "">;
+        subjectEnglish: import("@stitches/react/types/theme").Token<"subjectEnglish", string, "colors", "">;
+        subjectMaths: import("@stitches/react/types/theme").Token<"subjectMaths", string, "colors", "">;
+        subjectScience: import("@stitches/react/types/theme").Token<"subjectScience", string, "colors", "">;
+        subjectVerbalReasoning: import("@stitches/react/types/theme").Token<"subjectVerbalReasoning", string, "colors", "">;
+        subjectNonVerbalReasoning: import("@stitches/react/types/theme").Token<"subjectNonVerbalReasoning", string, "colors", "">;
+        subjectCreativeWriting: import("@stitches/react/types/theme").Token<"subjectCreativeWriting", string, "colors", "">;
+        subjectExamSkills: import("@stitches/react/types/theme").Token<"subjectExamSkills", string, "colors", "">;
+    };
+    space: {
+        0: import("@stitches/react/types/theme").Token<"0", string, "space", "">;
+        1: import("@stitches/react/types/theme").Token<"1", string, "space", "">;
+        2: import("@stitches/react/types/theme").Token<"2", string, "space", "">;
+        3: import("@stitches/react/types/theme").Token<"3", string, "space", "">;
+        4: import("@stitches/react/types/theme").Token<"4", string, "space", "">;
+        5: import("@stitches/react/types/theme").Token<"5", string, "space", "">;
+        6: import("@stitches/react/types/theme").Token<"6", string, "space", "">;
+        7: import("@stitches/react/types/theme").Token<"7", string, "space", "">;
+        8: import("@stitches/react/types/theme").Token<"8", string, "space", "">;
+        9: import("@stitches/react/types/theme").Token<"9", string, "space", "">;
+    };
+    fontSizes: {
+        xs: import("@stitches/react/types/theme").Token<"xs", string, "fontSizes", "">;
+        sm: import("@stitches/react/types/theme").Token<"sm", string, "fontSizes", "">;
+        md: import("@stitches/react/types/theme").Token<"md", string, "fontSizes", "">;
+        lg: import("@stitches/react/types/theme").Token<"lg", string, "fontSizes", "">;
+        xl: import("@stitches/react/types/theme").Token<"xl", string, "fontSizes", "">;
+        "2xl": import("@stitches/react/types/theme").Token<"2xl", string, "fontSizes", "">;
+        "3xl": import("@stitches/react/types/theme").Token<"3xl", string, "fontSizes", "">;
+        "4xl": import("@stitches/react/types/theme").Token<"4xl", string, "fontSizes", "">;
+    };
+    fonts: {
+        sans: import("@stitches/react/types/theme").Token<"sans", string, "fonts", "">;
+        mono: import("@stitches/react/types/theme").Token<"mono", string, "fonts", "">;
+        display: import("@stitches/react/types/theme").Token<"display", string, "fonts", "">;
+        body: import("@stitches/react/types/theme").Token<"body", string, "fonts", "">;
+    };
+    sizes: {
+        0: import("@stitches/react/types/theme").Token<"0", string, "sizes", "">;
+        1: import("@stitches/react/types/theme").Token<"1", string, "sizes", "">;
+        2: import("@stitches/react/types/theme").Token<"2", string, "sizes", "">;
+        3: import("@stitches/react/types/theme").Token<"3", string, "sizes", "">;
+        4: import("@stitches/react/types/theme").Token<"4", string, "sizes", "">;
+        5: import("@stitches/react/types/theme").Token<"5", string, "sizes", "">;
+        6: import("@stitches/react/types/theme").Token<"6", string, "sizes", "">;
+        7: import("@stitches/react/types/theme").Token<"7", string, "sizes", "">;
+        8: import("@stitches/react/types/theme").Token<"8", string, "sizes", "">;
+    };
+    radii: {
+        0: import("@stitches/react/types/theme").Token<"0", string, "radii", "">;
+        1: import("@stitches/react/types/theme").Token<"1", string, "radii", "">;
+        2: import("@stitches/react/types/theme").Token<"2", string, "radii", "">;
+        3: import("@stitches/react/types/theme").Token<"3", string, "radii", "">;
+        round: import("@stitches/react/types/theme").Token<"round", string, "radii", "">;
+    };
+    shadows: {
+        0: import("@stitches/react/types/theme").Token<"0", string, "shadows", "">;
+        1: import("@stitches/react/types/theme").Token<"1", string, "shadows", "">;
+        2: import("@stitches/react/types/theme").Token<"2", string, "shadows", "">;
+        3: import("@stitches/react/types/theme").Token<"3", string, "shadows", "">;
+    };
+};
 export declare type CSS = StitchesCSS<typeof stitchesConfig>;
 export {};