@atom-learning/components 1.16.3 → 1.17.2-beta.0

package/dist/components/accordion/Accordion.d.ts

@@ -267,12 +267,13 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
         };
     };
 }>>;
-declare type AccordionProps = React.ComponentProps<typeof StyledRoot> & {
+declare type AccordionPropsType = React.ComponentProps<typeof StyledRoot> & {
     type: 'single' | 'multiple';
 };
-export declare const Accordion: React.FC<AccordionProps> & {
+declare type AccordionType = React.ForwardRefExoticComponent<AccordionPropsType> & {
     Item: typeof AccordionItem;
     Content: typeof AccordionContent;
     Trigger: typeof AccordionTrigger;
 };
+export declare const Accordion: AccordionType;
 export {};

package/dist/components/accordion/Accordion.js

@@ -1 +1 @@
-import{Root as i}from"@radix-ui/react-accordion";import m from"react";import{styled as c}from"../../stitches.js";import{AccordionContent as n}from"./AccordionContent.js";import{AccordionItem as d}from"./AccordionItem.js";import{AccordionTrigger as p}from"./AccordionTrigger.js";const f=c(i,{width:"100%"}),o=({type:r="single",children:t,...e})=>m.createElement(f,{type:r,...e},t);o.Item=d,o.Content=n,o.Trigger=p,o.displayName="Accordion";export{o as Accordion};
+import{Root as c}from"@radix-ui/react-accordion";import r from"react";import{styled as n}from"../../stitches.js";import{AccordionContent as d}from"./AccordionContent.js";import{AccordionItem as f}from"./AccordionItem.js";import{AccordionTrigger as p}from"./AccordionTrigger.js";const a=n(c,{width:"100%"}),o=r.forwardRef(({type:t="single",children:e,...i},m)=>r.createElement(a,{ref:m,type:t,...i},e));o.Item=f,o.Content=d,o.Trigger=p,o.displayName="Accordion";export{o as Accordion};

package/dist/components/button/Button.d.ts

@@ -7,7 +7,7 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
     appearance?: "outline" | "solid" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     isLoading?: boolean | "true" | undefined;
-    fullWidth?: boolean | "true" | undefined;
+    fullWidth?: boolean | "true" | "false" | undefined;
     isRounded?: boolean | "true" | undefined;
 }, {
     sm: string;

package/dist/components/button/Button.js

@@ -1 +1 @@
-import{darken as i,opacify as s}from"color2k";import{forwardRef as f,createElement as n,Children as w,cloneElement as k,Fragment as v}from"react";import{Box as D}from"../box/Box.js";import{Icon as S}from"../icon/Icon.js";import{Loader as x}from"../loader/Loader.js";import{styled as C,theme as c}from"../../stitches.js";const p=(e,r,o)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:r},"&:not([disabled]):active":{color:o}}),a=(e,r,o,t="white")=>({bg:e,color:t,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:t},"&:not([disabled]):active":{bg:o}}),d=C("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:{},neutral:{}},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:a("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:a("$primaryDark",i(c.colors.primaryDark.value,.1),i(c.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:a("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:a("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:a("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:a("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:p("$primaryDark",i(c.colors.primaryDark.value,.1),i(c.colors.primaryDark.value,.15))}]}),B=({isLoading:e,children:r})=>n(v,null,n(x,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),n(D,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),M=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},m=(e,r)=>w.map(e,(o,t)=>(o==null?void 0:o.type)===S?k(o,{css:{[t===0?"mr":"ml"]:r==="sm"?"$2":"$3",size:M(r),...o.props.css?o.props.css:{}}}):o),u=f(({children:e,isLoading:r,onClick:o,href:t,appearance:$="solid",size:l="md",theme:y="primary",type:h="button",...g},b)=>n(d,{isLoading:r||!1,onClick:r?void 0:o,appearance:$,size:l,theme:y,...g,...t?{as:"a",href:t,onClick:void 0}:{},...t?{}:{type:h},ref:b},typeof r=="boolean"?n(B,{isLoading:r},m(e,l)):m(e,l)));u.displayName="Button";export{u as Button,d as StyledButton};
+import{darken as i,opacify as s}from"color2k";import{forwardRef as f,createElement as n,Children as w,cloneElement as k,Fragment as v}from"react";import{Box as D}from"../box/Box.js";import{Icon as S}from"../icon/Icon.js";import{Loader as x}from"../loader/Loader.js";import{styled as C,theme as c}from"../../stitches.js";const p=(e,r,o)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:r},"&:not([disabled]):active":{color:o}}),a=(e,r,o,t="white")=>({bg:e,color:t,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:t},"&:not([disabled]):active":{bg:o}}),d=C("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:{},neutral:{}},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:{false:{width:"auto"},true:{width:"100%"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:a("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:a("$primaryDark",i(c.colors.primaryDark.value,.1),i(c.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:a("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:a("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:a("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:a("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:p("$primaryDark",i(c.colors.primaryDark.value,.1),i(c.colors.primaryDark.value,.15))}]}),B=({isLoading:e,children:r})=>n(v,null,n(x,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),n(D,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),M=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},m=(e,r)=>w.map(e,(o,t)=>(o==null?void 0:o.type)===S?k(o,{css:{[t===0?"mr":"ml"]:r==="sm"?"$2":"$3",size:M(r),...o.props.css?o.props.css:{}}}):o),u=f(({children:e,isLoading:r,onClick:o,href:t,appearance:$="solid",size:l="md",theme:y="primary",type:h="button",...g},b)=>n(d,{isLoading:r||!1,onClick:r?void 0:o,appearance:$,size:l,theme:y,...g,...t?{as:"a",href:t,onClick:void 0}:{},...t?{}:{type:h},ref:b},typeof r=="boolean"?n(B,{isLoading:r},m(e,l)):m(e,l)));u.displayName="Button";export{u as Button,d as StyledButton};

package/dist/components/dialog/Dialog.d.ts

@@ -2,6 +2,7 @@ import { Description, Title, Trigger } from '@radix-ui/react-dialog';
 import * as React from 'react';
 import { DialogClose } from './DialogClose';
 import { DialogContent } from './DialogContent';
+import { DialogBackground } from './DialogBackground';
 declare const StyledDialog: import("@stitches/react/types/styled-component").StyledComponent<React.FC<import("@radix-ui/react-dialog").DialogProps>, {}, {
     sm: string;
     md: string;
@@ -269,6 +270,7 @@ declare const StyledDialog: import("@stitches/react/types/styled-component").Sty
 }>>;
 declare type DialogProps = React.ComponentProps<typeof StyledDialog>;
 export declare const Dialog: React.FC<DialogProps> & {
+    Background: typeof DialogBackground;
     Close: typeof DialogClose;
     Content: typeof DialogContent;
     Description: typeof Description;

package/dist/components/dialog/Dialog.js

@@ -1 +1 @@
-import{Root as i,Description as e,Title as r,Trigger as l}from"@radix-ui/react-dialog";import{createElement as m}from"react";import{styled as g}from"../../stitches.js";import{DialogClose as n}from"./DialogClose.js";import{DialogContent as p}from"./DialogContent.js";const a=g(i,{}),o=t=>m(a,{...t});o.Close=n,o.Content=p,o.Description=e,o.Title=r,o.Trigger=l,o.displayName="Dialog";export{o as Dialog};
+import{Root as t,Description as i,Title as e,Trigger as l}from"@radix-ui/react-dialog";import{createElement as m}from"react";import{styled as g}from"../../stitches.js";import{DialogClose as a}from"./DialogClose.js";import{DialogContent as n}from"./DialogContent.js";import{DialogBackground as p}from"./DialogBackground.js";const s=g(t,{}),o=r=>m(s,{...r});o.Background=p,o.Close=a,o.Content=n,o.Description=i,o.Title=e,o.Trigger=l,o.displayName="Dialog";export{o as Dialog};

package/dist/components/dialog/DialogBackground.d.ts

@@ -0,0 +1,529 @@
+export declare const DialogBackground: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    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 | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$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 | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$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 | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>, {}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    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 | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$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 | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$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 | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;

package/dist/components/dialog/DialogBackground.js

@@ -0,0 +1 @@
+import{styled as o}from"../../stitches.js";import{Box as t}from"../box/Box.js";const r=o(t,{width:"100vw",height:"100vh"});export{r as DialogBackground};

package/dist/components/dialog/DialogContent.js

@@ -1 +1 @@
-import{Close as u}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as h,Close as g}from"@radix-ui/react-dialog";import{createElement as o}from"react";import{DIALOG_Z_INDEX as n}from"../../constants/dialog.js";import{keyframes as i,styled as r}from"../../stitches.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as v}from"../icon/Icon.js";import{fadeIn as $,fadeOut as I}from"../../utilities/style/keyframe-animations.js";const t="translate3d(-50%, -50%, 0)",s="translate3d(-50%, 50vh, 0)",l="modal_overlay",O=i({"0%":{transform:s},"100%":{transform:t}}),y=i({"0%":{transform:t},"100%":{transform:s}}),C=r(x,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:n,"@allowMotion":{'&[data-state="open"]':{animation:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${I} 550ms ease-out`}}}),D=r(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:t,zIndex:n,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${O} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${y} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),z=({size:m="sm",children:d,closeDialogText:c="Close dialog",showCloseButton:f=!0,...p})=>o(h,null,o(C,{id:l},o(D,{size:m,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==l&&e.preventDefault()},...p},f&&o(w,{as:g,css:{position:"absolute",right:"$4",top:"$4"},label:c,size:"lg",theme:"neutral"},o(v,{is:u})),d)));export{z as DialogContent};
+import{Close as g}from"@atom-learning/icons";import{Overlay as b,Content as w,Portal as h,Close as v}from"@radix-ui/react-dialog";import{createElement as t,Children as i}from"react";import{DIALOG_Z_INDEX as r}from"../../constants/dialog.js";import{keyframes as s,styled as l}from"../../stitches.js";import{ActionIcon as $}from"../action-icon/ActionIcon.js";import{Icon as y}from"../icon/Icon.js";import{DialogBackground as m}from"./DialogBackground.js";import{fadeIn as C,fadeOut as D}from"../../utilities/style/keyframe-animations.js";const e="translate3d(-50%, -50%, 0)",d="translate3d(-50%, 50vh, 0)",p="modal_overlay",I=s({"0%":{transform:d},"100%":{transform:e}}),O=s({"0%":{transform:e},"100%":{transform:d}}),z=l(b,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${C} 250ms ease-out`},'&[data-state="closed"]':{animation:`${D} 550ms ease-out`}}}),S=l(w,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:e,zIndex:r,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${I} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${O} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),k=({size:f="sm",children:a,closeDialogText:c="Close dialog",showCloseButton:u=!0,...x})=>t(h,null,t(z,{id:p},i.map(a,o=>o.type===m&&o),t(S,{size:f,"aria-label":"Dialog",onPointerDownOutside:o=>{const n=o.target;(n==null?void 0:n.id)!==p&&o.preventDefault()},...x},u&&t($,{as:v,css:{position:"absolute",right:"$4",top:"$4"},label:c,size:"lg",theme:"neutral"},t(y,{is:g})),i.map(a,o=>o.type!==m&&o))));export{k as DialogContent};

package/dist/components/divider/Divider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const StyledDivider: import("@stitches/react/types/styled-component").StyledComponent<"hr", {
+export declare const StyledDivider: import("@stitches/react/types/styled-component").StyledComponent<"hr", {
     orientation?: "horizontal" | "vertical" | undefined;
 }, {
     sm: string;
@@ -267,4 +267,3 @@ declare const StyledDivider: import("@stitches/react/types/styled-component").St
     };
 }>>;
 export declare const Divider: React.FC<React.ComponentProps<typeof StyledDivider>>;
-export {};

package/dist/components/divider/Divider.js

@@ -1 +1 @@
-import r from"react";import{styled as e}from"../../stitches.js";const o=e("hr",{border:0,bg:"$tonal200",variants:{orientation:{horizontal:{height:1,width:"100%"},vertical:{height:"100%",width:1,minHeight:"$3"}}}}),n=({orientation:t="horizontal",...i})=>r.createElement(o,{orientation:t,...i});export{n as Divider};
+import t from"react";import{styled as n}from"../../stitches.js";const r=n("hr",{border:0,bg:"$tonal200",variants:{orientation:{horizontal:{height:1,width:"100%"},vertical:{height:"100%",width:1,minHeight:"$3"}}}}),a=t.forwardRef(({orientation:e="horizontal",...i},o)=>t.createElement(r,{ref:o,orientation:e,...i}));export{a as Divider,r as StyledDivider};

package/dist/components/heading/Heading.d.ts

@@ -267,7 +267,7 @@ export declare const StyledHeading: import("@stitches/react/types/styled-compone
         };
     };
 }>>;
-export declare type HeadingProps = Override<React.ComponentPropsWithoutRef<typeof StyledHeading>, {
+export declare type HeadingProps = Override<React.ComponentPropsWithRef<typeof StyledHeading>, {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | React.ComponentType | React.ElementType;
 }>;
 export declare const Heading: React.FC<HeadingProps>;

package/dist/components/heading/Heading.js

@@ -1 +1 @@
-import{createElement as o}from"react";import{styled as m}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const i=m("h2",{color:"$tonal600",fontFamily:"$display",fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontWeight:600,fontSize:"$md",lineHeight:1.5,...e(.3864)},sm:{fontSize:"$lg",lineHeight:1.14,...e(.2174,.2254)},md:{fontSize:"$xl",lineHeight:1.14,...e(.2174,.2254)},lg:{fontSize:"$2xl",lineHeight:1.08,...e(.1865,.1945)},xl:{fontSize:"$3xl",lineHeight:1.12,...e(.206,.214)},xxl:{fontSize:"$4xl",lineHeight:1.06,...e(.1793,.1873)}}}}),t=({size:n="md",...l})=>o(i,{size:n,...l});t.displayName="Heading";export{t as Heading,i as StyledHeading};
+import{forwardRef as f,createElement as m}from"react";import{styled as a}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const i=a("h2",{color:"$tonal600",fontFamily:"$display",fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontWeight:600,fontSize:"$md",lineHeight:1.5,...e(.3864)},sm:{fontSize:"$lg",lineHeight:1.14,...e(.2174,.2254)},md:{fontSize:"$xl",lineHeight:1.14,...e(.2174,.2254)},lg:{fontSize:"$2xl",lineHeight:1.08,...e(.1865,.1945)},xl:{fontSize:"$3xl",lineHeight:1.12,...e(.206,.214)},xxl:{fontSize:"$4xl",lineHeight:1.06,...e(.1793,.1873)}}}}),t=f(({size:n="md",...o},l)=>m(i,{ref:l,size:n,...o}));t.displayName="Heading";export{t as Heading,i as StyledHeading};

package/dist/components/image/Image.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Override } from '../../utilities/types';
-declare const StyledImage: import("@stitches/react/types/styled-component").StyledComponent<"img", {}, {
+export declare const StyledImage: import("@stitches/react/types/styled-component").StyledComponent<"img", {}, {
     sm: string;
     md: string;
     lg: string;

package/dist/components/image/Image.js

@@ -1 +1 @@
-import{styled as i}from"../../stitches.js";const e=i("img",{verticalAlign:"middle",maxWidth:"100%","&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}}),t=e;t.displayName="Image";export{t as Image};
+import{styled as e}from"../../stitches.js";const t=e("img",{verticalAlign:"middle",maxWidth:"100%","&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}}),i=t;i.displayName="Image";export{i as Image,t as StyledImage};