@atom-learning/components 1.0.0-rc.3 → 1.0.1

package/dist/stitches.d.ts

@@ -2,63 +2,113 @@
 import type * as Stitches from '@stitches/react';
 export declare const utils: {
     bg: (value: Stitches.PropertyValue<'background'>) => {
-        background: Stitches.PropertyValue<"background">;
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
     inset: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        top: string | number | Stitches.ScaleValue<"space">;
-        right: string | number | Stitches.ScaleValue<"space">;
-        bottom: string | number | Stitches.ScaleValue<"space">;
-        left: string | number | Stitches.ScaleValue<"space">;
+        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: Stitches.ScaleValue<'size'> | number | string) => {
-        height: string | number | Stitches.ScaleValue<"size">;
-        width: string | number | Stitches.ScaleValue<"size">;
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
     p: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        padding: string | number | Stitches.ScaleValue<"space">;
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pl: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     px: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     py: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     m: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        margin: string | number | Stitches.ScaleValue<"space">;
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     ml: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mx: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     my: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 };
 export declare const media: {
@@ -67,6 +117,7 @@ export declare const media: {
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 };
 declare const stitchesConfig: import("@stitches/react/types/stitches").default<"", {
@@ -75,6 +126,7 @@ declare const stitchesConfig: import("@stitches/react/types/stitches").default<"
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -182,63 +234,113 @@ declare const stitchesConfig: import("@stitches/react/types/stitches").default<"
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'background'>) => {
-        background: Stitches.PropertyValue<"background">;
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
     inset: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        top: string | number | Stitches.ScaleValue<"space">;
-        right: string | number | Stitches.ScaleValue<"space">;
-        bottom: string | number | Stitches.ScaleValue<"space">;
-        left: string | number | Stitches.ScaleValue<"space">;
+        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: Stitches.ScaleValue<'size'> | number | string) => {
-        height: string | number | Stitches.ScaleValue<"size">;
-        width: string | number | Stitches.ScaleValue<"size">;
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
     p: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        padding: string | number | Stitches.ScaleValue<"space">;
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pl: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     px: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     py: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     m: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        margin: string | number | Stitches.ScaleValue<"space">;
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     ml: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mx: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     my: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        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> | {
@@ -249,6 +351,7 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -356,63 +459,113 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'background'>) => {
-        background: Stitches.PropertyValue<"background">;
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
     inset: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        top: string | number | Stitches.ScaleValue<"space">;
-        right: string | number | Stitches.ScaleValue<"space">;
-        bottom: string | number | Stitches.ScaleValue<"space">;
-        left: string | number | Stitches.ScaleValue<"space">;
+        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: Stitches.ScaleValue<'size'> | number | string) => {
-        height: string | number | Stitches.ScaleValue<"size">;
-        width: string | number | Stitches.ScaleValue<"size">;
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
     p: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        padding: string | number | Stitches.ScaleValue<"space">;
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pl: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     px: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     py: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     m: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        margin: string | number | Stitches.ScaleValue<"space">;
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     ml: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mx: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     my: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>(...composers: { [K in keyof Composers]: 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?: {
@@ -431,6 +584,7 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, CSS_1>, getCssText: () => string, createTheme: <Argument0 extends string | ({
     colors?: {
@@ -665,6 +819,7 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
         lg: string;
         xl: string;
         reducedMotion: string;
+        allowMotion: string;
         hover: string;
     }, {
         colors: {
@@ -772,63 +927,113 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
         };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         bg: (value: Stitches.PropertyValue<'background'>) => {
-            background: Stitches.PropertyValue<"background">;
+            background: {
+                readonly [$$PropertyValue]: "background";
+            };
         };
         inset: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            top: string | number | Stitches.ScaleValue<"space">;
-            right: string | number | Stitches.ScaleValue<"space">;
-            bottom: string | number | Stitches.ScaleValue<"space">;
-            left: string | number | Stitches.ScaleValue<"space">;
+            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: Stitches.ScaleValue<'size'> | number | string) => {
-            height: string | number | Stitches.ScaleValue<"size">;
-            width: string | number | Stitches.ScaleValue<"size">;
+            height: string | number | {
+                readonly [$$ScaleValue]: "size";
+            };
+            width: string | number | {
+                readonly [$$ScaleValue]: "size";
+            };
         };
         p: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            padding: string | number | Stitches.ScaleValue<"space">;
+            padding: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         pt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingTop: string | number | Stitches.ScaleValue<"space">;
+            paddingTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         pr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingRight: string | number | Stitches.ScaleValue<"space">;
+            paddingRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         pb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingBottom: string | number | Stitches.ScaleValue<"space">;
+            paddingBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         pl: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingLeft: string | number | Stitches.ScaleValue<"space">;
+            paddingLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         px: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingLeft: string | number | Stitches.ScaleValue<"space">;
-            paddingRight: string | number | Stitches.ScaleValue<"space">;
+            paddingLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            paddingRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         py: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingTop: string | number | Stitches.ScaleValue<"space">;
-            paddingBottom: string | number | Stitches.ScaleValue<"space">;
+            paddingTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            paddingBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         m: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            margin: string | number | Stitches.ScaleValue<"space">;
+            margin: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         mt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginTop: string | number | Stitches.ScaleValue<"space">;
+            marginTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         mr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginRight: string | number | Stitches.ScaleValue<"space">;
+            marginRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         mb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginBottom: string | number | Stitches.ScaleValue<"space">;
+            marginBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         ml: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginLeft: string | number | Stitches.ScaleValue<"space">;
+            marginLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         mx: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginLeft: string | number | Stitches.ScaleValue<"space">;
-            marginRight: string | number | Stitches.ScaleValue<"space">;
+            marginLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         my: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginTop: string | number | Stitches.ScaleValue<"space">;
-            marginBottom: string | number | Stitches.ScaleValue<"space">;
+            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<{
@@ -837,6 +1042,7 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -944,63 +1150,113 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'background'>) => {
-        background: Stitches.PropertyValue<"background">;
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
     inset: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        top: string | number | Stitches.ScaleValue<"space">;
-        right: string | number | Stitches.ScaleValue<"space">;
-        bottom: string | number | Stitches.ScaleValue<"space">;
-        left: string | number | Stitches.ScaleValue<"space">;
+        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: Stitches.ScaleValue<'size'> | number | string) => {
-        height: string | number | Stitches.ScaleValue<"size">;
-        width: string | number | Stitches.ScaleValue<"size">;
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
     p: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        padding: string | number | Stitches.ScaleValue<"space">;
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pl: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     px: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     py: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     m: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        margin: string | number | Stitches.ScaleValue<"space">;
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     ml: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mx: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     my: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>; })[]) => () => string, keyframes: (style: {
     [offset: string]: import("@stitches/react/types/css-util").CSS<{
@@ -1009,6 +1265,7 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
         lg: string;
         xl: string;
         reducedMotion: string;
+        allowMotion: string;
         hover: string;
     }, {
         colors: {
@@ -1116,63 +1373,113 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
         };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         bg: (value: Stitches.PropertyValue<'background'>) => {
-            background: Stitches.PropertyValue<"background">;
+            background: {
+                readonly [$$PropertyValue]: "background";
+            };
         };
         inset: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            top: string | number | Stitches.ScaleValue<"space">;
-            right: string | number | Stitches.ScaleValue<"space">;
-            bottom: string | number | Stitches.ScaleValue<"space">;
-            left: string | number | Stitches.ScaleValue<"space">;
+            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: Stitches.ScaleValue<'size'> | number | string) => {
-            height: string | number | Stitches.ScaleValue<"size">;
-            width: string | number | Stitches.ScaleValue<"size">;
+            height: string | number | {
+                readonly [$$ScaleValue]: "size";
+            };
+            width: string | number | {
+                readonly [$$ScaleValue]: "size";
+            };
         };
         p: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            padding: string | number | Stitches.ScaleValue<"space">;
+            padding: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         pt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingTop: string | number | Stitches.ScaleValue<"space">;
+            paddingTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         pr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingRight: string | number | Stitches.ScaleValue<"space">;
+            paddingRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         pb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingBottom: string | number | Stitches.ScaleValue<"space">;
+            paddingBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         pl: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingLeft: string | number | Stitches.ScaleValue<"space">;
+            paddingLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         px: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingLeft: string | number | Stitches.ScaleValue<"space">;
-            paddingRight: string | number | Stitches.ScaleValue<"space">;
+            paddingLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            paddingRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         py: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            paddingTop: string | number | Stitches.ScaleValue<"space">;
-            paddingBottom: string | number | Stitches.ScaleValue<"space">;
+            paddingTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            paddingBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         m: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            margin: string | number | Stitches.ScaleValue<"space">;
+            margin: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         mt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginTop: string | number | Stitches.ScaleValue<"space">;
+            marginTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         mr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginRight: string | number | Stitches.ScaleValue<"space">;
+            marginRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         mb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginBottom: string | number | Stitches.ScaleValue<"space">;
+            marginBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         ml: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginLeft: string | number | Stitches.ScaleValue<"space">;
+            marginLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         mx: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginLeft: string | number | Stitches.ScaleValue<"space">;
-            marginRight: string | number | Stitches.ScaleValue<"space">;
+            marginLeft: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
         my: (value: Stitches.ScaleValue<'space'> | number | string) => {
-            marginTop: string | number | Stitches.ScaleValue<"space">;
-            marginBottom: string | number | Stitches.ScaleValue<"space">;
+            marginTop: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginBottom: string | number | {
+                readonly [$$ScaleValue]: "space";
+            };
         };
     }>;
 }) => {
@@ -1186,6 +1493,7 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -1293,63 +1601,113 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'background'>) => {
-        background: Stitches.PropertyValue<"background">;
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
     inset: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        top: string | number | Stitches.ScaleValue<"space">;
-        right: string | number | Stitches.ScaleValue<"space">;
-        bottom: string | number | Stitches.ScaleValue<"space">;
-        left: string | number | Stitches.ScaleValue<"space">;
+        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: Stitches.ScaleValue<'size'> | number | string) => {
-        height: string | number | Stitches.ScaleValue<"size">;
-        width: string | number | Stitches.ScaleValue<"size">;
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
     p: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        padding: string | number | Stitches.ScaleValue<"space">;
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pl: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     px: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     py: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     m: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        margin: string | number | Stitches.ScaleValue<"space">;
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     ml: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mx: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     my: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>(type: Type, ...composers: { [K in keyof Composers]: 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?: {
@@ -1368,6 +1726,7 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, import("@stitches/react/types/css-util").CSS<{
     sm: string;
@@ -1375,6 +1734,7 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -1482,63 +1842,113 @@ export declare const css: <Composers extends (string | import("@stitches/react/t
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'background'>) => {
-        background: Stitches.PropertyValue<"background">;
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
     inset: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        top: string | number | Stitches.ScaleValue<"space">;
-        right: string | number | Stitches.ScaleValue<"space">;
-        bottom: string | number | Stitches.ScaleValue<"space">;
-        left: string | number | Stitches.ScaleValue<"space">;
+        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: Stitches.ScaleValue<'size'> | number | string) => {
-        height: string | number | Stitches.ScaleValue<"size">;
-        width: string | number | Stitches.ScaleValue<"size">;
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
     p: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        padding: string | number | Stitches.ScaleValue<"space">;
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     pl: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     px: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingLeft: string | number | Stitches.ScaleValue<"space">;
-        paddingRight: string | number | Stitches.ScaleValue<"space">;
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     py: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        paddingTop: string | number | Stitches.ScaleValue<"space">;
-        paddingBottom: string | number | Stitches.ScaleValue<"space">;
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     m: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        margin: string | number | Stitches.ScaleValue<"space">;
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mt: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mr: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mb: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     ml: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     mx: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginLeft: string | number | Stitches.ScaleValue<"space">;
-        marginRight: string | number | Stitches.ScaleValue<"space">;
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
     my: (value: Stitches.ScaleValue<'space'> | number | string) => {
-        marginTop: string | number | Stitches.ScaleValue<"space">;
-        marginBottom: string | number | Stitches.ScaleValue<"space">;
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>, theme: string & {
     className: string;