@atom-learning/components 2.33.0 → 2.35.0

package/dist/components/dropdown-menu/DropdownMenuItem.d.ts

@@ -55,6 +55,42 @@ export declare const DropdownMenuItem: import("@stitches/react/types/styled-comp
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -112,6 +148,7 @@ export declare const DropdownMenuItem: import("@stitches/react/types/styled-comp
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/dropdown-menu/DropdownMenuItem.js

@@ -1 +1,2 @@
 import{Item as e}from"@radix-ui/react-dropdown-menu";import{styled as t}from"../../stitches.js";const o={alignItems:"center",color:"$tonal600",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:400,position:"relative",px:"$3",py:"$2","&[data-disabled]":{color:"$tonal200",pointerEvents:"none"},'&[aria-current="page"], &:focus':{"&::before":{borderLeft:"2px solid currentColor",content:"",height:"$2",left:0,outline:"none",position:"absolute",transform:"scale(1)"}},"&:focus":{color:"$primaryMid",outline:"none"},"&:hover":{textDecoration:"underline"}},r=t(e,o);export{r as DropdownMenuItem,o as itemStyles};
+//# sourceMappingURL=DropdownMenuItem.js.map

package/dist/components/dropdown-menu/DropdownMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuItem.js","sources":["../../../src/components/dropdown-menu/DropdownMenuItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\n\nexport const itemStyles = {\n  alignItems: 'center',\n  color: '$tonal600',\n  cursor: 'pointer',\n  display: 'flex',\n  fontFamily: '$body',\n  fontWeight: 400,\n  position: 'relative',\n  px: '$3',\n  py: '$2',\n  '&[data-disabled]': {\n    color: '$tonal200',\n    pointerEvents: 'none'\n  },\n  '&[aria-current=\"page\"], &:focus': {\n    '&::before': {\n      borderLeft: '2px solid currentColor',\n      content: '',\n      height: '$2',\n      left: 0,\n      outline: 'none',\n      position: 'absolute',\n      transform: 'scale(1)'\n    }\n  },\n  '&:focus': {\n    color: '$primaryMid',\n    outline: 'none'\n  },\n  '&:hover': { textDecoration: 'underline' }\n}\n\nexport const DropdownMenuItem = styled(Item, itemStyles)\n"],"names":["itemStyles","DropdownMenuItem","styled","Item"],"mappings":"gGAIa,MAAAA,EAAa,CACxB,WAAY,SACZ,MAAO,YACP,OAAQ,UACR,QAAS,OACT,WAAY,QACZ,WAAY,IACZ,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,mBAAoB,CAClB,MAAO,YACP,cAAe,MACjB,EACA,kCAAmC,CACjC,YAAa,CACX,WAAY,yBACZ,QAAS,GACT,OAAQ,KACR,KAAM,EACN,QAAS,OACT,SAAU,WACV,UAAW,UACb,CACF,EACA,UAAW,CACT,MAAO,cACP,QAAS,MACX,EACA,UAAW,CAAE,eAAgB,WAAY,CAC3C,EAEaC,EAAmBC,EAAOC,EAAMH,CAAU"}

package/dist/components/dropdown-menu/DropdownMenuLinkItem.js

@@ -1 +1,2 @@
 import e from"react";import{styled as n}from"../../stitches.js";import{DropdownMenuItem as m}from"./DropdownMenuItem.js";const i=n("a",{textDecoration:"none"}),l=({children:t,href:o,...r})=>e.createElement(m,{...r,asChild:!0},e.createElement(i,{href:o,role:"menuitem"},t));export{l as DropdownMenuLinkItem};
+//# sourceMappingURL=DropdownMenuLinkItem.js.map

package/dist/components/dropdown-menu/DropdownMenuLinkItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuLinkItem.js","sources":["../../../src/components/dropdown-menu/DropdownMenuLinkItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { DropdownMenuItem } from './DropdownMenuItem'\n\nconst StyledLink = styled('a', {\n  textDecoration: 'none'\n})\n\nexport const DropdownMenuLinkItem: React.FC<\n  React.ComponentProps<typeof DropdownMenuItem> & { href: string }\n> = ({ children, href, ...props }) => (\n  <DropdownMenuItem {...props} asChild>\n    <StyledLink href={href} role=\"menuitem\">\n      {children}\n    </StyledLink>\n  </DropdownMenuItem>\n)\n"],"names":["StyledLink","styled","DropdownMenuLinkItem","children","href","props","React","DropdownMenuItem"],"mappings":"yHAMA,MAAMA,EAAaC,EAAO,IAAK,CAC7B,eAAgB,MAClB,CAAC,EAEYC,EAET,CAAC,CAAE,SAAAC,EAAU,KAAAC,KAASC,CAAM,IAC9BC,EAAA,cAACC,EAAA,CAAkB,GAAGF,EAAO,QAAO,EAClCC,EAAAA,EAAA,cAACN,EAAA,CAAW,KAAMI,EAAM,KAAK,UAC1BD,EAAAA,CACH,CACF"}

package/dist/components/dropdown-menu/DropdownMenuSeparator.d.ts

@@ -22,6 +22,42 @@ export declare const DropdownMenuSeparator: import("@stitches/react/types/styled
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -79,6 +115,7 @@ export declare const DropdownMenuSeparator: import("@stitches/react/types/styled
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/dropdown-menu/DropdownMenuSeparator.js

@@ -1 +1,2 @@
 import{Separator as o}from"@radix-ui/react-dropdown-menu";import{styled as r}from"../../stitches.js";const t=r(o,{height:"1px",backgroundColor:"$tonal200",my:"$2"});export{t as DropdownMenuSeparator};
+//# sourceMappingURL=DropdownMenuSeparator.js.map

package/dist/components/dropdown-menu/DropdownMenuSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuSeparator.js","sources":["../../../src/components/dropdown-menu/DropdownMenuSeparator.tsx"],"sourcesContent":["import { Separator } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\n\nexport const DropdownMenuSeparator = styled(Separator, {\n  height: '1px',\n  backgroundColor: '$tonal200',\n  my: '$2'\n})\n"],"names":["DropdownMenuSeparator","styled","Separator"],"mappings":"qGAIa,MAAAA,EAAwBC,EAAOC,EAAW,CACrD,OAAQ,MACR,gBAAiB,YACjB,GAAI,IACN,CAAC"}

package/dist/components/dropdown-menu/DropdownMenuTrigger.d.ts

@@ -22,6 +22,42 @@ export declare const DropdownMenuTrigger: import("@stitches/react/types/styled-c
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -79,6 +115,7 @@ export declare const DropdownMenuTrigger: import("@stitches/react/types/styled-c
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/dropdown-menu/DropdownMenuTrigger.js

@@ -1 +1,2 @@
 import{Trigger as r}from"@radix-ui/react-dropdown-menu";import{styled as o}from"../../stitches.js";const e=o(r,{});export{e as DropdownMenuTrigger};
+//# sourceMappingURL=DropdownMenuTrigger.js.map

package/dist/components/dropdown-menu/DropdownMenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuTrigger.js","sources":["../../../src/components/dropdown-menu/DropdownMenuTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\n\nexport const DropdownMenuTrigger = styled(Trigger, {})\n"],"names":["DropdownMenuTrigger","styled","Trigger"],"mappings":"mGAIO,MAAMA,EAAsBC,EAAOC,EAAS,CAAE,CAAA"}

package/dist/components/empty-state/EmptyState.d.ts

@@ -25,6 +25,42 @@ declare const EmptyStateContainer: import("@stitches/react/types/styled-componen
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -82,6 +118,7 @@ declare const EmptyStateContainer: import("@stitches/react/types/styled-componen
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -202,6 +239,42 @@ declare const EmptyStateContainer: import("@stitches/react/types/styled-componen
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -259,6 +332,7 @@ declare const EmptyStateContainer: import("@stitches/react/types/styled-componen
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/empty-state/EmptyState.js

@@ -1 +1,2 @@
 import*as m from"react";import{Flex as a}from"../flex/Flex.js";import{styled as n}from"../../stitches.js";import{EmptyStateBody as p}from"./EmptyStateBody.js";import{EmptyStateImage as o}from"./EmptyStateImage.js";import{EmptyStateTitle as r}from"./EmptyStateTitle.js";const y=n(a,{flexDirection:"column",alignItems:"center",textAlign:"center","& > *:last-child":{mb:0},variants:{size:{xs:{p:"$2"},sm:{p:"$3"},md:{p:"$4"},lg:{p:"$5"},xl:{p:"$6"}}}}),t=({size:i="sm",children:l,...s})=>m.createElement(y,{size:i,...s},m.Children.map(l,e=>m.isValidElement(e)&&(e.type===o||e.type===r||e.type===p)?m.cloneElement(e,{...e.props,size:i}):e));t.displayName="EmptyState",t.Image=o,t.Title=r,t.Body=p;export{t as EmptyState};
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/empty-state/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\n\nimport { EmptyStateBody } from './EmptyStateBody'\nimport { EmptyStateImage } from './EmptyStateImage'\nimport { EmptyStateTitle } from './EmptyStateTitle'\n\nconst EmptyStateContainer = styled(Flex, {\n  flexDirection: 'column',\n  alignItems: 'center',\n  textAlign: 'center',\n  '& > *:last-child': {\n    mb: 0\n  },\n  variants: {\n    size: {\n      xs: {\n        p: '$2'\n      },\n      sm: {\n        p: '$3'\n      },\n      md: {\n        p: '$4'\n      },\n      lg: {\n        p: '$5'\n      },\n      xl: {\n        p: '$6'\n      }\n    }\n  }\n})\n\ntype EmptyStateProps = React.ComponentProps<typeof EmptyStateContainer>\n\nexport const EmptyState: React.FC<EmptyStateProps> & {\n  Image: typeof EmptyStateImage\n  Title: typeof EmptyStateTitle\n  Body: typeof EmptyStateBody\n} = ({ size = 'sm', children, ...props }) => (\n  <EmptyStateContainer size={size} {...props}>\n    {React.Children.map(children, (child) => {\n      if (!React.isValidElement(child)) return child\n\n      if (\n        child.type === EmptyStateImage ||\n        child.type === EmptyStateTitle ||\n        child.type === EmptyStateBody\n      ) {\n        return React.cloneElement(child, { ...child.props, size })\n      }\n\n      return child\n    })}\n  </EmptyStateContainer>\n)\n\nEmptyState.displayName = 'EmptyState'\nEmptyState.Image = EmptyStateImage\nEmptyState.Title = EmptyStateTitle\nEmptyState.Body = EmptyStateBody\n"],"names":["EmptyStateContainer","styled","Flex","EmptyState","size","children","props","React","child","EmptyStateImage","EmptyStateTitle","EmptyStateBody"],"mappings":"6QASA,MAAMA,EAAsBC,EAAOC,EAAM,CACvC,cAAe,SACf,WAAY,SACZ,UAAW,SACX,mBAAoB,CAClB,GAAI,CACN,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,CACF,CACF,CACF,CAAC,EAIYC,EAIT,CAAC,CAAE,KAAAC,EAAO,KAAM,SAAAC,KAAaC,CAAM,IACrCC,EAAA,cAACP,EAAA,CAAoB,KAAMI,EAAO,GAAGE,CAClCC,EAAAA,EAAM,SAAS,IAAIF,EAAWG,GACxBD,EAAM,eAAeC,CAAK,IAG7BA,EAAM,OAASC,GACfD,EAAM,OAASE,GACfF,EAAM,OAASG,GAERJ,EAAM,aAAaC,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAJ,CAAK,CAAC,EAPlBI,CAW1C,CACH,EAGFL,EAAW,YAAc,aACzBA,EAAW,MAAQM,EACnBN,EAAW,MAAQO,EACnBP,EAAW,KAAOQ"}

package/dist/components/empty-state/EmptyStateBody.d.ts

@@ -28,6 +28,42 @@ export declare const EmptyStateBody: import("@stitches/react/types/styled-compon
             textPlaceholder: any;
             background: any;
             backgroundAccent: any;
+            grey100: any;
+            grey200: any;
+            grey300: any;
+            grey400: any;
+            grey500: any;
+            grey600: any;
+            grey700: any;
+            grey800: any;
+            grey900: any;
+            grey1000: any;
+            grey1100: any;
+            grey1200: any;
+            blue100: any;
+            blue200: any;
+            blue300: any;
+            blue400: any;
+            blue500: any;
+            blue600: any;
+            blue700: any;
+            blue800: any;
+            blue900: any;
+            blue1000: any;
+            blue1100: any;
+            blue1200: any;
+            purple100: any;
+            purple200: any;
+            purple300: any;
+            purple400: any;
+            purple500: any;
+            purple600: any;
+            purple700: any;
+            purple800: any;
+            purple900: any;
+            purple1000: any;
+            purple1100: any;
+            purple1200: any;
             tonal50: any;
             tonal100: any;
             tonal200: any;
@@ -85,6 +121,7 @@ export declare const EmptyStateBody: import("@stitches/react/types/styled-compon
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -208,6 +245,42 @@ export declare const EmptyStateBody: import("@stitches/react/types/styled-compon
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -265,6 +338,7 @@ export declare const EmptyStateBody: import("@stitches/react/types/styled-compon
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/empty-state/EmptyStateBody.js

@@ -1 +1,2 @@
 import{Text as t}from"../text/Text.js";import{styled as m}from"../../stitches.js";const o=m(t,{color:"$tonal400",fontWeight:"400",variants:{size:{xs:{fontSize:"$sm",mb:"$4"},sm:{fontSize:"$sm",mb:"$4"},md:{fontSize:"$sm",mb:"$4"},lg:{fontSize:"$md",mb:"calc($4 + $2)"},xl:{fontSize:"$md",mb:"calc($4 + $2)"}}}});export{o as EmptyStateBody};
+//# sourceMappingURL=EmptyStateBody.js.map

package/dist/components/empty-state/EmptyStateBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateBody.js","sources":["../../../src/components/empty-state/EmptyStateBody.tsx"],"sourcesContent":["import { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nexport const EmptyStateBody = styled(Text, {\n  color: '$tonal400',\n  fontWeight: '400',\n  variants: {\n    size: {\n      xs: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      sm: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      md: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      lg: {\n        fontSize: '$md',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        fontSize: '$md',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n"],"names":["EmptyStateBody","styled","Text"],"mappings":"kFAGa,MAAAA,EAAiBC,EAAOC,EAAM,CACzC,MAAO,YACP,WAAY,MACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,eACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,eACN,CACF,CACF,CACF,CAAC"}

package/dist/components/empty-state/EmptyStateImage.d.ts

@@ -28,6 +28,42 @@ declare const StyledEmptyStateImage: import("@stitches/react/types/styled-compon
             textPlaceholder: any;
             background: any;
             backgroundAccent: any;
+            grey100: any;
+            grey200: any;
+            grey300: any;
+            grey400: any;
+            grey500: any;
+            grey600: any;
+            grey700: any;
+            grey800: any;
+            grey900: any;
+            grey1000: any;
+            grey1100: any;
+            grey1200: any;
+            blue100: any;
+            blue200: any;
+            blue300: any;
+            blue400: any;
+            blue500: any;
+            blue600: any;
+            blue700: any;
+            blue800: any;
+            blue900: any;
+            blue1000: any;
+            blue1100: any;
+            blue1200: any;
+            purple100: any;
+            purple200: any;
+            purple300: any;
+            purple400: any;
+            purple500: any;
+            purple600: any;
+            purple700: any;
+            purple800: any;
+            purple900: any;
+            purple1000: any;
+            purple1100: any;
+            purple1200: any;
             tonal50: any;
             tonal100: any;
             tonal200: any;
@@ -85,6 +121,7 @@ declare const StyledEmptyStateImage: import("@stitches/react/types/styled-compon
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -208,6 +245,42 @@ declare const StyledEmptyStateImage: import("@stitches/react/types/styled-compon
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -265,6 +338,7 @@ declare const StyledEmptyStateImage: import("@stitches/react/types/styled-compon
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/empty-state/EmptyStateImage.js

@@ -1 +1,2 @@
 import t from"react";import{Image as x}from"../image/Image.js";import{styled as a}from"../../stitches.js";const e=a(x,{variants:{size:{xs:{maxWidth:"56px",maxHeight:"32px",mb:"$4"},sm:{maxWidth:"84px",maxHeight:"48px",mb:"$4"},md:{maxWidth:"126px",maxHeight:"72px",mb:"$4"},lg:{maxWidth:"190px",maxHeight:"142px",mb:"calc($4 + $2)"},xl:{maxWidth:"285px",maxHeight:"213px",mb:"calc($4 + $2)"}}}}),p=m=>t.createElement(e,{...m});export{p as EmptyStateImage};
+//# sourceMappingURL=EmptyStateImage.js.map

package/dist/components/empty-state/EmptyStateImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateImage.js","sources":["../../../src/components/empty-state/EmptyStateImage.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Image } from '~/components/image'\nimport { styled } from '~/stitches'\n\nconst StyledEmptyStateImage = styled(Image, {\n  variants: {\n    size: {\n      xs: {\n        maxWidth: '56px',\n        maxHeight: '32px',\n        mb: '$4'\n      },\n      sm: {\n        maxWidth: '84px',\n        maxHeight: '48px',\n        mb: '$4'\n      },\n      md: {\n        maxWidth: '126px',\n        maxHeight: '72px',\n        mb: '$4'\n      },\n      lg: {\n        maxWidth: '190px',\n        maxHeight: '142px',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        maxWidth: '285px',\n        maxHeight: '213px',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage> &\n  React.ComponentProps<typeof Image>\n\nexport const EmptyStateImage: React.FC<EmptyStateImageProps> = (props) => (\n  <StyledEmptyStateImage {...props} />\n)\n"],"names":["StyledEmptyStateImage","styled","Image","EmptyStateImage","props","React"],"mappings":"0GAKA,MAAMA,EAAwBC,EAAOC,EAAO,CAC1C,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,CACF,CACF,CACF,CAAC,EAKYC,EAAmDC,GAC9DC,EAAA,cAACL,EAAA,CAAuB,GAAGI,CAAO,CAAA"}

package/dist/components/empty-state/EmptyStateTitle.d.ts

@@ -23,6 +23,42 @@ export declare const EmptyStateTitle: import("@stitches/react/types/styled-compo
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -80,6 +116,7 @@ export declare const EmptyStateTitle: import("@stitches/react/types/styled-compo
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/empty-state/EmptyStateTitle.js

@@ -1 +1,2 @@
 import{styled as t}from"../../stitches.js";const m=t("h2",{color:"$tonal400",fontFamily:"$body",fontWeight:"600",m:0,variants:{size:{xs:{fontSize:"$md",mb:"$3"},sm:{fontSize:"$md",mb:"$3"},md:{fontSize:"$md",mb:"$3"},lg:{fontSize:"$lg",mb:"$4"},xl:{fontSize:"$lg",mb:"$4"}}}});export{m as EmptyStateTitle};
+//# sourceMappingURL=EmptyStateTitle.js.map

package/dist/components/empty-state/EmptyStateTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateTitle.js","sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const EmptyStateTitle = styled('h2', {\n  color: '$tonal400',\n  fontFamily: '$body',\n  fontWeight: '600',\n  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      sm: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      md: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      lg: {\n        fontSize: '$lg',\n        mb: '$4'\n      },\n      xl: {\n        fontSize: '$lg',\n        mb: '$4'\n      }\n    }\n  }\n})\n"],"names":["EmptyStateTitle","styled"],"mappings":"2CAEa,MAAAA,EAAkBC,EAAO,KAAM,CAC1C,MAAO,YACP,WAAY,QACZ,WAAY,MACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,CACF,CACF,CACF,CAAC"}

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

@@ -1 +1,2 @@
 import*as e from"react";import{Text as r}from"../text/Text.js";const s=({children:t,css:o})=>e.createElement(r,{size:"sm",css:{color:"$tonal300",maxWidth:"80ch",...o}},t);export{s as Description};
+//# sourceMappingURL=FieldDescription.js.map

package/dist/components/field-wrapper/FieldDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDescription.js","sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport type { CSS } from '~/stitches'\n\ntype DescriptionProps = {\n  css?: CSS\n}\n\nexport const Description: React.FC<DescriptionProps> = ({ children, css }) => (\n  <Text size=\"sm\" css={{ color: '$tonal300', maxWidth: '80ch', ...css }}>\n    {children}\n  </Text>\n)\n"],"names":["Description","children","css","React","Text"],"mappings":"+DASa,MAAAA,EAA0C,CAAC,CAAE,SAAAC,EAAU,IAAAC,CAAI,IACtEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,MAAO,YAAa,SAAU,OAAQ,GAAGF,CAAI,GACjED,CACH"}

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

@@ -1 +1,2 @@
 import*as f from"@radix-ui/react-visually-hidden";import*as e from"react";import{Box as d}from"../box/Box.js";import{Flex as b}from"../flex/Flex.js";import{InlineMessage as E}from"../inline-message/InlineMessage.js";import{Label as h}from"../label/Label.js";import{Link as u}from"../link/Link.js";import{Description as F}from"./FieldDescription.js";const o=({css:i,children:s,error:t,fieldId:l,label:n,prompt:r,description:m,required:a,hideLabel:p})=>{const c=p?f.Root:b;return e.createElement(d,{css:i},e.createElement(c,{css:{justifyContent:"space-between",alignItems:"center",mb:"$3"}},e.createElement(h,{htmlFor:l,required:a},n),r&&e.createElement(u,{href:r.link,size:"sm"},r.label)),m&&e.createElement(F,{css:{mb:"$3"}},m),s,t&&e.createElement(E,{css:{mt:"$2"}},t))};o.displayName="FieldWrapper";export{o as FieldWrapper};
+//# sourceMappingURL=FieldWrapper.js.map

package/dist/components/field-wrapper/FieldWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldWrapper.js","sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { ValidationOptions } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { Link } from '~/components/link'\nimport type { CSS } from '~/stitches'\n\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  css?: CSS\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link: string; label: string }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({\n  css,\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel\n}) => {\n  const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n  return (\n    <Box css={css}>\n      <LabelContainer\n        css={{\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mb: '$3'\n        }}\n      >\n        <Label htmlFor={fieldId} required={required}>\n          {label}\n        </Label>\n        {prompt && (\n          <Link href={prompt.link} size=\"sm\">\n            {prompt.label}\n          </Link>\n        )}\n      </LabelContainer>\n      {description && (\n        <Description css={{ mb: '$3' }}>{description}</Description>\n      )}\n      {children}\n      {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n    </Box>\n  )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","css","children","error","fieldId","label","prompt","description","required","hideLabel","LabelContainer","VisuallyHidden","Flex","React","Box","Label","Link","Description","InlineMessage"],"mappings":"6VA6Ba,MAAAA,EAA4C,CAAC,CACxD,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAAM,CACJ,MAAMC,EAAiBD,EAAYE,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAACC,EAAA,CAAI,IAAKb,CACRY,EAAAA,EAAA,cAACH,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,WAAY,SACZ,GAAI,IACN,CAAA,EAEAG,EAAA,cAACE,EAAA,CAAM,QAASX,EAAS,SAAUI,CAChCH,EAAAA,CACH,EACCC,GACCO,EAAA,cAACG,EAAA,CAAK,KAAMV,EAAO,KAAM,KAAK,IAAA,EAC3BA,EAAO,KACV,CAEJ,EACCC,GACCM,EAAA,cAACI,EAAA,CAAY,IAAK,CAAE,GAAI,IAAK,CAAA,EAAIV,CAAY,EAE9CL,EACAC,GAASU,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,CAAA,EAAIf,CAAM,CACrD,CAEJ,EAEAH,EAAa,YAAc"}

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

@@ -1 +1,2 @@
 import*as e from"react";import{Box as o}from"../box/Box.js";import{Checkbox as d}from"../checkbox/Checkbox.js";import{InlineMessage as f}from"../inline-message/InlineMessage.js";import{Label as $}from"../label/Label.js";import{RadioButton as u}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import{Description as E}from"./FieldDescription.js";const l=({align:n="start",children:a,css:s,description:i,direction:t="row",error:m,label:p,required:c})=>e.createElement(o,{css:s},e.createElement($,{align:n,direction:t,required:c,type:"inline"},e.Children.map(a,r=>e.createElement(o,{css:{[t==="reverse"?"ml":"mr"]:"$3",...((r==null?void 0:r.type)===d||(r==null?void 0:r.type)===u)&&{transform:"translateY($space$1)"}}},r)),p),m&&e.createElement(f,{css:{mt:"$2"}},m),i&&e.createElement(E,{css:{mt:"$2",[t==="reverse"?"mr":"ml"]:"calc($space$3 + $sizes$1)"}},i));l.displayName="InlineFieldWrapper";export{l as InlineFieldWrapper};
+//# sourceMappingURL=InlineFieldWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineFieldWrapper.js","sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Checkbox } from '~/components/checkbox'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButton } from '~/components/radio-button'\nimport type { CSS } from '~/stitches'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  css?: CSS\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper: React.FC<InlineFieldWrapperProps> = ({\n  align = 'start',\n  children,\n  css,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}) => (\n  <Box css={css}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <Box\n          css={{\n            [direction === 'reverse' ? 'ml' : 'mr']: '$3',\n            // provide offset for specific child components\n            ...((child?.type === Checkbox || child?.type === RadioButton) && {\n              transform: 'translateY($space$1)'\n            })\n          }}\n        >\n          {child}\n        </Box>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n    {description && (\n      <Description\n        css={{\n          mt: '$2',\n          // calc required to get correct offset value\n          [direction === 'reverse' ? 'mr' : 'ml']: 'calc($space$3 + $sizes$1)'\n        }}\n      >\n        {description}\n      </Description>\n    )}\n  </Box>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"names":["InlineFieldWrapper","align","children","css","description","direction","error","label","required","React","Box","Label","child","Checkbox","RadioButton","InlineMessage","Description"],"mappings":"yXAqBa,MAAAA,EAAwD,CAAC,CACpE,MAAAC,EAAQ,QACR,SAAAC,EACA,IAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CAAI,IAAKP,CACRM,EAAAA,EAAA,cAACE,EAAA,CACC,MAAOV,EACP,UAAWI,EACX,SAAUG,EACV,KAAK,QAEJC,EAAAA,EAAM,SAAS,IAAIP,EAAWU,GAC7BH,EAAA,cAACC,EAAA,CACC,IAAK,CACH,CAACL,IAAc,UAAY,KAAO,MAAO,KAEzC,KAAKO,GAAA,KAAA,OAAAA,EAAO,QAASC,IAAYD,GAAA,YAAAA,EAAO,QAASE,IAAgB,CAC/D,UAAW,sBACb,CACF,CAAA,EAECF,CACH,CACD,EACAL,CACH,EACCD,GAASG,EAAA,cAACM,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,CAAIT,EAAAA,CAAM,EAClDF,GACCK,EAAA,cAACO,EAAA,CACC,IAAK,CACH,GAAI,KAEJ,CAACX,IAAc,UAAY,KAAO,MAAO,2BAC3C,CAECD,EAAAA,CACH,CAEJ,EAGFJ,EAAmB,YAAc"}

package/dist/components/file-input/FileInput.js

@@ -1 +1,2 @@
 import{Upload as c}from"@atom-learning/icons";import*as e from"react";import{Button as s}from"../button/Button.js";import{Icon as u}from"../icon/Icon.js";const t=({accept:l,children:i,multiple:n=!1,onFileSelect:o,...r})=>{const p=a=>{const{files:m}=a.target;o(m)};return e.createElement(s,{as:"label",...r},e.createElement(u,{is:c}),i,e.createElement("input",{type:"file",onChange:p,accept:l,multiple:n,hidden:!0}))};t.displayName="FileInput";export{t as FileInput};
+//# sourceMappingURL=FileInput.js.map

package/dist/components/file-input/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\n\nexport type FileInputProps = React.ComponentProps<typeof Button> & {\n  onFileSelect: (selection: FileList | null) => void\n  accept?: string\n  multiple?: boolean\n}\n\nexport const FileInput: React.FC<FileInputProps> = ({\n  accept,\n  children,\n  multiple = false,\n  onFileSelect,\n  ...rest\n}) => {\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { files } = event.target\n\n    onFileSelect(files)\n  }\n\n  return (\n    <Button as=\"label\" {...rest}>\n      <Icon is={Upload} />\n      {children}\n      <input\n        type=\"file\"\n        onChange={handleFileSelect}\n        accept={accept}\n        multiple={multiple}\n        hidden\n      />\n    </Button>\n  )\n}\n\nFileInput.displayName = 'FileInput'\n"],"names":["FileInput","accept","children","multiple","onFileSelect","rest","handleFileSelect","event","files","React","Button","Icon","Upload"],"mappings":"0JAYO,MAAMA,EAAsC,CAAC,CAClD,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,KACGC,CACL,IAAM,CACJ,MAAMC,EAAoBC,GAA+C,CACvE,KAAM,CAAE,MAAAC,CAAM,EAAID,EAAM,OAExBH,EAAaI,CAAK,CACpB,EAEA,OACEC,EAAA,cAACC,EAAA,CAAO,GAAG,QAAS,GAAGL,CAAAA,EACrBI,EAAA,cAACE,EAAA,CAAK,GAAIC,CAAAA,CAAQ,EACjBV,EACDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,SAAUH,EACV,OAAQL,EACR,SAAUE,EACV,OAAM,EAAA,CACR,CACF,CAEJ,EAEAH,EAAU,YAAc"}