@atom-learning/components 3.12.4 → 3.12.6

package/dist/components/empty-state/EmptyStateImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateImage.js","sources":["../../../src/components/empty-state/EmptyStateImage.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Image } from '~/components/image'\nimport { styled } from '~/stitches'\n\nconst StyledEmptyStateImage = styled(Image, {\n  variants: {\n    size: {\n      xs: {\n        maxWidth: '56px',\n        maxHeight: '32px',\n        mb: '$4'\n      },\n      sm: {\n        maxWidth: '84px',\n        maxHeight: '48px',\n        mb: '$4'\n      },\n      md: {\n        maxWidth: '126px',\n        maxHeight: '72px',\n        mb: '$4'\n      },\n      lg: {\n        maxWidth: '190px',\n        maxHeight: '142px',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        maxWidth: '285px',\n        maxHeight: '213px',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage> &\n  React.ComponentProps<typeof Image>\n\nexport const EmptyStateImage: React.FC<EmptyStateImageProps> = (props) => (\n  <StyledEmptyStateImage {...props} />\n)\n"],"names":["StyledEmptyStateImage","styled","Image","EmptyStateImage","props","React"],"mappings":"0GAKA,MAAMA,EAAwBC,EAAOC,EAAO,CAC1C,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,CACF,CACF,CACF,CAAC,EAKYC,EAAmDC,GAC9DC,EAAA,cAACL,EAAA,CAAuB,GAAGI,CAAO,CAAA"}
+{"version":3,"file":"EmptyStateImage.js","sources":["../../../src/components/empty-state/EmptyStateImage.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Image } from '~/components/image'\nimport { styled } from '~/stitches'\n\nconst StyledEmptyStateImage = styled(Image, {\n  variants: {\n    size: {\n      xs: {\n        maxWidth: '56px',\n        maxHeight: '32px',\n        mb: '$4'\n      },\n      sm: {\n        maxWidth: '84px',\n        maxHeight: '48px',\n        mb: '$4'\n      },\n      md: {\n        maxWidth: '126px',\n        maxHeight: '72px',\n        mb: '$4'\n      },\n      lg: {\n        maxWidth: '190px',\n        maxHeight: '142px',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        maxWidth: '285px',\n        maxHeight: '213px',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage> &\n  React.ComponentProps<typeof Image>\n\nexport const EmptyStateImage = (props: EmptyStateImageProps) => (\n  <StyledEmptyStateImage {...props} />\n)\n"],"names":["StyledEmptyStateImage","styled","Image","EmptyStateImage","props","React"],"mappings":"0GAKA,MAAMA,EAAwBC,EAAOC,EAAO,CAC1C,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,CACF,CACF,CACF,CAAC,EAKYC,EAAmBC,GAC9BC,EAAA,cAACL,EAAA,CAAuB,GAAGI,CAAO,CAAA"}

package/dist/components/field-wrapper/FieldDescription.d.ts

@@ -3,5 +3,5 @@ import type { CSS } from '../../stitches';
 declare type DescriptionProps = {
     css?: CSS;
 };
-export declare const Description: React.FC<DescriptionProps>;
+export declare const Description: ({ children, css }: React.PropsWithChildren<DescriptionProps>) => JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.js","sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport type { CSS } from '~/stitches'\n\ntype DescriptionProps = {\n  css?: CSS\n}\n\nexport const Description: React.FC<DescriptionProps> = ({ children, css }) => (\n  <Text size=\"sm\" css={{ color: '$tonal300', maxWidth: '80ch', ...css }}>\n    {children}\n  </Text>\n)\n"],"names":["Description","children","css","React","Text"],"mappings":"+DASa,MAAAA,EAA0C,CAAC,CAAE,SAAAC,EAAU,IAAAC,CAAI,IACtEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,MAAO,YAAa,SAAU,OAAQ,GAAGF,CAAI,GACjED,CACH"}
+{"version":3,"file":"FieldDescription.js","sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport type { CSS } from '~/stitches'\n\ntype DescriptionProps = {\n  css?: CSS\n}\n\nexport const Description = ({\n  children,\n  css\n}: React.PropsWithChildren<DescriptionProps>) => (\n  <Text size=\"sm\" css={{ color: '$tonal300', maxWidth: '80ch', ...css }}>\n    {children}\n  </Text>\n)\n"],"names":["Description","children","css","React","Text"],"mappings":"+DASa,MAAAA,EAAc,CAAC,CAC1B,SAAAC,EACA,IAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,MAAO,YAAa,SAAU,OAAQ,GAAGF,CAAI,GACjED,CACH"}

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

@@ -19,4 +19,7 @@ export declare type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'
     name: string;
     validation?: ValidationOptions;
 };
-export declare const FieldWrapper: React.FC<FieldWrapperProps>;
+export declare const FieldWrapper: {
+    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel }: React.PropsWithChildren<FieldWrapperProps>): JSX.Element;
+    displayName: string;
+};

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

@@ -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:s,label:n,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:s,required:c},n),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 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};
 //# sourceMappingURL=FieldWrapper.js.map

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

@@ -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: React.FC<FieldWrapperProps> = ({\n  css,\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel\n}) => {\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,EAA4C,CAAC,CACxD,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAAM,CACJ,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"}
+{"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"}

package/dist/components/field-wrapper/InlineFieldWrapper.d.ts

@@ -9,5 +9,8 @@ declare type InlineFieldWrapperProps = {
     direction?: 'row' | 'reverse';
     description?: string;
 };
-export declare const InlineFieldWrapper: React.FC<InlineFieldWrapperProps>;
+export declare const InlineFieldWrapper: {
+    ({ align, children, css, description, direction, error, label, required }: React.PropsWithChildren<InlineFieldWrapperProps>): JSX.Element;
+    displayName: string;
+};
 export {};

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: React.FC<InlineFieldWrapperProps> = ({\n  align = 'start',\n  children,\n  css,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}) => (\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,EAAwD,CAAC,CACpE,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' : '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"}

package/dist/components/file-input/FileInput.d.ts

@@ -5,4 +5,7 @@ export declare type FileInputProps = React.ComponentProps<typeof Button> & {
     accept?: string;
     multiple?: boolean;
 };
-export declare const FileInput: React.FC<FileInputProps>;
+export declare const FileInput: {
+    ({ accept, children, multiple, onFileSelect, ...rest }: FileInputProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/file-input/FileInput.js

@@ -1,2 +1,2 @@
-import{Upload as c}from"@atom-learning/icons";import*as e from"react";import{Button as s}from"../button/Button.js";import{Icon as u}from"../icon/Icon.js";const t=({accept:l,children:i,multiple:n=!1,onFileSelect:o,...r})=>{const p=a=>{const{files:m}=a.target;o(m)};return e.createElement(s,{as:"label",...r},e.createElement(u,{is:c}),i,e.createElement("input",{type:"file",onChange:p,accept:l,multiple:n,hidden:!0}))};t.displayName="FileInput";export{t as FileInput};
+import{Upload as c}from"@atom-learning/icons";import*as e from"react";import{Button as s}from"../button/Button.js";import{Icon as u}from"../icon/Icon.js";const t=({accept:l,children:i,multiple:n=!1,onFileSelect:o,...r})=>{const p=m=>{const{files:a}=m.target;o(a)};return e.createElement(s,{as:"label",...r},e.createElement(u,{is:c}),i,e.createElement("input",{type:"file",onChange:p,accept:l,multiple:n,hidden:!0}))};t.displayName="FileInput";export{t as FileInput};
 //# sourceMappingURL=FileInput.js.map

package/dist/components/file-input/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\n\nexport type FileInputProps = React.ComponentProps<typeof Button> & {\n  onFileSelect: (selection: FileList | null) => void\n  accept?: string\n  multiple?: boolean\n}\n\nexport const FileInput: React.FC<FileInputProps> = ({\n  accept,\n  children,\n  multiple = false,\n  onFileSelect,\n  ...rest\n}) => {\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { files } = event.target\n\n    onFileSelect(files)\n  }\n\n  return (\n    <Button as=\"label\" {...rest}>\n      <Icon is={Upload} />\n      {children}\n      <input\n        type=\"file\"\n        onChange={handleFileSelect}\n        accept={accept}\n        multiple={multiple}\n        hidden\n      />\n    </Button>\n  )\n}\n\nFileInput.displayName = 'FileInput'\n"],"names":["FileInput","accept","children","multiple","onFileSelect","rest","handleFileSelect","event","files","React","Button","Icon","Upload"],"mappings":"0JAYO,MAAMA,EAAsC,CAAC,CAClD,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,KACGC,CACL,IAAM,CACJ,MAAMC,EAAoBC,GAA+C,CACvE,KAAM,CAAE,MAAAC,CAAM,EAAID,EAAM,OAExBH,EAAaI,CAAK,CACpB,EAEA,OACEC,EAAA,cAACC,EAAA,CAAO,GAAG,QAAS,GAAGL,CAAAA,EACrBI,EAAA,cAACE,EAAA,CAAK,GAAIC,CAAAA,CAAQ,EACjBV,EACDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,SAAUH,EACV,OAAQL,EACR,SAAUE,EACV,OAAM,EAAA,CACR,CACF,CAEJ,EAEAH,EAAU,YAAc"}
+{"version":3,"file":"FileInput.js","sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\n\nexport type FileInputProps = React.ComponentProps<typeof Button> & {\n  onFileSelect: (selection: FileList | null) => void\n  accept?: string\n  multiple?: boolean\n}\n\nexport const FileInput = ({\n  accept,\n  children,\n  multiple = false,\n  onFileSelect,\n  ...rest\n}: FileInputProps) => {\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { files } = event.target\n\n    onFileSelect(files)\n  }\n\n  return (\n    <Button as=\"label\" {...rest}>\n      <Icon is={Upload} />\n      {children}\n      <input\n        type=\"file\"\n        onChange={handleFileSelect}\n        accept={accept}\n        multiple={multiple}\n        hidden\n      />\n    </Button>\n  )\n}\n\nFileInput.displayName = 'FileInput'\n"],"names":["FileInput","accept","children","multiple","onFileSelect","rest","handleFileSelect","event","files","React","Button","Icon","Upload"],"mappings":"0JAYO,MAAMA,EAAY,CAAC,CACxB,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,KACGC,CACL,IAAsB,CACpB,MAAMC,EAAoBC,GAA+C,CACvE,KAAM,CAAE,MAAAC,CAAM,EAAID,EAAM,OAExBH,EAAaI,CAAK,CACpB,EAEA,OACEC,EAAA,cAACC,EAAA,CAAO,GAAG,QAAS,GAAGL,CAAAA,EACrBI,EAAA,cAACE,EAAA,CAAK,GAAIC,CAAAA,CAAQ,EACjBV,EACDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,SAAUH,EACV,OAAQL,EACR,SAAUE,EACV,OAAM,EAAA,CACR,CACF,CAEJ,EAEAH,EAAU,YAAc"}

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

@@ -332,5 +332,8 @@ declare const StyledForm: import("@stitches/react/types/styled-component").Style
     };
 }>>;
 declare type FormProps = React.ComponentPropsWithoutRef<typeof StyledForm> & FormValues;
-export declare const Form: React.FC<FormProps>;
+export declare const Form: {
+    ({ children, defaultValues, onSubmit, onError, validationMode, render, persist, ...remainingProps }: FormProps): JSX.Element;
+    displayName: string;
+};
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport useFormPersist from 'react-hook-form-persist'\n\nimport { styled } from '~/stitches'\n\nimport type {\n  FormContentValues,\n  FormPersistParams,\n  FormValues,\n  PersistFormWrapperValues\n} from './Form.types'\nimport { StorageEnum } from './Form.types'\n\nconst StyledForm = styled('form', {})\n\ntype FormProps = React.ComponentPropsWithoutRef<typeof StyledForm> & FormValues\n\ntype FormContentProps = React.ComponentPropsWithoutRef<typeof StyledForm> &\n  FormContentValues\n\ntype PersistFormWrapperProps = React.ComponentPropsWithoutRef<\n  typeof StyledForm\n> &\n  PersistFormWrapperValues\n\nconst PersistFormWrapper: React.FC<PersistFormWrapperProps> = ({\n  persist,\n  watch,\n  setValue,\n  children\n}) => {\n  const { id, ...options } = persist\n\n  let params: FormPersistParams = {\n    ...options,\n    storage:\n      options.storage === StorageEnum.LOCAL\n        ? window.localStorage\n        : window.sessionStorage\n  }\n\n  if (options.exclude) {\n    // Workaround for bug in react-hook-form-persist package\n    // package will still read from and save exclude param\n    // so need to send inputs we actually want to read from in include param instead\n    const { exclude, ...rest } = params\n    const allValues = watch()\n    const include = Object.keys(allValues).filter((key) => {\n      if (!options.exclude?.includes(key)) return key\n    })\n    params = { ...rest, include }\n  }\n\n  useFormPersist(id, { watch, setValue }, params)\n\n  return children\n}\n\nconst FormContent: React.FC<FormContentProps> = ({\n  formMethods,\n  handleSubmit,\n  onSubmit,\n  onError,\n  children,\n  ...remainingProps\n}) => (\n  <FormProvider {...formMethods}>\n    <StyledForm\n      aria-label=\"form\"\n      {...remainingProps}\n      onSubmit={handleSubmit(onSubmit, onError)}\n    >\n      {children}\n    </StyledForm>\n  </FormProvider>\n)\n\nexport const Form: React.FC<FormProps> = ({\n  children,\n  defaultValues = {},\n  onSubmit,\n  onError,\n  validationMode = 'onBlur',\n  render,\n  persist,\n  ...remainingProps\n}) => {\n  invariant(\n    !(children && render),\n    '`Form` should only be given one of `children` or `render`. When both are provided, `render` will be used and `children` will be ignored.'\n  )\n\n  const formMethods = useForm({\n    defaultValues,\n    mode: validationMode\n  })\n  const { handleSubmit, watch, setValue } = formMethods\n\n  const formContent = render ? render(formMethods) : children\n\n  const props = {\n    formMethods,\n    handleSubmit,\n    onSubmit,\n    onError,\n    ...remainingProps\n  }\n\n  if (persist) {\n    return (\n      <PersistFormWrapper persist={persist} watch={watch} setValue={setValue}>\n        <FormContent {...props}>{formContent}</FormContent>\n      </PersistFormWrapper>\n    )\n  }\n\n  return <FormContent {...props}>{formContent}</FormContent>\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","PersistFormWrapper","persist","watch","setValue","children","id","options","params","StorageEnum","exclude","rest","allValues","include","key","_a","useFormPersist","FormContent","formMethods","handleSubmit","onSubmit","onError","remainingProps","React","FormProvider","Form","defaultValues","validationMode","render","invariant","useForm","formContent","props"],"mappings":"6OAeA,MAAMA,EAAaC,EAAO,OAAQ,CAAA,CAAE,EAY9BC,EAAwD,CAAC,CAC7D,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,CACF,IAAM,CACJ,KAAM,CAAE,GAAAC,KAAOC,CAAQ,EAAIL,EAE3B,IAAIM,EAA4B,CAC9B,GAAGD,EACH,QACEA,EAAQ,UAAYE,EAAY,MAC5B,OAAO,aACP,OAAO,cACf,EAEA,GAAIF,EAAQ,QAAS,CAInB,KAAM,CAAE,QAAAG,KAAYC,CAAK,EAAIH,EACvBI,EAAYT,IACZU,EAAU,OAAO,KAAKD,CAAS,EAAE,OAAQE,GAAQ,CAjD3D,IAAAC,EAkDM,GAAI,GAACA,EAAAR,EAAQ,UAAR,MAAAQ,EAAiB,SAASD,CAAM,GAAA,OAAOA,CAC9C,CAAC,EACDN,EAAS,CAAE,GAAGG,EAAM,QAAAE,CAAQ,CAC9B,CAEA,OAAAG,EAAeV,EAAI,CAAE,MAAAH,EAAO,SAAAC,CAAS,EAAGI,CAAM,EAEvCH,CACT,EAEMY,EAA0C,CAAC,CAC/C,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAhB,KACGiB,CACL,IACEC,EAAA,cAACC,EAAA,CAAc,GAAGN,CAAAA,EAChBK,EAAA,cAACxB,EAAA,CACC,aAAW,OACV,GAAGuB,EACJ,SAAUH,EAAaC,EAAUC,CAAO,CAEvChB,EAAAA,CACH,CACF,EAGWoB,EAA4B,CAAC,CACxC,SAAApB,EACA,cAAAqB,EAAgB,CAAC,EACjB,SAAAN,EACA,QAAAC,EACA,eAAAM,EAAiB,SACjB,OAAAC,EACA,QAAA1B,KACGoB,CACL,IAAM,CACJO,EACE,EAAExB,GAAYuB,GACd,0IACF,EAEA,MAAMV,EAAcY,EAAQ,CAC1B,cAAAJ,EACA,KAAMC,CACR,CAAC,EACK,CAAE,aAAAR,EAAc,MAAAhB,EAAO,SAAAC,CAAS,EAAIc,EAEpCa,EAAcH,EAASA,EAAOV,CAAW,EAAIb,EAE7C2B,EAAQ,CACZ,YAAAd,EACA,aAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAEA,OAAIpB,EAEAqB,EAAA,cAACtB,EAAA,CAAmB,QAASC,EAAS,MAAOC,EAAO,SAAUC,CAAAA,EAC5DmB,EAAA,cAACN,EAAA,CAAa,GAAGe,CAAAA,EAAQD,CAAY,CACvC,EAIGR,EAAA,cAACN,EAAA,CAAa,GAAGe,CAAQD,EAAAA,CAAY,CAC9C,EAEAN,EAAK,YAAc"}
+{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport useFormPersist from 'react-hook-form-persist'\n\nimport { styled } from '~/stitches'\n\nimport type {\n  FormContentValues,\n  FormPersistParams,\n  FormValues,\n  PersistFormWrapperValues\n} from './Form.types'\nimport { StorageEnum } from './Form.types'\n\nconst StyledForm = styled('form', {})\n\ntype FormProps = React.ComponentPropsWithoutRef<typeof StyledForm> & FormValues\n\ntype FormContentProps = React.ComponentPropsWithoutRef<typeof StyledForm> &\n  FormContentValues\n\ntype PersistFormWrapperProps = React.ComponentPropsWithoutRef<\n  typeof StyledForm\n> &\n  PersistFormWrapperValues\n\nconst PersistFormWrapper = ({\n  persist,\n  watch,\n  setValue,\n  children\n}: PersistFormWrapperProps) => {\n  const { id, ...options } = persist\n\n  let params: FormPersistParams = {\n    ...options,\n    storage:\n      options.storage === StorageEnum.LOCAL\n        ? window.localStorage\n        : window.sessionStorage\n  }\n\n  if (options.exclude) {\n    // Workaround for bug in react-hook-form-persist package\n    // package will still read from and save exclude param\n    // so need to send inputs we actually want to read from in include param instead\n    const { exclude, ...rest } = params\n    const allValues = watch()\n    const include = Object.keys(allValues).filter((key) => {\n      if (!options.exclude?.includes(key)) return key\n    })\n    params = { ...rest, include }\n  }\n\n  useFormPersist(id, { watch, setValue }, params)\n\n  return children\n}\n\nconst FormContent = ({\n  formMethods,\n  handleSubmit,\n  onSubmit,\n  onError,\n  children,\n  ...remainingProps\n}: FormContentProps) => (\n  <FormProvider {...formMethods}>\n    <StyledForm\n      aria-label=\"form\"\n      {...remainingProps}\n      onSubmit={handleSubmit(onSubmit, onError)}\n    >\n      {children}\n    </StyledForm>\n  </FormProvider>\n)\n\nexport const Form = ({\n  children,\n  defaultValues = {},\n  onSubmit,\n  onError,\n  validationMode = 'onBlur',\n  render,\n  persist,\n  ...remainingProps\n}: FormProps) => {\n  invariant(\n    !(children && render),\n    '`Form` should only be given one of `children` or `render`. When both are provided, `render` will be used and `children` will be ignored.'\n  )\n\n  const formMethods = useForm({\n    defaultValues,\n    mode: validationMode\n  })\n  const { handleSubmit, watch, setValue } = formMethods\n\n  const formContent = render ? render(formMethods) : children\n\n  const props = {\n    formMethods,\n    handleSubmit,\n    onSubmit,\n    onError,\n    ...remainingProps\n  }\n\n  if (persist) {\n    return (\n      <PersistFormWrapper persist={persist} watch={watch} setValue={setValue}>\n        <FormContent {...props}>{formContent}</FormContent>\n      </PersistFormWrapper>\n    )\n  }\n\n  return <FormContent {...props}>{formContent}</FormContent>\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","PersistFormWrapper","persist","watch","setValue","children","id","options","params","StorageEnum","exclude","rest","allValues","include","key","_a","useFormPersist","FormContent","formMethods","handleSubmit","onSubmit","onError","remainingProps","React","FormProvider","Form","defaultValues","validationMode","render","invariant","useForm","formContent","props"],"mappings":"6OAeA,MAAMA,EAAaC,EAAO,OAAQ,CAAA,CAAE,EAY9BC,EAAqB,CAAC,CAC1B,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,CACF,IAA+B,CAC7B,KAAM,CAAE,GAAAC,KAAOC,CAAQ,EAAIL,EAE3B,IAAIM,EAA4B,CAC9B,GAAGD,EACH,QACEA,EAAQ,UAAYE,EAAY,MAC5B,OAAO,aACP,OAAO,cACf,EAEA,GAAIF,EAAQ,QAAS,CAInB,KAAM,CAAE,QAAAG,KAAYC,CAAK,EAAIH,EACvBI,EAAYT,IACZU,EAAU,OAAO,KAAKD,CAAS,EAAE,OAAQE,GAAQ,CAjD3D,IAAAC,EAkDM,GAAI,GAACA,EAAAR,EAAQ,UAAR,MAAAQ,EAAiB,SAASD,CAAM,GAAA,OAAOA,CAC9C,CAAC,EACDN,EAAS,CAAE,GAAGG,EAAM,QAAAE,CAAQ,CAC9B,CAEA,OAAAG,EAAeV,EAAI,CAAE,MAAAH,EAAO,SAAAC,CAAS,EAAGI,CAAM,EAEvCH,CACT,EAEMY,EAAc,CAAC,CACnB,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAhB,KACGiB,CACL,IACEC,EAAA,cAACC,EAAA,CAAc,GAAGN,CAAAA,EAChBK,EAAA,cAACxB,EAAA,CACC,aAAW,OACV,GAAGuB,EACJ,SAAUH,EAAaC,EAAUC,CAAO,CAEvChB,EAAAA,CACH,CACF,EAGWoB,EAAO,CAAC,CACnB,SAAApB,EACA,cAAAqB,EAAgB,CAAC,EACjB,SAAAN,EACA,QAAAC,EACA,eAAAM,EAAiB,SACjB,OAAAC,EACA,QAAA1B,KACGoB,CACL,IAAiB,CACfO,EACE,EAAExB,GAAYuB,GACd,0IACF,EAEA,MAAMV,EAAcY,EAAQ,CAC1B,cAAAJ,EACA,KAAMC,CACR,CAAC,EACK,CAAE,aAAAR,EAAc,MAAAhB,EAAO,SAAAC,CAAS,EAAIc,EAEpCa,EAAcH,EAASA,EAAOV,CAAW,EAAIb,EAE7C2B,EAAQ,CACZ,YAAAd,EACA,aAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAEA,OAAIpB,EAEAqB,EAAA,cAACtB,EAAA,CAAmB,QAASC,EAAS,MAAOC,EAAO,SAAUC,CAAAA,EAC5DmB,EAAA,cAACN,EAAA,CAAa,GAAGe,CAAAA,EAAQD,CAAY,CACvC,EAIGR,EAAA,cAACN,EAAA,CAAa,GAAGe,CAAQD,EAAAA,CAAY,CAC9C,EAEAN,EAAK,YAAc"}

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

@@ -340,5 +340,8 @@ declare type GridProps = React.ComponentProps<typeof GridContainer> & {
     css?: CSS;
     as?: any;
 };
-export declare const Grid: React.FC<GridProps>;
+export declare const Grid: {
+    ({ css, gap, minItemSize, maxItemSize, ...remainingProps }: GridProps): JSX.Element;
+    displayName: string;
+};
 export {};

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: React.FC<GridProps> = ({\n  css,\n  gap = 2,\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}) => (\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,EAA4B,CAAC,CACxC,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 { 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"}

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

@@ -334,7 +334,7 @@ export declare const StyledHeading: import("@stitches/react/types/styled-compone
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export declare type HeadingProps = Override<React.ComponentPropsWithoutRef<typeof StyledHeading>, {
+export declare type HeadingProps = Override<React.ComponentProps<typeof StyledHeading>, {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | React.ComponentType | React.ElementType;
 }>;
 export declare const Heading: React.ForwardRefExoticComponent<HeadingProps>;

package/dist/components/heading/Heading.js.map

@@ -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  fontFamily: '$display',\n  fontWeight: 700,\n  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontFamily: '$body',\n        fontWeight: 600,\n        fontSize: '$md',\n        lineHeight: 1.5,\n        ...capsize(0.3864)\n      },\n      sm: {\n        fontSize: '$lg',\n        lineHeight: 1.14,\n        ...capsize(0.2174, 0.2254)\n      },\n      md: {\n        fontSize: '$xl',\n        lineHeight: 1.14,\n        ...capsize(0.2174, 0.2254)\n      },\n      lg: {\n        fontSize: '$2xl',\n        lineHeight: 1.08,\n        ...capsize(0.1865, 0.1945)\n      },\n      xl: {\n        fontSize: '$3xl',\n        lineHeight: 1.12,\n        ...capsize(0.206, 0.214)\n      },\n      xxl: {\n        fontSize: '$4xl',\n        lineHeight: 1.06,\n        ...capsize(0.1793, 0.1873)\n      }\n    },\n    noCapsize: {\n      true: {\n        '&::before, &::after': { display: 'none !important' }\n      }\n    }\n  }\n})\n\nexport type HeadingProps = Override<\n  React.ComponentPropsWithoutRef<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":"sTAMa,MAAAA,EAAgBC,EAAO,KAAM,CACxC,WAAY,WACZ,WAAY,IACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,WAAY,IACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,KAAO,IAAK,CACzB,EACA,IAAK,CACH,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,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,GAAc,IAAKO,EAAK,KAAMF,EAAO,GAAGC,CAAAA,CAAgB,CAC1D,EAEHH,EAAQ,YAAc"}
+{"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  fontFamily: '$display',\n  fontWeight: 700,\n  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontFamily: '$body',\n        fontWeight: 600,\n        fontSize: '$md',\n        lineHeight: 1.5,\n        ...capsize(0.3864)\n      },\n      sm: {\n        fontSize: '$lg',\n        lineHeight: 1.14,\n        ...capsize(0.2174, 0.2254)\n      },\n      md: {\n        fontSize: '$xl',\n        lineHeight: 1.14,\n        ...capsize(0.2174, 0.2254)\n      },\n      lg: {\n        fontSize: '$2xl',\n        lineHeight: 1.08,\n        ...capsize(0.1865, 0.1945)\n      },\n      xl: {\n        fontSize: '$3xl',\n        lineHeight: 1.12,\n        ...capsize(0.206, 0.214)\n      },\n      xxl: {\n        fontSize: '$4xl',\n        lineHeight: 1.06,\n        ...capsize(0.1793, 0.1873)\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":"sTAMa,MAAAA,EAAgBC,EAAO,KAAM,CACxC,WAAY,WACZ,WAAY,IACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,WAAY,IACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,KAAO,IAAK,CACzB,EACA,IAAK,CACH,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,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,GAAc,IAAKO,EAAK,KAAMF,EAAO,GAAGC,CAAAA,CAAgB,CAC1D,EAEHH,EAAQ,YAAc"}

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

@@ -337,5 +337,5 @@ declare type IconProps = Override<React.ComponentProps<typeof StyledIcon>, {
     is: React.FC<React.SVGProps<SVGSVGElement>>;
     as?: never;
 }>;
-export declare const Icon: React.FC<IconProps>;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps>;
 export {};

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.FC<IconProps> = React.forwardRef(\n  ({ 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)\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,EAA4BC,EAAM,WAC7C,CAAC,CAAE,GAAIC,EAAK,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAC5CJ,EAAA,cAACH,EACC,CAAA,KAAMK,EACN,cAAY,OACX,GAAGC,EACJ,GAAIF,EACJ,IAAKG,EACP,CAEJ"}
+{"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

@@ -336,5 +336,8 @@ export declare const StyledImage: import("@stitches/react/types/styled-component
 declare type ImageProps = Override<React.ComponentPropsWithoutRef<typeof StyledImage>, {
     as?: never;
 }>;
-export declare const Image: React.FC<ImageProps>;
+export declare const Image: {
+    (props: ImageProps): JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/components/image/Image.js

@@ -1,2 +1,2 @@
-import{styled as e}from"../../stitches.js";const t=e("img",{verticalAlign:"middle",maxWidth:"100%",variants:{fluid:{true:{"&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}}}}}),i=t;i.displayName="Image";export{i as Image,t as StyledImage};
+import*as a from"react";import{styled as m}from"../../stitches.js";const t=m("img",{verticalAlign:"middle",maxWidth:"100%",variants:{fluid:{true:{"&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}}}}}),e=i=>a.createElement(t,{...i});e.displayName="Image";export{e as Image,t as StyledImage};
 //# sourceMappingURL=Image.js.map

package/dist/components/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\nexport const StyledImage = styled('img', {\n  verticalAlign: 'middle',\n  maxWidth: '100%',\n  variants: {\n    fluid: {\n      true: {\n        '&[width]': {\n          width: 'auto'\n        },\n        '&[width][height]': {\n          height: 'auto'\n        },\n        '&[src$=\".svg\"]': {\n          width: '100%',\n          height: 'auto',\n          maxWidth: 'none'\n        }\n      }\n    }\n  }\n})\n\ntype ImageProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledImage>,\n  {\n    as?: never\n  }\n>\n\nexport const Image: React.FC<ImageProps> = StyledImage\n\nImage.displayName = 'Image'\n"],"names":["StyledImage","styled","Image"],"mappings":"2CAMO,MAAMA,EAAcC,EAAO,MAAO,CACvC,cAAe,SACf,SAAU,OACV,SAAU,CACR,MAAO,CACL,KAAM,CACJ,WAAY,CACV,MAAO,MACT,EACA,mBAAoB,CAClB,OAAQ,MACV,EACA,iBAAkB,CAChB,MAAO,OACP,OAAQ,OACR,SAAU,MACZ,CACF,CACF,CACF,CACF,CAAC,EASYC,EAA8BF,EAE3CE,EAAM,YAAc"}
+{"version":3,"file":"Image.js","sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\nexport const StyledImage = styled('img', {\n  verticalAlign: 'middle',\n  maxWidth: '100%',\n  variants: {\n    fluid: {\n      true: {\n        '&[width]': {\n          width: 'auto'\n        },\n        '&[width][height]': {\n          height: 'auto'\n        },\n        '&[src$=\".svg\"]': {\n          width: '100%',\n          height: 'auto',\n          maxWidth: 'none'\n        }\n      }\n    }\n  }\n})\n\ntype ImageProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledImage>,\n  {\n    as?: never\n  }\n>\n\nexport const Image = (props: ImageProps) => <StyledImage {...props} />\n\nImage.displayName = 'Image'\n"],"names":["StyledImage","styled","Image","props","React"],"mappings":"mEAMa,MAAAA,EAAcC,EAAO,MAAO,CACvC,cAAe,SACf,SAAU,OACV,SAAU,CACR,MAAO,CACL,KAAM,CACJ,WAAY,CACV,MAAO,MACT,EACA,mBAAoB,CAClB,OAAQ,MACV,EACA,iBAAkB,CAChB,MAAO,OACP,OAAQ,OACR,SAAU,MACZ,CACF,CACF,CACF,CACF,CAAC,EASYC,EAASC,GAAsBC,EAAA,cAACJ,EAAA,CAAa,GAAGG,CAAAA,CAAO,EAEpED,EAAM,YAAc"}

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

@@ -673,5 +673,5 @@ declare type TInlineMessageProps = React.ComponentProps<typeof InlineMessageCont
     showIcon?: boolean;
     size?: 'xs' | 'sm' | 'md';
 };
-export declare const InlineMessage: React.FC<TInlineMessageProps>;
+export declare const InlineMessage: ({ css, showIcon, theme, size, children, ...rest }: TInlineMessageProps) => JSX.Element;
 export {};

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: React.FC<TInlineMessageProps> = ({\n  css,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}) => (\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,EAA+C,CAAC,CAC3D,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 {\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"}

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

@@ -339,5 +339,5 @@ export declare type InputProps = Override<React.ComponentProps<typeof StyledInpu
     as?: never;
     type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
 }>;
-export declare const Input: React.FC<InputProps>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps>;
 export {};

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledInput = styled('input', {\n  appearance: 'none',\n  border: '1px solid $tonal400',\n  borderRadius: '$0',\n  boxShadow: 'none', // prevent default iOS default styling\n  boxSizing: 'border-box',\n  color: '$tonal600',\n  cursor: 'text',\n  display: 'block',\n  fontFamily: '$body',\n  px: '$3',\n  transition: 'all 100ms ease-out',\n  width: '100%',\n  '&:focus': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': disabledStyle,\n  '&::placeholder': {\n    color: '$tonal300',\n    opacity: 1\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$3',\n        fontSize: '$sm',\n        lineHeight: 1.7\n      },\n      md: {\n        height: '$4',\n        fontSize: '$md',\n        lineHeight: 2\n      },\n      lg: {\n        height: '$5',\n        fontSize: '$md',\n        lineHeight: 2\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\n// override default 'type' property to prevent Input from being used to render\n// checkboxes, radios etc — we have dedicated components for them\nexport type InputProps = Override<\n  React.ComponentProps<typeof StyledInput>,\n  {\n    name: string\n    as?: never\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n  }\n>\n\nexport const Input: React.FC<InputProps> = React.forwardRef(\n  ({ type = 'text', size = 'md', ...rest }, ref) => {\n    if (type === 'number') {\n      return (\n        <StyledInput\n          type=\"text\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          size={size}\n          {...rest}\n          ref={ref}\n        />\n      )\n    }\n\n    return <StyledInput type={type} size={size} {...rest} ref={ref} />\n  }\n)\n\nInput.displayName = 'Input'\n"],"names":["StyledInput","styled","disabledStyle","Input","React","type","size","rest","ref"],"mappings":"kUAMA,MAAMA,EAAcC,EAAO,QAAS,CAClC,WAAY,OACZ,OAAQ,sBACR,aAAc,KACd,UAAW,OACX,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,cAAeC,EACf,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAaYC,EAA8BC,EAAM,WAC/C,CAAC,CAAE,KAAAC,EAAO,OAAQ,KAAAC,EAAO,QAASC,CAAK,EAAGC,IACpCH,IAAS,SAETD,EAAA,cAACJ,EAAA,CACC,KAAK,OACL,UAAU,UACV,QAAQ,SACR,KAAMM,EACL,GAAGC,EACJ,IAAKC,CACP,CAAA,EAIGJ,EAAA,cAACJ,EAAA,CAAY,KAAMK,EAAM,KAAMC,EAAO,GAAGC,EAAM,IAAKC,CAAAA,CAAK,CAEpE,EAEAL,EAAM,YAAc"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledInput = styled('input', {\n  appearance: 'none',\n  border: '1px solid $tonal400',\n  borderRadius: '$0',\n  boxShadow: 'none', // prevent default iOS default styling\n  boxSizing: 'border-box',\n  color: '$tonal600',\n  cursor: 'text',\n  display: 'block',\n  fontFamily: '$body',\n  px: '$3',\n  transition: 'all 100ms ease-out',\n  width: '100%',\n  '&:focus': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': disabledStyle,\n  '&::placeholder': {\n    color: '$tonal300',\n    opacity: 1\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$3',\n        fontSize: '$sm',\n        lineHeight: 1.7\n      },\n      md: {\n        height: '$4',\n        fontSize: '$md',\n        lineHeight: 2\n      },\n      lg: {\n        height: '$5',\n        fontSize: '$md',\n        lineHeight: 2\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\n// override default 'type' property to prevent Input from being used to render\n// checkboxes, radios etc — we have dedicated components for them\nexport type InputProps = Override<\n  React.ComponentProps<typeof StyledInput>,\n  {\n    name: string\n    as?: never\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n  }\n>\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n  React.forwardRef(({ type = 'text', size = 'md', ...rest }, ref) => {\n    if (type === 'number') {\n      return (\n        <StyledInput\n          type=\"text\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          size={size}\n          {...rest}\n          ref={ref}\n        />\n      )\n    }\n\n    return <StyledInput type={type} size={size} {...rest} ref={ref} />\n  })\n\nInput.displayName = 'Input'\n"],"names":["StyledInput","styled","disabledStyle","Input","React","type","size","rest","ref"],"mappings":"kUAMA,MAAMA,EAAcC,EAAO,QAAS,CAClC,WAAY,OACZ,OAAQ,sBACR,aAAc,KACd,UAAW,OACX,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,cAAeC,EACf,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAaYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,KAAAC,EAAO,QAASC,CAAK,EAAGC,IACrDH,IAAS,SAETD,EAAA,cAACJ,EAAA,CACC,KAAK,OACL,UAAU,UACV,QAAQ,SACR,KAAMM,EACL,GAAGC,EACJ,IAAKC,CACP,CAAA,EAIGJ,EAAA,cAACJ,EAAA,CAAY,KAAMK,EAAM,KAAMC,EAAO,GAAGC,EAAM,IAAKC,CAAAA,CAAK,CACjE,EAEHL,EAAM,YAAc"}

package/dist/components/input-field/InputField.d.ts

@@ -1,6 +1,9 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { InputProps } from '../../components/input';
 declare type InputFieldProps = InputProps & FieldElementWrapperProps;
-export declare const InputField: React.FC<InputFieldProps>;
+export declare const InputField: {
+    ({ css, label, name, validation, prompt, description, hideLabel, ...remainingProps }: InputFieldProps): JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/components/input-field/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { Input, InputProps } from '~/components/input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField: React.FC<InputFieldProps> = ({\n  css,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  hideLabel,\n  ...remainingProps\n}) => {\n  const { register } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <Input\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nInputField.displayName = 'InputField'\n"],"names":["InputField","css","label","name","validation","prompt","description","hideLabel","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Input"],"mappings":"yTAYaA,EAAwC,CAAC,CACpD,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,UAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAC9BU,EAAMT,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKd,EACL,YAAaK,EACb,MAAOK,EACP,QAASR,EACT,UAAWI,EACX,MAAOL,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,YAAAA,EAAY,QAAQ,CAEtCU,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIb,EACJ,KAAMA,EACN,IAAKU,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,EACN,CACF,CAEJ,EAEAR,EAAW,YAAc"}
+{"version":3,"file":"InputField.js","sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { Input, InputProps } from '~/components/input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n  css,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  hideLabel,\n  ...remainingProps\n}: InputFieldProps) => {\n  const { register } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <Input\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nInputField.displayName = 'InputField'\n"],"names":["InputField","css","label","name","validation","prompt","description","hideLabel","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Input"],"mappings":"yTAYaA,EAAa,CAAC,CACzB,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,UAAAC,KACGC,CACL,IAAuB,CACrB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAC9BU,EAAMT,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKd,EACL,YAAaK,EACb,MAAOK,EACP,QAASR,EACT,UAAWI,EACX,MAAOL,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,YAAAA,EAAY,QAAQ,CAEtCU,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIb,EACJ,KAAMA,EACN,IAAKU,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,EACN,CACF,CAEJ,EAEAR,EAAW,YAAc"}

package/dist/components/label/Label.d.ts

@@ -340,5 +340,8 @@ declare type LabelProps = Override<React.ComponentPropsWithoutRef<typeof StyledL
     as?: 'label' | 'legend';
     required?: boolean;
 }>;
-export declare const Label: React.FC<LabelProps>;
+export declare const Label: {
+    ({ align, as, direction, size, type, children, required, ...rest }: LabelProps): JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/components/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities/types'\n\nimport { getTextVariant } from '../text'\n\nconst StyledLabel = styled('label', {\n  color: '$tonal500',\n  fontFamily: '$body',\n  m: 0,\n  variants: {\n    size: {\n      sm: getTextVariant({ size: 'sm' }),\n      md: getTextVariant({ size: 'md' })\n    },\n    type: {\n      block: {\n        display: 'block',\n        fontWeight: 600\n      },\n      inline: {\n        display: 'flex',\n        fontWeight: 400,\n        maxWidth: 'max-content'\n      }\n    },\n    align: { start: {}, center: {} },\n    direction: { reverse: {}, row: {} }\n  },\n  compoundVariants: [\n    {\n      type: 'inline',\n      align: 'start',\n      css: { alignItems: 'flex-start' }\n    },\n    {\n      type: 'inline',\n      align: 'center',\n      css: { alignItems: 'center' }\n    },\n    {\n      type: 'inline',\n      direction: 'reverse',\n      css: { flexDirection: 'row-reverse' }\n    },\n    {\n      type: 'inline',\n      direction: 'row',\n      css: { flexDirection: 'row' }\n    }\n  ]\n})\n\nconst StyledAsterisk = styled('span', {\n  color: '$danger',\n  ml: '$1',\n  fontWeight: 400\n})\n\ntype LabelProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledLabel>,\n  {\n    as?: 'label' | 'legend'\n    required?: boolean\n  }\n>\n\nexport const Label: React.FC<LabelProps> = ({\n  align = 'start',\n  as = 'label',\n  direction = 'row',\n  size = 'md',\n  type = 'block',\n  children,\n  required,\n  ...rest\n}) => (\n  <StyledLabel\n    as={as}\n    size={size}\n    type={type}\n    align={align}\n    direction={direction}\n    {...rest}\n  >\n    {children}\n    {required && <StyledAsterisk aria-hidden>*</StyledAsterisk>}\n  </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"names":["StyledLabel","styled","getTextVariant","StyledAsterisk","Label","align","as","direction","size","type","children","required","rest","React"],"mappings":"oHAOA,MAAMA,EAAcC,EAAO,QAAS,CAClC,MAAO,YACP,WAAY,QACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAIC,EAAe,CAAE,KAAM,IAAK,CAAC,EACjC,GAAIA,EAAe,CAAE,KAAM,IAAK,CAAC,CACnC,EACA,KAAM,CACJ,MAAO,CACL,QAAS,QACT,WAAY,GACd,EACA,OAAQ,CACN,QAAS,OACT,WAAY,IACZ,SAAU,aACZ,CACF,EACA,MAAO,CAAE,MAAO,CAAA,EAAI,OAAQ,CAAG,CAAA,EAC/B,UAAW,CAAE,QAAS,CAAI,EAAA,IAAK,EAAG,CACpC,EACA,iBAAkB,CAChB,CACE,KAAM,SACN,MAAO,QACP,IAAK,CAAE,WAAY,YAAa,CAClC,EACA,CACE,KAAM,SACN,MAAO,SACP,IAAK,CAAE,WAAY,QAAS,CAC9B,EACA,CACE,KAAM,SACN,UAAW,UACX,IAAK,CAAE,cAAe,aAAc,CACtC,EACA,CACE,KAAM,SACN,UAAW,MACX,IAAK,CAAE,cAAe,KAAM,CAC9B,CACF,CACF,CAAC,EAEKC,EAAiBF,EAAO,OAAQ,CACpC,MAAO,UACP,GAAI,KACJ,WAAY,GACd,CAAC,EAUYG,EAA8B,CAAC,CAC1C,MAAAC,EAAQ,QACR,GAAAC,EAAK,QACL,UAAAC,EAAY,MACZ,KAAAC,EAAO,KACP,KAAAC,EAAO,QACP,SAAAC,EACA,SAAAC,KACGC,CACL,IACEC,EAAA,cAACb,EAAA,CACC,GAAIM,EACJ,KAAME,EACN,KAAMC,EACN,MAAOJ,EACP,UAAWE,EACV,GAAGK,CAEHF,EAAAA,EACAC,GAAYE,EAAA,cAACV,EAAA,CAAe,cAAW,IAAC,GAAC,CAC5C,EAGFC,EAAM,YAAc"}
+{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities/types'\n\nimport { getTextVariant } from '../text'\n\nconst StyledLabel = styled('label', {\n  color: '$tonal500',\n  fontFamily: '$body',\n  m: 0,\n  variants: {\n    size: {\n      sm: getTextVariant({ size: 'sm' }),\n      md: getTextVariant({ size: 'md' })\n    },\n    type: {\n      block: {\n        display: 'block',\n        fontWeight: 600\n      },\n      inline: {\n        display: 'flex',\n        fontWeight: 400,\n        maxWidth: 'max-content'\n      }\n    },\n    align: { start: {}, center: {} },\n    direction: { reverse: {}, row: {} }\n  },\n  compoundVariants: [\n    {\n      type: 'inline',\n      align: 'start',\n      css: { alignItems: 'flex-start' }\n    },\n    {\n      type: 'inline',\n      align: 'center',\n      css: { alignItems: 'center' }\n    },\n    {\n      type: 'inline',\n      direction: 'reverse',\n      css: { flexDirection: 'row-reverse' }\n    },\n    {\n      type: 'inline',\n      direction: 'row',\n      css: { flexDirection: 'row' }\n    }\n  ]\n})\n\nconst StyledAsterisk = styled('span', {\n  color: '$danger',\n  ml: '$1',\n  fontWeight: 400\n})\n\ntype LabelProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledLabel>,\n  {\n    as?: 'label' | 'legend'\n    required?: boolean\n  }\n>\n\nexport const Label = ({\n  align = 'start',\n  as = 'label',\n  direction = 'row',\n  size = 'md',\n  type = 'block',\n  children,\n  required,\n  ...rest\n}: LabelProps) => (\n  <StyledLabel\n    as={as}\n    size={size}\n    type={type}\n    align={align}\n    direction={direction}\n    {...rest}\n  >\n    {children}\n    {required && <StyledAsterisk aria-hidden>*</StyledAsterisk>}\n  </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"names":["StyledLabel","styled","getTextVariant","StyledAsterisk","Label","align","as","direction","size","type","children","required","rest","React"],"mappings":"oHAOA,MAAMA,EAAcC,EAAO,QAAS,CAClC,MAAO,YACP,WAAY,QACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAIC,EAAe,CAAE,KAAM,IAAK,CAAC,EACjC,GAAIA,EAAe,CAAE,KAAM,IAAK,CAAC,CACnC,EACA,KAAM,CACJ,MAAO,CACL,QAAS,QACT,WAAY,GACd,EACA,OAAQ,CACN,QAAS,OACT,WAAY,IACZ,SAAU,aACZ,CACF,EACA,MAAO,CAAE,MAAO,CAAA,EAAI,OAAQ,CAAG,CAAA,EAC/B,UAAW,CAAE,QAAS,CAAI,EAAA,IAAK,EAAG,CACpC,EACA,iBAAkB,CAChB,CACE,KAAM,SACN,MAAO,QACP,IAAK,CAAE,WAAY,YAAa,CAClC,EACA,CACE,KAAM,SACN,MAAO,SACP,IAAK,CAAE,WAAY,QAAS,CAC9B,EACA,CACE,KAAM,SACN,UAAW,UACX,IAAK,CAAE,cAAe,aAAc,CACtC,EACA,CACE,KAAM,SACN,UAAW,MACX,IAAK,CAAE,cAAe,KAAM,CAC9B,CACF,CACF,CAAC,EAEKC,EAAiBF,EAAO,OAAQ,CACpC,MAAO,UACP,GAAI,KACJ,WAAY,GACd,CAAC,EAUYG,EAAQ,CAAC,CACpB,MAAAC,EAAQ,QACR,GAAAC,EAAK,QACL,UAAAC,EAAY,MACZ,KAAAC,EAAO,KACP,KAAAC,EAAO,QACP,SAAAC,EACA,SAAAC,KACGC,CACL,IACEC,EAAA,cAACb,EAAA,CACC,GAAIM,EACJ,KAAME,EACN,KAAMC,EACN,MAAOJ,EACP,UAAWE,EACV,GAAGK,CAEHF,EAAAA,EACAC,GAAYE,EAAA,cAACV,EAAA,CAAe,cAAW,IAAC,GAAC,CAC5C,EAGFC,EAAM,YAAc"}

package/dist/components/link/Link.d.ts

@@ -338,5 +338,5 @@ export declare const StyledLink: import("@stitches/react/types/styled-component"
 declare type LinkProps = Override<React.ComponentProps<typeof StyledLink>, {
     as?: React.ComponentType | React.ElementType;
 } & NavigatorActions>;
-export declare const Link: React.FC<LinkProps>;
+export declare const Link: React.ForwardRefExoticComponent<LinkProps>;
 export {};

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { StyledHeading } from '../heading/Heading'\nimport { StyledLi } from '../list/List'\nimport { StyledMarkdownEmphasis } from '../markdown-content/components'\nimport { StyledText, textVariants } from '../text/Text'\n\nexport const StyledLink = styled('a', {\n  bg: 'unset',\n  border: 'unset',\n  p: 'unset',\n  color: '$primary800',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  textDecoration: 'none',\n  '&:focus, &:hover': {\n    color: '$primary900',\n    textDecoration: 'underline'\n  },\n  '&:active': {\n    color: '$primary1000'\n  },\n  '&[disabled]': {\n    ...disabledStyle,\n    pointerEvents: 'none'\n  },\n\n  [`${StyledText} > &, ${StyledHeading} > &, ${StyledLi} > &, ${StyledMarkdownEmphasis} > &`]:\n    {\n      fontSize: '100%',\n      lineHeight: 1,\n      '&::before, &::after': {\n        content: 'none'\n      }\n    },\n  variants: textVariants,\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\ntype LinkProps = Override<\n  React.ComponentProps<typeof StyledLink>,\n  {\n    as?: React.ComponentType | React.ElementType\n  } & NavigatorActions\n>\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ as, href, ...rest }, ref) => (\n    <StyledLink\n      as={as || (!href ? 'button' : undefined)}\n      noCapsize={!href ? true : undefined}\n      href={href}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref}\n    />\n  )\n) as React.FC<LinkProps>\n\nLink.displayName = 'Link'\n"],"names":["StyledLink","styled","disabledStyle","StyledText","StyledHeading","StyledLi","StyledMarkdownEmphasis","textVariants","Link","React","as","href","rest","ref","getExternalAnchorProps"],"mappings":"y2BAYa,MAAAA,EAAaC,EAAO,IAAK,CACpC,GAAI,QACJ,OAAQ,QACR,EAAG,QACH,MAAO,cACP,OAAQ,UACR,WAAY,QACZ,eAAgB,OAChB,mBAAoB,CAClB,MAAO,cACP,eAAgB,WAClB,EACA,WAAY,CACV,MAAO,cACT,EACA,cAAe,CACb,GAAGC,EACH,cAAe,MACjB,EAEA,CAAC,GAAGC,UAAmBC,UAAsBC,UAAiBC,SAC5D,CACE,SAAU,OACV,WAAY,EACZ,sBAAuB,CACrB,QAAS,MACX,CACF,EACF,SAAUC,EACV,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EASYC,EAAOC,EAAM,WACxB,CAAC,CAAE,GAAAC,EAAI,KAAAC,KAASC,CAAK,EAAGC,IACtBJ,EAAA,cAACT,EACC,CAAA,GAAIU,IAAQC,EAAkB,OAAX,UACnB,UAAYA,EAAc,OAAP,GACnB,KAAMA,EACL,GAAGC,EACH,GAAGE,EAAuBH,CAAI,EAC/B,IAAKE,CAAAA,CACP,CAEJ,EAEAL,EAAK,YAAc"}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { StyledHeading } from '../heading/Heading'\nimport { StyledLi } from '../list/List'\nimport { StyledMarkdownEmphasis } from '../markdown-content/components'\nimport { StyledText, textVariants } from '../text/Text'\n\nexport const StyledLink = styled('a', {\n  bg: 'unset',\n  border: 'unset',\n  p: 'unset',\n  color: '$primary800',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  textDecoration: 'none',\n  '&:focus, &:hover': {\n    color: '$primary900',\n    textDecoration: 'underline'\n  },\n  '&:active': {\n    color: '$primary1000'\n  },\n  '&[disabled]': {\n    ...disabledStyle,\n    pointerEvents: 'none'\n  },\n\n  [`${StyledText} > &, ${StyledHeading} > &, ${StyledLi} > &, ${StyledMarkdownEmphasis} > &`]:\n    {\n      fontSize: '100%',\n      lineHeight: 1,\n      '&::before, &::after': {\n        content: 'none'\n      }\n    },\n  variants: textVariants,\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\ntype LinkProps = Override<\n  React.ComponentProps<typeof StyledLink>,\n  {\n    as?: React.ComponentType | React.ElementType\n  } & NavigatorActions\n>\n\nexport const Link: React.ForwardRefExoticComponent<LinkProps> =\n  React.forwardRef(({ as, href, ...rest }, ref) => (\n    <StyledLink\n      as={as || (!href ? 'button' : undefined)}\n      noCapsize={!href ? true : undefined}\n      href={href}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref}\n    />\n  ))\n\nLink.displayName = 'Link'\n"],"names":["StyledLink","styled","disabledStyle","StyledText","StyledHeading","StyledLi","StyledMarkdownEmphasis","textVariants","Link","React","as","href","rest","ref","getExternalAnchorProps"],"mappings":"y2BAYa,MAAAA,EAAaC,EAAO,IAAK,CACpC,GAAI,QACJ,OAAQ,QACR,EAAG,QACH,MAAO,cACP,OAAQ,UACR,WAAY,QACZ,eAAgB,OAChB,mBAAoB,CAClB,MAAO,cACP,eAAgB,WAClB,EACA,WAAY,CACV,MAAO,cACT,EACA,cAAe,CACb,GAAGC,EACH,cAAe,MACjB,EAEA,CAAC,GAAGC,UAAmBC,UAAsBC,UAAiBC,SAC5D,CACE,SAAU,OACV,WAAY,EACZ,sBAAuB,CACrB,QAAS,MACX,CACF,EACF,SAAUC,EACV,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EASYC,EACXC,EAAM,WAAW,CAAC,CAAE,GAAAC,EAAI,KAAAC,KAASC,CAAK,EAAGC,IACvCJ,EAAA,cAACT,EACC,CAAA,GAAIU,IAAQC,EAAkB,OAAX,UACnB,UAAYA,EAAc,OAAP,GACnB,KAAMA,EACL,GAAGC,EACH,GAAGE,EAAuBH,CAAI,EAC/B,IAAKE,CAAAA,CACP,CACD,EAEHL,EAAK,YAAc"}

package/dist/components/loader/Loader.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { CSS } from '../../stitches';
 declare type LoaderProps = {
     message?: string;
     size?: 'sm' | 'md' | 'lg';
     css?: CSS;
 };
-export declare const Loader: React.FC<LoaderProps>;
+export declare const Loader: ({ css, message, size, ...props }: LoaderProps) => JSX.Element;
 export {};

package/dist/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { CSS, keyframes, styled } from '~/stitches'\n\nconst FadeInOut = keyframes({\n  '0%': { opacity: 0 },\n  '30%': { opacity: 1 },\n  '50%': { opacity: 1 },\n  '80%': { opacity: 0 },\n  '100%': { opacity: 0 }\n})\n\nconst Dot = styled('div', {\n  animationName: `${FadeInOut}`,\n  animationDuration: '1s',\n  animationFillMode: 'both',\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'linear',\n  backgroundColor: 'currentColor',\n  borderRadius: '$round',\n  '&:nth-child(1)': {\n    animationDelay: '-300ms'\n  },\n  '&:nth-child(2)': {\n    animationDelay: '-150ms'\n  },\n  '&:nth-child(3)': {\n    animationDelay: 0\n  },\n\n  variants: {\n    size: {\n      sm: { size: '4px', mx: '2px' },\n      md: { size: '6px', mx: '2px' },\n      lg: { size: '8px', mx: '3px' }\n    }\n  }\n})\n\ntype LoaderProps = {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\n}\n\nexport const Loader: React.FC<LoaderProps> = ({\n  css = {},\n  message = 'Loading',\n  size = 'md',\n  ...props\n}) => (\n  <Flex\n    css={{\n      justifyContent: 'center',\n      // Stitches doesn't recognise CSS as the right type here. The Modulz team doesn't know why.\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ...(css as any)\n    }}\n    role=\"alert\"\n    {...props}\n  >\n    <VisuallyHidden.Root>{message}</VisuallyHidden.Root>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </Flex>\n)\n"],"names":["FadeInOut","keyframes","Dot","styled","Loader","css","message","size","props","React","Flex","VisuallyHidden"],"mappings":"2KAMA,MAAMA,EAAYC,EAAU,CAC1B,KAAM,CAAE,QAAS,CAAE,EACnB,MAAO,CAAE,QAAS,CAAE,EACpB,MAAO,CAAE,QAAS,CAAE,EACpB,MAAO,CAAE,QAAS,CAAE,EACpB,OAAQ,CAAE,QAAS,CAAE,CACvB,CAAC,EAEKC,EAAMC,EAAO,MAAO,CACxB,cAAe,GAAGH,IAClB,kBAAmB,KACnB,kBAAmB,OACnB,wBAAyB,WACzB,wBAAyB,SACzB,gBAAiB,eACjB,aAAc,SACd,iBAAkB,CAChB,eAAgB,QAClB,EACA,iBAAkB,CAChB,eAAgB,QAClB,EACA,iBAAkB,CAChB,eAAgB,CAClB,EAEA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,MAAO,GAAI,KAAM,EAC7B,GAAI,CAAE,KAAM,MAAO,GAAI,KAAM,EAC7B,GAAI,CAAE,KAAM,MAAO,GAAI,KAAM,CAC/B,CACF,CACF,CAAC,EAQYI,EAAgC,CAAC,CAC5C,IAAAC,EAAM,CAAA,EACN,QAAAC,EAAU,UACV,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,eAAgB,SAGhB,GAAIL,CACN,EACA,KAAK,QACJ,GAAGG,CAEJC,EAAAA,EAAA,cAACE,EAAe,KAAf,KAAqBL,CAAQ,EAC9BG,EAAA,cAACP,EAAA,CAAI,KAAMK,EAAM,EACjBE,EAAA,cAACP,EAAA,CAAI,KAAMK,CAAAA,CAAM,EACjBE,EAAA,cAACP,EAAA,CAAI,KAAMK,EAAM,CACnB"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { CSS, keyframes, styled } from '~/stitches'\n\nconst FadeInOut = keyframes({\n  '0%': { opacity: 0 },\n  '30%': { opacity: 1 },\n  '50%': { opacity: 1 },\n  '80%': { opacity: 0 },\n  '100%': { opacity: 0 }\n})\n\nconst Dot = styled('div', {\n  animationName: `${FadeInOut}`,\n  animationDuration: '1s',\n  animationFillMode: 'both',\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'linear',\n  backgroundColor: 'currentColor',\n  borderRadius: '$round',\n  '&:nth-child(1)': {\n    animationDelay: '-300ms'\n  },\n  '&:nth-child(2)': {\n    animationDelay: '-150ms'\n  },\n  '&:nth-child(3)': {\n    animationDelay: 0\n  },\n\n  variants: {\n    size: {\n      sm: { size: '4px', mx: '2px' },\n      md: { size: '6px', mx: '2px' },\n      lg: { size: '8px', mx: '3px' }\n    }\n  }\n})\n\ntype LoaderProps = {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\n}\n\nexport const Loader = ({\n  css = {},\n  message = 'Loading',\n  size = 'md',\n  ...props\n}: LoaderProps) => (\n  <Flex\n    css={{\n      justifyContent: 'center',\n      // Stitches doesn't recognise CSS as the right type here. The Modulz team doesn't know why.\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ...(css as any)\n    }}\n    role=\"alert\"\n    {...props}\n  >\n    <VisuallyHidden.Root>{message}</VisuallyHidden.Root>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </Flex>\n)\n"],"names":["FadeInOut","keyframes","Dot","styled","Loader","css","message","size","props","React","Flex","VisuallyHidden"],"mappings":"2KAMA,MAAMA,EAAYC,EAAU,CAC1B,KAAM,CAAE,QAAS,CAAE,EACnB,MAAO,CAAE,QAAS,CAAE,EACpB,MAAO,CAAE,QAAS,CAAE,EACpB,MAAO,CAAE,QAAS,CAAE,EACpB,OAAQ,CAAE,QAAS,CAAE,CACvB,CAAC,EAEKC,EAAMC,EAAO,MAAO,CACxB,cAAe,GAAGH,IAClB,kBAAmB,KACnB,kBAAmB,OACnB,wBAAyB,WACzB,wBAAyB,SACzB,gBAAiB,eACjB,aAAc,SACd,iBAAkB,CAChB,eAAgB,QAClB,EACA,iBAAkB,CAChB,eAAgB,QAClB,EACA,iBAAkB,CAChB,eAAgB,CAClB,EAEA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,MAAO,GAAI,KAAM,EAC7B,GAAI,CAAE,KAAM,MAAO,GAAI,KAAM,EAC7B,GAAI,CAAE,KAAM,MAAO,GAAI,KAAM,CAC/B,CACF,CACF,CAAC,EAQYI,EAAS,CAAC,CACrB,IAAAC,EAAM,CAAA,EACN,QAAAC,EAAU,UACV,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,eAAgB,SAGhB,GAAIL,CACN,EACA,KAAK,QACJ,GAAGG,CAEJC,EAAAA,EAAA,cAACE,EAAe,KAAf,KAAqBL,CAAQ,EAC9BG,EAAA,cAACP,EAAA,CAAI,KAAMK,EAAM,EACjBE,EAAA,cAACP,EAAA,CAAI,KAAMK,CAAAA,CAAM,EACjBE,EAAA,cAACP,EAAA,CAAI,KAAMK,EAAM,CACnB"}

package/dist/components/markdown-content/MarkdownContent.d.ts

@@ -1,15 +1,18 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { CSS } from '../../stitches';
 declare type HandleNode = (node: any) => JSX.Element | null;
 declare type MarkdownContentProps = {
     content: string;
     customComponents?: {
-        [key: string]: React.FC<{
+        [key: string]: (props: {
             node: any;
             handleNode: HandleNode;
-        }>;
+        }) => JSX.Element;
     };
     css?: CSS;
 };
-export declare const MarkdownContent: React.FC<MarkdownContentProps>;
+export declare const MarkdownContent: {
+    ({ content, customComponents, css }: MarkdownContentProps): JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/components/markdown-content/MarkdownContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownContent.js","sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import directive from 'mdast-util-directive'\nimport fromMarkdown from 'mdast-util-from-markdown'\nimport syntax from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { StackContent } from '../stack-content/StackContent'\nimport {\n  MarkdownCode,\n  MarkdownEmphasis,\n  MarkdownHeading,\n  MarkdownImage,\n  MarkdownInlineCode,\n  MarkdownLink,\n  MarkdownList,\n  MarkdownListItem,\n  MarkdownParagraph,\n  MarkdownStrong,\n  MarkdownText,\n  MarkdownThematicBreak\n} from './components'\n\ntype HandleNode = (node) => JSX.Element | null\n\ntype MarkdownContentProps = {\n  content: string\n  customComponents?: {\n    [key: string]: React.FC<{\n      node: any\n      handleNode: HandleNode\n    }>\n  }\n  css?: CSS\n}\n\nconst defaultComponentsMap = {\n  code: MarkdownCode,\n  emphasis: MarkdownEmphasis,\n  heading: MarkdownHeading,\n  inlineCode: MarkdownInlineCode,\n  image: MarkdownImage,\n  link: MarkdownLink,\n  list: MarkdownList,\n  listItem: MarkdownListItem,\n  paragraph: MarkdownParagraph,\n  strong: MarkdownStrong,\n  text: MarkdownText,\n  thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node) => {\n  if (node.position?.start) {\n    const { line, column, offset } = node.position?.start\n    return `${node.type}${line}${column}${offset}`\n  }\n\n  return `${node.type}${+new Date()}`\n}\n\nexport const MarkdownContent: React.FC<MarkdownContentProps> = ({\n  content,\n  customComponents = {},\n  css\n}) => {\n  const AST = fromMarkdown(content, {\n    extensions: [syntax()],\n    mdastExtensions: [directive.fromMarkdown]\n  })\n\n  const componentsMap = {\n    ...defaultComponentsMap,\n    ...customComponents\n  }\n\n  const handleNode: HandleNode = (node) => {\n    const MarkdownComponent = componentsMap[node.type]\n\n    return MarkdownComponent ? (\n      <MarkdownComponent\n        key={generateNodeKey(node)}\n        node={node}\n        handleNode={handleNode}\n      />\n    ) : null\n  }\n\n  return <StackContent css={css}>{AST.children.map(handleNode)}</StackContent>\n}\n\nMarkdownContent.displayName = 'MarkdownContent'\n"],"names":["defaultComponentsMap","MarkdownCode","MarkdownEmphasis","MarkdownHeading","MarkdownInlineCode","MarkdownImage","MarkdownLink","MarkdownList","MarkdownListItem","MarkdownParagraph","MarkdownStrong","MarkdownText","MarkdownThematicBreak","generateNodeKey","node","_a","_b","line","column","offset","MarkdownContent","content","customComponents","css","AST","fromMarkdown","syntax","directive","componentsMap","handleNode","MarkdownComponent","React","StackContent"],"mappings":"q+BAoCA,MAAMA,EAAuB,CAC3B,KAAMC,EACN,SAAUC,EACV,QAASC,EACT,WAAYC,EACZ,MAAOC,EACP,KAAMC,EACN,KAAMC,EACN,SAAUC,EACV,UAAWC,EACX,OAAQC,EACR,KAAMC,EACN,cAAeC,CACjB,EAEMC,EAAmBC,GAAS,CAnDlC,IAAAC,EAAAC,EAoDE,IAAID,EAAAD,EAAK,WAAL,MAAAC,EAAe,MAAO,CACxB,KAAM,CAAE,KAAAE,EAAM,OAAAC,EAAQ,OAAAC,CAAO,GAAIH,EAAAF,EAAK,WAAL,KAAA,OAAAE,EAAe,MAChD,MAAO,GAAGF,EAAK,OAAOG,IAAOC,IAASC,GACxC,CAEA,MAAO,GAAGL,EAAK,OAAO,CAAC,IAAI,MAC7B,EAEaM,EAAkD,CAAC,CAC9D,QAAAC,EACA,iBAAAC,EAAmB,CAAA,EACnB,IAAAC,CACF,IAAM,CACJ,MAAMC,EAAMC,EAAaJ,EAAS,CAChC,WAAY,CAACK,EAAQ,CAAA,EACrB,gBAAiB,CAACC,EAAU,YAAY,CAC1C,CAAC,EAEKC,EAAgB,CACpB,GAAG5B,EACH,GAAGsB,CACL,EAEMO,EAA0Bf,GAAS,CACvC,MAAMgB,EAAoBF,EAAcd,EAAK,MAE7C,OAAOgB,EACLC,EAAA,cAACD,EAAA,CACC,IAAKjB,EAAgBC,CAAI,EACzB,KAAMA,EACN,WAAYe,CACd,CAAA,EACE,IACN,EAEA,OAAOE,EAAA,cAACC,EAAA,CAAa,IAAKT,CAAAA,EAAMC,EAAI,SAAS,IAAIK,CAAU,CAAE,CAC/D,EAEAT,EAAgB,YAAc"}
+{"version":3,"file":"MarkdownContent.js","sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import directive from 'mdast-util-directive'\nimport fromMarkdown from 'mdast-util-from-markdown'\nimport syntax from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { StackContent } from '../stack-content/StackContent'\nimport {\n  MarkdownCode,\n  MarkdownEmphasis,\n  MarkdownHeading,\n  MarkdownImage,\n  MarkdownInlineCode,\n  MarkdownLink,\n  MarkdownList,\n  MarkdownListItem,\n  MarkdownParagraph,\n  MarkdownStrong,\n  MarkdownText,\n  MarkdownThematicBreak\n} from './components'\n\ntype HandleNode = (node) => JSX.Element | null\n\ntype MarkdownContentProps = {\n  content: string\n  customComponents?: {\n    [key: string]: (props: { node: any; handleNode: HandleNode }) => JSX.Element\n  }\n  css?: CSS\n}\n\nconst defaultComponentsMap = {\n  code: MarkdownCode,\n  emphasis: MarkdownEmphasis,\n  heading: MarkdownHeading,\n  inlineCode: MarkdownInlineCode,\n  image: MarkdownImage,\n  link: MarkdownLink,\n  list: MarkdownList,\n  listItem: MarkdownListItem,\n  paragraph: MarkdownParagraph,\n  strong: MarkdownStrong,\n  text: MarkdownText,\n  thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node) => {\n  if (node.position?.start) {\n    const { line, column, offset } = node.position?.start\n    return `${node.type}${line}${column}${offset}`\n  }\n\n  return `${node.type}${+new Date()}`\n}\n\nexport const MarkdownContent = ({\n  content,\n  customComponents = {},\n  css\n}: MarkdownContentProps) => {\n  const AST = fromMarkdown(content, {\n    extensions: [syntax()],\n    mdastExtensions: [directive.fromMarkdown]\n  })\n\n  const componentsMap = {\n    ...defaultComponentsMap,\n    ...customComponents\n  }\n\n  const handleNode: HandleNode = (node) => {\n    const MarkdownComponent = componentsMap[node.type]\n\n    return MarkdownComponent ? (\n      <MarkdownComponent\n        key={generateNodeKey(node)}\n        node={node}\n        handleNode={handleNode}\n      />\n    ) : null\n  }\n\n  return <StackContent css={css}>{AST.children.map(handleNode)}</StackContent>\n}\n\nMarkdownContent.displayName = 'MarkdownContent'\n"],"names":["defaultComponentsMap","MarkdownCode","MarkdownEmphasis","MarkdownHeading","MarkdownInlineCode","MarkdownImage","MarkdownLink","MarkdownList","MarkdownListItem","MarkdownParagraph","MarkdownStrong","MarkdownText","MarkdownThematicBreak","generateNodeKey","node","_a","_b","line","column","offset","MarkdownContent","content","customComponents","css","AST","fromMarkdown","syntax","directive","componentsMap","handleNode","MarkdownComponent","React","StackContent"],"mappings":"q+BAiCA,MAAMA,EAAuB,CAC3B,KAAMC,EACN,SAAUC,EACV,QAASC,EACT,WAAYC,EACZ,MAAOC,EACP,KAAMC,EACN,KAAMC,EACN,SAAUC,EACV,UAAWC,EACX,OAAQC,EACR,KAAMC,EACN,cAAeC,CACjB,EAEMC,EAAmBC,GAAS,CAhDlC,IAAAC,EAAAC,EAiDE,IAAID,EAAAD,EAAK,WAAL,MAAAC,EAAe,MAAO,CACxB,KAAM,CAAE,KAAAE,EAAM,OAAAC,EAAQ,OAAAC,CAAO,GAAIH,EAAAF,EAAK,WAAL,KAAA,OAAAE,EAAe,MAChD,MAAO,GAAGF,EAAK,OAAOG,IAAOC,IAASC,GACxC,CAEA,MAAO,GAAGL,EAAK,OAAO,CAAC,IAAI,MAC7B,EAEaM,EAAkB,CAAC,CAC9B,QAAAC,EACA,iBAAAC,EAAmB,CAAA,EACnB,IAAAC,CACF,IAA4B,CAC1B,MAAMC,EAAMC,EAAaJ,EAAS,CAChC,WAAY,CAACK,EAAQ,CAAA,EACrB,gBAAiB,CAACC,EAAU,YAAY,CAC1C,CAAC,EAEKC,EAAgB,CACpB,GAAG5B,EACH,GAAGsB,CACL,EAEMO,EAA0Bf,GAAS,CACvC,MAAMgB,EAAoBF,EAAcd,EAAK,MAE7C,OAAOgB,EACLC,EAAA,cAACD,EAAA,CACC,IAAKjB,EAAgBC,CAAI,EACzB,KAAMA,EACN,WAAYe,CACd,CAAA,EACE,IACN,EAEA,OAAOE,EAAA,cAACC,EAAA,CAAa,IAAKT,CAAAA,EAAMC,EAAI,SAAS,IAAIK,CAAU,CAAE,CAC/D,EAEAT,EAAgB,YAAc"}

package/dist/components/markdown-content/components/MarkdownCode.d.ts

@@ -1,7 +1,7 @@
+/// <reference types="react" />
 import { Code } from 'mdast';
-import * as React from 'react';
 declare type MarkdownCodeProps = {
     node: Code;
 };
-export declare const MarkdownCode: React.FC<MarkdownCodeProps>;
+export declare const MarkdownCode: ({ node }: MarkdownCodeProps) => JSX.Element;
 export {};

package/dist/components/markdown-content/components/MarkdownCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownCode.js","sources":["../../../../src/components/markdown-content/components/MarkdownCode.tsx"],"sourcesContent":["import { Code } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../../box/Box'\n\ntype MarkdownCodeProps = {\n  node: Code\n}\n\nconst StyledMarkdownCode = styled(Box, {\n  bg: '$tonal100',\n  borderRadius: '$1',\n  color: '$tonal600',\n  fontFamily: '$mono',\n  fontSize: '$sm',\n  lineHeight: 1.4,\n  my: '$4',\n  p: '$3'\n})\n\nexport const MarkdownCode: React.FC<MarkdownCodeProps> = ({ node }) => (\n  <StyledMarkdownCode as=\"pre\">{node.value}</StyledMarkdownCode>\n)\n"],"names":["StyledMarkdownCode","styled","Box","MarkdownCode","node","React"],"mappings":"6GAWA,MAAMA,EAAqBC,EAAOC,EAAK,CACrC,GAAI,YACJ,aAAc,KACd,MAAO,YACP,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,GAAI,KACJ,EAAG,IACL,CAAC,EAEYC,EAA4C,CAAC,CAAE,KAAAC,CAAK,IAC/DC,EAAA,cAACL,EAAA,CAAmB,GAAG,KAAOI,EAAAA,EAAK,KAAM"}
+{"version":3,"file":"MarkdownCode.js","sources":["../../../../src/components/markdown-content/components/MarkdownCode.tsx"],"sourcesContent":["import { Code } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../../box/Box'\n\ntype MarkdownCodeProps = {\n  node: Code\n}\n\nconst StyledMarkdownCode = styled(Box, {\n  bg: '$tonal100',\n  borderRadius: '$1',\n  color: '$tonal600',\n  fontFamily: '$mono',\n  fontSize: '$sm',\n  lineHeight: 1.4,\n  my: '$4',\n  p: '$3'\n})\n\nexport const MarkdownCode = ({ node }: MarkdownCodeProps) => (\n  <StyledMarkdownCode as=\"pre\">{node.value}</StyledMarkdownCode>\n)\n"],"names":["StyledMarkdownCode","styled","Box","MarkdownCode","node","React"],"mappings":"6GAWA,MAAMA,EAAqBC,EAAOC,EAAK,CACrC,GAAI,YACJ,aAAc,KACd,MAAO,YACP,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,GAAI,KACJ,EAAG,IACL,CAAC,EAEYC,EAAe,CAAC,CAAE,KAAAC,CAAK,IAClCC,EAAA,cAACL,EAAA,CAAmB,GAAG,KAAOI,EAAAA,EAAK,KAAM"}

package/dist/components/markdown-content/components/MarkdownEmphasis.d.ts

@@ -335,5 +335,5 @@ export declare const StyledMarkdownEmphasis: import("@stitches/react/types/style
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export declare const MarkdownEmphasis: React.FC<MarkdownEmphasisProps>;
+export declare const MarkdownEmphasis: ({ node, handleNode }: MarkdownEmphasisProps) => JSX.Element;
 export {};

package/dist/components/markdown-content/components/MarkdownEmphasis.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEmphasis.js","sources":["../../../../src/components/markdown-content/components/MarkdownEmphasis.tsx"],"sourcesContent":["import { Content, Emphasis } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\ntype MarkdownEmphasisProps = {\n  node: Emphasis\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const StyledMarkdownEmphasis = styled('em', { fontStyle: 'italic' })\n\nexport const MarkdownEmphasis: React.FC<MarkdownEmphasisProps> = ({\n  node,\n  handleNode\n}) => (\n  <StyledMarkdownEmphasis>\n    {node.children?.map(handleNode)}\n  </StyledMarkdownEmphasis>\n)\n"],"names":["StyledMarkdownEmphasis","styled","MarkdownEmphasis","node","handleNode","_a","React"],"mappings":"sEAUa,MAAAA,EAAyBC,EAAO,KAAM,CAAE,UAAW,QAAS,CAAC,EAE7DC,EAAoD,CAAC,CAChE,KAAAC,EACA,WAAAC,CACF,IAAG,CAfH,IAAAC,EAgBE,OAAAC,EAAA,cAACN,EAAA,MACEK,EAAAF,EAAK,WAAL,KAAAE,OAAAA,EAAe,IAAID,CACtB,CAAA,CAAA"}
+{"version":3,"file":"MarkdownEmphasis.js","sources":["../../../../src/components/markdown-content/components/MarkdownEmphasis.tsx"],"sourcesContent":["import { Content, Emphasis } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\ntype MarkdownEmphasisProps = {\n  node: Emphasis\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const StyledMarkdownEmphasis = styled('em', { fontStyle: 'italic' })\n\nexport const MarkdownEmphasis = ({\n  node,\n  handleNode\n}: MarkdownEmphasisProps) => (\n  <StyledMarkdownEmphasis>\n    {node.children?.map(handleNode)}\n  </StyledMarkdownEmphasis>\n)\n"],"names":["StyledMarkdownEmphasis","styled","MarkdownEmphasis","node","handleNode","_a","React"],"mappings":"sEAUa,MAAAA,EAAyBC,EAAO,KAAM,CAAE,UAAW,QAAS,CAAC,EAE7DC,EAAmB,CAAC,CAC/B,KAAAC,EACA,WAAAC,CACF,IAA0B,CAf1B,IAAAC,EAgBE,OAAAC,EAAA,cAACN,EAAA,MACEK,EAAAF,EAAK,WAAL,KAAAE,OAAAA,EAAe,IAAID,CACtB,CAAA,CAAA"}

package/dist/components/markdown-content/components/MarkdownHeading.d.ts

@@ -4,5 +4,5 @@ declare type MarkdownHeadingProps = {
     node: HeadingType;
     handleNode: (node: Content) => React.ReactElement;
 };
-export declare const MarkdownHeading: React.FC<MarkdownHeadingProps>;
+export declare const MarkdownHeading: ({ node, handleNode, ...rest }: MarkdownHeadingProps) => JSX.Element;
 export {};

package/dist/components/markdown-content/components/MarkdownHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownHeading.js","sources":["../../../../src/components/markdown-content/components/MarkdownHeading.tsx"],"sourcesContent":["import { Content, Heading as HeadingType } from 'mdast'\nimport * as React from 'react'\n\nimport { Heading, HeadingProps } from '../../heading/Heading'\n\ntype MarkdownHeadingProps = {\n  node: HeadingType\n  handleNode: (node: Content) => React.ReactElement\n}\n\nconst getHeadingProps = (depth: number): HeadingProps => {\n  switch (depth) {\n    case 1:\n      return { size: 'xl', as: 'h1' }\n    case 2:\n      return { size: 'lg', as: 'h2' }\n    case 3:\n      return { size: 'md', as: 'h3' }\n    case 4:\n      return { size: 'sm', as: 'h4' }\n    case 5:\n      return { size: 'xs', as: 'h5' }\n    default:\n      return { size: 'xs', as: 'h6' }\n  }\n}\n\nexport const MarkdownHeading: React.FC<MarkdownHeadingProps> = ({\n  node,\n  handleNode,\n  ...rest\n}) => {\n  const { as, size } = getHeadingProps(node.depth)\n\n  return (\n    <Heading as={as} size={size} {...rest}>\n      {node.children?.map(handleNode)}\n    </Heading>\n  )\n}\n"],"names":["getHeadingProps","depth","MarkdownHeading","node","handleNode","rest","_a","as","size","React","Heading"],"mappings":"2EAUA,MAAMA,EAAmBC,GAAgC,CACvD,OAAQA,OAEJ,GAAA,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,MAE9B,GAAA,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,MAE9B,GAAA,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,MAC3B,GACH,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,SAE9B,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,UAE9B,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,EAEpC,EAEaC,EAAkD,CAAC,CAC9D,KAAAC,EACA,WAAAC,KACGC,CACL,IAAM,CA/BN,IAAAC,EAgCE,KAAM,CAAE,GAAAC,EAAI,KAAAC,CAAK,EAAIR,EAAgBG,EAAK,KAAK,EAE/C,OACEM,EAAA,cAACC,EAAA,CAAQ,GAAIH,EAAI,KAAMC,EAAO,GAAGH,CAAAA,GAC9BC,EAAAH,EAAK,WAAL,KAAAG,OAAAA,EAAe,IAAIF,CAAAA,CACtB,CAEJ"}
+{"version":3,"file":"MarkdownHeading.js","sources":["../../../../src/components/markdown-content/components/MarkdownHeading.tsx"],"sourcesContent":["import { Content, Heading as HeadingType } from 'mdast'\nimport * as React from 'react'\n\nimport { Heading, HeadingProps } from '../../heading/Heading'\n\ntype MarkdownHeadingProps = {\n  node: HeadingType\n  handleNode: (node: Content) => React.ReactElement\n}\n\nconst getHeadingProps = (depth: number): HeadingProps => {\n  switch (depth) {\n    case 1:\n      return { size: 'xl', as: 'h1' }\n    case 2:\n      return { size: 'lg', as: 'h2' }\n    case 3:\n      return { size: 'md', as: 'h3' }\n    case 4:\n      return { size: 'sm', as: 'h4' }\n    case 5:\n      return { size: 'xs', as: 'h5' }\n    default:\n      return { size: 'xs', as: 'h6' }\n  }\n}\n\nexport const MarkdownHeading = ({\n  node,\n  handleNode,\n  ...rest\n}: MarkdownHeadingProps) => {\n  const { as, size } = getHeadingProps(node.depth)\n\n  return (\n    <Heading as={as} size={size} {...rest}>\n      {node.children?.map(handleNode)}\n    </Heading>\n  )\n}\n"],"names":["getHeadingProps","depth","MarkdownHeading","node","handleNode","rest","_a","as","size","React","Heading"],"mappings":"2EAUA,MAAMA,EAAmBC,GAAgC,CACvD,OAAQA,OAEJ,GAAA,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,MAE9B,GAAA,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,MAE9B,GAAA,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,MAC3B,GACH,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,SAE9B,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,UAE9B,MAAO,CAAE,KAAM,KAAM,GAAI,IAAK,EAEpC,EAEaC,EAAkB,CAAC,CAC9B,KAAAC,EACA,WAAAC,KACGC,CACL,IAA4B,CA/B5B,IAAAC,EAgCE,KAAM,CAAE,GAAAC,EAAI,KAAAC,CAAK,EAAIR,EAAgBG,EAAK,KAAK,EAE/C,OACEM,EAAA,cAACC,EAAA,CAAQ,GAAIH,EAAI,KAAMC,EAAO,GAAGH,CAAAA,GAC9BC,EAAAH,EAAK,WAAL,KAAAG,OAAAA,EAAe,IAAIF,CAAAA,CACtB,CAEJ"}

package/dist/components/markdown-content/components/MarkdownImage.d.ts

@@ -1,9 +1,9 @@
+/// <reference types="react" />
 import { Image as ImageType } from 'mdast';
-import * as React from 'react';
 import { CSS } from '../../../stitches';
 declare type MarkdownImageProps = {
     node: ImageType;
     css?: CSS;
 };
-export declare const MarkdownImage: React.FC<MarkdownImageProps>;
+export declare const MarkdownImage: ({ node, css }: MarkdownImageProps) => JSX.Element;
 export {};

package/dist/components/markdown-content/components/MarkdownImage.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{Image as t}from"../../image/Image.js";const m=({node:r,css:a})=>{var e;return o.createElement(t,{src:r.url,alt:(e=r.alt)!=null?e:void 0,css:a})};export{m as MarkdownImage};
+import*as t from"react";import{Image as a}from"../../image/Image.js";const m=({node:r,css:o})=>{var e;return t.createElement(a,{src:r.url,alt:(e=r.alt)!=null?e:void 0,css:o})};export{m as MarkdownImage};
 //# sourceMappingURL=MarkdownImage.js.map

package/dist/components/markdown-content/components/MarkdownImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownImage.js","sources":["../../../../src/components/markdown-content/components/MarkdownImage.tsx"],"sourcesContent":["import { Image as ImageType } from 'mdast'\nimport * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Image } from '../../image/Image'\n\ntype MarkdownImageProps = {\n  node: ImageType\n  css?: CSS\n}\n\nexport const MarkdownImage: React.FC<MarkdownImageProps> = ({ node, css }) => (\n  <Image src={node.url} alt={node.alt ?? undefined} css={css} />\n)\n"],"names":["MarkdownImage","node","css","_a","React","Image"],"mappings":"qEAYO,MAAMA,EAA8C,CAAC,CAAE,KAAAC,EAAM,IAAAC,CAAI,IAAG,CAZ3E,IAAAC,EAaE,OAAAC,EAAA,cAACC,EAAA,CAAM,IAAKJ,EAAK,IAAK,KAAKE,EAAAF,EAAK,MAAL,KAAAE,EAAY,OAAW,IAAKD,CAAK,CAAA,CAAA"}
+{"version":3,"file":"MarkdownImage.js","sources":["../../../../src/components/markdown-content/components/MarkdownImage.tsx"],"sourcesContent":["import { Image as ImageType } from 'mdast'\nimport * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Image } from '../../image/Image'\n\ntype MarkdownImageProps = {\n  node: ImageType\n  css?: CSS\n}\n\nexport const MarkdownImage = ({ node, css }: MarkdownImageProps) => (\n  <Image src={node.url} alt={node.alt ?? undefined} css={css} />\n)\n"],"names":["MarkdownImage","node","css","_a","React","Image"],"mappings":"qEAYO,MAAMA,EAAgB,CAAC,CAAE,KAAAC,EAAM,IAAAC,CAAI,IAAuB,CAZjE,IAAAC,EAaE,OAAAC,EAAA,cAACC,EAAA,CAAM,IAAKJ,EAAK,IAAK,KAAKE,EAAAF,EAAK,MAAL,KAAAE,EAAY,OAAW,IAAKD,CAAK,CAAA,CAAA"}