@atom-learning/components 2.69.1 → 3.0.0

package/dist/components/banner/banner-slim/BannerSlimDismiss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerSlimDismiss.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../../action-icon'\nimport { Icon } from '../../icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledDismiss = styled(ActionIcon, {\n  flexShrink: 0,\n  variants: {\n    emphasis: {\n      highContrast: {\n        color: 'white !important'\n      }\n    },\n    containerSize: {\n      sm: { position: 'absolute', top: '$4', right: '$4' },\n      md: { position: 'static' }\n    }\n  }\n})\n\ntype TBannerSlimDismissProps = React.ComponentProps<typeof StyledDismiss>\n\nexport const BannerSlimDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: TBannerSlimDismissProps): JSX.Element => {\n  const { size, setHasDismiss, emphasis } = useBannerContext()\n\n  React.useEffect(() => {\n    setHasDismiss(true)\n    return () => {\n      setHasDismiss(false)\n    }\n  }, [setHasDismiss])\n\n  return (\n    <Banner.Dismiss asChild>\n      <StyledDismiss\n        label={label}\n        size=\"md\"\n        hasTooltip={false}\n        isRounded\n        theme=\"neutral\"\n        containerSize={size}\n        emphasis={emphasis as TBannerSlimDismissProps['emphasis']}\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerSlimDismiss.displayName = 'BannerSlimDismiss'\n"],"names":["StyledDismiss","styled","ActionIcon","BannerSlimDismiss","label","rest","size","setHasDismiss","emphasis","useBannerContext","React","Banner","Icon","Close"],"mappings":"uTAUA,MAAMA,EAAgBC,EAAOC,EAAY,CACvC,WAAY,EACZ,SAAU,CACR,SAAU,CACR,aAAc,CACZ,MAAO,kBACT,CACF,EACA,cAAe,CACb,GAAI,CAAE,SAAU,WAAY,IAAK,KAAM,MAAO,IAAK,EACnD,GAAI,CAAE,SAAU,QAAS,CAC3B,CACF,CACF,CAAC,EAIYC,EAAoB,CAAC,CAChC,MAAAC,EAAQ,aACLC,CACL,IAA4C,CAC1C,KAAM,CAAE,KAAAC,EAAM,cAAAC,EAAe,SAAAC,CAAS,EAAIC,IAE1C,OAAAC,EAAM,UAAU,KACdH,EAAc,EAAI,EACX,IAAM,CACXA,EAAc,EAAK,CACrB,GACC,CAACA,CAAa,CAAC,EAGhBG,EAAA,cAACC,EAAO,QAAP,CAAe,QAAO,EACrBD,EAAAA,EAAA,cAACV,EAAA,CACC,MAAOI,EACP,KAAK,KACL,WAAY,GACZ,UAAS,GACT,MAAM,UACN,cAAeE,EACf,SAAUE,EACT,GAAGH,CAEJK,EAAAA,EAAA,cAACE,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CAEJ,EAEAV,EAAkB,YAAc"}

package/dist/components/banner/banner-slim/BannerSlimImage.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { Image } from '../../image';
+export declare const BannerSlimImage: React.FC<React.ComponentProps<typeof Image>>;

package/dist/components/banner/banner-slim/BannerSlimImage.js

@@ -0,0 +1,2 @@
+import*as e from"react";import{styled as r}from"../../../stitches.js";import{Box as m}from"../../box/Box.js";import{Image as a}from"../../image/Image.js";import{useBannerContext as n}from"../BannerContext.js";const s=r(m,{overflow:"hidden",borderRadius:"$round",alignSelf:"flex-start",flexShrink:0,variants:{size:{sm:{size:"$4"},md:{size:"$5"}}}}),l=r(a,{maxWidth:"auto",size:"100%",objectFit:"cover"}),t=o=>{const{size:i}=n();return e.createElement(s,{size:i},e.createElement(l,{...o}))};t.displayName="BannerSlimImage";export{t as BannerSlimImage};
+//# sourceMappingURL=BannerSlimImage.js.map

package/dist/components/banner/banner-slim/BannerSlimImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerSlimImage.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../../box'\nimport { Image } from '../../image'\nimport { useBannerContext } from '../BannerContext'\n\nconst Container = styled(Box, {\n  overflow: 'hidden',\n  borderRadius: '$round',\n  alignSelf: 'flex-start',\n  flexShrink: 0,\n  variants: {\n    size: {\n      sm: {\n        size: '$4'\n      },\n      md: {\n        size: '$5'\n      }\n    }\n  }\n})\n\nconst StyledImage = styled(Image, {\n  maxWidth: 'auto',\n  size: '100%',\n  objectFit: 'cover'\n})\n\nexport const BannerSlimImage: React.FC<React.ComponentProps<typeof Image>> = (\n  props\n) => {\n  const { size } = useBannerContext()\n\n  return (\n    <Container size={size}>\n      <StyledImage {...props} />\n    </Container>\n  )\n}\n\nBannerSlimImage.displayName = 'BannerSlimImage'\n"],"names":["Container","styled","Box","StyledImage","Image","BannerSlimImage","props","size","useBannerContext","React"],"mappings":"iNAQA,MAAMA,EAAYC,EAAOC,EAAK,CAC5B,SAAU,SACV,aAAc,SACd,UAAW,aACX,WAAY,EACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,IACR,CACF,CACF,CACF,CAAC,EAEKC,EAAcF,EAAOG,EAAO,CAChC,SAAU,OACV,KAAM,OACN,UAAW,OACb,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAEjB,EAAA,OACEC,EAAA,cAACT,EAAA,CAAU,KAAMO,CAAAA,EACfE,EAAA,cAACN,EAAA,CAAa,GAAGG,CAAAA,CAAO,CAC1B,CAEJ,EAEAD,EAAgB,YAAc"}

package/dist/components/banner/banner-slim/BannerSlimText.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { Text } from '../../text';
+export declare const BannerSlimText: React.FC<React.ComponentProps<typeof Text>>;

package/dist/components/banner/banner-slim/BannerSlimText.js

@@ -0,0 +1,2 @@
+import*as r from"react";import{styled as t}from"../../../stitches.js";import{Text as o}from"../../text/Text.js";import{useBannerContext as a}from"../BannerContext.js";const m=t(o,{color:"var(--banner-heading-color)",fontWeight:"600",variants:{containerSize:{sm:{},md:{}},hasDismiss:{true:{}}},compoundVariants:[{containerSize:"sm",hasDismiss:!0,css:{mr:"$6"}}]}),s=e=>{const{size:i,hasDismiss:n}=a();return r.createElement(m,{size:"md",containerSize:i,hasDismiss:n,noCapsize:!0,...e})};s.displayName="BannerSlimText";export{s as BannerSlimText};
+//# sourceMappingURL=BannerSlimText.js.map

package/dist/components/banner/banner-slim/BannerSlimText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerSlimText.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Text } from '../../text'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledText = styled(Text, {\n  color: 'var(--banner-heading-color)',\n  fontWeight: '600',\n  variants: {\n    containerSize: {\n      sm: {},\n      md: {}\n    },\n    hasDismiss: {\n      true: {}\n    }\n  },\n  compoundVariants: [\n    {\n      containerSize: 'sm',\n      hasDismiss: true,\n      css: {\n        mr: '$6'\n      }\n    }\n  ]\n})\n\nexport const BannerSlimText: React.FC<React.ComponentProps<typeof Text>> = (\n  props\n) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size=\"md\"\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      noCapsize\n      {...props}\n    />\n  )\n}\n\nBannerSlimText.displayName = 'BannerSlimText'\n"],"names":["StyledText","styled","Text","BannerSlimText","props","size","hasDismiss","useBannerContext","React"],"mappings":"uKAOA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,MAAO,8BACP,WAAY,MACZ,SAAU,CACR,cAAe,CACb,GAAI,CAAA,EACJ,GAAI,CAAA,CACN,EACA,WAAY,CACV,KAAM,CACR,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,cAAe,KACf,WAAY,GACZ,IAAK,CACH,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,KAAAC,EAAM,WAAAC,CAAW,EAAIC,EAAAA,EAE7B,OACEC,EAAA,cAACR,EAAA,CACC,KAAK,KACL,cAAeK,EACf,WAAYC,EACZ,UAAS,GACR,GAAGF,EACN,CAEJ,EAEAD,EAAe,YAAc"}

package/dist/components/banner/banner-slim/index.d.ts

@@ -0,0 +1 @@
+export * from './BannerSlim';

package/dist/components/banner/index.d.ts

@@ -1 +1,2 @@
 export * from './banner-regular';
+export * from './banner-slim';

package/dist/components/dialog/DialogContent.js

@@ -1,2 +1,2 @@
-import{Close as h}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 $,fadeOut as v}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Icon as C}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:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${v} 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,...u})=>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()},...u},c&&o.createElement(z,{as:w,css:{position:"absolute",right:"$4",top:"$4",size:"$5"},label:f,hasTooltip:!1,size:"md",theme:"neutral"},o.createElement(C,{is:h})),o.Children.map(a,t=>(t==null?void 0:t.type)!==s&&t))));export{O as DialogContent};
+import{Close as h}from"@atom-learning/icons";import{Overlay as u,Content as x,Portal as b,Close as g}from"@radix-ui/react-dialog";import*as t from"react";import{DIALOG_Z_INDEX as v}from"../../constants/zIndices.js";import{keyframes as r,styled as l}from"../../stitches.js";import{backdropOverlay as w}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Icon as C}from"../icon/Icon.js";import{DialogBackground as n}from"./DialogBackground.js";const o="translate3d(-50%, -50%, 0)",s="translate3d(-50%, 50vh, 0)",m="modal_overlay",D=r({"0%":{transform:s},"100%":{transform:o}}),$=r({"0%":{transform:o},"100%":{transform:s}}),y=l(u,w),E=l(x,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:o,zIndex:v,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${$} 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"}}}}),I=({size:d="sm",children:a,closeDialogText:p="Close dialog",showCloseButton:c=!0,...f})=>t.createElement(b,null,t.createElement(y,{id:m},t.Children.map(a,e=>(e==null?void 0:e.type)===n&&e),t.createElement(E,{size:d,"aria-label":"Dialog",onPointerDownOutside:e=>{const i=e.target;(i==null?void 0:i.id)!==m&&e.preventDefault()},...f},c&&t.createElement(z,{as:g,css:{position:"absolute",right:"$4",top:"$4",size:"$5"},label:p,hasTooltip:!1,size:"md",theme:"neutral"},t.createElement(C,{is:h})),t.Children.map(a,e=>(e==null?void 0:e.type)!==n&&e))));export{I 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', size: '$5' }}\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,GACtBkB,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAA,OAAAA,EAAS,MAAOvB,GAClBsB,EAAM,eAEV,CAAA,EACC,GAAGL,CAEHD,EAAAA,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,KAAM,KAAM,IAAK,EAChE,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 { backdropOverlay } from '~/utilities/style/backdrop-overlay'\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, backdropOverlay)\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', size: '$5' }}\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","backdropOverlay","StyledDialogContent","Content","DIALOG_Z_INDEX","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"ufAYA,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,EAASC,CAAe,EAErDC,EAAsBH,EAAOI,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWX,EACX,OAAQY,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGT,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,EAOYQ,EAA8C,CAAC,CAC1D,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACb,EAAA,CAAoB,GAAIJ,CAAAA,EACtBiB,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACT,EAAA,CACC,KAAMI,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOtB,GAClBqB,EAAM,eAEV,CAAA,EACC,GAAGL,CAEHD,EAAAA,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,KAAM,KAAM,IAAK,EAChE,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,SAAA,EAENG,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAW,CAAA,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}

package/dist/components/drawer/Drawer.context.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { StyledContent } from './DrawerContent';
+declare type TDrawerProviderProps = {
+    position?: React.ComponentProps<typeof StyledContent>['position'];
+};
+export declare const DrawerContext: React.Context<TDrawerProviderProps>;
+export declare const DrawerProvider: ({ position, ...rest }: React.PropsWithChildren<TDrawerProviderProps>) => JSX.Element;
+export {};

package/dist/components/drawer/Drawer.context.js

@@ -0,0 +1,2 @@
+import*as e from"react";const t=e.createContext({position:"left"}),n=({position:o="left",...r})=>{const i=e.useMemo(()=>({position:o}),[o]);return e.createElement(t.Provider,{value:i,...r})};export{t as DrawerContext,n as DrawerProvider};
+//# sourceMappingURL=Drawer.context.js.map

package/dist/components/drawer/Drawer.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.context.js","sources":["../../../src/components/drawer/Drawer.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { StyledContent } from './DrawerContent'\n\ntype TDrawerProviderProps = {\n  position?: React.ComponentProps<typeof StyledContent>['position']\n}\n\ntype TDrawerContext = TDrawerProviderProps\n\nexport const DrawerContext = React.createContext<TDrawerContext>({\n  position: 'left'\n})\n\nexport const DrawerProvider = ({\n  position = 'left',\n  ...rest\n}: React.PropsWithChildren<TDrawerProviderProps>): JSX.Element => {\n  const value = React.useMemo<TDrawerContext>(() => ({ position }), [position])\n  return <DrawerContext.Provider value={value} {...rest} />\n}\n"],"names":["DrawerContext","React","DrawerProvider","position","rest","value"],"mappings":"wBAUO,MAAMA,EAAgBC,EAAM,cAA8B,CAC/D,SAAU,MACZ,CAAC,EAEYC,EAAiB,CAAC,CAC7B,SAAAC,EAAW,UACRC,CACL,IAAkE,CAChE,MAAMC,EAAQJ,EAAM,QAAwB,KAAO,CAAE,SAAAE,CAAS,GAAI,CAACA,CAAQ,CAAC,EAC5E,OAAOF,EAAA,cAACD,EAAc,SAAd,CAAuB,MAAOK,EAAQ,GAAGD,EAAM,CACzD"}