@atom-learning/components 2.51.0 → 2.53.0

package/dist/index.d.ts

@@ -2,4 +2,4 @@ export * from './components';
 export * from './stitches';
 export { ColorScheme } from './experiments/color-scheme';
 export type { TcolorScheme } from './experiments/color-scheme';
-export { createThemeVariants, focusVisibleStyleBlock } from './utilities';
+export { createThemeVariants, focusVisibleStyleBlock, NoOverflowWrapper, noOverflowStyleBlock } from './utilities';

package/dist/index.js

@@ -1,2 +1,2 @@
-import{Accordion as f}from"./components/accordion/Accordion.js";import{ActionIcon as a}from"./components/action-icon/ActionIcon.js";import{AlertDialog as d}from"./components/alert-dialog/AlertDialog.js";import{AlertProvider as n,useAlert as u}from"./components/alert-dialog/alert-context/AlertContext.js";import{Avatar as T}from"./components/avatar/Avatar.js";import{Badge as S}from"./components/badge/Badge.js";import{Box as C}from"./components/box/Box.js";import{Button as I,StyledButton as h}from"./components/button/Button.js";import{Carousel as D,useCarousel as G}from"./components/carousel/Carousel.js";import{Checkbox as v}from"./components/checkbox/Checkbox.js";import{CheckboxField as y}from"./components/checkbox-field/CheckboxField.js";import{Chip as P}from"./components/chip/Chip.js";import{ChipGroup as L}from"./components/chip/ChipGroup.js";import{ChipDismissibleGroup as N}from"./components/chip-dismissible-group/index.js";import{ChipToggleGroup as W}from"./components/chip-toggle-group/index.js";import{Combobox as H}from"./components/combobox/Combobox.js";import{useDataTable as q}from"./components/data-table/DataTableContext.js";import{DataTable as J}from"./components/data-table/DataTable.js";import{DateField as O}from"./components/date-field/DateField.js";import{DateInput as U}from"./components/date-input/DateInput.js";import{Dialog as Y}from"./components/dialog/Dialog.js";import{Dismissible as _}from"./components/dismissible/index.js";import{DismissibleGroup as oo}from"./components/dismissible-group/index.js";import{Divider as eo}from"./components/divider/Divider.js";import{DropdownMenu as po}from"./components/dropdown-menu/DropdownMenu.js";import{EmptyState as xo}from"./components/empty-state/EmptyState.js";import{FieldWrapper as io}from"./components/field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as lo}from"./components/field-wrapper/InlineFieldWrapper.js";import{FileInput as no}from"./components/file-input/FileInput.js";import{Flex as co}from"./components/flex/Flex.js";import{Form as go}from"./components/form/Form.js";import"dlv";import"react-hook-form";import{Grid as bo}from"./components/grid/Grid.js";import{Heading as Fo}from"./components/heading/Heading.js";import{Icon as ho}from"./components/icon/Icon.js";import{Image as Do}from"./components/image/Image.js";import{InlineMessage as ko}from"./components/inline-message/InlineMessage.js";import{Input as wo}from"./components/input/Input.js";import{InputField as Ao}from"./components/input-field/InputField.js";import{Label as Ro}from"./components/label/Label.js";import{Link as Mo,StyledLink as No}from"./components/link/Link.js";import{List as Wo}from"./components/list/List.js";import{Loader as Ho}from"./components/loader/Loader.js";import{MarkdownContent as qo}from"./components/markdown-content/MarkdownContent.js";import{NavigationMenu as Jo}from"./components/navigation/NavigationMenu.js";import{NotificationBadge as Oo}from"./components/notification-badge/NotificationBadge.js";import{NumberInput as Uo}from"./components/number-input/NumberInput.js";import{NumberInputField as Yo}from"./components/number-input-field/NumberInputField.js";import{PasswordField as _o}from"./components/password-field/PasswordField.js";import{PasswordInput as or}from"./components/password-input/PasswordInput.js";import{Popover as er}from"./components/popover/Popover.js";import{ProgressBar as pr}from"./components/progress-bar/ProgressBar.js";import{RadioButton as xr}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as ir}from"./components/radio-button/RadioButtonGroup.js";import{RadioButtonField as lr}from"./components/radio-button-field/RadioButtonField.js";import{RadioCard as sr}from"./components/radio-card/RadioCard.js";import{RadioCardGroup as ur}from"./components/radio-card/RadioCardGroup.js";import{SearchField as Tr}from"./components/search-field/SearchField.js";import{SearchInput as Sr}from"./components/search-input/SearchInput.js";import{SectionMessage as Cr}from"./components/section-message/SectionMessage.js";import{Select as Ir}from"./components/select/Select.js";import{SelectField as Br}from"./components/select-field/SelectField.js";import{Sidedrawer as Gr}from"./components/sidedrawer/Sidedrawer.js";import{Slider as vr}from"./components/slider/Slider.js";import{SliderField as yr}from"./components/slider-field/SliderField.js";import{Sortable as Pr}from"./components/sortable/index.js";import{Stack as Lr}from"./components/stack/Stack.js";import{StackContent as Nr}from"./components/stack-content/StackContent.js";import{Stepper as Wr}from"./components/stepper/Stepper.js";import{Switch as Hr}from"./components/switch/Switch.js";import{Table as qr}from"./components/table/Table.js";import{Tabs as Jr}from"./components/tabs/Tabs.js";import{Text as Or}from"./components/text/Text.js";import{Textarea as Ur}from"./components/textarea/Textarea.js";import{TextareaField as Yr}from"./components/textarea-field/TextareaField.js";import{ToastProvider as _r}from"./components/toast/ToastProvider.js";import{ToggleGroup as oe}from"./components/toggle-group/index.js";import{Tooltip as ee}from"./components/tooltip/Tooltip.js";import{TopBar as pe}from"./components/top-bar/TopBar.js";import{Video as xe}from"./components/video/Video.js";import{BannerRegular as ie}from"./components/banner/banner-regular/BannerRegular.js";import{Tile as le}from"./components/tile/index.js";import{TileInteractive as se}from"./components/tile-interactive/TileInteractive.js";import{TileToggleGroup as ue}from"./components/tile-toggle-group/index.js";import{createTheme as Te,css as ge,getCssText as Se,globalCss as be,keyframes as Ce,media as Fe,styled as Ie,theme as he,utils as Be}from"./stitches.js";import{ColorScheme as Ge}from"./experiments/color-scheme/ColorScheme.js";import{createThemeVariants as ve}from"./utilities/create-theme-variants/createThemeVariants.js";import"./utilities/css-wrapper/CSSWrapper.js";import"color2k";import{focusVisibleStyleBlock as ye}from"./utilities/style/focus-visible-style-block.js";import"./utilities/style/keyframe-animations.js";import{default as Pe}from"react-hot-toast";import{TileGroup as Le}from"./components/tile/TileGroup.js";export{f as Accordion,a as ActionIcon,d as AlertDialog,n as AlertProvider,T as Avatar,S as Badge,ie as BannerRegular,C as Box,I as Button,D as Carousel,v as Checkbox,y as CheckboxField,P as Chip,N as ChipDismissibleGroup,L as ChipGroup,W as ChipToggleGroup,Ge as ColorScheme,H as Combobox,J as DataTable,O as DateField,U as DateInput,Y as Dialog,_ as Dismissible,oo as DismissibleGroup,eo as Divider,po as DropdownMenu,xo as EmptyState,io as FieldWrapper,no as FileInput,co as Flex,go as Form,bo as Grid,Fo as Heading,ho as Icon,Do as Image,lo as InlineFieldWrapper,ko as InlineMessage,wo as Input,Ao as InputField,Ro as Label,Mo as Link,Wo as List,Ho as Loader,qo as MarkdownContent,Jo as NavigationMenu,Oo as NotificationBadge,Uo as NumberInput,Yo as NumberInputField,_o as PasswordField,or as PasswordInput,er as Popover,pr as ProgressBar,xr as RadioButton,lr as RadioButtonField,ir as RadioButtonGroup,sr as RadioCard,ur as RadioCardGroup,Tr as SearchField,Sr as SearchInput,Cr as SectionMessage,Ir as Select,Br as SelectField,Gr as Sidedrawer,vr as Slider,yr as SliderField,Pr as Sortable,Lr as Stack,Nr as StackContent,Wr as Stepper,h as StyledButton,No as StyledLink,Hr as Switch,qr as Table,Jr as Tabs,Or as Text,Ur as Textarea,Yr as TextareaField,le as Tile,Le as TileGroup,se as TileInteractive,ue as TileToggleGroup,_r as ToastProvider,oe as ToggleGroup,ee as Tooltip,pe as TopBar,xe as Video,Te as createTheme,ve as createThemeVariants,ge as css,ye as focusVisibleStyleBlock,Se as getCssText,be as globalCss,Ce as keyframes,Fe as media,Ie as styled,he as theme,Pe as toast,u as useAlert,G as useCarousel,q as useDataTable,Be as utils};
+import{Accordion as f}from"./components/accordion/Accordion.js";import{ActionIcon as a}from"./components/action-icon/ActionIcon.js";import{AlertDialog as d}from"./components/alert-dialog/AlertDialog.js";import{AlertProvider as n,useAlert as u}from"./components/alert-dialog/alert-context/AlertContext.js";import{Avatar as T}from"./components/avatar/Avatar.js";import{Badge as S}from"./components/badge/Badge.js";import{Box as C}from"./components/box/Box.js";import{Button as I,StyledButton as h}from"./components/button/Button.js";import{Carousel as D,useCarousel as k}from"./components/carousel/Carousel.js";import{Checkbox as v}from"./components/checkbox/Checkbox.js";import{CheckboxField as y}from"./components/checkbox-field/CheckboxField.js";import{Chip as P}from"./components/chip/Chip.js";import{ChipGroup as L}from"./components/chip/ChipGroup.js";import{ChipDismissibleGroup as N}from"./components/chip-dismissible-group/index.js";import{ChipToggleGroup as W}from"./components/chip-toggle-group/index.js";import{Combobox as E}from"./components/combobox/Combobox.js";import{useDataTable as j}from"./components/data-table/DataTableContext.js";import{DataTable as z}from"./components/data-table/DataTable.js";import{DateField as K}from"./components/date-field/DateField.js";import{DateInput as U}from"./components/date-input/DateInput.js";import{Dialog as Y}from"./components/dialog/Dialog.js";import{Dismissible as _}from"./components/dismissible/index.js";import{DismissibleGroup as oo}from"./components/dismissible-group/index.js";import{Divider as eo}from"./components/divider/Divider.js";import{DropdownMenu as po}from"./components/dropdown-menu/DropdownMenu.js";import{EmptyState as xo}from"./components/empty-state/EmptyState.js";import{FieldWrapper as io}from"./components/field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as lo}from"./components/field-wrapper/InlineFieldWrapper.js";import{FileInput as no}from"./components/file-input/FileInput.js";import{Flex as co}from"./components/flex/Flex.js";import{Form as go}from"./components/form/Form.js";import"dlv";import"react-hook-form";import{Grid as bo}from"./components/grid/Grid.js";import{Heading as Fo}from"./components/heading/Heading.js";import{Icon as ho}from"./components/icon/Icon.js";import{Image as Do}from"./components/image/Image.js";import{InlineMessage as Go}from"./components/inline-message/InlineMessage.js";import{Input as wo}from"./components/input/Input.js";import{InputField as Ao}from"./components/input-field/InputField.js";import{Label as Ro}from"./components/label/Label.js";import{Link as Mo,StyledLink as No}from"./components/link/Link.js";import{List as Wo}from"./components/list/List.js";import{Loader as Eo}from"./components/loader/Loader.js";import{MarkdownContent as jo}from"./components/markdown-content/MarkdownContent.js";import{NavigationMenu as zo}from"./components/navigation/NavigationMenu.js";import{NotificationBadge as Ko}from"./components/notification-badge/NotificationBadge.js";import{NumberInput as Uo}from"./components/number-input/NumberInput.js";import{NumberInputField as Yo}from"./components/number-input-field/NumberInputField.js";import{PasswordField as _o}from"./components/password-field/PasswordField.js";import{PasswordInput as or}from"./components/password-input/PasswordInput.js";import{Popover as er}from"./components/popover/Popover.js";import{ProgressBar as pr}from"./components/progress-bar/ProgressBar.js";import{RadioButton as xr}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as ir}from"./components/radio-button/RadioButtonGroup.js";import{RadioButtonField as lr}from"./components/radio-button-field/RadioButtonField.js";import{RadioCard as sr}from"./components/radio-card/RadioCard.js";import{RadioCardGroup as ur}from"./components/radio-card/RadioCardGroup.js";import{SearchField as Tr}from"./components/search-field/SearchField.js";import{SearchInput as Sr}from"./components/search-input/SearchInput.js";import{SectionMessage as Cr}from"./components/section-message/SectionMessage.js";import{Select as Ir}from"./components/select/Select.js";import{SelectField as Br}from"./components/select-field/SelectField.js";import{Sidedrawer as kr}from"./components/sidedrawer/Sidedrawer.js";import{Slider as vr}from"./components/slider/Slider.js";import{SliderField as yr}from"./components/slider-field/SliderField.js";import{Sortable as Pr}from"./components/sortable/index.js";import{Stack as Lr}from"./components/stack/Stack.js";import{StackContent as Nr}from"./components/stack-content/StackContent.js";import{Stepper as Wr}from"./components/stepper/Stepper.js";import{Switch as Er}from"./components/switch/Switch.js";import{Table as jr}from"./components/table/Table.js";import{Tabs as zr}from"./components/tabs/Tabs.js";import{Text as Kr}from"./components/text/Text.js";import{Textarea as Ur}from"./components/textarea/Textarea.js";import{TextareaField as Yr}from"./components/textarea-field/TextareaField.js";import{ToastProvider as _r}from"./components/toast/ToastProvider.js";import{ToggleGroup as oe}from"./components/toggle-group/index.js";import{Tooltip as ee}from"./components/tooltip/Tooltip.js";import{TopBar as pe}from"./components/top-bar/TopBar.js";import{Video as xe}from"./components/video/Video.js";import{BannerRegular as ie}from"./components/banner/banner-regular/BannerRegular.js";import{Tile as le}from"./components/tile/Tile.js";import{TileGroup as se}from"./components/tile/TileGroup.js";import{TileInteractive as ue}from"./components/tile-interactive/TileInteractive.js";import{TileToggleGroup as Te}from"./components/tile-toggle-group/index.js";import{createTheme as Se,css as be,getCssText as Ce,globalCss as Fe,keyframes as Ie,media as he,styled as Be,theme as De,utils as ke}from"./stitches.js";import{ColorScheme as ve}from"./experiments/color-scheme/ColorScheme.js";import{createThemeVariants as ye}from"./utilities/create-theme-variants/createThemeVariants.js";import"./utilities/css-wrapper/CSSWrapper.js";import{NoOverflowWrapper as Pe,noOverflowStyleBlock as Re}from"./utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as Me}from"./utilities/style/focus-visible-style-block.js";import"./utilities/style/keyframe-animations.js";import{default as Ve}from"react-hot-toast";export{f as Accordion,a as ActionIcon,d as AlertDialog,n as AlertProvider,T as Avatar,S as Badge,ie as BannerRegular,C as Box,I as Button,D as Carousel,v as Checkbox,y as CheckboxField,P as Chip,N as ChipDismissibleGroup,L as ChipGroup,W as ChipToggleGroup,ve as ColorScheme,E as Combobox,z as DataTable,K as DateField,U as DateInput,Y as Dialog,_ as Dismissible,oo as DismissibleGroup,eo as Divider,po as DropdownMenu,xo as EmptyState,io as FieldWrapper,no as FileInput,co as Flex,go as Form,bo as Grid,Fo as Heading,ho as Icon,Do as Image,lo as InlineFieldWrapper,Go as InlineMessage,wo as Input,Ao as InputField,Ro as Label,Mo as Link,Wo as List,Eo as Loader,jo as MarkdownContent,zo as NavigationMenu,Pe as NoOverflowWrapper,Ko as NotificationBadge,Uo as NumberInput,Yo as NumberInputField,_o as PasswordField,or as PasswordInput,er as Popover,pr as ProgressBar,xr as RadioButton,lr as RadioButtonField,ir as RadioButtonGroup,sr as RadioCard,ur as RadioCardGroup,Tr as SearchField,Sr as SearchInput,Cr as SectionMessage,Ir as Select,Br as SelectField,kr as Sidedrawer,vr as Slider,yr as SliderField,Pr as Sortable,Lr as Stack,Nr as StackContent,Wr as Stepper,h as StyledButton,No as StyledLink,Er as Switch,jr as Table,zr as Tabs,Kr as Text,Ur as Textarea,Yr as TextareaField,le as Tile,se as TileGroup,ue as TileInteractive,Te as TileToggleGroup,_r as ToastProvider,oe as ToggleGroup,ee as Tooltip,pe as TopBar,xe as Video,Se as createTheme,ye as createThemeVariants,be as css,Me as focusVisibleStyleBlock,Ce as getCssText,Fe as globalCss,Ie as keyframes,he as media,Re as noOverflowStyleBlock,Be as styled,De as theme,Ve as toast,u as useAlert,k as useCarousel,j as useDataTable,ke as utils};
 //# sourceMappingURL=index.js.map

package/dist/stitches.d.ts

@@ -213,6 +213,13 @@ declare const stitchesConfig: import("@stitches/react/types/stitches").default<"
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: PropertyValue<'background'>) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -423,6 +430,13 @@ export declare const css: {
             "2": any;
             "3": any;
         };
+        ratios: {
+            "16-9": any;
+            "3-2": any;
+            "4-3": any;
+            "1-1": any;
+            "3-4": any;
+        };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         bg: (value: PropertyValue<'background'>) => {
             background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -628,6 +642,13 @@ export declare const css: {
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: PropertyValue<'background'>) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -824,6 +845,13 @@ export declare const css: {
         2?: string | number | boolean | undefined;
         3?: string | number | boolean | undefined;
     } | undefined;
+    ratios?: {
+        "16-9"?: string | number | boolean | undefined;
+        "3-2"?: string | number | boolean | undefined;
+        "4-3"?: string | number | boolean | undefined;
+        "1-1"?: string | number | boolean | undefined;
+        "3-4"?: string | number | boolean | undefined;
+    } | undefined;
 } & {
     [x: string]: {
         [x: string]: string | number | boolean;
@@ -971,6 +999,13 @@ export declare const css: {
         2?: string | number | boolean | undefined;
         3?: string | number | boolean | undefined;
     } | undefined;
+    ratios?: {
+        "16-9"?: string | number | boolean | undefined;
+        "3-2"?: string | number | boolean | undefined;
+        "4-3"?: string | number | boolean | undefined;
+        "1-1"?: string | number | boolean | undefined;
+        "3-4"?: string | number | boolean | undefined;
+    } | undefined;
 } & {
     [x: string]: {
         [x: string]: string | number | boolean;
@@ -1135,6 +1170,13 @@ export declare const css: {
             "2": any;
             "3": any;
         };
+        ratios: {
+            "16-9": any;
+            "3-2": any;
+            "4-3": any;
+            "1-1": any;
+            "3-4": any;
+        };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         bg: (value: PropertyValue<'background'>) => {
             background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -1340,6 +1382,13 @@ export declare const css: {
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: PropertyValue<'background'>) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -1545,6 +1594,13 @@ export declare const css: {
             "2": any;
             "3": any;
         };
+        ratios: {
+            "16-9": any;
+            "3-2": any;
+            "4-3": any;
+            "1-1": any;
+            "3-4": any;
+        };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         bg: (value: PropertyValue<'background'>) => {
             background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -1758,6 +1814,13 @@ export declare const css: {
             "2": any;
             "3": any;
         };
+        ratios: {
+            "16-9": any;
+            "3-2": any;
+            "4-3": any;
+            "1-1": any;
+            "3-4": any;
+        };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         bg: (value: PropertyValue<'background'>) => {
             background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -1963,6 +2026,13 @@ export declare const css: {
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: PropertyValue<'background'>) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -2162,6 +2232,13 @@ export declare const css: {
         2: import("@stitches/react/types/theme").Token<"2", string, "shadows", "">;
         3: import("@stitches/react/types/theme").Token<"3", string, "shadows", "">;
     };
+    ratios: {
+        "16-9": import("@stitches/react/types/theme").Token<"16-9", string, "ratios", "">;
+        "3-2": import("@stitches/react/types/theme").Token<"3-2", string, "ratios", "">;
+        "4-3": import("@stitches/react/types/theme").Token<"4-3", string, "ratios", "">;
+        "1-1": import("@stitches/react/types/theme").Token<"1-1", string, "ratios", "">;
+        "3-4": import("@stitches/react/types/theme").Token<"3-4", string, "ratios", "">;
+    };
 };
 export declare type CSS = StitchesCSS<typeof stitchesConfig>;
 export {};

package/dist/stitches.js

@@ -1,2 +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};
+import*as m from"@atom-learning/theme";import{themeMap as o}from"@atom-learning/theme/theme-map";import{createStitches as d,defaultThemeMap as p}from"@stitches/react";const e={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})},i={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)"},r=d({theme:m,themeMap:{...p,...o},utils:e,media:i}),{css:n,getCssText:a,createTheme:g,globalCss:h,keyframes:s,styled:c,theme:f}=r;export{g as createTheme,n as css,a as getCssText,h as globalCss,s as keyframes,i as media,c as styled,f as theme,e as utils};
 //# sourceMappingURL=stitches.js.map

package/dist/stitches.js.map

@@ -1 +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"}
+{"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 { themeMap } from '@atom-learning/theme/theme-map'\nimport type {\n  CSS as StitchesCSS,\n  PropertyValue,\n  ScaleValue\n} from '@stitches/react'\nimport { createStitches, defaultThemeMap } 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  themeMap: {\n    ...defaultThemeMap,\n    ...themeMap\n  },\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","defaultThemeMap","themeMap","css","getCssText","createTheme","globalCss","keyframes","styled","theme"],"mappings":"uKAUO,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,SAAU,CACR,GAAGC,EACH,GAAGC,CACL,EACA,MAAAP,EACA,MAAAE,CACF,CAAC,EAEY,CACX,IAAAM,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,CACF,EAAIX"}

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

@@ -164,4 +164,11 @@ export declare const createThemeVariants: <ThemeProperty extends keyof Theme>(th
         2: import("@stitches/react/types/theme").Token<"2", string, "shadows", "">;
         3: import("@stitches/react/types/theme").Token<"3", string, "shadows", "">;
     };
+    ratios: {
+        "16-9": import("@stitches/react/types/theme").Token<"16-9", string, "ratios", "">;
+        "3-2": import("@stitches/react/types/theme").Token<"3-2", string, "ratios", "">;
+        "4-3": import("@stitches/react/types/theme").Token<"4-3", string, "ratios", "">;
+        "1-1": import("@stitches/react/types/theme").Token<"1-1", string, "ratios", "">;
+        "3-4": import("@stitches/react/types/theme").Token<"3-4", string, "ratios", "">;
+    };
 })[ThemeProperty], CSS>;

package/dist/utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './create-theme-variants';
 export * from './css-wrapper';
+export { NoOverflowWrapper, noOverflowStyleBlock } from './no-overflow-wrapper';
 export * from './style';
 export * from './types';

package/dist/{components/tile/TileNoOverflowContainer.d.ts → utilities/no-overflow-wrapper/NoOverflowWrapper.d.ts}

@@ -1,4 +1,9 @@
-export declare const TileNoOverflowContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+export declare const noOverflowStyleBlock: () => {
+    size: string;
+    borderRadius: string;
+    overflow: string;
+};
+export declare const NoOverflowWrapper: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     sm: string;
     md: string;
     lg: string;
@@ -156,6 +161,13 @@ export declare const TileNoOverflowContainer: import("@stitches/react/types/styl
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -368,6 +380,13 @@ export declare const TileNoOverflowContainer: import("@stitches/react/types/styl
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.js

@@ -0,0 +1,2 @@
+import{Box as e}from"../../components/box/Box.js";import{styled as i}from"../../stitches.js";const o=()=>({size:"100%",borderRadius:"inherit",overflow:"hidden"}),r=i(e,o());r.displayName="NoOverflowWrapper";export{r as NoOverflowWrapper,o as noOverflowStyleBlock};
+//# sourceMappingURL=NoOverflowWrapper.js.map

package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoOverflowWrapper.js","sources":["../../../src/utilities/no-overflow-wrapper/NoOverflowWrapper.tsx"],"sourcesContent":["import { Box } from '~/components/box'\nimport { styled } from '~/stitches'\n\nexport const noOverflowStyleBlock = (): {\n  size: string\n  borderRadius: string\n  overflow: string\n} => {\n  return {\n    size: '100%',\n    borderRadius: 'inherit',\n    overflow: 'hidden'\n  }\n}\n\nexport const NoOverflowWrapper = styled(Box, noOverflowStyleBlock())\n\nNoOverflowWrapper.displayName = 'NoOverflowWrapper'\n"],"names":["noOverflowStyleBlock","NoOverflowWrapper","styled","Box"],"mappings":"6FAGO,MAAMA,EAAuB,KAK3B,CACL,KAAM,OACN,aAAc,UACd,SAAU,QACZ,GAGWC,EAAoBC,EAAOC,EAAKH,EAAqB,CAAC,EAEnEC,EAAkB,YAAc"}

package/dist/utilities/no-overflow-wrapper/index.d.ts

@@ -0,0 +1 @@
+export { NoOverflowWrapper, noOverflowStyleBlock } from './NoOverflowWrapper';

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "2.51.0",
+  "version": "2.53.0",
   "description": "",
   "files": [
     "dist"
@@ -60,7 +60,7 @@
   "devDependencies": {
     "@atom-learning/icons": "1.14.0",
     "@atom-learning/jest-stitches": "1.0.10",
-    "@atom-learning/theme": "1.2.0",
+    "@atom-learning/theme": "1.3.0",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@radix-ui/react-id": "0.1.5",
@@ -121,12 +121,12 @@
   },
   "peerDependencies": {
     "@atom-learning/icons": "^1.0.0",
-    "@atom-learning/theme": "^1.2.0",
+    "@atom-learning/theme": "^1.3.0",
     "react": "^17",
     "react-dom": "^17"
   },
   "dependencies": {
-    "@atom-learning/theme": "1.2.0",
+    "@atom-learning/theme": "1.3.0",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",

package/dist/components/tile/TileNoOverflowContainer.js

@@ -1,2 +0,0 @@
-import{NoOverflowContainer as e}from"../../utilities/no-overflow-container/NoOverflowContainer.js";const o=e;o.displayName="TileNoOverflowContainer";export{o as TileNoOverflowContainer};
-//# sourceMappingURL=TileNoOverflowContainer.js.map

package/dist/components/tile/TileNoOverflowContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TileNoOverflowContainer.js","sources":["../../../src/components/tile/TileNoOverflowContainer.tsx"],"sourcesContent":["import { NoOverflowContainer } from '~/utilities/no-overflow-container'\n\nexport const TileNoOverflowContainer = NoOverflowContainer\n\nTileNoOverflowContainer.displayName = 'TileNoOverflowContainer'\n"],"names":["TileNoOverflowContainer","NoOverflowContainer"],"mappings":"yGAEaA,EAA0BC,EAEvCD,EAAwB,YAAc"}

package/dist/components/tile/index.js

@@ -1,2 +0,0 @@
-import{Tile as e}from"./Tile.js";import{TileNoOverflowContainer as i}from"./TileNoOverflowContainer.js";import"../stack/Stack.js";const o=e;o.NoOverflowContainer=i,o.displayName="Tile";export{o as Tile};
-//# sourceMappingURL=index.js.map

package/dist/components/tile/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/tile/index.ts"],"sourcesContent":["import { Tile as TileRoot } from './Tile'\nimport { TileNoOverflowContainer } from './TileNoOverflowContainer'\n\ntype TTile = typeof TileRoot & {\n  NoOverflowContainer: typeof TileNoOverflowContainer\n}\nexport const Tile = TileRoot as TTile\nTile.NoOverflowContainer = TileNoOverflowContainer\nTile.displayName = 'Tile'\n\nexport { TileGroup } from './TileGroup'\n"],"names":["Tile","TileRoot","TileNoOverflowContainer"],"mappings":"kIAMO,MAAMA,EAAOC,EACpBD,EAAK,oBAAsBE,EAC3BF,EAAK,YAAc"}