npm - @atom-learning/components - Versions diffs - 5.11.0 → 5.12.1 - Mend

@atom-learning/components 5.11.0 → 5.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (312) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"version":3,"file":"DropdownMenuItem.js","sources":["../../../src/components/dropdown-menu/DropdownMenuItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\n\nexport const itemStyles = {\n alignItems: 'center',\n color: '$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/DropdownMenuTrigger.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"version":3,"file":"DropdownMenuTrigger.js","sources":["../../../src/components/dropdown-menu/DropdownMenuTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\n\nexport const DropdownMenuTrigger = styled(Trigger, {\n '&[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 CHANGED Viewed

@@ -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;

package/dist/components/field-wrapper/FieldWrapper.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ValidationOptions } from '../../components/form';
 import type { CSS } from '../../stitches';
+import { type LabelProps } from '../label/Label';
 export type FieldWrapperProps = {
     css?: CSS;
     error?: string;
@@ -14,12 +15,13 @@ export type FieldWrapperProps = {
     description?: string;
     required?: boolean;
     hideLabel?: boolean;
+    appearance?: LabelProps['appearance'];
 };
 export type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {
     name: string;
     validation?: ValidationOptions;
 };
 export declare const FieldWrapper: {
-    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
+    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel, appearance }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
     displayName: string;
 };

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldWrapper.js","sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { ValidationOptions } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { Link } from '~/components/link'\nimport type { CSS } from '~/stitches'\n\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n css?: CSS\n error?: string\n fieldId: string\n label: string\n prompt?: { link?: string; label: string; onClick?: () => void }\n description?: string\n required?: boolean\n hideLabel?: boolean\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n name: string\n validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n css,\n children,\n error,\n fieldId,\n label,\n prompt,\n description,\n required,\n hideLabel\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n return (\n <Box css={css}>\n <LabelContainer\n css={{\n justifyContent: 'space-between',\n alignItems: 'center',\n mb: '$3'\n }}\n >\n <Label htmlFor={fieldId} required={required}>\n {label}\n </Label>\n {prompt && (\n <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n {prompt.label}\n </Link>\n )}\n </LabelContainer>\n {description && (\n <Description css={{ mb: '$3' }}>{description}</Description>\n )}\n {children}\n {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n </Box>\n )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","css","children","error","fieldId","label","prompt","description","required","hideLabel","LabelContainer","VisuallyHidden","Flex","React","Box","Label","Link","Description","InlineMessage"],"mappings":"~~6VA6BO~~,~~MAAMA~~,EAAe,CAAC,CAC3B,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAAkD,CAChD,MAAMC,~~EAAiBD~~,~~EAAYE~~,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAACC,EAAA,CAAI,~~IAAKb~~,CAAAA,~~EACRY~~,EAAA,cAACH,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,WAAY,SACZ,GAAI,IACN,~~CAAA~~,~~EAEAG~~,EAAA,cAACE,EAAA,CAAM,~~QAASX~~,EAAS,SAAUI,~~CAChCH~~,~~EAAAA~~,CACH,EACCC,~~GACCO~~,EAAA,cAACG,EAAA,CAAK,~~KAAMV~~,GAAA,~~KAAA~~,OAAAA,EAAQ,KAAM,QAASA,GAAA,~~YAAAA~~,EAAQ,QAAS,KAAK,~~IAAA~~,~~EACtDA~~,EAAO,KACV,CAEJ,EACCC,~~GACCM~~,EAAA,cAACI,EAAA,CAAY,IAAK,CAAE,GAAI,IAAK,~~GAAIV~~,CAAY,EAE9CL,EACAC,~~GAASU~~,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,~~CAAA~~,~~EAAIf,~~CAAM,CACrD,CAEJ,EAEAH,EAAa,YAAc"}
1	+ {"version":3,"file":"FieldWrapper.js","sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { ValidationOptions } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { Link } from '~/components/link'\nimport type { CSS } from '~/stitches'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n css?: CSS\n error?: string\n fieldId: string\n label: string\n prompt?: { link?: string; label: string; onClick?: () => void }\n description?: string\n required?: boolean\n hideLabel?: boolean\n appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n name: string\n validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n css,\n children,\n error,\n fieldId,\n label,\n prompt,\n description,\n required,\n hideLabel,\n appearance\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n return (\n <Box css={css}>\n <LabelContainer\n css={{\n justifyContent: 'space-between',\n alignItems: 'center',\n mb: '$3'\n }}\n >\n <Label htmlFor={fieldId} required={required} appearance={appearance}>\n {label}\n </Label>\n {prompt && (\n <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n {prompt.label}\n </Link>\n )}\n </LabelContainer>\n {description && (\n <Description css={{ mb: '$3' }}>{description}</Description>\n )}\n {children}\n {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n </Box>\n )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","css","children","error","fieldId","label","prompt","description","required","hideLabel","appearance","LabelContainer","VisuallyHidden","Flex","React","Box","Label","Link","Description","InlineMessage"],"mappings":"6VA+Ba,MAAAA,EAAe,CAAC,CAC3B,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,CACF,IAAkD,CAChD,MAAMC,EAAiBF,EAAYG,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAACC,EAAA,CAAI,IAAKd,CAAAA,EACRa,EAAA,cAACH,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,WAAY,SACZ,GAAI,IACN,CAEAG,EAAAA,EAAA,cAACE,EAAA,CAAM,QAASZ,EAAS,SAAUI,EAAU,WAAYE,CAAAA,EACtDL,CACH,EACCC,GACCQ,EAAA,cAACG,EAAA,CAAK,KAAMX,GAAA,KAAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,KAAAA,OAAAA,EAAQ,QAAS,KAAK,IACtDA,EAAAA,EAAO,KACV,CAEJ,EACCC,GACCO,EAAA,cAACI,EAAA,CAAY,IAAK,CAAE,GAAI,IAAK,CAAIX,EAAAA,CAAY,EAE9CL,EACAC,GAASW,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,GAAIhB,CAAM,CACrD,CAEJ,EAEAH,EAAa,YAAc"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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: '$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 CHANGED Viewed

@@ -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;

package/dist/components/flex/Flex.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -1,5 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import type { DefaultValues, FieldValues, Mode, SubmitErrorHandler, SubmitHandler, UseFormMethods } from 'react-hook-form';
+import { type FormCustomContextType } from './useFormCustomContext';
 declare const StyledForm: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"form", {}, {
     sm: string;
     md: string;
@@ -378,7 +379,7 @@ interface FormProps<TFormData extends FieldValues> extends StyledFormProps {
     children: React.ReactNode | ((methods: UseFormMethods<TFormData>) => React.ReactNode);
 }
 export declare const Form: {
-    <TFormData extends FieldValues>(props: FormProps<TFormData>): React.JSX.Element;
+    <TFormData extends FieldValues>(props: FormProps<TFormData> & FormCustomContextType): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/form/Form.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import r from"react";import{useForm as u,FormProvider as f}from"react-hook-form";import{styled as s}from"../../stitches.js";const c=s("form",{}),t=m=>{const{children:o,defaultValues:a,validationMode:l="onBlur",onSubmit:n,onError:i,...d}=m,e=u({defaultValues:a,mode:l});return r.createElement(f,{...e},r.createElement(c,{"aria-label":"form",onSubmit:e.handleSubmit(n,i),...d},typeof o=="function"?o(e):o))};t.displayName="Form";export{t as Form};
+import*as r from"react";import{useForm as f,FormProvider as p}from"react-hook-form";import{styled as s}from"../../stitches.js";import{FormCustomContext as c}from"./useFormCustomContext.js";const F=s("form",{}),t=m=>{const{children:e,defaultValues:a,validationMode:n="onBlur",onSubmit:l,onError:i,appearance:u,...d}=m,o=f({defaultValues:a,mode:n});return r.createElement(p,{...o},r.createElement(c.Provider,{value:{appearance:u}},r.createElement(F,{"aria-label":"form",onSubmit:o.handleSubmit(l,i),...d},typeof e=="function"?e(o):e)))};t.displayName="Form";export{t as Form};
 //# sourceMappingURL=Form.js.map

package/dist/components/form/Form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport { styled } from '~/stitches'\n\nconst StyledForm = styled('form', {})\n\ntype StyledFormProps = Omit<\n React.ComponentPropsWithoutRef<typeof StyledForm>,\n 'onSubmit' \| 'onError'\n>\n\ninterface FormProps<TFormData extends FieldValues> extends StyledFormProps {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n children:\n \| React.ReactNode\n \| ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData>\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <StyledForm\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </StyledForm>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","Form","props","children","defaultValues","validationMode","onSubmit","onError","rest","methods","useForm","React","FormProvider"],"mappings":"~~4HAaA~~,MAAMA,EAAaC,EAAO,OAAQ,CAAA,~~CAAE,~~EAiBvBC,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,KACGC,CACL,~~EAAIN~~,~~EAEEO~~,EAAUC,EAAmB,CACjC,~~cAAAN~~,EACA,KAAMC,CACR,CAAC,EAED,~~OACEM~~,EAAA,cAACC,EAAA,CAAc,GAAGH,~~CAAAA~~,~~EAChBE~~,EAAA,~~cAACZ~~,EAAA,CACC,aAAW,OACX,~~SAAUU~~,EAAQ,~~aAAaH~~,EAAUC,CAAO,EAC/C,~~GAAGC~~,~~GAEH~~,~~OAAOL~~,GAAa,WAAaA,~~EAASM~~,CAAO,~~EAAIN~~,CACxD,CACF,CAEJ,EAEAF,EAAK,YAAc"}
1	+ {"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport { styled } from '~/stitches'\n\nimport {\n FormCustomContext,\n type FormCustomContextType\n} from './useFormCustomContext'\n\nconst StyledForm = styled('form', {})\n\ntype StyledFormProps = Omit<\n React.ComponentPropsWithoutRef<typeof StyledForm>,\n 'onSubmit' \| 'onError'\n>\n\ninterface FormProps<TFormData extends FieldValues> extends StyledFormProps {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n children:\n \| React.ReactNode\n \| ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData> & FormCustomContextType\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n appearance,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <FormCustomContext.Provider value={{ appearance }}>\n <StyledForm\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </StyledForm>\n </FormCustomContext.Provider>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","Form","props","children","defaultValues","validationMode","onSubmit","onError","appearance","rest","methods","useForm","React","FormProvider","FormCustomContext"],"mappings":"6LAkBA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,CAAA,EAiBvBC,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,EACA,WAAAC,KACGC,CACL,EAAIP,EAEEQ,EAAUC,EAAmB,CACjC,cAAAP,EACA,KAAMC,CACR,CAAC,EAED,OACEO,EAAA,cAACC,EAAA,CAAc,GAAGH,GAChBE,EAAA,cAACE,EAAkB,SAAlB,CAA2B,MAAO,CAAE,WAAAN,CAAW,CAAA,EAC9CI,EAAA,cAACb,EAAA,CACC,aAAW,OACX,SAAUW,EAAQ,aAAaJ,EAAUC,CAAO,EAC/C,GAAGE,CAEH,EAAA,OAAON,GAAa,WAAaA,EAASO,CAAO,EAAIP,CACxD,CACF,CACF,CAEJ,EAEAF,EAAK,YAAc"}

package/dist/components/form/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export { Form } from './Form';
 export type { ValidationOptions } from './validation';
 export { useFieldError } from './useFieldError';
+export { useFormCustomContext } from './useFormCustomContext';

package/dist/components/form/useFormCustomContext.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { InputField } from '../input-field';
+export type FormCustomContextType = {
+    appearance?: React.ComponentProps<typeof InputField>['appearance'];
+} | undefined;
+export declare const FormCustomContext: React.Context<FormCustomContextType>;
+export declare const useFormCustomContext: () => FormCustomContextType;

package/dist/components/form/useFormCustomContext.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import*as t from"react";const e=t.createContext({appearance:"standard"}),o=()=>t.useContext(e);export{e as FormCustomContext,o as useFormCustomContext};
2	+ //# sourceMappingURL=useFormCustomContext.js.map

package/dist/components/form/useFormCustomContext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useFormCustomContext.js","sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { InputField } from '../input-field'\n\nexport type FormCustomContextType =\n | {\n appearance?: React.ComponentProps<typeof InputField>['appearance']\n }\n | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"names":["FormCustomContext","React","useFormCustomContext"],"mappings":"wBAUa,MAAAA,EAAoBC,EAAM,cAAqC,CAC1E,WAAY,UACd,CAAC,EAEYC,EAAuB,IAAMD,EAAM,WAAWD,CAAiB"}

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

@@ -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;
 }, {
@@ -375,11 +374,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -3,6 +3,7 @@ import type { Override } from '../../utilities';
 export declare const StyledHeading: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"h2", {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined;
     noCapsize?: boolean | "true" | undefined;
+    weight?: "bold" | "medium" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/heading/Heading.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as m}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=m("h2",{fontWeight:700,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:"$body",fontSize:"$xl",lineHeight:1.14,...i(.2078)},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"}}}}}),o=e.forwardRef(({size:n="md",...l},a)=>e.createElement(t,{ref:a,size:n,...l}));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/heading/Heading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const StyledHeading = styled('h2', {\n ~~fontWeight: 700,\n~~ m: 0,\n variants: {\n size: {\n xs: {\n fontFamily: '$body',\n fontSize: '$md',\n lineHeight: 1.5,\n ...capsize(0.3864)\n },\n sm: {\n fontFamily: '$body',\n fontSize: '$lg',\n lineHeight: 1.14,\n ...capsize(0.2078)\n },\n md: {\n fontFamily: '$~~body~~',\n fontSize: '$xl',\n lineHeight: 1.14,\n ...capsize(0.~~2078~~)\n },\n lg: {\n fontFamily: '$display',\n fontSize: '$2xl',\n lineHeight: 1.08,\n letterSpacing: '0.01em',\n ...capsize(0.1405, 0.2405)\n },\n xl: {\n fontFamily: '$display',\n fontSize: '$3xl',\n lineHeight: 1.12,\n ...capsize(0.16, 0.26)\n },\n xxl: {\n fontFamily: '$display',\n fontSize: '$4xl',\n lineHeight: 1,\n ...capsize(0.1, 0.2)\n }\n },\n noCapsize: {\n true: {\n '&::before, &::after': { display: 'none !important' }\n }\n }\n }\n})\n\nexport type HeadingProps = Override<\n React.ComponentProps<typeof StyledHeading>,\n {\n as?:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| React.ComponentType\n \| React.ElementType\n }\n>\n\nexport const Heading: React.ForwardRefExoticComponent<HeadingProps> =\n React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n <StyledHeading ref={ref} size={size} {...remainingProps} />\n ))\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","capsize","Heading","React","size","remainingProps","ref"],"mappings":"~~sTAMO~~,~~MAAMA,~~EAAgBC,EAAO,KAAM,CACxC,~~WAAY,IACZ,~~EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,~~QACZ~~,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,~~CACnB~~,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,IAAM,GAAI,CACvB,EACA,IAAK,CACH,WAAY,WACZ,SAAU,OACV,WAAY,EACZ,GAAGA,EAAQ,GAAK,EAAG,CACrB,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,~~WAAW~~,CAAC,CAAE,KAAAC,EAAO,~~QAASC~~,CAAe,EAAGC,~~IACpDH~~,EAAA,cAACJ,~~EAAc~~,~~CAAA~~,~~IAAKO~~,~~EAAK~~,~~KAAMF~~,~~EAAO~~,GAAGC,~~CAAAA~~,~~CAAgB~~,~~CAC1D~~,~~EAEHH,~~EAAQ,YAAc"}
1	+ {"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const StyledHeading = styled('h2', {\n m: 0,\n variants: {\n size: {\n xs: {\n fontFamily: '$body',\n fontSize: '$md',\n lineHeight: 1.5,\n ...capsize(0.3864)\n },\n sm: {\n fontFamily: '$body',\n fontSize: '$lg',\n lineHeight: 1.14,\n ...capsize(0.2078)\n },\n md: {\n fontFamily: '$display',\n fontSize: '$xl',\n lineHeight: 1.14,\n letterSpacing: '0.01em',\n ...capsize(0.2114, 0.2634)\n },\n lg: {\n fontFamily: '$display',\n fontSize: '$2xl',\n lineHeight: 1.08,\n letterSpacing: '0.01em',\n ...capsize(0.1405, 0.2405)\n },\n xl: {\n fontFamily: '$display',\n fontSize: '$3xl',\n lineHeight: 1.12,\n ...capsize(0.16, 0.26)\n },\n xxl: {\n fontFamily: '$display',\n fontSize: '$4xl',\n lineHeight: 1,\n ...capsize(0.1, 0.2)\n }\n },\n noCapsize: {\n true: {\n '&::before, &::after': { display: 'none !important' }\n }\n },\n weight: {\n medium: { fontWeight: 500 },\n bold: { fontWeight: 700 }\n }\n }\n})\n\nexport type HeadingProps = Override<\n React.ComponentProps<typeof StyledHeading>,\n {\n as?:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| React.ComponentType\n \| React.ElementType\n }\n>\n\nexport const Heading: React.ForwardRefExoticComponent<HeadingProps> =\n React.forwardRef(\n ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n <StyledHeading\n ref={ref}\n size={size}\n weight={weight}\n {...remainingProps}\n />\n )\n )\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","capsize","Heading","React","size","weight","remainingProps","ref"],"mappings":"4TAMaA,EAAgBC,EAAO,KAAM,CACxC,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,WACZ,SAAU,MACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,IAAM,GAAI,CACvB,EACA,IAAK,CACH,WAAY,WACZ,SAAU,OACV,WAAY,EACZ,GAAGA,EAAQ,GAAK,EAAG,CACrB,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,EACA,OAAQ,CACN,OAAQ,CAAE,WAAY,GAAI,EAC1B,KAAM,CAAE,WAAY,GAAI,CAC1B,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,WACJ,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,UAAWC,CAAe,EAAGC,IACpDJ,EAAA,cAACJ,GACC,IAAKQ,EACL,KAAMH,EACN,OAAQC,EACP,GAAGC,EACN,CAEJ,EAEFJ,EAAQ,YAAc"}

package/dist/components/icon/Icon.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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"}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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;
@@ -375,7 +374,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;

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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;
@@ -375,6 +375,7 @@ export declare const InputBackground: import("@atom-learning/stitches-react/type
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>, {
+    appearance?: "standard" | "modern" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | undefined;
     disabled?: boolean | "true" | undefined;
     state?: "error" | undefined;
@@ -1123,9 +1124,10 @@ export type InputTextProps = Omit<React.ComponentProps<typeof StyledInputText>,
 };
 export declare const InputText: React.ForwardRefExoticComponent<InputTextProps>;
 type InputBackgroundProps = React.ComponentProps<typeof InputBackground>;
-export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | 'state'> & {
+export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | 'state' | 'appearance'> & {
     size?: InputBackgroundProps['size'];
     state?: InputBackgroundProps['state'];
+    appearance?: InputBackgroundProps['appearance'];
 };
 export declare const Input: React.ForwardRefExoticComponent<InputProps>;
 export {};

package/dist/components/input/Input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as l}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 c}from"../../utilities/style/disabledStyle.js";import{Flex as b}from"../flex/Flex.js";import{Text as g}from"../text/Text.js";const d=l(b,{background:"white",color:"$grey1000",border:"1px solid $grey800",borderRadius:"$0",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&:focus-within":{borderColor:"$blue800"},variants:{size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:c},state:{error:{borderColor:"$danger"}}}});d.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"},m=r.forwardRef(({type:e="text",css:s,size:o,...t},n)=>{const i=r.useMemo(()=>u(o,a=>f[a]),[o]);return r.createElement(h,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:i,...t})});m.displayName="InputText";const p=r.forwardRef(({className:e,size:s="md",state:o,disabled:t,css:n,...i},a)=>r.createElement(d,{size:s,disabled:t,state:o,css:n,className:e},r.createElement(m,{size:s,ref:a,disabled:t,...i})));p.displayName="Input";export{p as Input,d as InputBackground,m 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