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

package/dist/components/button/Button.js

@@ -1 +1 @@
-const e=["children","isLoading","onClick","href","appearance","size","theme","type"];function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e}).apply(this,arguments)}import{darken as o}from"polished";import{forwardRef as a,createElement as i,Children as n,cloneElement as t,Fragment as s}from"react";import{Box as c}from"../box/Box.js";import{Icon as l}from"../icon/Icon.js";import{Loader as d}from"../loader/Loader.js";import{styled as p,theme as m}from"../../stitches.js";const u=(e,r,o,a="white")=>({bg:e,color:a,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:a},"&:not([disabled]):active":{bg:o}}),h=p("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4"},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5"},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5"}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{true:{width:"100%"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:u("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:u("$primaryDark",o(.1,m.colors.primaryDark.value),o(.15,m.colors.primaryDark.value))},{theme:"success",appearance:"solid",css:u("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:u("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:u("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:(g="$primary",$="$primaryMid",y="$primaryDark",{border:"1px solid",borderColor:"currentColor",color:g,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:$},"&:not([disabled]):active":{color:y}})}]});var g,$,y;const f=({isLoading:e,children:r})=>i(s,null,i(d,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),i(c,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),b=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},v=(e,o)=>n.map(e,((e,a)=>(null==e?void 0:e.type)===l?t(e,{css:r({[0===a?"mr":"ml"]:"sm"===o?"$2":"$3",size:b(o)},e.props.css?e.props.css:{})}):e)),w=a(((r,o)=>{let{children:a,isLoading:n,onClick:t,href:s,appearance:c="solid",size:l="md",theme:d="primary",type:p="button"}=r,m=function(e,r){if(null==e)return{};var o,a,i={},n=Object.keys(e);for(a=0;a<n.length;a++)o=n[a],r.indexOf(o)>=0||(i[o]=e[o]);return i}(r,e);const u=s?{as:"a",href:s,onClick:void 0}:{};return i(h,Object.assign({isLoading:n||!1,onClick:n?void 0:t,appearance:c,size:l,theme:d,type:p},m,u,{ref:o}),"boolean"==typeof n?i(f,{isLoading:n},v(a,l)):v(a,l))}));w.displayName="Button";export{w as Button,h as StyledButton};
+const e=["children","isLoading","onClick","href","appearance","size","theme","type"];function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e}).apply(this,arguments)}import{darken as o}from"polished";import{forwardRef as a,createElement as i,Children as n,cloneElement as t,Fragment as s}from"react";import{Box as c}from"../box/Box.js";import{Icon as l}from"../icon/Icon.js";import{Loader as d}from"../loader/Loader.js";import{styled as p,theme as m}from"../../stitches.js";const u=(e,r,o,a="white")=>({bg:e,color:a,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:a},"&:not([disabled]):active":{bg:o}}),h=p("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4"},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5"},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5"}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{true:{width:"100%"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:u("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:u("$primaryDark",o(.1,m.colors.primaryDark.value),o(.15,m.colors.primaryDark.value))},{theme:"success",appearance:"solid",css:u("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:u("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:u("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:(g="$primary",$="$primaryMid",y="$primaryDark",{border:"1px solid",borderColor:"currentColor",color:g,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:$},"&:not([disabled]):active":{color:y}})}]});var g,$,y;const f=({isLoading:e,children:r})=>i(s,null,i(d,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),i(c,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),b=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},v=(e,o)=>n.map(e,((e,a)=>(null==e?void 0:e.type)===l?t(e,{css:r({[0===a?"mr":"ml"]:"sm"===o?"$2":"$3",size:b(o)},e.props.css?e.props.css:{})}):e)),w=a(((r,o)=>{let{children:a,isLoading:n,onClick:t,href:s,appearance:c="solid",size:l="md",theme:d="primary",type:p="button"}=r,m=function(e,r){if(null==e)return{};var o,a,i={},n=Object.keys(e);for(a=0;a<n.length;a++)o=n[a],r.indexOf(o)>=0||(i[o]=e[o]);return i}(r,e);const u=s?{as:"a",href:s,onClick:void 0}:{},g=s?{}:{type:p};return i(h,Object.assign({isLoading:n||!1,onClick:n?void 0:t,appearance:c,size:l,theme:d},m,u,g,{ref:o}),"boolean"==typeof n?i(f,{isLoading:n},v(a,l)):v(a,l))}));w.displayName="Button";export{w as Button,h as StyledButton};

package/dist/components/carousel/Carousel.js

@@ -1 +1 @@
-import{CarouselProvider as r}from"pure-react-carousel";import{createElement as i}from"react";import{CSSWrapper as o}from"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{CarouselArrowNext as e,CarouselArrowPrevious as s}from"./CarouselArrows.js";import{CarouselPagination as t}from"./CarouselPagination.js";import{CarouselSlide as l}from"./CarouselSlide.js";import{CarouselSlider as a}from"./CarouselSlider.js";const m=({children:e,css:s,slideHeight:t,slideWidth:l,numSlides:a})=>i(o,{css:s},i(r,{naturalSlideWidth:l,naturalSlideHeight:t,totalSlides:a},e));m.ArrowNext=e,m.ArrowPrevious=s,m.Pagination=t,m.Slide=l,m.Slider=a,m.displayName="Carousel";export{m as Carousel};
+import{CarouselProvider as r}from"pure-react-carousel";import{createElement as i}from"react";import{CSSWrapper as e}from"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import"../../utilities/style/keyframe-animations.js";import{CarouselArrowNext as o,CarouselArrowPrevious as s}from"./CarouselArrows.js";import{CarouselPagination as t}from"./CarouselPagination.js";import{CarouselSlide as l}from"./CarouselSlide.js";import{CarouselSlider as a}from"./CarouselSlider.js";const m=({children:o,css:s,slideHeight:t,slideWidth:l,numSlides:a})=>i(e,{css:s},i(r,{naturalSlideWidth:l,naturalSlideHeight:t,totalSlides:a},o));m.ArrowNext=o,m.ArrowPrevious=s,m.Pagination=t,m.Slide=l,m.Slider=a,m.displayName="Carousel";export{m as Carousel};

package/dist/components/carousel/CarouselPagination.d.ts

@@ -5,6 +5,7 @@ export declare const CarouselPagination: import("@stitches/react/types/styled-co
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, import("@stitches/react/types/css-util").CSS<{
     sm: string;
@@ -12,6 +13,7 @@ export declare const CarouselPagination: import("@stitches/react/types/styled-co
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -118,63 +120,147 @@ export declare const CarouselPagination: import("@stitches/react/types/styled-co
         "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/carousel/CarouselSlide.d.ts

@@ -5,6 +5,7 @@ declare const StyledSlide: 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;
@@ -12,6 +13,7 @@ declare const StyledSlide: import("@stitches/react/types/styled-component").Styl
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -118,64 +120,148 @@ declare const StyledSlide: 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";
+        };
     };
 }>>;
 declare type SlideProps = React.ComponentProps<typeof StyledSlide> & {

package/dist/components/carousel/CarouselSlider.d.ts

@@ -7,6 +7,7 @@ export declare const CarouselSlider: import("@stitches/react/types/styled-compon
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, import("@stitches/react/types/css-util").CSS<{
     sm: string;
@@ -14,6 +15,7 @@ export declare const CarouselSlider: import("@stitches/react/types/styled-compon
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -120,63 +122,147 @@ export declare const CarouselSlider: import("@stitches/react/types/styled-compon
         "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";
+        };
     };
 }>>;