@magiclabs/ui-components 1.12.0 → 1.13.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.
@@ -1,2 +1,2 @@
1
- "use strict";var i=require("react/jsx-runtime"),c=require("../../hooks/useDisplayState.js"),u=require("../../recipes/modal.js"),h=require("@styled/jsx");const d=({animate:a=!0,paddingType:s="none",isOpen:e=!0,onAnimated:r=()=>{},onClosed:t=()=>{},children:o})=>{const n=u.modal({animate:a,isOpen:e,paddingType:s}),{displayed:l,onHide:m,onShow:p}=c.useDisplayState({animate:a,show:e,onHidden:t,onShown:r});return l?i.jsx("div",{className:n.wrapper,onAnimationEnd:e?p:m,children:i.jsx(h.VStack,{alignItems:"center",className:n.content,children:o})}):null};d.displayName="Modal",exports.Modal=d;
1
+ "use strict";var i=require("react/jsx-runtime"),u=require("../../hooks/useDisplayState.js"),h=require("../../recipes/modal.js"),w=require("@styled/jsx");const r=({animate:a=!0,paddingType:s="none",isOpen:e=!0,onAnimated:d=()=>{},onClosed:o=()=>{},showBorder:t=!0,children:l})=>{const n=h.modal({animate:a,isOpen:e,paddingType:s,showBorder:t}),{displayed:m,onHide:c,onShow:p}=u.useDisplayState({animate:a,show:e,onHidden:o,onShown:d});return m?i.jsx("div",{className:n.wrapper,onAnimationEnd:e?p:c,children:i.jsx(w.VStack,{alignItems:"center",className:n.content,children:l})}):null};r.displayName="Modal",exports.Modal=r;
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}\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType });\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","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"yJAYO,MAAMA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,GACpB,SAAAC,EAAW,OACX,SAAAC,CAAQ,IACO,CACf,MAAMC,EAAUC,EAAAA,MAAM,CAAE,QAAAP,EAAS,OAAAE,EAAQ,YAAAD,CAAa,CAAA,EAChD,CAAE,UAAAO,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAAX,EACA,KAAME,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKK,EAKHI,MAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBJ,EAASQ,EAASD,EAAM,SACvEG,EAAAA,IAACC,EAAAA,OAAM,CAAC,WAAW,SAAS,UAAWP,EAAQ,QAAO,SACnDD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAN,EAAM,YAAc"}
1
+ {"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n animate?: boolean;\n paddingType?: 'none' | 'sm' | 'md' | 'lg';\n isOpen?: boolean;\n onAnimated?: () => void;\n onClosed?: () => void;\n showBorder?: boolean;\n}\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n showBorder = true,\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType, showBorder });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: isOpen,\n onHidden: onClosed,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n return (\n <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n <VStack alignItems=\"center\" className={classes.content}>\n {children}\n </VStack>\n </div>\n );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","isOpen","onAnimated","onClosed","showBorder","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"yJAaa,MAAAA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,CAAA,EACpB,SAAAC,EAAW,IAAK,GAChB,WAAAC,EAAa,GACb,SAAAC,CAAQ,IACO,CACf,MAAMC,EAAUC,QAAM,CAAE,QAAAR,EAAS,OAAAE,EAAQ,YAAAD,EAAa,WAAAI,CAAU,CAAE,EAC5D,CAAE,UAAAI,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAAZ,EACA,KAAME,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKM,EAKHI,EAAAA,IAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBL,EAASS,EAASD,EAAM,SACvEG,EAAAA,IAACC,EAAAA,OAAM,CAAC,WAAW,SAAS,UAAWP,EAAQ,QAAO,SACnDD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAP,EAAM,YAAc"}
@@ -1,2 +1,2 @@
1
- "use strict";var a=require("@styled/css");const e=a.sva({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"hidden","@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary",boxShadow:"none"}}}},variants:{animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});exports.modal=e;
1
+ "use strict";var a=require("@styled/css");const e=a.sva({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"hidden","@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}},variants:{animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});exports.modal=e;
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: 'hidden',\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 borderWidth: 1,\n borderBlock: 'solid',\n borderColor: 'neutral.secondary',\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 },\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":"gDAEaA,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,SAEV,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,oBACb,UAAW,MACZ,CACF,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,EAAI,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,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
+ {"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: 'hidden',\n\n '@media (min-width: 48rem)': {\n top: 12,\n mx: 'auto',\n width: '25rem',\n height: 'fit-content',\n boxShadow: '0px 12px 56px {colors.ink.70/15}',\n borderRadius: 'container',\n _dark: {\n boxShadow: 'none',\n },\n },\n },\n },\n variants: {\n animate: {\n false: {\n wrapper: {\n animationName: 'none',\n scale: 1,\n },\n },\n },\n isOpen: { true: {} },\n paddingType: {\n none: {\n wrapper: {\n p: 0,\n },\n },\n sm: {\n wrapper: {\n p: 2,\n pb: 0,\n },\n },\n md: {\n wrapper: {\n p: 4,\n pb: 0,\n },\n },\n lg: {\n wrapper: {\n p: 8,\n pb: 0,\n },\n },\n },\n showBorder: {\n true: {\n wrapper: {\n '@media (min-width: 48rem)': {\n _dark: {\n borderWidth: 1,\n borderBlock: 'solid',\n borderColor: 'neutral.secondary',\n },\n },\n },\n },\n },\n },\n compoundVariants: [\n {\n animate: true,\n isOpen: true,\n css: {\n wrapper: {\n animationFillMode: 'forwards',\n animationName: 'scaleIn',\n animationDuration: '250ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n {\n animate: true,\n isOpen: false,\n css: {\n wrapper: {\n animationFillMode: 'forwards',\n animationName: 'scaleOut',\n animationDuration: '150ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n ],\n defaultVariants: {\n animate: true,\n isOpen: true,\n paddingType: 'none',\n },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"0CAEO,MAAMA,EAAQC,EAAAA,IAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,SAEV,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}
@@ -1,2 +1,2 @@
1
- import{jsx as a}from"react/jsx-runtime";import{useDisplayState as c}from"../../hooks/useDisplayState.js";import{modal as h}from"../../recipes/modal.js";import{VStack as y}from"@styled/jsx";const i=({animate:e=!0,paddingType:d="none",isOpen:n=!0,onAnimated:t=()=>{},onClosed:m=()=>{},children:r})=>{const o=h({animate:e,isOpen:n,paddingType:d}),{displayed:p,onHide:s,onShow:l}=c({animate:e,show:n,onHidden:m,onShown:t});return p?a("div",{className:o.wrapper,onAnimationEnd:n?l:s,children:a(y,{alignItems:"center",className:o.content,children:r})}):null};i.displayName="Modal";export{i as Modal};
1
+ import{jsx as a}from"react/jsx-runtime";import{useDisplayState as h}from"../../hooks/useDisplayState.js";import{modal as w}from"../../recipes/modal.js";import{VStack as y}from"@styled/jsx";const i=({animate:e=!0,paddingType:d="none",isOpen:n=!0,onAnimated:r=()=>{},onClosed:t=()=>{},showBorder:m=!0,children:s})=>{const o=w({animate:e,isOpen:n,paddingType:d,showBorder:m}),{displayed:p,onHide:l,onShow:c}=h({animate:e,show:n,onHidden:t,onShown:r});return p?a("div",{className:o.wrapper,onAnimationEnd:n?c:l,children:a(y,{alignItems:"center",className:o.content,children:s})}):null};i.displayName="Modal";export{i as Modal};
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}\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType });\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","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"6LAYO,MAAMA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,GACpB,SAAAC,EAAW,OACX,SAAAC,CAAQ,IACO,CACf,MAAMC,EAAUC,EAAM,CAAE,QAAAP,EAAS,OAAAE,EAAQ,YAAAD,CAAa,CAAA,EAChD,CAAE,UAAAO,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAAX,EACA,KAAME,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKK,EAKHI,EAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBJ,EAASQ,EAASD,EAAM,SACvEG,EAACC,EAAM,CAAC,WAAW,SAAS,UAAWP,EAAQ,QAAO,SACnDD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAN,EAAM,YAAc"}
1
+ {"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n animate?: boolean;\n paddingType?: 'none' | 'sm' | 'md' | 'lg';\n isOpen?: boolean;\n onAnimated?: () => void;\n onClosed?: () => void;\n showBorder?: boolean;\n}\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n showBorder = true,\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType, showBorder });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: isOpen,\n onHidden: onClosed,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n return (\n <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n <VStack alignItems=\"center\" className={classes.content}>\n {children}\n </VStack>\n </div>\n );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","isOpen","onAnimated","onClosed","showBorder","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"6LAaa,MAAAA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,CAAA,EACpB,SAAAC,EAAW,IAAK,GAChB,WAAAC,EAAa,GACb,SAAAC,CAAQ,IACO,CACf,MAAMC,EAAUC,EAAM,CAAE,QAAAR,EAAS,OAAAE,EAAQ,YAAAD,EAAa,WAAAI,CAAU,CAAE,EAC5D,CAAE,UAAAI,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAAZ,EACA,KAAME,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKM,EAKHI,EAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBL,EAASS,EAASD,EAAM,SACvEG,EAACC,EAAM,CAAC,WAAW,SAAS,UAAWP,EAAQ,QAAO,SACnDD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAP,EAAM,YAAc"}
@@ -1,2 +1,2 @@
1
- import{sva as a}from"@styled/css";const e=a({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"hidden","@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary",boxShadow:"none"}}}},variants:{animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});export{e as modal};
1
+ import{sva as a}from"@styled/css";const e=a({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"hidden","@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}},variants:{animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});export{e as modal};
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: 'hidden',\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 borderWidth: 1,\n borderBlock: 'solid',\n borderColor: 'neutral.secondary',\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 },\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":"wCAEaA,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,SAEV,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,oBACb,UAAW,MACZ,CACF,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,EAAI,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,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
+ {"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: 'hidden',\n\n '@media (min-width: 48rem)': {\n top: 12,\n mx: 'auto',\n width: '25rem',\n height: 'fit-content',\n boxShadow: '0px 12px 56px {colors.ink.70/15}',\n borderRadius: 'container',\n _dark: {\n boxShadow: 'none',\n },\n },\n },\n },\n variants: {\n animate: {\n false: {\n wrapper: {\n animationName: 'none',\n scale: 1,\n },\n },\n },\n isOpen: { true: {} },\n paddingType: {\n none: {\n wrapper: {\n p: 0,\n },\n },\n sm: {\n wrapper: {\n p: 2,\n pb: 0,\n },\n },\n md: {\n wrapper: {\n p: 4,\n pb: 0,\n },\n },\n lg: {\n wrapper: {\n p: 8,\n pb: 0,\n },\n },\n },\n showBorder: {\n true: {\n wrapper: {\n '@media (min-width: 48rem)': {\n _dark: {\n borderWidth: 1,\n borderBlock: 'solid',\n borderColor: 'neutral.secondary',\n },\n },\n },\n },\n },\n },\n compoundVariants: [\n {\n animate: true,\n isOpen: true,\n css: {\n wrapper: {\n animationFillMode: 'forwards',\n animationName: 'scaleIn',\n animationDuration: '250ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n {\n animate: true,\n isOpen: false,\n css: {\n wrapper: {\n animationFillMode: 'forwards',\n animationName: 'scaleOut',\n animationDuration: '150ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n ],\n defaultVariants: {\n animate: true,\n isOpen: true,\n paddingType: 'none',\n },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"kCAEO,MAAMA,EAAQC,EAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,SAEV,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}
@@ -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.2s 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.2s 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","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.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","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","borderRadius]___[value:10","background]___[value:positive.lightest","background]___[value:negative.lightest","background]___[value:warning.lightest","background]___[value:surface.secondary","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","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","borderRadius]___[value:2","height]___[value:full","background]___[value:surface.primary","overflow]___[value:hidden","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)","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","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","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","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","flexDirection]___[value:column","gap]___[value:2","textAlign]___[value:left","textAlign]___[value:right","opacity]___[value:0.3","fontWeight]___[value:medium","fontSize]___[value:xl","transition]___[value:all linear 120ms","width]___[value:100%","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","backgroundColor]___[value:transparent","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","outlineColor]___[value:brand.base]___[cond:_focus","outlineStyle]___[value:solid]___[cond:_focus","outlineWidth]___[value:thick]___[cond:_focus","outlineOffset]___[value:0.5]___[cond:_focus","height]___[value:10","borderColor]___[value:negative.base","paddingLeft]___[value:11","paddingRight]___[value:11","paddingLeft]___[value:9","paddingRight]___[value:9","position]___[value:absolute","top]___[value:50%","transform]___[value:translateY(-50%)","transition]___[value:opacity linear 120ms","left]___[value:3","right]___[value:3","color]___[value:negative.darker","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","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","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","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","alignItems]___[value:flex-start","gap]___[value:1.5","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","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","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingBlock]___[value:2","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))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","borderColor]___[value:neutral.primary]___[cond:_hover","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","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","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","background]___[value:neutral.quaternary","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","borderRadius]___[value:lg","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","alignItems]___[value:flex-end","minHeight]___[value:20","outlineOffset]___[value:1","strokeWidth]___[value:2.5","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","borderWidth]___[value:thick","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","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","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, width 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","height]___[value:8","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","width]___[value:4","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","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","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","cursor]___[value:default","justifyContent]___[value:space-around","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","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","color]___[value:positive.darker","color]___[value:text.tertiary","fontVariant]___[value:no-contextual","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:1","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.2s 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.2s 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","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.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","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","borderRadius]___[value:10","background]___[value:positive.lightest","background]___[value:negative.lightest","background]___[value:warning.lightest","background]___[value:surface.secondary","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","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","borderRadius]___[value:2","height]___[value:full","background]___[value:surface.primary","overflow]___[value:hidden","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","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","flexDirection]___[value:column","gap]___[value:2","textAlign]___[value:left","textAlign]___[value:right","opacity]___[value:0.3","fontWeight]___[value:medium","fontSize]___[value:xl","transition]___[value:all linear 120ms","width]___[value:100%","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","backgroundColor]___[value:transparent","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","outlineColor]___[value:brand.base]___[cond:_focus","outlineStyle]___[value:solid]___[cond:_focus","outlineWidth]___[value:thick]___[cond:_focus","outlineOffset]___[value:0.5]___[cond:_focus","height]___[value:10","borderColor]___[value:negative.base","paddingLeft]___[value:11","paddingRight]___[value:11","paddingLeft]___[value:9","paddingRight]___[value:9","position]___[value:absolute","top]___[value:50%","transform]___[value:translateY(-50%)","transition]___[value:opacity linear 120ms","left]___[value:3","right]___[value:3","color]___[value:negative.darker","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","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","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","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","alignItems]___[value:flex-start","gap]___[value:1.5","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","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","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingBlock]___[value:2","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))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","borderColor]___[value:neutral.primary]___[cond:_hover","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","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","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","background]___[value:neutral.quaternary","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","borderRadius]___[value:lg","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","alignItems]___[value:flex-end","minHeight]___[value:20","outlineOffset]___[value:1","strokeWidth]___[value:2.5","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","borderWidth]___[value:thick","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","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","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, width 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","height]___[value:8","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","width]___[value:4","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","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","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","cursor]___[value:default","justifyContent]___[value:space-around","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","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","color]___[value:positive.darker","color]___[value:text.tertiary","fontVariant]___[value:no-contextual","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:1","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
@@ -5,9 +5,10 @@ export interface ModalProps extends ComponentProps<'div'> {
5
5
  isOpen?: boolean;
6
6
  onAnimated?: () => void;
7
7
  onClosed?: () => void;
8
+ showBorder?: boolean;
8
9
  }
9
10
  export declare const Modal: {
10
- ({ animate, paddingType, isOpen, onAnimated, onClosed, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
11
+ ({ animate, paddingType, isOpen, onAnimated, onClosed, showBorder, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
11
12
  displayName: string;
12
13
  };
13
14
  //# 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;CACvB;AAED,eAAO,MAAM,KAAK;wEAOf,UAAU;;CAoBZ,CAAC"}
1
+ {"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK;oFAQf,UAAU;;CAoBZ,CAAC"}
@@ -36,6 +36,19 @@ export declare const modal: import("../../styled-system/types").SlotRecipeRuntim
36
36
  };
37
37
  };
38
38
  };
39
+ showBorder: {
40
+ true: {
41
+ wrapper: {
42
+ '@media (min-width: 48rem)': {
43
+ _dark: {
44
+ borderWidth: number;
45
+ borderBlock: "solid";
46
+ borderColor: "neutral.secondary";
47
+ };
48
+ };
49
+ };
50
+ };
51
+ };
39
52
  }>;
40
53
  export type ModalVariants = RecipeVariantProps<typeof modal>;
41
54
  //# sourceMappingURL=modal.d.ts.map
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGhB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GhB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magiclabs/ui-components",
3
- "version": "1.12.0",
3
+ "version": "1.13.0",
4
4
  "description": "💅 A theme-able library of reusable UI components",
5
5
  "author": "Magic Labs <open-source@magic.link>",
6
6
  "repository": {