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

package/dist/components/field-wrapper/InlineFieldWrapper.d.ts

@@ -5,7 +5,7 @@ declare type InlineFieldWrapperProps = {
     error?: string;
     label: string;
     required?: boolean;
-    align?: 'baseline' | 'center';
+    align?: 'start' | 'center';
     direction?: 'row' | 'reverse';
     description?: string;
 };

package/dist/components/field-wrapper/InlineFieldWrapper.js

@@ -1 +1 @@
-function r(){return(r=Object.assign||function(r){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(r[i]=e[i])}return r}).apply(this,arguments)}import{createElement as o,Children as e}from"react";import{Box as i}from"../box/Box.js";import{Checkbox as t}from"../checkbox/Checkbox.js";import{Label as s}from"../label/Label.js";import{RadioButton as a}from"../radio/RadioButton.js";import"../radio/RadioButtonGroup.js";import{ValidationError as n}from"../validation-error/ValidationError.js";import{Description as l}from"./FieldDescription.js";const p=({align:p="baseline",children:c,css:m,description:d,direction:f="row",error:u,label:b,required:j})=>o(i,{css:m},o(s,{align:p,direction:f,required:j,type:"inline"},e.map(c,(e=>o(i,{css:r({["reverse"===f?"ml":"mr"]:"$3"},((null==e?void 0:e.type)===t||(null==e?void 0:e.type)===a)&&{transform:"translateY($space$0)"})},e))),b),u&&o(n,{css:{mt:"$2"}},u),d&&o(l,{css:{mt:"$2",["reverse"===f?"mr":"ml"]:"calc($space$3 + $sizes$1)"}},d));p.displayName="InlineFieldWrapper";export{p as InlineFieldWrapper};
+function r(){return(r=Object.assign||function(r){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(r[e]=t[e])}return r}).apply(this,arguments)}import{createElement as o,Children as t}from"react";import{Box as e}from"../box/Box.js";import{Checkbox as i}from"../checkbox/Checkbox.js";import{Label as s}from"../label/Label.js";import{RadioButton as a}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import{ValidationError as n}from"../validation-error/ValidationError.js";import{Description as l}from"./FieldDescription.js";const p=({align:p="start",children:c,css:m,description:d,direction:u="row",error:f,label:b,required:j})=>o(e,{css:m},o(s,{align:p,direction:u,required:j,type:"inline"},t.map(c,(t=>o(e,{css:r({["reverse"===u?"ml":"mr"]:"$3"},((null==t?void 0:t.type)===i||(null==t?void 0:t.type)===a)&&{transform:"translateY($space$1)"})},t))),b),f&&o(n,{css:{mt:"$2"}},f),d&&o(l,{css:{mt:"$2",["reverse"===u?"mr":"ml"]:"calc($space$3 + $sizes$1)"}},d));p.displayName="InlineFieldWrapper";export{p as InlineFieldWrapper};

package/dist/components/flex/Flex.d.ts

@@ -4,6 +4,7 @@ export declare const Flex: import("@stitches/react/types/styled-component").Styl
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, import("@stitches/react/types/css-util").CSS<{
     sm: string;
@@ -11,6 +12,7 @@ export declare const Flex: import("@stitches/react/types/styled-component").Styl
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -117,63 +119,147 @@ export declare const Flex: import("@stitches/react/types/styled-component").Styl
         "3": any;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: import("@stitches/react").PropertyValue<"background">) => {
-        background: import("@stitches/react").PropertyValue<"background">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
-    inset: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        top: string | number | import("@stitches/react").ScaleValue<"space">;
-        right: string | number | import("@stitches/react").ScaleValue<"space">;
-        bottom: string | number | import("@stitches/react").ScaleValue<"space">;
-        left: string | number | import("@stitches/react").ScaleValue<"space">;
+    inset: (value: string | number | {
+        readonly [$$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: string | number | import("@stitches/react").ScaleValue<"size">) => {
-        height: string | number | import("@stitches/react").ScaleValue<"size">;
-        width: string | number | import("@stitches/react").ScaleValue<"size">;
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
-    p: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react").ScaleValue<"space">;
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pl: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    px: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    py: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    m: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react").ScaleValue<"space">;
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    ml: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mx: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    my: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;

package/dist/components/form/Form.d.ts

@@ -6,6 +6,7 @@ declare const StyledForm: import("@stitches/react/types/styled-component").Style
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, import("@stitches/react/types/css-util").CSS<{
     sm: string;
@@ -13,6 +14,7 @@ declare const StyledForm: import("@stitches/react/types/styled-component").Style
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -119,64 +121,148 @@ declare const StyledForm: import("@stitches/react/types/styled-component").Style
         "3": any;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: import("@stitches/react").PropertyValue<"background">) => {
-        background: import("@stitches/react").PropertyValue<"background">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
-    inset: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        top: string | number | import("@stitches/react").ScaleValue<"space">;
-        right: string | number | import("@stitches/react").ScaleValue<"space">;
-        bottom: string | number | import("@stitches/react").ScaleValue<"space">;
-        left: string | number | import("@stitches/react").ScaleValue<"space">;
+    inset: (value: string | number | {
+        readonly [$$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: string | number | import("@stitches/react").ScaleValue<"size">) => {
-        height: string | number | import("@stitches/react").ScaleValue<"size">;
-        width: string | number | import("@stitches/react").ScaleValue<"size">;
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
-    p: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react").ScaleValue<"space">;
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pl: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    px: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    py: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    m: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react").ScaleValue<"space">;
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    ml: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mx: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    my: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare type FormProps = React.ComponentPropsWithoutRef<typeof StyledForm> & FormValues;

package/dist/components/grid/Grid.d.ts

@@ -7,6 +7,7 @@ declare const GridContainer: import("@stitches/react/types/styled-component").St
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, import("@stitches/react/types/css-util").CSS<{
     sm: string;
@@ -14,6 +15,7 @@ declare const GridContainer: import("@stitches/react/types/styled-component").St
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -120,64 +122,148 @@ declare const GridContainer: import("@stitches/react/types/styled-component").St
         "3": any;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: import("@stitches/react").PropertyValue<"background">) => {
-        background: import("@stitches/react").PropertyValue<"background">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
-    inset: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        top: string | number | import("@stitches/react").ScaleValue<"space">;
-        right: string | number | import("@stitches/react").ScaleValue<"space">;
-        bottom: string | number | import("@stitches/react").ScaleValue<"space">;
-        left: string | number | import("@stitches/react").ScaleValue<"space">;
+    inset: (value: string | number | {
+        readonly [$$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: string | number | import("@stitches/react").ScaleValue<"size">) => {
-        height: string | number | import("@stitches/react").ScaleValue<"size">;
-        width: string | number | import("@stitches/react").ScaleValue<"size">;
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
-    p: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react").ScaleValue<"space">;
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pl: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    px: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    py: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    m: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react").ScaleValue<"space">;
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    ml: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mx: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    my: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare type GridProps = React.ComponentProps<typeof GridContainer> & {