setIsAnimating(false)} >

{format(month, 'MMMM yyyy')}

Su Mo Tu We Th Fr Sa {days.map((day) => ( {format(day, 'd')} ))}

); } `,__src__:"src/registry/core/ui/calendar.tsx",__event__:"copy_usage_code",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'use client'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" addMonths,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" eachDayOfInterval,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" endOfMonth,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" endOfWeek,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" format,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" isSameMonth,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" parse,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" startOfMonth,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" startOfWeek,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" subMonths,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'date-fns'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { AnimatePresence, motion, MotionConfig } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'framer-motion'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { ChevronLeftIcon, ChevronRightIcon } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'lucide-react'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { useTheme } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'next-themes'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { useState } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'react'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { ResizablePanel } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" '@/core/ui/resizable-panel'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" variants "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" enter"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:": (direction"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { x: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`${"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"100"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}%`"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" };"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" center: { x: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'0%'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" exit"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:": (direction"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { x: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`${"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"100"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" direction"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}%`"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" };"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" transition "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" type: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'spring'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" bounce: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" duration: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0.3"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" Page"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" [monthString, setMonthString] "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"format"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"new"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" Date"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(), "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'yyyy-MM'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"));"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" [direction, setDirection] "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:">();"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" [isAnimating, setIsAnimating] "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { theme } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useTheme"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"();"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" month "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" parse"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(monthString, "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'yyyy-MM'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"new"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" Date"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"());"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" nextMonth"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" (isAnimating) "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" next "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" addMonths"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(month, "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setMonthString"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"format"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(next, "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'yyyy-MM'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"));"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setDirection"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setIsAnimating"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" previousMonth"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" (isAnimating) "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" previous "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" subMonths"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(month, "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setMonthString"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"format"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(previous, "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'yyyy-MM'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"));"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setDirection"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setIsAnimating"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" days "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" eachDayOfInterval"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" start: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"startOfWeek"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"startOfMonth"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(month)),"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" end: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"endOfWeek"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"endOfMonth"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(month)),"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" });"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"MotionConfig"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" transition={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"transition"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex w-full items-start py-16 text-stone-900 dark:text-stone-100'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative mx-auto w-full max-w-xs overflow-hidden rounded-2xl'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'py-8'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex flex-col px-3 justify-center rounded-2xl text-center border shadow-md py-4 bg-white dark:bg-black'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"ResizablePanel"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"AnimatePresence"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" mode="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'popLayout'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" initial={"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" custom={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"direction"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onExitComplete={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setIsAnimating"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"monthString"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" initial="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'enter'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" animate="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'center'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" exit="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'exit'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative flex justify-between px-8'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'border relative w-full flex justify-between py-1 dark:border-stone-700'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.button"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" variants={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" exit: { visibility: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'hidden'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'z-10 p-2 rounded-full hover:bg-stone-100 dark:hover:bg-stone-700'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onClick={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"previousMonth"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"ChevronLeftIcon"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'h-4 w-4'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.p"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" variants={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"variants"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" custom={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"direction"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'z-0 absolute inset-0 flex items-center justify-center font-semibold'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"format"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(month, "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'MMMM yyyy'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.button"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" variants={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" exit: { visibility: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'hidden'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'z-10 p-2 rounded-full hover:bg-stone-100 dark:hover:bg-stone-700'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onClick={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"nextMonth"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"ChevronRightIcon"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'h-4 w-4'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'absolute inset-0 rounded-2xl border dark:border-stone-700'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" style={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" backgroundImage: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" linear-gradient("})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" to right,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"theme"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" =="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'dark'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ?"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'black'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'white'} 15%,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" transparent 30%,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" transparent 70%,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"theme"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" =="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'dark'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ?"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'black'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'white'} 85%"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" )"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" `"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" variants={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" exit: { visibility: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'hidden'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" variants={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" exit: { visibility: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'hidden'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'mt-4 grid grid-cols-7 gap-y-4 px-2 text-sm'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'font-medium text-stone-500 dark:text-stone-400'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Su"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'font-medium text-stone-500 dark:text-stone-400'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Mo"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'font-medium text-stone-500 dark:text-stone-400'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Tu"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'font-medium text-stone-500 dark:text-stone-400'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" We"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'font-medium text-stone-500 dark:text-stone-400'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Th"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'font-medium text-stone-500 dark:text-stone-400'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Fr"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'font-medium text-stone-500 dark:text-stone-400'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Sa"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" variants={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"variants"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" custom={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"direction"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'mt-4 grid grid-cols-7 gap-y-4 px-2 text-sm'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"days."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"((day) "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"span"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className={"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`${"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" isSameMonth"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"day"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"month"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:")"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ?"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" ''"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'text-stone-300 dark:text-stone-600'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" } font-semibold`"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"format"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(day, "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'yyyy-MM-dd'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"format"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(day, "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'d'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ))"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"}"})})]})})})}),` `,(0,l.jsxs)(n.h3,{id:"resource",children:[(0,l.jsx)(n.a,{className:"anchor","aria-label":"Link to section",href:"#resource",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Resource"]})]})}function v(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(d,e)})):d(e)}var b=v;function g(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(E);})(); ;return Component;

Calendar

Examples

Airbnb Calendar

Resource

Resources