@atom-learning/components 2.30.0 → 2.31.0-beta.0

package/dist/stitches.d.ts

@@ -1,114 +1,57 @@
-/// <reference types="react" />
 import type { CSS as StitchesCSS, PropertyValue, ScaleValue } from '@stitches/react';
 export declare const utils: {
     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";
-        };
+        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
     };
     size: (value: ScaleValue<'size'> | number | string) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
     };
     p: (value: ScaleValue<'space'> | number | string) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pt: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pr: (value: ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pb: (value: ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pl: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     px: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     py: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     m: (value: ScaleValue<'space'> | number | string) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mt: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mr: (value: ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mb: (value: ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     ml: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mx: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     my: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 };
 export declare const media: {
@@ -235,118 +178,233 @@ declare const stitchesConfig: import("@stitches/react/types/stitches").default<"
     };
 }, 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";
-        };
+        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
     };
     size: (value: ScaleValue<'size'> | number | string) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
     };
     p: (value: ScaleValue<'space'> | number | string) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pt: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pr: (value: ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pb: (value: ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pl: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     px: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     py: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     m: (value: ScaleValue<'space'> | number | string) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mt: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mr: (value: ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mb: (value: ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     ml: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mx: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     my: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"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<{
+export declare const css: {
+    withConfig: (config: {
+        componentId?: string | undefined;
+        displayName?: string | undefined;
+        shouldForwardStitchesProp?: ((prop: "css" | (string & {})) => boolean | void) | undefined;
+    }) => import("@stitches/react/types/stitches").CssFunctionType<{
+        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: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+        };
+        size: (value: ScaleValue<'size'> | number | string) => {
+            height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+            width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        };
+        p: (value: ScaleValue<'space'> | number | string) => {
+            padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pt: (value: ScaleValue<'space'> | number | string) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pr: (value: ScaleValue<'space'> | number | string) => {
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pb: (value: ScaleValue<'space'> | number | string) => {
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pl: (value: ScaleValue<'space'> | number | string) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        px: (value: ScaleValue<'space'> | number | string) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        py: (value: ScaleValue<'space'> | number | string) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        m: (value: ScaleValue<'space'> | number | string) => {
+            margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mt: (value: ScaleValue<'space'> | number | string) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mr: (value: ScaleValue<'space'> | number | string) => {
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mb: (value: ScaleValue<'space'> | number | string) => {
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        ml: (value: ScaleValue<'space'> | number | string) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mx: (value: ScaleValue<'space'> | number | string) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        my: (value: ScaleValue<'space'> | number | string) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+    }>;
+} & import("@stitches/react/types/stitches").CssFunctionType<{
     sm: string;
     md: string;
     lg: string;
@@ -461,134 +519,59 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     };
 }, 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";
-        };
+        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
     };
     size: (value: ScaleValue<'size'> | number | string) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
     };
     p: (value: ScaleValue<'space'> | number | string) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pt: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pr: (value: ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pb: (value: ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pl: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     px: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     py: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     m: (value: ScaleValue<'space'> | number | string) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mt: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mr: (value: ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mb: (value: ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     ml: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mx: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     my: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"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 | ({
+}>, getCssText: () => string, createTheme: <Argument0 extends string | ({
     colors?: {
         textForeground?: string | number | boolean | undefined;
         textSubtle?: string | number | boolean | undefined;
@@ -932,113 +915,57 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
         };
     }, 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";
-            };
+            background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
         };
         size: (value: ScaleValue<'size'> | number | string) => {
-            height: string | number | {
-                readonly [$$ScaleValue]: "size";
-            };
-            width: string | number | {
-                readonly [$$ScaleValue]: "size";
-            };
+            height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+            width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
         };
         p: (value: ScaleValue<'space'> | number | string) => {
-            padding: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         pt: (value: ScaleValue<'space'> | number | string) => {
-            paddingTop: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         pr: (value: ScaleValue<'space'> | number | string) => {
-            paddingRight: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         pb: (value: ScaleValue<'space'> | number | string) => {
-            paddingBottom: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         pl: (value: ScaleValue<'space'> | number | string) => {
-            paddingLeft: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         px: (value: ScaleValue<'space'> | number | string) => {
-            paddingLeft: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
-            paddingRight: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         py: (value: ScaleValue<'space'> | number | string) => {
-            paddingTop: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
-            paddingBottom: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         m: (value: ScaleValue<'space'> | number | string) => {
-            margin: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         mt: (value: ScaleValue<'space'> | number | string) => {
-            marginTop: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         mr: (value: ScaleValue<'space'> | number | string) => {
-            marginRight: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         mb: (value: ScaleValue<'space'> | number | string) => {
-            marginBottom: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         ml: (value: ScaleValue<'space'> | number | string) => {
-            marginLeft: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         mx: (value: ScaleValue<'space'> | number | string) => {
-            marginLeft: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
-            marginRight: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         my: (value: ScaleValue<'space'> | number | string) => {
-            marginTop: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
-            marginBottom: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
     }>;
 } : K extends `@property ${string}` ? import("@stitches/react/types/css").AtRule.Property : import("@stitches/react/types/css-util").CSS<{
@@ -1156,113 +1083,57 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     };
 }, 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";
-        };
+        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
     };
     size: (value: ScaleValue<'size'> | number | string) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
     };
     p: (value: ScaleValue<'space'> | number | string) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pt: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pr: (value: ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pb: (value: ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pl: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     px: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     py: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     m: (value: ScaleValue<'space'> | number | string) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mt: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mr: (value: ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mb: (value: ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     ml: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mx: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     my: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>; })[]) => () => string, keyframes: (style: {
     [offset: string]: import("@stitches/react/types/css-util").CSS<{
@@ -1380,363 +1251,236 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
         };
     }, 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";
-            };
+            background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
         };
         size: (value: ScaleValue<'size'> | number | string) => {
-            height: string | number | {
-                readonly [$$ScaleValue]: "size";
-            };
-            width: string | number | {
-                readonly [$$ScaleValue]: "size";
-            };
+            height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+            width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
         };
         p: (value: ScaleValue<'space'> | number | string) => {
-            padding: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         pt: (value: ScaleValue<'space'> | number | string) => {
-            paddingTop: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         pr: (value: ScaleValue<'space'> | number | string) => {
-            paddingRight: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         pb: (value: ScaleValue<'space'> | number | string) => {
-            paddingBottom: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         pl: (value: ScaleValue<'space'> | number | string) => {
-            paddingLeft: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         px: (value: ScaleValue<'space'> | number | string) => {
-            paddingLeft: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
-            paddingRight: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         py: (value: ScaleValue<'space'> | number | string) => {
-            paddingTop: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
-            paddingBottom: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         m: (value: ScaleValue<'space'> | number | string) => {
-            margin: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         mt: (value: ScaleValue<'space'> | number | string) => {
-            marginTop: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         mr: (value: ScaleValue<'space'> | number | string) => {
-            marginRight: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         mb: (value: ScaleValue<'space'> | number | string) => {
-            marginBottom: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         ml: (value: ScaleValue<'space'> | number | string) => {
-            marginLeft: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         mx: (value: ScaleValue<'space'> | number | string) => {
-            marginLeft: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
-            marginRight: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
         my: (value: ScaleValue<'space'> | number | string) => {
-            marginTop: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
-            marginBottom: string | number | {
-                readonly [$$ScaleValue]: "space";
-            };
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"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";
+}, styled: {
+    withConfig: (config: {
+        componentId?: string | undefined;
+        displayName?: string | undefined;
+        shouldForwardStitchesProp?: ((prop: "css" | (string & {})) => boolean | void) | undefined;
+    }) => import("@stitches/react/types/stitches").StyledFunctionType<{
+        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;
         };
-        left: string | number | {
-            readonly [$$ScaleValue]: "space";
+        space: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
+            "9": any;
         };
-    };
-    size: (value: ScaleValue<'size'> | number | string) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
+        fontSizes: {
+            xs: any;
+            sm: any;
+            md: any;
+            lg: any;
+            xl: any;
+            "2xl": any;
+            "3xl": any;
+            "4xl": any;
         };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
+        fonts: {
+            sans: any;
+            mono: any;
+            display: any;
+            body: any;
         };
-    };
-    p: (value: ScaleValue<'space'> | number | string) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
+        sizes: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
         };
-    };
-    pt: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
+        radii: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            round: any;
         };
-    };
-    pr: (value: ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
+        shadows: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
         };
-    };
-    pb: (value: ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
+    }, import("@stitches/react/types/config").DefaultThemeMap, {
+        bg: (value: PropertyValue<'background'>) => {
+            background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
         };
-    };
-    pl: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
+        size: (value: ScaleValue<'size'> | number | string) => {
+            height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+            width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
         };
-    };
-    px: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
+        p: (value: ScaleValue<'space'> | number | string) => {
+            padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
+        pt: (value: ScaleValue<'space'> | number | string) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-    };
-    py: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
+        pr: (value: ScaleValue<'space'> | number | string) => {
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
+        pb: (value: ScaleValue<'space'> | number | string) => {
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-    };
-    m: (value: ScaleValue<'space'> | number | string) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
+        pl: (value: ScaleValue<'space'> | number | string) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-    };
-    mt: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
+        px: (value: ScaleValue<'space'> | number | string) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-    };
-    mr: (value: ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
+        py: (value: ScaleValue<'space'> | number | string) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-    };
-    mb: (value: ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
+        m: (value: ScaleValue<'space'> | number | string) => {
+            margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-    };
-    ml: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
+        mt: (value: ScaleValue<'space'> | number | string) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-    };
-    mx: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
+        mr: (value: ScaleValue<'space'> | number | string) => {
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
+        mb: (value: ScaleValue<'space'> | number | string) => {
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-    };
-    my: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
+        ml: (value: ScaleValue<'space'> | number | string) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
+        mx: (value: ScaleValue<'space'> | number | string) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"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;
+        my: (value: ScaleValue<'space'> | number | string) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
-    } | 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<{
+    }>;
+} & import("@stitches/react/types/stitches").StyledFunctionType<{
     sm: string;
     md: string;
     lg: string;
@@ -1851,115 +1595,59 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     };
 }, 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";
-        };
+        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
     };
     size: (value: ScaleValue<'size'> | number | string) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
     };
     p: (value: ScaleValue<'space'> | number | string) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pt: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pr: (value: ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pb: (value: ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pl: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     px: (value: ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     py: (value: ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     m: (value: ScaleValue<'space'> | number | string) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mt: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mr: (value: ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mb: (value: ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     ml: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     mx: (value: ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     my: (value: ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-}>>, theme: string & {
+}>, theme: string & {
     className: string;
     selector: string;
 } & {