@telegraph/modal 0.0.4 → 0.0.5
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/CHANGELOG.md +6 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/css/default.css +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @telegraph/modal
|
|
2
2
|
|
|
3
|
+
## 0.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`eef3c48`](https://github.com/knocklabs/telegraph/commit/eef3c48dccd0ebcbe00227639216ceabb7424830) Thanks [@kylemcd](https://github.com/kylemcd)! - make modal fixed position instead of absolute
|
|
8
|
+
|
|
3
9
|
## 0.0.4
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("@radix-ui/react-dialog"),j=require("@radix-ui/react-visually-hidden"),m=require("@telegraph/button"),g=require("@telegraph/icon"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("@radix-ui/react-dialog"),j=require("@radix-ui/react-visually-hidden"),m=require("@telegraph/button"),g=require("@telegraph/icon"),a=require("@telegraph/layout"),h=require("clsx"),l=require("framer-motion"),n=require("react");function u(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,i.get?i:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const c=u(b),w=u(j),k=n.forwardRef(({defaultOpen:t,open:o,onOpenChange:e,a11yTitle:i,a11yDescription:d,className:x,children:p,...s},y)=>r.jsxs(c.Root,{open:o,onOpenChange:e,defaultOpen:t,children:[r.jsxs(w.Root,{children:[r.jsx(c.Title,{children:i}),d&&r.jsx(c.Description,{children:d})]}),r.jsx(l.AnimatePresence,{children:o&&r.jsxs(r.Fragment,{children:[r.jsx(c.Overlay,{asChild:!0,children:r.jsx(a.Box,{as:l.motion.div,onClick:()=>e==null?void 0:e(!1),initial:{backdropFilter:"blur(0px)",opacity:0},animate:{backdropFilter:"blur(4px)",opacity:1},exit:{backdropFilter:"blur(0px)",opacity:0},transition:{duration:.3,bounce:0,type:"spring"},className:"fixed inset-0 bg-alpha-black-4 z-overlay"})}),r.jsx(a.Stack,{className:h("fixed z-modal top-0 left-1/2 -translate-x-1/2","max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1",x),direction:"column",as:l.motion.div,my:"16",initial:{scale:.8,opacity:0,y:-20,x:"-50%"},animate:{scale:1,opacity:1,y:0,x:"-50%"},exit:{scale:.8,opacity:0,y:-20,x:"-50%"},transition:{duration:.2,bounce:0,type:"spring"},maxW:s.maxW??"140",w:s.w??"full",bg:"surface-1",border:!0,rounded:"4",...s,ref:y,children:p})]})})]})),R=n.forwardRef(({children:t,...o},e)=>r.jsx(c.Content,{ref:e,...o,asChild:!0,children:r.jsx(a.Stack,{direction:"column",children:t})})),q=n.forwardRef(({size:t="1",variant:o="ghost",...e},i)=>r.jsx(c.Close,{asChild:!0,children:r.jsx(m.Button,{icon:{icon:g.Lucide.X,alt:"Close Modal"},variant:o,size:t,...e,ref:i})})),S=n.forwardRef(({children:t,...o},e)=>r.jsx(a.Stack,{direction:"column",px:"6",py:"4",...o,ref:e,children:t})),v=n.forwardRef(({children:t,...o},e)=>r.jsx(a.Stack,{direction:"row",justify:"space-between",align:"center",px:"6",py:"4",borderBottom:!0,...o,ref:e,children:t})),M=n.forwardRef(({children:t,...o},e)=>r.jsx(a.Stack,{direction:"row",align:"center",justify:"end",gap:"2",px:"6",py:"4",borderTop:!0,...o,ref:e,children:t})),f={};Object.assign(f,{Root:k,Content:R,Close:q,Body:S,Header:v,Footer:M});exports.Modal=f;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button } from \"@telegraph/button\";\nimport { Lucide } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport clsx from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype RootProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n \"modal\"\n> &\n React.ComponentPropsWithoutRef<typeof Stack> & {\n a11yTitle: string;\n a11yDescription?: string;\n };\n\ntype RootRef = HTMLDivElement;\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n (\n {\n defaultOpen,\n open,\n onOpenChange,\n a11yTitle,\n a11yDescription,\n className,\n children,\n ...props\n },\n forwardedRef,\n ) => {\n return (\n <Dialog.Root\n open={open}\n onOpenChange={onOpenChange}\n defaultOpen={defaultOpen}\n >\n <VisuallyHidden.Root>\n <Dialog.Title>{a11yTitle}</Dialog.Title>\n {a11yDescription && (\n <Dialog.Description>{a11yDescription}</Dialog.Description>\n )}\n </VisuallyHidden.Root>\n <AnimatePresence>\n {open && (\n <>\n <Dialog.Overlay asChild>\n <Box\n as={motion.div}\n onClick={() => onOpenChange?.(false)}\n initial={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n animate={{ backdropFilter: \"blur(4px)\", opacity: 1 }}\n exit={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n transition={{ duration: 0.3, bounce: 0, type: \"spring\" }}\n className=\"fixed inset-0 bg-alpha-black-4 z-overlay\"\n />\n </Dialog.Overlay>\n <Stack\n className={clsx(\n \"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button } from \"@telegraph/button\";\nimport { Lucide } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport clsx from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype RootProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n \"modal\"\n> &\n React.ComponentPropsWithoutRef<typeof Stack> & {\n a11yTitle: string;\n a11yDescription?: string;\n };\n\ntype RootRef = HTMLDivElement;\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n (\n {\n defaultOpen,\n open,\n onOpenChange,\n a11yTitle,\n a11yDescription,\n className,\n children,\n ...props\n },\n forwardedRef,\n ) => {\n return (\n <Dialog.Root\n open={open}\n onOpenChange={onOpenChange}\n defaultOpen={defaultOpen}\n >\n <VisuallyHidden.Root>\n <Dialog.Title>{a11yTitle}</Dialog.Title>\n {a11yDescription && (\n <Dialog.Description>{a11yDescription}</Dialog.Description>\n )}\n </VisuallyHidden.Root>\n <AnimatePresence>\n {open && (\n <>\n <Dialog.Overlay asChild>\n <Box\n as={motion.div}\n onClick={() => onOpenChange?.(false)}\n initial={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n animate={{ backdropFilter: \"blur(4px)\", opacity: 1 }}\n exit={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n transition={{ duration: 0.3, bounce: 0, type: \"spring\" }}\n className=\"fixed inset-0 bg-alpha-black-4 z-overlay\"\n />\n </Dialog.Overlay>\n <Stack\n className={clsx(\n \"fixed z-modal top-0 left-1/2 -translate-x-1/2\",\n \"max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1\",\n className,\n )}\n direction=\"column\"\n as={motion.div}\n my=\"16\"\n initial={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n animate={{ scale: 1, opacity: 1, y: 0, x: \"-50%\" }}\n exit={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n transition={{ duration: 0.2, bounce: 0, type: \"spring\" }}\n maxW={props.maxW ?? \"140\"}\n w={props.w ?? \"full\"}\n bg=\"surface-1\"\n border\n rounded=\"4\"\n {...props}\n ref={forwardedRef}\n >\n {children}\n </Stack>\n </>\n )}\n </AnimatePresence>\n </Dialog.Root>\n );\n },\n);\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content>;\ntype ContentRef = React.ElementRef<typeof Dialog.Content>;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n ({ children, ...props }, forwardedRef) => {\n return (\n <Dialog.Content ref={forwardedRef} {...props} asChild>\n <Stack direction=\"column\">{children}</Stack>\n </Dialog.Content>\n );\n },\n);\n\ntype CloseProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Close>,\n \"color\"\n> &\n React.ComponentPropsWithoutRef<typeof Button>;\ntype CloseRef = React.ElementRef<typeof Button>;\n\nconst Close = React.forwardRef<CloseRef, CloseProps>(\n ({ size = \"1\", variant = \"ghost\", ...props }, forwardedRef) => {\n return (\n <Dialog.Close asChild>\n <Button\n icon={{ icon: Lucide.X, alt: \"Close Modal\" }}\n variant={variant}\n size={size}\n {...props}\n ref={forwardedRef}\n />\n </Dialog.Close>\n );\n },\n);\n\ntype BodyProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype BodyRef = React.ElementRef<typeof Stack>;\n\nconst Body: React.FC<BodyProps> = React.forwardRef<BodyRef, BodyProps>(\n ({ children, ...props }, forwardedRef) => {\n return (\n <Stack direction=\"column\" px=\"6\" py=\"4\" {...props} ref={forwardedRef}>\n {children}\n </Stack>\n );\n },\n);\n\ntype HeaderProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype HeaderRef = React.ElementRef<typeof Stack>;\n\nconst Header: React.FC<HeaderProps> = React.forwardRef<HeaderRef, HeaderProps>(\n ({ children, ...props }, forwardedRef) => {\n return (\n <Stack\n direction=\"row\"\n justify=\"space-between\"\n align=\"center\"\n px=\"6\"\n py=\"4\"\n borderBottom\n {...props}\n ref={forwardedRef}\n >\n {children}\n </Stack>\n );\n },\n);\n\ntype FooterProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype FooterRef = React.ElementRef<typeof Stack>;\n\nconst Footer: React.FC<FooterProps> = React.forwardRef<FooterRef, FooterProps>(\n ({ children, ...props }, forwardedRef) => {\n return (\n <Stack\n direction=\"row\"\n align=\"center\"\n justify=\"end\"\n gap=\"2\"\n px=\"6\"\n py=\"4\"\n borderTop\n {...props}\n ref={forwardedRef}\n >\n {children}\n </Stack>\n );\n },\n);\n\nconst Modal = {} as {\n Root: typeof Root;\n Content: typeof Content;\n Close: typeof Close;\n Body: typeof Body;\n Header: typeof Header;\n Footer: typeof Footer;\n};\n\nObject.assign(Modal, {\n Root,\n Content,\n Close,\n Body,\n Header,\n Footer,\n});\n\nexport { Modal };\n"],"names":["Root","React","defaultOpen","open","onOpenChange","a11yTitle","a11yDescription","className","children","props","forwardedRef","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Fragment","Box","motion","Stack","clsx","Content","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}
|
package/dist/css/default.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.tgph :is(.fixed){position:fixed}.tgph :is(.
|
|
1
|
+
.tgph :is(.fixed){position:fixed}.tgph :is(.inset-0){inset:var(--tgph-spacing-0)}.tgph :is(.left-1\/2){left:50%}.tgph :is(.top-0){top:var(--tgph-spacing-0)}.tgph :is(.z-modal){z-index:var(--tgph-zIndex-modal)}.tgph :is(.z-overlay){z-index:var(--tgph-zIndex-overlay)}.tgph :is(.max-h-\[calc\(100vh-var\(--tgph-spacing-32\)\)\]){max-height:calc(100vh - var(--tgph-spacing-32))}.tgph :is(.-translate-x-1\/2){--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tgph :is(.border){border-width:1px}.tgph :is(.bg-alpha-black-4){background-color:var(--tgph-alpha-black-4)}.tgph :is(.shadow-1){--tw-shadow: var(--tgph-shadow-1);--tw-shadow-colored: var(--tgph-shadow-1);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph :is(.outline){outline-style:solid}.tgph :is(.blur){--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tgph :is(.transition){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
|
package/dist/esm/index.mjs
CHANGED
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button } from \"@telegraph/button\";\nimport { Lucide } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport clsx from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype RootProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n \"modal\"\n> &\n React.ComponentPropsWithoutRef<typeof Stack> & {\n a11yTitle: string;\n a11yDescription?: string;\n };\n\ntype RootRef = HTMLDivElement;\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n (\n {\n defaultOpen,\n open,\n onOpenChange,\n a11yTitle,\n a11yDescription,\n className,\n children,\n ...props\n },\n forwardedRef,\n ) => {\n return (\n <Dialog.Root\n open={open}\n onOpenChange={onOpenChange}\n defaultOpen={defaultOpen}\n >\n <VisuallyHidden.Root>\n <Dialog.Title>{a11yTitle}</Dialog.Title>\n {a11yDescription && (\n <Dialog.Description>{a11yDescription}</Dialog.Description>\n )}\n </VisuallyHidden.Root>\n <AnimatePresence>\n {open && (\n <>\n <Dialog.Overlay asChild>\n <Box\n as={motion.div}\n onClick={() => onOpenChange?.(false)}\n initial={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n animate={{ backdropFilter: \"blur(4px)\", opacity: 1 }}\n exit={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n transition={{ duration: 0.3, bounce: 0, type: \"spring\" }}\n className=\"fixed inset-0 bg-alpha-black-4 z-overlay\"\n />\n </Dialog.Overlay>\n <Stack\n className={clsx(\n \"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button } from \"@telegraph/button\";\nimport { Lucide } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport clsx from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype RootProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n \"modal\"\n> &\n React.ComponentPropsWithoutRef<typeof Stack> & {\n a11yTitle: string;\n a11yDescription?: string;\n };\n\ntype RootRef = HTMLDivElement;\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n (\n {\n defaultOpen,\n open,\n onOpenChange,\n a11yTitle,\n a11yDescription,\n className,\n children,\n ...props\n },\n forwardedRef,\n ) => {\n return (\n <Dialog.Root\n open={open}\n onOpenChange={onOpenChange}\n defaultOpen={defaultOpen}\n >\n <VisuallyHidden.Root>\n <Dialog.Title>{a11yTitle}</Dialog.Title>\n {a11yDescription && (\n <Dialog.Description>{a11yDescription}</Dialog.Description>\n )}\n </VisuallyHidden.Root>\n <AnimatePresence>\n {open && (\n <>\n <Dialog.Overlay asChild>\n <Box\n as={motion.div}\n onClick={() => onOpenChange?.(false)}\n initial={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n animate={{ backdropFilter: \"blur(4px)\", opacity: 1 }}\n exit={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n transition={{ duration: 0.3, bounce: 0, type: \"spring\" }}\n className=\"fixed inset-0 bg-alpha-black-4 z-overlay\"\n />\n </Dialog.Overlay>\n <Stack\n className={clsx(\n \"fixed z-modal top-0 left-1/2 -translate-x-1/2\",\n \"max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1\",\n className,\n )}\n direction=\"column\"\n as={motion.div}\n my=\"16\"\n initial={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n animate={{ scale: 1, opacity: 1, y: 0, x: \"-50%\" }}\n exit={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n transition={{ duration: 0.2, bounce: 0, type: \"spring\" }}\n maxW={props.maxW ?? \"140\"}\n w={props.w ?? \"full\"}\n bg=\"surface-1\"\n border\n rounded=\"4\"\n {...props}\n ref={forwardedRef}\n >\n {children}\n </Stack>\n </>\n )}\n </AnimatePresence>\n </Dialog.Root>\n );\n },\n);\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content>;\ntype ContentRef = React.ElementRef<typeof Dialog.Content>;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n ({ children, ...props }, forwardedRef) => {\n return (\n <Dialog.Content ref={forwardedRef} {...props} asChild>\n <Stack direction=\"column\">{children}</Stack>\n </Dialog.Content>\n );\n },\n);\n\ntype CloseProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Close>,\n \"color\"\n> &\n React.ComponentPropsWithoutRef<typeof Button>;\ntype CloseRef = React.ElementRef<typeof Button>;\n\nconst Close = React.forwardRef<CloseRef, CloseProps>(\n ({ size = \"1\", variant = \"ghost\", ...props }, forwardedRef) => {\n return (\n <Dialog.Close asChild>\n <Button\n icon={{ icon: Lucide.X, alt: \"Close Modal\" }}\n variant={variant}\n size={size}\n {...props}\n ref={forwardedRef}\n />\n </Dialog.Close>\n );\n },\n);\n\ntype BodyProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype BodyRef = React.ElementRef<typeof Stack>;\n\nconst Body: React.FC<BodyProps> = React.forwardRef<BodyRef, BodyProps>(\n ({ children, ...props }, forwardedRef) => {\n return (\n <Stack direction=\"column\" px=\"6\" py=\"4\" {...props} ref={forwardedRef}>\n {children}\n </Stack>\n );\n },\n);\n\ntype HeaderProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype HeaderRef = React.ElementRef<typeof Stack>;\n\nconst Header: React.FC<HeaderProps> = React.forwardRef<HeaderRef, HeaderProps>(\n ({ children, ...props }, forwardedRef) => {\n return (\n <Stack\n direction=\"row\"\n justify=\"space-between\"\n align=\"center\"\n px=\"6\"\n py=\"4\"\n borderBottom\n {...props}\n ref={forwardedRef}\n >\n {children}\n </Stack>\n );\n },\n);\n\ntype FooterProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype FooterRef = React.ElementRef<typeof Stack>;\n\nconst Footer: React.FC<FooterProps> = React.forwardRef<FooterRef, FooterProps>(\n ({ children, ...props }, forwardedRef) => {\n return (\n <Stack\n direction=\"row\"\n align=\"center\"\n justify=\"end\"\n gap=\"2\"\n px=\"6\"\n py=\"4\"\n borderTop\n {...props}\n ref={forwardedRef}\n >\n {children}\n </Stack>\n );\n },\n);\n\nconst Modal = {} as {\n Root: typeof Root;\n Content: typeof Content;\n Close: typeof Close;\n Body: typeof Body;\n Header: typeof Header;\n Footer: typeof Footer;\n};\n\nObject.assign(Modal, {\n Root,\n Content,\n Close,\n Body,\n Header,\n Footer,\n});\n\nexport { Modal };\n"],"names":["Root","React","defaultOpen","open","onOpenChange","a11yTitle","a11yDescription","className","children","props","forwardedRef","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Fragment","Box","motion","Stack","clsx","Content","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}
|