@magiclabs/ui-components 1.23.4 → 1.24.1

package/dist/cjs/components/containers/modal.js

@@ -1,2 +1,2 @@
-"use strict";var i=require("react/jsx-runtime"),u=require("../../hooks/useDisplayState.js"),h=require("../../recipes/modal.js"),w=require("@styled/jsx");const r=({animate:a=!0,paddingType:s="none",isOpen:e=!0,onAnimated:d=()=>{},onClosed:o=()=>{},showBorder:t=!0,children:l})=>{const n=h.modal({animate:a,isOpen:e,paddingType:s,showBorder:t}),{displayed:m,onHide:c,onShow:p}=u.useDisplayState({animate:a,show:e,onHidden:o,onShown:d});return m?i.jsx("div",{className:n.wrapper,onAnimationEnd:e?p:c,children:i.jsx(w.VStack,{alignItems:"center",className:n.content,children:l})}):null};r.displayName="Modal",exports.Modal=r;
+"use strict";var i=require("react/jsx-runtime"),h=require("../../hooks/useDisplayState.js"),w=require("../../recipes/modal.js"),y=require("@styled/jsx");const r=({animate:n=!0,paddingType:s="none",isOpen:e=!0,onAnimated:d=()=>{},onClosed:o=()=>{},showBorder:l=!0,fullscreen:t=!1,children:c})=>{const a=w.modal({animate:n,isOpen:e,paddingType:s,showBorder:l,fullscreen:t}),{displayed:m,onHide:p,onShow:u}=h.useDisplayState({animate:n,show:e,onHidden:o,onShown:d});return m?i.jsx("div",{className:a.wrapper,onAnimationEnd:e?u:p,children:i.jsx(y.VStack,{alignItems:"center",className:a.content,children:c})}):null};r.displayName="Modal",exports.Modal=r;
 //# sourceMappingURL=modal.js.map

package/dist/cjs/components/containers/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onClosed?: () => void;\n  showBorder?: boolean;\n}\n\nexport const Modal = ({\n  animate = true,\n  paddingType = 'none',\n  isOpen = true,\n  onAnimated = () => {},\n  onClosed = () => {},\n  showBorder = true,\n  children,\n}: ModalProps) => {\n  const classes = modal({ animate, isOpen, paddingType, showBorder });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: isOpen,\n    onHidden: onClosed,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  return (\n    <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n      <VStack alignItems=\"center\" className={classes.content}>\n        {children}\n      </VStack>\n    </div>\n  );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","isOpen","onAnimated","onClosed","showBorder","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"yJAaa,MAAAA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,CAAA,EACpB,SAAAC,EAAW,IAAK,GAChB,WAAAC,EAAa,GACb,SAAAC,CAAQ,IACO,CACf,MAAMC,EAAUC,QAAM,CAAE,QAAAR,EAAS,OAAAE,EAAQ,YAAAD,EAAa,WAAAI,CAAU,CAAE,EAC5D,CAAE,UAAAI,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAAZ,EACA,KAAME,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKM,EAKHI,EAAAA,IAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBL,EAASS,EAASD,EAAM,SACvEG,EAAAA,IAACC,EAAAA,OAAM,CAAC,WAAW,SAAS,UAAWP,EAAQ,QAAO,SACnDD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAP,EAAM,YAAc"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onClosed?: () => void;\n  showBorder?: boolean;\n  fullscreen?: boolean;\n}\n\nexport const Modal = ({\n  animate = true,\n  paddingType = 'none',\n  isOpen = true,\n  onAnimated = () => {},\n  onClosed = () => {},\n  showBorder = true,\n  fullscreen = false,\n  children,\n}: ModalProps) => {\n  const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: isOpen,\n    onHidden: onClosed,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  return (\n    <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n      <VStack alignItems=\"center\" className={classes.content}>\n        {children}\n      </VStack>\n    </div>\n  );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"yJAca,MAAAA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,CACpB,EAAA,SAAAC,EAAW,IAAK,GAChB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,CAAQ,IACO,CACf,MAAMC,EAAUC,QAAM,CAAE,QAAAT,EAAS,OAAAE,EAAQ,YAAAD,EAAa,WAAAI,EAAY,WAAAC,CAAU,CAAE,EACxE,CAAE,UAAAI,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,kBAAgB,CACpD,QAAAb,EACA,KAAME,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKO,EAKHI,EAAAA,IAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBN,EAASU,EAASD,EAAM,SACvEG,EAACC,IAAAA,SAAM,CAAC,WAAW,SAAS,UAAWP,EAAQ,QAAO,SACnDD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAR,EAAM,YAAc"}

package/dist/cjs/components/containers/overlay.js

@@ -1,2 +1,2 @@
-"use strict";var i=require("react/jsx-runtime"),y=require("../../hooks/useDisplayState.js"),v=require("../../recipes/overlay.js"),h=require("@styled/jsx");const t=({animate:n=!0,backgroundType:a="none",hide:e=!1,onAnimated:o=()=>{},onHidden:s=()=>{},children:d})=>{const r=v.overlay({animate:n,backgroundType:a,hide:e}),{displayed:l,onHide:c,onShow:u}=y.useDisplayState({animate:n,show:!e,onHidden:s,onShown:o});if(!l)return null;const m=a!=="none";return i.jsxs(h.VStack,{alignItems:"center",className:r.container,children:[m&&i.jsx("div",{className:r.bg,onAnimationEnd:e?c:u}),d]})};t.displayName="Overlay",exports.Overlay=t;
+"use strict";var i=require("react/jsx-runtime"),v=require("../../hooks/useDisplayState.js"),h=require("../../recipes/overlay.js"),p=require("@styled/jsx");const s=({animate:n=!0,backgroundType:a="none",hide:e=!1,fullscreen:t=!1,onAnimated:l=()=>{},onHidden:o=()=>{},children:d})=>{const r=h.overlay({animate:n,backgroundType:a,hide:e,fullscreen:t}),{displayed:c,onHide:u,onShow:m}=v.useDisplayState({animate:n,show:!e,onHidden:o,onShown:l});if(!c)return null;const y=a!=="none";return i.jsxs(p.VStack,{alignItems:"center",className:r.container,children:[y&&i.jsx("div",{className:r.bg,onAnimationEnd:e?u:m}),d]})};s.displayName="Overlay",exports.Overlay=s;
 //# sourceMappingURL=overlay.js.map

package/dist/cjs/components/containers/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../../src/components/containers/overlay.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { overlay } from '@recipes/overlay';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface OverlayProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  backgroundType?: 'none' | 'blurred' | 'transparent' | 'solid';\n  hide?: boolean;\n  onAnimated?: () => void;\n  onHidden?: () => void;\n}\n\nexport const Overlay = ({\n  animate = true,\n  backgroundType = 'none',\n  hide = false,\n  onAnimated = () => {},\n  onHidden = () => {},\n  children,\n}: OverlayProps) => {\n  const classes = overlay({ animate, backgroundType, hide });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: !hide,\n    onHidden,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  const hasBackground = backgroundType !== 'none';\n\n  return (\n    <VStack alignItems=\"center\" className={classes.container}>\n      {hasBackground && <div className={classes.bg} onAnimationEnd={!hide ? onShow : onHide} />}\n      {children}\n    </VStack>\n  );\n};\n\nOverlay.displayName = 'Overlay';\n"],"names":["Overlay","animate","backgroundType","hide","onAnimated","onHidden","children","classes","overlay","displayed","onHide","onShow","useDisplayState","hasBackground","_jsxs","VStack","_jsx"],"mappings":"2JAYO,MAAMA,EAAU,CAAC,CACtB,QAAAC,EAAU,GACV,eAAAC,EAAiB,OACjB,KAAAC,EAAO,GACP,WAAAC,EAAa,IAAO,CAAA,EACpB,SAAAC,EAAW,OACX,SAAAC,CAAQ,IACS,CACjB,MAAMC,EAAUC,UAAQ,CAAE,QAAAP,EAAS,eAAAC,EAAgB,KAAAC,CAAM,CAAA,EACnD,CAAE,UAAAM,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAAX,EACA,KAAM,CAACE,EACP,SAAAE,EACA,QAASD,CACV,CAAA,EAED,GAAI,CAACK,EACH,OAAO,KAGT,MAAMI,EAAgBX,IAAmB,OAEzC,OACEY,OAACC,EAAAA,QAAO,WAAW,SAAS,UAAWR,EAAQ,UAAS,SAAA,CACrDM,GAAiBG,EAAAA,IAAA,MAAA,CAAK,UAAWT,EAAQ,GAAI,eAAiBJ,EAAgBO,EAATC,CAAe,CAAA,EACpFL,CAAQ,CAAA,CAAA,CAGf,EAEAN,EAAQ,YAAc"}
+{"version":3,"file":"overlay.js","sources":["../../../../src/components/containers/overlay.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { overlay } from '@recipes/overlay';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface OverlayProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  backgroundType?: 'none' | 'blurred' | 'transparent' | 'solid';\n  hide?: boolean;\n  fullscreen?: boolean;\n  onAnimated?: () => void;\n  onHidden?: () => void;\n}\n\nexport const Overlay = ({\n  animate = true,\n  backgroundType = 'none',\n  hide = false,\n  fullscreen = false,\n  onAnimated = () => {},\n  onHidden = () => {},\n  children,\n}: OverlayProps) => {\n  const classes = overlay({ animate, backgroundType, hide, fullscreen });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: !hide,\n    onHidden,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  const hasBackground = backgroundType !== 'none';\n\n  return (\n    <VStack alignItems=\"center\" className={classes.container}>\n      {hasBackground && <div className={classes.bg} onAnimationEnd={!hide ? onShow : onHide} />}\n      {children}\n    </VStack>\n  );\n};\n\nOverlay.displayName = 'Overlay';\n"],"names":["Overlay","animate","backgroundType","hide","fullscreen","onAnimated","onHidden","children","classes","overlay","displayed","onHide","onShow","useDisplayState","hasBackground","_jsxs","VStack","_jsx"],"mappings":"2JAaa,MAAAA,EAAU,CAAC,CACtB,QAAAC,EAAU,GACV,eAAAC,EAAiB,OACjB,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,WAAAC,EAAa,IAAK,CAAA,EAClB,SAAAC,EAAW,IAAO,CAClB,EAAA,SAAAC,CAAQ,IACS,CACjB,MAAMC,EAAUC,EAAAA,QAAQ,CAAE,QAAAR,EAAS,eAAAC,EAAgB,KAAAC,EAAM,WAAAC,CAAU,CAAE,EAC/D,CAAE,UAAAM,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAAZ,EACA,KAAM,CAACE,EACP,SAAAG,EACA,QAASD,CACV,CAAA,EAED,GAAI,CAACK,EACH,OAAO,KAGT,MAAMI,EAAgBZ,IAAmB,OAEzC,OACEa,EAAAA,KAACC,UAAO,WAAW,SAAS,UAAWR,EAAQ,UAAS,SAAA,CACrDM,GAAiBG,MAAA,MAAA,CAAK,UAAWT,EAAQ,GAAI,eAAiBL,EAAgBQ,EAATC,CAAe,CAAA,EACpFL,CAAQ,CAAA,CAAA,CAGf,EAEAP,EAAQ,YAAc"}

package/dist/cjs/components/layouts/page.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),j=require("../containers/content.js"),d=require("../containers/drawer.js"),u=require("../containers/footer.js"),x=require("../containers/header.js"),y=require("../containers/modal.js"),w=require("../containers/overlay.js"),S=require("@styled/css"),k=require("@styled/jsx"),b=require("@styled/tokens"),i=require("create-slots"),h=require("react");const v="2.625rem",s=i.createSlot(({children:t})=>r.jsx(x.Header,{children:t})),g=i.createSlot(({children:t})=>h.Children.map(t,a=>{var n,e,o;return h.cloneElement(a,{color:(n=a.props.color)!==null&&n!==void 0?n:b.token("colors.brand.base"),width:(e=a.props.width)!==null&&e!==void 0?e:v,height:(o=a.props.height)!==null&&o!==void 0?o:v})})),p=i.createSlot(j.Content),m=i.createSlot(u.Footer),q=i.createSlot(d.Drawer),H=({children:t,overlay:a,...n})=>{if(a){const{animate:e,backgroundType:o,isOpen:l=!0,onHidden:c}=n;return r.jsx(w.Overlay,{animate:e,backgroundType:o,hide:!l,onHidden:c,children:t})}return r.jsx(r.Fragment,{children:t})},f=({children:t,overlay:a=!0,...n})=>i.createHost(t,e=>{const o=e.get(s)?8:4,l=e.getProps(m),c=e.getProps(q);return r.jsx(H,{overlay:a,...n,children:r.jsx(y.Modal,{paddingType:"md",...n,children:r.jsxs(k.VStack,{alignItems:"center",gap:0,width:"full",className:S.css({mt:o}),children:[e.get(s),e.get(g),e.get(p),l&&r.jsx(u.Footer,{...l}),c&&r.jsx(d.Drawer,{...c})]})})})}),D=Object.assign(f,{Header:s,Icon:g,Content:p,Footer:m,Drawer:q});exports.Page=D;
+"use strict";var r=require("react/jsx-runtime"),x=require("../containers/content.js"),d=require("../containers/drawer.js"),u=require("../containers/footer.js"),y=require("../containers/header.js"),w=require("../containers/modal.js"),S=require("../containers/overlay.js"),f=require("@styled/css"),b=require("@styled/jsx"),k=require("@styled/tokens"),i=require("create-slots"),h=require("react");const v="2.625rem",s=i.createSlot(({children:t})=>r.jsx(y.Header,{children:t})),g=i.createSlot(({children:t})=>h.Children.map(t,a=>{var n,e,o;return h.cloneElement(a,{color:(n=a.props.color)!==null&&n!==void 0?n:k.token("colors.brand.base"),width:(e=a.props.width)!==null&&e!==void 0?e:v,height:(o=a.props.height)!==null&&o!==void 0?o:v})})),p=i.createSlot(x.Content),m=i.createSlot(u.Footer),q=i.createSlot(d.Drawer),H=({children:t,overlay:a,...n})=>{if(a){const{animate:e,backgroundType:o,isOpen:l=!0,onHidden:c,fullscreen:j=!1}=n;return r.jsx(S.Overlay,{animate:e,backgroundType:o,hide:!l,onHidden:c,fullscreen:j,children:t})}return r.jsx(r.Fragment,{children:t})},P=({children:t,overlay:a=!0,...n})=>i.createHost(t,e=>{const o=e.get(s)?8:4,l=e.getProps(m),c=e.getProps(q);return r.jsx(H,{overlay:a,...n,children:r.jsx(w.Modal,{paddingType:"md",...n,children:r.jsxs(b.VStack,{alignItems:"center",gap:0,width:"full",className:f.css({mt:o}),children:[e.get(s),e.get(g),e.get(p),l&&r.jsx(u.Footer,{...l}),c&&r.jsx(d.Drawer,{...c})]})})})}),D=Object.assign(P,{Header:s,Icon:g,Content:p,Footer:m,Drawer:q});exports.Page=D;
 //# sourceMappingURL=page.js.map

package/dist/cjs/components/layouts/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","sources":["../../../../src/components/layouts/page.tsx"],"sourcesContent":["import { Content } from '@components/containers/content';\nimport { Drawer } from '@components/containers/drawer';\nimport { Footer } from '@components/containers/footer';\nimport { Header } from '@components/containers/header';\nimport { Modal, ModalProps } from '@components/containers/modal';\nimport { Overlay, OverlayProps } from '@components/containers/overlay';\nimport { css } from '@styled/css';\nimport { VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, ComponentProps, cloneElement } from 'react';\n\nconst DEFAULT_ICON_SIZE = '2.625rem';\n\nconst PageHeader = createSlot(({ children }) => <Header>{children}</Header>);\nconst PageIcon = createSlot(({ children }) => {\n  return Children.map(children, child => {\n    return cloneElement(child, {\n      color: child.props.color ?? token('colors.brand.base'),\n      width: child.props.width ?? DEFAULT_ICON_SIZE,\n      height: child.props.height ?? DEFAULT_ICON_SIZE,\n    });\n  });\n});\nconst PageContent = createSlot(Content);\nconst PageFooter = createSlot(Footer);\nconst PageDrawer = createSlot(Drawer);\n\nexport interface PageProps extends ModalProps, Omit<OverlayProps, 'hide'>, ComponentProps<'div'> {\n  overlay?: boolean;\n}\n\nconst Container = ({ children, overlay, ...props }: PageProps) => {\n  if (overlay) {\n    const { animate, backgroundType, isOpen = true, onHidden } = props;\n    return (\n      <Overlay animate={animate} backgroundType={backgroundType} hide={!isOpen} onHidden={onHidden}>\n        {children}\n      </Overlay>\n    );\n  }\n  return <>{children}</>;\n};\n\nconst PageHost = ({ children, overlay = true, ...props }: PageProps) => {\n  return createHost(children, slots => {\n    const buffer = slots.get(PageHeader) ? 8 : 4;\n    const footerProps = slots.getProps(PageFooter);\n    const drawerProps = slots.getProps(PageDrawer);\n\n    return (\n      <Container overlay={overlay} {...props}>\n        <Modal paddingType=\"md\" {...props}>\n          <VStack alignItems=\"center\" gap={0} width=\"full\" className={css({ mt: buffer })}>\n            {slots.get(PageHeader)}\n            {slots.get(PageIcon)}\n            {slots.get(PageContent)}\n            {footerProps && <Footer {...footerProps} />}\n            {drawerProps && <Drawer {...drawerProps} />}\n          </VStack>\n        </Modal>\n      </Container>\n    );\n  });\n};\n\nexport const Page = Object.assign(PageHost, {\n  Header: PageHeader,\n  Icon: PageIcon,\n  Content: PageContent,\n  Footer: PageFooter,\n  Drawer: PageDrawer,\n});\n"],"names":["DEFAULT_ICON_SIZE","PageHeader","createSlot","children","_jsx","Header","PageIcon","Children","child","cloneElement","_a","token","PageContent","Content","PageFooter","Footer","PageDrawer","Drawer","Container","overlay","props","animate","backgroundType","isOpen","onHidden","Overlay","_Fragment","PageHost","createHost","slots","buffer","footerProps","drawerProps","Modal","_jsxs","VStack","css","Page"],"mappings":"0YAYA,MAAMA,EAAoB,WAEpBC,EAAaC,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAQ,IAAOC,EAAAA,IAACC,EAAAA,iBAAQF,CAAQ,CAAA,CAAU,EACrEG,EAAWJ,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAU,IAChCI,EAAAA,SAAS,IAAIJ,EAAUK,GAAQ,WACpC,OAAOC,EAAAA,aAAaD,EAAO,CACzB,OAAOE,EAAAF,EAAM,MAAM,SAAS,MAAAE,IAAA,OAAAA,EAAAC,EAAAA,MAAM,mBAAmB,EACrD,SAAOH,EAAM,MAAM,4BAASR,EAC5B,UAAQQ,EAAM,MAAM,6BAAUR,CAC/B,CAAA,CACH,CAAC,CACF,EACKY,EAAcV,EAAAA,WAAWW,EAAO,OAAA,EAChCC,EAAaZ,EAAAA,WAAWa,EAAM,MAAA,EAC9BC,EAAad,EAAAA,WAAWe,EAAM,MAAA,EAM9BC,EAAY,CAAC,CAAE,SAAAf,EAAU,QAAAgB,EAAS,GAAGC,CAAkB,IAAI,CAC/D,GAAID,EAAS,CACX,KAAM,CAAE,QAAAE,EAAS,eAAAC,EAAgB,OAAAC,EAAS,GAAM,SAAAC,CAAU,EAAGJ,EAC7D,OACEhB,MAACqB,EAAQ,QAAA,CAAA,QAASJ,EAAS,eAAgBC,EAAgB,KAAM,CAACC,EAAQ,SAAUC,EACjF,SAAArB,CACO,CAAA,CAEd,CACA,OAAOC,EAAAA,IAAAsB,EAAAA,SAAA,CAAA,SAAGvB,CAAQ,CAAA,CACpB,EAEMwB,EAAW,CAAC,CAAE,SAAAxB,EAAU,QAAAgB,EAAU,GAAM,GAAGC,CAAK,IAC7CQ,EAAAA,WAAWzB,EAAU0B,GAAQ,CAClC,MAAMC,EAASD,EAAM,IAAI5B,CAAU,EAAI,EAAI,EACrC8B,EAAcF,EAAM,SAASf,CAAU,EACvCkB,EAAcH,EAAM,SAASb,CAAU,EAE7C,OACEZ,MAACc,GAAU,QAASC,EAAa,GAAAC,EAC/B,SAAAhB,EAAC6B,IAAAA,EAAAA,MAAM,CAAA,YAAY,KAAI,GAAKb,EAC1B,SAAAc,EAACC,KAAAA,EAAAA,OAAM,CAAC,WAAW,SAAS,IAAK,EAAG,MAAM,OAAO,UAAWC,EAAI,IAAA,CAAE,GAAIN,CAAQ,CAAA,YAC3ED,EAAM,IAAI5B,CAAU,EACpB4B,EAAM,IAAIvB,CAAQ,EAClBuB,EAAM,IAAIjB,CAAW,EACrBmB,GAAe3B,EAAAA,IAACW,EAAW,OAAA,CAAA,GAAAgB,IAC3BC,GAAe5B,EAAAA,IAACa,aAAWe,CAAW,CAAA,CAAI,GAEvC,CAAA,CAAA,CAAA,CAGd,CAAC,EAGUK,EAAO,OAAO,OAAOV,EAAU,CAC1C,OAAQ1B,EACR,KAAMK,EACN,QAASM,EACT,OAAQE,EACR,OAAQE,CACT,CAAA"}
+{"version":3,"file":"page.js","sources":["../../../../src/components/layouts/page.tsx"],"sourcesContent":["import { Content } from '@components/containers/content';\nimport { Drawer } from '@components/containers/drawer';\nimport { Footer } from '@components/containers/footer';\nimport { Header } from '@components/containers/header';\nimport { Modal, ModalProps } from '@components/containers/modal';\nimport { Overlay, OverlayProps } from '@components/containers/overlay';\nimport { css } from '@styled/css';\nimport { VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, ComponentProps, cloneElement } from 'react';\n\nconst DEFAULT_ICON_SIZE = '2.625rem';\n\nconst PageHeader = createSlot(({ children }) => <Header>{children}</Header>);\nconst PageIcon = createSlot(({ children }) => {\n  return Children.map(children, child => {\n    return cloneElement(child, {\n      color: child.props.color ?? token('colors.brand.base'),\n      width: child.props.width ?? DEFAULT_ICON_SIZE,\n      height: child.props.height ?? DEFAULT_ICON_SIZE,\n    });\n  });\n});\nconst PageContent = createSlot(Content);\nconst PageFooter = createSlot(Footer);\nconst PageDrawer = createSlot(Drawer);\n\nexport interface PageProps extends ModalProps, Omit<OverlayProps, 'hide'>, ComponentProps<'div'> {\n  overlay?: boolean;\n}\n\nconst Container = ({ children, overlay, ...props }: PageProps) => {\n  if (overlay) {\n    const { animate, backgroundType, isOpen = true, onHidden, fullscreen = false } = props;\n    return (\n      <Overlay\n        animate={animate}\n        backgroundType={backgroundType}\n        hide={!isOpen}\n        onHidden={onHidden}\n        fullscreen={fullscreen}\n      >\n        {children}\n      </Overlay>\n    );\n  }\n  return <>{children}</>;\n};\n\nconst PageHost = ({ children, overlay = true, ...props }: PageProps) => {\n  return createHost(children, slots => {\n    const buffer = slots.get(PageHeader) ? 8 : 4;\n    const footerProps = slots.getProps(PageFooter);\n    const drawerProps = slots.getProps(PageDrawer);\n\n    return (\n      <Container overlay={overlay} {...props}>\n        <Modal paddingType=\"md\" {...props}>\n          <VStack alignItems=\"center\" gap={0} width=\"full\" className={css({ mt: buffer })}>\n            {slots.get(PageHeader)}\n            {slots.get(PageIcon)}\n            {slots.get(PageContent)}\n            {footerProps && <Footer {...footerProps} />}\n            {drawerProps && <Drawer {...drawerProps} />}\n          </VStack>\n        </Modal>\n      </Container>\n    );\n  });\n};\n\nexport const Page = Object.assign(PageHost, {\n  Header: PageHeader,\n  Icon: PageIcon,\n  Content: PageContent,\n  Footer: PageFooter,\n  Drawer: PageDrawer,\n});\n"],"names":["DEFAULT_ICON_SIZE","PageHeader","createSlot","children","_jsx","Header","PageIcon","Children","child","cloneElement","_a","token","PageContent","Content","PageFooter","Footer","PageDrawer","Drawer","Container","overlay","props","animate","backgroundType","isOpen","onHidden","fullscreen","Overlay","_Fragment","PageHost","createHost","slots","buffer","footerProps","drawerProps","Modal","_jsxs","VStack","css","Page"],"mappings":"0YAYA,MAAMA,EAAoB,WAEpBC,EAAaC,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAQ,IAAOC,MAACC,mBAAQF,CAAQ,CAAA,CAAU,EACrEG,EAAWJ,EAAW,WAAA,CAAC,CAAE,SAAAC,CAAU,IAChCI,EAAAA,SAAS,IAAIJ,EAAUK,GAAQ,WACpC,OAAOC,eAAaD,EAAO,CACzB,OAAOE,EAAAF,EAAM,MAAM,SAAS,MAAAE,IAAA,OAAAA,EAAAC,EAAAA,MAAM,mBAAmB,EACrD,SAAOH,EAAM,MAAM,4BAASR,EAC5B,UAAQQ,EAAM,MAAM,6BAAUR,CAC/B,CAAA,CACH,CAAC,CACF,EACKY,EAAcV,EAAAA,WAAWW,EAAO,OAAA,EAChCC,EAAaZ,EAAWa,WAAAA,EAAM,MAAA,EAC9BC,EAAad,EAAAA,WAAWe,EAAM,MAAA,EAM9BC,EAAY,CAAC,CAAE,SAAAf,EAAU,QAAAgB,EAAS,GAAGC,CAAkB,IAAI,CAC/D,GAAID,EAAS,CACX,KAAM,CAAE,QAAAE,EAAS,eAAAC,EAAgB,OAAAC,EAAS,GAAM,SAAAC,EAAU,WAAAC,EAAa,EAAO,EAAGL,EACjF,OACEhB,MAACsB,EAAO,QAAA,CACN,QAASL,EACT,eAAgBC,EAChB,KAAM,CAACC,EACP,SAAUC,EACV,WAAYC,EAEX,SAAAtB,CACO,CAAA,CAEd,CACA,OAAOC,MAAAuB,EAAAA,SAAA,CAAA,SAAGxB,CAAQ,CAAA,CACpB,EAEMyB,EAAW,CAAC,CAAE,SAAAzB,EAAU,QAAAgB,EAAU,GAAM,GAAGC,CAAK,IAC7CS,EAAAA,WAAW1B,EAAU2B,GAAQ,CAClC,MAAMC,EAASD,EAAM,IAAI7B,CAAU,EAAI,EAAI,EACrC+B,EAAcF,EAAM,SAAShB,CAAU,EACvCmB,EAAcH,EAAM,SAASd,CAAU,EAE7C,OACEZ,MAACc,GAAU,QAASC,EAAa,GAAAC,EAC/B,SAAAhB,MAAC8B,EAAAA,MAAM,CAAA,YAAY,KAAI,GAAKd,EAC1B,SAAAe,EAAAA,KAACC,EAAM,OAAA,CAAC,WAAW,SAAS,IAAK,EAAG,MAAM,OAAO,UAAWC,EAAAA,IAAI,CAAE,GAAIN,CAAQ,CAAA,YAC3ED,EAAM,IAAI7B,CAAU,EACpB6B,EAAM,IAAIxB,CAAQ,EAClBwB,EAAM,IAAIlB,CAAW,EACrBoB,GAAe5B,EAAAA,IAACW,EAAW,OAAA,CAAA,GAAAiB,IAC3BC,GAAe7B,MAACa,aAAWgB,CAAW,CAAA,CAAI,GAEvC,CAAA,CAAA,CAAA,CAGd,CAAC,EAGUK,EAAO,OAAO,OAAOV,EAAU,CAC1C,OAAQ3B,EACR,KAAMK,EACN,QAASM,EACT,OAAQE,EACR,OAAQE,CACT,CAAA"}

package/dist/cjs/components/primitives/dropdown-selector.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var z=require("@styled/css"),m=require("@styled/jsx");require("../feedback/progress-bar.js");var C=require("@styled/tokens"),K=require("../icons/ico-caret-down.js"),V=require("../icons/ico-caret-up.js"),M=require("../icons/ico-checkmark.js"),T=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var U=require("../feedback/tooltip.js"),g=require("react-aria");const E={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},A=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),P=({value:o,label:a,size:d="lg",isFocused:y})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(A),s=h?.value===o,i=E[d],k=r.useCallback(()=>{p({value:o,label:a})},[p,o,a]);return t.jsxs(m.HStack,{py:1.5,gap:2,bg:s?"brand.base":y?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:k,style:{paddingLeft:i.width,paddingRight:i.width},children:[t.jsx(m.Box,{style:{width:i.width},children:s&&t.jsx(M.default,{width:i.check,height:i.check,color:C.token("colors.text.quaternary")})}),t.jsx(j.default,{size:d,fontWeight:"medium",fontColor:s?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},R=({children:o,onSelect:a,label:d,placeholder:y="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:i,viewMax:k=5,...F})=>{const[b,v]=r.useState(!1),[l,f]=r.useState(null),x=r.useRef(null),q=r.useRef(null),u=E[p],H=k*u.mult+1,W=r.useCallback(()=>{v(e=>!e),b||(f(null),setTimeout(()=>{var e;return(e=q.current)===null||e===void 0?void 0:e.focus()}))},[b]),B=r.useCallback(e=>{a(e.value),v(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(o).find(n=>n.props.value===h);return e?e.props.label:y},[h,o]),{buttonProps:L}=g.useButton({...F,isDisabled:i,onPress:W},x),{focusProps:N,isFocusVisible:_}=g.useFocusRing(),{keyboardProps:I}=g.useKeyboard({onKeyDown:e=>{var n,c;if(!b)return;let w=l;const D=r.Children.toArray(o);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?f(r.Children.count(o)-1):(w=l>0?l-1:r.Children.count(o)-1,f(w));break;case"ArrowDown":e.preventDefault(),l===null?f(0):(w=l<r.Children.count(o)-1?l+1:0,f(w));break;case"Enter":if(e.preventDefault(),(n=x.current)===null||n===void 0||n.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&a(O.props.value)}break;case"Escape":v(!1),(c=x.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=n=>{var c;!((c=q.current)===null||c===void 0)&&c.contains(n.target)||v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(A.Provider,{value:{selectedOption:{value:h??"",label:S},setSelectedOption:B},children:t.jsxs(m.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||s)&&t.jsxs(m.HStack,{gap:2,opacity:i?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",fontWeight:"medium",children:d}),s&&t.jsx(U.default,{isDisabled:i,content:s,children:t.jsx(T.default,{className:z.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:z.css({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:_?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...g.mergeProps(L,N,I),children:[t.jsxs(m.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{size:p,fontColor:h?"text.primary":"text.tertiary",children:S}),b?t.jsx(V.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")}):t.jsx(K.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")})]}),b&&t.jsx(m.Box,{ref:q,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${H}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(o,(e,n)=>r.cloneElement(e,{isFocused:n===l,size:p}))})]})]})})};P.displayName="DropdownOption",R.displayName="DropdownSelector",exports.DropdownOption=P,exports.DropdownSelector=R;
+"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var z=require("@styled/css"),m=require("@styled/jsx");require("../feedback/progress-bar.js");var C=require("@styled/tokens"),L=require("../icons/ico-caret-down.js"),V=require("../icons/ico-caret-up.js"),M=require("../icons/ico-checkmark.js"),T=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var U=require("../feedback/tooltip.js"),w=require("react-aria");const E={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},A=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),P=({value:i,label:a,size:d="lg",isFocused:y})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(A),s=h?.value===i,o=E[d],k=r.useCallback(()=>{p({value:i,label:a})},[p,i,a]);return t.jsxs(m.HStack,{py:1.5,gap:2,bg:s?"brand.base":y?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:k,style:{paddingLeft:o.width,paddingRight:o.width},children:[t.jsx(m.Box,{style:{minWidth:o.width},children:s&&t.jsx(M.default,{width:o.check,height:o.check,color:C.token("colors.text.quaternary")})}),t.jsx(j.default,{size:d,fontWeight:"medium",fontColor:s?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},R=({children:i,onSelect:a,label:d,placeholder:y="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:o,viewMax:k=5,...W})=>{const[b,v]=r.useState(!1),[l,f]=r.useState(null),x=r.useRef(null),q=r.useRef(null),u=E[p],F=k*u.mult+1,H=r.useCallback(()=>{v(e=>!e),b||(f(null),setTimeout(()=>{var e;return(e=q.current)===null||e===void 0?void 0:e.focus()}))},[b]),N=r.useCallback(e=>{a(e.value),v(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(i).find(n=>n.props.value===h);return e?e.props.label:y},[h,i]),{buttonProps:B}=w.useButton({...W,isDisabled:o,onPress:H},x),{focusProps:_,isFocusVisible:I}=w.useFocusRing(),{keyboardProps:K}=w.useKeyboard({onKeyDown:e=>{var n,c;if(!b)return;let g=l;const D=r.Children.toArray(i);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?f(r.Children.count(i)-1):(g=l>0?l-1:r.Children.count(i)-1,f(g));break;case"ArrowDown":e.preventDefault(),l===null?f(0):(g=l<r.Children.count(i)-1?l+1:0,f(g));break;case"Enter":if(e.preventDefault(),(n=x.current)===null||n===void 0||n.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&a(O.props.value)}break;case"Escape":v(!1),(c=x.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=n=>{var c;!((c=q.current)===null||c===void 0)&&c.contains(n.target)||v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(A.Provider,{value:{selectedOption:{value:h??"",label:S},setSelectedOption:N},children:t.jsxs(m.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||s)&&t.jsxs(m.HStack,{gap:2,opacity:o?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",fontWeight:"medium",children:d}),s&&t.jsx(U.default,{isDisabled:o,content:s,children:t.jsx(T.default,{className:z.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:z.css({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:I?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...w.mergeProps(B,_,K),children:[t.jsxs(m.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{truncate:!0,size:p,fontColor:h?"text.primary":"text.tertiary",children:S}),b?t.jsx(V.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")}):t.jsx(L.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")})]}),b&&t.jsx(m.Box,{ref:q,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${F}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(i,(e,n)=>r.cloneElement(e,{isFocused:n===l,size:p}))})]})]})})};P.displayName="DropdownOption",R.displayName="DropdownSelector",exports.DropdownOption=P,exports.DropdownSelector=R;
 //# sourceMappingURL=dropdown-selector.js.map

package/dist/cjs/components/primitives/dropdown-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  size?: 'sm' | 'md' | 'lg';\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n  size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n  sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n  md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n  lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n  const sizeProps = SIZES[size];\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n      style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n    >\n      <Box style={{ width: sizeProps.width }}>\n        {isSelected && (\n          <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n        )}\n      </Box>\n      <Text\n        size={size}\n        fontWeight=\"medium\"\n        fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n        styles={{ textAlign: 'left' }}\n      >\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  size = 'lg',\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const sizeProps = SIZES[size];\n  const maxHeight = viewMax * sizeProps.mult + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        {(label || tooltipContent) && (\n          <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n            {label && (\n              <Text size=\"sm\" fontWeight=\"medium\">\n                {label}\n              </Text>\n            )}\n\n            {tooltipContent && (\n              <Tooltip isDisabled={disabled} content={tooltipContent}>\n                <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n              </Tooltip>\n            )}\n          </HStack>\n        )}\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            bg: 'surface.primary',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n            <Text size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                  size,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
+{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  size?: 'sm' | 'md' | 'lg';\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n  size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n  sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n  md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n  lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n  const sizeProps = SIZES[size];\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n      style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n    >\n      <Box style={{ minWidth: sizeProps.width }}>\n        {isSelected && (\n          <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n        )}\n      </Box>\n      <Text\n        size={size}\n        fontWeight=\"medium\"\n        fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n        styles={{ textAlign: 'left' }}\n      >\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  size = 'lg',\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const sizeProps = SIZES[size];\n  const maxHeight = viewMax * sizeProps.mult + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        {(label || tooltipContent) && (\n          <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n            {label && (\n              <Text size=\"sm\" fontWeight=\"medium\">\n                {label}\n              </Text>\n            )}\n\n            {tooltipContent && (\n              <Tooltip isDisabled={disabled} content={tooltipContent}>\n                <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n              </Tooltip>\n            )}\n          </HStack>\n        )}\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            bg: 'surface.primary',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n            <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                  size,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}

package/dist/cjs/recipes/modal.js

@@ -1,2 +1,2 @@
-"use strict";var a=require("@styled/css");const e=a.sva({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none","@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}},variants:{animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});exports.modal=e;
+"use strict";var e=require("@styled/css");const a=e.sva({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none","@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}},variants:{fullscreen:{true:{wrapper:{"@media (min-width: 48rem)":{height:"100vh",width:"100vw",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none",rounded:0,top:0}}}},animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});exports.modal=a;
 //# sourceMappingURL=modal.js.map

package/dist/cjs/recipes/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n  slots: ['content', 'wrapper'],\n  base: {\n    content: {\n      height: 'full',\n      width: 'full',\n      boxSizing: 'border-box',\n    },\n    wrapper: {\n      height: 'full',\n      width: 'full',\n      bg: 'surface.primary',\n      position: 'relative',\n      overflow: 'auto',\n      scrollbarWidth: 'none',\n\n      '@media (min-width: 48rem)': {\n        top: 12,\n        mx: 'auto',\n        width: '25rem',\n        height: 'fit-content',\n        boxShadow: '0px 12px 56px {colors.ink.70/15}',\n        borderRadius: 'container',\n        _dark: {\n          boxShadow: 'none',\n        },\n      },\n    },\n  },\n  variants: {\n    animate: {\n      false: {\n        wrapper: {\n          animationName: 'none',\n          scale: 1,\n        },\n      },\n    },\n    isOpen: { true: {} },\n    paddingType: {\n      none: {\n        wrapper: {\n          p: 0,\n        },\n      },\n      sm: {\n        wrapper: {\n          p: 2,\n          pb: 0,\n        },\n      },\n      md: {\n        wrapper: {\n          p: 4,\n          pb: 0,\n        },\n      },\n      lg: {\n        wrapper: {\n          p: 8,\n          pb: 0,\n        },\n      },\n    },\n    showBorder: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            _dark: {\n              borderWidth: 1,\n              borderBlock: 'solid',\n              borderColor: 'neutral.secondary',\n            },\n          },\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      isOpen: true,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleIn',\n          animationDuration: '250ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      animate: true,\n      isOpen: false,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    isOpen: true,\n    paddingType: 'none',\n  },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"0CAEO,MAAMA,EAAQC,EAAAA,IAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,OAEhB,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}
+{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n  slots: ['content', 'wrapper'],\n  base: {\n    content: {\n      height: 'full',\n      width: 'full',\n      boxSizing: 'border-box',\n    },\n    wrapper: {\n      height: 'full',\n      width: 'full',\n      bg: 'surface.primary',\n      position: 'relative',\n      overflow: 'auto',\n      scrollbarWidth: 'none',\n\n      '@media (min-width: 48rem)': {\n        top: 12,\n        mx: 'auto',\n        width: '25rem',\n        height: 'fit-content',\n        boxShadow: '0px 12px 56px {colors.ink.70/15}',\n        borderRadius: 'container',\n        _dark: {\n          boxShadow: 'none',\n        },\n      },\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            height: '100vh',\n            width: '100vw',\n            bg: 'surface.primary',\n            position: 'relative',\n            overflow: 'auto',\n            scrollbarWidth: 'none',\n            rounded: 0,\n            top: 0,\n          },\n        },\n      },\n    },\n    animate: {\n      false: {\n        wrapper: {\n          animationName: 'none',\n          scale: 1,\n        },\n      },\n    },\n    isOpen: { true: {} },\n    paddingType: {\n      none: {\n        wrapper: {\n          p: 0,\n        },\n      },\n      sm: {\n        wrapper: {\n          p: 2,\n          pb: 0,\n        },\n      },\n      md: {\n        wrapper: {\n          p: 4,\n          pb: 0,\n        },\n      },\n      lg: {\n        wrapper: {\n          p: 8,\n          pb: 0,\n        },\n      },\n    },\n    showBorder: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            _dark: {\n              borderWidth: 1,\n              borderBlock: 'solid',\n              borderColor: 'neutral.secondary',\n            },\n          },\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      isOpen: true,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleIn',\n          animationDuration: '250ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      animate: true,\n      isOpen: false,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    isOpen: true,\n    paddingType: 'none',\n  },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"0CAEa,MAAAA,EAAQC,EAAAA,IAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,OAEhB,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,OAAQ,QACR,MAAO,QACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,OAChB,QAAS,EACT,IAAK,CACN,CACF,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAI,CAAA,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}

package/dist/cjs/recipes/overlay.js

@@ -1,2 +1,2 @@
-"use strict";var a=require("@styled/css");const i=a.sva({slots:["bg","container"],base:{bg:{height:"full",width:"full",pointerEvents:"all",position:"fixed",top:0,left:0},container:{height:"100vh",width:"100vw",maxWidth:"100rem",position:"relative",margin:"0 auto","@media (min-width: 48rem)":{height:"fit-content"}}},variants:{animate:{false:{bg:{animationName:"none"}}},backgroundType:{blurred:{bg:{backdropBlur:"0.375rem",backdropFilter:"auto",backgroundColor:"surface.primary/70"}},solid:{bg:{backgroundColor:"surface.tertiary"}},transparent:{},none:{}},hide:{false:{}}},compoundVariants:[{animate:!0,hide:!1,css:{bg:{animationFillMode:"forwards",animationName:"fadeIn",animationDuration:"400ms"}}},{animate:!0,hide:!0,css:{bg:{animationFillMode:"forwards",animationName:"fadeOut",animationDuration:"400ms"}}}],defaultVariants:{animate:!0,backgroundType:"none",hide:!1}});exports.overlay=i;
+"use strict";var a=require("@styled/css");const i=a.sva({slots:["bg","container"],base:{bg:{height:"full",width:"full",pointerEvents:"all",position:"fixed",top:0,left:0},container:{height:"100vh",width:"100vw",maxWidth:"100rem",position:"relative",margin:"0 auto","@media (min-width: 48rem)":{height:"fit-content"}}},variants:{fullscreen:{true:{container:{maxWidth:"none"}}},animate:{false:{bg:{animationName:"none"}}},backgroundType:{blurred:{bg:{backdropBlur:"0.375rem",backdropFilter:"auto",backgroundColor:"surface.primary/70"}},solid:{bg:{backgroundColor:"surface.tertiary"}},transparent:{},none:{}},hide:{false:{}}},compoundVariants:[{animate:!0,hide:!1,css:{bg:{animationFillMode:"forwards",animationName:"fadeIn",animationDuration:"400ms"}}},{animate:!0,hide:!0,css:{bg:{animationFillMode:"forwards",animationName:"fadeOut",animationDuration:"400ms"}}}],defaultVariants:{animate:!0,backgroundType:"none",hide:!1}});exports.overlay=i;
 //# sourceMappingURL=overlay.js.map

package/dist/cjs/recipes/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../src/recipes/overlay.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const overlay = sva({\n  slots: ['bg', 'container'],\n  base: {\n    bg: {\n      height: 'full',\n      width: 'full',\n      pointerEvents: 'all',\n      position: 'fixed',\n      top: 0,\n      left: 0,\n    },\n    container: {\n      height: '100vh',\n      width: '100vw',\n      maxWidth: '100rem',\n      position: 'relative',\n      margin: '0 auto',\n\n      '@media (min-width: 48rem)': {\n        height: 'fit-content',\n      },\n    },\n  },\n  variants: {\n    animate: {\n      false: {\n        bg: {\n          animationName: 'none',\n        },\n      },\n    },\n    backgroundType: {\n      blurred: {\n        bg: {\n          backdropBlur: '0.375rem',\n          backdropFilter: 'auto',\n          backgroundColor: 'surface.primary/70',\n        },\n      },\n      solid: {\n        bg: {\n          backgroundColor: 'surface.tertiary',\n        },\n      },\n      transparent: {},\n      none: {},\n    },\n    hide: { false: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      hide: false,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeIn',\n          animationDuration: '400ms',\n        },\n      },\n    },\n    {\n      animate: true,\n      hide: true,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeOut',\n          animationDuration: '400ms',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    backgroundType: 'none',\n    hide: false,\n  },\n});\n\nexport type OverlayVariants = RecipeVariantProps<typeof overlay>;\n"],"names":["overlay","sva"],"mappings":"0CAEO,MAAMA,EAAUC,EAAAA,IAAI,CACzB,MAAO,CAAC,KAAM,WAAW,EACzB,KAAM,CACJ,GAAI,CACF,OAAQ,OACR,MAAO,OACP,cAAe,MACf,SAAU,QACV,IAAK,EACL,KAAM,CACP,EACD,UAAW,CACT,OAAQ,QACR,MAAO,QACP,SAAU,SACV,SAAU,WACV,OAAQ,SAER,4BAA6B,CAC3B,OAAQ,aACT,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,MAAO,CACL,GAAI,CACF,cAAe,MAChB,CACF,CACF,EACD,eAAgB,CACd,QAAS,CACP,GAAI,CACF,aAAc,WACd,eAAgB,OAChB,gBAAiB,oBAClB,CACF,EACD,MAAO,CACL,GAAI,CACF,gBAAiB,kBAClB,CACF,EACD,YAAa,CAAA,EACb,KAAM,CAAA,CACP,EACD,KAAM,CAAE,MAAO,CAAA,CAAI,CACpB,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,SACf,kBAAmB,OACpB,CACF,CACF,EACD,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,UACf,kBAAmB,OACpB,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,eAAgB,OAChB,KAAM,EACP,CACF,CAAA"}
+{"version":3,"file":"overlay.js","sources":["../../../src/recipes/overlay.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const overlay = sva({\n  slots: ['bg', 'container'],\n  base: {\n    bg: {\n      height: 'full',\n      width: 'full',\n      pointerEvents: 'all',\n      position: 'fixed',\n      top: 0,\n      left: 0,\n    },\n    container: {\n      height: '100vh',\n      width: '100vw',\n      maxWidth: '100rem',\n      position: 'relative',\n      margin: '0 auto',\n\n      '@media (min-width: 48rem)': {\n        height: 'fit-content',\n      },\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        container: {\n          maxWidth: 'none',\n        },\n      },\n    },\n    animate: {\n      false: {\n        bg: {\n          animationName: 'none',\n        },\n      },\n    },\n    backgroundType: {\n      blurred: {\n        bg: {\n          backdropBlur: '0.375rem',\n          backdropFilter: 'auto',\n          backgroundColor: 'surface.primary/70',\n        },\n      },\n      solid: {\n        bg: {\n          backgroundColor: 'surface.tertiary',\n        },\n      },\n      transparent: {},\n      none: {},\n    },\n    hide: { false: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      hide: false,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeIn',\n          animationDuration: '400ms',\n        },\n      },\n    },\n    {\n      animate: true,\n      hide: true,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeOut',\n          animationDuration: '400ms',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    backgroundType: 'none',\n    hide: false,\n  },\n});\n\nexport type OverlayVariants = RecipeVariantProps<typeof overlay>;\n"],"names":["overlay","sva"],"mappings":"0CAEa,MAAAA,EAAUC,EAAAA,IAAI,CACzB,MAAO,CAAC,KAAM,WAAW,EACzB,KAAM,CACJ,GAAI,CACF,OAAQ,OACR,MAAO,OACP,cAAe,MACf,SAAU,QACV,IAAK,EACL,KAAM,CACP,EACD,UAAW,CACT,OAAQ,QACR,MAAO,QACP,SAAU,SACV,SAAU,WACV,OAAQ,SAER,4BAA6B,CAC3B,OAAQ,aACT,CACF,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,UAAW,CACT,SAAU,MACX,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,GAAI,CACF,cAAe,MAChB,CACF,CACF,EACD,eAAgB,CACd,QAAS,CACP,GAAI,CACF,aAAc,WACd,eAAgB,OAChB,gBAAiB,oBAClB,CACF,EACD,MAAO,CACL,GAAI,CACF,gBAAiB,kBAClB,CACF,EACD,YAAa,CAAA,EACb,KAAM,CAAA,CACP,EACD,KAAM,CAAE,MAAO,CAAA,CAAI,CACpB,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,SACf,kBAAmB,OACpB,CACF,CACF,EACD,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,UACf,kBAAmB,OACpB,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,eAAgB,OAChB,KAAM,EACP,CACF,CAAA"}

package/dist/es/components/containers/modal.js

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{useDisplayState as h}from"../../hooks/useDisplayState.js";import{modal as w}from"../../recipes/modal.js";import{VStack as y}from"@styled/jsx";const i=({animate:e=!0,paddingType:d="none",isOpen:n=!0,onAnimated:r=()=>{},onClosed:t=()=>{},showBorder:m=!0,children:s})=>{const o=w({animate:e,isOpen:n,paddingType:d,showBorder:m}),{displayed:p,onHide:l,onShow:c}=h({animate:e,show:n,onHidden:t,onShown:r});return p?a("div",{className:o.wrapper,onAnimationEnd:n?c:l,children:a(y,{alignItems:"center",className:o.content,children:s})}):null};i.displayName="Modal";export{i as Modal};
+import{jsx as a}from"react/jsx-runtime";import{useDisplayState as f}from"../../hooks/useDisplayState.js";import{modal as w}from"../../recipes/modal.js";import{VStack as u}from"@styled/jsx";const i=({animate:e=!0,paddingType:r="none",isOpen:n=!0,onAnimated:d=()=>{},onClosed:s=()=>{},showBorder:t=!0,fullscreen:l=!1,children:m})=>{const o=w({animate:e,isOpen:n,paddingType:r,showBorder:t,fullscreen:l}),{displayed:p,onHide:c,onShow:h}=f({animate:e,show:n,onHidden:s,onShown:d});return p?a("div",{className:o.wrapper,onAnimationEnd:n?h:c,children:a(u,{alignItems:"center",className:o.content,children:m})}):null};i.displayName="Modal";export{i as Modal};
 //# sourceMappingURL=modal.js.map

package/dist/es/components/containers/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onClosed?: () => void;\n  showBorder?: boolean;\n}\n\nexport const Modal = ({\n  animate = true,\n  paddingType = 'none',\n  isOpen = true,\n  onAnimated = () => {},\n  onClosed = () => {},\n  showBorder = true,\n  children,\n}: ModalProps) => {\n  const classes = modal({ animate, isOpen, paddingType, showBorder });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: isOpen,\n    onHidden: onClosed,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  return (\n    <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n      <VStack alignItems=\"center\" className={classes.content}>\n        {children}\n      </VStack>\n    </div>\n  );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","isOpen","onAnimated","onClosed","showBorder","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"6LAaa,MAAAA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,CAAA,EACpB,SAAAC,EAAW,IAAK,GAChB,WAAAC,EAAa,GACb,SAAAC,CAAQ,IACO,CACf,MAAMC,EAAUC,EAAM,CAAE,QAAAR,EAAS,OAAAE,EAAQ,YAAAD,EAAa,WAAAI,CAAU,CAAE,EAC5D,CAAE,UAAAI,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAAZ,EACA,KAAME,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKM,EAKHI,EAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBL,EAASS,EAASD,EAAM,SACvEG,EAACC,EAAM,CAAC,WAAW,SAAS,UAAWP,EAAQ,QAAO,SACnDD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAP,EAAM,YAAc"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onClosed?: () => void;\n  showBorder?: boolean;\n  fullscreen?: boolean;\n}\n\nexport const Modal = ({\n  animate = true,\n  paddingType = 'none',\n  isOpen = true,\n  onAnimated = () => {},\n  onClosed = () => {},\n  showBorder = true,\n  fullscreen = false,\n  children,\n}: ModalProps) => {\n  const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: isOpen,\n    onHidden: onClosed,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  return (\n    <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n      <VStack alignItems=\"center\" className={classes.content}>\n        {children}\n      </VStack>\n    </div>\n  );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"6LAca,MAAAA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,CACpB,EAAA,SAAAC,EAAW,IAAK,GAChB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,CAAQ,IACO,CACf,MAAMC,EAAUC,EAAM,CAAE,QAAAT,EAAS,OAAAE,EAAQ,YAAAD,EAAa,WAAAI,EAAY,WAAAC,CAAU,CAAE,EACxE,CAAE,UAAAI,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAAb,EACA,KAAME,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKO,EAKHI,EAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBN,EAASU,EAASD,EAAM,SACvEG,EAACC,EAAM,CAAC,WAAW,SAAS,UAAWP,EAAQ,QAAO,SACnDD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAR,EAAM,YAAc"}

package/dist/es/components/containers/overlay.js

@@ -1,2 +1,2 @@
-import{jsxs as p,jsx as y}from"react/jsx-runtime";import{useDisplayState as h}from"../../hooks/useDisplayState.js";import{overlay as u}from"../../recipes/overlay.js";import{VStack as f}from"@styled/jsx";const i=({animate:e=!0,backgroundType:o="none",hide:n=!1,onAnimated:r=()=>{},onHidden:t=()=>{},children:m})=>{const a=u({animate:e,backgroundType:o,hide:n}),{displayed:d,onHide:l,onShow:s}=h({animate:e,show:!n,onHidden:t,onShown:r});if(!d)return null;const c=o!=="none";return p(f,{alignItems:"center",className:a.container,children:[c&&y("div",{className:a.bg,onAnimationEnd:n?l:s}),m]})};i.displayName="Overlay";export{i as Overlay};
+import{jsxs as f,jsx as u}from"react/jsx-runtime";import{useDisplayState as y}from"../../hooks/useDisplayState.js";import{overlay as h}from"../../recipes/overlay.js";import{VStack as g}from"@styled/jsx";const i=({animate:e=!0,backgroundType:o="none",hide:n=!1,fullscreen:r=!1,onAnimated:t=()=>{},onHidden:m=()=>{},children:d})=>{const a=h({animate:e,backgroundType:o,hide:n,fullscreen:r}),{displayed:l,onHide:s,onShow:c}=y({animate:e,show:!n,onHidden:m,onShown:t});if(!l)return null;const p=o!=="none";return f(g,{alignItems:"center",className:a.container,children:[p&&u("div",{className:a.bg,onAnimationEnd:n?s:c}),d]})};i.displayName="Overlay";export{i as Overlay};
 //# sourceMappingURL=overlay.js.map

package/dist/es/components/containers/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../../src/components/containers/overlay.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { overlay } from '@recipes/overlay';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface OverlayProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  backgroundType?: 'none' | 'blurred' | 'transparent' | 'solid';\n  hide?: boolean;\n  onAnimated?: () => void;\n  onHidden?: () => void;\n}\n\nexport const Overlay = ({\n  animate = true,\n  backgroundType = 'none',\n  hide = false,\n  onAnimated = () => {},\n  onHidden = () => {},\n  children,\n}: OverlayProps) => {\n  const classes = overlay({ animate, backgroundType, hide });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: !hide,\n    onHidden,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  const hasBackground = backgroundType !== 'none';\n\n  return (\n    <VStack alignItems=\"center\" className={classes.container}>\n      {hasBackground && <div className={classes.bg} onAnimationEnd={!hide ? onShow : onHide} />}\n      {children}\n    </VStack>\n  );\n};\n\nOverlay.displayName = 'Overlay';\n"],"names":["Overlay","animate","backgroundType","hide","onAnimated","onHidden","children","classes","overlay","displayed","onHide","onShow","useDisplayState","hasBackground","_jsxs","VStack","_jsx"],"mappings":"2MAYO,MAAMA,EAAU,CAAC,CACtB,QAAAC,EAAU,GACV,eAAAC,EAAiB,OACjB,KAAAC,EAAO,GACP,WAAAC,EAAa,IAAO,CAAA,EACpB,SAAAC,EAAW,OACX,SAAAC,CAAQ,IACS,CACjB,MAAMC,EAAUC,EAAQ,CAAE,QAAAP,EAAS,eAAAC,EAAgB,KAAAC,CAAM,CAAA,EACnD,CAAE,UAAAM,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAAX,EACA,KAAM,CAACE,EACP,SAAAE,EACA,QAASD,CACV,CAAA,EAED,GAAI,CAACK,EACH,OAAO,KAGT,MAAMI,EAAgBX,IAAmB,OAEzC,OACEY,EAACC,GAAO,WAAW,SAAS,UAAWR,EAAQ,UAAS,SAAA,CACrDM,GAAiBG,EAAA,MAAA,CAAK,UAAWT,EAAQ,GAAI,eAAiBJ,EAAgBO,EAATC,CAAe,CAAA,EACpFL,CAAQ,CAAA,CAAA,CAGf,EAEAN,EAAQ,YAAc"}
+{"version":3,"file":"overlay.js","sources":["../../../../src/components/containers/overlay.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { overlay } from '@recipes/overlay';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface OverlayProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  backgroundType?: 'none' | 'blurred' | 'transparent' | 'solid';\n  hide?: boolean;\n  fullscreen?: boolean;\n  onAnimated?: () => void;\n  onHidden?: () => void;\n}\n\nexport const Overlay = ({\n  animate = true,\n  backgroundType = 'none',\n  hide = false,\n  fullscreen = false,\n  onAnimated = () => {},\n  onHidden = () => {},\n  children,\n}: OverlayProps) => {\n  const classes = overlay({ animate, backgroundType, hide, fullscreen });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: !hide,\n    onHidden,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  const hasBackground = backgroundType !== 'none';\n\n  return (\n    <VStack alignItems=\"center\" className={classes.container}>\n      {hasBackground && <div className={classes.bg} onAnimationEnd={!hide ? onShow : onHide} />}\n      {children}\n    </VStack>\n  );\n};\n\nOverlay.displayName = 'Overlay';\n"],"names":["Overlay","animate","backgroundType","hide","fullscreen","onAnimated","onHidden","children","classes","overlay","displayed","onHide","onShow","useDisplayState","hasBackground","_jsxs","VStack","_jsx"],"mappings":"2MAaa,MAAAA,EAAU,CAAC,CACtB,QAAAC,EAAU,GACV,eAAAC,EAAiB,OACjB,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,WAAAC,EAAa,IAAK,CAAA,EAClB,SAAAC,EAAW,IAAO,CAClB,EAAA,SAAAC,CAAQ,IACS,CACjB,MAAMC,EAAUC,EAAQ,CAAE,QAAAR,EAAS,eAAAC,EAAgB,KAAAC,EAAM,WAAAC,CAAU,CAAE,EAC/D,CAAE,UAAAM,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAAZ,EACA,KAAM,CAACE,EACP,SAAAG,EACA,QAASD,CACV,CAAA,EAED,GAAI,CAACK,EACH,OAAO,KAGT,MAAMI,EAAgBZ,IAAmB,OAEzC,OACEa,EAACC,GAAO,WAAW,SAAS,UAAWR,EAAQ,UAAS,SAAA,CACrDM,GAAiBG,EAAA,MAAA,CAAK,UAAWT,EAAQ,GAAI,eAAiBL,EAAgBQ,EAATC,CAAe,CAAA,EACpFL,CAAQ,CAAA,CAAA,CAGf,EAEAP,EAAQ,YAAc"}

package/dist/es/components/layouts/page.js

@@ -1,2 +1,2 @@
-import{jsx as i,jsxs as v,Fragment as y}from"react/jsx-runtime";import{Content as b}from"../containers/content.js";import{Drawer as c}from"../containers/drawer.js";import{Footer as p}from"../containers/footer.js";import{Header as k}from"../containers/header.js";import{Modal as w}from"../containers/modal.js";import{Overlay as H}from"../containers/overlay.js";import{css as j}from"@styled/css";import{VStack as x}from"@styled/jsx";import{token as C}from"@styled/tokens";import{createSlot as m,createHost as D}from"create-slots";import{Children as F,cloneElement as O}from"react";const s="2.625rem",a=m(({children:e})=>i(k,{children:e})),h=m(({children:e})=>F.map(e,o=>{var t,r,n;return O(o,{color:(t=o.props.color)!==null&&t!==void 0?t:C("colors.brand.base"),width:(r=o.props.width)!==null&&r!==void 0?r:s,height:(n=o.props.height)!==null&&n!==void 0?n:s})})),g=m(b),f=m(p),u=m(c),P=({children:e,overlay:o,...t})=>{if(o){const{animate:r,backgroundType:n,isOpen:l=!0,onHidden:d}=t;return i(H,{animate:r,backgroundType:n,hide:!l,onHidden:d,children:e})}return i(y,{children:e})},T=({children:e,overlay:o=!0,...t})=>D(e,r=>{const n=r.get(a)?8:4,l=r.getProps(f),d=r.getProps(u);return i(P,{overlay:o,...t,children:i(w,{paddingType:"md",...t,children:v(x,{alignItems:"center",gap:0,width:"full",className:j({mt:n}),children:[r.get(a),r.get(h),r.get(g),l&&i(p,{...l}),d&&i(c,{...d})]})})})}),I=Object.assign(T,{Header:a,Icon:h,Content:g,Footer:f,Drawer:u});export{I as Page};
+import{jsx as i,jsxs as y,Fragment as b}from"react/jsx-runtime";import{Content as w}from"../containers/content.js";import{Drawer as a}from"../containers/drawer.js";import{Footer as p}from"../containers/footer.js";import{Header as H}from"../containers/header.js";import{Modal as k}from"../containers/modal.js";import{Overlay as O}from"../containers/overlay.js";import{css as P}from"@styled/css";import{VStack as j}from"@styled/jsx";import{token as x}from"@styled/tokens";import{createSlot as l,createHost as C}from"create-slots";import{Children as D,cloneElement as F}from"react";const s="2.625rem",d=l(({children:e})=>i(H,{children:e})),h=l(({children:e})=>D.map(e,o=>{var t,r,n;return F(o,{color:(t=o.props.color)!==null&&t!==void 0?t:x("colors.brand.base"),width:(r=o.props.width)!==null&&r!==void 0?r:s,height:(n=o.props.height)!==null&&n!==void 0?n:s})})),f=l(w),g=l(p),u=l(a),T=({children:e,overlay:o,...t})=>{if(o){const{animate:r,backgroundType:n,isOpen:m=!0,onHidden:c,fullscreen:v=!1}=t;return i(O,{animate:r,backgroundType:n,hide:!m,onHidden:c,fullscreen:v,children:e})}return i(b,{children:e})},I=({children:e,overlay:o=!0,...t})=>C(e,r=>{const n=r.get(d)?8:4,m=r.getProps(g),c=r.getProps(u);return i(T,{overlay:o,...t,children:i(k,{paddingType:"md",...t,children:y(j,{alignItems:"center",gap:0,width:"full",className:P({mt:n}),children:[r.get(d),r.get(h),r.get(f),m&&i(p,{...m}),c&&i(a,{...c})]})})})}),S=Object.assign(I,{Header:d,Icon:h,Content:f,Footer:g,Drawer:u});export{S as Page};
 //# sourceMappingURL=page.js.map

package/dist/es/components/layouts/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","sources":["../../../../src/components/layouts/page.tsx"],"sourcesContent":["import { Content } from '@components/containers/content';\nimport { Drawer } from '@components/containers/drawer';\nimport { Footer } from '@components/containers/footer';\nimport { Header } from '@components/containers/header';\nimport { Modal, ModalProps } from '@components/containers/modal';\nimport { Overlay, OverlayProps } from '@components/containers/overlay';\nimport { css } from '@styled/css';\nimport { VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, ComponentProps, cloneElement } from 'react';\n\nconst DEFAULT_ICON_SIZE = '2.625rem';\n\nconst PageHeader = createSlot(({ children }) => <Header>{children}</Header>);\nconst PageIcon = createSlot(({ children }) => {\n  return Children.map(children, child => {\n    return cloneElement(child, {\n      color: child.props.color ?? token('colors.brand.base'),\n      width: child.props.width ?? DEFAULT_ICON_SIZE,\n      height: child.props.height ?? DEFAULT_ICON_SIZE,\n    });\n  });\n});\nconst PageContent = createSlot(Content);\nconst PageFooter = createSlot(Footer);\nconst PageDrawer = createSlot(Drawer);\n\nexport interface PageProps extends ModalProps, Omit<OverlayProps, 'hide'>, ComponentProps<'div'> {\n  overlay?: boolean;\n}\n\nconst Container = ({ children, overlay, ...props }: PageProps) => {\n  if (overlay) {\n    const { animate, backgroundType, isOpen = true, onHidden } = props;\n    return (\n      <Overlay animate={animate} backgroundType={backgroundType} hide={!isOpen} onHidden={onHidden}>\n        {children}\n      </Overlay>\n    );\n  }\n  return <>{children}</>;\n};\n\nconst PageHost = ({ children, overlay = true, ...props }: PageProps) => {\n  return createHost(children, slots => {\n    const buffer = slots.get(PageHeader) ? 8 : 4;\n    const footerProps = slots.getProps(PageFooter);\n    const drawerProps = slots.getProps(PageDrawer);\n\n    return (\n      <Container overlay={overlay} {...props}>\n        <Modal paddingType=\"md\" {...props}>\n          <VStack alignItems=\"center\" gap={0} width=\"full\" className={css({ mt: buffer })}>\n            {slots.get(PageHeader)}\n            {slots.get(PageIcon)}\n            {slots.get(PageContent)}\n            {footerProps && <Footer {...footerProps} />}\n            {drawerProps && <Drawer {...drawerProps} />}\n          </VStack>\n        </Modal>\n      </Container>\n    );\n  });\n};\n\nexport const Page = Object.assign(PageHost, {\n  Header: PageHeader,\n  Icon: PageIcon,\n  Content: PageContent,\n  Footer: PageFooter,\n  Drawer: PageDrawer,\n});\n"],"names":["DEFAULT_ICON_SIZE","PageHeader","createSlot","children","_jsx","Header","PageIcon","Children","child","cloneElement","_a","token","PageContent","Content","PageFooter","Footer","PageDrawer","Drawer","Container","overlay","props","animate","backgroundType","isOpen","onHidden","Overlay","_Fragment","PageHost","createHost","slots","buffer","footerProps","drawerProps","Modal","_jsxs","VStack","css","Page"],"mappings":"mkBAYA,MAAMA,EAAoB,WAEpBC,EAAaC,EAAW,CAAC,CAAE,SAAAC,CAAQ,IAAOC,EAACC,YAAQF,CAAQ,CAAA,CAAU,EACrEG,EAAWJ,EAAW,CAAC,CAAE,SAAAC,CAAU,IAChCI,EAAS,IAAIJ,EAAUK,GAAQ,WACpC,OAAOC,EAAaD,EAAO,CACzB,OAAOE,EAAAF,EAAM,MAAM,SAAS,MAAAE,IAAA,OAAAA,EAAAC,EAAM,mBAAmB,EACrD,SAAOH,EAAM,MAAM,4BAASR,EAC5B,UAAQQ,EAAM,MAAM,6BAAUR,CAC/B,CAAA,CACH,CAAC,CACF,EACKY,EAAcV,EAAWW,CAAO,EAChCC,EAAaZ,EAAWa,CAAM,EAC9BC,EAAad,EAAWe,CAAM,EAM9BC,EAAY,CAAC,CAAE,SAAAf,EAAU,QAAAgB,EAAS,GAAGC,CAAkB,IAAI,CAC/D,GAAID,EAAS,CACX,KAAM,CAAE,QAAAE,EAAS,eAAAC,EAAgB,OAAAC,EAAS,GAAM,SAAAC,CAAU,EAAGJ,EAC7D,OACEhB,EAACqB,EAAQ,CAAA,QAASJ,EAAS,eAAgBC,EAAgB,KAAM,CAACC,EAAQ,SAAUC,EACjF,SAAArB,CACO,CAAA,CAEd,CACA,OAAOC,EAAAsB,EAAA,CAAA,SAAGvB,CAAQ,CAAA,CACpB,EAEMwB,EAAW,CAAC,CAAE,SAAAxB,EAAU,QAAAgB,EAAU,GAAM,GAAGC,CAAK,IAC7CQ,EAAWzB,EAAU0B,GAAQ,CAClC,MAAMC,EAASD,EAAM,IAAI5B,CAAU,EAAI,EAAI,EACrC8B,EAAcF,EAAM,SAASf,CAAU,EACvCkB,EAAcH,EAAM,SAASb,CAAU,EAE7C,OACEZ,EAACc,GAAU,QAASC,EAAa,GAAAC,EAC/B,SAAAhB,EAAC6B,EAAM,CAAA,YAAY,KAAI,GAAKb,EAC1B,SAAAc,EAACC,EAAM,CAAC,WAAW,SAAS,IAAK,EAAG,MAAM,OAAO,UAAWC,EAAI,CAAE,GAAIN,CAAQ,CAAA,YAC3ED,EAAM,IAAI5B,CAAU,EACpB4B,EAAM,IAAIvB,CAAQ,EAClBuB,EAAM,IAAIjB,CAAW,EACrBmB,GAAe3B,EAACW,EAAW,CAAA,GAAAgB,IAC3BC,GAAe5B,EAACa,MAAWe,CAAW,CAAA,CAAI,GAEvC,CAAA,CAAA,CAAA,CAGd,CAAC,EAGUK,EAAO,OAAO,OAAOV,EAAU,CAC1C,OAAQ1B,EACR,KAAMK,EACN,QAASM,EACT,OAAQE,EACR,OAAQE,CACT,CAAA"}
+{"version":3,"file":"page.js","sources":["../../../../src/components/layouts/page.tsx"],"sourcesContent":["import { Content } from '@components/containers/content';\nimport { Drawer } from '@components/containers/drawer';\nimport { Footer } from '@components/containers/footer';\nimport { Header } from '@components/containers/header';\nimport { Modal, ModalProps } from '@components/containers/modal';\nimport { Overlay, OverlayProps } from '@components/containers/overlay';\nimport { css } from '@styled/css';\nimport { VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, ComponentProps, cloneElement } from 'react';\n\nconst DEFAULT_ICON_SIZE = '2.625rem';\n\nconst PageHeader = createSlot(({ children }) => <Header>{children}</Header>);\nconst PageIcon = createSlot(({ children }) => {\n  return Children.map(children, child => {\n    return cloneElement(child, {\n      color: child.props.color ?? token('colors.brand.base'),\n      width: child.props.width ?? DEFAULT_ICON_SIZE,\n      height: child.props.height ?? DEFAULT_ICON_SIZE,\n    });\n  });\n});\nconst PageContent = createSlot(Content);\nconst PageFooter = createSlot(Footer);\nconst PageDrawer = createSlot(Drawer);\n\nexport interface PageProps extends ModalProps, Omit<OverlayProps, 'hide'>, ComponentProps<'div'> {\n  overlay?: boolean;\n}\n\nconst Container = ({ children, overlay, ...props }: PageProps) => {\n  if (overlay) {\n    const { animate, backgroundType, isOpen = true, onHidden, fullscreen = false } = props;\n    return (\n      <Overlay\n        animate={animate}\n        backgroundType={backgroundType}\n        hide={!isOpen}\n        onHidden={onHidden}\n        fullscreen={fullscreen}\n      >\n        {children}\n      </Overlay>\n    );\n  }\n  return <>{children}</>;\n};\n\nconst PageHost = ({ children, overlay = true, ...props }: PageProps) => {\n  return createHost(children, slots => {\n    const buffer = slots.get(PageHeader) ? 8 : 4;\n    const footerProps = slots.getProps(PageFooter);\n    const drawerProps = slots.getProps(PageDrawer);\n\n    return (\n      <Container overlay={overlay} {...props}>\n        <Modal paddingType=\"md\" {...props}>\n          <VStack alignItems=\"center\" gap={0} width=\"full\" className={css({ mt: buffer })}>\n            {slots.get(PageHeader)}\n            {slots.get(PageIcon)}\n            {slots.get(PageContent)}\n            {footerProps && <Footer {...footerProps} />}\n            {drawerProps && <Drawer {...drawerProps} />}\n          </VStack>\n        </Modal>\n      </Container>\n    );\n  });\n};\n\nexport const Page = Object.assign(PageHost, {\n  Header: PageHeader,\n  Icon: PageIcon,\n  Content: PageContent,\n  Footer: PageFooter,\n  Drawer: PageDrawer,\n});\n"],"names":["DEFAULT_ICON_SIZE","PageHeader","createSlot","children","_jsx","Header","PageIcon","Children","child","cloneElement","_a","token","PageContent","Content","PageFooter","Footer","PageDrawer","Drawer","Container","overlay","props","animate","backgroundType","isOpen","onHidden","fullscreen","Overlay","_Fragment","PageHost","createHost","slots","buffer","footerProps","drawerProps","Modal","_jsxs","VStack","css","Page"],"mappings":"mkBAYA,MAAMA,EAAoB,WAEpBC,EAAaC,EAAW,CAAC,CAAE,SAAAC,CAAQ,IAAOC,EAACC,YAAQF,CAAQ,CAAA,CAAU,EACrEG,EAAWJ,EAAW,CAAC,CAAE,SAAAC,CAAU,IAChCI,EAAS,IAAIJ,EAAUK,GAAQ,WACpC,OAAOC,EAAaD,EAAO,CACzB,OAAOE,EAAAF,EAAM,MAAM,SAAS,MAAAE,IAAA,OAAAA,EAAAC,EAAM,mBAAmB,EACrD,SAAOH,EAAM,MAAM,4BAASR,EAC5B,UAAQQ,EAAM,MAAM,6BAAUR,CAC/B,CAAA,CACH,CAAC,CACF,EACKY,EAAcV,EAAWW,CAAO,EAChCC,EAAaZ,EAAWa,CAAM,EAC9BC,EAAad,EAAWe,CAAM,EAM9BC,EAAY,CAAC,CAAE,SAAAf,EAAU,QAAAgB,EAAS,GAAGC,CAAkB,IAAI,CAC/D,GAAID,EAAS,CACX,KAAM,CAAE,QAAAE,EAAS,eAAAC,EAAgB,OAAAC,EAAS,GAAM,SAAAC,EAAU,WAAAC,EAAa,EAAO,EAAGL,EACjF,OACEhB,EAACsB,EAAO,CACN,QAASL,EACT,eAAgBC,EAChB,KAAM,CAACC,EACP,SAAUC,EACV,WAAYC,EAEX,SAAAtB,CACO,CAAA,CAEd,CACA,OAAOC,EAAAuB,EAAA,CAAA,SAAGxB,CAAQ,CAAA,CACpB,EAEMyB,EAAW,CAAC,CAAE,SAAAzB,EAAU,QAAAgB,EAAU,GAAM,GAAGC,CAAK,IAC7CS,EAAW1B,EAAU2B,GAAQ,CAClC,MAAMC,EAASD,EAAM,IAAI7B,CAAU,EAAI,EAAI,EACrC+B,EAAcF,EAAM,SAAShB,CAAU,EACvCmB,EAAcH,EAAM,SAASd,CAAU,EAE7C,OACEZ,EAACc,GAAU,QAASC,EAAa,GAAAC,EAC/B,SAAAhB,EAAC8B,EAAM,CAAA,YAAY,KAAI,GAAKd,EAC1B,SAAAe,EAACC,EAAM,CAAC,WAAW,SAAS,IAAK,EAAG,MAAM,OAAO,UAAWC,EAAI,CAAE,GAAIN,CAAQ,CAAA,YAC3ED,EAAM,IAAI7B,CAAU,EACpB6B,EAAM,IAAIxB,CAAQ,EAClBwB,EAAM,IAAIlB,CAAW,EACrBoB,GAAe5B,EAACW,EAAW,CAAA,GAAAiB,IAC3BC,GAAe7B,EAACa,MAAWgB,CAAW,CAAA,CAAI,GAEvC,CAAA,CAAA,CAAA,CAGd,CAAC,EAGUK,EAAO,OAAO,OAAOV,EAAU,CAC1C,OAAQ3B,EACR,KAAMK,EACN,QAASM,EACT,OAAQE,EACR,OAAQE,CACT,CAAA"}

package/dist/es/components/primitives/dropdown-selector.js

@@ -1,2 +1,2 @@
-import{jsxs as b,jsx as o}from"react/jsx-runtime";import"../feedback/callout.js";import{css as A}from"@styled/css";import{HStack as C,Box as W,VStack as T}from"@styled/jsx";import"../feedback/progress-bar.js";import{token as S}from"@styled/tokens";import U from"../icons/ico-caret-down.js";import Y from"../icons/ico-caret-up.js";import G from"../icons/ico-checkmark.js";import J from"../icons/ico-question-circle-fill.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import D from"./text.js";import"./portal.js";import{createContext as Q,useContext as X,useCallback as O,useState as B,useRef as F,useMemo as Z,Children as m,useEffect as ee,cloneElement as te}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import re from"../feedback/tooltip.js";import{useButton as oe,useFocusRing as le,useKeyboard as ne,mergeProps as ie}from"react-aria";const L={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},N=Q({selectedOption:null,setSelectedOption:()=>{}}),R=({value:r,label:s,size:d="lg",isFocused:y})=>{const{selectedOption:u,setSelectedOption:p}=X(N),i=u?.value===r,l=L[d],x=O(()=>{p({value:r,label:s})},[p,r,s]);return b(C,{py:1.5,gap:2,bg:i?"brand.base":y?"brand.lightest":"",_hover:i?{}:{bg:"brand.lightest"},onClick:x,style:{paddingLeft:l.width,paddingRight:l.width},children:[o(W,{style:{width:l.width},children:i&&o(G,{width:l.check,height:l.check,color:S("colors.text.quaternary")})}),o(D,{size:d,fontWeight:"medium",fontColor:i?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:s})]})},_=({children:r,onSelect:s,label:d,placeholder:y="Select one",selectedValue:u,size:p="lg",tooltipContent:i,disabled:l,viewMax:x=5,...j})=>{const[h,g]=B(!1),[t,f]=B(null),w=F(null),k=F(null),a=L[p],q=x*a.mult+1,H=O(()=>{g(e=>!e),h||(f(null),setTimeout(()=>{var e;return(e=k.current)===null||e===void 0?void 0:e.focus()}))},[h]),I=O(e=>{s(e.value),g(!1)},[s]),z=Z(()=>{const e=m.toArray(r).find(n=>n.props.value===u);return e?e.props.label:y},[u,r]),{buttonProps:K}=oe({...j,isDisabled:l,onPress:H},w),{focusProps:V,isFocusVisible:$}=le(),{keyboardProps:M}=ne({onKeyDown:e=>{var n,c;if(!h)return;let v=t;const E=m.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),t===null?f(m.count(r)-1):(v=t>0?t-1:m.count(r)-1,f(v));break;case"ArrowDown":e.preventDefault(),t===null?f(0):(v=t<m.count(r)-1?t+1:0,f(v));break;case"Enter":if(e.preventDefault(),(n=w.current)===null||n===void 0||n.focus(),t===null)return;if(t>=0&&t<E.length){const P=E[t];P&&s(P.props.value)}break;case"Escape":g(!1),(c=w.current)===null||c===void 0||c.focus();break}}});return ee(()=>{const e=n=>{var c;!((c=k.current)===null||c===void 0)&&c.contains(n.target)||g(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),o(N.Provider,{value:{selectedOption:{value:u??"",label:z},setSelectedOption:I},children:b(T,{gap:2,w:"full",alignItems:"flex-start",children:[(d||i)&&b(C,{gap:2,opacity:l?.3:"",transition:"all linear 120ms",children:[d&&o(D,{size:"sm",fontWeight:"medium",children:d}),i&&o(re,{isDisabled:l,content:i,children:o(J,{className:A({w:4,h:4,color:"neutral.primary"})})})]}),b("button",{className:A({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:$?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:w,...ie(K,V,M),children:[b(C,{w:"full",p:4,justifyContent:"space-between",style:{height:a.height},children:[o(D,{size:p,fontColor:u?"text.primary":"text.tertiary",children:z}),h?o(Y,{width:a.caret,height:a.caret,color:S("colors.brand.base")}):o(U,{width:a.caret,height:a.caret,color:S("colors.brand.base")})]}),h&&o(W,{ref:k,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${q}rem`,top:a.top},overflowY:"auto",outline:"none",zIndex:"max",children:m.map(r,(e,n)=>te(e,{isFocused:n===t,size:p}))})]})]})})};R.displayName="DropdownOption",_.displayName="DropdownSelector";export{R as DropdownOption,_ as DropdownSelector};
+import{jsxs as b,jsx as o}from"react/jsx-runtime";import"../feedback/callout.js";import{css as W}from"@styled/css";import{HStack as C,Box as A,VStack as $}from"@styled/jsx";import"../feedback/progress-bar.js";import{token as S}from"@styled/tokens";import U from"../icons/ico-caret-down.js";import Y from"../icons/ico-caret-up.js";import G from"../icons/ico-checkmark.js";import J from"../icons/ico-question-circle-fill.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import D from"./text.js";import"./portal.js";import{createContext as Q,useContext as X,useCallback as O,useState as N,useRef as B,useMemo as Z,Children as m,useEffect as ee,cloneElement as te}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import re from"../feedback/tooltip.js";import{useButton as oe,useFocusRing as le,useKeyboard as ne,mergeProps as ie}from"react-aria";const F={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},R=Q({selectedOption:null,setSelectedOption:()=>{}}),_=({value:r,label:s,size:u="lg",isFocused:y})=>{const{selectedOption:d,setSelectedOption:p}=X(R),i=d?.value===r,l=F[u],x=O(()=>{p({value:r,label:s})},[p,r,s]);return b(C,{py:1.5,gap:2,bg:i?"brand.base":y?"brand.lightest":"",_hover:i?{}:{bg:"brand.lightest"},onClick:x,style:{paddingLeft:l.width,paddingRight:l.width},children:[o(A,{style:{minWidth:l.width},children:i&&o(G,{width:l.check,height:l.check,color:S("colors.text.quaternary")})}),o(D,{size:u,fontWeight:"medium",fontColor:i?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:s})]})},j=({children:r,onSelect:s,label:u,placeholder:y="Select one",selectedValue:d,size:p="lg",tooltipContent:i,disabled:l,viewMax:x=5,...q})=>{const[h,g]=N(!1),[t,f]=N(null),v=B(null),k=B(null),a=F[p],H=x*a.mult+1,I=O(()=>{g(e=>!e),h||(f(null),setTimeout(()=>{var e;return(e=k.current)===null||e===void 0?void 0:e.focus()}))},[h]),K=O(e=>{s(e.value),g(!1)},[s]),z=Z(()=>{const e=m.toArray(r).find(n=>n.props.value===d);return e?e.props.label:y},[d,r]),{buttonProps:L}=oe({...q,isDisabled:l,onPress:I},v),{focusProps:V,isFocusVisible:M}=le(),{keyboardProps:T}=ne({onKeyDown:e=>{var n,c;if(!h)return;let w=t;const E=m.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),t===null?f(m.count(r)-1):(w=t>0?t-1:m.count(r)-1,f(w));break;case"ArrowDown":e.preventDefault(),t===null?f(0):(w=t<m.count(r)-1?t+1:0,f(w));break;case"Enter":if(e.preventDefault(),(n=v.current)===null||n===void 0||n.focus(),t===null)return;if(t>=0&&t<E.length){const P=E[t];P&&s(P.props.value)}break;case"Escape":g(!1),(c=v.current)===null||c===void 0||c.focus();break}}});return ee(()=>{const e=n=>{var c;!((c=k.current)===null||c===void 0)&&c.contains(n.target)||g(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),o(R.Provider,{value:{selectedOption:{value:d??"",label:z},setSelectedOption:K},children:b($,{gap:2,w:"full",alignItems:"flex-start",children:[(u||i)&&b(C,{gap:2,opacity:l?.3:"",transition:"all linear 120ms",children:[u&&o(D,{size:"sm",fontWeight:"medium",children:u}),i&&o(re,{isDisabled:l,content:i,children:o(J,{className:W({w:4,h:4,color:"neutral.primary"})})})]}),b("button",{className:W({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:M?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:v,...ie(L,V,T),children:[b(C,{w:"full",p:4,justifyContent:"space-between",style:{height:a.height},children:[o(D,{truncate:!0,size:p,fontColor:d?"text.primary":"text.tertiary",children:z}),h?o(Y,{width:a.caret,height:a.caret,color:S("colors.brand.base")}):o(U,{width:a.caret,height:a.caret,color:S("colors.brand.base")})]}),h&&o(A,{ref:k,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${H}rem`,top:a.top},overflowY:"auto",outline:"none",zIndex:"max",children:m.map(r,(e,n)=>te(e,{isFocused:n===t,size:p}))})]})]})})};_.displayName="DropdownOption",j.displayName="DropdownSelector";export{_ as DropdownOption,j as DropdownSelector};
 //# sourceMappingURL=dropdown-selector.js.map

package/dist/es/components/primitives/dropdown-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  size?: 'sm' | 'md' | 'lg';\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n  size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n  sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n  md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n  lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n  const sizeProps = SIZES[size];\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n      style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n    >\n      <Box style={{ width: sizeProps.width }}>\n        {isSelected && (\n          <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n        )}\n      </Box>\n      <Text\n        size={size}\n        fontWeight=\"medium\"\n        fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n        styles={{ textAlign: 'left' }}\n      >\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  size = 'lg',\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const sizeProps = SIZES[size];\n  const maxHeight = viewMax * sizeProps.mult + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        {(label || tooltipContent) && (\n          <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n            {label && (\n              <Text size=\"sm\" fontWeight=\"medium\">\n                {label}\n              </Text>\n            )}\n\n            {tooltipContent && (\n              <Tooltip isDisabled={disabled} content={tooltipContent}>\n                <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n              </Tooltip>\n            )}\n          </HStack>\n        )}\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            bg: 'surface.primary',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n            <Text size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                  size,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
+{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  size?: 'sm' | 'md' | 'lg';\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n  size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n  sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n  md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n  lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n  const sizeProps = SIZES[size];\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n      style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n    >\n      <Box style={{ minWidth: sizeProps.width }}>\n        {isSelected && (\n          <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n        )}\n      </Box>\n      <Text\n        size={size}\n        fontWeight=\"medium\"\n        fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n        styles={{ textAlign: 'left' }}\n      >\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  size = 'lg',\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const sizeProps = SIZES[size];\n  const maxHeight = viewMax * sizeProps.mult + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        {(label || tooltipContent) && (\n          <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n            {label && (\n              <Text size=\"sm\" fontWeight=\"medium\">\n                {label}\n              </Text>\n            )}\n\n            {tooltipContent && (\n              <Tooltip isDisabled={disabled} content={tooltipContent}>\n                <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n              </Tooltip>\n            )}\n          </HStack>\n        )}\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            bg: 'surface.primary',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n            <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                  size,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}

package/dist/es/recipes/modal.js

@@ -1,2 +1,2 @@
-import{sva as a}from"@styled/css";const e=a({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none","@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}},variants:{animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});export{e as modal};
+import{sva as e}from"@styled/css";const a=e({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none","@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}},variants:{fullscreen:{true:{wrapper:{"@media (min-width: 48rem)":{height:"100vh",width:"100vw",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none",rounded:0,top:0}}}},animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});export{a as modal};
 //# sourceMappingURL=modal.js.map

package/dist/es/recipes/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n  slots: ['content', 'wrapper'],\n  base: {\n    content: {\n      height: 'full',\n      width: 'full',\n      boxSizing: 'border-box',\n    },\n    wrapper: {\n      height: 'full',\n      width: 'full',\n      bg: 'surface.primary',\n      position: 'relative',\n      overflow: 'auto',\n      scrollbarWidth: 'none',\n\n      '@media (min-width: 48rem)': {\n        top: 12,\n        mx: 'auto',\n        width: '25rem',\n        height: 'fit-content',\n        boxShadow: '0px 12px 56px {colors.ink.70/15}',\n        borderRadius: 'container',\n        _dark: {\n          boxShadow: 'none',\n        },\n      },\n    },\n  },\n  variants: {\n    animate: {\n      false: {\n        wrapper: {\n          animationName: 'none',\n          scale: 1,\n        },\n      },\n    },\n    isOpen: { true: {} },\n    paddingType: {\n      none: {\n        wrapper: {\n          p: 0,\n        },\n      },\n      sm: {\n        wrapper: {\n          p: 2,\n          pb: 0,\n        },\n      },\n      md: {\n        wrapper: {\n          p: 4,\n          pb: 0,\n        },\n      },\n      lg: {\n        wrapper: {\n          p: 8,\n          pb: 0,\n        },\n      },\n    },\n    showBorder: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            _dark: {\n              borderWidth: 1,\n              borderBlock: 'solid',\n              borderColor: 'neutral.secondary',\n            },\n          },\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      isOpen: true,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleIn',\n          animationDuration: '250ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      animate: true,\n      isOpen: false,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    isOpen: true,\n    paddingType: 'none',\n  },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"kCAEO,MAAMA,EAAQC,EAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,OAEhB,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}
+{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n  slots: ['content', 'wrapper'],\n  base: {\n    content: {\n      height: 'full',\n      width: 'full',\n      boxSizing: 'border-box',\n    },\n    wrapper: {\n      height: 'full',\n      width: 'full',\n      bg: 'surface.primary',\n      position: 'relative',\n      overflow: 'auto',\n      scrollbarWidth: 'none',\n\n      '@media (min-width: 48rem)': {\n        top: 12,\n        mx: 'auto',\n        width: '25rem',\n        height: 'fit-content',\n        boxShadow: '0px 12px 56px {colors.ink.70/15}',\n        borderRadius: 'container',\n        _dark: {\n          boxShadow: 'none',\n        },\n      },\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            height: '100vh',\n            width: '100vw',\n            bg: 'surface.primary',\n            position: 'relative',\n            overflow: 'auto',\n            scrollbarWidth: 'none',\n            rounded: 0,\n            top: 0,\n          },\n        },\n      },\n    },\n    animate: {\n      false: {\n        wrapper: {\n          animationName: 'none',\n          scale: 1,\n        },\n      },\n    },\n    isOpen: { true: {} },\n    paddingType: {\n      none: {\n        wrapper: {\n          p: 0,\n        },\n      },\n      sm: {\n        wrapper: {\n          p: 2,\n          pb: 0,\n        },\n      },\n      md: {\n        wrapper: {\n          p: 4,\n          pb: 0,\n        },\n      },\n      lg: {\n        wrapper: {\n          p: 8,\n          pb: 0,\n        },\n      },\n    },\n    showBorder: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            _dark: {\n              borderWidth: 1,\n              borderBlock: 'solid',\n              borderColor: 'neutral.secondary',\n            },\n          },\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      isOpen: true,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleIn',\n          animationDuration: '250ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      animate: true,\n      isOpen: false,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    isOpen: true,\n    paddingType: 'none',\n  },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"kCAEa,MAAAA,EAAQC,EAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,OAEhB,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,OAAQ,QACR,MAAO,QACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,OAChB,QAAS,EACT,IAAK,CACN,CACF,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAI,CAAA,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}

package/dist/es/recipes/overlay.js

@@ -1,2 +1,2 @@
-import{sva as a}from"@styled/css";const i=a({slots:["bg","container"],base:{bg:{height:"full",width:"full",pointerEvents:"all",position:"fixed",top:0,left:0},container:{height:"100vh",width:"100vw",maxWidth:"100rem",position:"relative",margin:"0 auto","@media (min-width: 48rem)":{height:"fit-content"}}},variants:{animate:{false:{bg:{animationName:"none"}}},backgroundType:{blurred:{bg:{backdropBlur:"0.375rem",backdropFilter:"auto",backgroundColor:"surface.primary/70"}},solid:{bg:{backgroundColor:"surface.tertiary"}},transparent:{},none:{}},hide:{false:{}}},compoundVariants:[{animate:!0,hide:!1,css:{bg:{animationFillMode:"forwards",animationName:"fadeIn",animationDuration:"400ms"}}},{animate:!0,hide:!0,css:{bg:{animationFillMode:"forwards",animationName:"fadeOut",animationDuration:"400ms"}}}],defaultVariants:{animate:!0,backgroundType:"none",hide:!1}});export{i as overlay};
+import{sva as a}from"@styled/css";const i=a({slots:["bg","container"],base:{bg:{height:"full",width:"full",pointerEvents:"all",position:"fixed",top:0,left:0},container:{height:"100vh",width:"100vw",maxWidth:"100rem",position:"relative",margin:"0 auto","@media (min-width: 48rem)":{height:"fit-content"}}},variants:{fullscreen:{true:{container:{maxWidth:"none"}}},animate:{false:{bg:{animationName:"none"}}},backgroundType:{blurred:{bg:{backdropBlur:"0.375rem",backdropFilter:"auto",backgroundColor:"surface.primary/70"}},solid:{bg:{backgroundColor:"surface.tertiary"}},transparent:{},none:{}},hide:{false:{}}},compoundVariants:[{animate:!0,hide:!1,css:{bg:{animationFillMode:"forwards",animationName:"fadeIn",animationDuration:"400ms"}}},{animate:!0,hide:!0,css:{bg:{animationFillMode:"forwards",animationName:"fadeOut",animationDuration:"400ms"}}}],defaultVariants:{animate:!0,backgroundType:"none",hide:!1}});export{i as overlay};
 //# sourceMappingURL=overlay.js.map

package/dist/es/recipes/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../src/recipes/overlay.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const overlay = sva({\n  slots: ['bg', 'container'],\n  base: {\n    bg: {\n      height: 'full',\n      width: 'full',\n      pointerEvents: 'all',\n      position: 'fixed',\n      top: 0,\n      left: 0,\n    },\n    container: {\n      height: '100vh',\n      width: '100vw',\n      maxWidth: '100rem',\n      position: 'relative',\n      margin: '0 auto',\n\n      '@media (min-width: 48rem)': {\n        height: 'fit-content',\n      },\n    },\n  },\n  variants: {\n    animate: {\n      false: {\n        bg: {\n          animationName: 'none',\n        },\n      },\n    },\n    backgroundType: {\n      blurred: {\n        bg: {\n          backdropBlur: '0.375rem',\n          backdropFilter: 'auto',\n          backgroundColor: 'surface.primary/70',\n        },\n      },\n      solid: {\n        bg: {\n          backgroundColor: 'surface.tertiary',\n        },\n      },\n      transparent: {},\n      none: {},\n    },\n    hide: { false: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      hide: false,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeIn',\n          animationDuration: '400ms',\n        },\n      },\n    },\n    {\n      animate: true,\n      hide: true,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeOut',\n          animationDuration: '400ms',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    backgroundType: 'none',\n    hide: false,\n  },\n});\n\nexport type OverlayVariants = RecipeVariantProps<typeof overlay>;\n"],"names":["overlay","sva"],"mappings":"kCAEO,MAAMA,EAAUC,EAAI,CACzB,MAAO,CAAC,KAAM,WAAW,EACzB,KAAM,CACJ,GAAI,CACF,OAAQ,OACR,MAAO,OACP,cAAe,MACf,SAAU,QACV,IAAK,EACL,KAAM,CACP,EACD,UAAW,CACT,OAAQ,QACR,MAAO,QACP,SAAU,SACV,SAAU,WACV,OAAQ,SAER,4BAA6B,CAC3B,OAAQ,aACT,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,MAAO,CACL,GAAI,CACF,cAAe,MAChB,CACF,CACF,EACD,eAAgB,CACd,QAAS,CACP,GAAI,CACF,aAAc,WACd,eAAgB,OAChB,gBAAiB,oBAClB,CACF,EACD,MAAO,CACL,GAAI,CACF,gBAAiB,kBAClB,CACF,EACD,YAAa,CAAA,EACb,KAAM,CAAA,CACP,EACD,KAAM,CAAE,MAAO,CAAA,CAAI,CACpB,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,SACf,kBAAmB,OACpB,CACF,CACF,EACD,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,UACf,kBAAmB,OACpB,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,eAAgB,OAChB,KAAM,EACP,CACF,CAAA"}
+{"version":3,"file":"overlay.js","sources":["../../../src/recipes/overlay.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const overlay = sva({\n  slots: ['bg', 'container'],\n  base: {\n    bg: {\n      height: 'full',\n      width: 'full',\n      pointerEvents: 'all',\n      position: 'fixed',\n      top: 0,\n      left: 0,\n    },\n    container: {\n      height: '100vh',\n      width: '100vw',\n      maxWidth: '100rem',\n      position: 'relative',\n      margin: '0 auto',\n\n      '@media (min-width: 48rem)': {\n        height: 'fit-content',\n      },\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        container: {\n          maxWidth: 'none',\n        },\n      },\n    },\n    animate: {\n      false: {\n        bg: {\n          animationName: 'none',\n        },\n      },\n    },\n    backgroundType: {\n      blurred: {\n        bg: {\n          backdropBlur: '0.375rem',\n          backdropFilter: 'auto',\n          backgroundColor: 'surface.primary/70',\n        },\n      },\n      solid: {\n        bg: {\n          backgroundColor: 'surface.tertiary',\n        },\n      },\n      transparent: {},\n      none: {},\n    },\n    hide: { false: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      hide: false,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeIn',\n          animationDuration: '400ms',\n        },\n      },\n    },\n    {\n      animate: true,\n      hide: true,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeOut',\n          animationDuration: '400ms',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    backgroundType: 'none',\n    hide: false,\n  },\n});\n\nexport type OverlayVariants = RecipeVariantProps<typeof overlay>;\n"],"names":["overlay","sva"],"mappings":"kCAEa,MAAAA,EAAUC,EAAI,CACzB,MAAO,CAAC,KAAM,WAAW,EACzB,KAAM,CACJ,GAAI,CACF,OAAQ,OACR,MAAO,OACP,cAAe,MACf,SAAU,QACV,IAAK,EACL,KAAM,CACP,EACD,UAAW,CACT,OAAQ,QACR,MAAO,QACP,SAAU,SACV,SAAU,WACV,OAAQ,SAER,4BAA6B,CAC3B,OAAQ,aACT,CACF,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,UAAW,CACT,SAAU,MACX,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,GAAI,CACF,cAAe,MAChB,CACF,CACF,EACD,eAAgB,CACd,QAAS,CACP,GAAI,CACF,aAAc,WACd,eAAgB,OAChB,gBAAiB,oBAClB,CACF,EACD,MAAO,CACL,GAAI,CACF,gBAAiB,kBAClB,CACF,EACD,YAAa,CAAA,EACb,KAAM,CAAA,CACP,EACD,KAAM,CAAE,MAAO,CAAA,CAAI,CACpB,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,SACf,kBAAmB,OACpB,CACF,CACF,EACD,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,UACf,kBAAmB,OACpB,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,eAAgB,OAChB,KAAM,EACP,CACF,CAAA"}

package/dist/panda.buildinfo.json

@@ -1 +1 @@
-{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:negative.darker","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","padding]___[value:6","paddingBottom]___[value:5","fontWeight]___[value:bold","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","maxWidth]___[value:72","width]___[value:max","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","filter]___[value:blur(10px)","textWrap]___[value:nowrap","gap]___[value:2","width]___[value:20","height]___[value:20","zIndex]___[value:10","color]___[value:positive.darker","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","height]___[value:16","width]___[value:16","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","width]___[value:4","display]___[value:inline-block","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
+{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:negative.darker","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","height]___[value:100vh]___[cond:@media (min-width: 48rem)","width]___[value:100vw]___[cond:@media (min-width: 48rem)","background]___[value:surface.primary]___[cond:@media (min-width: 48rem)","position]___[value:relative]___[cond:@media (min-width: 48rem)","overflow]___[value:auto]___[cond:@media (min-width: 48rem)","scrollbarWidth]___[value:none]___[cond:@media (min-width: 48rem)","borderRadius]___[value:0]___[cond:@media (min-width: 48rem)","top]___[value:0]___[cond:@media (min-width: 48rem)","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","padding]___[value:6","paddingBottom]___[value:5","fontWeight]___[value:bold","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","maxWidth]___[value:72","width]___[value:max","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","filter]___[value:blur(10px)","textWrap]___[value:nowrap","gap]___[value:2","width]___[value:20","height]___[value:20","zIndex]___[value:10","color]___[value:positive.darker","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","height]___[value:16","width]___[value:16","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","width]___[value:4","display]___[value:inline-block","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}

package/dist/types/components/containers/modal.d.ts

@@ -6,9 +6,10 @@ export interface ModalProps extends ComponentProps<'div'> {
     onAnimated?: () => void;
     onClosed?: () => void;
     showBorder?: boolean;
+    fullscreen?: boolean;
 }
 export declare const Modal: {
-    ({ animate, paddingType, isOpen, onAnimated, onClosed, showBorder, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ animate, paddingType, isOpen, onAnimated, onClosed, showBorder, fullscreen, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 //# sourceMappingURL=modal.d.ts.map

package/dist/types/components/containers/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK;oFAQf,UAAU;;CAoBZ,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK;gGASf,UAAU;;CAoBZ,CAAC"}

package/dist/types/components/containers/overlay.d.ts

@@ -3,11 +3,12 @@ export interface OverlayProps extends ComponentProps<'div'> {
     animate?: boolean;
     backgroundType?: 'none' | 'blurred' | 'transparent' | 'solid';
     hide?: boolean;
+    fullscreen?: boolean;
     onAnimated?: () => void;
     onHidden?: () => void;
 }
 export declare const Overlay: {
-    ({ animate, backgroundType, hide, onAnimated, onHidden, children, }: OverlayProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ animate, backgroundType, hide, fullscreen, onAnimated, onHidden, children, }: OverlayProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 //# sourceMappingURL=overlay.d.ts.map

package/dist/types/components/containers/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/overlay.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,KAAK,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,OAAO,CAAC;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,OAAO;yEAOjB,YAAY;;CAqBd,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/overlay.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,KAAK,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,OAAO,CAAC;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,OAAO;qFAQjB,YAAY;;CAqBd,CAAC"}

package/dist/types/components/layouts/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/page.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAS,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAW,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAKvE,OAAO,EAAY,cAAc,EAAgB,MAAM,OAAO,CAAC;AAkB/D,MAAM,WAAW,SAAU,SAAQ,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoCD,eAAO,MAAM,IAAI,qCAtByC,SAAS;;;;;;CA4BjE,CAAC"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/page.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAS,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAW,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAKvE,OAAO,EAAY,cAAc,EAAgB,MAAM,OAAO,CAAC;AAkB/D,MAAM,WAAW,SAAU,SAAQ,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0CD,eAAO,MAAM,IAAI,qCAtByC,SAAS;;;;;;CA4BjE,CAAC"}

package/dist/types/recipes/modal.d.ts

@@ -1,5 +1,21 @@
 import { type RecipeVariantProps } from '@styled/css';
 export declare const modal: import("../../styled-system/types").SlotRecipeRuntimeFn<"content" | "wrapper", {
+    fullscreen: {
+        true: {
+            wrapper: {
+                '@media (min-width: 48rem)': {
+                    height: "100vh";
+                    width: "100vw";
+                    bg: "surface.primary";
+                    position: "relative";
+                    overflow: "auto";
+                    scrollbarWidth: "none";
+                    rounded: number;
+                    top: number;
+                };
+            };
+        };
+    };
     animate: {
         false: {
             wrapper: {

package/dist/types/recipes/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/recipes/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6GhB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/recipes/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6HhB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC"}

package/dist/types/recipes/overlay.d.ts

@@ -1,5 +1,12 @@
 import { type RecipeVariantProps } from '@styled/css';
 export declare const overlay: import("../../styled-system/types").SlotRecipeRuntimeFn<"bg" | "container", {
+    fullscreen: {
+        true: {
+            container: {
+                maxWidth: "none";
+            };
+        };
+    };
     animate: {
         false: {
             bg: {

package/dist/types/recipes/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/recipes/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ElB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,OAAO,CAAC,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/recipes/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqFlB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,OAAO,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magiclabs/ui-components",
-  "version": "1.23.4",
+  "version": "1.24.1",
   "description": "💅 A theme-able library of reusable UI components",
   "author": "Magic Labs <open-source@magic.link>",
   "repository": {