@magiclabs/ui-components 1.23.3 → 1.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/containers/modal.js +1 -1
- package/dist/cjs/components/containers/modal.js.map +1 -1
- package/dist/cjs/components/containers/overlay.js +1 -1
- package/dist/cjs/components/containers/overlay.js.map +1 -1
- package/dist/cjs/components/layouts/page.js +1 -1
- package/dist/cjs/components/layouts/page.js.map +1 -1
- package/dist/cjs/recipes/modal.js +1 -1
- package/dist/cjs/recipes/modal.js.map +1 -1
- package/dist/cjs/recipes/overlay.js +1 -1
- package/dist/cjs/recipes/overlay.js.map +1 -1
- package/dist/es/components/containers/modal.js +1 -1
- package/dist/es/components/containers/modal.js.map +1 -1
- package/dist/es/components/containers/overlay.js +1 -1
- package/dist/es/components/containers/overlay.js.map +1 -1
- package/dist/es/components/layouts/page.js +1 -1
- package/dist/es/components/layouts/page.js.map +1 -1
- package/dist/es/recipes/modal.js +1 -1
- package/dist/es/recipes/modal.js.map +1 -1
- package/dist/es/recipes/overlay.js +1 -1
- package/dist/es/recipes/overlay.js.map +1 -1
- package/dist/panda.buildinfo.json +1 -1
- package/dist/types/components/containers/modal.d.ts +2 -1
- package/dist/types/components/containers/modal.d.ts.map +1 -1
- package/dist/types/components/containers/overlay.d.ts +2 -1
- package/dist/types/components/containers/overlay.d.ts.map +1 -1
- package/dist/types/components/layouts/page.d.ts.map +1 -1
- package/dist/types/recipes/modal.d.ts +16 -0
- package/dist/types/recipes/modal.d.ts.map +1 -1
- package/dist/types/recipes/overlay.d.ts +7 -0
- package/dist/types/recipes/overlay.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var i=require("react/jsx-runtime"),
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +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":"
|
|
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 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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var i=require("react/jsx-runtime"),
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=overlay.js.map
|
|
@@ -1 +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":"
|
|
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 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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var r=require("react/jsx-runtime"),
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=page.js.map
|
|
@@ -1 +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
|
|
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, 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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +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":"
|
|
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 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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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;
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=overlay.js.map
|
|
@@ -1 +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":"
|
|
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 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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as a}from"react/jsx-runtime";import{useDisplayState as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +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":"
|
|
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 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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=overlay.js.map
|
|
@@ -1 +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":"
|
|
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 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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i,jsxs as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=page.js.map
|
|
@@ -1 +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
|
|
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, 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/recipes/modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{sva as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +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":"
|
|
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 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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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};
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=overlay.js.map
|
|
@@ -1 +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":"
|
|
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 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"}
|
|
@@ -1 +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":{}}}
|
|
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","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":{}}}
|
|
@@ -6,9 +6,10 @@ export interface ModalProps extends ComponentProps<'div'> {
|
|
|
6
6
|
onAnimated?: () => void;
|
|
7
7
|
onClosed?: () => void;
|
|
8
8
|
showBorder?: boolean;
|
|
9
|
+
fullscreen?: boolean;
|
|
9
10
|
}
|
|
10
11
|
export declare const Modal: {
|
|
11
|
-
({ animate, paddingType, isOpen, onAnimated, onClosed, showBorder, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
|
|
12
|
+
({ animate, paddingType, isOpen, onAnimated, onClosed, showBorder, fullscreen, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
|
|
12
13
|
displayName: string;
|
|
13
14
|
};
|
|
14
15
|
//# sourceMappingURL=modal.d.ts.map
|
|
@@ -1 +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;
|
|
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;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK;gGASf,UAAU;;CAoBZ,CAAC"}
|
|
@@ -3,11 +3,12 @@ export interface OverlayProps extends ComponentProps<'div'> {
|
|
|
3
3
|
animate?: boolean;
|
|
4
4
|
backgroundType?: 'none' | 'blurred' | 'transparent' | 'solid';
|
|
5
5
|
hide?: boolean;
|
|
6
|
+
fullscreen?: boolean;
|
|
6
7
|
onAnimated?: () => void;
|
|
7
8
|
onHidden?: () => void;
|
|
8
9
|
}
|
|
9
10
|
export declare const Overlay: {
|
|
10
|
-
({ animate, backgroundType, hide, onAnimated, onHidden, children, }: OverlayProps): import("react/jsx-runtime").JSX.Element | null;
|
|
11
|
+
({ animate, backgroundType, hide, fullscreen, onAnimated, onHidden, children, }: OverlayProps): import("react/jsx-runtime").JSX.Element | null;
|
|
11
12
|
displayName: string;
|
|
12
13
|
};
|
|
13
14
|
//# sourceMappingURL=overlay.d.ts.map
|
|
@@ -1 +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;
|
|
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,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"}
|
|
@@ -1 +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;
|
|
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;AA0CD,eAAO,MAAM,IAAI,qCAtByC,SAAS;;;;;;CA4BjE,CAAC"}
|
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
import { type RecipeVariantProps } from '@styled/css';
|
|
2
2
|
export declare const modal: import("../../styled-system/types").SlotRecipeRuntimeFn<"content" | "wrapper", {
|
|
3
|
+
fullscreen: {
|
|
4
|
+
true: {
|
|
5
|
+
wrapper: {
|
|
6
|
+
'@media (min-width: 48rem)': {
|
|
7
|
+
height: "100vh";
|
|
8
|
+
width: "100vw";
|
|
9
|
+
bg: "surface.primary";
|
|
10
|
+
position: "relative";
|
|
11
|
+
overflow: "auto";
|
|
12
|
+
scrollbarWidth: "none";
|
|
13
|
+
rounded: number;
|
|
14
|
+
top: number;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
3
19
|
animate: {
|
|
4
20
|
false: {
|
|
5
21
|
wrapper: {
|
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6HhB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC"}
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { type RecipeVariantProps } from '@styled/css';
|
|
2
2
|
export declare const overlay: import("../../styled-system/types").SlotRecipeRuntimeFn<"bg" | "container", {
|
|
3
|
+
fullscreen: {
|
|
4
|
+
true: {
|
|
5
|
+
container: {
|
|
6
|
+
maxWidth: "none";
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
};
|
|
3
10
|
animate: {
|
|
4
11
|
false: {
|
|
5
12
|
bg: {
|
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqFlB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,OAAO,CAAC,CAAC"}
|