@atom-learning/components 5.12.0 → 5.13.0-beta.0

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

@@ -1,2 +1,2 @@
-import{Item as e}from"@radix-ui/react-dropdown-menu";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as r}from"../../utilities/style/disabledStyle.js";const o={alignItems:"center",color:"$grey1000",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:400,position:"relative",px:"$3",py:"$2","&[data-disabled]":{...r,pointerEvents:"none"},'&[aria-current="page"], &:focus':{"&::before":{borderLeft:"2px solid currentColor",content:"",height:"$2",left:0,outline:"none",position:"absolute",transform:"scale(1)"}},"&:focus":{color:"$primary900",outline:"none"},"&:hover":{textDecoration:"underline"}},i=t(e,o);export{i as DropdownMenuItem,o as itemStyles};
+import{Item as e}from"@radix-ui/react-dropdown-menu";import{styled as t}from"../../stitches.js";const o={alignItems:"center",color:"$grey1000",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:400,position:"relative",px:"$3",py:"$2","&[data-disabled]":{opacity:.3,cursor:"not-allowed",pointerEvents:"none"},'&[aria-current="page"], &:focus':{"&::before":{borderLeft:"2px solid currentColor",content:"",height:"$2",left:0,outline:"none",position:"absolute",transform:"scale(1)"}},"&:focus":{color:"$primary900",outline:"none"},"&:hover":{textDecoration:"underline"}},r=t(e,o);export{r as DropdownMenuItem,o as itemStyles};
 //# sourceMappingURL=DropdownMenuItem.js.map

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

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

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

@@ -22,6 +22,8 @@ export declare const DropdownMenuSeparator: import("@atom-learning/stitches-reac
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -22,6 +22,8 @@ export declare const DropdownMenuTrigger: import("@atom-learning/stitches-react/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -1,2 +1,2 @@
-import{Trigger as r}from"@radix-ui/react-dropdown-menu";import{styled as o}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as i}from"../../utilities/style/disabledStyle.js";const t=o(r,{"&[disabled]":i});export{t as DropdownMenuTrigger};
+import{Trigger as o}from"@radix-ui/react-dropdown-menu";import{styled as r}from"../../stitches.js";const e=r(o,{"&[disabled]":{opacity:.3,cursor:"not-allowed"}});export{e as DropdownMenuTrigger};
 //# sourceMappingURL=DropdownMenuTrigger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuTrigger.js","sources":["../../../src/components/dropdown-menu/DropdownMenuTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\n\nexport const DropdownMenuTrigger = styled(Trigger, {\n  '&[disabled]': disabledStyle\n})\n"],"names":["DropdownMenuTrigger","styled","Trigger","disabledStyle"],"mappings":"wWAKaA,EAAsBC,EAAOC,EAAS,CACjD,cAAeC,CACjB,CAAC"}
+{"version":3,"file":"DropdownMenuTrigger.js","sources":["../../../src/components/dropdown-menu/DropdownMenuTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\n\nexport const DropdownMenuTrigger = styled(Trigger, {\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  }\n})\n"],"names":["DropdownMenuTrigger","styled","Trigger"],"mappings":"mGAIa,MAAAA,EAAsBC,EAAOC,EAAS,CACjD,cAAe,CACb,QAAS,GACT,OAAQ,aACV,CACF,CAAC"}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 declare const EmptyStateContainer: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -29,6 +29,8 @@ declare const EmptyStateContainer: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -399,6 +401,8 @@ declare const EmptyStateContainer: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -778,6 +782,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1152,6 +1158,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1527,6 +1535,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1907,6 +1917,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -2281,6 +2293,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;

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

@@ -31,6 +31,8 @@ declare const StyledEmptyStateBody: import("@atom-learning/stitches-react/types/
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -404,6 +406,8 @@ declare const StyledEmptyStateBody: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -29,6 +29,8 @@ declare const StyledEmptyStateImage: import("@atom-learning/stitches-react/types
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -404,6 +406,8 @@ declare const StyledEmptyStateImage: import("@atom-learning/stitches-react/types
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -25,6 +25,8 @@ declare const StyledEmptyStateTitle: import("@atom-learning/stitches-react/types
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

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

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

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

package/dist/components/flex/Flex.d.ts

@@ -1,8 +1,8 @@
 export declare const Flex: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -28,6 +28,8 @@ export declare const Flex: import("@atom-learning/stitches-react/types/styled-co
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/flex/Flex.js

@@ -1,2 +1,2 @@
-import{styled as l}from"../../stitches.js";import{createThemeVariants as o}from"../../utilities/create-theme-variants/createThemeVariants.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const r=(e,n)=>e.reduce((i,a)=>({...i,[a]:n(a)}),{}),t=["inherit","initial","revert","revert-layer","unset"],s=l("div",{display:"flex",variants:{direction:r([...t,"row","row-reverse","column","column-reverse"],e=>({flexDirection:e})),wrap:r([...t,"nowrap","wrap","wrap-reverse"],e=>({flexWrap:e})),justify:r([...t,"normal","unsafe","safe","start","center","end","flex-start","flex-end","left","right","space-between","space-around","space-evenly","stretch"],e=>({justifyContent:e})),align:r([...t,"normal","unsafe","safe","center","start","end","self-start","self-end","flex-start","flex-end","baseline","first baseline","last baseline","stretch"],e=>({alignItems:e})),gap:o("space",{gap:"$key"})}});s.displayName="Flex";export{s as Flex};
+import{styled as t}from"../../stitches.js";const e=t("div",{display:"flex",variants:{direction:{row:{flexDirection:"row"},"row-reverse":{flexDirection:"row-reverse"},column:{flexDirection:"column"},"column-reverse":{flexDirection:"column-reverse"},inherit:{flexDirection:"inherit"},initial:{flexDirection:"initial"},revert:{flexDirection:"revert"},"revert-layer":{flexDirection:"revert-layer"},unset:{flexDirection:"unset"}},wrap:{nowrap:{flexWrap:"nowrap"},wrap:{flexWrap:"wrap"},"wrap-reverse":{flexWrap:"wrap-reverse"},inherit:{flexWrap:"inherit"},initial:{flexWrap:"initial"},revert:{flexWrap:"revert"},"revert-layer":{flexWrap:"revert-layer"},unset:{flexWrap:"unset"}},justify:{normal:{justifyContent:"normal"},unsafe:{justifyContent:"unsafe"},safe:{justifyContent:"safe"},start:{justifyContent:"start"},center:{justifyContent:"center"},end:{justifyContent:"end"},"flex-start":{justifyContent:"flex-start"},"flex-end":{justifyContent:"flex-end"},left:{justifyContent:"left"},right:{justifyContent:"right"},"space-between":{justifyContent:"space-between"},"space-around":{justifyContent:"space-around"},"space-evenly":{justifyContent:"space-evenly"},stretch:{justifyContent:"stretch"},inherit:{justifyContent:"inherit"},initial:{justifyContent:"initial"},revert:{justifyContent:"revert"},"revert-layer":{justifyContent:"revert-layer"},unset:{justifyContent:"unset"}},align:{normal:{alignItems:"normal"},unsafe:{alignItems:"unsafe"},safe:{alignItems:"safe"},center:{alignItems:"center"},start:{alignItems:"start"},end:{alignItems:"end"},"self-start":{alignItems:"self-start"},"self-end":{alignItems:"self-end"},"flex-start":{alignItems:"flex-start"},"flex-end":{alignItems:"flex-end"},baseline:{alignItems:"baseline"},"first baseline":{alignItems:"first baseline"},"last baseline":{alignItems:"last baseline"},stretch:{alignItems:"stretch"},inherit:{alignItems:"inherit"},initial:{alignItems:"initial"},revert:{alignItems:"revert"},"revert-layer":{alignItems:"revert-layer"},unset:{alignItems:"unset"}},gap:{0:{gap:"$space$0"},1:{gap:"$space$1"},2:{gap:"$space$2"},3:{gap:"$space$3"},4:{gap:"$space$4"},24:{gap:"$space$24"},5:{gap:"$space$5"},6:{gap:"$space$6"},7:{gap:"$space$7"},8:{gap:"$space$8"},9:{gap:"$space$9"}}}});e.displayName="Flex";export{e as Flex};
 //# sourceMappingURL=Flex.js.map

package/dist/components/flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst createVariants = <T extends GlobalValue[]>(\n  variants: T,\n  fn: (string: T[number]) => CSS\n) => {\n  return variants.reduce(\n    (prev, variant) => ({ ...prev, [variant]: fn(variant) }),\n    {} as Record<T[number], CSS>\n  )\n}\n\nconst globalValues = [\n  'inherit',\n  'initial',\n  'revert',\n  'revert-layer',\n  'unset'\n] as const\n\n/*\n * The following type is partially a hack to get the rest of the createVariants array parameter to be recognised as const.\n * Thus giving is the correct types generated for these generated variant props.\n * No clue how we can do it cleaner.\n * Mad props to: Elliot for getting this to working as is.\n *\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype GlobalValue = (typeof globalValues)[number] | (string & {})\n\nexport const Flex = styled('div', {\n  display: 'flex',\n  variants: {\n    direction: createVariants(\n      [...globalValues, 'row', 'row-reverse', 'column', 'column-reverse'],\n      (v) => {\n        return { flexDirection: v }\n      }\n    ),\n    wrap: createVariants(\n      [...globalValues, 'nowrap', 'wrap', 'wrap-reverse'],\n      (v) => {\n        return { flexWrap: v }\n      }\n    ),\n    // Why is both `start` and `flex-start` valid values? Answer: https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/\n    justify: createVariants(\n      [\n        ...globalValues,\n        'normal',\n        'unsafe',\n        'safe',\n        'start',\n        'center',\n        'end',\n        'flex-start',\n        'flex-end',\n        'left',\n        'right',\n        'space-between',\n        'space-around',\n        'space-evenly',\n        'stretch'\n      ],\n      (v) => {\n        return { justifyContent: v }\n      }\n    ),\n    align: createVariants(\n      [\n        ...globalValues,\n        'normal',\n        'unsafe',\n        'safe',\n        'center',\n        'start',\n        'end',\n        'self-start',\n        'self-end',\n        'flex-start',\n        'flex-end',\n        'baseline',\n        'first baseline',\n        'last baseline',\n        'stretch'\n      ],\n      (v) => {\n        return { alignItems: v }\n      }\n    ),\n    gap: createThemeVariants('space', { gap: '$key' })\n  }\n})\n\nFlex.displayName = 'Flex'\n"],"names":["createVariants","variants","fn","prev","variant","globalValues","Flex","styled","v","createThemeVariants"],"mappings":"sUAGA,MAAMA,EAAiB,CACrBC,EACAC,IAEOD,EAAS,OACd,CAACE,EAAMC,KAAa,CAAE,GAAGD,EAAM,CAACC,GAAUF,EAAGE,CAAO,CAAE,GACtD,CAAA,CACF,EAGIC,EAAe,CACnB,UACA,UACA,SACA,eACA,OACF,EAYaC,EAAOC,EAAO,MAAO,CAChC,QAAS,OACT,SAAU,CACR,UAAWP,EACT,CAAC,GAAGK,EAAc,MAAO,cAAe,SAAU,gBAAgB,EACjEG,IACQ,CAAE,cAAeA,CAAE,EAE9B,EACA,KAAMR,EACJ,CAAC,GAAGK,EAAc,SAAU,OAAQ,cAAc,EACjDG,IACQ,CAAE,SAAUA,CAAE,EAEzB,EAEA,QAASR,EACP,CACE,GAAGK,EACH,SACA,SACA,OACA,QACA,SACA,MACA,aACA,WACA,OACA,QACA,gBACA,eACA,eACA,SACF,EACCG,IACQ,CAAE,eAAgBA,CAAE,EAE/B,EACA,MAAOR,EACL,CACE,GAAGK,EACH,SACA,SACA,OACA,SACA,QACA,MACA,aACA,WACA,aACA,WACA,WACA,iBACA,gBACA,SACF,EACCG,IACQ,CAAE,WAAYA,CAAE,EAE3B,EACA,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAEDH,EAAK,YAAc"}
+{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const Flex = styled('div', {\n  display: 'flex',\n  variants: {\n    direction: {\n      row: { flexDirection: 'row' },\n      'row-reverse': { flexDirection: 'row-reverse' },\n      column: { flexDirection: 'column' },\n      'column-reverse': { flexDirection: 'column-reverse' },\n      inherit: { flexDirection: 'inherit' },\n      initial: { flexDirection: 'initial' },\n      revert: { flexDirection: 'revert' },\n      'revert-layer': { flexDirection: 'revert-layer' },\n      unset: { flexDirection: 'unset' }\n    },\n    wrap: {\n      nowrap: { flexWrap: 'nowrap' },\n      wrap: { flexWrap: 'wrap' },\n      'wrap-reverse': { flexWrap: 'wrap-reverse' },\n      inherit: { flexWrap: 'inherit' },\n      initial: { flexWrap: 'initial' },\n      revert: { flexWrap: 'revert' },\n      'revert-layer': { flexWrap: 'revert-layer' },\n      unset: { flexWrap: 'unset' }\n    },\n    // Why is both `start` and `flex-start` valid values? Answer: https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/\n    justify: {\n      normal: { justifyContent: 'normal' },\n      unsafe: { justifyContent: 'unsafe' },\n      safe: { justifyContent: 'safe' },\n      start: { justifyContent: 'start' },\n      center: { justifyContent: 'center' },\n      end: { justifyContent: 'end' },\n      'flex-start': { justifyContent: 'flex-start' },\n      'flex-end': { justifyContent: 'flex-end' },\n      left: { justifyContent: 'left' },\n      right: { justifyContent: 'right' },\n      'space-between': { justifyContent: 'space-between' },\n      'space-around': { justifyContent: 'space-around' },\n      'space-evenly': { justifyContent: 'space-evenly' },\n      stretch: { justifyContent: 'stretch' },\n      inherit: { justifyContent: 'inherit' },\n      initial: { justifyContent: 'initial' },\n      revert: { justifyContent: 'revert' },\n      'revert-layer': { justifyContent: 'revert-layer' },\n      unset: { justifyContent: 'unset' }\n    },\n\n    align: {\n      normal: { alignItems: 'normal' },\n      unsafe: { alignItems: 'unsafe' },\n      safe: { alignItems: 'safe' },\n      center: { alignItems: 'center' },\n      start: { alignItems: 'start' },\n      end: { alignItems: 'end' },\n      'self-start': { alignItems: 'self-start' },\n      'self-end': { alignItems: 'self-end' },\n      'flex-start': { alignItems: 'flex-start' },\n      'flex-end': { alignItems: 'flex-end' },\n      baseline: { alignItems: 'baseline' },\n      'first baseline': { alignItems: 'first baseline' },\n      'last baseline': { alignItems: 'last baseline' },\n      stretch: { alignItems: 'stretch' },\n      inherit: { alignItems: 'inherit' },\n      initial: { alignItems: 'initial' },\n      revert: { alignItems: 'revert' },\n      'revert-layer': { alignItems: 'revert-layer' },\n      unset: { alignItems: 'unset' }\n    },\n    gap: {\n      '0': { gap: '$space$0' },\n      '1': { gap: '$space$1' },\n      '2': { gap: '$space$2' },\n      '3': { gap: '$space$3' },\n      '4': { gap: '$space$4' },\n      '24': { gap: '$space$24' },\n      '5': { gap: '$space$5' },\n      '6': { gap: '$space$6' },\n      '7': { gap: '$space$7' },\n      '8': { gap: '$space$8' },\n      '9': { gap: '$space$9' }\n    }\n  }\n})\n\nFlex.displayName = 'Flex'\n"],"names":["Flex","styled"],"mappings":"iDAEaA,EAAOC,EAAO,MAAO,CAChC,QAAS,OACT,SAAU,CACR,UAAW,CACT,IAAK,CAAE,cAAe,KAAM,EAC5B,cAAe,CAAE,cAAe,aAAc,EAC9C,OAAQ,CAAE,cAAe,QAAS,EAClC,iBAAkB,CAAE,cAAe,gBAAiB,EACpD,QAAS,CAAE,cAAe,SAAU,EACpC,QAAS,CAAE,cAAe,SAAU,EACpC,OAAQ,CAAE,cAAe,QAAS,EAClC,eAAgB,CAAE,cAAe,cAAe,EAChD,MAAO,CAAE,cAAe,OAAQ,CAClC,EACA,KAAM,CACJ,OAAQ,CAAE,SAAU,QAAS,EAC7B,KAAM,CAAE,SAAU,MAAO,EACzB,eAAgB,CAAE,SAAU,cAAe,EAC3C,QAAS,CAAE,SAAU,SAAU,EAC/B,QAAS,CAAE,SAAU,SAAU,EAC/B,OAAQ,CAAE,SAAU,QAAS,EAC7B,eAAgB,CAAE,SAAU,cAAe,EAC3C,MAAO,CAAE,SAAU,OAAQ,CAC7B,EAEA,QAAS,CACP,OAAQ,CAAE,eAAgB,QAAS,EACnC,OAAQ,CAAE,eAAgB,QAAS,EACnC,KAAM,CAAE,eAAgB,MAAO,EAC/B,MAAO,CAAE,eAAgB,OAAQ,EACjC,OAAQ,CAAE,eAAgB,QAAS,EACnC,IAAK,CAAE,eAAgB,KAAM,EAC7B,aAAc,CAAE,eAAgB,YAAa,EAC7C,WAAY,CAAE,eAAgB,UAAW,EACzC,KAAM,CAAE,eAAgB,MAAO,EAC/B,MAAO,CAAE,eAAgB,OAAQ,EACjC,gBAAiB,CAAE,eAAgB,eAAgB,EACnD,eAAgB,CAAE,eAAgB,cAAe,EACjD,eAAgB,CAAE,eAAgB,cAAe,EACjD,QAAS,CAAE,eAAgB,SAAU,EACrC,QAAS,CAAE,eAAgB,SAAU,EACrC,QAAS,CAAE,eAAgB,SAAU,EACrC,OAAQ,CAAE,eAAgB,QAAS,EACnC,eAAgB,CAAE,eAAgB,cAAe,EACjD,MAAO,CAAE,eAAgB,OAAQ,CACnC,EAEA,MAAO,CACL,OAAQ,CAAE,WAAY,QAAS,EAC/B,OAAQ,CAAE,WAAY,QAAS,EAC/B,KAAM,CAAE,WAAY,MAAO,EAC3B,OAAQ,CAAE,WAAY,QAAS,EAC/B,MAAO,CAAE,WAAY,OAAQ,EAC7B,IAAK,CAAE,WAAY,KAAM,EACzB,aAAc,CAAE,WAAY,YAAa,EACzC,WAAY,CAAE,WAAY,UAAW,EACrC,aAAc,CAAE,WAAY,YAAa,EACzC,WAAY,CAAE,WAAY,UAAW,EACrC,SAAU,CAAE,WAAY,UAAW,EACnC,iBAAkB,CAAE,WAAY,gBAAiB,EACjD,gBAAiB,CAAE,WAAY,eAAgB,EAC/C,QAAS,CAAE,WAAY,SAAU,EACjC,QAAS,CAAE,WAAY,SAAU,EACjC,QAAS,CAAE,WAAY,SAAU,EACjC,OAAQ,CAAE,WAAY,QAAS,EAC/B,eAAgB,CAAE,WAAY,cAAe,EAC7C,MAAO,CAAE,WAAY,OAAQ,CAC/B,EACA,IAAK,CACH,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,GAAM,CAAE,IAAK,WAAY,EACzB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,CACzB,CACF,CACF,CAAC,EAEDD,EAAK,YAAc"}

package/dist/components/form/Form.d.ts

@@ -25,6 +25,8 @@ declare const StyledForm: import("@atom-learning/stitches-react/types/styled-com
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/grid/Grid.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { CSS } from '../../stitches';
 declare const GridContainer: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
@@ -26,6 +25,8 @@ declare const GridContainer: import("@atom-learning/stitches-react/types/styled-
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -375,11 +376,10 @@ type GridProps = React.ComponentProps<typeof GridContainer> & {
     minItemSize?: string;
     maxItemSize?: string;
 } & {
-    css?: CSS;
     as?: any;
 };
 export declare const Grid: {
-    ({ css, gap, minItemSize, maxItemSize, ...remainingProps }: GridProps): React.JSX.Element;
+    ({ css, style, gap, minItemSize, maxItemSize, ...remainingProps }: GridProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/grid/Grid.js

@@ -1,2 +1,2 @@
-import*as p from"react";import{styled as o}from"../../stitches.js";import{createThemeVariants as s}from"../../utilities/create-theme-variants/createThemeVariants.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const n=o("div",{display:"grid",variants:{gap:s("space",{gap:"$key"})}}),t=({css:i,gap:m=2,minItemSize:e,maxItemSize:a="1fr",...r})=>p.createElement(n,{css:{...e&&{gridTemplateColumns:`repeat(auto-fit, minmax(${e}, ${a}))`},...i},gap:m,...r});t.displayName="Grid";export{t as Grid};
+import*as t from"react";import{styled as c}from"../../stitches.js";const g=c("div",{display:"grid",variants:{gap:{0:{gap:"$space$0"},1:{gap:"$space$1"},2:{gap:"$space$2"},3:{gap:"$space$3"},4:{gap:"$space$4"},24:{gap:"$space$24"},5:{gap:"$space$5"},6:{gap:"$space$6"},7:{gap:"$space$7"},8:{gap:"$space$8"},9:{gap:"$space$9"}}}}),e=({css:p,style:s,gap:i=2,minItemSize:a,maxItemSize:m="1fr",...$})=>t.createElement(g,{style:{...s,"--min-item-size":a,"--max-item-size":m},css:{...a&&{gridTemplateColumns:"repeat(auto-fit, minmax(var(--min-item-size), var(--max-item-size)))"},...p},gap:i,...$});e.displayName="Grid";export{e as Grid};
 //# sourceMappingURL=Grid.js.map

package/dist/components/grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst GridContainer = styled('div', {\n  display: 'grid',\n  variants: {\n    gap: createThemeVariants('space', { gap: '$key' })\n  }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n} & {\n  css?: CSS\n  as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Grid = ({\n  css,\n  gap = 2,\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}: GridProps) => (\n  <GridContainer\n    css={{\n      ...(minItemSize && {\n        gridTemplateColumns: `repeat(auto-fit, minmax(${minItemSize}, ${maxItemSize}))`\n      }),\n      ...(css as any)\n    }}\n    gap={gap}\n    {...remainingProps}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","createThemeVariants","Grid","css","gap","minItemSize","maxItemSize","remainingProps","React"],"mappings":"8VAKA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,QAAS,OACT,SAAU,CACR,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAUYC,EAAO,CAAC,CACnB,IAAAC,EACA,IAAAC,EAAM,EACN,YAAAC,EACA,YAAAC,EAAc,SACXC,CACL,IACEC,EAAA,cAACT,EAAA,CACC,IAAK,CACH,GAAIM,GAAe,CACjB,oBAAqB,2BAA2BA,MAAgBC,KAClE,EACA,GAAIH,CACN,EACA,IAAKC,EACJ,GAAGG,CACN,CAAA,EAGFL,EAAK,YAAc"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst GridContainer = styled('div', {\n  display: 'grid',\n  variants: {\n    gap: {\n      '0': { gap: '$space$0' },\n      '1': { gap: '$space$1' },\n      '2': { gap: '$space$2' },\n      '3': { gap: '$space$3' },\n      '4': { gap: '$space$4' },\n      '24': { gap: '$space$24' },\n      '5': { gap: '$space$5' },\n      '6': { gap: '$space$6' },\n      '7': { gap: '$space$7' },\n      '8': { gap: '$space$8' },\n      '9': { gap: '$space$9' }\n    }\n  }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n} & {\n  as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Grid = ({\n  css,\n  style,\n  gap = 2,\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}: GridProps) => (\n  <GridContainer\n    style={{\n      ...style,\n      '--min-item-size': minItemSize,\n      '--max-item-size': maxItemSize\n    }}\n    css={{\n      ...(minItemSize && {\n        gridTemplateColumns: `repeat(auto-fit, minmax(var(--min-item-size), var(--max-item-size)))`\n      }),\n      ...css\n    }}\n    gap={gap}\n    {...remainingProps}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","Grid","css","style","gap","minItemSize","maxItemSize","remainingProps","React"],"mappings":"mEAIA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,QAAS,OACT,SAAU,CACR,IAAK,CACH,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,GAAM,CAAE,IAAK,WAAY,EACzB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,CACzB,CACF,CACF,CAAC,EASYC,EAAO,CAAC,CACnB,IAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,EACN,YAAAC,EACA,YAAAC,EAAc,SACXC,CACL,IACEC,EAAA,cAACT,EAAA,CACC,MAAO,CACL,GAAGI,EACH,kBAAmBE,EACnB,kBAAmBC,CACrB,EACA,IAAK,CACH,GAAID,GAAe,CACjB,oBAAqB,sEACvB,EACA,GAAGH,CACL,EACA,IAAKE,EACJ,GAAGG,CAAAA,CACN,EAGFN,EAAK,YAAc"}

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

@@ -28,6 +28,8 @@ export declare const StyledHeading: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/heading/Heading.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as i}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t=f("h2",{m:0,variants:{size:{xs:{fontFamily:"$body",fontSize:"$md",lineHeight:1.5,...i(.3864)},sm:{fontFamily:"$body",fontSize:"$lg",lineHeight:1.14,...i(.2078)},md:{fontFamily:"$display",fontSize:"$xl",lineHeight:1.14,letterSpacing:"0.01em",...i(.2114,.2634)},lg:{fontFamily:"$display",fontSize:"$2xl",lineHeight:1.08,letterSpacing:"0.01em",...i(.1405,.2405)},xl:{fontFamily:"$display",fontSize:"$3xl",lineHeight:1.12,...i(.16,.26)},xxl:{fontFamily:"$display",fontSize:"$4xl",lineHeight:1,...i(.1,.2)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}},weight:{medium:{fontWeight:500},bold:{fontWeight:700}}}}),o=e.forwardRef(({size:l="md",weight:n="bold",...m},a)=>e.createElement(t,{ref:a,size:l,weight:n,...m}));o.displayName="Heading";export{o as Heading,t as StyledHeading};
+import*as e from"react";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{capsize as i}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const t=f("h2",{m:0,variants:{size:{xs:{fontFamily:"$body",fontSize:"$md",lineHeight:1.5,...i(.3864)},sm:{fontFamily:"$body",fontSize:"$lg",lineHeight:1.14,...i(.2078)},md:{fontFamily:"$display",fontSize:"$xl",lineHeight:1.14,letterSpacing:"0.01em",...i(.2114,.2634)},lg:{fontFamily:"$display",fontSize:"$2xl",lineHeight:1.08,letterSpacing:"0.01em",...i(.1405,.2405)},xl:{fontFamily:"$display",fontSize:"$3xl",lineHeight:1.12,...i(.16,.26)},xxl:{fontFamily:"$display",fontSize:"$4xl",lineHeight:1,...i(.1,.2)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}},weight:{medium:{fontWeight:500},bold:{fontWeight:700}}}}),o=e.forwardRef(({size:l="md",weight:n="bold",...m},a)=>e.createElement(t,{ref:a,size:l,weight:n,...m}));o.displayName="Heading";export{o as Heading,t as StyledHeading};
 //# sourceMappingURL=Heading.js.map

package/dist/components/icon/Icon.d.ts

@@ -26,6 +26,8 @@ export declare const StyledIcon: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/icon/Icon.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as n}from"../../stitches.js";const i=n("svg",{display:"inline-block",fill:"none",flexShrink:0,stroke:"currentcolor",strokeLinecap:"round",strokeLinejoin:"round",verticalAlign:"middle",variants:{size:{sm:{size:"$1",strokeWidth:"1.5"},md:{size:"$2",strokeWidth:"1.75"},lg:{size:"$3",strokeWidth:"2"}}}}),d=e.forwardRef(({is:r,size:o="md",...s},t)=>e.createElement(i,{size:o,"aria-hidden":"true",...s,as:r,ref:t}));export{d as Icon,i as StyledIcon};
+import*as e from"react";import{styled as n}from"../../stitches.js";const i=n("svg",{display:"inline-block",fill:"none",flexShrink:0,stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",verticalAlign:"middle",variants:{size:{sm:{size:"$1",strokeWidth:"1.5"},md:{size:"$2",strokeWidth:"1.75"},lg:{size:"$3",strokeWidth:"2"}}}}),d=e.forwardRef(({is:r,size:o="md",...s},t)=>e.createElement(i,{size:o,"aria-hidden":"true",...s,as:r,ref:t}));export{d as Icon,i as StyledIcon};
 //# sourceMappingURL=Icon.js.map

package/dist/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\nexport const StyledIcon = styled('svg', {\n  display: 'inline-block',\n  fill: 'none',\n  flexShrink: 0,\n  stroke: 'currentcolor',\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n  verticalAlign: 'middle',\n  variants: {\n    size: {\n      sm: { size: '$1', strokeWidth: '1.5' },\n      md: { size: '$2', strokeWidth: '1.75' },\n      lg: { size: '$3', strokeWidth: '2' }\n    }\n  }\n})\n\ntype IconProps = Override<\n  React.ComponentProps<typeof StyledIcon>,\n  {\n    is: React.FC<React.SVGProps<SVGSVGElement>>\n    as?: never\n  }\n>\n\nexport const Icon: React.ForwardRefExoticComponent<IconProps> =\n  React.forwardRef(({ is: SVG, size = 'md', ...remainingProps }, ref) => (\n    <StyledIcon\n      size={size}\n      aria-hidden=\"true\"\n      {...remainingProps}\n      as={SVG}\n      ref={ref}\n    />\n  ))\n"],"names":["StyledIcon","styled","Icon","React","SVG","size","remainingProps","ref"],"mappings":"mEAKa,MAAAA,EAAaC,EAAO,MAAO,CACtC,QAAS,eACT,KAAM,OACN,WAAY,EACZ,OAAQ,eACR,cAAe,QACf,eAAgB,QAChB,cAAe,SACf,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,KAAM,YAAa,KAAM,EACrC,GAAI,CAAE,KAAM,KAAM,YAAa,MAAO,EACtC,GAAI,CAAE,KAAM,KAAM,YAAa,GAAI,CACrC,CACF,CACF,CAAC,EAUYC,EACXC,EAAM,WAAW,CAAC,CAAE,GAAIC,EAAK,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAC7DJ,EAAA,cAACH,EACC,CAAA,KAAMK,EACN,cAAY,OACX,GAAGC,EACJ,GAAIF,EACJ,IAAKG,EACP,CACD"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\nexport const StyledIcon = styled('svg', {\n  display: 'inline-block',\n  fill: 'none',\n  flexShrink: 0,\n  stroke: 'currentColor',\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n  verticalAlign: 'middle',\n  variants: {\n    size: {\n      sm: { size: '$1', strokeWidth: '1.5' },\n      md: { size: '$2', strokeWidth: '1.75' },\n      lg: { size: '$3', strokeWidth: '2' }\n    }\n  }\n})\n\ntype IconProps = Override<\n  React.ComponentProps<typeof StyledIcon>,\n  {\n    is: React.FC<React.SVGProps<SVGSVGElement>>\n    as?: never\n  }\n>\n\nexport const Icon: React.ForwardRefExoticComponent<IconProps> =\n  React.forwardRef(({ is: SVG, size = 'md', ...remainingProps }, ref) => (\n    <StyledIcon\n      size={size}\n      aria-hidden=\"true\"\n      {...remainingProps}\n      as={SVG}\n      ref={ref}\n    />\n  ))\n"],"names":["StyledIcon","styled","Icon","React","SVG","size","remainingProps","ref"],"mappings":"mEAKa,MAAAA,EAAaC,EAAO,MAAO,CACtC,QAAS,eACT,KAAM,OACN,WAAY,EACZ,OAAQ,eACR,cAAe,QACf,eAAgB,QAChB,cAAe,SACf,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,KAAM,YAAa,KAAM,EACrC,GAAI,CAAE,KAAM,KAAM,YAAa,MAAO,EACtC,GAAI,CAAE,KAAM,KAAM,YAAa,GAAI,CACrC,CACF,CACF,CAAC,EAUYC,EACXC,EAAM,WAAW,CAAC,CAAE,GAAIC,EAAK,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAC7DJ,EAAA,cAACH,EACC,CAAA,KAAMK,EACN,cAAY,OACX,GAAGC,EACJ,GAAIF,EACJ,IAAKG,EACP,CACD"}

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

@@ -26,6 +26,8 @@ export declare const StyledImage: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/inline-message/InlineMessage.config.d.ts

@@ -1,5 +1,3 @@
 import * as React from 'react';
-import type { CSS } from '../../stitches';
 import { InlineMessageTheme } from './InlineMessage.types';
-export declare const INLINE_MESSAGE_THEMES: Record<InlineMessageTheme, CSS>;
 export declare const INLINE_MESSAGE_ICONS: Record<InlineMessageTheme, React.FC<React.SVGProps<SVGSVGElement>>>;

package/dist/components/inline-message/InlineMessage.config.js

@@ -1,2 +1,2 @@
-import{OkCircle as o,Danger as n,Info as r,Error as c}from"@atom-learning/icons";const e={success:{color:"$success"},warning:{color:"$warningText","& svg":{color:"$warningDark"}},info:{color:"$info"},neutral:{color:"$grey800"},error:{color:"$danger"}},s={success:o,warning:n,info:r,neutral:r,error:c};export{s as INLINE_MESSAGE_ICONS,e as INLINE_MESSAGE_THEMES};
+import{OkCircle as o,Danger as n,Info as r,Error as e}from"@atom-learning/icons";const c={success:o,warning:n,info:r,neutral:r,error:e};export{c as INLINE_MESSAGE_ICONS};
 //# sourceMappingURL=InlineMessage.config.js.map

package/dist/components/inline-message/InlineMessage.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.config.js","sources":["../../../src/components/inline-message/InlineMessage.config.ts"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { CSS } from '~/stitches'\n\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nexport const INLINE_MESSAGE_THEMES: Record<InlineMessageTheme, CSS> = {\n  success: { color: '$success' },\n  warning: { color: '$warningText', '& svg': { color: '$warningDark' } },\n  info: { color: '$info' },\n  neutral: { color: '$grey800' },\n  error: { color: '$danger' }\n}\n\nexport const INLINE_MESSAGE_ICONS: Record<\n  InlineMessageTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  success: OkCircle,\n  warning: Danger,\n  info: Info,\n  neutral: Info,\n  error: Error\n}\n"],"names":["INLINE_MESSAGE_THEMES","INLINE_MESSAGE_ICONS","OkCircle","Danger","Info","Error"],"mappings":"iFAOO,MAAMA,EAAyD,CACpE,QAAS,CAAE,MAAO,UAAW,EAC7B,QAAS,CAAE,MAAO,eAAgB,QAAS,CAAE,MAAO,cAAe,CAAE,EACrE,KAAM,CAAE,MAAO,OAAQ,EACvB,QAAS,CAAE,MAAO,UAAW,EAC7B,MAAO,CAAE,MAAO,SAAU,CAC5B,EAEaC,EAGT,CACF,QAASC,EACT,QAASC,EACT,KAAMC,EACN,QAASA,EACT,MAAOC,CACT"}
+{"version":3,"file":"InlineMessage.config.js","sources":["../../../src/components/inline-message/InlineMessage.config.ts"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nexport const INLINE_MESSAGE_ICONS: Record<\n  InlineMessageTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  success: OkCircle,\n  warning: Danger,\n  info: Info,\n  neutral: Info,\n  error: Error\n}\n"],"names":["INLINE_MESSAGE_ICONS","OkCircle","Danger","Info","Error"],"mappings":"iFAKO,MAAMA,EAGT,CACF,QAASC,EACT,QAASC,EACT,KAAMC,EACN,QAASA,EACT,MAAOC,CACT"}

package/dist/components/inline-message/InlineMessage.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { InlineMessageTheme } from './InlineMessage.types';
 declare const InlineMessageContainer: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -30,6 +29,8 @@ declare const InlineMessageContainer: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -375,7 +376,7 @@ declare const InlineMessageContainer: import("@atom-learning/stitches-react/type
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>, {
-    theme?: InlineMessageTheme | undefined;
+    theme?: "info" | "success" | "warning" | "error" | "neutral" | undefined;
 }, {
     sm: string;
     md: string;
@@ -400,6 +401,8 @@ declare const InlineMessageContainer: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/inline-message/InlineMessage.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Flex as a}from"../flex/Flex.js";import{Icon as c}from"../icon/Icon.js";import{Text as i}from"../text/Text.js";import{styled as E}from"../../stitches.js";import{INLINE_MESSAGE_THEMES as p,INLINE_MESSAGE_ICONS as f}from"./InlineMessage.config.js";const l=E(a,{variants:{theme:p}}),I=({css:r,showIcon:t=!0,theme:s="error",size:m="sm",children:o,...n})=>e.createElement(l,{theme:s,css:r,...n},t&&e.createElement(c,{css:{mr:"$2"},size:"sm",is:f[s]}),e.createElement(i,{as:"span",size:m,css:{transform:"translateY($space$0)"}},o));export{I as InlineMessage};
+import*as r from"react";import{Flex as m}from"../flex/Flex.js";import{Icon as a}from"../icon/Icon.js";import{Text as i}from"../text/Text.js";import{styled as l}from"../../stitches.js";import{INLINE_MESSAGE_ICONS as f}from"./InlineMessage.config.js";const p=l(m,{variants:{theme:{success:{color:"$success"},warning:{color:"$warningText","& svg":{color:"$warningDark"}},info:{color:"$info"},neutral:{color:"$grey800"},error:{color:"$danger"}}}}),$=({css:o,showIcon:s=!0,theme:e="error",size:t="sm",children:n,...c})=>r.createElement(p,{theme:e,css:o,...c},s&&r.createElement(a,{css:{mr:"$2"},size:"sm",is:f[e]}),r.createElement(i,{as:"span",size:t,css:{transform:"translateY($space$0)"}},n));export{$ as InlineMessage};
 //# sourceMappingURL=InlineMessage.js.map

package/dist/components/inline-message/InlineMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.js","sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nimport {\n  INLINE_MESSAGE_ICONS,\n  INLINE_MESSAGE_THEMES\n} from './InlineMessage.config'\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled(Flex, {\n  variants: {\n    theme: INLINE_MESSAGE_THEMES\n  }\n})\n\ntype TInlineMessageProps = React.ComponentProps<\n  typeof InlineMessageContainer\n> & {\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  css,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}: TInlineMessageProps) => (\n  <InlineMessageContainer theme={theme} css={css} {...rest}>\n    {showIcon && (\n      <Icon\n        css={{ mr: '$2' }}\n        size=\"sm\"\n        is={INLINE_MESSAGE_ICONS[theme as InlineMessageTheme]}\n      />\n    )}\n    <Text as=\"span\" size={size} css={{ transform: 'translateY($space$0)' }}>\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"names":["InlineMessageContainer","styled","Flex","INLINE_MESSAGE_THEMES","InlineMessage","css","showIcon","theme","size","children","rest","React","Icon","INLINE_MESSAGE_ICONS","Text"],"mappings":"oRAaA,MAAMA,EAAyBC,EAAOC,EAAM,CAC1C,SAAU,CACR,MAAOC,CACT,CACF,CAAC,EASYC,EAAgB,CAAC,CAC5B,IAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IACEC,EAAA,cAACX,EAAA,CAAuB,MAAOO,EAAO,IAAKF,EAAM,GAAGK,CAAAA,EACjDJ,GACCK,EAAA,cAACC,EAAA,CACC,IAAK,CAAE,GAAI,IAAK,EAChB,KAAK,KACL,GAAIC,EAAqBN,EAC3B,CAAA,EAEFI,EAAA,cAACG,EAAA,CAAK,GAAG,OAAO,KAAMN,EAAM,IAAK,CAAE,UAAW,sBAAuB,CAClEC,EAAAA,CACH,CACF"}
+{"version":3,"file":"InlineMessage.js","sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled(Flex, {\n  variants: {\n    theme: {\n      success: { color: '$success' },\n      warning: { color: '$warningText', '& svg': { color: '$warningDark' } },\n      info: { color: '$info' },\n      neutral: { color: '$grey800' },\n      error: { color: '$danger' }\n    }\n  }\n})\n\ntype TInlineMessageProps = React.ComponentProps<\n  typeof InlineMessageContainer\n> & {\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  css,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}: TInlineMessageProps) => (\n  <InlineMessageContainer theme={theme} css={css} {...rest}>\n    {showIcon && (\n      <Icon\n        css={{ mr: '$2' }}\n        size=\"sm\"\n        is={INLINE_MESSAGE_ICONS[theme as InlineMessageTheme]}\n      />\n    )}\n    <Text as=\"span\" size={size} css={{ transform: 'translateY($space$0)' }}>\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"names":["InlineMessageContainer","styled","Flex","InlineMessage","css","showIcon","theme","size","children","rest","React","Icon","INLINE_MESSAGE_ICONS","Text"],"mappings":"yPAUA,MAAMA,EAAyBC,EAAOC,EAAM,CAC1C,SAAU,CACR,MAAO,CACL,QAAS,CAAE,MAAO,UAAW,EAC7B,QAAS,CAAE,MAAO,eAAgB,QAAS,CAAE,MAAO,cAAe,CAAE,EACrE,KAAM,CAAE,MAAO,OAAQ,EACvB,QAAS,CAAE,MAAO,UAAW,EAC7B,MAAO,CAAE,MAAO,SAAU,CAC5B,CACF,CACF,CAAC,EASYC,EAAgB,CAAC,CAC5B,IAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IACEC,EAAA,cAACV,EAAA,CAAuB,MAAOM,EAAO,IAAKF,EAAM,GAAGK,CAAAA,EACjDJ,GACCK,EAAA,cAACC,EAAA,CACC,IAAK,CAAE,GAAI,IAAK,EAChB,KAAK,KACL,GAAIC,EAAqBN,EAC3B,CAAA,EAEFI,EAAA,cAACG,EAAA,CAAK,GAAG,OAAO,KAAMN,EAAM,IAAK,CAAE,UAAW,sBAAuB,CAClEC,EAAAA,CACH,CACF"}

package/dist/components/input/Input.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Text } from '../text';
 export declare const InputBackground: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -30,6 +30,8 @@ export declare const InputBackground: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -403,6 +405,8 @@ export declare const InputBackground: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -772,6 +776,8 @@ declare const StyledInputText: import("@atom-learning/stitches-react/types/style
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/input/Input.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as b}from"../../utilities/style/disabledStyle.js";import{Flex as g}from"../flex/Flex.js";import{Text as h}from"../text/Text.js";const i=m(g,{color:"$grey1000",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},variants:{appearance:{standard:{background:"white",border:"1px solid $grey800",borderRadius:"$1","&:focus-within":{borderColor:"$blue800"}},modern:{background:"$grey100",border:"none",borderRadius:"$1","&:focus-within":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}},size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:b},state:{error:{}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{bg:"$dangerLight","&:focus-within":{outlineColor:"$danger"}}}]});i.displayName="InputBackground";const f=m.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(h,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),x={sm:"sm",md:"md",lg:"md",xl:"lg"},p=r.forwardRef(({type:e="text",css:a,size:o,...n},t)=>{const s=r.useMemo(()=>u(o,d=>x[d]),[o]);return r.createElement(f,{ref:t,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:s,...n})});p.displayName="InputText";const c=r.forwardRef(({className:e,size:a="md",appearance:o="standard",state:n,disabled:t,css:s,...d},l)=>r.createElement(i,{size:a,appearance:o,disabled:t,state:n,css:s,className:e},r.createElement(p,{size:a,ref:l,disabled:t,...d})));c.displayName="Input";export{c as Input,i as InputBackground,p as InputText};
+import*as r from"react";import{styled as l}from"../../stitches.js";import{overrideStitchesVariantValue as m}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{Flex as b}from"../flex/Flex.js";import{Text as g}from"../text/Text.js";const i=l(b,{color:"$grey1000",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},variants:{appearance:{standard:{background:"white",border:"1px solid $grey800",borderRadius:"$1","&:focus-within":{borderColor:"$blue800"}},modern:{background:"$grey100",border:"none",borderRadius:"$1","&:focus-within":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}},size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:{opacity:.3,cursor:"not-allowed"}},state:{error:{}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{bg:"$dangerLight","&:focus-within":{outlineColor:"$danger"}}}]});i.displayName="InputBackground";const h=l.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(g,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),f={sm:"sm",md:"md",lg:"md",xl:"lg"},c=r.forwardRef(({type:e="text",css:t,size:o,...n},a)=>{const s=r.useMemo(()=>m(o,d=>f[d]),[o]);return r.createElement(h,{ref:a,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:s,...n})});c.displayName="InputText";const u=r.forwardRef(({className:e,size:t="md",appearance:o="standard",state:n,disabled:a,css:s,...d},p)=>r.createElement(i,{size:t,appearance:o,disabled:a,state:n,css:s,className:e},r.createElement(c,{size:t,ref:p,disabled:a,...d})));u.displayName="Input";export{u as Input,i as InputBackground,c as InputText};
 //# sourceMappingURL=Input.js.map