Book your flight

\u2708\uFE0F

Book your trip to{" "} Bali {" "} now! \u2708\uFE0F

{images.map((image, idx) => ( bali images

))}

5 connecting flights

12 hotels

69 visiting spots

Good food everyday

Open Mic

Paragliding

); } const PlaneIcon = ({ className }: { className?: string }) => { return ( ); }; const VacationIcon = ({ className }: { className?: string }) => { return ( ); }; const ElevatorIcon = ({ className }: { className?: string }) => { return ( ); }; const FoodIcon = ({ className }: { className?: string }) => { return ( ); }; const MicIcon = ({ className }: { className?: string }) => { return ( ); }; const ParachuteIcon = ({ className }: { className?: string }) => { return ( ); }; `,__rawStringJsx__:`"use client"; import React from "react"; import { Modal, ModalBody, ModalContent, ModalFooter, ModalTrigger, } from "../ui/animated-modal"; import Image from "next/image"; import { motion } from "framer-motion"; export function AnimatedModalDemo() { const images = [ "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", ]; return ( (

Book your flight

\u2708\uFE0F

Book your trip to{" "} Bali {" "} now! \u2708\uFE0F

{images.map((image, idx) => ( bali images

))}

5 connecting flights

12 hotels

69 visiting spots

Good food everyday

Open Mic

Paragliding

) ); } const PlaneIcon = ({ className }) => { return ( () ); }; const VacationIcon = ({ className }) => { return ( () ); }; const ElevatorIcon = ({ className }) => { return ( () ); }; const FoodIcon = ({ className }) => { return ( () ); }; const MicIcon = ({ className }) => { return ( () ); }; const ParachuteIcon = ({ className }) => { return ( () ); }; `,__src__:"/src/registry/default/example/animated-modal-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"Modal"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ModalBody"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ModalContent"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ModalFooter"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ModalTrigger"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"../ui/animated-modal"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"Image"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"next/image"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"AnimatedModalDemo"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"images"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ];"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"py-40 flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Modal"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ModalTrigger"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"bg-black dark:bg-white dark:text-black text-white flex justify-center group/modal-btn"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"group-hover/modal-btn:translate-x-40 text-center transition duration-500"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Book your flight"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"-translate-x-40 group-hover/modal-btn:translate-x-0 flex items-center justify-center absolute inset-0 transition duration-500 text-white z-20"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" \u2708\uFE0F"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ModalBody"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ModalContent"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"h4"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-lg md:text-2xl text-neutral-600 dark:text-neutral-100 font-bold text-center mb-8"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Book your trip to"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'" "'}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-1 py-0.5 rounded-md bg-gray-100 dark:bg-neutral-800 dark:border-neutral-700 border border-gray-200"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Bali"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'" "'}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" now! \u2708\uFE0F"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex justify-center items-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"images"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"image"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"idx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"images"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"idx"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rotate"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"random"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"whileHover"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1.1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rotate"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"zIndex"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"whileTap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1.1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rotate"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"zIndex"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 flex-shrink-0 overflow-hidden"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"image"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"bali images"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"500"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"500"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover flex-shrink-0"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"py-10 flex flex-wrap gap-x-4 gap-y-6 items-start justify-start max-w-sm mx-auto"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"PlaneIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mr-1 text-neutral-700 dark:text-neutral-300 h-4 w-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-700 dark:text-neutral-300 text-sm"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" 5 connecting flights"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ElevatorIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mr-1 text-neutral-700 dark:text-neutral-300 h-4 w-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-700 dark:text-neutral-300 text-sm"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" 12 hotels"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"VacationIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mr-1 text-neutral-700 dark:text-neutral-300 h-4 w-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-700 dark:text-neutral-300 text-sm"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" 69 visiting spots"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"FoodIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mr-1 text-neutral-700 dark:text-neutral-300 h-4 w-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-700 dark:text-neutral-300 text-sm"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Good food everyday"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"MicIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mr-1 text-neutral-700 dark:text-neutral-300 h-4 w-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-700 dark:text-neutral-300 text-sm"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Open Mic"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ParachuteIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mr-1 text-neutral-700 dark:text-neutral-300 h-4 w-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-700 dark:text-neutral-300 text-sm"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Paragliding"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ModalFooter"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-2 py-1 bg-gray-200 text-black dark:bg-black dark:border-black dark:text-white border border-gray-300 rounded-md text-sm w-28"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"bg-black text-white dark:bg-white dark:text-black text-sm px-2 py-1 rounded-md border border-black w-28"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Book Now"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"PlaneIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M16 10h4a2 2 0 0 1 0 4h-4l-4 7h-3l2 -7h-4l-2 2h-3l2 -4l-2 -4h3l2 2h4l-2 -7h3z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"VacationIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M17.553 16.75a7.5 7.5 0 0 0 -10.606 0"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M18 3.804a6 6 0 0 0 -8.196 2.196l10.392 6a6 6 0 0 0 -2.196 -8.196z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M16.732 10c1.658 -2.87 2.225 -5.644 1.268 -6.196c-.957 -.552 -3.075 1.326 -4.732 4.196"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M15 9l-3 5.196"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M3 19.25a2.4 2.4 0 0 1 1 -.25a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 1 .25"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ElevatorIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M5 4m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M10 10l2 -2l2 2"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M10 14l2 2l2 -2"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"FoodIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M20 20c0 -3.952 -.966 -16 -4.038 -16s-3.962 9.087 -3.962 14.756c0 -5.669 -.896 -14.756 -3.962 -14.756c-3.065 0 -4.038 12.048 -4.038 16"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"MicIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M15 12.9a5 5 0 1 0 -3.902 -3.9"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M15 12.9l-3.902 -3.899l-7.513 8.584a2 2 0 1 0 2.827 2.83l8.588 -7.515z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ParachuteIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M22 12a10 10 0 1 0 -20 0"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M22 12c0 -1.66 -1.46 -3 -3.25 -3c-1.8 0 -3.25 1.34 -3.25 3c0 -1.66 -1.57 -3 -3.5 -3s-3.5 1.34 -3.5 3c0 -1.66 -1.46 -3 -3.25 -3c-1.8 0 -3.25 1.34 -3.25 3"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M2 12l10 10l-3.5 -10"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M15.5 12l-3.5 10l10 -10"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(o,{defaultValue:"manual",children:[(0,n.jsxs)(c,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(d,{value:"cli",children:(0,n.jsxs)(B,{children:[(0,n.jsx)(a,{children:"Run the following command"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/animated-modal.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/animated-modal.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/animated-modal.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/animated-modal.json `,__bunCommand__:`bunx --bun shadcn@latest add https://ui.aceternity.com/registry/animated-modal.json `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npx "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"add"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"https://ui.aceternity.com/registry/animated-modal.json"})]})})})})]})}),(0,n.jsx)(d,{value:"manual",children:(0,n.jsxs)(B,{children:[(0,n.jsx)(a,{children:"Install util dependencies"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"tailwind-merge"})]})})})}),(0,n.jsx)(a,{children:"Add util file"}),(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"lib/utils.ts"}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,n.jsx)(a,{children:"Copy the source code"}),(0,n.jsx)(l.p,{children:(0,n.jsx)(l.code,{children:"components/ui/animated-modal.tsx"})}),(0,n.jsx)(h,{name:"animated-modal",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "framer-motion"; import React, { ReactNode, createContext, useContext, useEffect, useRef, useState, } from "react"; interface ModalContextType { open: boolean; setOpen: (open: boolean) => void; } const ModalContext = createContext(undefined); export const ModalProvider = ({ children }: { children: ReactNode }) => { const [open, setOpen] = useState(false); return ( {children} ); }; export const useModal = () => { const context = useContext(ModalContext); if (!context) { throw new Error("useModal must be used within a ModalProvider"); } return context; }; export function Modal({ children }: { children: ReactNode }) { return {children}; } export const ModalTrigger = ({ children, className, }: { children: ReactNode; className?: string; }) => { const { setOpen } = useModal(); return ( ); }; export const ModalBody = ({ children, className, }: { children: ReactNode; className?: string; }) => { const { open } = useModal(); useEffect(() => { if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } }, [open]); const modalRef = useRef(null); const { setOpen } = useModal(); useOutsideClick(modalRef, () => setOpen(false)); return ( {open && ( {children} )} ); }; export const ModalContent = ({ children, className, }: { children: ReactNode; className?: string; }) => { return (

{children}

); }; export const ModalFooter = ({ children, className, }: { children: ReactNode; className?: string; }) => { return (

{children}

); }; const Overlay = ({ className }: { className?: string }) => { return ( ); }; const CloseIcon = () => { const { setOpen } = useModal(); return ( ); }; // Hook to detect clicks outside of a component. // Add it in a separate file, I've added here for simplicity export const useOutsideClick = ( ref: React.RefObject, callback: Function ) => { useEffect(() => { const listener = (event: any) => { // DO NOTHING if the element being clicked is the target element or their children if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,__rawStringJsx__:`"use client";; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "framer-motion"; import React, { createContext, useContext, useEffect, useRef, useState } from "react"; const ModalContext = createContext(undefined); export const ModalProvider = ({ children }) => { const [open, setOpen] = useState(false); return ( ( {children} ) ); }; export const useModal = () => { const context = useContext(ModalContext); if (!context) { throw new Error("useModal must be used within a ModalProvider"); } return context; }; export function Modal({ children }) { return {children}; } export const ModalTrigger = ({ children, className }) => { const { setOpen } = useModal(); return ( () ); }; export const ModalBody = ({ children, className }) => { const { open } = useModal(); useEffect(() => { if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } }, [open]); const modalRef = useRef(null); const { setOpen } = useModal(); useOutsideClick(modalRef, () => setOpen(false)); return ( ( {open && ( {children} )} ) ); }; export const ModalContent = ({ children, className }) => { return ( (

{children}

) ); }; export const ModalFooter = ({ children, className }) => { return ( (

{children}

) ); }; const Overlay = ({ className }) => { return ( () ); }; const CloseIcon = () => { const { setOpen } = useModal(); return ( () ); }; // Hook to detect clicks outside of a component. // Add it in a separate file, I've added here for simplicity export const useOutsideClick = ( ref, callback ) => { useEffect(() => { const listener = (event) => { // DO NOTHING if the element being clicked is the target element or their children if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,__src__:"/src/registry/default/ui/animated-modal.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"@/lib/utils"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"createContext"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useContext"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ModalContextType"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"void"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ModalContext"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"createContext"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ModalContextType"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"undefined"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"undefined"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ModalProvider"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ModalContext.Provider"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useModal"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"context"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useContext"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ModalContext"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"context"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"throw"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"Error"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"useModal must be used within a ModalProvider"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"context"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"Modal"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ModalProvider"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ModalTrigger"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useModal"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-2 rounded-md text-black dark:text-white text-center relative overflow-hidden"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ModalBody"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useModal"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"overflow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"hidden"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"else"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"overflow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"auto"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"modalRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useModal"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"modalRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"backdropFilter"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"blur(10px)"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"backdropFilter"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"blur(0px)"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"fixed [perspective:800px] [transform-style:preserve-3d] inset-0 h-full w-full flex items-center justify-center z-50"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Overlay"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"modalRef"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"min-h-[50%] max-h-[90%] md:max-w-[40%] bg-white dark:bg-neutral-950 border border-transparent dark:border-neutral-800 md:rounded-2xl relative z-50 flex flex-col flex-1 overflow-hidden"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rotateX"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rotateX"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.8"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rotateX"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"spring"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"stiffness"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"260"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"damping"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"15"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CloseIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ModalContent"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex flex-col flex-1 p-8 md:p-10"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ModalFooter"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex justify-end p-4 bg-gray-100 dark:bg-neutral-900"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"Overlay"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"backdropFilter"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"blur(10px)"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"backdropFilter"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"blur(0px)"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`fixed inset-0 h-full w-full bg-black bg-opacity-50 z-50 "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"CloseIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useModal"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"absolute top-4 right-4 group"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-black dark:text-white h-4 w-4 group-hover:scale-125 group-hover:rotate-3 transition duration-200"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M18 6l-12 12"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M6 6l12 12"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Hook to detect clicks outside of a component."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Add it in a separate file, I've added here for simplicity"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"RefObject"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"callback"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Function"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// DO NOTHING if the element being clicked is the target element or their children"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"contains"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"target"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"callback"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"callback"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})})]})})})})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"props"]}),` `,(0,n.jsxs)(l.h4,{id:"modalprovider",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#modalprovider",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"ModalProvider"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsx)(l.tbody,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"children"}),(0,n.jsx)(l.td,{children:"ReactNode"}),(0,n.jsx)(l.td,{children:"The content to be wrapped by the provider."})]})})]}),` `,(0,n.jsxs)(l.h4,{id:"modal",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#modal",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Modal"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsx)(l.tbody,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"children"}),(0,n.jsx)(l.td,{children:"ReactNode"}),(0,n.jsx)(l.td,{children:"The content to be displayed inside the modal."})]})})]}),` `,(0,n.jsxs)(l.h4,{id:"modaltrigger",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#modaltrigger",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"ModalTrigger"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"children"}),(0,n.jsx)(l.td,{children:"ReactNode"}),(0,n.jsx)(l.td,{children:"The content to be displayed inside the trigger button."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"className"}),(0,n.jsx)(l.td,{children:"string?"}),(0,n.jsx)(l.td,{children:"Optional additional class names for the trigger button."})]})]})]}),` `,(0,n.jsxs)(l.h4,{id:"modalbody",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#modalbody",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"ModalBody"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"children"}),(0,n.jsx)(l.td,{children:"ReactNode"}),(0,n.jsx)(l.td,{children:"The content to be displayed inside the modal body."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"className"}),(0,n.jsx)(l.td,{children:"string?"}),(0,n.jsx)(l.td,{children:"Optional additional class names for the modal body."})]})]})]}),` `,(0,n.jsxs)(l.h4,{id:"modalcontent",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#modalcontent",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"ModalContent"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"children"}),(0,n.jsx)(l.td,{children:"ReactNode"}),(0,n.jsx)(l.td,{children:"The content to be displayed inside the modal content."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"className"}),(0,n.jsx)(l.td,{children:"string?"}),(0,n.jsx)(l.td,{children:"Optional additional class names for the modal content."})]})]})]}),` `,(0,n.jsxs)(l.h4,{id:"modalfooter",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#modalfooter",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"ModalFooter"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"children"}),(0,n.jsx)(l.td,{children:"ReactNode"}),(0,n.jsx)(l.td,{children:"The content to be displayed inside the modal footer."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"className"}),(0,n.jsx)(l.td,{children:"string?"}),(0,n.jsx)(l.td,{children:"Optional additional class names for the modal footer."})]})]})]}),` `,(0,n.jsxs)(l.h4,{id:"overlay",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#overlay",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Overlay"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsx)(l.tbody,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"className"}),(0,n.jsx)(l.td,{children:"string?"}),(0,n.jsx)(l.td,{children:"Optional additional class names for the overlay."})]})})]}),` `,(0,n.jsxs)(l.h4,{id:"useoutsideclick",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#useoutsideclick",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"useOutsideClick"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"ref"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"React.RefObject"})}),(0,n.jsx)(l.td,{children:"The reference to the element to detect outside clicks."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"callback"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"Function"})}),(0,n.jsx)(l.td,{children:"The callback function to be called when an outside click is detected."})]})]})]})]})}function v(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var w=v;function r(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return E(k);})(); ;return Component;

Aceternity UI