@atom-learning/components 2.33.0 → 2.35.0

package/dist/index.js

@@ -1 +1,2 @@
 import{Accordion as p}from"./components/accordion/Accordion.js";import{ActionIcon as x}from"./components/action-icon/ActionIcon.js";import{AlertDialog as i}from"./components/alert-dialog/AlertDialog.js";import{AlertProvider as l,useAlert as d}from"./components/alert-dialog/alert-context/AlertContext.js";import{Avatar as n}from"./components/avatar/Avatar.js";import{Badge as c}from"./components/badge/Badge.js";import{Box as C}from"./components/box/Box.js";import{Button as g,StyledButton as F}from"./components/button/Button.js";import{Carousel as h,useCarousel as I}from"./components/carousel/Carousel.js";import{Checkbox as D}from"./components/checkbox/Checkbox.js";import{CheckboxField as G}from"./components/checkbox-field/CheckboxField.js";import{Chip as w}from"./components/chip/Chip.js";import{ChipGroup as A}from"./components/chip/ChipGroup.js";import{ChipDismissibleGroup as L}from"./components/chip-dismissible-group/index.js";import{ChipToggleGroup as M}from"./components/chip-toggle-group/index.js";import{Combobox as V}from"./components/combobox/Combobox.js";import{useDataTable as E}from"./components/data-table/DataTableContext.js";import{DataTable as j}from"./components/data-table/DataTable.js";import{DateField as z}from"./components/date-field/DateField.js";import{DateInput as K}from"./components/date-input/DateInput.js";import{Dialog as Q}from"./components/dialog/Dialog.js";import{Dismissible as X}from"./components/dismissible/index.js";import{DismissibleGroup as Z}from"./components/dismissible-group/index.js";import{Divider as $}from"./components/divider/Divider.js";import{DropdownMenu as ro}from"./components/dropdown-menu/DropdownMenu.js";import{EmptyState as to}from"./components/empty-state/EmptyState.js";import{FieldWrapper as mo}from"./components/field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as fo}from"./components/field-wrapper/InlineFieldWrapper.js";import{FileInput as ao}from"./components/file-input/FileInput.js";import{Flex as so}from"./components/flex/Flex.js";import{Form as uo}from"./components/form/Form.js";import"dlv";import"react-hook-form";import{Grid as bo}from"./components/grid/Grid.js";import{Heading as So}from"./components/heading/Heading.js";import{Icon as Fo}from"./components/icon/Icon.js";import{Image as ho}from"./components/image/Image.js";import{InlineMessage as Bo}from"./components/inline-message/InlineMessage.js";import{Input as ko}from"./components/input/Input.js";import{InputField as vo}from"./components/input-field/InputField.js";import{Label as yo}from"./components/label/Label.js";import{Link as Po,StyledLink as Lo}from"./components/link/Link.js";import{List as Mo}from"./components/list/List.js";import{Loader as Vo}from"./components/loader/Loader.js";import{MarkdownContent as Eo}from"./components/markdown-content/MarkdownContent.js";import{NavigationMenu as jo}from"./components/navigation/NavigationMenu.js";import{NotificationBadge as zo}from"./components/notification-badge/NotificationBadge.js";import{NumberInput as Ko}from"./components/number-input/NumberInput.js";import{NumberInputField as Qo}from"./components/number-input-field/NumberInputField.js";import{PasswordField as Xo}from"./components/password-field/PasswordField.js";import{PasswordInput as Zo}from"./components/password-input/PasswordInput.js";import{Popover as $o}from"./components/popover/Popover.js";import{ProgressBar as rr}from"./components/progress-bar/ProgressBar.js";import{RadioButton as tr}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as mr}from"./components/radio-button/RadioButtonGroup.js";import{RadioButtonField as fr}from"./components/radio-button-field/RadioButtonField.js";import{RadioCard as ar}from"./components/radio-card/RadioCard.js";import{RadioCardGroup as dr}from"./components/radio-card/RadioCardGroup.js";import{SearchField as nr}from"./components/search-field/SearchField.js";import{SearchInput as cr}from"./components/search-input/SearchInput.js";import{Select as Cr}from"./components/select/Select.js";import{SelectField as gr}from"./components/select-field/SelectField.js";import{Sidedrawer as Tr}from"./components/sidedrawer/Sidedrawer.js";import{Slider as Ir}from"./components/slider/Slider.js";import{SliderField as Dr}from"./components/slider-field/SliderField.js";import{Stack as Gr}from"./components/stack/Stack.js";import{StackContent as wr}from"./components/stack-content/StackContent.js";import{Stepper as Ar}from"./components/stepper/Stepper.js";import{Switch as Lr}from"./components/switch/Switch.js";import{Table as Mr}from"./components/table/Table.js";import{Tabs as Vr}from"./components/tabs/Tabs.js";import{Text as Er}from"./components/text/Text.js";import{Textarea as jr}from"./components/textarea/Textarea.js";import{TextareaField as zr}from"./components/textarea-field/TextareaField.js";import{ToastProvider as Kr}from"./components/toast/ToastProvider.js";import{ToggleGroup as Qr}from"./components/toggle-group/index.js";import{Tooltip as Xr}from"./components/tooltip/Tooltip.js";import{TopBar as Zr}from"./components/top-bar/TopBar.js";import{Video as $r}from"./components/video/Video.js";import{createTheme as re,css as ee,getCssText as te,globalCss as pe,keyframes as me,media as xe,styled as fe,theme as ie,utils as ae}from"./stitches.js";import{ColorScheme as de}from"./experiments/color-scheme/ColorScheme.js";import{createThemeVariants as ne}from"./utilities/create-theme-variants/createThemeVariants.js";import{focusVisibleStyleBlock as ce}from"./utilities/style/focus-visible-style-block.js";import{default as Ce}from"react-hot-toast";export{p as Accordion,x as ActionIcon,i as AlertDialog,l as AlertProvider,n as Avatar,c as Badge,C as Box,g as Button,h as Carousel,D as Checkbox,G as CheckboxField,w as Chip,L as ChipDismissibleGroup,A as ChipGroup,M as ChipToggleGroup,de as ColorScheme,V as Combobox,j as DataTable,z as DateField,K as DateInput,Q as Dialog,X as Dismissible,Z as DismissibleGroup,$ as Divider,ro as DropdownMenu,to as EmptyState,mo as FieldWrapper,ao as FileInput,so as Flex,uo as Form,bo as Grid,So as Heading,Fo as Icon,ho as Image,fo as InlineFieldWrapper,Bo as InlineMessage,ko as Input,vo as InputField,yo as Label,Po as Link,Mo as List,Vo as Loader,Eo as MarkdownContent,jo as NavigationMenu,zo as NotificationBadge,Ko as NumberInput,Qo as NumberInputField,Xo as PasswordField,Zo as PasswordInput,$o as Popover,rr as ProgressBar,tr as RadioButton,fr as RadioButtonField,mr as RadioButtonGroup,ar as RadioCard,dr as RadioCardGroup,nr as SearchField,cr as SearchInput,Cr as Select,gr as SelectField,Tr as Sidedrawer,Ir as Slider,Dr as SliderField,Gr as Stack,wr as StackContent,Ar as Stepper,F as StyledButton,Lo as StyledLink,Lr as Switch,Mr as Table,Vr as Tabs,Er as Text,jr as Textarea,zr as TextareaField,Kr as ToastProvider,Qr as ToggleGroup,Xr as Tooltip,Zr as TopBar,$r as Video,re as createTheme,ne as createThemeVariants,ee as css,ce as focusVisibleStyleBlock,te as getCssText,pe as globalCss,me as keyframes,xe as media,fe as styled,ie as theme,Ce as toast,d as useAlert,I as useCarousel,E as useDataTable,ae as utils};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/stitches.d.ts

@@ -78,6 +78,42 @@ declare const stitchesConfig: import("@stitches/react/types/stitches").default<"
         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;
@@ -135,6 +171,7 @@ declare const stitchesConfig: import("@stitches/react/types/stitches").default<"
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -251,6 +288,42 @@ export declare const css: {
             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;
@@ -308,6 +381,7 @@ export declare const css: {
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -419,6 +493,42 @@ export declare const css: {
         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;
@@ -476,6 +586,7 @@ export declare const css: {
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -578,6 +689,42 @@ export declare const css: {
         textPlaceholder?: string | number | boolean | undefined;
         background?: string | number | boolean | undefined;
         backgroundAccent?: string | number | boolean | undefined;
+        grey100?: string | number | boolean | undefined;
+        grey200?: string | number | boolean | undefined;
+        grey300?: string | number | boolean | undefined;
+        grey400?: string | number | boolean | undefined;
+        grey500?: string | number | boolean | undefined;
+        grey600?: string | number | boolean | undefined;
+        grey700?: string | number | boolean | undefined;
+        grey800?: string | number | boolean | undefined;
+        grey900?: string | number | boolean | undefined;
+        grey1000?: string | number | boolean | undefined;
+        grey1100?: string | number | boolean | undefined;
+        grey1200?: string | number | boolean | undefined;
+        blue100?: string | number | boolean | undefined;
+        blue200?: string | number | boolean | undefined;
+        blue300?: string | number | boolean | undefined;
+        blue400?: string | number | boolean | undefined;
+        blue500?: string | number | boolean | undefined;
+        blue600?: string | number | boolean | undefined;
+        blue700?: string | number | boolean | undefined;
+        blue800?: string | number | boolean | undefined;
+        blue900?: string | number | boolean | undefined;
+        blue1000?: string | number | boolean | undefined;
+        blue1100?: string | number | boolean | undefined;
+        blue1200?: string | number | boolean | undefined;
+        purple100?: string | number | boolean | undefined;
+        purple200?: string | number | boolean | undefined;
+        purple300?: string | number | boolean | undefined;
+        purple400?: string | number | boolean | undefined;
+        purple500?: string | number | boolean | undefined;
+        purple600?: string | number | boolean | undefined;
+        purple700?: string | number | boolean | undefined;
+        purple800?: string | number | boolean | undefined;
+        purple900?: string | number | boolean | undefined;
+        purple1000?: string | number | boolean | undefined;
+        purple1100?: string | number | boolean | undefined;
+        purple1200?: string | number | boolean | undefined;
         tonal50?: string | number | boolean | undefined;
         tonal100?: string | number | boolean | undefined;
         tonal200?: string | number | boolean | undefined;
@@ -635,6 +782,7 @@ export declare const css: {
         7?: string | number | boolean | undefined;
         8?: string | number | boolean | undefined;
         9?: string | number | boolean | undefined;
+        24?: string | number | boolean | undefined;
     } | undefined;
     fontSizes?: {
         xs?: string | number | boolean | undefined;
@@ -688,6 +836,42 @@ export declare const css: {
         textPlaceholder?: string | number | boolean | undefined;
         background?: string | number | boolean | undefined;
         backgroundAccent?: string | number | boolean | undefined;
+        grey100?: string | number | boolean | undefined;
+        grey200?: string | number | boolean | undefined;
+        grey300?: string | number | boolean | undefined;
+        grey400?: string | number | boolean | undefined;
+        grey500?: string | number | boolean | undefined;
+        grey600?: string | number | boolean | undefined;
+        grey700?: string | number | boolean | undefined;
+        grey800?: string | number | boolean | undefined;
+        grey900?: string | number | boolean | undefined;
+        grey1000?: string | number | boolean | undefined;
+        grey1100?: string | number | boolean | undefined;
+        grey1200?: string | number | boolean | undefined;
+        blue100?: string | number | boolean | undefined;
+        blue200?: string | number | boolean | undefined;
+        blue300?: string | number | boolean | undefined;
+        blue400?: string | number | boolean | undefined;
+        blue500?: string | number | boolean | undefined;
+        blue600?: string | number | boolean | undefined;
+        blue700?: string | number | boolean | undefined;
+        blue800?: string | number | boolean | undefined;
+        blue900?: string | number | boolean | undefined;
+        blue1000?: string | number | boolean | undefined;
+        blue1100?: string | number | boolean | undefined;
+        blue1200?: string | number | boolean | undefined;
+        purple100?: string | number | boolean | undefined;
+        purple200?: string | number | boolean | undefined;
+        purple300?: string | number | boolean | undefined;
+        purple400?: string | number | boolean | undefined;
+        purple500?: string | number | boolean | undefined;
+        purple600?: string | number | boolean | undefined;
+        purple700?: string | number | boolean | undefined;
+        purple800?: string | number | boolean | undefined;
+        purple900?: string | number | boolean | undefined;
+        purple1000?: string | number | boolean | undefined;
+        purple1100?: string | number | boolean | undefined;
+        purple1200?: string | number | boolean | undefined;
         tonal50?: string | number | boolean | undefined;
         tonal100?: string | number | boolean | undefined;
         tonal200?: string | number | boolean | undefined;
@@ -745,6 +929,7 @@ export declare const css: {
         7?: string | number | boolean | undefined;
         8?: string | number | boolean | undefined;
         9?: string | number | boolean | undefined;
+        24?: string | number | boolean | undefined;
     } | undefined;
     fontSizes?: {
         xs?: string | number | boolean | undefined;
@@ -815,6 +1000,42 @@ export declare const css: {
             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;
@@ -872,6 +1093,7 @@ export declare const css: {
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -983,6 +1205,42 @@ export declare const css: {
         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;
@@ -1040,6 +1298,7 @@ export declare const css: {
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -1151,6 +1410,42 @@ export declare const css: {
             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;
@@ -1208,6 +1503,7 @@ export declare const css: {
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -1327,6 +1623,42 @@ export declare const css: {
             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;
@@ -1384,6 +1716,7 @@ export declare const css: {
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -1495,6 +1828,42 @@ export declare const css: {
         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;
@@ -1552,6 +1921,7 @@ export declare const css: {
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -1657,6 +2027,42 @@ export declare const css: {
         textPlaceholder: import("@stitches/react/types/theme").Token<"textPlaceholder", string, "colors", "">;
         background: import("@stitches/react/types/theme").Token<"background", string, "colors", "">;
         backgroundAccent: import("@stitches/react/types/theme").Token<"backgroundAccent", string, "colors", "">;
+        grey100: import("@stitches/react/types/theme").Token<"grey100", string, "colors", "">;
+        grey200: import("@stitches/react/types/theme").Token<"grey200", string, "colors", "">;
+        grey300: import("@stitches/react/types/theme").Token<"grey300", string, "colors", "">;
+        grey400: import("@stitches/react/types/theme").Token<"grey400", string, "colors", "">;
+        grey500: import("@stitches/react/types/theme").Token<"grey500", string, "colors", "">;
+        grey600: import("@stitches/react/types/theme").Token<"grey600", string, "colors", "">;
+        grey700: import("@stitches/react/types/theme").Token<"grey700", string, "colors", "">;
+        grey800: import("@stitches/react/types/theme").Token<"grey800", string, "colors", "">;
+        grey900: import("@stitches/react/types/theme").Token<"grey900", string, "colors", "">;
+        grey1000: import("@stitches/react/types/theme").Token<"grey1000", string, "colors", "">;
+        grey1100: import("@stitches/react/types/theme").Token<"grey1100", string, "colors", "">;
+        grey1200: import("@stitches/react/types/theme").Token<"grey1200", string, "colors", "">;
+        blue100: import("@stitches/react/types/theme").Token<"blue100", string, "colors", "">;
+        blue200: import("@stitches/react/types/theme").Token<"blue200", string, "colors", "">;
+        blue300: import("@stitches/react/types/theme").Token<"blue300", string, "colors", "">;
+        blue400: import("@stitches/react/types/theme").Token<"blue400", string, "colors", "">;
+        blue500: import("@stitches/react/types/theme").Token<"blue500", string, "colors", "">;
+        blue600: import("@stitches/react/types/theme").Token<"blue600", string, "colors", "">;
+        blue700: import("@stitches/react/types/theme").Token<"blue700", string, "colors", "">;
+        blue800: import("@stitches/react/types/theme").Token<"blue800", string, "colors", "">;
+        blue900: import("@stitches/react/types/theme").Token<"blue900", string, "colors", "">;
+        blue1000: import("@stitches/react/types/theme").Token<"blue1000", string, "colors", "">;
+        blue1100: import("@stitches/react/types/theme").Token<"blue1100", string, "colors", "">;
+        blue1200: import("@stitches/react/types/theme").Token<"blue1200", string, "colors", "">;
+        purple100: import("@stitches/react/types/theme").Token<"purple100", string, "colors", "">;
+        purple200: import("@stitches/react/types/theme").Token<"purple200", string, "colors", "">;
+        purple300: import("@stitches/react/types/theme").Token<"purple300", string, "colors", "">;
+        purple400: import("@stitches/react/types/theme").Token<"purple400", string, "colors", "">;
+        purple500: import("@stitches/react/types/theme").Token<"purple500", string, "colors", "">;
+        purple600: import("@stitches/react/types/theme").Token<"purple600", string, "colors", "">;
+        purple700: import("@stitches/react/types/theme").Token<"purple700", string, "colors", "">;
+        purple800: import("@stitches/react/types/theme").Token<"purple800", string, "colors", "">;
+        purple900: import("@stitches/react/types/theme").Token<"purple900", string, "colors", "">;
+        purple1000: import("@stitches/react/types/theme").Token<"purple1000", string, "colors", "">;
+        purple1100: import("@stitches/react/types/theme").Token<"purple1100", string, "colors", "">;
+        purple1200: import("@stitches/react/types/theme").Token<"purple1200", string, "colors", "">;
         tonal50: import("@stitches/react/types/theme").Token<"tonal50", string, "colors", "">;
         tonal100: import("@stitches/react/types/theme").Token<"tonal100", string, "colors", "">;
         tonal200: import("@stitches/react/types/theme").Token<"tonal200", string, "colors", "">;
@@ -1714,6 +2120,7 @@ export declare const css: {
         7: import("@stitches/react/types/theme").Token<"7", string, "space", "">;
         8: import("@stitches/react/types/theme").Token<"8", string, "space", "">;
         9: import("@stitches/react/types/theme").Token<"9", string, "space", "">;
+        24: import("@stitches/react/types/theme").Token<"24", string, "space", "">;
     };
     fontSizes: {
         xs: import("@stitches/react/types/theme").Token<"xs", string, "fontSizes", "">;

package/dist/stitches.js

@@ -1 +1,2 @@
 import*as e from"@atom-learning/theme";import{createStitches as o}from"@stitches/react";const i={bg:t=>({background:t}),size:t=>({height:t,width:t}),p:t=>({padding:t}),pt:t=>({paddingTop:t}),pr:t=>({paddingRight:t}),pb:t=>({paddingBottom:t}),pl:t=>({paddingLeft:t}),px:t=>({paddingLeft:t,paddingRight:t}),py:t=>({paddingTop:t,paddingBottom:t}),m:t=>({margin:t}),mt:t=>({marginTop:t}),mr:t=>({marginRight:t}),mb:t=>({marginBottom:t}),ml:t=>({marginLeft:t}),mx:t=>({marginLeft:t,marginRight:t}),my:t=>({marginTop:t,marginBottom:t})},m={sm:"(min-width: 550px)",md:"(min-width: 800px)",lg:"(min-width: 1100px)",xl:"(min-width: 1350px)",reducedMotion:"(prefers-reduced-motion)",allowMotion:"(prefers-reduced-motion: no-preference)",hover:"(hover: hover)"},d=o({theme:e,utils:i,media:m}),{css:r,getCssText:n,createTheme:p,globalCss:g,keyframes:a,styled:h,theme:s}=d;export{p as createTheme,r as css,n as getCssText,g as globalCss,a as keyframes,m as media,h as styled,s as theme,i as utils};
+//# sourceMappingURL=stitches.js.map

package/dist/stitches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitches.js","sources":["../src/stitches.ts"],"sourcesContent":["import type { Theme } from '@atom-learning/theme'\nimport * as atomTheme from '@atom-learning/theme'\nimport type {\n  CSS as StitchesCSS,\n  PropertyValue,\n  ScaleValue\n} from '@stitches/react'\nimport { createStitches } from '@stitches/react'\n\nexport const utils = {\n  bg: (value: PropertyValue<'background'>) => ({\n    background: value\n  }),\n\n  size: (value: ScaleValue<'size'> | number | string) => ({\n    height: value,\n    width: value\n  }),\n\n  p: (value: ScaleValue<'space'> | number | string) => ({\n    padding: value\n  }),\n  pt: (value: ScaleValue<'space'> | number | string) => ({\n    paddingTop: value\n  }),\n  pr: (value: ScaleValue<'space'> | number | string) => ({\n    paddingRight: value\n  }),\n  pb: (value: ScaleValue<'space'> | number | string) => ({\n    paddingBottom: value\n  }),\n  pl: (value: ScaleValue<'space'> | number | string) => ({\n    paddingLeft: value\n  }),\n  px: (value: ScaleValue<'space'> | number | string) => ({\n    paddingLeft: value,\n    paddingRight: value\n  }),\n  py: (value: ScaleValue<'space'> | number | string) => ({\n    paddingTop: value,\n    paddingBottom: value\n  }),\n\n  m: (value: ScaleValue<'space'> | number | string) => ({\n    margin: value\n  }),\n  mt: (value: ScaleValue<'space'> | number | string) => ({\n    marginTop: value\n  }),\n  mr: (value: ScaleValue<'space'> | number | string) => ({\n    marginRight: value\n  }),\n  mb: (value: ScaleValue<'space'> | number | string) => ({\n    marginBottom: value\n  }),\n  ml: (value: ScaleValue<'space'> | number | string) => ({\n    marginLeft: value\n  }),\n  mx: (value: ScaleValue<'space'> | number | string) => ({\n    marginLeft: value,\n    marginRight: value\n  }),\n  my: (value: ScaleValue<'space'> | number | string) => ({\n    marginTop: value,\n    marginBottom: value\n  })\n}\n\nexport const media = {\n  sm: '(min-width: 550px)',\n  md: '(min-width: 800px)',\n  lg: '(min-width: 1100px)',\n  xl: '(min-width: 1350px)',\n  reducedMotion: '(prefers-reduced-motion)',\n  allowMotion: '(prefers-reduced-motion: no-preference)',\n  hover: '(hover: hover)'\n}\n\nconst stitchesConfig = createStitches({\n  theme: atomTheme as Theme,\n  utils,\n  media\n})\n\nexport const {\n  css,\n  getCssText,\n  createTheme,\n  globalCss,\n  keyframes,\n  styled,\n  theme\n} = stitchesConfig\n\nexport type CSS = StitchesCSS<typeof stitchesConfig>\n"],"names":["utils","value","media","stitchesConfig","createStitches","atomTheme","css","getCssText","createTheme","globalCss","keyframes","styled","theme"],"mappings":"wFASO,MAAMA,EAAQ,CACnB,GAAKC,IAAwC,CAC3C,WAAYA,CACd,GAEA,KAAOA,IAAiD,CACtD,OAAQA,EACR,MAAOA,CACT,GAEA,EAAIA,IAAkD,CACpD,QAASA,CACX,GACA,GAAKA,IAAkD,CACrD,WAAYA,CACd,GACA,GAAKA,IAAkD,CACrD,aAAcA,CAChB,GACA,GAAKA,IAAkD,CACrD,cAAeA,CACjB,GACA,GAAKA,IAAkD,CACrD,YAAaA,CACf,GACA,GAAKA,IAAkD,CACrD,YAAaA,EACb,aAAcA,CAChB,GACA,GAAKA,IAAkD,CACrD,WAAYA,EACZ,cAAeA,CACjB,GAEA,EAAIA,IAAkD,CACpD,OAAQA,CACV,GACA,GAAKA,IAAkD,CACrD,UAAWA,CACb,GACA,GAAKA,IAAkD,CACrD,YAAaA,CACf,GACA,GAAKA,IAAkD,CACrD,aAAcA,CAChB,GACA,GAAKA,IAAkD,CACrD,WAAYA,CACd,GACA,GAAKA,IAAkD,CACrD,WAAYA,EACZ,YAAaA,CACf,GACA,GAAKA,IAAkD,CACrD,UAAWA,EACX,aAAcA,CAChB,EACF,EAEaC,EAAQ,CACnB,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,cAAe,2BACf,YAAa,0CACb,MAAO,gBACT,EAEMC,EAAiBC,EAAe,CACpC,MAAOC,EACP,MAAAL,EACA,MAAAE,CACF,CAAC,EAEY,CACX,IAAAI,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,CACF,EAAIT"}

package/dist/utilities/create-theme-variants/createThemeVariants.d.ts

@@ -29,6 +29,42 @@ export declare const createThemeVariants: <ThemeProperty extends keyof Theme>(th
         textPlaceholder: import("@stitches/react/types/theme").Token<"textPlaceholder", string, "colors", "">;
         background: import("@stitches/react/types/theme").Token<"background", string, "colors", "">;
         backgroundAccent: import("@stitches/react/types/theme").Token<"backgroundAccent", string, "colors", "">;
+        grey100: import("@stitches/react/types/theme").Token<"grey100", string, "colors", "">;
+        grey200: import("@stitches/react/types/theme").Token<"grey200", string, "colors", "">;
+        grey300: import("@stitches/react/types/theme").Token<"grey300", string, "colors", "">;
+        grey400: import("@stitches/react/types/theme").Token<"grey400", string, "colors", "">;
+        grey500: import("@stitches/react/types/theme").Token<"grey500", string, "colors", "">;
+        grey600: import("@stitches/react/types/theme").Token<"grey600", string, "colors", "">;
+        grey700: import("@stitches/react/types/theme").Token<"grey700", string, "colors", "">;
+        grey800: import("@stitches/react/types/theme").Token<"grey800", string, "colors", "">;
+        grey900: import("@stitches/react/types/theme").Token<"grey900", string, "colors", "">;
+        grey1000: import("@stitches/react/types/theme").Token<"grey1000", string, "colors", "">;
+        grey1100: import("@stitches/react/types/theme").Token<"grey1100", string, "colors", "">;
+        grey1200: import("@stitches/react/types/theme").Token<"grey1200", string, "colors", "">;
+        blue100: import("@stitches/react/types/theme").Token<"blue100", string, "colors", "">;
+        blue200: import("@stitches/react/types/theme").Token<"blue200", string, "colors", "">;
+        blue300: import("@stitches/react/types/theme").Token<"blue300", string, "colors", "">;
+        blue400: import("@stitches/react/types/theme").Token<"blue400", string, "colors", "">;
+        blue500: import("@stitches/react/types/theme").Token<"blue500", string, "colors", "">;
+        blue600: import("@stitches/react/types/theme").Token<"blue600", string, "colors", "">;
+        blue700: import("@stitches/react/types/theme").Token<"blue700", string, "colors", "">;
+        blue800: import("@stitches/react/types/theme").Token<"blue800", string, "colors", "">;
+        blue900: import("@stitches/react/types/theme").Token<"blue900", string, "colors", "">;
+        blue1000: import("@stitches/react/types/theme").Token<"blue1000", string, "colors", "">;
+        blue1100: import("@stitches/react/types/theme").Token<"blue1100", string, "colors", "">;
+        blue1200: import("@stitches/react/types/theme").Token<"blue1200", string, "colors", "">;
+        purple100: import("@stitches/react/types/theme").Token<"purple100", string, "colors", "">;
+        purple200: import("@stitches/react/types/theme").Token<"purple200", string, "colors", "">;
+        purple300: import("@stitches/react/types/theme").Token<"purple300", string, "colors", "">;
+        purple400: import("@stitches/react/types/theme").Token<"purple400", string, "colors", "">;
+        purple500: import("@stitches/react/types/theme").Token<"purple500", string, "colors", "">;
+        purple600: import("@stitches/react/types/theme").Token<"purple600", string, "colors", "">;
+        purple700: import("@stitches/react/types/theme").Token<"purple700", string, "colors", "">;
+        purple800: import("@stitches/react/types/theme").Token<"purple800", string, "colors", "">;
+        purple900: import("@stitches/react/types/theme").Token<"purple900", string, "colors", "">;
+        purple1000: import("@stitches/react/types/theme").Token<"purple1000", string, "colors", "">;
+        purple1100: import("@stitches/react/types/theme").Token<"purple1100", string, "colors", "">;
+        purple1200: import("@stitches/react/types/theme").Token<"purple1200", string, "colors", "">;
         tonal50: import("@stitches/react/types/theme").Token<"tonal50", string, "colors", "">;
         tonal100: import("@stitches/react/types/theme").Token<"tonal100", string, "colors", "">;
         tonal200: import("@stitches/react/types/theme").Token<"tonal200", string, "colors", "">;
@@ -86,6 +122,7 @@ export declare const createThemeVariants: <ThemeProperty extends keyof Theme>(th
         7: import("@stitches/react/types/theme").Token<"7", string, "space", "">;
         8: import("@stitches/react/types/theme").Token<"8", string, "space", "">;
         9: import("@stitches/react/types/theme").Token<"9", string, "space", "">;
+        24: import("@stitches/react/types/theme").Token<"24", string, "space", "">;
     };
     fontSizes: {
         xs: import("@stitches/react/types/theme").Token<"xs", string, "fontSizes", "">;

package/dist/utilities/create-theme-variants/createThemeVariants.js

@@ -1 +1,2 @@
 import{theme as c}from"../../stitches.js";const s=(e,t)=>Object.keys(c[e]).reduce((a,r)=>({...a,[r]:JSON.parse(JSON.stringify(t).replace(/\$key/g,`$${e}$${r}`))}),{});export{s as createThemeVariants};
+//# sourceMappingURL=createThemeVariants.js.map

package/dist/utilities/create-theme-variants/createThemeVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThemeVariants.js","sources":["../../../src/utilities/create-theme-variants/createThemeVariants.ts"],"sourcesContent":["import { Theme } from '@atom-learning/theme'\n\nimport { CSS, theme } from '../../stitches'\n\n/**\n * Generates a Stitches variants object based on keys in our theme.\n * You can use the string `$key` in your CSS object, which will be replaced\n * with the token from our theme.\n *\n *\n * @example\n * ```ts\n * createThemeVariants('space', { p: '$key' })\n *\n * // Result:\n * // {\n * //   0: { p: '$space$0' },\n * //   1: { p: '$space$1' },\n * //   2: { p: '$space$2' },\n * //   ...etc\n * // }\n * ```\n */\nexport const createThemeVariants = <ThemeProperty extends keyof Theme>(\n  themeProperty: ThemeProperty,\n  styles: CSS\n): Record<keyof typeof theme[ThemeProperty], CSS> =>\n  Object.keys(theme[themeProperty]).reduce(\n    (acc, key) => ({\n      ...acc,\n      [key]: JSON.parse(\n        JSON.stringify(styles).replace(/\\$key/g, `$${themeProperty}$${key}`)\n      )\n    }),\n    {}\n  ) as Record<keyof typeof theme[ThemeProperty], CSS>\n"],"names":["createThemeVariants","themeProperty","styles","theme","acc","key"],"mappings":"0CAuBa,MAAAA,EAAsB,CACjCC,EACAC,IAEA,OAAO,KAAKC,EAAMF,EAAc,EAAE,OAChC,CAACG,EAAKC,KAAS,CACb,GAAGD,EACH,CAACC,GAAM,KAAK,MACV,KAAK,UAAUH,CAAM,EAAE,QAAQ,SAAU,IAAID,KAAiBI,GAAK,CACrE,CACF,GACA,CACF,CAAA"}

package/dist/utilities/css-wrapper/CSSWrapper.js

@@ -1 +1,2 @@
 import*as e from"react";import{Box as m}from"../../components/box/Box.js";const a=({css:r,children:t})=>r?e.createElement(m,{css:r},t):e.createElement(e.Fragment,null,t);a.displayName="CSSWrapper";export{a as CSSWrapper};
+//# sourceMappingURL=CSSWrapper.js.map