@atom-learning/components 2.50.2 → 2.52.0

package/CHANGELOG.md

@@ -1,10 +1,22 @@
-## [2.50.2](https://github.com/Atom-Learning/components/compare/v2.50.1...v2.50.2) (2023-04-28)
+# [2.52.0](https://github.com/Atom-Learning/components/compare/v2.51.0...v2.52.0) (2023-05-05)
 
 
 ### Bug Fixes
 
-* only add margin-right to BannerRegular Text and Heading when Dismiss is used ([7a73c5a](https://github.com/Atom-Learning/components/commit/7a73c5a27bfe8b6244008aaf5acb1492b8d1ace0))
-* yarn validate typescript errors ([bd24f69](https://github.com/Atom-Learning/components/commit/bd24f690436faba587be62436eece298ec42b578))
+* debounce is necessary for tabs or endless url update loop glitch ([9ccb612](https://github.com/Atom-Learning/components/commit/9ccb6123019f96377b7f4a4973d9359311773a71))
+* design fix stretch cards to height 100% ([51412ae](https://github.com/Atom-Learning/components/commit/51412ae7155b5a50a0c15a4a01efdf73c237545f))
+* design tweaks ([cb2c9b1](https://github.com/Atom-Learning/components/commit/cb2c9b18327d1340c0ecd4354922f6e6f8412a94))
+* overflow in Tile in Cards ([f13c185](https://github.com/Atom-Learning/components/commit/f13c18553e5ce1e34256d6418a7cc0c31d271dca))
+
+
+### Features
+
+* explicitely add debounce to updateQueryParams on CMS tab change and comment ([2d8f2ff](https://github.com/Atom-Learning/components/commit/2d8f2ffb0205c56f0ab7333e82e32744a9a532bd))
+* minor but make sure the Image used for the logo has a pointer cursor ([50c8aa0](https://github.com/Atom-Learning/components/commit/50c8aa0d1ad6e224f5108503ec9341f73650955a))
+* replace Box wrapper in Card and DosAndDonts with Tile ([7487c6c](https://github.com/Atom-Learning/components/commit/7487c6c54d842506f7d5974721a8bc1a18cd465b))
+* stack Cards filter chips ([9b46a13](https://github.com/Atom-Learning/components/commit/9b46a13b1163003b39f81ef94935ffa65b71f22b))
+* store selected tab in the url in documentation site ([31ad7ed](https://github.com/Atom-Learning/components/commit/31ad7ed0628b2bf96e3f1b321007d43f8c945746))
+* useQueryParams ([5c26901](https://github.com/Atom-Learning/components/commit/5c269019d1f2b2aeedcf5274ab5c1a8d756f0152))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/accordion/AccordionContent.js

@@ -1,2 +1,2 @@
-import{Content as i}from"@radix-ui/react-accordion";import t from"react";import{keyframes as o,styled as n}from"../../stitches.js";import{CSSWrapper as d}from"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const m=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),s=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),c=n(i,{border:0,width:"100%",bg:"$base1",overflow:"hidden",'&[data-state="open"]':{borderRadius:"0 0 $0 $0"},"@allowMotion":{'&[data-state="open"]':{animation:`${m} 300ms ease-out`},'&[data-state="closed"]':{animation:`${s} 300ms ease-out`}}}),h=({children:e,css:r,...a})=>t.createElement(c,{...a},t.createElement(d,{css:r},e));export{h as AccordionContent};
+import{Content as i}from"@radix-ui/react-accordion";import t from"react";import{keyframes as o,styled as n}from"../../stitches.js";import{CSSWrapper as m}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const d=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),s=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),c=n(i,{border:0,width:"100%",bg:"$base1",overflow:"hidden",'&[data-state="open"]':{borderRadius:"0 0 $0 $0"},"@allowMotion":{'&[data-state="open"]':{animation:`${d} 300ms ease-out`},'&[data-state="closed"]':{animation:`${s} 300ms ease-out`}}}),h=({children:e,css:r,...a})=>t.createElement(c,{...a},t.createElement(m,{css:r},e));export{h as AccordionContent};
 //# sourceMappingURL=AccordionContent.js.map

package/dist/components/accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { keyframes, styled } from '~/stitches'\nimport { CSSWrapper } from '~/utilities'\n\nconst open = keyframes({\n  from: { height: 0 },\n  to: { height: 'var(--radix-accordion-content-height)' }\n})\n\nconst close = keyframes({\n  from: { height: 'var(--radix-accordion-content-height)' },\n  to: { height: 0 }\n})\n\nconst StyledContent = styled(Content, {\n  border: 0,\n  width: '100%',\n  bg: '$base1',\n  overflow: 'hidden',\n  '&[data-state=\"open\"]': { borderRadius: '0 0 $0 $0' },\n\n  '@allowMotion': {\n    '&[data-state=\"open\"]': { animation: `${open} 300ms ease-out` },\n    '&[data-state=\"closed\"]': { animation: `${close} 300ms ease-out` }\n  }\n})\n\ntype AccordionContentProps = React.ComponentProps<typeof StyledContent>\n\nexport const AccordionContent: React.FC<AccordionContentProps> = ({\n  children,\n  css,\n  ...remainingProps\n}) => (\n  <StyledContent {...remainingProps}>\n    <CSSWrapper css={css}>{children}</CSSWrapper>\n  </StyledContent>\n)\n"],"names":["open","keyframes","close","StyledContent","styled","Content","AccordionContent","children","css","remainingProps","React","CSSWrapper"],"mappings":"+QAMA,MAAMA,EAAOC,EAAU,CACrB,KAAM,CAAE,OAAQ,CAAE,EAClB,GAAI,CAAE,OAAQ,uCAAwC,CACxD,CAAC,EAEKC,EAAQD,EAAU,CACtB,KAAM,CAAE,OAAQ,uCAAwC,EACxD,GAAI,CAAE,OAAQ,CAAE,CAClB,CAAC,EAEKE,EAAgBC,EAAOC,EAAS,CACpC,OAAQ,EACR,MAAO,OACP,GAAI,SACJ,SAAU,SACV,uBAAwB,CAAE,aAAc,WAAY,EAEpD,eAAgB,CACd,uBAAwB,CAAE,UAAW,GAAGL,kBAAsB,EAC9D,yBAA0B,CAAE,UAAW,GAAGE,kBAAuB,CACnE,CACF,CAAC,EAIYI,EAAoD,CAAC,CAChE,SAAAC,EACA,IAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAe,GAAGM,CAAAA,EACjBC,EAAA,cAACC,EAAA,CAAW,IAAKH,CAAMD,EAAAA,CAAS,CAClC"}
+{"version":3,"file":"AccordionContent.js","sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { keyframes, styled } from '~/stitches'\nimport { CSSWrapper } from '~/utilities'\n\nconst open = keyframes({\n  from: { height: 0 },\n  to: { height: 'var(--radix-accordion-content-height)' }\n})\n\nconst close = keyframes({\n  from: { height: 'var(--radix-accordion-content-height)' },\n  to: { height: 0 }\n})\n\nconst StyledContent = styled(Content, {\n  border: 0,\n  width: '100%',\n  bg: '$base1',\n  overflow: 'hidden',\n  '&[data-state=\"open\"]': { borderRadius: '0 0 $0 $0' },\n\n  '@allowMotion': {\n    '&[data-state=\"open\"]': { animation: `${open} 300ms ease-out` },\n    '&[data-state=\"closed\"]': { animation: `${close} 300ms ease-out` }\n  }\n})\n\ntype AccordionContentProps = React.ComponentProps<typeof StyledContent>\n\nexport const AccordionContent: React.FC<AccordionContentProps> = ({\n  children,\n  css,\n  ...remainingProps\n}) => (\n  <StyledContent {...remainingProps}>\n    <CSSWrapper css={css}>{children}</CSSWrapper>\n  </StyledContent>\n)\n"],"names":["open","keyframes","close","StyledContent","styled","Content","AccordionContent","children","css","remainingProps","React","CSSWrapper"],"mappings":"gVAMA,MAAMA,EAAOC,EAAU,CACrB,KAAM,CAAE,OAAQ,CAAE,EAClB,GAAI,CAAE,OAAQ,uCAAwC,CACxD,CAAC,EAEKC,EAAQD,EAAU,CACtB,KAAM,CAAE,OAAQ,uCAAwC,EACxD,GAAI,CAAE,OAAQ,CAAE,CAClB,CAAC,EAEKE,EAAgBC,EAAOC,EAAS,CACpC,OAAQ,EACR,MAAO,OACP,GAAI,SACJ,SAAU,SACV,uBAAwB,CAAE,aAAc,WAAY,EAEpD,eAAgB,CACd,uBAAwB,CAAE,UAAW,GAAGL,kBAAsB,EAC9D,yBAA0B,CAAE,UAAW,GAAGE,kBAAuB,CACnE,CACF,CAAC,EAIYI,EAAoD,CAAC,CAChE,SAAAC,EACA,IAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAe,GAAGM,CAAAA,EACjBC,EAAA,cAACC,EAAA,CAAW,IAAKH,CAAMD,EAAAA,CAAS,CAClC"}

package/dist/components/accordion/AccordionTrigger.js

@@ -1,2 +1,2 @@
-import{ChevronDown as i}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import t from"react";import{ColorScheme as n}from"../../experiments/color-scheme/ColorScheme.js";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Icon as d}from"../icon/Icon.js";const m=e(d,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),l=e(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...c()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),p=({children:o,colorScheme:r={},...a})=>t.createElement(n,{asChild:!0,accent:"grey1",interactive:"loContrast",...r},t.createElement(l,{...a},o,t.createElement(m,{is:i})));export{p as AccordionTrigger};
+import{ChevronDown as a}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import t from"react";import{ColorScheme as n}from"../../experiments/color-scheme/ColorScheme.js";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Icon as m}from"../icon/Icon.js";const d=e(m,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),l=e(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...c()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),p=({children:o,colorScheme:r={},...i})=>t.createElement(n,{asChild:!0,accent:"grey1",interactive:"loContrast",...r},t.createElement(l,{...i},o,t.createElement(d,{is:a})));export{p as AccordionTrigger};
 //# sourceMappingURL=AccordionTrigger.js.map

package/dist/components/accordion/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.js","sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { Icon } from '../icon'\n\nconst RotatingIcon = styled(Icon, {\n  transition: 'transform 300ms',\n  '[data-state=\"open\"] > &': {\n    transform: 'rotate(180deg)'\n  },\n  '[data-state=\"closed\"] > &': {\n    transform: 'rotate(0deg)'\n  }\n})\n\nconst StyledTrigger = styled(Trigger, {\n  border: 0,\n  py: '$3',\n  px: '$4',\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  cursor: 'pointer',\n  bg: '$interactive2',\n  color: '$interactiveForeground',\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-disabled])': {\n    '&:active, &:hover, &:focus-visible': {\n      bg: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  },\n  '&[data-state=\"open\"]': {\n    borderRadius: '$0 $0 0 0'\n  },\n  '&[data-state=\"closed\"]': {\n    borderRadius: '$0'\n  }\n})\n\ntype AccordionTriggerProps = React.ComponentProps<typeof StyledTrigger> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const AccordionTrigger: React.FC<AccordionTriggerProps> = ({\n  children,\n  colorScheme = {},\n  ...remainingProps\n}) => (\n  <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n    <StyledTrigger {...remainingProps}>\n      {children}\n      <RotatingIcon is={ChevronDown} />\n    </StyledTrigger>\n  </ColorScheme>\n)\n"],"names":["RotatingIcon","styled","Icon","StyledTrigger","Trigger","focusVisibleStyleBlock","AccordionTrigger","children","colorScheme","remainingProps","React","ColorScheme","ChevronDown"],"mappings":"6eAUA,MAAMA,EAAeC,EAAOC,EAAM,CAChC,WAAY,kBACZ,0BAA2B,CACzB,UAAW,gBACb,EACA,4BAA6B,CAC3B,UAAW,cACb,CACF,CAAC,EAEKC,EAAgBF,EAAOG,EAAS,CACpC,OAAQ,EACR,GAAI,KACJ,GAAI,KACJ,MAAO,OACP,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,OAAQ,UACR,GAAI,gBACJ,MAAO,yBACP,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,qCAAsC,CACpC,GAAI,eACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,EACA,uBAAwB,CACtB,aAAc,WAChB,EACA,yBAA0B,CACxB,aAAc,IAChB,CACF,CAAC,EAMYC,EAAoD,CAAC,CAChE,SAAAC,EACA,YAAAC,EAAc,MACXC,CACL,IACEC,EAAA,cAACC,EAAA,CAAY,QAAO,GAAC,OAAO,QAAQ,YAAY,aAAc,GAAGH,CAAAA,EAC/DE,EAAA,cAACP,EAAA,CAAe,GAAGM,CAChBF,EAAAA,EACDG,EAAA,cAACV,EAAA,CAAa,GAAIY,CAAAA,CAAa,CACjC,CACF"}
+{"version":3,"file":"AccordionTrigger.js","sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { Icon } from '../icon'\n\nconst RotatingIcon = styled(Icon, {\n  transition: 'transform 300ms',\n  '[data-state=\"open\"] > &': {\n    transform: 'rotate(180deg)'\n  },\n  '[data-state=\"closed\"] > &': {\n    transform: 'rotate(0deg)'\n  }\n})\n\nconst StyledTrigger = styled(Trigger, {\n  border: 0,\n  py: '$3',\n  px: '$4',\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  cursor: 'pointer',\n  bg: '$interactive2',\n  color: '$interactiveForeground',\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-disabled])': {\n    '&:active, &:hover, &:focus-visible': {\n      bg: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  },\n  '&[data-state=\"open\"]': {\n    borderRadius: '$0 $0 0 0'\n  },\n  '&[data-state=\"closed\"]': {\n    borderRadius: '$0'\n  }\n})\n\ntype AccordionTriggerProps = React.ComponentProps<typeof StyledTrigger> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const AccordionTrigger: React.FC<AccordionTriggerProps> = ({\n  children,\n  colorScheme = {},\n  ...remainingProps\n}) => (\n  <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n    <StyledTrigger {...remainingProps}>\n      {children}\n      <RotatingIcon is={ChevronDown} />\n    </StyledTrigger>\n  </ColorScheme>\n)\n"],"names":["RotatingIcon","styled","Icon","StyledTrigger","Trigger","focusVisibleStyleBlock","AccordionTrigger","children","colorScheme","remainingProps","React","ColorScheme","ChevronDown"],"mappings":"8iBAUA,MAAMA,EAAeC,EAAOC,EAAM,CAChC,WAAY,kBACZ,0BAA2B,CACzB,UAAW,gBACb,EACA,4BAA6B,CAC3B,UAAW,cACb,CACF,CAAC,EAEKC,EAAgBF,EAAOG,EAAS,CACpC,OAAQ,EACR,GAAI,KACJ,GAAI,KACJ,MAAO,OACP,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,OAAQ,UACR,GAAI,gBACJ,MAAO,yBACP,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,qCAAsC,CACpC,GAAI,eACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,EACA,uBAAwB,CACtB,aAAc,WAChB,EACA,yBAA0B,CACxB,aAAc,IAChB,CACF,CAAC,EAMYC,EAAoD,CAAC,CAChE,SAAAC,EACA,YAAAC,EAAc,MACXC,CACL,IACEC,EAAA,cAACC,EAAA,CAAY,QAAO,GAAC,OAAO,QAAQ,YAAY,aAAc,GAAGH,CAAAA,EAC/DE,EAAA,cAACP,EAAA,CAAe,GAAGM,CAChBF,EAAAA,EACDG,EAAA,cAACV,EAAA,CAAa,GAAIY,CAAAA,CAAa,CACjC,CACF"}

package/dist/components/alert-dialog/AlertDialogContent.js

@@ -1,2 +1,2 @@
-import{Overlay as m,Content as l,Portal as d}from"@radix-ui/react-alert-dialog";import*as t from"react";import{DIALOG_Z_INDEX as e}from"../../constants/zIndices.js";import{keyframes as a,styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{fadeIn as p,fadeOut as f}from"../../utilities/style/keyframe-animations.js";const o="translate3d(-50%, -50%, 0)",i="translate3d(-50%, 50vh, 0)",c=a({"0%":{transform:i},"100%":{transform:o}}),b=a({"0%":{transform:o},"100%":{transform:i}}),x=r(m,{backgroundColor:"$alpha600",top:0,right:0,bottom:0,left:0,position:"fixed",zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${p} 250ms ease-out`},'&[data-state="closed"]':{animation:`${f} 550ms ease-out`}}}),u=r(l,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${c} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${b} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{sm:{width:"380px"},md:{width:"480px"},lg:{width:"600px"}}}}),h=({size:n="sm",...s})=>t.createElement(d,null,t.createElement(x,null),t.createElement(u,{size:n,...s}));export{h as AlertDialogContent};
+import{Overlay as s,Content as l,Portal as d}from"@radix-ui/react-alert-dialog";import*as t from"react";import{DIALOG_Z_INDEX as e}from"../../constants/zIndices.js";import{keyframes as a,styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{fadeIn as p,fadeOut as f}from"../../utilities/style/keyframe-animations.js";const o="translate3d(-50%, -50%, 0)",i="translate3d(-50%, 50vh, 0)",c=a({"0%":{transform:i},"100%":{transform:o}}),b=a({"0%":{transform:o},"100%":{transform:i}}),x=r(s,{backgroundColor:"$alpha600",top:0,right:0,bottom:0,left:0,position:"fixed",zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${p} 250ms ease-out`},'&[data-state="closed"]':{animation:`${f} 550ms ease-out`}}}),u=r(l,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${c} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${b} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{sm:{width:"380px"},md:{width:"480px"},lg:{width:"600px"}}}}),h=({size:n="sm",...m})=>t.createElement(d,null,t.createElement(x,null),t.createElement(u,{size:n,...m}));export{h as AlertDialogContent};
 //# sourceMappingURL=AlertDialogContent.js.map

package/dist/components/alert-dialog/AlertDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogContent.js","sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\n\nconst slideIn = keyframes({\n  '0%': { transform: contentOffScreen },\n  '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n  '0%': { transform: contentOnScreen },\n  '100%': { transform: contentOffScreen }\n})\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n  backgroundColor: '$alpha600',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  position: 'fixed',\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${fadeIn} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${fadeOut} 550ms ease-out`\n    }\n  }\n})\n\nconst StyledAlertDialogContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$1',\n  boxShadow: '$3',\n  boxSizing: 'border-box',\n  left: '50%',\n  maxWidth: '90vw',\n  p: '$5',\n  position: 'fixed',\n  top: '50%',\n  transform: contentOnScreen,\n  '&:focus': {\n    outline: 'none'\n  },\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    }\n  },\n  variants: {\n    size: {\n      sm: { width: '380px' },\n      md: { width: '480px' },\n      lg: { width: '600px' }\n    }\n  }\n})\n\ntype AlertDialogContentProps = React.ComponentProps<\n  typeof StyledAlertDialogContent\n>\n\nexport const AlertDialogContent: React.FC<AlertDialogContentProps> = ({\n  size = 'sm',\n  ...remainingProps\n}) => (\n  <Portal>\n    <StyledAlertDialogOverlay />\n    <StyledAlertDialogContent size={size} {...remainingProps} />\n  </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","slideIn","keyframes","slideOut","StyledAlertDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledAlertDialogContent","Content","AlertDialogContent","size","remainingProps","React","Portal"],"mappings":"oXAOA,MAAMA,EAAkB,6BAClBC,EAAmB,6BAEnBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWF,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKI,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWH,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKI,EAA2BC,EAAOC,EAAS,CAC/C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAA2BL,EAAOM,EAAS,CAC/C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWZ,EACX,UAAW,CACT,QAAS,MACX,EACA,OAAQQ,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,CACvB,CACF,CACF,CAAC,EAMYS,EAAwD,CAAC,CACpE,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACX,EAAA,IAAyB,EAC1BW,EAAA,cAACL,EAAA,CAAyB,KAAMG,EAAO,GAAGC,CAAAA,CAAgB,CAC5D"}
+{"version":3,"file":"AlertDialogContent.js","sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\n\nconst slideIn = keyframes({\n  '0%': { transform: contentOffScreen },\n  '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n  '0%': { transform: contentOnScreen },\n  '100%': { transform: contentOffScreen }\n})\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n  backgroundColor: '$alpha600',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  position: 'fixed',\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${fadeIn} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${fadeOut} 550ms ease-out`\n    }\n  }\n})\n\nconst StyledAlertDialogContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$1',\n  boxShadow: '$3',\n  boxSizing: 'border-box',\n  left: '50%',\n  maxWidth: '90vw',\n  p: '$5',\n  position: 'fixed',\n  top: '50%',\n  transform: contentOnScreen,\n  '&:focus': {\n    outline: 'none'\n  },\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    }\n  },\n  variants: {\n    size: {\n      sm: { width: '380px' },\n      md: { width: '480px' },\n      lg: { width: '600px' }\n    }\n  }\n})\n\ntype AlertDialogContentProps = React.ComponentProps<\n  typeof StyledAlertDialogContent\n>\n\nexport const AlertDialogContent: React.FC<AlertDialogContentProps> = ({\n  size = 'sm',\n  ...remainingProps\n}) => (\n  <Portal>\n    <StyledAlertDialogOverlay />\n    <StyledAlertDialogContent size={size} {...remainingProps} />\n  </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","slideIn","keyframes","slideOut","StyledAlertDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledAlertDialogContent","Content","AlertDialogContent","size","remainingProps","React","Portal"],"mappings":"qbAOA,MAAMA,EAAkB,6BAClBC,EAAmB,6BAEnBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWF,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKI,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWH,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKI,EAA2BC,EAAOC,EAAS,CAC/C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAA2BL,EAAOM,EAAS,CAC/C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWZ,EACX,UAAW,CACT,QAAS,MACX,EACA,OAAQQ,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,CACvB,CACF,CACF,CAAC,EAMYS,EAAwD,CAAC,CACpE,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACX,EAAA,IAAyB,EAC1BW,EAAA,cAACL,EAAA,CAAyB,KAAMG,EAAO,GAAGC,CAAAA,CAAgB,CAC5D"}

package/dist/components/avatar/Avatar.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as n}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{focusVisibleStyleBlock as v}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{AvatarIcon as p}from"./AvatarIcon.js";import{AvatarImage as u}from"./AvatarImage.js";import{AvatarInitial as b}from"./AvatarInitial.js";import{AvatarPlaceholder as z}from"./AvatarPlaceholder.js";const s={display:"flex",justifyContent:"center",alignItems:"center",color:"$tonal400",borderRadius:"$round",border:"2px solid $tonal100",backgroundColor:"$white",overflow:"hidden",variants:{size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"},xl:{size:"$6"},xxl:{size:"$7"}}}},$=n("div",s),f=n("button",{all:"unset",...s,"&:not([disabled])":{"&:hover":{borderColor:"$tonal400",backgroundColor:"$tonal50"},"&:active":{borderColor:"$primary",backgroundColor:"$tonal100"},"&:focus-visible":v()},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),m=o.createContext({name:void 0,size:"lg"}),d=({children:a,name:e,size:i})=>{const t=o.useMemo(()=>({name:e,size:i}),[e,i]);return o.createElement(m.Provider,{value:t},a)},c=({children:a,size:e="lg",name:i,disabled:t=!1,onClick:l})=>o.createElement(d,{name:i,size:e},l?o.createElement(f,{size:e,disabled:t,onClick:t?void 0:l,css:{cursor:t?"auto":"pointer"}},a):o.createElement($,{size:e},a)),r=c;r.Image=u,r.Initial=b,r.Placeholder=z,r.Icon=p,r.displayName="Avatar";export{r as Avatar,c as AvatarRoot,m as AvatarRootContext,d as AvatarRootProvider};
+import*as o from"react";import{styled as n}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as v}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{AvatarIcon as p}from"./AvatarIcon.js";import{AvatarImage as u}from"./AvatarImage.js";import{AvatarInitial as b}from"./AvatarInitial.js";import{AvatarPlaceholder as z}from"./AvatarPlaceholder.js";const s={display:"flex",justifyContent:"center",alignItems:"center",color:"$tonal400",borderRadius:"$round",border:"2px solid $tonal100",backgroundColor:"$white",overflow:"hidden",variants:{size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"},xl:{size:"$6"},xxl:{size:"$7"}}}},$=n("div",s),f=n("button",{all:"unset",...s,"&:not([disabled])":{"&:hover":{borderColor:"$tonal400",backgroundColor:"$tonal50"},"&:active":{borderColor:"$primary",backgroundColor:"$tonal100"},"&:focus-visible":v()},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),m=o.createContext({name:void 0,size:"lg"}),d=({children:a,name:e,size:i})=>{const t=o.useMemo(()=>({name:e,size:i}),[e,i]);return o.createElement(m.Provider,{value:t},a)},c=({children:a,size:e="lg",name:i,disabled:t=!1,onClick:l})=>o.createElement(d,{name:i,size:e},l?o.createElement(f,{size:e,disabled:t,onClick:t?void 0:l,css:{cursor:t?"auto":"pointer"}},a):o.createElement($,{size:e},a)),r=c;r.Image=u,r.Initial=b,r.Placeholder=z,r.Icon=p,r.displayName="Avatar";export{r as Avatar,c as AvatarRoot,m as AvatarRootContext,d as AvatarRootProvider};
 //# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = {\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  color: '$tonal400',\n  borderRadius: '$round',\n  border: '2px solid $tonal100',\n  backgroundColor: '$white',\n  overflow: 'hidden',\n  variants: {\n    size: {\n      xs: { size: '$2' },\n      sm: { size: '$3' },\n      md: { size: '$4' },\n      lg: { size: '$5' },\n      xl: { size: '$6' },\n      xxl: { size: '$7' }\n    }\n  }\n}\n\nconst StyledDiv = styled('div', avatarRootStyles)\nconst StyledButton = styled('button', {\n  all: 'unset',\n  ...avatarRootStyles,\n  '&:not([disabled])': {\n    '&:hover': {\n      borderColor: '$tonal400',\n      backgroundColor: '$tonal50'\n    },\n    '&:active': {\n      borderColor: '$primary',\n      backgroundColor: '$tonal100'\n    },\n    '&:focus-visible': focusVisibleStyleBlock()\n  },\n  '&[disabled]': {\n    opacity: '30%',\n    cursor: 'not-allowed'\n  }\n})\n\ntype TAvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & { name?: string } & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport type TAvatarRootContext = {\n  name?: TAvatarProps['name']\n  size: TAvatarProps['size']\n}\n\nexport const AvatarRootContext = React.createContext<TAvatarRootContext>({\n  name: undefined,\n  size: 'lg'\n})\n\nexport const AvatarRootProvider: React.FC<TAvatarProps> = ({\n  children,\n  name,\n  size\n}) => {\n  const value = React.useMemo<TAvatarRootContext>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return (\n    <AvatarRootContext.Provider value={value}>\n      {children}\n    </AvatarRootContext.Provider>\n  )\n}\n\nexport const AvatarRoot: React.FC<TAvatarProps> = ({\n  children,\n  size = 'lg',\n  name,\n  disabled = false,\n  onClick\n}) => (\n  <AvatarRootProvider name={name} size={size}>\n    {onClick ? (\n      <StyledButton\n        size={size}\n        disabled={disabled}\n        onClick={disabled ? undefined : onClick}\n        css={{ cursor: disabled ? 'auto' : 'pointer' }}\n      >\n        {children}\n      </StyledButton>\n    ) : (\n      <StyledDiv size={size}>{children}</StyledDiv>\n    )}\n  </AvatarRootProvider>\n)\n\ntype TAvatar = typeof AvatarRoot & {\n  Image: typeof AvatarImage\n  Initial: typeof AvatarInitial\n  Placeholder: typeof AvatarPlaceholder\n  Icon: typeof AvatarIcon\n}\n\nexport const Avatar = AvatarRoot as TAvatar\nAvatar.Image = AvatarImage\nAvatar.Initial = AvatarInitial\nAvatar.Placeholder = AvatarPlaceholder\nAvatar.Icon = AvatarIcon\nAvatar.displayName = 'Avatar'\n"],"names":["avatarRootStyles","StyledDiv","styled","StyledButton","focusVisibleStyleBlock","AvatarRootContext","React","AvatarRootProvider","children","name","size","value","AvatarRoot","disabled","onClick","Avatar","AvatarImage","AvatarInitial","AvatarPlaceholder","AvatarIcon"],"mappings":"geAUA,MAAMA,EAAmB,CACvB,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,MAAO,YACP,aAAc,SACd,OAAQ,sBACR,gBAAiB,SACjB,SAAU,SACV,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,IAAK,CAAE,KAAM,IAAK,CACpB,CACF,CACF,EAEMC,EAAYC,EAAO,MAAOF,CAAgB,EAC1CG,EAAeD,EAAO,SAAU,CACpC,IAAK,QACL,GAAGF,EACH,oBAAqB,CACnB,UAAW,CACT,YAAa,YACb,gBAAiB,UACnB,EACA,WAAY,CACV,YAAa,WACb,gBAAiB,WACnB,EACA,kBAAmBI,EACrB,CAAA,EACA,cAAe,CACb,QAAS,MACT,OAAQ,aACV,CACF,CAAC,EAiBYC,EAAoBC,EAAM,cAAkC,CACvE,KAAM,OACN,KAAM,IACR,CAAC,EAEYC,EAA6C,CAAC,CACzD,SAAAC,EACA,KAAAC,EACA,KAAAC,CACF,IAAM,CACJ,MAAMC,EAAQL,EAAM,QAClB,KAAO,CAAE,KAAAG,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEJ,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAOM,CAAAA,EAChCH,CACH,CAEJ,EAEaI,EAAqC,CAAC,CACjD,SAAAJ,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAI,EAAW,GACX,QAAAC,CACF,IACER,EAAA,cAACC,EAAmB,CAAA,KAAME,EAAM,KAAMC,CACnCI,EAAAA,EACCR,EAAA,cAACH,EAAA,CACC,KAAMO,EACN,SAAUG,EACV,QAASA,EAAW,OAAYC,EAChC,IAAK,CAAE,OAAQD,EAAW,OAAS,SAAU,CAAA,EAE5CL,CACH,EAEAF,EAAA,cAACL,EAAA,CAAU,KAAMS,CAAAA,EAAOF,CAAS,CAErC,EAUWO,EAASH,EACtBG,EAAO,MAAQC,EACfD,EAAO,QAAUE,EACjBF,EAAO,YAAcG,EACrBH,EAAO,KAAOI,EACdJ,EAAO,YAAc"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = {\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  color: '$tonal400',\n  borderRadius: '$round',\n  border: '2px solid $tonal100',\n  backgroundColor: '$white',\n  overflow: 'hidden',\n  variants: {\n    size: {\n      xs: { size: '$2' },\n      sm: { size: '$3' },\n      md: { size: '$4' },\n      lg: { size: '$5' },\n      xl: { size: '$6' },\n      xxl: { size: '$7' }\n    }\n  }\n}\n\nconst StyledDiv = styled('div', avatarRootStyles)\nconst StyledButton = styled('button', {\n  all: 'unset',\n  ...avatarRootStyles,\n  '&:not([disabled])': {\n    '&:hover': {\n      borderColor: '$tonal400',\n      backgroundColor: '$tonal50'\n    },\n    '&:active': {\n      borderColor: '$primary',\n      backgroundColor: '$tonal100'\n    },\n    '&:focus-visible': focusVisibleStyleBlock()\n  },\n  '&[disabled]': {\n    opacity: '30%',\n    cursor: 'not-allowed'\n  }\n})\n\ntype TAvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & { name?: string } & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport type TAvatarRootContext = {\n  name?: TAvatarProps['name']\n  size: TAvatarProps['size']\n}\n\nexport const AvatarRootContext = React.createContext<TAvatarRootContext>({\n  name: undefined,\n  size: 'lg'\n})\n\nexport const AvatarRootProvider: React.FC<TAvatarProps> = ({\n  children,\n  name,\n  size\n}) => {\n  const value = React.useMemo<TAvatarRootContext>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return (\n    <AvatarRootContext.Provider value={value}>\n      {children}\n    </AvatarRootContext.Provider>\n  )\n}\n\nexport const AvatarRoot: React.FC<TAvatarProps> = ({\n  children,\n  size = 'lg',\n  name,\n  disabled = false,\n  onClick\n}) => (\n  <AvatarRootProvider name={name} size={size}>\n    {onClick ? (\n      <StyledButton\n        size={size}\n        disabled={disabled}\n        onClick={disabled ? undefined : onClick}\n        css={{ cursor: disabled ? 'auto' : 'pointer' }}\n      >\n        {children}\n      </StyledButton>\n    ) : (\n      <StyledDiv size={size}>{children}</StyledDiv>\n    )}\n  </AvatarRootProvider>\n)\n\ntype TAvatar = typeof AvatarRoot & {\n  Image: typeof AvatarImage\n  Initial: typeof AvatarInitial\n  Placeholder: typeof AvatarPlaceholder\n  Icon: typeof AvatarIcon\n}\n\nexport const Avatar = AvatarRoot as TAvatar\nAvatar.Image = AvatarImage\nAvatar.Initial = AvatarInitial\nAvatar.Placeholder = AvatarPlaceholder\nAvatar.Icon = AvatarIcon\nAvatar.displayName = 'Avatar'\n"],"names":["avatarRootStyles","StyledDiv","styled","StyledButton","focusVisibleStyleBlock","AvatarRootContext","React","AvatarRootProvider","children","name","size","value","AvatarRoot","disabled","onClick","Avatar","AvatarImage","AvatarInitial","AvatarPlaceholder","AvatarIcon"],"mappings":"iiBAUA,MAAMA,EAAmB,CACvB,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,MAAO,YACP,aAAc,SACd,OAAQ,sBACR,gBAAiB,SACjB,SAAU,SACV,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,IAAK,CAAE,KAAM,IAAK,CACpB,CACF,CACF,EAEMC,EAAYC,EAAO,MAAOF,CAAgB,EAC1CG,EAAeD,EAAO,SAAU,CACpC,IAAK,QACL,GAAGF,EACH,oBAAqB,CACnB,UAAW,CACT,YAAa,YACb,gBAAiB,UACnB,EACA,WAAY,CACV,YAAa,WACb,gBAAiB,WACnB,EACA,kBAAmBI,EACrB,CAAA,EACA,cAAe,CACb,QAAS,MACT,OAAQ,aACV,CACF,CAAC,EAiBYC,EAAoBC,EAAM,cAAkC,CACvE,KAAM,OACN,KAAM,IACR,CAAC,EAEYC,EAA6C,CAAC,CACzD,SAAAC,EACA,KAAAC,EACA,KAAAC,CACF,IAAM,CACJ,MAAMC,EAAQL,EAAM,QAClB,KAAO,CAAE,KAAAG,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEJ,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAOM,CAAAA,EAChCH,CACH,CAEJ,EAEaI,EAAqC,CAAC,CACjD,SAAAJ,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAI,EAAW,GACX,QAAAC,CACF,IACER,EAAA,cAACC,EAAmB,CAAA,KAAME,EAAM,KAAMC,CACnCI,EAAAA,EACCR,EAAA,cAACH,EAAA,CACC,KAAMO,EACN,SAAUG,EACV,QAASA,EAAW,OAAYC,EAChC,IAAK,CAAE,OAAQD,EAAW,OAAS,SAAU,CAAA,EAE5CL,CACH,EAEAF,EAAA,cAACL,EAAA,CAAU,KAAMS,CAAAA,EAAOF,CAAS,CAErC,EAUWO,EAASH,EACtBG,EAAO,MAAQC,EACfD,EAAO,QAAUE,EACjBF,EAAO,YAAcG,EACrBH,EAAO,KAAOI,EACdJ,EAAO,YAAc"}

package/dist/components/carousel/Carousel.js

@@ -1,2 +1,2 @@
-import{CarouselProvider as m,CarouselContext as u}from"pure-react-carousel";import*as e from"react";import"../../stitches.js";import{CSSWrapper as d}from"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{CarouselArrowNext as p,CarouselArrowPrevious as n}from"./CarouselArrows.js";import{CarouselPagination as C}from"./CarouselPagination.js";import{CarouselSlide as S}from"./CarouselSlide.js";import{CarouselSlider as f}from"./CarouselSlider.js";const r=({children:o,css:i,slideHeight:t,slideWidth:l,numSlides:a,...s})=>e.createElement(d,{css:i},e.createElement(m,{naturalSlideWidth:l,naturalSlideHeight:t,totalSlides:a,...s},o)),c=()=>e.useContext(u);r.ArrowNext=p,r.ArrowPrevious=n,r.Pagination=C,r.Slide=S,r.Slider=f,r.displayName="Carousel";export{r as Carousel,c as useCarousel};
+import{CarouselProvider as m,CarouselContext as u}from"pure-react-carousel";import*as e from"react";import"../../stitches.js";import{CSSWrapper as d}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{CarouselArrowNext as p,CarouselArrowPrevious as n}from"./CarouselArrows.js";import{CarouselPagination as C}from"./CarouselPagination.js";import{CarouselSlide as S}from"./CarouselSlide.js";import{CarouselSlider as f}from"./CarouselSlider.js";const r=({children:o,css:i,slideHeight:t,slideWidth:l,numSlides:a,...s})=>e.createElement(d,{css:i},e.createElement(m,{naturalSlideWidth:l,naturalSlideHeight:t,totalSlides:a,...s},o)),c=()=>e.useContext(u);r.ArrowNext=p,r.ArrowPrevious=n,r.Pagination=C,r.Slide=S,r.Slider=f,r.displayName="Carousel";export{r as Carousel,c as useCarousel};
 //# sourceMappingURL=Carousel.js.map

package/dist/components/carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import { CarouselContext, CarouselProvider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { CSSWrapper } from '~/utilities'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype CarouselProps = {\n  slideHeight: number\n  slideWidth: number\n  numSlides: number\n}\n\ntype CarouselSubComponents = {\n  ArrowNext: typeof CarouselArrowNext\n  ArrowPrevious: typeof CarouselArrowPrevious\n  Pagination: typeof CarouselPagination\n  Slide: typeof CarouselSlide\n  Slider: typeof CarouselSlider\n}\n\nexport const Carousel: React.FC<\n  CarouselProps &\n    Omit<\n      React.ComponentProps<typeof CarouselProvider>,\n      'naturalSlideWidth' | 'naturalSlideHeight' | 'totalSlides'\n    > &\n    React.ComponentProps<typeof CSSWrapper>\n> &\n  CarouselSubComponents = ({\n  children,\n  css,\n  slideHeight,\n  slideWidth,\n  numSlides,\n  ...props\n}) => {\n  return (\n    <CSSWrapper css={css}>\n      <CarouselProvider\n        naturalSlideWidth={slideWidth}\n        naturalSlideHeight={slideHeight}\n        totalSlides={numSlides}\n        {...props}\n      >\n        {children}\n      </CarouselProvider>\n    </CSSWrapper>\n  )\n}\n\n/**\n * Documentation about the hook usage\n * https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext\n */\nexport const useCarousel = () => React.useContext(CarouselContext)\n\nCarousel.ArrowNext = CarouselArrowNext\nCarousel.ArrowPrevious = CarouselArrowPrevious\nCarousel.Pagination = CarouselPagination\nCarousel.Slide = CarouselSlide\nCarousel.Slider = CarouselSlider\n\nCarousel.displayName = 'Carousel'\n"],"names":["Carousel","children","css","slideHeight","slideWidth","numSlides","props","React","CSSWrapper","CarouselProvider","useCarousel","CarouselContext","CarouselArrowNext","CarouselArrowPrevious","CarouselPagination","CarouselSlide","CarouselSlider"],"mappings":"kgBAwBa,MAAAA,EAQa,CAAC,CACzB,SAAAC,EACA,IAAAC,EACA,YAAAC,EACA,WAAAC,EACA,UAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAA,CAAW,IAAKN,CAAAA,EACfK,EAAA,cAACE,EAAA,CACC,kBAAmBL,EACnB,mBAAoBD,EACpB,YAAaE,EACZ,GAAGC,CAAAA,EAEHL,CACH,CACF,EAQSS,EAAc,IAAMH,EAAM,WAAWI,CAAe,EAEjEX,EAAS,UAAYY,EACrBZ,EAAS,cAAgBa,EACzBb,EAAS,WAAac,EACtBd,EAAS,MAAQe,EACjBf,EAAS,OAASgB,EAElBhB,EAAS,YAAc"}
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import { CarouselContext, CarouselProvider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { CSSWrapper } from '~/utilities'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype CarouselProps = {\n  slideHeight: number\n  slideWidth: number\n  numSlides: number\n}\n\ntype CarouselSubComponents = {\n  ArrowNext: typeof CarouselArrowNext\n  ArrowPrevious: typeof CarouselArrowPrevious\n  Pagination: typeof CarouselPagination\n  Slide: typeof CarouselSlide\n  Slider: typeof CarouselSlider\n}\n\nexport const Carousel: React.FC<\n  CarouselProps &\n    Omit<\n      React.ComponentProps<typeof CarouselProvider>,\n      'naturalSlideWidth' | 'naturalSlideHeight' | 'totalSlides'\n    > &\n    React.ComponentProps<typeof CSSWrapper>\n> &\n  CarouselSubComponents = ({\n  children,\n  css,\n  slideHeight,\n  slideWidth,\n  numSlides,\n  ...props\n}) => {\n  return (\n    <CSSWrapper css={css}>\n      <CarouselProvider\n        naturalSlideWidth={slideWidth}\n        naturalSlideHeight={slideHeight}\n        totalSlides={numSlides}\n        {...props}\n      >\n        {children}\n      </CarouselProvider>\n    </CSSWrapper>\n  )\n}\n\n/**\n * Documentation about the hook usage\n * https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext\n */\nexport const useCarousel = () => React.useContext(CarouselContext)\n\nCarousel.ArrowNext = CarouselArrowNext\nCarousel.ArrowPrevious = CarouselArrowPrevious\nCarousel.Pagination = CarouselPagination\nCarousel.Slide = CarouselSlide\nCarousel.Slider = CarouselSlider\n\nCarousel.displayName = 'Carousel'\n"],"names":["Carousel","children","css","slideHeight","slideWidth","numSlides","props","React","CSSWrapper","CarouselProvider","useCarousel","CarouselContext","CarouselArrowNext","CarouselArrowPrevious","CarouselPagination","CarouselSlide","CarouselSlider"],"mappings":"mkBAwBa,MAAAA,EAQa,CAAC,CACzB,SAAAC,EACA,IAAAC,EACA,YAAAC,EACA,WAAAC,EACA,UAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAA,CAAW,IAAKN,CAAAA,EACfK,EAAA,cAACE,EAAA,CACC,kBAAmBL,EACnB,mBAAoBD,EACpB,YAAaE,EACZ,GAAGC,CAAAA,EAEHL,CACH,CACF,EAQSS,EAAc,IAAMH,EAAM,WAAWI,CAAe,EAEjEX,EAAS,UAAYY,EACrBZ,EAAS,cAAgBa,EACzBb,EAAS,WAAac,EACtBd,EAAS,MAAQe,EACjBf,EAAS,OAASgB,EAElBhB,EAAS,YAAc"}

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js

@@ -1,2 +1,2 @@
-import{Ok as m}from"@atom-learning/icons";import*as n from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as t}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as s}from"../icon/Icon.js";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{focusVisibleStyleBlock as p}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const e=r(s,{display:"none"}),c=r(t,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$tonal100",color:"$tonal600",borderColor:"currentColor"},"&:focus-visible":{...p()},'&[data-state="on"]':{"&:hover":{bg:"$white",color:"$primaryDark"}}},'&[data-state="off"]':{color:"$tonal400",bg:"$tonal50",borderColor:"$tonal200"},'&[data-state="on"]':{[`& ${e}`]:{display:"block"}}}),d=({size:l="md",children:a,...i})=>o.createElement(n.Item,{...i,asChild:!0},o.createElement(c,{asWorkaround:"button"},o.createElement(e,{is:m,size:l==="lg"?"md":"sm"}),o.createElement(t.Content,null,a)));export{d as ChipToggleGroupItem};
+import{Ok as a}from"@atom-learning/icons";import*as n from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as t}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as s}from"../icon/Icon.js";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as p}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const e=r(s,{display:"none"}),c=r(t,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$tonal100",color:"$tonal600",borderColor:"currentColor"},"&:focus-visible":{...p()},'&[data-state="on"]':{"&:hover":{bg:"$white",color:"$primaryDark"}}},'&[data-state="off"]':{color:"$tonal400",bg:"$tonal50",borderColor:"$tonal200"},'&[data-state="on"]':{[`& ${e}`]:{display:"block"}}}),d=({size:l="md",children:i,...m})=>o.createElement(n.Item,{...m,asChild:!0},o.createElement(c,{asWorkaround:"button"},o.createElement(e,{is:a,size:l==="lg"?"md":"sm"}),o.createElement(t.Content,null,i)));export{d as ChipToggleGroupItem};
 //# sourceMappingURL=ChipToggleGroupItem.js.map

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  display: 'none'\n})\n\nconst StyledChipToggleGroupItem = styled(Chip, {\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    '&:hover': {\n      bg: '$tonal100',\n      color: '$tonal600',\n      borderColor: 'currentColor'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    },\n    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: '$white',\n        color: '$primaryDark'\n      }\n    }\n  },\n  '&[data-state=\"off\"]': {\n    color: '$tonal400',\n    bg: '$tonal50',\n    borderColor: '$tonal200'\n  },\n  '&[data-state=\"on\"]': {\n    [`& ${StyledChipToggleIcon}`]: {\n      display: 'block'\n    }\n  }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem: React.FC<TChipToggleGroupItem> = ({\n  size = 'md',\n  children,\n  ...rest\n}) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledChipToggleGroupItem asWorkaround=\"button\">\n        <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n        <Chip.Content>{children}</Chip.Content>\n      </StyledChipToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","Chip","focusVisibleStyleBlock","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"0dASA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,QAAS,MACX,CAAC,EAEKC,EAA4BF,EAAOG,EAAM,CAC7C,oBAAqB,CACnB,OAAQ,UACR,UAAW,CACT,GAAI,YACJ,MAAO,YACP,YAAa,cACf,EACA,kBAAmB,CACjB,GAAGC,EAAAA,CACL,EACA,qBAAsB,CACpB,UAAW,CACT,GAAI,SACJ,MAAO,cACT,CACF,CACF,EACA,sBAAuB,CACrB,MAAO,YACP,GAAI,WACJ,YAAa,WACf,EACA,qBAAsB,CACpB,CAAC,KAAKL,KAAyB,CAC7B,QAAS,OACX,CACF,CACF,CAAC,EAKYM,EAAsD,CAAC,CAClE,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACP,EAAA,CAA0B,aAAa,QAAA,EACtCO,EAAA,cAACV,EAAA,CAAqB,GAAIY,EAAI,KAAML,IAAS,KAAO,KAAO,IAAM,CAAA,EACjEG,EAAA,cAACN,EAAK,QAAL,KAAcI,CAAS,CAC1B,CACF"}
+{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  display: 'none'\n})\n\nconst StyledChipToggleGroupItem = styled(Chip, {\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    '&:hover': {\n      bg: '$tonal100',\n      color: '$tonal600',\n      borderColor: 'currentColor'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    },\n    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: '$white',\n        color: '$primaryDark'\n      }\n    }\n  },\n  '&[data-state=\"off\"]': {\n    color: '$tonal400',\n    bg: '$tonal50',\n    borderColor: '$tonal200'\n  },\n  '&[data-state=\"on\"]': {\n    [`& ${StyledChipToggleIcon}`]: {\n      display: 'block'\n    }\n  }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem: React.FC<TChipToggleGroupItem> = ({\n  size = 'md',\n  children,\n  ...rest\n}) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledChipToggleGroupItem asWorkaround=\"button\">\n        <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n        <Chip.Content>{children}</Chip.Content>\n      </StyledChipToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","Chip","focusVisibleStyleBlock","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"2hBASA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,QAAS,MACX,CAAC,EAEKC,EAA4BF,EAAOG,EAAM,CAC7C,oBAAqB,CACnB,OAAQ,UACR,UAAW,CACT,GAAI,YACJ,MAAO,YACP,YAAa,cACf,EACA,kBAAmB,CACjB,GAAGC,EAAAA,CACL,EACA,qBAAsB,CACpB,UAAW,CACT,GAAI,SACJ,MAAO,cACT,CACF,CACF,EACA,sBAAuB,CACrB,MAAO,YACP,GAAI,WACJ,YAAa,WACf,EACA,qBAAsB,CACpB,CAAC,KAAKL,KAAyB,CAC7B,QAAS,OACX,CACF,CACF,CAAC,EAKYM,EAAsD,CAAC,CAClE,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACP,EAAA,CAA0B,aAAa,QAAA,EACtCO,EAAA,cAACV,EAAA,CAAqB,GAAIY,EAAI,KAAML,IAAS,KAAO,KAAO,IAAM,CAAA,EACjEG,EAAA,cAACN,EAAK,QAAL,KAAcI,CAAS,CAC1B,CACF"}

package/dist/components/combobox/ComboboxInput.js

@@ -1,2 +1,2 @@
-import{ComboboxInput as o}from"@reach/combobox";import{styled as r,theme as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{encodeBackgroundIcon as e}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const a=r(o,{boxShadow:"none",fontSize:"$md",appearance:"none",backgroundImage:e(t.colors.tonal300.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $tonal300",borderRadius:"$0",boxSizing:"border-box",color:"$tonal600",cursor:"text",display:"block",fontFamily:"$body",height:"$4",pl:"$3",pr:"$6",transition:"all 100ms ease-out",width:"100%","&::placeholder":{color:"$tonal300",opacity:1},"&:focus-within":{borderColor:"$primary",outline:"none"},"&[disabled]":{backgroundColor:"$tonal100",color:"$tonal400",cursor:"not-allowed"},variants:{state:{error:{border:"1px solid $danger"}}}});export{a as ComboboxInput};
+import{ComboboxInput as o}from"@reach/combobox";import{styled as r,theme as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as e}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const a=r(o,{boxShadow:"none",fontSize:"$md",appearance:"none",backgroundImage:e(t.colors.tonal300.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $tonal300",borderRadius:"$0",boxSizing:"border-box",color:"$tonal600",cursor:"text",display:"block",fontFamily:"$body",height:"$4",pl:"$3",pr:"$6",transition:"all 100ms ease-out",width:"100%","&::placeholder":{color:"$tonal300",opacity:1},"&:focus-within":{borderColor:"$primary",outline:"none"},"&[disabled]":{backgroundColor:"$tonal100",color:"$tonal400",cursor:"not-allowed"},variants:{state:{error:{border:"1px solid $danger"}}}});export{a as ComboboxInput};
 //# sourceMappingURL=ComboboxInput.js.map

package/dist/components/combobox/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\n\nexport const ComboboxInput = styled(BaseComboboxInput, {\n  boxShadow: 'none', // prevent default iOS default styling\n  fontSize: '$md', // prevent iOS zooming on focus\n  appearance: 'none',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundPosition: 'right $space$3 top 50%, 0 0',\n  backgroundRepeat: 'no-repeat, repeat',\n  backgroundSize: '20px auto, 100%',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  color: '$tonal600',\n  cursor: 'text',\n  display: 'block',\n  fontFamily: '$body',\n  height: '$4',\n  pl: '$3',\n  pr: '$6',\n  transition: 'all 100ms ease-out',\n  width: '100%',\n  '&::placeholder': {\n    color: '$tonal300',\n    opacity: 1\n  },\n  '&:focus-within': {\n    borderColor: '$primary',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n"],"names":["ComboboxInput","styled","BaseComboboxInput","encodeBackgroundIcon","theme"],"mappings":"0SAKaA,EAAgBC,EAAOC,EAAmB,CACrD,UAAW,OACX,SAAU,MACV,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,mBAAoB,8BACpB,iBAAkB,oBAClB,eAAgB,kBAChB,OAAQ,sBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,OAAQ,KACR,GAAI,KACJ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,iBAAkB,CAChB,YAAa,WACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC"}
+{"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\n\nexport const ComboboxInput = styled(BaseComboboxInput, {\n  boxShadow: 'none', // prevent default iOS default styling\n  fontSize: '$md', // prevent iOS zooming on focus\n  appearance: 'none',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundPosition: 'right $space$3 top 50%, 0 0',\n  backgroundRepeat: 'no-repeat, repeat',\n  backgroundSize: '20px auto, 100%',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  color: '$tonal600',\n  cursor: 'text',\n  display: 'block',\n  fontFamily: '$body',\n  height: '$4',\n  pl: '$3',\n  pr: '$6',\n  transition: 'all 100ms ease-out',\n  width: '100%',\n  '&::placeholder': {\n    color: '$tonal300',\n    opacity: 1\n  },\n  '&:focus-within': {\n    borderColor: '$primary',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n"],"names":["ComboboxInput","styled","BaseComboboxInput","encodeBackgroundIcon","theme"],"mappings":"2WAKaA,EAAgBC,EAAOC,EAAmB,CACrD,UAAW,OACX,SAAU,MACV,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,mBAAoB,8BACpB,iBAAkB,oBAClB,eAAgB,kBAChB,OAAQ,sBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,OAAQ,KACR,GAAI,KACJ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,iBAAkB,CAChB,YAAa,WACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC"}

package/dist/components/dialog/DialogContent.js

@@ -1,2 +1,2 @@
-import{Close as u}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as g,Close as w}from"@radix-ui/react-dialog";import*as o from"react";import{DIALOG_Z_INDEX as r}from"../../constants/zIndices.js";import{keyframes as n,styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{fadeIn as v,fadeOut as $}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as C}from"../action-icon/ActionIcon.js";import{Icon as z}from"../icon/Icon.js";import{DialogBackground as s}from"./DialogBackground.js";const e="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",D=n({"0%":{transform:m},"100%":{transform:e}}),I=n({"0%":{transform:e},"100%":{transform:m}}),y=l(x,{backgroundColor:"$alpha600",top:0,right:0,bottom:0,left:0,position:"fixed",overflowY:"auto",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${v} 250ms ease-out`},'&[data-state="closed"]':{animation:`${$} 550ms ease-out`}}}),E=l(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:e,zIndex:r,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${I} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),O=({size:p="sm",children:a,closeDialogText:f="Close dialog",showCloseButton:c=!0,...h})=>o.createElement(g,null,o.createElement(y,{id:d},o.Children.map(a,t=>(t==null?void 0:t.type)===s&&t),o.createElement(E,{size:p,"aria-label":"Dialog",onPointerDownOutside:t=>{const i=t.target;(i==null?void 0:i.id)!==d&&t.preventDefault()},...h},c&&o.createElement(C,{as:w,css:{position:"absolute",right:"$4",top:"$4"},label:f,hasTooltip:!1,size:"md",theme:"neutral"},o.createElement(z,{is:u})),o.Children.map(a,t=>(t==null?void 0:t.type)!==s&&t))));export{O as DialogContent};
+import{Close as u}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as g,Close as w}from"@radix-ui/react-dialog";import*as o from"react";import{DIALOG_Z_INDEX as r}from"../../constants/zIndices.js";import{keyframes as n,styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{fadeIn as v,fadeOut as $}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as C}from"../action-icon/ActionIcon.js";import{Icon as z}from"../icon/Icon.js";import{DialogBackground as s}from"./DialogBackground.js";const e="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",D=n({"0%":{transform:m},"100%":{transform:e}}),I=n({"0%":{transform:e},"100%":{transform:m}}),y=l(x,{backgroundColor:"$alpha600",top:0,right:0,bottom:0,left:0,position:"fixed",overflowY:"auto",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${v} 250ms ease-out`},'&[data-state="closed"]':{animation:`${$} 550ms ease-out`}}}),E=l(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:e,zIndex:r,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${I} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),O=({size:p="sm",children:a,closeDialogText:f="Close dialog",showCloseButton:c=!0,...h})=>o.createElement(g,null,o.createElement(y,{id:d},o.Children.map(a,t=>(t==null?void 0:t.type)===s&&t),o.createElement(E,{size:p,"aria-label":"Dialog",onPointerDownOutside:t=>{const i=t.target;(i==null?void 0:i.id)!==d&&t.preventDefault()},...h},c&&o.createElement(C,{as:w,css:{position:"absolute",right:"$4",top:"$4"},label:f,hasTooltip:!1,size:"md",theme:"neutral"},o.createElement(z,{is:u})),o.Children.map(a,t=>(t==null?void 0:t.type)!==s&&t))));export{O as DialogContent};
 //# sourceMappingURL=DialogContent.js.map

package/dist/components/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n  '0%': { transform: contentOffScreen },\n  '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n  '0%': { transform: contentOnScreen },\n  '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, {\n  backgroundColor: '$alpha600',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  position: 'fixed',\n  overflowY: 'auto',\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${fadeIn} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${fadeOut} 550ms ease-out`\n    }\n  }\n})\n\nconst StyledDialogContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$1',\n  boxShadow: '$3',\n  boxSizing: 'border-box',\n  left: '50%',\n  maxWidth: '90vw',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n  p: '$5',\n  position: 'fixed',\n  top: '50%',\n  transform: contentOnScreen,\n  zIndex: DIALOG_Z_INDEX,\n  '&:focus': {\n    outline: 'none'\n  },\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    }\n  },\n  variants: {\n    size: {\n      xs: { width: '380px' },\n      sm: { width: '480px' },\n      md: { width: '600px' },\n      lg: { width: '800px' },\n      xl: { width: '1100px' }\n    }\n  }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            css={{ position: 'absolute', right: '$4', top: '$4' }}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"gkBAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAAS,CAC1C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,UAAW,OACX,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAAsBL,EAAOM,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWb,EACX,OAAQS,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,QAAS,CACxB,CACF,CACF,CAAC,EAOYS,EAA8C,CAAC,CAC1D,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,CACtBkB,EAAAA,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOvB,GAClBsB,EAAM,eAAe,CAEzB,EACC,GAAGL,GAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,SAAA,EAENG,EAAA,cAACQ,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
+{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n  '0%': { transform: contentOffScreen },\n  '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n  '0%': { transform: contentOnScreen },\n  '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, {\n  backgroundColor: '$alpha600',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  position: 'fixed',\n  overflowY: 'auto',\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${fadeIn} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${fadeOut} 550ms ease-out`\n    }\n  }\n})\n\nconst StyledDialogContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$1',\n  boxShadow: '$3',\n  boxSizing: 'border-box',\n  left: '50%',\n  maxWidth: '90vw',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n  p: '$5',\n  position: 'fixed',\n  top: '50%',\n  transform: contentOnScreen,\n  zIndex: DIALOG_Z_INDEX,\n  '&:focus': {\n    outline: 'none'\n  },\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    }\n  },\n  variants: {\n    size: {\n      xs: { width: '380px' },\n      sm: { width: '480px' },\n      md: { width: '600px' },\n      lg: { width: '800px' },\n      xl: { width: '1100px' }\n    }\n  }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            css={{ position: 'absolute', right: '$4', top: '$4' }}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"ioBAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAAS,CAC1C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,UAAW,OACX,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAAsBL,EAAOM,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWb,EACX,OAAQS,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,QAAS,CACxB,CACF,CACF,CAAC,EAOYS,EAA8C,CAAC,CAC1D,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,CACtBkB,EAAAA,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOvB,GAClBsB,EAAM,eAAe,CAEzB,EACC,GAAGL,GAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,SAAA,EAENG,EAAA,cAACQ,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}

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

@@ -1,2 +1,2 @@
-import{Content as a}from"@radix-ui/react-dropdown-menu";import{DROPDOWN_Z_INDEX as i}from"../../constants/zIndices.js";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{slideDownAndFade as o,slideLeftAndFade as n,slideUpAndFade as e,slideRightAndFade as d}from"../../utilities/style/keyframe-animations.js";const m=t(a,{bg:"white",borderRadius:"$0",boxShadow:"$0",py:"$2",zIndex:i,"@allowMotion":{animationDuration:"250ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:o},'&[data-side="right"]':{animationName:n},'&[data-side="bottom"]':{animationName:e},'&[data-side="left"]':{animationName:d}}}});export{m as DropdownMenuContent};
+import{Content as i}from"@radix-ui/react-dropdown-menu";import{DROPDOWN_Z_INDEX as t}from"../../constants/zIndices.js";import{styled as a}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideDownAndFade as o,slideLeftAndFade as n,slideUpAndFade as e,slideRightAndFade as d}from"../../utilities/style/keyframe-animations.js";const m=a(i,{bg:"white",borderRadius:"$0",boxShadow:"$0",py:"$2",zIndex:t,"@allowMotion":{animationDuration:"250ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:o},'&[data-side="right"]':{animationName:n},'&[data-side="bottom"]':{animationName:e},'&[data-side="left"]':{animationName:d}}}});export{m as DropdownMenuContent};
 //# sourceMappingURL=DropdownMenuContent.js.map

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 { DROPDOWN_Z_INDEX } from '~/constants/zIndices'\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: DROPDOWN_Z_INDEX,\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","DROPDOWN_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade"],"mappings":"qXAWO,MAAMA,EAAsBC,EAAOC,EAAS,CACjD,GAAI,QACJ,aAAc,KACd,UAAW,KACX,GAAI,KACJ,OAAQC,EACR,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 { DROPDOWN_Z_INDEX } from '~/constants/zIndices'\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: DROPDOWN_Z_INDEX,\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","DROPDOWN_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade"],"mappings":"sbAWO,MAAMA,EAAsBC,EAAOC,EAAS,CACjD,GAAI,QACJ,aAAc,KACd,UAAW,KACX,GAAI,KACJ,OAAQC,EACR,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"}

package/dist/components/grid/Grid.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst GridContainer = styled('div', {\n  display: 'grid',\n  variants: {\n    gap: createThemeVariants('space', { gap: '$key' })\n  }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n} & {\n  css?: CSS\n  as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Grid: React.FC<GridProps> = ({\n  css,\n  gap = 2,\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}) => (\n  <GridContainer\n    css={{\n      ...(minItemSize && {\n        gridTemplateColumns: `repeat(auto-fit, minmax(${minItemSize}, ${maxItemSize}))`\n      }),\n      ...(css as any)\n    }}\n    gap={gap}\n    {...remainingProps}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","createThemeVariants","Grid","css","gap","minItemSize","maxItemSize","remainingProps","React"],"mappings":"6RAKA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,QAAS,OACT,SAAU,CACR,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAUYC,EAA4B,CAAC,CACxC,IAAAC,EACA,IAAAC,EAAM,EACN,YAAAC,EACA,YAAAC,EAAc,SACXC,CACL,IACEC,EAAA,cAACT,EAAA,CACC,IAAK,CACH,GAAIM,GAAe,CACjB,oBAAqB,2BAA2BA,MAAgBC,KAClE,EACA,GAAIH,CACN,EACA,IAAKC,EACJ,GAAGG,CACN,CAAA,EAGFL,EAAK,YAAc"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst GridContainer = styled('div', {\n  display: 'grid',\n  variants: {\n    gap: createThemeVariants('space', { gap: '$key' })\n  }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n} & {\n  css?: CSS\n  as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Grid: React.FC<GridProps> = ({\n  css,\n  gap = 2,\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}) => (\n  <GridContainer\n    css={{\n      ...(minItemSize && {\n        gridTemplateColumns: `repeat(auto-fit, minmax(${minItemSize}, ${maxItemSize}))`\n      }),\n      ...(css as any)\n    }}\n    gap={gap}\n    {...remainingProps}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","createThemeVariants","Grid","css","gap","minItemSize","maxItemSize","remainingProps","React"],"mappings":"8VAKA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,QAAS,OACT,SAAU,CACR,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAUYC,EAA4B,CAAC,CACxC,IAAAC,EACA,IAAAC,EAAM,EACN,YAAAC,EACA,YAAAC,EAAc,SACXC,CACL,IACEC,EAAA,cAACT,EAAA,CACC,IAAK,CACH,GAAIM,GAAe,CACjB,oBAAqB,2BAA2BA,MAAgBC,KAClE,EACA,GAAIH,CACN,EACA,IAAKC,EACJ,GAAGG,CACN,CAAA,EAGFL,EAAK,YAAc"}

package/dist/components/heading/Heading.js

@@ -1,2 +1,2 @@
-import*as i from"react";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t=r("h2",{fontFamily:"$display",fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontWeight:600,fontSize:"$md",lineHeight:1.5,...e(.3864)},sm:{fontSize:"$lg",lineHeight:1.14,...e(.2174,.2254)},md:{fontSize:"$xl",lineHeight:1.14,...e(.2174,.2254)},lg:{fontSize:"$2xl",lineHeight:1.08,...e(.1865,.1945)},xl:{fontSize:"$3xl",lineHeight:1.12,...e(.206,.214)},xxl:{fontSize:"$4xl",lineHeight:1.06,...e(.1793,.1873)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}}}),o=i.forwardRef(({size:n="md",...l},m)=>i.createElement(t,{ref:m,size:n,...l}));o.displayName="Heading";export{o as Heading,t as StyledHeading};
+import*as i from"react";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t=r("h2",{fontFamily:"$display",fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontWeight:600,fontSize:"$md",lineHeight:1.5,...e(.3864)},sm:{fontSize:"$lg",lineHeight:1.14,...e(.2174,.2254)},md:{fontSize:"$xl",lineHeight:1.14,...e(.2174,.2254)},lg:{fontSize:"$2xl",lineHeight:1.08,...e(.1865,.1945)},xl:{fontSize:"$3xl",lineHeight:1.12,...e(.206,.214)},xxl:{fontSize:"$4xl",lineHeight:1.06,...e(.1793,.1873)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}}}),o=i.forwardRef(({size:n="md",...l},m)=>i.createElement(t,{ref:m,size:n,...l}));o.displayName="Heading";export{o as Heading,t 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  fontFamily: '$display',\n  fontWeight: 700,\n  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontFamily: '$body',\n        fontWeight: 600,\n        fontSize: '$md',\n        lineHeight: 1.5,\n        ...capsize(0.3864)\n      },\n      sm: {\n        fontSize: '$lg',\n        lineHeight: 1.14,\n        ...capsize(0.2174, 0.2254)\n      },\n      md: {\n        fontSize: '$xl',\n        lineHeight: 1.14,\n        ...capsize(0.2174, 0.2254)\n      },\n      lg: {\n        fontSize: '$2xl',\n        lineHeight: 1.08,\n        ...capsize(0.1865, 0.1945)\n      },\n      xl: {\n        fontSize: '$3xl',\n        lineHeight: 1.12,\n        ...capsize(0.206, 0.214)\n      },\n      xxl: {\n        fontSize: '$4xl',\n        lineHeight: 1.06,\n        ...capsize(0.1793, 0.1873)\n      }\n    },\n    noCapsize: {\n      true: {\n        '&::before, &::after': { display: 'none !important' }\n      }\n    }\n  }\n})\n\nexport type HeadingProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledHeading>,\n  {\n    as?:\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'h6'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Heading: React.ForwardRefExoticComponent<HeadingProps> =\n  React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n    <StyledHeading ref={ref} size={size} {...remainingProps} />\n  ))\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","capsize","Heading","React","size","remainingProps","ref"],"mappings":"qPAMa,MAAAA,EAAgBC,EAAO,KAAM,CACxC,WAAY,WACZ,WAAY,IACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,WAAY,IACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,KAAO,IAAK,CACzB,EACA,IAAK,CACH,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAe,EAAGC,IACpDH,EAAA,cAACJ,GAAc,IAAKO,EAAK,KAAMF,EAAO,GAAGC,CAAAA,CAAgB,CAC1D,EAEHH,EAAQ,YAAc"}
+{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const StyledHeading = styled('h2', {\n  fontFamily: '$display',\n  fontWeight: 700,\n  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontFamily: '$body',\n        fontWeight: 600,\n        fontSize: '$md',\n        lineHeight: 1.5,\n        ...capsize(0.3864)\n      },\n      sm: {\n        fontSize: '$lg',\n        lineHeight: 1.14,\n        ...capsize(0.2174, 0.2254)\n      },\n      md: {\n        fontSize: '$xl',\n        lineHeight: 1.14,\n        ...capsize(0.2174, 0.2254)\n      },\n      lg: {\n        fontSize: '$2xl',\n        lineHeight: 1.08,\n        ...capsize(0.1865, 0.1945)\n      },\n      xl: {\n        fontSize: '$3xl',\n        lineHeight: 1.12,\n        ...capsize(0.206, 0.214)\n      },\n      xxl: {\n        fontSize: '$4xl',\n        lineHeight: 1.06,\n        ...capsize(0.1793, 0.1873)\n      }\n    },\n    noCapsize: {\n      true: {\n        '&::before, &::after': { display: 'none !important' }\n      }\n    }\n  }\n})\n\nexport type HeadingProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledHeading>,\n  {\n    as?:\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'h6'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Heading: React.ForwardRefExoticComponent<HeadingProps> =\n  React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n    <StyledHeading ref={ref} size={size} {...remainingProps} />\n  ))\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","capsize","Heading","React","size","remainingProps","ref"],"mappings":"sTAMa,MAAAA,EAAgBC,EAAO,KAAM,CACxC,WAAY,WACZ,WAAY,IACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,WAAY,IACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,KAAO,IAAK,CACzB,EACA,IAAK,CACH,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAe,EAAGC,IACpDH,EAAA,cAACJ,GAAc,IAAKO,EAAK,KAAMF,EAAO,GAAGC,CAAAA,CAAgB,CAC1D,EAEHH,EAAQ,YAAc"}

package/dist/components/index.d.ts

@@ -51,6 +51,7 @@ export { RadioButtonField } from './radio-button-field';
 export { RadioCard, RadioCardGroup } from './radio-card';
 export { SearchField } from './search-field';
 export { SearchInput } from './search-input';
+export { SectionMessage } from './section-message';
 export { Select } from './select';
 export { SelectField } from './select-field';
 export { Sidedrawer } from './sidedrawer';

package/dist/components/popover/PopoverContent.js

@@ -1,2 +1,2 @@
-import{Close as r}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as e from"react";import{POPOVER_Z_INDEX as c}from"../../constants/zIndices.js";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{slideDownAndFade as f,slideLeftAndFade as x,slideUpAndFade as $,slideRightAndFade as g}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as z}from"../icon/Icon.js";const b=t(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative",zIndex:c,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:f},'&[data-side="right"]':{animationName:x},'&[data-side="bottom"]':{animationName:$},'&[data-side="left"]':{animationName:g}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),C=t(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...d})=>e.createElement(b,{size:m,side:o,sideOffset:a,...d},n&&e.createElement(w,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",hasTooltip:!1,theme:"neutral"},e.createElement(z,{is:r})),i,e.createElement(C,{width:16,height:8}));export{u as PopoverContent};
+import{Close as d}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as t from"react";import{POPOVER_Z_INDEX as c}from"../../constants/zIndices.js";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideDownAndFade as f,slideLeftAndFade as x,slideUpAndFade as $,slideRightAndFade as g}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as z}from"../icon/Icon.js";const b=e(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative",zIndex:c,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:f},'&[data-side="right"]':{animationName:x},'&[data-side="bottom"]':{animationName:$},'&[data-side="left"]':{animationName:g}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),C=e(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...r})=>t.createElement(b,{size:m,side:o,sideOffset:a,...r},n&&t.createElement(w,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",hasTooltip:!1,theme:"neutral"},t.createElement(z,{is:d})),i,t.createElement(C,{width:16,height:8}));export{u as PopoverContent};
 //# sourceMappingURL=PopoverContent.js.map

package/dist/components/popover/PopoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.js","sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { POPOVER_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport {\n  slideDownAndFade,\n  slideLeftAndFade,\n  slideRightAndFade,\n  slideUpAndFade\n} from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$1',\n  boxShadow: '$2',\n  maxWidth: '90vw',\n  p: '$sizes$2',\n  pr: '$6',\n  position: 'relative',\n  zIndex: POPOVER_Z_INDEX,\n  '@allowMotion': {\n    animationDuration: '75ms',\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  variants: {\n    size: {\n      sm: { maxWidth: '200px' },\n      md: { maxWidth: '400px' },\n      lg: { maxWidth: '600px' }\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  fill: 'white',\n  zIndex: 1,\n  '[data-align=\"end\"] &': { mr: '$sizes$2' },\n  '[data-align=\"start\"] &': { ml: '$sizes$2' }\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent: React.FC<PopoverContentProps> = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...remainingProps\n}) => (\n  <StyledContent\n    size={size}\n    side={side}\n    sideOffset={sideOffset}\n    {...remainingProps}\n  >\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        css={{ position: 'absolute', right: '$0', top: '$0' }}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        theme=\"neutral\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","POPOVER_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","PopoverContent","children","side","sideOffset","closePopoverText","showCloseButton","size","remainingProps","React","ActionIcon","Close","Icon","CloseIcon"],"mappings":"0iBAgBA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,aAAc,KACd,UAAW,KACX,SAAU,OACV,EAAG,WACH,GAAI,KACJ,SAAU,WACV,OAAQC,EACR,eAAgB,CACd,kBAAmB,OACnB,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,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,EAAcP,EAAOQ,EAAO,CAChC,KAAM,QACN,OAAQ,EACR,uBAAwB,CAAE,GAAI,UAAW,EACzC,yBAA0B,CAAE,GAAI,UAAW,CAC7C,CAAC,EAQYC,EAAgD,CAAC,CAC5D,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,iBAAAC,EAAmB,gBACnB,gBAAAC,EAAkB,GAClB,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAAClB,EAAA,CACC,KAAMgB,EACN,KAAMJ,EACN,WAAYC,EACX,GAAGI,CAAAA,EAEHF,GACCG,EAAA,cAACC,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAON,EACP,KAAK,KACL,WAAY,GACZ,MAAM,SAENI,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDX,EACDO,EAAA,cAACV,EAAA,CAAY,MAAO,GAAI,OAAQ,CAAA,CAAG,CACrC"}
+{"version":3,"file":"PopoverContent.js","sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { POPOVER_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport {\n  slideDownAndFade,\n  slideLeftAndFade,\n  slideRightAndFade,\n  slideUpAndFade\n} from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$1',\n  boxShadow: '$2',\n  maxWidth: '90vw',\n  p: '$sizes$2',\n  pr: '$6',\n  position: 'relative',\n  zIndex: POPOVER_Z_INDEX,\n  '@allowMotion': {\n    animationDuration: '75ms',\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  variants: {\n    size: {\n      sm: { maxWidth: '200px' },\n      md: { maxWidth: '400px' },\n      lg: { maxWidth: '600px' }\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  fill: 'white',\n  zIndex: 1,\n  '[data-align=\"end\"] &': { mr: '$sizes$2' },\n  '[data-align=\"start\"] &': { ml: '$sizes$2' }\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent: React.FC<PopoverContentProps> = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...remainingProps\n}) => (\n  <StyledContent\n    size={size}\n    side={side}\n    sideOffset={sideOffset}\n    {...remainingProps}\n  >\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        css={{ position: 'absolute', right: '$0', top: '$0' }}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        theme=\"neutral\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","POPOVER_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","PopoverContent","children","side","sideOffset","closePopoverText","showCloseButton","size","remainingProps","React","ActionIcon","Close","Icon","CloseIcon"],"mappings":"2mBAgBA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,aAAc,KACd,UAAW,KACX,SAAU,OACV,EAAG,WACH,GAAI,KACJ,SAAU,WACV,OAAQC,EACR,eAAgB,CACd,kBAAmB,OACnB,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,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,EAAcP,EAAOQ,EAAO,CAChC,KAAM,QACN,OAAQ,EACR,uBAAwB,CAAE,GAAI,UAAW,EACzC,yBAA0B,CAAE,GAAI,UAAW,CAC7C,CAAC,EAQYC,EAAgD,CAAC,CAC5D,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,iBAAAC,EAAmB,gBACnB,gBAAAC,EAAkB,GAClB,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAAClB,EAAA,CACC,KAAMgB,EACN,KAAMJ,EACN,WAAYC,EACX,GAAGI,CAAAA,EAEHF,GACCG,EAAA,cAACC,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAON,EACP,KAAK,KACL,WAAY,GACZ,MAAM,SAENI,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDX,EACDO,EAAA,cAACV,EAAA,CAAY,MAAO,GAAI,OAAQ,CAAA,CAAG,CACrC"}