@atom-learning/components 2.52.0 → 2.54.0

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/no-overflow-wrapper/NoOverflowWrapper.d.ts

@@ -161,6 +161,13 @@ export declare const NoOverflowWrapper: import("@stitches/react/types/styled-com
         "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">;
@@ -373,6 +380,13 @@ export declare const NoOverflowWrapper: import("@stitches/react/types/styled-com
         "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/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "2.52.0",
+  "version": "2.54.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",