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

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuContent.js","sources":["../../../src/components/dropdown-menu/DropdownMenuContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\nimport {\n  slideDownAndFade,\n  slideLeftAndFade,\n  slideRightAndFade,\n  slideUpAndFade\n} from '~/utilities'\n\nexport const DropdownMenuContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$0',\n  boxShadow: '$0',\n  py: '$2',\n  zIndex: 10,\n  '@allowMotion': {\n    animationDuration: '250ms',\n    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n    willChange: 'transform, opacity',\n    '&[data-state=\"open\"]': {\n      '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n      '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n      '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n      '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n    }\n  }\n})\n"],"names":["DropdownMenuContent","styled","Content","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade"],"mappings":"uXAUa,MAAAA,EAAsBC,EAAOC,EAAS,CACjD,GAAI,QACJ,aAAc,KACd,UAAW,KACX,GAAI,KACJ,OAAQ,GACR,eAAgB,CACd,kBAAmB,QACnB,wBAAyB,gCACzB,WAAY,qBACZ,uBAAwB,CACtB,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,CACF,CAAC"}
+{"version":3,"file":"DropdownMenuContent.js","sources":["../../../src/components/dropdown-menu/DropdownMenuContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/styled'\n\nexport const DropdownMenuContent = styled(Content, {\n  base: [\n    'bg-white',\n    'rounded-sm',\n    'shadow-sm',\n    'py-2',\n    'z-10',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ]\n})\n"],"names":["DropdownMenuContent","styled","Content"],"mappings":"iGAIa,MAAAA,EAAsBC,EAAOC,EAAS,CACjD,KAAM,CACJ,WACA,aACA,YACA,OACA,OACA,0BACA,iDACA,kDACA,mDACA,kDACA,2DACA,6DACF,CACF,CAAC"}

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

@@ -1,2 +1,2 @@
-import{Item as e}from"@radix-ui/react-dropdown-menu";import{styled as t}from"../../stitches.js";const o={alignItems:"center",color:"$grey1000",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:400,position:"relative",px:"$3",py:"$2","&[data-disabled]":{opacity:.3,cursor:"not-allowed",pointerEvents:"none"},'&[aria-current="page"], &:focus':{"&::before":{borderLeft:"2px solid currentColor",content:"",height:"$2",left:0,outline:"none",position:"absolute",transform:"scale(1)"}},"&:focus":{color:"$primary900",outline:"none"},"&:hover":{textDecoration:"underline"}},r=t(e,o);export{r as DropdownMenuItem,o as itemStyles};
+import{Item as e}from"@radix-ui/react-dropdown-menu";import{styled as r}from"../../styled.js";const o=r(e,{base:["items-center","text-grey-1000","cursor-pointer","flex","font-body","font-normal","relative","px-3","py-2","data-disabled:cursor-not-allowed","data-disabled:opacity-30","data-disabled:pointer-events-none","aria-[current=page]:before:absolute","aria-[current=page]:before:border-l-2","aria-[current=page]:before:border-l-current","aria-[current=page]:before:content-['']","aria-[current=page]:before:h-6","aria-[current=page]:before:left-0","aria-[current=page]:before:outline-none","aria-[current=page]:before:scale-100","focus:before:absolute","focus:before:border-l-2","focus:before:border-l-current","focus:before:content-['']","focus:before:h-6","focus:before:left-0","focus:before:outline-none","focus:before:scale-100","focus:outline-none","focus:text-primary-900","hover:underline"]});export{o as DropdownMenuItem};
 //# sourceMappingURL=DropdownMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuItem.js","sources":["../../../src/components/dropdown-menu/DropdownMenuItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\n\nexport const itemStyles = {\n  alignItems: 'center',\n  color: '$grey1000',\n  cursor: 'pointer',\n  display: 'flex',\n  fontFamily: '$body',\n  fontWeight: 400,\n  position: 'relative',\n  px: '$3',\n  py: '$2',\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed',\n    pointerEvents: 'none'\n  },\n  '&[aria-current=\"page\"], &:focus': {\n    '&::before': {\n      borderLeft: '2px solid currentColor',\n      content: '',\n      height: '$2',\n      left: 0,\n      outline: 'none',\n      position: 'absolute',\n      transform: 'scale(1)'\n    }\n  },\n  '&:focus': {\n    color: '$primary900',\n    outline: 'none'\n  },\n  '&:hover': { textDecoration: 'underline' }\n}\n\nexport const DropdownMenuItem = styled(Item, itemStyles)\n"],"names":["itemStyles","DropdownMenuItem","styled","Item"],"mappings":"gGAIa,MAAAA,EAAa,CACxB,WAAY,SACZ,MAAO,YACP,OAAQ,UACR,QAAS,OACT,WAAY,QACZ,WAAY,IACZ,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,mBAAoB,CAClB,QAAS,GACT,OAAQ,cACR,cAAe,MACjB,EACA,kCAAmC,CACjC,YAAa,CACX,WAAY,yBACZ,QAAS,GACT,OAAQ,KACR,KAAM,EACN,QAAS,OACT,SAAU,WACV,UAAW,UACb,CACF,EACA,UAAW,CACT,MAAO,cACP,QAAS,MACX,EACA,UAAW,CAAE,eAAgB,WAAY,CAC3C,EAEaC,EAAmBC,EAAOC,EAAMH,CAAU"}
+{"version":3,"file":"DropdownMenuItem.js","sources":["../../../src/components/dropdown-menu/DropdownMenuItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/styled'\n\nexport const DropdownMenuItem = styled(Item, {\n  base: [\n    'items-center',\n    'text-grey-1000',\n    'cursor-pointer',\n    'flex',\n    'font-body',\n    'font-normal',\n    'relative',\n    'px-3',\n    'py-2',\n    'data-disabled:cursor-not-allowed',\n    'data-disabled:opacity-30',\n    'data-disabled:pointer-events-none',\n    'aria-[current=page]:before:absolute',\n    'aria-[current=page]:before:border-l-2',\n    'aria-[current=page]:before:border-l-current',\n    \"aria-[current=page]:before:content-['']\",\n    'aria-[current=page]:before:h-6',\n    'aria-[current=page]:before:left-0',\n    'aria-[current=page]:before:outline-none',\n    'aria-[current=page]:before:scale-100',\n    'focus:before:absolute',\n    'focus:before:border-l-2',\n    'focus:before:border-l-current',\n    \"focus:before:content-['']\",\n    'focus:before:h-6',\n    'focus:before:left-0',\n    'focus:before:outline-none',\n    'focus:before:scale-100',\n    'focus:outline-none',\n    'focus:text-primary-900',\n    'hover:underline'\n  ]\n})\n"],"names":["DropdownMenuItem","styled","Item"],"mappings":"oGAIaA,EAAmBC,EAAOC,EAAM,CAC3C,KAAM,CACJ,eACA,iBACA,iBACA,OACA,YACA,cACA,WACA,OACA,OACA,mCACA,2BACA,oCACA,sCACA,wCACA,8CACA,0CACA,iCACA,oCACA,0CACA,uCACA,wBACA,0BACA,gCACA,4BACA,mBACA,sBACA,4BACA,yBACA,qBACA,yBACA,iBACF,CACF,CAAC"}

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

@@ -1,2 +1,2 @@
-import r from"react";import{styled as n}from"../../stitches.js";import{getExternalAnchorProps as m}from"../../utilities/uri/index.js";import{DropdownMenuItem as i}from"./DropdownMenuItem.js";const l=n("a",{textDecoration:"none"}),p=({children:t,href:e,...o})=>r.createElement(i,{...o,asChild:!0},r.createElement(l,{href:e,role:"menuitem",...m(e)},t));export{p as DropdownMenuLinkItem};
+import r from"react";import{styled as n}from"../../styled.js";import{getExternalAnchorProps as m}from"../../utilities/uri/index.js";import{DropdownMenuItem as i}from"./DropdownMenuItem.js";const l=n("a",{base:["no-underline"]}),p=({children:o,href:e,...t})=>r.createElement(i,{...t,asChild:!0},r.createElement(l,{href:e,role:"menuitem",...m(e)},o));export{p as DropdownMenuLinkItem};
 //# sourceMappingURL=DropdownMenuLinkItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuLinkItem.js","sources":["../../../src/components/dropdown-menu/DropdownMenuLinkItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { DropdownMenuItem } from './DropdownMenuItem'\n\nconst StyledLink = styled('a', {\n  textDecoration: 'none'\n})\n\nexport const DropdownMenuLinkItem = ({\n  children,\n  href,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem> & { href: string }) => (\n  <DropdownMenuItem {...props} asChild>\n    <StyledLink href={href} role=\"menuitem\" {...getExternalAnchorProps(href)}>\n      {children}\n    </StyledLink>\n  </DropdownMenuItem>\n)\n"],"names":["StyledLink","styled","DropdownMenuLinkItem","children","href","props","React","DropdownMenuItem","getExternalAnchorProps"],"mappings":"+LAOA,MAAMA,EAAaC,EAAO,IAAK,CAC7B,eAAgB,MAClB,CAAC,EAEYC,EAAuB,CAAC,CACnC,SAAAC,EACA,KAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAkB,GAAGF,EAAO,QAAO,EAAA,EAClCC,EAAA,cAACN,EAAA,CAAW,KAAMI,EAAM,KAAK,WAAY,GAAGI,EAAuBJ,CAAI,CACpED,EAAAA,CACH,CACF"}
+{"version":3,"file":"DropdownMenuLinkItem.js","sources":["../../../src/components/dropdown-menu/DropdownMenuLinkItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { DropdownMenuItem } from './DropdownMenuItem'\n\nconst StyledLink = styled('a', {\n  base: ['no-underline']\n})\n\nexport const DropdownMenuLinkItem = ({\n  children,\n  href,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem> & { href: string }) => (\n  <DropdownMenuItem {...props} asChild>\n    <StyledLink href={href} role=\"menuitem\" {...getExternalAnchorProps(href)}>\n      {children}\n    </StyledLink>\n  </DropdownMenuItem>\n)\n"],"names":["StyledLink","styled","DropdownMenuLinkItem","children","href","props","React","DropdownMenuItem","getExternalAnchorProps"],"mappings":"6LAOA,MAAMA,EAAaC,EAAO,IAAK,CAC7B,KAAM,CAAC,cAAc,CACvB,CAAC,EAEYC,EAAuB,CAAC,CACnC,SAAAC,EACA,KAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAkB,GAAGF,EAAO,QAAO,EAClCC,EAAAA,EAAA,cAACN,EAAA,CAAW,KAAMI,EAAM,KAAK,WAAY,GAAGI,EAAuBJ,CAAI,CACpED,EAAAA,CACH,CACF"}

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

@@ -1,2 +1,2 @@
-import{Separator as o}from"@radix-ui/react-dropdown-menu";import{styled as r}from"../../stitches.js";const t=r(o,{height:"1px",backgroundColor:"$grey600",my:"$2"});export{t as DropdownMenuSeparator};
+import{Separator as r}from"@radix-ui/react-dropdown-menu";import{styled as o}from"../../styled.js";const e=o(r,{base:["h-px","bg-grey-600","my-2"]});export{e as DropdownMenuSeparator};
 //# sourceMappingURL=DropdownMenuSeparator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSeparator.js","sources":["../../../src/components/dropdown-menu/DropdownMenuSeparator.tsx"],"sourcesContent":["import { Separator } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\n\nexport const DropdownMenuSeparator = styled(Separator, {\n  height: '1px',\n  backgroundColor: '$grey600',\n  my: '$2'\n})\n"],"names":["DropdownMenuSeparator","styled","Separator"],"mappings":"qGAIa,MAAAA,EAAwBC,EAAOC,EAAW,CACrD,OAAQ,MACR,gBAAiB,WACjB,GAAI,IACN,CAAC"}
+{"version":3,"file":"DropdownMenuSeparator.js","sources":["../../../src/components/dropdown-menu/DropdownMenuSeparator.tsx"],"sourcesContent":["import { Separator } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/styled'\n\nexport const DropdownMenuSeparator = styled(Separator, {\n  base: ['h-px', 'bg-grey-600', 'my-2']\n})\n"],"names":["DropdownMenuSeparator","styled","Separator"],"mappings":"mGAIa,MAAAA,EAAwBC,EAAOC,EAAW,CACrD,KAAM,CAAC,OAAQ,cAAe,MAAM,CACtC,CAAC"}

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

@@ -1,2 +1,2 @@
-import{Trigger as o}from"@radix-ui/react-dropdown-menu";import{styled as r}from"../../stitches.js";const e=r(o,{"&[disabled]":{opacity:.3,cursor:"not-allowed"}});export{e as DropdownMenuTrigger};
+import{Trigger as o}from"@radix-ui/react-dropdown-menu";import{styled as r}from"../../styled.js";const e=r(o,{base:["disabled:cursor-not-allowed","disabled:opacity-30"]});export{e as DropdownMenuTrigger};
 //# sourceMappingURL=DropdownMenuTrigger.js.map

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

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

package/dist/components/empty-state/EmptyState.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Flex as i}from"../flex/Flex.js";import{styled as o}from"../../stitches.js";import{EmptyStateProvider as p}from"./EmptyState.context.js";import{EmptyStateBody as a}from"./EmptyStateBody.js";import{EmptyStateImage as s}from"./EmptyStateImage.js";import{EmptyStateTitle as l}from"./EmptyStateTitle.js";const n=o(i,{flexDirection:"column",alignItems:"center",textAlign:"center","& > *:last-child":{mb:0},variants:{size:{xs:{p:"$2"},sm:{p:"$3"},md:{p:"$4"},lg:{p:"$5"},xl:{p:"$6"}}}}),m=({size:t="sm",...r})=>e.createElement(p,{size:t},e.createElement(n,{size:t,...r})),y=Object.assign(m,{Image:s,Title:l,Body:a});m.displayName="EmptyState";export{y as EmptyState};
+import*as e from"react";import{Flex as o}from"../flex/Flex.js";import{styled as p}from"../../styled.js";import{EmptyStateProvider as a}from"./EmptyState.context.js";import{EmptyStateBody as i}from"./EmptyStateBody.js";import{EmptyStateImage as s}from"./EmptyStateImage.js";import{EmptyStateTitle as l}from"./EmptyStateTitle.js";const y=p(o,{base:["flex-col","items-center","text-center","*:last:mb-0"],variants:{size:{xs:["p-2"],sm:["p-3"],md:["p-4"],lg:["p-8"],xl:["p-10"]}}}),m=({size:t="sm",...r})=>e.createElement(a,{size:t},e.createElement(y,{size:t,...r})),n=Object.assign(m,{Image:s,Title:l,Body:i});m.displayName="EmptyState";export{n as EmptyState};
 //# sourceMappingURL=EmptyState.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\n\nimport { EmptyStateProvider } from './EmptyState.context'\nimport { EmptyStateBody } from './EmptyStateBody'\nimport { EmptyStateImage } from './EmptyStateImage'\nimport { EmptyStateTitle } from './EmptyStateTitle'\n\nconst EmptyStateContainer = styled(Flex, {\n  flexDirection: 'column',\n  alignItems: 'center',\n  textAlign: 'center',\n  '& > *:last-child': {\n    mb: 0\n  },\n  variants: {\n    size: {\n      xs: {\n        p: '$2'\n      },\n      sm: {\n        p: '$3'\n      },\n      md: {\n        p: '$4'\n      },\n      lg: {\n        p: '$5'\n      },\n      xl: {\n        p: '$6'\n      }\n    }\n  }\n})\n\nexport type EmptyStateProps = React.ComponentProps<typeof EmptyStateContainer>\n\nconst EmptyStateComponent = ({ size = 'sm', ...rest }: EmptyStateProps) => (\n  <EmptyStateProvider size={size}>\n    <EmptyStateContainer size={size} {...rest} />\n  </EmptyStateProvider>\n)\n\nexport const EmptyState = Object.assign(EmptyStateComponent, {\n  Image: EmptyStateImage,\n  Title: EmptyStateTitle,\n  Body: EmptyStateBody\n})\n\nEmptyStateComponent.displayName = 'EmptyState'\n"],"names":["EmptyStateContainer","styled","Flex","EmptyStateComponent","size","rest","React","EmptyStateProvider","EmptyState","EmptyStateImage","EmptyStateTitle","EmptyStateBody"],"mappings":"0UAUA,MAAMA,EAAsBC,EAAOC,EAAM,CACvC,cAAe,SACf,WAAY,SACZ,UAAW,SACX,mBAAoB,CAClB,GAAI,CACN,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,CACF,CACF,CACF,CAAC,EAIKC,EAAsB,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,IAClDC,EAAA,cAACC,EAAA,CAAmB,KAAMH,CAAAA,EACxBE,EAAA,cAACN,EAAA,CAAoB,KAAMI,EAAO,GAAGC,CAAAA,CAAM,CAC7C,EAGWG,EAAa,OAAO,OAAOL,EAAqB,CAC3D,MAAOM,EACP,MAAOC,EACP,KAAMC,CACR,CAAC,EAEDR,EAAoB,YAAc"}
+{"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/styled'\n\nimport { EmptyStateProvider } from './EmptyState.context'\nimport { EmptyStateBody } from './EmptyStateBody'\nimport { EmptyStateImage } from './EmptyStateImage'\nimport { EmptyStateTitle } from './EmptyStateTitle'\n\nconst EmptyStateContainer = styled(Flex, {\n  base: ['flex-col', 'items-center', 'text-center', '*:last:mb-0'],\n  variants: {\n    size: {\n      xs: ['p-2'],\n      sm: ['p-3'],\n      md: ['p-4'],\n      lg: ['p-8'],\n      xl: ['p-10']\n    }\n  }\n})\n\nexport type EmptyStateProps = React.ComponentProps<typeof EmptyStateContainer>\n\nconst EmptyStateComponent = ({ size = 'sm', ...rest }: EmptyStateProps) => (\n  <EmptyStateProvider size={size}>\n    <EmptyStateContainer size={size} {...rest} />\n  </EmptyStateProvider>\n)\n\nexport const EmptyState = Object.assign(EmptyStateComponent, {\n  Image: EmptyStateImage,\n  Title: EmptyStateTitle,\n  Body: EmptyStateBody\n})\n\nEmptyStateComponent.displayName = 'EmptyState'\n"],"names":["EmptyStateContainer","styled","Flex","EmptyStateComponent","size","rest","React","EmptyStateProvider","EmptyState","EmptyStateImage","EmptyStateTitle","EmptyStateBody"],"mappings":"wUAUA,MAAMA,EAAsBC,EAAOC,EAAM,CACvC,KAAM,CAAC,WAAY,eAAgB,cAAe,aAAa,EAC/D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,MAAM,CACb,CACF,CACF,CAAC,EAIKC,EAAsB,CAAC,CAAE,KAAAC,EAAO,KAAM,GAAGC,CAAK,IAClDC,EAAA,cAACC,EAAA,CAAmB,KAAMH,GACxBE,EAAA,cAACN,EAAA,CAAoB,KAAMI,EAAO,GAAGC,CAAM,CAAA,CAC7C,EAGWG,EAAa,OAAO,OAAOL,EAAqB,CAC3D,MAAOM,EACP,MAAOC,EACP,KAAMC,CACR,CAAC,EAEDR,EAAoB,YAAc"}

package/dist/components/empty-state/EmptyStateBody.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{Text as m}from"../text/Text.js";import{styled as r}from"../../stitches.js";import{EmptyStateContext as s}from"./EmptyState.context.js";const i=r(m,{color:"$grey800",fontWeight:400,variants:{size:{xs:{fontSize:"$sm",mb:"$4"},sm:{fontSize:"$sm",mb:"$4"},md:{fontSize:"$sm",mb:"$4"},lg:{fontSize:"$md",mb:"calc($4 + $2)"},xl:{fontSize:"$md",mb:"calc($4 + $2)"}}}}),n=e=>{const{size:o}=t.useContext(s);return t.createElement(i,{size:o,...e})};export{n as EmptyStateBody};
+import*as t from"react";import{Text as o}from"../text/Text.js";import{styled as s}from"../../styled.js";import{EmptyStateContext as r}from"./EmptyState.context.js";const x=s(o,{base:["text-grey-800","font-normal"],variants:{size:{xs:["mb-4","text-sm"],sm:["mb-4","text-sm"],md:["mb-4","text-sm"],lg:["mb-6","text-md"],xl:["mb-6","text-md"]}}}),n=e=>{const{size:m}=t.useContext(r);return t.createElement(x,{size:m,...e})};export{n as EmptyStateBody};
 //# sourceMappingURL=EmptyStateBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateBody.js","sources":["../../../src/components/empty-state/EmptyStateBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateBody = styled(Text, {\n  color: '$grey800',\n  fontWeight: 400,\n  variants: {\n    size: {\n      xs: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      sm: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      md: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      lg: {\n        fontSize: '$md',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        fontSize: '$md',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n\ntype EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody> & {\n  as?: React.ComponentType | React.ElementType\n}\n\nexport const EmptyStateBody = (props: EmptyStateBodyProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateBody size={size} {...props} />\n}\n"],"names":["StyledEmptyStateBody","styled","Text","EmptyStateBody","props","size","React","EmptyStateContext"],"mappings":"sKAOA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,MAAO,WACP,WAAY,IACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,eACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,eACN,CACF,CACF,CACF,CAAC,EAMYC,EAAkBC,GAA+B,CAC5D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACN,EAAA,CAAqB,KAAMK,EAAO,GAAGD,EAAO,CACtD"}
+{"version":3,"file":"EmptyStateBody.js","sources":["../../../src/components/empty-state/EmptyStateBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/styled'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateBody = styled(Text, {\n  base: ['text-grey-800', 'font-normal'],\n  variants: {\n    size: {\n      xs: ['mb-4', 'text-sm'],\n      sm: ['mb-4', 'text-sm'],\n      md: ['mb-4', 'text-sm'],\n      lg: ['mb-6', 'text-md'],\n      xl: ['mb-6', 'text-md']\n    }\n  }\n})\n\ntype EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody> & {\n  as?: React.ComponentType | React.ElementType\n}\n\nexport const EmptyStateBody = (props: EmptyStateBodyProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateBody size={size} {...props} />\n}\n"],"names":["StyledEmptyStateBody","styled","Text","EmptyStateBody","props","size","React","EmptyStateContext"],"mappings":"oKAOA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,KAAM,CAAC,gBAAiB,aAAa,EACrC,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,CACxB,CACF,CACF,CAAC,EAMYC,EAAkBC,GAA+B,CAC5D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACN,EAAA,CAAqB,KAAMK,EAAO,GAAGD,EAAO,CACtD"}

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

@@ -1,2 +1,2 @@
-import t from"react";import{Image as x}from"../image/Image.js";import{styled as a}from"../../stitches.js";import{EmptyStateContext as i}from"./EmptyState.context.js";const p=a(x,{variants:{size:{xs:{maxWidth:"56px",maxHeight:"32px",mb:"$4"},sm:{maxWidth:"84px",maxHeight:"48px",mb:"$4"},md:{maxWidth:"126px",maxHeight:"72px",mb:"$4"},lg:{maxWidth:"190px",maxHeight:"142px",mb:"calc($4 + $2)"},xl:{maxWidth:"285px",maxHeight:"213px",mb:"calc($4 + $2)"}}}}),o=m=>{const{size:e}=t.useContext(i);return t.createElement(p,{size:e,...m})};export{o as EmptyStateImage};
+import m from"react";import{Image as x}from"../image/Image.js";import{styled as a}from"../../styled.js";import{EmptyStateContext as o}from"./EmptyState.context.js";const r=a(x,{base:[],variants:{size:{xs:["max-h-8","max-w-14","mb-4"],sm:["max-h-12","max-w-21","mb-4"],md:["max-h-18","max-w-[126px]","mb-4"],lg:["max-h-[142px]","max-w-[190px]","mb-6"],xl:["max-h-[213px]","max-w-[285px]","mb-6"]}}}),p=t=>{const{size:e}=m.useContext(o);return m.createElement(r,{size:e,...t})};export{p as EmptyStateImage};
 //# sourceMappingURL=EmptyStateImage.js.map

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\nimport { EmptyStateContext } from './EmptyState.context'\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\nexport const EmptyStateImage = (props: EmptyStateImageProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateImage size={size} {...props} />\n}\n"],"names":["StyledEmptyStateImage","styled","Image","EmptyStateImage","props","size","React","EmptyStateContext"],"mappings":"sKAOA,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,EAIYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACN,EAAA,CAAsB,KAAMK,EAAO,GAAGD,CAAAA,CAAO,CACvD"}
+{"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 '~/styled'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateImage = styled(Image, {\n  base: [],\n  variants: {\n    size: {\n      xs: ['max-h-8', 'max-w-14', 'mb-4'],\n      sm: ['max-h-12', 'max-w-21', 'mb-4'],\n      md: ['max-h-18', 'max-w-[126px]', 'mb-4'],\n      lg: ['max-h-[142px]', 'max-w-[190px]', 'mb-6'],\n      xl: ['max-h-[213px]', 'max-w-[285px]', 'mb-6']\n    }\n  }\n})\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage>\n\nexport const EmptyStateImage = (props: EmptyStateImageProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateImage size={size} {...props} />\n}\n"],"names":["StyledEmptyStateImage","styled","Image","EmptyStateImage","props","size","React","EmptyStateContext"],"mappings":"oKAOA,MAAMA,EAAwBC,EAAOC,EAAO,CAC1C,KAAM,GACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAW,WAAY,MAAM,EAClC,GAAI,CAAC,WAAY,WAAY,MAAM,EACnC,GAAI,CAAC,WAAY,gBAAiB,MAAM,EACxC,GAAI,CAAC,gBAAiB,gBAAiB,MAAM,EAC7C,GAAI,CAAC,gBAAiB,gBAAiB,MAAM,CAC/C,CACF,CACF,CAAC,EAIYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACN,EAAA,CAAsB,KAAMK,EAAO,GAAGD,EAAO,CACvD"}

package/dist/components/empty-state/EmptyStateTitle.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as m}from"../../stitches.js";import{EmptyStateContext as n}from"./EmptyState.context.js";const i=m("h2",{color:"$grey800",fontFamily:"$body",fontWeight:600,m:0,variants:{size:{xs:{fontSize:"$md",mb:"$3"},sm:{fontSize:"$md",mb:"$3"},md:{fontSize:"$md",mb:"$3"},lg:{fontSize:"$lg",mb:"$4"},xl:{fontSize:"$lg",mb:"$4"}}}}),r=e=>{const{size:o}=t.useContext(n);return t.createElement(i,{size:o,...e})};export{r as EmptyStateTitle};
+import*as t from"react";import{styled as o}from"../../styled.js";import{EmptyStateContext as s}from"./EmptyState.context.js";const r=o("h2",{base:["text-grey-800","font-body","font-semibold","m-0"],variants:{size:{xs:["mb-3","text-md"],sm:["mb-3","text-md"],md:["mb-3","text-md"],lg:["mb-4","text-lg"],xl:["mb-4","text-lg"]}}}),x=e=>{const{size:m}=t.useContext(s);return t.createElement(r,{size:m,...e})};export{x as EmptyStateTitle};
 //# sourceMappingURL=EmptyStateTitle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateTitle.js","sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled('h2', {\n  color: '$grey800',\n  fontFamily: '$body',\n  fontWeight: 600,\n  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      sm: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      md: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      lg: {\n        fontSize: '$lg',\n        mb: '$4'\n      },\n      xl: {\n        fontSize: '$lg',\n        mb: '$4'\n      }\n    }\n  }\n})\n\ntype EmptyStateTitleProps = React.ComponentProps<\n  typeof StyledEmptyStateTitle\n> & {\n  as?: React.ComponentType | React.ElementType\n}\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"names":["StyledEmptyStateTitle","styled","EmptyStateTitle","props","size","React","EmptyStateContext"],"mappings":"+HAMA,MAAMA,EAAwBC,EAAO,KAAM,CACzC,MAAO,WACP,WAAY,QACZ,WAAY,IACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,CACF,CACF,CACF,CAAC,EAQYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACL,EAAA,CAAsB,KAAMI,EAAO,GAAGD,EAAO,CACvD"}
+{"version":3,"file":"EmptyStateTitle.js","sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled('h2', {\n  base: ['text-grey-800', 'font-body', 'font-semibold', 'm-0'],\n  variants: {\n    size: {\n      xs: ['mb-3', 'text-md'],\n      sm: ['mb-3', 'text-md'],\n      md: ['mb-3', 'text-md'],\n      lg: ['mb-4', 'text-lg'],\n      xl: ['mb-4', 'text-lg']\n    }\n  }\n})\n\ntype EmptyStateTitleProps = React.ComponentProps<\n  typeof StyledEmptyStateTitle\n> & {\n  as?: React.ComponentType | React.ElementType\n}\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"names":["StyledEmptyStateTitle","styled","EmptyStateTitle","props","size","React","EmptyStateContext"],"mappings":"6HAMA,MAAMA,EAAwBC,EAAO,KAAM,CACzC,KAAM,CAAC,gBAAiB,YAAa,gBAAiB,KAAK,EAC3D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,CACxB,CACF,CACF,CAAC,EAQYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACL,EAAA,CAAsB,KAAMI,EAAO,GAAGD,EAAO,CACvD"}

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

@@ -1,2 +1,2 @@
-import*as o from"react";import{Text as s}from"../text/Text.js";const t=({children:e,css:r})=>o.createElement(s,{size:"sm",css:{color:"$grey700",maxWidth:"80ch",...r}},e);export{t as Description};
+import r from"clsx";import*as t from"react";import{Text as o}from"../text/Text.js";const s=({children:e,className:m})=>t.createElement(o,{size:"sm",className:r("text-grey-700","max-w-[80ch]",m)},e);export{s as Description};
 //# sourceMappingURL=FieldDescription.js.map

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 = ({\n  children,\n  css\n}: React.PropsWithChildren<DescriptionProps>) => (\n  <Text size=\"sm\" css={{ color: '$grey700', 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,WAAY,SAAU,OAAQ,GAAGF,CAAI,GAChED,CACH"}
+{"version":3,"file":"FieldDescription.js","sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Text } from '~/components/text'\n\nexport const Description = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => (\n  <Text size=\"sm\" className={clsx('text-grey-700', 'max-w-[80ch]', className)}>\n    {children}\n  </Text>\n)\n"],"names":["Description","children","className","React","Text","clsx"],"mappings":"mFAKO,MAAMA,EAAc,CAAC,CAC1B,SAAAC,EACA,UAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,UAAWC,EAAK,gBAAiB,eAAgBH,CAAS,GACvED,CACH"}

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

@@ -1,2 +1,2 @@
-import*as f from"@radix-ui/react-visually-hidden";import*as r from"react";import{Box as b}from"../box/Box.js";import{Flex as u}from"../flex/Flex.js";import{InlineMessage as E}from"../inline-message/InlineMessage.js";import{Label as h}from"../label/Label.js";import{Link as k}from"../link/Link.js";import{Description as F}from"./FieldDescription.js";const o=({css:m,children:l,error:t,fieldId:n,label:a,prompt:e,description:i,required:s,hideLabel:p,appearance:c})=>{const d=p?f.Root:u;return r.createElement(b,{css:m},r.createElement(d,{css:{justifyContent:"space-between",alignItems:"center",mb:"$3"}},r.createElement(h,{htmlFor:n,required:s,appearance:c},a),e&&r.createElement(k,{href:e==null?void 0:e.link,onClick:e==null?void 0:e.onClick,size:"sm"},e.label)),i&&r.createElement(F,{css:{mb:"$3"}},i),l,t&&r.createElement(E,{css:{mt:"$2"}},t))};o.displayName="FieldWrapper";export{o as FieldWrapper};
+import*as f from"@radix-ui/react-visually-hidden";import*as r from"react";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 i=({children:l,error:t,fieldId:a,label:o,prompt:e,description:m,required:n,hideLabel:p,appearance:c,...s})=>{const d=p?f.Root:b;return r.createElement("div",{...s},r.createElement(d,{className:"mb-3 items-center justify-between"},r.createElement(E,{htmlFor:a,required:n,appearance:c},o),e&&r.createElement(h,{href:e==null?void 0:e.link,onClick:e==null?void 0:e.onClick,size:"sm"},e.label)),m&&r.createElement(k,{className:"mb-3"},m),l,t&&r.createElement(u,{className:"mt-2"},t))};i.displayName="FieldWrapper";export{i 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 { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  css?: CSS\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  css,\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n  const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n  return (\n    <Box css={css}>\n      <LabelContainer\n        css={{\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mb: '$3'\n        }}\n      >\n        <Label htmlFor={fieldId} required={required} appearance={appearance}>\n          {label}\n        </Label>\n        {prompt && (\n          <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n            {prompt.label}\n          </Link>\n        )}\n      </LabelContainer>\n      {description && (\n        <Description css={{ mb: '$3' }}>{description}</Description>\n      )}\n      {children}\n      {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n    </Box>\n  )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","css","children","error","fieldId","label","prompt","description","required","hideLabel","appearance","LabelContainer","VisuallyHidden","Flex","React","Box","Label","Link","Description","InlineMessage"],"mappings":"6VA+Ba,MAAAA,EAAe,CAAC,CAC3B,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,CACF,IAAkD,CAChD,MAAMC,EAAiBF,EAAYG,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAACC,EAAA,CAAI,IAAKd,CAAAA,EACRa,EAAA,cAACH,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,WAAY,SACZ,GAAI,IACN,CAEAG,EAAAA,EAAA,cAACE,EAAA,CAAM,QAASZ,EAAS,SAAUI,EAAU,WAAYE,CAAAA,EACtDL,CACH,EACCC,GACCQ,EAAA,cAACG,EAAA,CAAK,KAAMX,GAAA,KAAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,KAAAA,OAAAA,EAAQ,QAAS,KAAK,IACtDA,EAAAA,EAAO,KACV,CAEJ,EACCC,GACCO,EAAA,cAACI,EAAA,CAAY,IAAK,CAAE,GAAI,IAAK,CAAIX,EAAAA,CAAY,EAE9CL,EACAC,GAASW,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,GAAIhB,CAAM,CACrD,CAEJ,EAEAH,EAAa,YAAc"}
+{"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 { 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'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n  const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n  return (\n    <div {...rest}>\n      <LabelContainer className=\"mb-3 items-center justify-between\">\n        <Label htmlFor={fieldId} required={required} appearance={appearance}>\n          {label}\n        </Label>\n        {prompt && (\n          <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n            {prompt.label}\n          </Link>\n        )}\n      </LabelContainer>\n      {description && <Description className=\"mb-3\">{description}</Description>}\n      {children}\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </div>\n  )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","children","error","fieldId","label","prompt","description","required","hideLabel","appearance","rest","LabelContainer","VisuallyHidden","Flex","React","Label","Link","Description","InlineMessage"],"mappings":"yTA6BO,MAAMA,EAAe,CAAC,CAC3B,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAkD,CAChD,MAAMC,EAAiBH,EAAYI,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAAC,MAAK,CAAA,GAAGJ,CACPI,EAAAA,EAAA,cAACH,EAAA,CAAe,UAAU,mCACxBG,EAAAA,EAAA,cAACC,EAAA,CAAM,QAASZ,EAAS,SAAUI,EAAU,WAAYE,CACtDL,EAAAA,CACH,EACCC,GACCS,EAAA,cAACE,EAAA,CAAK,KAAMX,GAAA,KAAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,KAAA,OAAAA,EAAQ,QAAS,KAAK,IAAA,EACtDA,EAAO,KACV,CAEJ,EACCC,GAAeQ,EAAA,cAACG,EAAA,CAAY,UAAU,MAAQX,EAAAA,CAAY,EAC1DL,EACAC,GAASY,EAAA,cAACI,EAAA,CAAc,UAAU,MAAQhB,EAAAA,CAAM,CACnD,CAEJ,EAEAF,EAAa,YAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"InlineFieldWrapper.js","sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Checkbox } from '~/components/checkbox'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButton } from '~/components/radio-button'\nimport type { CSS } from '~/stitches'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  css?: CSS\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  css,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <Box css={css}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <Box\n          css={{\n            ...(direction === 'reverse' && { ml: '$3' }),\n            ...(direction === 'row' && { mr: '$3' }),\n            // provide offset for specific child components\n            ...((child?.type === Checkbox || child?.type === RadioButton) && {\n              transform: 'translateY($space$1)'\n            })\n          }}\n        >\n          {child}\n        </Box>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n    {description && (\n      <Description\n        css={{\n          mt: '$2',\n          // calc required to get correct offset value\n          ...(direction === 'reverse' && {\n            mr: 'calc($space$3 + $sizes$1)'\n          }),\n          ...(direction === 'row' && {\n            ml: 'calc($space$3 + $sizes$1)'\n          })\n        }}\n      >\n        {description}\n      </Description>\n    )}\n  </Box>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"names":["InlineFieldWrapper","align","children","css","description","direction","error","label","required","React","Box","Label","child","Checkbox","RadioButton","InlineMessage","Description"],"mappings":"yXAqBO,MAAMA,EAAqB,CAAC,CACjC,MAAAC,EAAQ,QACR,SAAAC,EACA,IAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CAAI,IAAKP,CACRM,EAAAA,EAAA,cAACE,EAAA,CACC,MAAOV,EACP,UAAWI,EACX,SAAUG,EACV,KAAK,QAEJC,EAAAA,EAAM,SAAS,IAAIP,EAAWU,GAC7BH,EAAA,cAACC,EAAA,CACC,IAAK,CACH,GAAIL,IAAc,WAAa,CAAE,GAAI,IAAK,EAC1C,GAAIA,IAAc,OAAS,CAAE,GAAI,IAAK,EAEtC,KAAKO,GAAA,KAAA,OAAAA,EAAO,QAASC,IAAYD,GAAA,KAAA,OAAAA,EAAO,QAASE,IAAgB,CAC/D,UAAW,sBACb,CACF,GAECF,CACH,CACD,EACAL,CACH,EACCD,GAASG,EAAA,cAACM,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,GAAIT,CAAM,EAClDF,GACCK,EAAA,cAACO,EAAA,CACC,IAAK,CACH,GAAI,KAEJ,GAAIX,IAAc,WAAa,CAC7B,GAAI,2BACN,EACA,GAAIA,IAAc,OAAS,CACzB,GAAI,2BACN,CACF,CAECD,EAAAA,CACH,CAEJ,EAGFJ,EAAmB,YAAc"}
+{"version":3,"file":"InlineFieldWrapper.js","sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Checkbox } from '~/components/checkbox'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButton } from '~/components/radio-button'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\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  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={clsx(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) && [\n              'translate-y-1'\n            ]\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    {description && (\n      <Description\n        className={clsx(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"names":["InlineFieldWrapper","align","children","className","description","direction","error","label","required","React","Label","child","clsx","Checkbox","RadioButton","InlineMessage","Description"],"mappings":"yWAoBO,MAAMA,EAAqB,CAAC,CACjC,MAAAC,EAAQ,QACR,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,UAAWN,CAAAA,EACdM,EAAA,cAACC,EAAA,CACC,MAAOT,EACP,UAAWI,EACX,SAAUG,EACV,KAAK,QAEJC,EAAAA,EAAM,SAAS,IAAIP,EAAWS,GAC7BF,EAAA,cAAC,MACC,CAAA,UAAWG,EACTP,IAAc,WAAa,OAC3BA,IAAc,OAAS,SACtBM,GAAA,KAAAA,OAAAA,EAAO,QAASE,IAAYF,GAAA,KAAA,OAAAA,EAAO,QAASG,IAAgB,CAC3D,eACF,CACF,GAECH,CACH,CACD,EACAJ,CACH,EACCD,GAASG,EAAA,cAACM,EAAA,CAAc,UAAU,MAAA,EAAQT,CAAM,EAChDF,GACCK,EAAA,cAACO,EAAA,CACC,UAAWJ,EACT,OACAP,IAAc,WAAa,OAC3BA,IAAc,OAAS,MACzB,CAECD,EAAAA,CACH,CAEJ,EAGFJ,EAAmB,YAAc"}

package/dist/components/file-drop/FileDrop.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{Flex as x}from"../flex/Flex.js";import{FileDropContext as E}from"./FileDropContext.js";const c=({css:p,children:n,accept:s,multiple:u,onDrop:d,...f})=>{const[m,i]=r.useState(!1),[v,D]=r.useState([]),o=r.useRef(null),g=e=>{e.preventDefault(),i(!0)},y=()=>i(!1),l=e=>{if(!e)return;i(!1);const t=Array.from(e);d(t),D(t)},b=e=>{var t;["Space","Enter"].includes(e.key)&&((t=o.current)==null||t.click())},a={isDragging:m,files:v};return r.createElement(E.Provider,{value:a},r.createElement(x,{direction:"column",gap:"24",align:"center",onDragOver:g,onDragLeave:y,onDrop:e=>{e.preventDefault(),l(e.dataTransfer.files)},onClick:()=>{var e;return(e=o.current)==null?void 0:e.click()},css:{border:"1px dashed $grey500",p:"$5 $7",borderRadius:"$1",cursor:"pointer","& *":{pointerEvents:"none"},...p},role:"button",onKeyDown:b,tabIndex:0,...f},typeof n=="function"?n(a):n,r.createElement("input",{type:"file",ref:o,style:{visibility:"hidden"},accept:s,multiple:u,onChange:e=>{l(e.target.files)}})))};c.displayName="FileDrop";export{c as FileDrop};
+import x from"clsx";import*as r from"react";import{Flex as F}from"../flex/Flex.js";import{FileDropContext as h}from"./FileDropContext.js";const c=({className:p,children:n,accept:s,multiple:u,onDrop:m,...d})=>{const[f,o]=r.useState(!1),[v,D]=r.useState([]),l=r.useRef(null),g=e=>{e.preventDefault(),o(!0)},y=()=>o(!1),i=e=>{if(!e)return;o(!1);const t=Array.from(e);m(t),D(t)},b=e=>{var t;["Space","Enter"].includes(e.key)&&((t=l.current)==null||t.click())},a={isDragging:f,files:v};return r.createElement(h.Provider,{value:a},r.createElement(F,{direction:"column",gap:"24",align:"center",onDragOver:g,onDragLeave:y,onDrop:e=>{e.preventDefault(),i(e.dataTransfer.files)},onClick:()=>{var e;return(e=l.current)==null?void 0:e.click()},role:"button",onKeyDown:b,tabIndex:0,...d,className:x("border","border-dashed","border-grey-500","px-12","py-8","rounded-md","cursor-pointer","**:pointer-events-none",p)},typeof n=="function"?n(a):n,r.createElement("input",{type:"file",ref:l,style:{visibility:"hidden"},accept:s,multiple:u,onChange:e=>{i(e.target.files)}})))};c.displayName="FileDrop";export{c as FileDrop};
 //# sourceMappingURL=FileDrop.js.map

package/dist/components/file-drop/FileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { FileDropContext } from './FileDropContext'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps\n  extends Omit<React.ComponentProps<typeof Flex>, 'onDrop'> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n}\n\nexport const FileDrop = ({\n  css,\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...props\n}: FileDropProps): JSX.Element => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = Array.from(fileList)\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (['Space', 'Enter'].includes(event.key)) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  const value: FileDropContextValue = { isDragging, files }\n\n  return (\n    <FileDropContext.Provider value={value}>\n      <Flex\n        direction=\"column\"\n        gap=\"24\"\n        align=\"center\"\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        css={{\n          border: '1px dashed $grey500',\n          p: '$5 $7',\n          borderRadius: '$1',\n          cursor: 'pointer',\n          '& *': { pointerEvents: 'none' },\n          ...css\n        }}\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...props}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </Flex>\n    </FileDropContext.Provider>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"names":["FileDrop","css","children","accept","multiple","onDrop","props","isDragging","setIsDragging","React","files","setFiles","fileUploadInputRef","handleDragOver","event","handleDragLeave","handleDrop","fileList","handleKeyDown","_a","value","FileDropContext","Flex"],"mappings":"sHAgBa,MAAAA,EAAW,CAAC,CACvB,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,KACGC,CACL,IAAkC,CAChC,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAS,EAAK,EAClD,CAACC,EAAOC,CAAQ,EAAIF,EAAM,SAAiB,EAAE,EAC7CG,EAAqBH,EAAM,OAAyB,IAAI,EAExDI,EAAkBC,GAA2C,CACjEA,EAAM,eAAA,EACNN,EAAc,EAAI,CACpB,EAEMO,EAAkB,IAAMP,EAAc,EAAK,EAE3CQ,EAAcC,GAA8B,CAChD,GAAI,CAACA,EAAU,OAEfT,EAAc,EAAK,EAEnB,MAAME,EAAQ,MAAM,KAAKO,CAAQ,EACjCZ,EAAOK,CAAK,EACZC,EAASD,CAAK,CAChB,EAEMQ,EAAiBJ,GAA+C,CA7CxE,IAAAK,EA8CQ,CAAC,QAAS,OAAO,EAAE,SAASL,EAAM,GAAG,KACvCK,EAAAP,EAAmB,UAAnB,MAAAO,EAA4B,QAEhC,EAEMC,EAA8B,CAAE,WAAAb,EAAY,MAAAG,CAAM,EAExD,OACED,EAAA,cAACY,EAAgB,SAAhB,CAAyB,MAAOD,CAC/BX,EAAAA,EAAA,cAACa,EAAA,CACC,UAAU,SACV,IAAI,KACJ,MAAM,SACN,WAAYT,EACZ,YAAaE,EACb,OAASD,GAAU,CACjBA,EAAM,iBACNE,EAAWF,EAAM,aAAa,KAAK,CACrC,EACA,QAAS,IAAG,CAjEpB,IAAAK,EAiEuB,OAAAA,EAAAP,EAAmB,UAAnB,KAAA,OAAAO,EAA4B,MAAA,CAAA,EAC3C,IAAK,CACH,OAAQ,sBACR,EAAG,QACH,aAAc,KACd,OAAQ,UACR,MAAO,CAAE,cAAe,MAAO,EAC/B,GAAGlB,CACL,EACA,KAAK,SACL,UAAWiB,EACX,SAAU,EACT,GAAGZ,CAEH,EAAA,OAAOJ,GAAa,WAAaA,EAASkB,CAAK,EAAIlB,EACpDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,IAAKG,EACL,MAAO,CAAE,WAAY,QAAS,EAC9B,OAAQT,EACR,SAAUC,EACV,SAAWU,GAAU,CACnBE,EAAWF,EAAM,OAAO,KAAK,CAC/B,CACF,CAAA,CACF,CACF,CAEJ,EAEAd,EAAS,YAAc"}
+{"version":3,"file":"FileDrop.js","sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { FileDropContext } from './FileDropContext'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps\n  extends Omit<React.ComponentProps<typeof Flex>, 'onDrop'> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n  className?: string\n}\n\nexport const FileDrop = ({\n  className,\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...props\n}: FileDropProps): JSX.Element => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = Array.from(fileList)\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (['Space', 'Enter'].includes(event.key)) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  const value: FileDropContextValue = { isDragging, files }\n\n  return (\n    <FileDropContext.Provider value={value}>\n      <Flex\n        direction=\"column\"\n        gap=\"24\"\n        align=\"center\"\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...props}\n        className={clsx(\n          'border',\n          'border-dashed',\n          'border-grey-500',\n          'px-12',\n          'py-8',\n          'rounded-md',\n          'cursor-pointer',\n          '**:pointer-events-none',\n          className\n        )}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </Flex>\n    </FileDropContext.Provider>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"names":["FileDrop","className","children","accept","multiple","onDrop","props","isDragging","setIsDragging","React","files","setFiles","fileUploadInputRef","handleDragOver","event","handleDragLeave","handleDrop","fileList","handleKeyDown","_a","value","FileDropContext","Flex","clsx"],"mappings":"0IAkBa,MAAAA,EAAW,CAAC,CACvB,UAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAkC,CAChC,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAS,EAAK,EAClD,CAACC,EAAOC,CAAQ,EAAIF,EAAM,SAAiB,CAAA,CAAE,EAC7CG,EAAqBH,EAAM,OAAyB,IAAI,EAExDI,EAAkBC,GAA2C,CACjEA,EAAM,eACNN,EAAAA,EAAc,EAAI,CACpB,EAEMO,EAAkB,IAAMP,EAAc,EAAK,EAE3CQ,EAAcC,GAA8B,CAChD,GAAI,CAACA,EAAU,OAEfT,EAAc,EAAK,EAEnB,MAAME,EAAQ,MAAM,KAAKO,CAAQ,EACjCZ,EAAOK,CAAK,EACZC,EAASD,CAAK,CAChB,EAEMQ,EAAiBJ,GAA+C,CA/CxE,IAAAK,EAgDQ,CAAC,QAAS,OAAO,EAAE,SAASL,EAAM,GAAG,KACvCK,EAAAP,EAAmB,UAAnB,MAAAO,EAA4B,MAAA,EAEhC,EAEMC,EAA8B,CAAE,WAAAb,EAAY,MAAAG,CAAM,EAExD,OACED,EAAA,cAACY,EAAgB,SAAhB,CAAyB,MAAOD,CAC/BX,EAAAA,EAAA,cAACa,EAAA,CACC,UAAU,SACV,IAAI,KACJ,MAAM,SACN,WAAYT,EACZ,YAAaE,EACb,OAASD,GAAU,CACjBA,EAAM,eAAA,EACNE,EAAWF,EAAM,aAAa,KAAK,CACrC,EACA,QAAS,IAAG,CAnEpB,IAAAK,EAmEuB,OAAAA,EAAAP,EAAmB,UAAnB,KAAA,OAAAO,EAA4B,MAAA,CAAA,EAC3C,KAAK,SACL,UAAWD,EACX,SAAU,EACT,GAAGZ,EACJ,UAAWiB,EACT,SACA,gBACA,kBACA,QACA,OACA,aACA,iBACA,yBACAtB,CACF,CAEC,EAAA,OAAOC,GAAa,WAAaA,EAASkB,CAAK,EAAIlB,EACpDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,IAAKG,EACL,MAAO,CAAE,WAAY,QAAS,EAC9B,OAAQT,EACR,SAAUC,EACV,SAAWU,GAAU,CACnBE,EAAWF,EAAM,OAAO,KAAK,CAC/B,CACF,CAAA,CACF,CACF,CAEJ,EAEAd,EAAS,YAAc"}

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 = ({\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"}
+{"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":"0JAYa,MAAAA,EAAY,CAAC,CACxB,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,EACA,GAAGC,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/flex/Flex.js

@@ -1,2 +1,2 @@
-import{styled as t}from"../../stitches.js";const e=t("div",{display:"flex",variants:{direction:{row:{flexDirection:"row"},"row-reverse":{flexDirection:"row-reverse"},column:{flexDirection:"column"},"column-reverse":{flexDirection:"column-reverse"},inherit:{flexDirection:"inherit"},initial:{flexDirection:"initial"},revert:{flexDirection:"revert"},"revert-layer":{flexDirection:"revert-layer"},unset:{flexDirection:"unset"}},wrap:{nowrap:{flexWrap:"nowrap"},wrap:{flexWrap:"wrap"},"wrap-reverse":{flexWrap:"wrap-reverse"},inherit:{flexWrap:"inherit"},initial:{flexWrap:"initial"},revert:{flexWrap:"revert"},"revert-layer":{flexWrap:"revert-layer"},unset:{flexWrap:"unset"}},justify:{normal:{justifyContent:"normal"},unsafe:{justifyContent:"unsafe"},safe:{justifyContent:"safe"},start:{justifyContent:"start"},center:{justifyContent:"center"},end:{justifyContent:"end"},"flex-start":{justifyContent:"flex-start"},"flex-end":{justifyContent:"flex-end"},left:{justifyContent:"left"},right:{justifyContent:"right"},"space-between":{justifyContent:"space-between"},"space-around":{justifyContent:"space-around"},"space-evenly":{justifyContent:"space-evenly"},stretch:{justifyContent:"stretch"},inherit:{justifyContent:"inherit"},initial:{justifyContent:"initial"},revert:{justifyContent:"revert"},"revert-layer":{justifyContent:"revert-layer"},unset:{justifyContent:"unset"}},align:{normal:{alignItems:"normal"},unsafe:{alignItems:"unsafe"},safe:{alignItems:"safe"},center:{alignItems:"center"},start:{alignItems:"start"},end:{alignItems:"end"},"self-start":{alignItems:"self-start"},"self-end":{alignItems:"self-end"},"flex-start":{alignItems:"flex-start"},"flex-end":{alignItems:"flex-end"},baseline:{alignItems:"baseline"},"first baseline":{alignItems:"first baseline"},"last baseline":{alignItems:"last baseline"},stretch:{alignItems:"stretch"},inherit:{alignItems:"inherit"},initial:{alignItems:"initial"},revert:{alignItems:"revert"},"revert-layer":{alignItems:"revert-layer"},unset:{alignItems:"unset"}},gap:{0:{gap:"$space$0"},1:{gap:"$space$1"},2:{gap:"$space$2"},3:{gap:"$space$3"},4:{gap:"$space$4"},24:{gap:"$space$24"},5:{gap:"$space$5"},6:{gap:"$space$6"},7:{gap:"$space$7"},8:{gap:"$space$8"},9:{gap:"$space$9"}}}});e.displayName="Flex";export{e as Flex};
+import{styled as t}from"../../styled.js";const e=t("div",{base:["flex"],variants:{direction:{row:["flex-row"],"row-reverse":["flex-row-reverse"],column:["flex-col"],"column-reverse":["flex-col-reverse"],inherit:["direction-[inherit]"],initial:["direction-[initial]"],revert:["direction-[revert]"],"revert-layer":["direction-[revert-layer]"],unset:["direction-[unset]"]},wrap:{nowrap:["flex-no-wrap"],wrap:["flex-wrap"],"wrap-reverse":["flex-wrap-reverse"],inherit:["[flex-wrap:inherit]"],initial:["[flex-wrap:initial]"],revert:["[flex-wrap:revert]"],"revert-layer":["[flex-wrap:revert-layer]"],unset:["[flex-wrap:unset]"]},justify:{normal:["justify-normal"],unsafe:["[justify-content:unsafe]"],safe:["[justify-content:safe]"],start:["justify-start"],center:["justify-center"],end:["justify-end"],"flex-start":["justify-start"],"flex-end":["justify-end"],left:["[justify-content:left]"],right:["[justify-content:right]"],"space-between":["justify-between"],"space-around":["justify-around"],"space-evenly":["justify-evenly"],stretch:["justify-stretch"],inherit:["[justify-content:inherit]"],initial:["[justify-content:initial]"],revert:["[justify-content:revert]"],"revert-layer":["[justify-content:revert-layer]"],unset:["[justify-content:unset]"]},align:{normal:["[align-items:normal]"],unsafe:["[align-items:unsafe]"],safe:["[align-items:safe]"],center:["items-center"],start:["items-start"],end:["items-end"],"self-start":["[align-items:self-start]"],"self-end":["[align-items:self-end]"],"flex-start":["items-start"],"flex-end":["items-end"],baseline:["items-baseline"],"first baseline":["[align-items:first baseline]"],"last baseline":["[align-items:last baseline]"],stretch:["items-stretch"],inherit:["[align-items:inherit]"],initial:["[align-items:initial]"],revert:["[align-items:revert]"],"revert-layer":["[align-items:revert-layer]"],unset:["[align-items:unset]"]},gap:{0:["gap-0.5"],1:["gap-1"],2:["gap-2"],3:["gap-3"],4:["gap-4"],24:["gap-6"],5:["gap-8"],6:["gap-10"],7:["gap-12"],8:["gap-16"],9:["gap-20"]}}});e.displayName="Flex";export{e as Flex};
 //# sourceMappingURL=Flex.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const Flex = styled('div', {\n  display: 'flex',\n  variants: {\n    direction: {\n      row: { flexDirection: 'row' },\n      'row-reverse': { flexDirection: 'row-reverse' },\n      column: { flexDirection: 'column' },\n      'column-reverse': { flexDirection: 'column-reverse' },\n      inherit: { flexDirection: 'inherit' },\n      initial: { flexDirection: 'initial' },\n      revert: { flexDirection: 'revert' },\n      'revert-layer': { flexDirection: 'revert-layer' },\n      unset: { flexDirection: 'unset' }\n    },\n    wrap: {\n      nowrap: { flexWrap: 'nowrap' },\n      wrap: { flexWrap: 'wrap' },\n      'wrap-reverse': { flexWrap: 'wrap-reverse' },\n      inherit: { flexWrap: 'inherit' },\n      initial: { flexWrap: 'initial' },\n      revert: { flexWrap: 'revert' },\n      'revert-layer': { flexWrap: 'revert-layer' },\n      unset: { flexWrap: 'unset' }\n    },\n    // Why is both `start` and `flex-start` valid values? Answer: https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/\n    justify: {\n      normal: { justifyContent: 'normal' },\n      unsafe: { justifyContent: 'unsafe' },\n      safe: { justifyContent: 'safe' },\n      start: { justifyContent: 'start' },\n      center: { justifyContent: 'center' },\n      end: { justifyContent: 'end' },\n      'flex-start': { justifyContent: 'flex-start' },\n      'flex-end': { justifyContent: 'flex-end' },\n      left: { justifyContent: 'left' },\n      right: { justifyContent: 'right' },\n      'space-between': { justifyContent: 'space-between' },\n      'space-around': { justifyContent: 'space-around' },\n      'space-evenly': { justifyContent: 'space-evenly' },\n      stretch: { justifyContent: 'stretch' },\n      inherit: { justifyContent: 'inherit' },\n      initial: { justifyContent: 'initial' },\n      revert: { justifyContent: 'revert' },\n      'revert-layer': { justifyContent: 'revert-layer' },\n      unset: { justifyContent: 'unset' }\n    },\n\n    align: {\n      normal: { alignItems: 'normal' },\n      unsafe: { alignItems: 'unsafe' },\n      safe: { alignItems: 'safe' },\n      center: { alignItems: 'center' },\n      start: { alignItems: 'start' },\n      end: { alignItems: 'end' },\n      'self-start': { alignItems: 'self-start' },\n      'self-end': { alignItems: 'self-end' },\n      'flex-start': { alignItems: 'flex-start' },\n      'flex-end': { alignItems: 'flex-end' },\n      baseline: { alignItems: 'baseline' },\n      'first baseline': { alignItems: 'first baseline' },\n      'last baseline': { alignItems: 'last baseline' },\n      stretch: { alignItems: 'stretch' },\n      inherit: { alignItems: 'inherit' },\n      initial: { alignItems: 'initial' },\n      revert: { alignItems: 'revert' },\n      'revert-layer': { alignItems: 'revert-layer' },\n      unset: { alignItems: 'unset' }\n    },\n    gap: {\n      '0': { gap: '$space$0' },\n      '1': { gap: '$space$1' },\n      '2': { gap: '$space$2' },\n      '3': { gap: '$space$3' },\n      '4': { gap: '$space$4' },\n      '24': { gap: '$space$24' },\n      '5': { gap: '$space$5' },\n      '6': { gap: '$space$6' },\n      '7': { gap: '$space$7' },\n      '8': { gap: '$space$8' },\n      '9': { gap: '$space$9' }\n    }\n  }\n})\n\nFlex.displayName = 'Flex'\n"],"names":["Flex","styled"],"mappings":"iDAEaA,EAAOC,EAAO,MAAO,CAChC,QAAS,OACT,SAAU,CACR,UAAW,CACT,IAAK,CAAE,cAAe,KAAM,EAC5B,cAAe,CAAE,cAAe,aAAc,EAC9C,OAAQ,CAAE,cAAe,QAAS,EAClC,iBAAkB,CAAE,cAAe,gBAAiB,EACpD,QAAS,CAAE,cAAe,SAAU,EACpC,QAAS,CAAE,cAAe,SAAU,EACpC,OAAQ,CAAE,cAAe,QAAS,EAClC,eAAgB,CAAE,cAAe,cAAe,EAChD,MAAO,CAAE,cAAe,OAAQ,CAClC,EACA,KAAM,CACJ,OAAQ,CAAE,SAAU,QAAS,EAC7B,KAAM,CAAE,SAAU,MAAO,EACzB,eAAgB,CAAE,SAAU,cAAe,EAC3C,QAAS,CAAE,SAAU,SAAU,EAC/B,QAAS,CAAE,SAAU,SAAU,EAC/B,OAAQ,CAAE,SAAU,QAAS,EAC7B,eAAgB,CAAE,SAAU,cAAe,EAC3C,MAAO,CAAE,SAAU,OAAQ,CAC7B,EAEA,QAAS,CACP,OAAQ,CAAE,eAAgB,QAAS,EACnC,OAAQ,CAAE,eAAgB,QAAS,EACnC,KAAM,CAAE,eAAgB,MAAO,EAC/B,MAAO,CAAE,eAAgB,OAAQ,EACjC,OAAQ,CAAE,eAAgB,QAAS,EACnC,IAAK,CAAE,eAAgB,KAAM,EAC7B,aAAc,CAAE,eAAgB,YAAa,EAC7C,WAAY,CAAE,eAAgB,UAAW,EACzC,KAAM,CAAE,eAAgB,MAAO,EAC/B,MAAO,CAAE,eAAgB,OAAQ,EACjC,gBAAiB,CAAE,eAAgB,eAAgB,EACnD,eAAgB,CAAE,eAAgB,cAAe,EACjD,eAAgB,CAAE,eAAgB,cAAe,EACjD,QAAS,CAAE,eAAgB,SAAU,EACrC,QAAS,CAAE,eAAgB,SAAU,EACrC,QAAS,CAAE,eAAgB,SAAU,EACrC,OAAQ,CAAE,eAAgB,QAAS,EACnC,eAAgB,CAAE,eAAgB,cAAe,EACjD,MAAO,CAAE,eAAgB,OAAQ,CACnC,EAEA,MAAO,CACL,OAAQ,CAAE,WAAY,QAAS,EAC/B,OAAQ,CAAE,WAAY,QAAS,EAC/B,KAAM,CAAE,WAAY,MAAO,EAC3B,OAAQ,CAAE,WAAY,QAAS,EAC/B,MAAO,CAAE,WAAY,OAAQ,EAC7B,IAAK,CAAE,WAAY,KAAM,EACzB,aAAc,CAAE,WAAY,YAAa,EACzC,WAAY,CAAE,WAAY,UAAW,EACrC,aAAc,CAAE,WAAY,YAAa,EACzC,WAAY,CAAE,WAAY,UAAW,EACrC,SAAU,CAAE,WAAY,UAAW,EACnC,iBAAkB,CAAE,WAAY,gBAAiB,EACjD,gBAAiB,CAAE,WAAY,eAAgB,EAC/C,QAAS,CAAE,WAAY,SAAU,EACjC,QAAS,CAAE,WAAY,SAAU,EACjC,QAAS,CAAE,WAAY,SAAU,EACjC,OAAQ,CAAE,WAAY,QAAS,EAC/B,eAAgB,CAAE,WAAY,cAAe,EAC7C,MAAO,CAAE,WAAY,OAAQ,CAC/B,EACA,IAAK,CACH,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,GAAM,CAAE,IAAK,WAAY,EACzB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,CACzB,CACF,CACF,CAAC,EAEDD,EAAK,YAAc"}
+{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Flex = styled('div', {\n  base: ['flex'],\n  variants: {\n    direction: {\n      row: ['flex-row'],\n      'row-reverse': ['flex-row-reverse'],\n      column: ['flex-col'],\n      'column-reverse': ['flex-col-reverse'],\n      inherit: ['direction-[inherit]'],\n      initial: ['direction-[initial]'],\n      revert: ['direction-[revert]'],\n      'revert-layer': ['direction-[revert-layer]'],\n      unset: ['direction-[unset]']\n    },\n    wrap: {\n      nowrap: ['flex-no-wrap'],\n      wrap: ['flex-wrap'],\n      'wrap-reverse': ['flex-wrap-reverse'],\n      inherit: ['[flex-wrap:inherit]'],\n      initial: ['[flex-wrap:initial]'],\n      revert: ['[flex-wrap:revert]'],\n      'revert-layer': ['[flex-wrap:revert-layer]'],\n      unset: ['[flex-wrap:unset]']\n    },\n    justify: {\n      normal: ['justify-normal'],\n      unsafe: ['[justify-content:unsafe]'],\n      safe: ['[justify-content:safe]'],\n      start: ['justify-start'],\n      center: ['justify-center'],\n      end: ['justify-end'],\n      'flex-start': ['justify-start'],\n      'flex-end': ['justify-end'],\n      left: ['[justify-content:left]'],\n      right: ['[justify-content:right]'],\n      'space-between': ['justify-between'],\n      'space-around': ['justify-around'],\n      'space-evenly': ['justify-evenly'],\n      stretch: ['justify-stretch'],\n      inherit: ['[justify-content:inherit]'],\n      initial: ['[justify-content:initial]'],\n      revert: ['[justify-content:revert]'],\n      'revert-layer': ['[justify-content:revert-layer]'],\n      unset: ['[justify-content:unset]']\n    },\n    align: {\n      normal: ['[align-items:normal]'],\n      unsafe: ['[align-items:unsafe]'],\n      safe: ['[align-items:safe]'],\n      center: ['items-center'],\n      start: ['items-start'],\n      end: ['items-end'],\n      'self-start': ['[align-items:self-start]'],\n      'self-end': ['[align-items:self-end]'],\n      'flex-start': ['items-start'],\n      'flex-end': ['items-end'],\n      baseline: ['items-baseline'],\n      'first baseline': ['[align-items:first baseline]'],\n      'last baseline': ['[align-items:last baseline]'],\n      stretch: ['items-stretch'],\n      inherit: ['[align-items:inherit]'],\n      initial: ['[align-items:initial]'],\n      revert: ['[align-items:revert]'],\n      'revert-layer': ['[align-items:revert-layer]'],\n      unset: ['[align-items:unset]']\n    },\n    gap: {\n      '0': ['gap-0.5'],\n      '1': ['gap-1'],\n      '2': ['gap-2'],\n      '3': ['gap-3'],\n      '4': ['gap-4'],\n      '24': ['gap-6'],\n      '5': ['gap-8'],\n      '6': ['gap-10'],\n      '7': ['gap-12'],\n      '8': ['gap-16'],\n      '9': ['gap-20']\n    }\n  }\n})\n\nFlex.displayName = 'Flex'\n"],"names":["Flex","styled"],"mappings":"yCAEO,MAAMA,EAAOC,EAAO,MAAO,CAChC,KAAM,CAAC,MAAM,EACb,SAAU,CACR,UAAW,CACT,IAAK,CAAC,UAAU,EAChB,cAAe,CAAC,kBAAkB,EAClC,OAAQ,CAAC,UAAU,EACnB,iBAAkB,CAAC,kBAAkB,EACrC,QAAS,CAAC,qBAAqB,EAC/B,QAAS,CAAC,qBAAqB,EAC/B,OAAQ,CAAC,oBAAoB,EAC7B,eAAgB,CAAC,0BAA0B,EAC3C,MAAO,CAAC,mBAAmB,CAC7B,EACA,KAAM,CACJ,OAAQ,CAAC,cAAc,EACvB,KAAM,CAAC,WAAW,EAClB,eAAgB,CAAC,mBAAmB,EACpC,QAAS,CAAC,qBAAqB,EAC/B,QAAS,CAAC,qBAAqB,EAC/B,OAAQ,CAAC,oBAAoB,EAC7B,eAAgB,CAAC,0BAA0B,EAC3C,MAAO,CAAC,mBAAmB,CAC7B,EACA,QAAS,CACP,OAAQ,CAAC,gBAAgB,EACzB,OAAQ,CAAC,0BAA0B,EACnC,KAAM,CAAC,wBAAwB,EAC/B,MAAO,CAAC,eAAe,EACvB,OAAQ,CAAC,gBAAgB,EACzB,IAAK,CAAC,aAAa,EACnB,aAAc,CAAC,eAAe,EAC9B,WAAY,CAAC,aAAa,EAC1B,KAAM,CAAC,wBAAwB,EAC/B,MAAO,CAAC,yBAAyB,EACjC,gBAAiB,CAAC,iBAAiB,EACnC,eAAgB,CAAC,gBAAgB,EACjC,eAAgB,CAAC,gBAAgB,EACjC,QAAS,CAAC,iBAAiB,EAC3B,QAAS,CAAC,2BAA2B,EACrC,QAAS,CAAC,2BAA2B,EACrC,OAAQ,CAAC,0BAA0B,EACnC,eAAgB,CAAC,gCAAgC,EACjD,MAAO,CAAC,yBAAyB,CACnC,EACA,MAAO,CACL,OAAQ,CAAC,sBAAsB,EAC/B,OAAQ,CAAC,sBAAsB,EAC/B,KAAM,CAAC,oBAAoB,EAC3B,OAAQ,CAAC,cAAc,EACvB,MAAO,CAAC,aAAa,EACrB,IAAK,CAAC,WAAW,EACjB,aAAc,CAAC,0BAA0B,EACzC,WAAY,CAAC,wBAAwB,EACrC,aAAc,CAAC,aAAa,EAC5B,WAAY,CAAC,WAAW,EACxB,SAAU,CAAC,gBAAgB,EAC3B,iBAAkB,CAAC,8BAA8B,EACjD,gBAAiB,CAAC,6BAA6B,EAC/C,QAAS,CAAC,eAAe,EACzB,QAAS,CAAC,uBAAuB,EACjC,QAAS,CAAC,uBAAuB,EACjC,OAAQ,CAAC,sBAAsB,EAC/B,eAAgB,CAAC,4BAA4B,EAC7C,MAAO,CAAC,qBAAqB,CAC/B,EACA,IAAK,CACH,EAAK,CAAC,SAAS,EACf,EAAK,CAAC,OAAO,EACb,EAAK,CAAC,OAAO,EACb,EAAK,CAAC,OAAO,EACb,EAAK,CAAC,OAAO,EACb,GAAM,CAAC,OAAO,EACd,EAAK,CAAC,OAAO,EACb,EAAK,CAAC,QAAQ,EACd,EAAK,CAAC,QAAQ,EACd,EAAK,CAAC,QAAQ,EACd,EAAK,CAAC,QAAQ,CAChB,CACF,CACF,CAAC,EAEDD,EAAK,YAAc"}

package/dist/components/form/Form.js

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

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

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

package/dist/components/form/useFieldError.js

@@ -1,2 +1,2 @@
-import s from"dlv";import{useFormContext as i}from"react-hook-form";const l=o=>{var r;const{errors:e}=i(),t=o.split(/[,[\].]+?/).filter(Boolean);return{error:(r=(()=>s(e,t))())==null?void 0:r.message}};export{l as useFieldError};
+import s from"dlv";import{useFormContext as i}from"react-hook-form";const l=o=>{var r;const{errors:e}=i(),t=o.split(/[,[\].]+?/).filter(Boolean);return{error:(r=s(e,t))==null?void 0:r.message}};export{l as useFieldError};
 //# sourceMappingURL=useFieldError.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFieldError.js","sources":["../../../src/components/form/useFieldError.ts"],"sourcesContent":["import delve from 'dlv'\nimport { useFormContext } from 'react-hook-form'\n\nexport const useFieldError = (fieldName: string) => {\n  const { errors } = useFormContext()\n\n  // in case of migration to a newer version of react-hook-form the path needs to updated to account for dynamic fields naming convention\n  const fieldPath = fieldName.split(/[,[\\].]+?/).filter(Boolean)\n\n  const getErrors = () => delve(errors, fieldPath)\n\n  return {\n    error: getErrors()?.message\n  }\n}\n"],"names":["useFieldError","fieldName","_a","errors","useFormContext","fieldPath","delve"],"mappings":"0EAGaA,EAAiBC,GAAsB,CAHpD,IAAAC,EAIE,KAAM,CAAE,OAAAC,CAAO,EAAIC,EAGbC,EAAAA,EAAYJ,EAAU,MAAM,WAAW,EAAE,OAAO,OAAO,EAI7D,MAAO,CACL,OAAOC,GAHS,IAAMI,EAAMH,EAAQE,CAAS,OAGtC,KAAAH,OAAAA,EAAa,OACtB,CACF"}
+{"version":3,"file":"useFieldError.js","sources":["../../../src/components/form/useFieldError.ts"],"sourcesContent":["import delve from 'dlv'\nimport { useFormContext } from 'react-hook-form'\n\nexport const useFieldError = (fieldName: string) => {\n  const { errors } = useFormContext()\n\n  // in case of migration to a newer version of react-hook-form the path needs to updated to account for dynamic fields naming convention\n  const fieldPath = fieldName.split(/[,[\\].]+?/).filter(Boolean)\n\n  const getErrors = () => delve(errors, fieldPath)\n\n  return {\n    error: getErrors()?.message\n  }\n}\n"],"names":["useFieldError","fieldName","_a","errors","useFormContext","fieldPath","delve"],"mappings":"oEAGa,MAAAA,EAAiBC,GAAsB,CAHpD,IAAAC,EAIE,KAAM,CAAE,OAAAC,CAAO,EAAIC,EAAe,EAG5BC,EAAYJ,EAAU,MAAM,WAAW,EAAE,OAAO,OAAO,EAI7D,MAAO,CACL,OAAOC,EAHeI,EAAMH,EAAQE,CAAS,IAGtC,KAAAH,OAAAA,EAAa,OACtB,CACF"}

package/dist/components/grid/Grid.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as c}from"../../stitches.js";const g=c("div",{display:"grid",variants:{gap:{0:{gap:"$space$0"},1:{gap:"$space$1"},2:{gap:"$space$2"},3:{gap:"$space$3"},4:{gap:"$space$4"},24:{gap:"$space$24"},5:{gap:"$space$5"},6:{gap:"$space$6"},7:{gap:"$space$7"},8:{gap:"$space$8"},9:{gap:"$space$9"}}}}),e=({css:p,style:s,gap:i=2,minItemSize:a,maxItemSize:m="1fr",...$})=>t.createElement(g,{style:{...s,"--min-item-size":a,"--max-item-size":m},css:{...a&&{gridTemplateColumns:"repeat(auto-fit, minmax(var(--min-item-size), var(--max-item-size)))"},...p},gap:i,...$});e.displayName="Grid";export{e as Grid};
+import g from"clsx";import*as r from"react";import{styled as o}from"../../styled.js";const l=o("div",{base:["grid"],variants:{gap:{0:["gap-0.5"],1:["gap-1"],2:["gap-2"],3:["gap-3"],4:["gap-4"],24:["gap-6"],5:["gap-8"],6:["gap-10"],7:["gap-12"],8:["gap-16"],9:["gap-20"]}}}),e=({className:i,style:m,gap:t="2",minItemSize:a,maxItemSize:p="1fr",...s})=>r.createElement(l,{...s,style:{...m,"--min-item-size":a,"--max-item-size":p},gap:t,className:g(a&&["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"],i)});e.displayName="Grid";export{e as Grid};
 //# sourceMappingURL=Grid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst GridContainer = styled('div', {\n  display: 'grid',\n  variants: {\n    gap: {\n      '0': { gap: '$space$0' },\n      '1': { gap: '$space$1' },\n      '2': { gap: '$space$2' },\n      '3': { gap: '$space$3' },\n      '4': { gap: '$space$4' },\n      '24': { gap: '$space$24' },\n      '5': { gap: '$space$5' },\n      '6': { gap: '$space$6' },\n      '7': { gap: '$space$7' },\n      '8': { gap: '$space$8' },\n      '9': { gap: '$space$9' }\n    }\n  }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n} & {\n  as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Grid = ({\n  css,\n  style,\n  gap = 2,\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}: GridProps) => (\n  <GridContainer\n    style={{\n      ...style,\n      '--min-item-size': minItemSize,\n      '--max-item-size': maxItemSize\n    }}\n    css={{\n      ...(minItemSize && {\n        gridTemplateColumns: `repeat(auto-fit, minmax(var(--min-item-size), var(--max-item-size)))`\n      }),\n      ...css\n    }}\n    gap={gap}\n    {...remainingProps}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","Grid","css","style","gap","minItemSize","maxItemSize","remainingProps","React"],"mappings":"mEAIA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,QAAS,OACT,SAAU,CACR,IAAK,CACH,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,GAAM,CAAE,IAAK,WAAY,EACzB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,EACvB,EAAK,CAAE,IAAK,UAAW,CACzB,CACF,CACF,CAAC,EASYC,EAAO,CAAC,CACnB,IAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,EACN,YAAAC,EACA,YAAAC,EAAc,SACXC,CACL,IACEC,EAAA,cAACT,EAAA,CACC,MAAO,CACL,GAAGI,EACH,kBAAmBE,EACnB,kBAAmBC,CACrB,EACA,IAAK,CACH,GAAID,GAAe,CACjB,oBAAqB,sEACvB,EACA,GAAGH,CACL,EACA,IAAKE,EACJ,GAAGG,CAAAA,CACN,EAGFN,EAAK,YAAc"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst GridContainer = styled('div', {\n  base: ['grid'],\n  variants: {\n    gap: {\n      0: ['gap-0.5'],\n      1: ['gap-1'],\n      2: ['gap-2'],\n      3: ['gap-3'],\n      4: ['gap-4'],\n      24: ['gap-6'],\n      5: ['gap-8'],\n      6: ['gap-10'],\n      7: ['gap-12'],\n      8: ['gap-16'],\n      9: ['gap-20']\n    }\n  }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n} & {\n  as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Grid = ({\n  className,\n  style,\n  gap = '2',\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}: GridProps) => (\n  <GridContainer\n    {...remainingProps}\n    style={{\n      ...style,\n      '--min-item-size': minItemSize,\n      '--max-item-size': maxItemSize\n    }}\n    gap={gap}\n    className={clsx(\n      minItemSize && [\n        'grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]'\n      ],\n      className\n    )}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","Grid","className","style","gap","minItemSize","maxItemSize","remainingProps","React","clsx"],"mappings":"qFAKA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,KAAM,CAAC,MAAM,EACb,SAAU,CACR,IAAK,CACH,EAAG,CAAC,SAAS,EACb,EAAG,CAAC,OAAO,EACX,EAAG,CAAC,OAAO,EACX,EAAG,CAAC,OAAO,EACX,EAAG,CAAC,OAAO,EACX,GAAI,CAAC,OAAO,EACZ,EAAG,CAAC,OAAO,EACX,EAAG,CAAC,QAAQ,EACZ,EAAG,CAAC,QAAQ,EACZ,EAAG,CAAC,QAAQ,EACZ,EAAG,CAAC,QAAQ,CACd,CACF,CACF,CAAC,EASYC,EAAO,CAAC,CACnB,UAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,IACN,YAAAC,EACA,YAAAC,EAAc,MACd,GAAGC,CACL,IACEC,EAAA,cAACT,EAAA,CACE,GAAGQ,EACJ,MAAO,CACL,GAAGJ,EACH,kBAAmBE,EACnB,kBAAmBC,CACrB,EACA,IAAKF,EACL,UAAWK,EACTJ,GAAe,CACb,oFACF,EACAH,CACF,CAAA,CACF,EAGFD,EAAK,YAAc"}

package/dist/components/heading/Heading.js

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

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  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontFamily: '$body',\n        fontSize: '$md',\n        lineHeight: 1.5,\n        ...capsize(0.3864)\n      },\n      sm: {\n        fontFamily: '$body',\n        fontSize: '$lg',\n        lineHeight: 1.14,\n        ...capsize(0.2078)\n      },\n      md: {\n        fontFamily: '$display',\n        fontSize: '$xl',\n        lineHeight: 1.14,\n        letterSpacing: '0.01em',\n        ...capsize(0.2114, 0.2634)\n      },\n      lg: {\n        fontFamily: '$display',\n        fontSize: '$2xl',\n        lineHeight: 1.08,\n        letterSpacing: '0.01em',\n        ...capsize(0.1405, 0.2405)\n      },\n      xl: {\n        fontFamily: '$display',\n        fontSize: '$3xl',\n        lineHeight: 1.12,\n        ...capsize(0.16, 0.26)\n      },\n      xxl: {\n        fontFamily: '$display',\n        fontSize: '$4xl',\n        lineHeight: 1,\n        ...capsize(0.1, 0.2)\n      }\n    },\n    noCapsize: {\n      true: {\n        '&::before, &::after': { display: 'none !important' }\n      }\n    },\n    weight: {\n      medium: { fontWeight: 500 },\n      bold: { fontWeight: 700 }\n    }\n  }\n})\n\nexport type HeadingProps = Override<\n  React.ComponentProps<typeof StyledHeading>,\n  {\n    as?:\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'h6'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Heading: React.ForwardRefExoticComponent<HeadingProps> =\n  React.forwardRef(\n    ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n      <StyledHeading\n        ref={ref}\n        size={size}\n        weight={weight}\n        {...remainingProps}\n      />\n    )\n  )\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","capsize","Heading","React","size","weight","remainingProps","ref"],"mappings":"4TAMaA,EAAgBC,EAAO,KAAM,CACxC,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,WACZ,SAAU,MACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,IAAM,GAAI,CACvB,EACA,IAAK,CACH,WAAY,WACZ,SAAU,OACV,WAAY,EACZ,GAAGA,EAAQ,GAAK,EAAG,CACrB,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,EACA,OAAQ,CACN,OAAQ,CAAE,WAAY,GAAI,EAC1B,KAAM,CAAE,WAAY,GAAI,CAC1B,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,WACJ,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,UAAWC,CAAe,EAAGC,IACpDJ,EAAA,cAACJ,GACC,IAAKQ,EACL,KAAMH,EACN,OAAQC,EACP,GAAGC,EACN,CAEJ,EAEFJ,EAAQ,YAAc"}
+{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities'\n\nexport const StyledHeading = styled('h2', {\n  base: ['m-0'],\n  variants: {\n    size: {\n      xs: ['font-body', 'text-md', 'leading-normal', 'capsize-[0.3864]'],\n      sm: ['font-body', 'text-lg', 'leading-[1.14]', 'capsize-[0.2078]'],\n      md: [\n        'font-display',\n        'text-xl',\n        'leading-[1.14]',\n        'tracking-[0.01em]',\n        'capsize-before-[0.2114]',\n        'capsize-after-[0.2634]'\n      ],\n      lg: [\n        'font-display',\n        'text-2xl',\n        'leading-[1.08]',\n        'tracking-[0.01em]',\n        'capsize-before-[0.1405]',\n        'capsize-after-[0.2405]'\n      ],\n      xl: [\n        'font-display',\n        'text-3xl',\n        'leading-[1.12]',\n        'capsize-before-[0.16]',\n        'capsize-after-[0.26]'\n      ],\n      xxl: [\n        'font-display',\n        'text-4xl',\n        'leading-[1]',\n        'capsize-before-[0.1]',\n        'capsize-after-[0.2]'\n      ]\n    },\n    noCapsize: {\n      true: ['before:hidden!', 'after:hidden!']\n    },\n    weight: {\n      medium: ['font-medium'],\n      bold: ['font-bold']\n    }\n  }\n})\n\nexport type HeadingProps = Override<\n  React.ComponentProps<typeof StyledHeading>,\n  {\n    as?:\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'h6'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Heading: React.ForwardRefExoticComponent<HeadingProps> =\n  React.forwardRef(\n    ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n      <StyledHeading\n        ref={ref}\n        size={size}\n        weight={weight}\n        {...remainingProps}\n      />\n    )\n  )\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","Heading","React","size","weight","remainingProps","ref"],"mappings":"iEAKO,MAAMA,EAAgBC,EAAO,KAAM,CACxC,KAAM,CAAC,KAAK,EACZ,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,YAAa,UAAW,iBAAkB,kBAAkB,EACjE,GAAI,CAAC,YAAa,UAAW,iBAAkB,kBAAkB,EACjE,GAAI,CACF,eACA,UACA,iBACA,oBACA,0BACA,wBACF,EACA,GAAI,CACF,eACA,WACA,iBACA,oBACA,0BACA,wBACF,EACA,GAAI,CACF,eACA,WACA,iBACA,wBACA,sBACF,EACA,IAAK,CACH,eACA,WACA,cACA,uBACA,qBACF,CACF,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,EACA,OAAQ,CACN,OAAQ,CAAC,aAAa,EACtB,KAAM,CAAC,WAAW,CACpB,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,WACJ,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,OAAQ,GAAGC,CAAe,EAAGC,IACpDJ,EAAA,cAACH,EACC,CAAA,IAAKO,EACL,KAAMH,EACN,OAAQC,EACP,GAAGC,CACN,CAAA,CAEJ,EAEFJ,EAAQ,YAAc"}

package/dist/components/icon/Icon.js

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

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

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

package/dist/components/image/Image.js

@@ -1,2 +1,2 @@
-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};
+import*as m from"react";import{styled as s}from"../../styled.js";const e=s("img",{base:["align-middle","max-w-full"],variants:{fluid:{true:["[[src$='.svg']]:h-auto","[[src$='.svg']]:max-w-none","[[src$='.svg']]:w-full","[[width]]:[[height]]:h-auto","[[width]]:w-auto"]}}}),a=t=>m.createElement(e,{...t});a.displayName="Image";export{a as Image,e as StyledImage};
 //# sourceMappingURL=Image.js.map