@atom-learning/components 2.51.0 → 2.52.0

package/CHANGELOG.md

@@ -1,13 +1,22 @@
-# [2.51.0](https://github.com/Atom-Learning/components/compare/v2.50.2...v2.51.0) (2023-04-28)
+# [2.52.0](https://github.com/Atom-Learning/components/compare/v2.51.0...v2.52.0) (2023-05-05)
+
+
+### Bug Fixes
+
+* 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
 
-* created SectionMessage component ([0f958e8](https://github.com/Atom-Learning/components/commit/0f958e84ec42a892cfe516293141d41b82de853b))
-* PR comments ([c027ef0](https://github.com/Atom-Learning/components/commit/c027ef075e69d705f30120c79440381dd908df93))
-* simplify SectionMessage API by utilising pos absolute ([f69a461](https://github.com/Atom-Learning/components/commit/f69a4612ee7d2b4ebec8db0be9dfd76a7c37d62d))
-* small UI tweaks ([1d86a27](https://github.com/Atom-Learning/components/commit/1d86a27108d0a746cc4867ec0aa78e41434d7232))
-* use context to add paddings left/right depending on whether icon and dismiss present ([85fd65c](https://github.com/Atom-Learning/components/commit/85fd65c6c81f6eecadca1133ce52cea253506a40))
+* 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/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"}

package/dist/components/select/Select.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as s,theme as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{encodeBackgroundIcon as p}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const u=s("select",{appearance:"none",backgroundColor:"white",backgroundImage:p(c.colors.tonal300.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $tonal300",borderRadius:"$0",color:"$tonal600",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":{backgroundColor:"$tonal100",color:"$tonal400",cursor:"not-allowed"},variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),a=e.forwardRef(({placeholder:r,children:n,size:i="md",...o},l)=>{const t={size:i,ref:l,...o};return[o.value,o.defaultValue].every(d=>d===void 0)&&(t.defaultValue=""),e.createElement(u,{...t},r&&e.createElement("option",{disabled:!0,hidden:!0,value:""},r),n)});a.displayName="Select";export{a as Select};
+import*as e from"react";import{styled as s,theme as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as p}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const u=s("select",{appearance:"none",backgroundColor:"white",backgroundImage:p(c.colors.tonal300.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $tonal300",borderRadius:"$0",color:"$tonal600",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":{backgroundColor:"$tonal100",color:"$tonal400",cursor:"not-allowed"},variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),a=e.forwardRef(({placeholder:r,children:n,size:i="md",...o},l)=>{const t={size:i,ref:l,...o};return[o.value,o.defaultValue].every(d=>d===void 0)&&(t.defaultValue=""),e.createElement(u,{...t},r&&e.createElement("option",{disabled:!0,hidden:!0,value:""},r),n)});a.displayName="Select";export{a as Select};
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'white',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  color: '$tonal600',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\n  },\n  '&:focus': {\n    borderColor: '$primary',\n    outline: 'none'\n  },\n  '&::-ms-expand': {\n    display: 'none'\n  },\n  '&[disabled], > option[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      sm: {\n        backgroundPosition: 'right $space$2 top 50%, 0 0',\n        backgroundSize: '18px auto, 100%',\n        fontSize: '$sm',\n        height: '$3',\n        pl: '$2',\n        pr: '$5'\n      },\n      md: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$4',\n        pl: '$3',\n        pr: '$6'\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.FC<SelectProps> = React.forwardRef(\n  ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n    const props = { size, ref, ...remainingProps }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"4QAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiB,QACjB,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,iBAAkB,oBAClB,OAAQ,sBACR,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,UAAW,CACT,YAAa,WACb,QAAS,MACX,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmC,CACjC,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAgBYC,EAAgCC,EAAM,WACjD,CAAC,CAAE,YAAAC,EAAa,SAAAC,EAAU,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAAQ,CAClE,MAAMC,EAAQ,CAAE,KAAAH,EAAM,IAAAE,EAAK,GAAGD,CAAe,EAE7C,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBN,EAAA,cAACL,EAAA,CAAc,GAAGW,CACfL,EAAAA,GACCD,EAAA,cAAC,SAAA,CAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,EAAA,EAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'white',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  color: '$tonal600',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\n  },\n  '&:focus': {\n    borderColor: '$primary',\n    outline: 'none'\n  },\n  '&::-ms-expand': {\n    display: 'none'\n  },\n  '&[disabled], > option[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      sm: {\n        backgroundPosition: 'right $space$2 top 50%, 0 0',\n        backgroundSize: '18px auto, 100%',\n        fontSize: '$sm',\n        height: '$3',\n        pl: '$2',\n        pr: '$5'\n      },\n      md: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$4',\n        pl: '$3',\n        pr: '$6'\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.FC<SelectProps> = React.forwardRef(\n  ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n    const props = { size, ref, ...remainingProps }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"6UAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiB,QACjB,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,iBAAkB,oBAClB,OAAQ,sBACR,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,UAAW,CACT,YAAa,WACb,QAAS,MACX,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmC,CACjC,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAgBYC,EAAgCC,EAAM,WACjD,CAAC,CAAE,YAAAC,EAAa,SAAAC,EAAU,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAAQ,CAClE,MAAMC,EAAQ,CAAE,KAAAH,EAAM,IAAAE,EAAK,GAAGD,CAAe,EAE7C,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBN,EAAA,cAACL,EAAA,CAAc,GAAGW,CACfL,EAAAA,GACCD,EAAA,cAAC,SAAA,CAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,EAAA,EAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}

package/dist/components/sidedrawer/SidedrawerContent.js

@@ -1,2 +1,2 @@
-import{Content as i,Portal as a}from"@radix-ui/react-dialog";import t from"react";import{MAX_Z_INDEX as r}from"../../constants/zIndices.js";import{styled as n}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{slideInLeft as m,slideOutLeft as d}from"../../utilities/style/keyframe-animations.js";import{SidedrawerOverlay as l}from"./SidedrawerOverlay.js";const s=n(i,{bg:"white",boxShadow:"$2",display:"flex",flexDirection:"column",position:"fixed",top:0,left:0,height:"100%",maxWidth:"304px",width:"100%",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${m} 250ms ease-out`},'&[data-state="closed"]':{animation:`${d} 250ms ease-out`}}}),p=({children:e,...o})=>t.createElement(a,null,t.createElement(l,{"data-testid":"sidedrawer_overlay"}),t.createElement(s,{role:"navigation",...o},e));export{p as SidedrawerContent};
+import{Content as i,Portal as a}from"@radix-ui/react-dialog";import t from"react";import{MAX_Z_INDEX as r}from"../../constants/zIndices.js";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideInLeft as n,slideOutLeft as d}from"../../utilities/style/keyframe-animations.js";import{SidedrawerOverlay as l}from"./SidedrawerOverlay.js";const s=m(i,{bg:"white",boxShadow:"$2",display:"flex",flexDirection:"column",position:"fixed",top:0,left:0,height:"100%",maxWidth:"304px",width:"100%",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${n} 250ms ease-out`},'&[data-state="closed"]':{animation:`${d} 250ms ease-out`}}}),p=({children:e,...o})=>t.createElement(a,null,t.createElement(l,{"data-testid":"sidedrawer_overlay"}),t.createElement(s,{role:"navigation",...o},e));export{p as SidedrawerContent};
 //# sourceMappingURL=SidedrawerContent.js.map

package/dist/components/sidedrawer/SidedrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidedrawerContent.js","sources":["../../../src/components/sidedrawer/SidedrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport React from 'react'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport { slideInLeft, slideOutLeft } from '~/utilities'\n\nimport { SidedrawerOverlay } from './SidedrawerOverlay'\n\nconst StyledContent = styled(Content, {\n  bg: 'white',\n  boxShadow: '$2',\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  height: '100%',\n  maxWidth: '304px',\n  width: '100%',\n  zIndex: MAX_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideInLeft} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOutLeft} 250ms ease-out`\n    }\n  }\n})\n\nexport const SidedrawerContent: React.FC<\n  React.ComponentProps<typeof StyledContent>\n> = ({ children, ...remainingProps }) => (\n  <Portal>\n    <SidedrawerOverlay data-testid=\"sidedrawer_overlay\" />\n    <StyledContent role=\"navigation\" {...remainingProps}>\n      {children}\n    </StyledContent>\n  </Portal>\n)\n"],"names":["StyledContent","styled","Content","MAX_Z_INDEX","slideInLeft","slideOutLeft","SidedrawerContent","children","remainingProps","React","Portal","SidedrawerOverlay"],"mappings":"iZASA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,UAAW,KACX,QAAS,OACT,cAAe,SACf,SAAU,QACV,IAAK,EACL,KAAM,EACN,OAAQ,OACR,SAAU,QACV,MAAO,OACP,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEYC,EAET,CAAC,CAAE,SAAAC,KAAaC,CAAe,IACjCC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACE,EAAA,CAAkB,cAAY,qBAAqB,EACpDF,EAAA,cAACT,EAAA,CAAc,KAAK,aAAc,GAAGQ,CAClCD,EAAAA,CACH,CACF"}
+{"version":3,"file":"SidedrawerContent.js","sources":["../../../src/components/sidedrawer/SidedrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport React from 'react'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport { slideInLeft, slideOutLeft } from '~/utilities'\n\nimport { SidedrawerOverlay } from './SidedrawerOverlay'\n\nconst StyledContent = styled(Content, {\n  bg: 'white',\n  boxShadow: '$2',\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  height: '100%',\n  maxWidth: '304px',\n  width: '100%',\n  zIndex: MAX_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideInLeft} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOutLeft} 250ms ease-out`\n    }\n  }\n})\n\nexport const SidedrawerContent: React.FC<\n  React.ComponentProps<typeof StyledContent>\n> = ({ children, ...remainingProps }) => (\n  <Portal>\n    <SidedrawerOverlay data-testid=\"sidedrawer_overlay\" />\n    <StyledContent role=\"navigation\" {...remainingProps}>\n      {children}\n    </StyledContent>\n  </Portal>\n)\n"],"names":["StyledContent","styled","Content","MAX_Z_INDEX","slideInLeft","slideOutLeft","SidedrawerContent","children","remainingProps","React","Portal","SidedrawerOverlay"],"mappings":"kdASA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,UAAW,KACX,QAAS,OACT,cAAe,SACf,SAAU,QACV,IAAK,EACL,KAAM,EACN,OAAQ,OACR,SAAU,QACV,MAAO,OACP,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEYC,EAET,CAAC,CAAE,SAAAC,KAAaC,CAAe,IACjCC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACE,EAAA,CAAkB,cAAY,qBAAqB,EACpDF,EAAA,cAACT,EAAA,CAAc,KAAK,aAAc,GAAGQ,CAClCD,EAAAA,CACH,CACF"}

package/dist/components/sidedrawer/SidedrawerOverlay.js

@@ -1,2 +1,2 @@
-import{Overlay as o}from"@radix-ui/react-dialog";import{MAX_Z_INDEX as t}from"../../constants/zIndices.js";import{styled as a}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{fadeIn as e,fadeOut as i}from"../../utilities/style/keyframe-animations.js";const r=a(o,{animationFillMode:"forwards",bg:"$alpha600",cursor:"pointer",height:"100vh",left:"0",position:"fixed",top:"0",width:"100vw",zIndex:t-1,"@allowMotion":{'&[data-state="open"]':{animation:`${e} 250ms ease-out`},'&[data-state="closed"]':{animation:`${i} 550ms ease-out`}}});export{r as SidedrawerOverlay};
+import{Overlay as o}from"@radix-ui/react-dialog";import{MAX_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{fadeIn as e,fadeOut as i}from"../../utilities/style/keyframe-animations.js";const r=a(o,{animationFillMode:"forwards",bg:"$alpha600",cursor:"pointer",height:"100vh",left:"0",position:"fixed",top:"0",width:"100vw",zIndex:t-1,"@allowMotion":{'&[data-state="open"]':{animation:`${e} 250ms ease-out`},'&[data-state="closed"]':{animation:`${i} 550ms ease-out`}}});export{r as SidedrawerOverlay};
 //# sourceMappingURL=SidedrawerOverlay.js.map

package/dist/components/sidedrawer/SidedrawerOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidedrawerOverlay.js","sources":["../../../src/components/sidedrawer/SidedrawerOverlay.tsx"],"sourcesContent":["import { Overlay } from '@radix-ui/react-dialog'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nexport const SidedrawerOverlay = styled(Overlay, {\n  animationFillMode: 'forwards',\n  bg: '$alpha600',\n  cursor: 'pointer',\n  height: '100vh',\n  left: '0',\n  position: 'fixed',\n  top: '0',\n  width: '100vw',\n  zIndex: MAX_Z_INDEX - 1,\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"],"names":["SidedrawerOverlay","styled","Overlay","MAX_Z_INDEX","fadeIn","fadeOut"],"mappings":"2SAMO,MAAMA,EAAoBC,EAAOC,EAAS,CAC/C,kBAAmB,WACnB,GAAI,YACJ,OAAQ,UACR,OAAQ,QACR,KAAM,IACN,SAAU,QACV,IAAK,IACL,MAAO,QACP,OAAQC,EAAc,EACtB,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC"}
+{"version":3,"file":"SidedrawerOverlay.js","sources":["../../../src/components/sidedrawer/SidedrawerOverlay.tsx"],"sourcesContent":["import { Overlay } from '@radix-ui/react-dialog'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nexport const SidedrawerOverlay = styled(Overlay, {\n  animationFillMode: 'forwards',\n  bg: '$alpha600',\n  cursor: 'pointer',\n  height: '100vh',\n  left: '0',\n  position: 'fixed',\n  top: '0',\n  width: '100vw',\n  zIndex: MAX_Z_INDEX - 1,\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"],"names":["SidedrawerOverlay","styled","Overlay","MAX_Z_INDEX","fadeIn","fadeOut"],"mappings":"4WAMO,MAAMA,EAAoBC,EAAOC,EAAS,CAC/C,kBAAmB,WACnB,GAAI,YACJ,OAAQ,UACR,OAAQ,QACR,KAAM,IACN,SAAU,QACV,IAAK,IACL,MAAO,QACP,OAAQC,EAAc,EACtB,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC"}

package/dist/components/slider/Slider.js

@@ -1,2 +1,2 @@
-import{Track as f,Root as h,Range as b,Thumb as g}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{CSSWrapper as v}from"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{SliderSteps as x}from"./SliderSteps.js";import{SliderValue as y}from"./SliderValue.js";const a=t(f,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"}}),S=t(h,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[data-disabled]":{cursor:"not-allowed",bg:"$tonal100"},variants:{theme:{light:{[`${a}`]:{bg:"#fff"}},tonal:{[`${a}`]:{bg:"$tonal200"}}}}}),w=t(b,{bg:"$primary",borderRadius:"$round",height:"100%",position:"absolute","&[data-disabled]":{bg:"$tonal200",cursor:"not-allowed"}}),R=t(g,{bg:"$primaryMid",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primaryDark"},"&:focus":{outline:"2px solid $primaryMid",outlineOffset:"2px"},"&[data-disabled]":{bg:"$tonal200",cursor:"not-allowed"}}),o=e.forwardRef(({value:i,defaultValue:l,min:n=0,max:d=100,theme:s="tonal",css:m,children:u,...p},c)=>{const r=i||l;return e.createElement(v,{css:m},e.createElement(S,{theme:s,defaultValue:l,value:i,min:n,max:d,ref:c,...p},e.createElement(a,null,e.createElement(w,null)),(r==null?void 0:r.length)&&r.map((k,$)=>e.createElement(R,{key:`thumb${$}`}))),u)});o.Value=y,o.Steps=x,o.displayName="Slider";export{o as Slider};
+import{Track as f,Root as h,Range as b,Thumb as g}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{CSSWrapper as v}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{SliderSteps as x}from"./SliderSteps.js";import{SliderValue as y}from"./SliderValue.js";const a=t(f,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"}}),S=t(h,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[data-disabled]":{cursor:"not-allowed",bg:"$tonal100"},variants:{theme:{light:{[`${a}`]:{bg:"#fff"}},tonal:{[`${a}`]:{bg:"$tonal200"}}}}}),w=t(b,{bg:"$primary",borderRadius:"$round",height:"100%",position:"absolute","&[data-disabled]":{bg:"$tonal200",cursor:"not-allowed"}}),R=t(g,{bg:"$primaryMid",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primaryDark"},"&:focus":{outline:"2px solid $primaryMid",outlineOffset:"2px"},"&[data-disabled]":{bg:"$tonal200",cursor:"not-allowed"}}),o=e.forwardRef(({value:i,defaultValue:l,min:n=0,max:d=100,theme:m="tonal",css:s,children:u,...p},c)=>{const r=i||l;return e.createElement(v,{css:s},e.createElement(S,{theme:m,defaultValue:l,value:i,min:n,max:d,ref:c,...p},e.createElement(a,null,e.createElement(w,null)),(r==null?void 0:r.length)&&r.map((k,$)=>e.createElement(R,{key:`thumb${$}`}))),u)});o.Value=y,o.Steps=x,o.displayName="Slider";export{o as Slider};
 //# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { CSSWrapper } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  borderRadius: '$round',\n  flexGrow: 1,\n  position: 'relative',\n  '&[data-orientation=\"horizontal\"]': { height: '$space$1' },\n  '&[data-orientation=\"vertical\"]': { width: '$space$1' }\n})\n\nconst StyledSlider = styled(Root, {\n  alignItems: 'center',\n  display: 'flex',\n  position: 'relative',\n  touchAction: 'none',\n  userSelect: 'none',\n  cursor: 'pointer',\n  '&[data-orientation=\"horizontal\"]': {\n    height: '$1'\n  },\n  '&[data-orientation=\"vertical\"]': {\n    flexDirection: 'column',\n    width: '$1'\n  },\n  '&[data-disabled]': { cursor: 'not-allowed', bg: '$tonal100' },\n  variants: {\n    theme: {\n      light: {\n        [`${StyledTrack}`]: { bg: '#fff' }\n      },\n      tonal: {\n        [`${StyledTrack}`]: { bg: '$tonal200' }\n      }\n    }\n  }\n})\n\nconst StyledRange = styled(Range, {\n  bg: '$primary',\n  borderRadius: '$round',\n  height: '100%',\n  position: 'absolute',\n  '&[data-disabled]': { bg: '$tonal200', cursor: 'not-allowed' }\n})\n\nconst StyledThumb = styled(Thumb, {\n  bg: '$primaryMid',\n  borderRadius: '$round',\n  display: 'block',\n  size: '$1',\n  '&:hover': {\n    bg: '$primaryDark'\n  },\n  '&:focus': {\n    outline: '2px solid $primaryMid',\n    outlineOffset: '2px'\n  },\n  '&[data-disabled]': { bg: '$tonal200', cursor: 'not-allowed' }\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider>\n\ntype SliderType = React.ForwardRefExoticComponent<SliderProps> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider: SliderType = React.forwardRef(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      css,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper css={css}>\n        <StyledSlider\n          theme={theme}\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","css","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"4XASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,aAAc,SACd,SAAU,EACV,SAAU,WACV,mCAAoC,CAAE,OAAQ,UAAW,EACzD,iCAAkC,CAAE,MAAO,UAAW,CACxD,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,WAAY,SACZ,QAAS,OACT,SAAU,WACV,YAAa,OACb,WAAY,OACZ,OAAQ,UACR,mCAAoC,CAClC,OAAQ,IACV,EACA,iCAAkC,CAChC,cAAe,SACf,MAAO,IACT,EACA,mBAAoB,CAAE,OAAQ,cAAe,GAAI,WAAY,EAC7D,SAAU,CACR,MAAO,CACL,MAAO,CACL,CAAC,GAAGJ,KAAgB,CAAE,GAAI,MAAO,CACnC,EACA,MAAO,CACL,CAAC,GAAGA,KAAgB,CAAE,GAAI,WAAY,CACxC,CACF,CACF,CACF,CAAC,EAEKK,EAAcJ,EAAOK,EAAO,CAChC,GAAI,WACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,mBAAoB,CAAE,GAAI,YAAa,OAAQ,aAAc,CAC/D,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,QAAS,QACT,KAAM,KACN,UAAW,CACT,GAAI,cACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,mBAAoB,CAAE,GAAI,YAAa,OAAQ,aAAc,CAC/D,CAAC,EASYC,EAAqBC,EAAM,WACtC,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,IAAKL,CACfN,EAAAA,EAAA,cAACP,EAAA,CACC,MAAOY,EACP,aAAcH,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAEJR,EAAAA,EAAA,cAACV,EAAA,KACCU,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,GAAK,CAAA,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { CSSWrapper } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  borderRadius: '$round',\n  flexGrow: 1,\n  position: 'relative',\n  '&[data-orientation=\"horizontal\"]': { height: '$space$1' },\n  '&[data-orientation=\"vertical\"]': { width: '$space$1' }\n})\n\nconst StyledSlider = styled(Root, {\n  alignItems: 'center',\n  display: 'flex',\n  position: 'relative',\n  touchAction: 'none',\n  userSelect: 'none',\n  cursor: 'pointer',\n  '&[data-orientation=\"horizontal\"]': {\n    height: '$1'\n  },\n  '&[data-orientation=\"vertical\"]': {\n    flexDirection: 'column',\n    width: '$1'\n  },\n  '&[data-disabled]': { cursor: 'not-allowed', bg: '$tonal100' },\n  variants: {\n    theme: {\n      light: {\n        [`${StyledTrack}`]: { bg: '#fff' }\n      },\n      tonal: {\n        [`${StyledTrack}`]: { bg: '$tonal200' }\n      }\n    }\n  }\n})\n\nconst StyledRange = styled(Range, {\n  bg: '$primary',\n  borderRadius: '$round',\n  height: '100%',\n  position: 'absolute',\n  '&[data-disabled]': { bg: '$tonal200', cursor: 'not-allowed' }\n})\n\nconst StyledThumb = styled(Thumb, {\n  bg: '$primaryMid',\n  borderRadius: '$round',\n  display: 'block',\n  size: '$1',\n  '&:hover': {\n    bg: '$primaryDark'\n  },\n  '&:focus': {\n    outline: '2px solid $primaryMid',\n    outlineOffset: '2px'\n  },\n  '&[data-disabled]': { bg: '$tonal200', cursor: 'not-allowed' }\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider>\n\ntype SliderType = React.ForwardRefExoticComponent<SliderProps> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider: SliderType = React.forwardRef(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      css,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper css={css}>\n        <StyledSlider\n          theme={theme}\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","css","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"6bASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,aAAc,SACd,SAAU,EACV,SAAU,WACV,mCAAoC,CAAE,OAAQ,UAAW,EACzD,iCAAkC,CAAE,MAAO,UAAW,CACxD,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,WAAY,SACZ,QAAS,OACT,SAAU,WACV,YAAa,OACb,WAAY,OACZ,OAAQ,UACR,mCAAoC,CAClC,OAAQ,IACV,EACA,iCAAkC,CAChC,cAAe,SACf,MAAO,IACT,EACA,mBAAoB,CAAE,OAAQ,cAAe,GAAI,WAAY,EAC7D,SAAU,CACR,MAAO,CACL,MAAO,CACL,CAAC,GAAGJ,KAAgB,CAAE,GAAI,MAAO,CACnC,EACA,MAAO,CACL,CAAC,GAAGA,KAAgB,CAAE,GAAI,WAAY,CACxC,CACF,CACF,CACF,CAAC,EAEKK,EAAcJ,EAAOK,EAAO,CAChC,GAAI,WACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,mBAAoB,CAAE,GAAI,YAAa,OAAQ,aAAc,CAC/D,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,QAAS,QACT,KAAM,KACN,UAAW,CACT,GAAI,cACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,mBAAoB,CAAE,GAAI,YAAa,OAAQ,aAAc,CAC/D,CAAC,EASYC,EAAqBC,EAAM,WACtC,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,IAAKL,CACfN,EAAAA,EAAA,cAACP,EAAA,CACC,MAAOY,EACP,aAAcH,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAEJR,EAAAA,EAAA,cAACV,EAAA,KACCU,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,GAAK,CAAA,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}

package/dist/components/stack/Stack.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as f}from"../../stitches.js";import{createThemeVariants as m}from"../../utilities/create-theme-variants/createThemeVariants.js";import{CSSWrapper as c}from"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const w=f("div",{display:"flex","& > *":{m:0},variants:{direction:{row:{flexDirection:"row"},"row-reverse":{flexDirection:"row-reverse"},column:{flexDirection:"column"}},wrap:{wrap:{flexWrap:"wrap"},"no-wrap":{flexWrap:"no-wrap"},"wrap-reverse":{flexWrap:"wrap-reverse"}},justify:{start:{justifyContent:"flex-start"},center:{justifyContent:"center"},end:{justifyContent:"flex-end"},false:{}},align:{start:{alignItems:"flex-start"},center:{alignItems:"center"},end:{alignItems:"flex-end"},false:{}},gap:{...m("space",{mt:"-$key",ml:"-$key","& > *":{mt:"$key",ml:"$key"}}),false:{}}}}),a=e.forwardRef(({css:n,gap:i=2,direction:r="row",wrap:o="wrap",justify:s="start",align:t,...l},p)=>e.createElement(c,{css:n},e.createElement(w,{ref:p,direction:r,gap:i,wrap:o,justify:s,align:typeof t>"u"&&r!=="column"?"center":t,...l})));a.displayName="Stack";export{a as Stack};
+import*as e from"react";import{styled as f}from"../../stitches.js";import{createThemeVariants as m}from"../../utilities/create-theme-variants/createThemeVariants.js";import{CSSWrapper as c}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const w=f("div",{display:"flex","& > *":{m:0},variants:{direction:{row:{flexDirection:"row"},"row-reverse":{flexDirection:"row-reverse"},column:{flexDirection:"column"}},wrap:{wrap:{flexWrap:"wrap"},"no-wrap":{flexWrap:"no-wrap"},"wrap-reverse":{flexWrap:"wrap-reverse"}},justify:{start:{justifyContent:"flex-start"},center:{justifyContent:"center"},end:{justifyContent:"flex-end"},false:{}},align:{start:{alignItems:"flex-start"},center:{alignItems:"center"},end:{alignItems:"flex-end"},false:{}},gap:{...m("space",{mt:"-$key",ml:"-$key","& > *":{mt:"$key",ml:"$key"}}),false:{}}}}),a=e.forwardRef(({css:n,gap:i=2,direction:r="row",wrap:o="wrap",justify:s="start",align:t,...l},p)=>e.createElement(c,{css:n},e.createElement(w,{ref:p,direction:r,gap:i,wrap:o,justify:s,align:typeof t>"u"&&r!=="column"?"center":t,...l})));a.displayName="Stack";export{a as Stack};
 //# sourceMappingURL=Stack.js.map