); ResponsiveModalHeader.displayName = "ResponsiveModalHeader"; const ResponsiveModalFooter = ({ className, ...props }: React.HTMLAttributes) => (

); ResponsiveModalFooter.displayName = "ResponsiveModalFooter"; const ResponsiveModalTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); ResponsiveModalTitle.displayName = DialogPrimitive.Title.displayName; const ResponsiveModalDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); ResponsiveModalDescription.displayName = DialogPrimitive.Description.displayName; export { ResponsiveModal, ResponsiveModalPortal, ResponsiveModalOverlay, ResponsiveModalTrigger, ResponsiveModalClose, ResponsiveModalContent, ResponsiveModalHeader, ResponsiveModalFooter, ResponsiveModalTitle, ResponsiveModalDescription, }; `,__src__:"src/registry/default/extension/responsive-modal.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@radix-ui/react-dialog"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { cva, "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" VariantProps } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "class-variance-authority"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { X } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "lucide-react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/lib/utils"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ResponsiveModal"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive.Root;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ResponsiveModalTrigger"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive.Trigger;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ResponsiveModalClose"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive.Close;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ResponsiveModalPortal"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive.Portal;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ResponsiveModalOverlay"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"<"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.ElementRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:""}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.ComponentPropsWithoutRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"DialogPrimitive.Overlay"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"));"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ResponsiveModalOverlay.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive.Overlay.displayName;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ResponsiveModalVariants"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" cva"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-y-auto"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "lg:left-[50%] lg:top-[50%] lg:grid lg:w-full lg:max-w-lg lg:translate-x-[-50%] lg:translate-y-[-50%] lg:border lg:duration-200 lg:data-[state=open]:animate-in lg:data-[state=closed]:animate-out lg:data-[state=closed]:fade-out-0 lg:data-[state=open]:fade-in-0 lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95 lg:data-[state=closed]:slide-out-to-left-1/2 lg:data-[state=closed]:slide-out-to-top-[48%] lg:data-[state=open]:slide-in-from-left-1/2 lg:data-[state=open]:slide-in-from-top-[48%] lg:rounded-xl"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ),"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" variants: {"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" side: {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" top: "}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"inset-x-0 top-0 border-b rounded-b-xl max-h-[90%] lg:h-fit data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" bottom:"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "inset-x-0 bottom-0 border-t lg:h-fit max-h-[90%] rounded-t-xl data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" left: "}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"inset-y-0 left-0 h-full lg:h-fit w-3/4 border-r rounded-r-xl data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" right:"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "inset-y-0 right-0 h-full lg:h-fit w-3/4 border-l rounded-l-xl data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" defaultVariants: {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" side: "}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"bottom"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" ResponsiveModalContentProps"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"ComponentPropsWithoutRef"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive.Content>,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" VariantProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalVariants> {}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ResponsiveModalContent"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"<"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.ElementRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:""}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalContentProps"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "bottom"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ResponsiveModalPortal"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ResponsiveModalOverlay"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"DialogPrimitive.Content"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"ResponsiveModalVariants"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"({ side }), className)"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ResponsiveModalClose"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"X"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"sr-only"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">Close"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"));"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ResponsiveModalContent.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive.Content.displayName;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" ResponsiveModalHeader"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"HTMLAttributes"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"HTMLDivElement"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">) "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "flex flex-col space-y-2 text-center sm:text-left"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ResponsiveModalHeader.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "ResponsiveModalHeader"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" ResponsiveModalFooter"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"HTMLAttributes"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"HTMLDivElement"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">) "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ResponsiveModalFooter.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "ResponsiveModalFooter"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ResponsiveModalTitle"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"<"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.ElementRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:""}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.ComponentPropsWithoutRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"DialogPrimitive.Title"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"text-lg font-semibold text-foreground"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", className)"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"));"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ResponsiveModalTitle.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive.Title.displayName;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ResponsiveModalDescription"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"<"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.ElementRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:""}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.ComponentPropsWithoutRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"DialogPrimitive.Description"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"text-sm text-muted-foreground"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", className)"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"));"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ResponsiveModalDescription.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" DialogPrimitive.Description.displayName;"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModal,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalPortal,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalOverlay,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalTrigger,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalClose,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalContent,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalHeader,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalFooter,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalTitle,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalDescription,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})})]})})})}),(0,n.jsx)(o,{children:"Update the import paths to match your project setup."})]})}),(0,n.jsxs)(t,{value:"cli",children:[(0,n.jsx)(o,{children:"Run the following command "}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-dimmed",__rawString__:`npx @shadext/cli add responsive-modal `,__npmCommand__:`npx @shadext/cli add responsive-modal `,__yarnCommand__:`npx @shadext/cli add responsive-modal `,__pnpmCommand__:`pnpm dlx @shadext/cli add responsive-modal `,__bunCommand__:`bunx --bun @shadext/cli add responsive-modal `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" @shadext/cli"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" responsive-modal"})]})})})})]})]}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.h3,{id:"side",children:"Side"}),` `,(0,n.jsx)(s,{name:"responsive-modal-side",children:(0,n.jsx)(e.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React from "react"; import { ResponsiveModal, ResponsiveModalContent, ResponsiveModalDescription, ResponsiveModalHeader, ResponsiveModalTitle, ResponsiveModalTrigger, } from "@/components/ui/extension/responsive-modal"; import { Button } from "@/components/ui/button"; type Side = "top" | "bottom" | "left" | "right"; const ResponsiveModalSide = () => { return (

); }; const Modal = ({ side }: { side: Side }) => { return ( This dialog will popup from {side} on mobile. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ); }; export ResponsiveModalSide; `,__src__:"src/registry/default/example/extra-new/responsive-modal/usage/responsive-modal-side.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModal,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalContent,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalDescription,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalHeader,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalTitle,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalTrigger,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/responsive-modal"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { Button } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/button"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" Side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "top"'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "bottom"'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "left"'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "right"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" ResponsiveModalSide"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"space-y-3"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"space-x-3"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Modal"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"top"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Modal"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"bottom"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"space-x-3"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Modal"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"left"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Modal"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"right"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" Modal"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"side"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" Side"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }) "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ResponsiveModal"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ResponsiveModalTrigger"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" asChild"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"outline"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ResponsiveModalContent"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ResponsiveModalHeader"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ResponsiveModalTitle"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" This dialog will popup from "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"side"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" on mobile."})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ResponsiveModalDescription"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" Lorem Ipsum is simply dummy text of the printing and typesetting"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" industry. Lorem Ipsum has been the industry's standard dummy text"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ever since the 1500s, when an unknown printer took a galley of type"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" and scrambled it to make a type specimen book. It has survived not"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" only five centuries, but also the leap into electronic typesetting,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" remaining essentially unchanged. It was popularised in the 1960s"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" with the release of Letraset sheets containing Lorem Ipsum passages,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" and more recently with desktop publishing software like Aldus"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" dummy text of the printing and typesetting industry. Lorem Ipsum has"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" been the industry's standard dummy text ever since the 1500s, when"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" an unknown printer took a galley of type and scrambled it to make a"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" type specimen book. It has survived not only five centuries, but"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" also the leap into electronic typesetting, remaining essentially"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" unchanged. It was popularised in the 1960s with the release of"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" Letraset sheets containing Lorem Ipsum passages, and more recently"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" with desktop publishing software like Aldus PageMaker including"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" versions of Lorem Ipsum."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ResponsiveModalSide;"})]})]})})})})]})}function C(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(m,{...l})}):m(l)}function a(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(b);})(); ;return Component;

Responsive Modal

Installation

Run the following command

Usage

Side

Table of Content

Github