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

package/dist/components/popover/Popover.d.ts

@@ -7,6 +7,7 @@ declare const StyledRoot: 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;
@@ -14,6 +15,7 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -120,64 +122,148 @@ declare const StyledRoot: 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 PopoverProps = React.ComponentProps<typeof StyledRoot>;

package/dist/components/popover/PopoverContent.d.ts

@@ -8,6 +8,7 @@ declare const StyledContent: 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;
@@ -15,6 +16,7 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -121,64 +123,148 @@ declare const StyledContent: 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 PopoverContentProps = React.ComponentProps<typeof StyledContent> & React.ComponentProps<typeof Content> & {

package/dist/components/popover/PopoverContent.js

@@ -1 +1 @@
-const i=["children","side","sideOffset","closePopoverText","size"];import{Close as t}from"@atom-learning/icons";import{Content as e,Arrow as o,Close as s}from"@radix-ui/react-popover";import{createElement as r}from"react";import{keyframes as a,styled as n}from"../../stitches.js";import{ActionIcon as m}from"../action-icon/ActionIcon.js";import{Icon as l}from"../icon/Icon.js";const c=n(e,{animation:`${a({"0%":{opacity:0,transform:"scale(0.8)"},"100%":{opacity:1,transform:"scale(1)"}})} 75ms ease-out`,bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative",transformOrigin:"var(--radix-tooltip-content-transform-origin)",variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),d=n(o,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),p=e=>{let{children:o,side:a="top",sideOffset:n=8,closePopoverText:p="Close popover",size:f="md"}=e,h=function(i,t){if(null==i)return{};var e,o,s={},r=Object.keys(i);for(o=0;o<r.length;o++)e=r[o],t.indexOf(e)>=0||(s[e]=i[e]);return s}(e,i);return r(c,Object.assign({size:f,side:a,sideOffset:n},h),r(m,{as:s,css:{position:"absolute",right:"$0",top:"$0"},label:p,size:"lg",theme:"neutral"},r(l,{is:t})),o,r(d,{width:16,height:8}))};export{p as PopoverContent};
+const i=["children","side","sideOffset","closePopoverText","size"];import{Close as t}from"@atom-learning/icons";import{Content as e,Arrow as o,Close as a}from"@radix-ui/react-popover";import{createElement as s}from"react";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{slideDownAndFade as n,slideLeftAndFade as m,slideUpAndFade as d,slideRightAndFade as p}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";const f=r(e,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative","@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:n},'&[data-side="right"]':{animationName:m},'&[data-side="bottom"]':{animationName:d},'&[data-side="left"]':{animationName:p}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),h=r(o,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=e=>{let{children:o,side:r="top",sideOffset:n=8,closePopoverText:m="Close popover",size:d="md"}=e,p=function(i,t){if(null==i)return{};var e,o,a={},s=Object.keys(i);for(o=0;o<s.length;o++)e=s[o],t.indexOf(e)>=0||(a[e]=i[e]);return a}(e,i);return s(f,Object.assign({size:d,side:r,sideOffset:n},p),s(l,{as:a,css:{position:"absolute",right:"$0",top:"$0"},label:m,size:"lg",theme:"neutral"},s(c,{is:t})),o,s(h,{width:16,height:8}))};export{u as PopoverContent};

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -8,6 +8,7 @@ declare const StyledProgressBar: import("@stitches/react/types/styled-component"
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, import("@stitches/react/types/css-util").CSS<{
     sm: string;
@@ -15,6 +16,7 @@ declare const StyledProgressBar: import("@stitches/react/types/styled-component"
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -121,64 +123,148 @@ declare const StyledProgressBar: import("@stitches/react/types/styled-component"
         "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 ProgressBarProps = React.ComponentPropsWithoutRef<typeof StyledProgressBar> & ({