No results found. _div]:grid [&>_div]:w-full [&>_div]:grid-flow-row [&>_div]:grid-cols-2 [&>_div]:gap-1\`} > {prodktThemes.map((theme) => ( { const selectedTheme = prodktThemes.find((theme) => theme.name === value) || null setSelectedTheme(selectedTheme) setThemeState(selectedTheme) setThemeCookie(value) setOpen(false) }} style={{ border: \`1px solid var(--\${theme.primaryColor}-4)\`, backgroundColor: \`var(--\${theme.primaryColor}-1)\`, }} className={\`after:bg-[var(-- relative bg-inherit after:absolute after:inset-0 after:z-10\${theme.primaryColor}-4)] max-w-1/2 flex w-auto shrink grow-0 basis-1/2 flex-col items-start justify-start gap-1 px-3 py-2 after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out hover:after:opacity-100 \`} >

{theme.name} ))}

) } `,__src__:"registry/new-york/prodkt/config-theme-switcher.tsx",__style__:"new-york",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Circle } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" META_PRODKT_THEMES,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" META_THEMES,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" META_THEME_COLORS,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" siteConfig,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/config/site"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Command,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandEmpty,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandGroup,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandInput,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandItem,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandList,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/command"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Popover,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" PopoverContent,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" PopoverTrigger,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/popover"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" grayColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" secondaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" accentColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" META_PRODKT_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" prodktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"[] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"META_PRODKT_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" ConfigThemeSwitcher"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"mounted"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setMounted"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"open"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setOpen"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSelectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"selectedGray"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSelectedGray"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"selectedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSelectedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"selectedAccent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSelectedAccent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeCookie"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.cookie "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `primary-color=${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"prodktThemes"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:")?."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"};path=/;max-age=31536000`"}),(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // 1 year expiry"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "primary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value)?.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "data-primary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value)?.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // Set the corresponding gray color based on the mapping"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" mappedGray"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )?.grayColor"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedGray) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.cookie "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `gray-color=${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"mappedGray"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"};path=/;max-age=31536000`"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"gray-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedGray)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"data-gray-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedGray)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" mappedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )?.secondaryColor"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedSecondary) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.cookie "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `secondary-color=${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"mappedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"};path=/;max-age=31536000`"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedSecondary)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "data-secondary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" mappedSecondary"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" mappedAccent"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )?.accentColor"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedAccent) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.cookie "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `accent-color=${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"mappedAccent"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"};path=/;max-age=31536000`"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"accent-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedAccent)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"data-accent-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedAccent)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setThemeState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"META_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"gray"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setGrayState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"META_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"secondary"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSecondaryState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"META_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"accent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setAccentState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"META_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setMounted"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" storedTheme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"getItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"primary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" foundTheme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" storedTheme) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setGrayState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSecondaryState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setAccentState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeCookie"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme.name)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex items-center space-x-4 [&_button]:rounded-full [&_button]:focus:rounded-full [&_button]:focus-visible:rounded-full"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" open"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{open} "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"onOpenChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{setOpen}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" asChild"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"icon"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sparkstack-border min-w-fit rounded-full"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {selectedTheme "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Circle"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"24"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" stroke"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-a7)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`ring-offset- shrink-0 scale-[2] ring-offset-0 focus-visible:rounded-full before:focus-visible:rounded-full after:focus-visible:rounded-full${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 text-shadow-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 text-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 stroke-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 fill-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-a7`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sr-only"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{selectedTheme.name}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"px-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Set theme"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"p-0"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" side"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"right"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" align"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"start"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Command"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandInput"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Change theme..."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandList"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandEmpty"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">No results found."})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandGroup"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`w-full [&>_div]:grid [&>_div]:w-full [&>_div]:grid-flow-row [&>_div]:grid-cols-2 [&>_div]:gap-1`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{theme.name}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{theme.name}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(selectedTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(selectedTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeCookie"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(value)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setOpen"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" border: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`1px solid var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}-4)`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" backgroundColor: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}-1)`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`after:bg-[var(-- relative bg-inherit after:absolute after:inset-0 after:z-10${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}-4)] max-w-1/2 flex w-auto shrink grow-0 basis-1/2 flex-col items-start justify-start gap-1 px-3 py-2 after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out hover:after:opacity-100 `"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex flex-row items-center space-x-[-4px]"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Circle"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" stroke"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `!text- h-4 w-4 shrink-0${"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 !stroke-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 !fill-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.primaryColor"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-100"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-40"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Circle"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" stroke"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-7)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-7)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `!text- h-4 w-4 shrink-0${"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 !stroke-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 !fill-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.primaryColor"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-100"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-40"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Circle"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" stroke"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-5)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-5)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `!text- h-4 w-4 shrink-0${"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 !stroke-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 !fill-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.primaryColor"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-100"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-40"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{theme.name}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { Circle } from "lucide-react" import { META_PRODKT_THEMES, META_THEMES, META_THEME_COLORS, siteConfig, } from "@/config/site" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" type Theme = { value: string label: string name?: string primaryColor?: string grayColor?: string secondaryColor?: string accentColor?: string } type ProdktThemes = (typeof META_PRODKT_THEMES)[0] const prodktThemes: ProdktThemes[] = [...META_PRODKT_THEMES] const radixColors = [ { value: "amber", label: "Amber", }, { value: "blue", label: "Blue", }, { value: "bronze", label: "Bronze", }, { value: "brown", label: "Brown", }, { value: "crimson", label: "Crimson", }, { value: "cyan", label: "Cyan", }, { value: "gold", label: "Gold", }, { value: "grass", label: "Grass", }, { value: "green", label: "Green", }, { value: "indigo", label: "Indigo", }, { value: "iris", label: "Iris", }, { value: "jade", label: "Jade", }, { value: "lime", label: "Lime", }, { value: "mint", label: "Mint", }, { value: "orange", label: "Orange", }, { value: "pink", label: "Pink", }, { value: "plum", label: "Plum", }, { value: "purple", label: "Purple", }, { value: "red", label: "Red", }, { value: "ruby", label: "Ruby", }, { value: "sky", label: "Sky", }, { value: "teal", label: "Teal", }, { value: "tomato", label: "Tomato", }, { value: "violet", label: "Violet", }, { value: "yellow", label: "Yellow", }, ] const radixGrayColors = [ { value: "gray", label: "Gray", }, { value: "mauve", label: "Mauve", }, { value: "slate", label: "Slate", }, { value: "sage", label: "Sage", }, { value: "olive", label: "Olive", }, { value: "sand", label: "Sand", }, ] // Mapping from primary colors to gray colors const grayColorMapping: Record = { // mauve group tomato: "mauve", red: "mauve", ruby: "mauve", crimson: "mauve", pink: "mauve", plum: "mauve", purple: "mauve", violet: "mauve", // slate group iris: "slate", indigo: "slate", blue: "slate", sky: "slate", cyan: "slate", // sage group mint: "sage", teal: "sage", jade: "sage", green: "sage", // olive group grass: "olive", lime: "olive", // sand group gold: "sand", yellow: "sand", amber: "sand", orange: "sand", brown: "sand", } const secondaryColorMapping: Record = { // mauve group tomato: "mauve", red: "mauve", ruby: "mauve", crimson: "mauve", pink: "mauve", plum: "mauve", purple: "mauve", violet: "mauve", // slate group iris: "slate", indigo: "slate", blue: "slate", sky: "slate", cyan: "slate", // sage group mint: "sage", teal: "sage", jade: "sage", green: "sage", // olive group grass: "olive", lime: "olive", // sand group gold: "sand", yellow: "sand", amber: "sand", orange: "sand", brown: "sand", } const accentColorMapping: Record = { // mauve group tomato: "mauve", red: "mauve", ruby: "mauve", crimson: "mauve", pink: "mauve", plum: "mauve", purple: "mauve", violet: "mauve", // slate group iris: "slate", indigo: "slate", blue: "slate", sky: "slate", cyan: "slate", // sage group mint: "sage", teal: "sage", jade: "sage", green: "sage", // olive group grass: "olive", lime: "olive", // sand group gold: "sand", yellow: "sand", amber: "sand", orange: "sand", brown: "sand", } // export type ProdktTheme = META_THEMES // interface ProdktViewport extends Viewport { // themeColor: string // defaultMode: string // theme: ProdktTheme // } // export const prodktViewport: ProdktViewport = { // themeColor: META_THEME_COLORS.dark, // defaultMode: // META_PRODKT_THEMES.find((theme) => theme.name === "default")?.defaultMode || // "system", // theme: META_PRODKT_THEMES.find((theme) => theme.name === "default") || { // name: // META_PRODKT_THEMES.find((theme) => theme.name === "default")?.name || // "default", // defaultMode: // META_PRODKT_THEMES.find((theme) => theme.name === "default") // ?.defaultMode || "system", // primaryColor: // META_PRODKT_THEMES.find((theme) => theme.name === "default") // ?.primaryColor || "lime", // accentColor: // META_PRODKT_THEMES.find((theme) => theme.name === "default") // ?.accentColor || "ghost", // secondaryColor: // META_PRODKT_THEMES.find((theme) => theme.name === "default") // ?.secondaryColor || "mint", // grayColor: // META_PRODKT_THEMES.find((theme) => theme.name === "default")?.grayColor || // "olive", // }, // } export function ConfigThemeSwitcher() { const [mounted, setMounted] = React.useState(false) const [open, setOpen] = React.useState(false) const [selectedTheme, setSelectedTheme] = React.useState( null ) const [selectedGray, setSelectedGray] = React.useState( null ) const [selectedSecondary, setSelectedSecondary] = React.useState(null) const [selectedAccent, setSelectedAccent] = React.useState(null) // const [selectedGray, setSelectedGray] = React.useState("mauve") // const [selectedSecondary, setSelectedSecondary] = React.useState("violet") // const [selectedAccent, setSelectedAccent] = React.useState("violet") const setThemeCookie = (value: string) => { document.cookie = \`primary-color=\${prodktThemes.find((theme) => theme.name === value)?.primaryColor};path=/;max-age=31536000\` // 1 year expiry localStorage.setItem( "primary-color", prodktThemes.find((theme) => theme.name === value)?.primaryColor || "lime" ) document.documentElement.setAttribute( "data-primary-color", prodktThemes.find((theme) => theme.name === value)?.primaryColor || "lime" ) // Set the corresponding gray color based on the mapping const mappedGray = prodktThemes.find( (theme) => theme.name === value )?.grayColor if (mappedGray) { document.cookie = \`gray-color=\${mappedGray};path=/;max-age=31536000\` localStorage.setItem("gray-color", mappedGray) document.documentElement.setAttribute("data-gray-color", mappedGray) } const mappedSecondary = prodktThemes.find( (theme) => theme.name === value )?.secondaryColor if (mappedSecondary) { document.cookie = \`secondary-color=\${mappedSecondary};path=/;max-age=31536000\` localStorage.setItem("secondary-color", mappedSecondary) document.documentElement.setAttribute( "data-secondary-color", mappedSecondary ) } const mappedAccent = prodktThemes.find( (theme) => theme.name === value )?.accentColor if (mappedAccent) { document.cookie = \`accent-color=\${mappedAccent};path=/;max-age=31536000\` localStorage.setItem("accent-color", mappedAccent) document.documentElement.setAttribute("data-accent-color", mappedAccent) } } const [theme, setThemeState] = React.useState(null) const [gray, setGrayState] = React.useState(null) const [secondary, setSecondaryState] = React.useState( null ) const [accent, setAccentState] = React.useState(null) React.useEffect(() => { setMounted(true) }, []) React.useEffect(() => { const storedTheme = localStorage.getItem("primary-color") const foundTheme = prodktThemes.find((theme) => theme.name === storedTheme) || prodktThemes[0] setSelectedTheme(foundTheme) setThemeState(foundTheme) setGrayState(foundTheme) setSecondaryState(foundTheme) setAccentState(foundTheme) setThemeCookie(foundTheme.name) }, []) return (

{theme.name} ))}

) } `,__src__:"registry/default/prodkt/config-theme-switcher.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Circle } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" META_PRODKT_THEMES,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" META_THEMES,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" META_THEME_COLORS,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" siteConfig,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/config/site"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Command,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandEmpty,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandGroup,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandInput,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandItem,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" CommandList,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/command"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Popover,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" PopoverContent,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" PopoverTrigger,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/popover"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" grayColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" secondaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:" accentColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" META_PRODKT_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" prodktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"[] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"META_PRODKT_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" radixColors"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"amber"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Amber"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"blue"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Blue"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"bronze"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Bronze"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"brown"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Brown"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"crimson"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Crimson"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"cyan"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Cyan"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"gold"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Gold"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grass"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Grass"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"green"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Green"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"indigo"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Indigo"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"iris"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Iris"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"jade"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Jade"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"lime"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Lime"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mint"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Mint"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"orange"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Orange"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"pink"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Pink"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"plum"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Plum"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"purple"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Purple"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"red"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Red"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ruby"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Ruby"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sky"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Sky"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"teal"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Teal"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"tomato"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Tomato"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"violet"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Violet"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"yellow"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Yellow"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" radixGrayColors"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"gray"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Gray"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"olive"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Olive"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// Mapping from primary colors to gray colors"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" grayColorMapping"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" Record"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // mauve group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" tomato: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" red: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ruby: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" crimson: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" pink: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" plum: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" purple: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" violet: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // slate group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" iris: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" indigo: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" blue: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" sky: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" cyan: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // sage group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" mint: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" teal: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" jade: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" green: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // olive group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" grass: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"olive"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" lime: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"olive"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // sand group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" gold: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" yellow: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" amber: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" orange: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" brown: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" secondaryColorMapping"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" Record"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // mauve group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" tomato: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" red: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ruby: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" crimson: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" pink: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" plum: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" purple: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" violet: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // slate group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" iris: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" indigo: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" blue: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" sky: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" cyan: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // sage group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" mint: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" teal: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" jade: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" green: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // olive group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" grass: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"olive"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" lime: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"olive"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // sand group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" gold: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" yellow: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" amber: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" orange: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" brown: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" accentColorMapping"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" Record"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // mauve group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" tomato: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" red: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ruby: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" crimson: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" pink: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" plum: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" purple: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" violet: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // slate group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" iris: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" indigo: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" blue: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" sky: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" cyan: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"slate"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // sage group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" mint: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" teal: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" jade: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" green: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sage"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // olive group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" grass: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"olive"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" lime: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"olive"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // sand group"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" gold: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" yellow: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" amber: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" orange: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" brown: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// export type ProdktTheme = META_THEMES"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// interface ProdktViewport extends Viewport {"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// themeColor: string"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// defaultMode: string"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// theme: ProdktTheme"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// export const prodktViewport: ProdktViewport = {"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// themeColor: META_THEME_COLORS.dark,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// defaultMode:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// META_PRODKT_THEMES.find((theme) => theme.name === "default")?.defaultMode ||'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// "system",'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// theme: META_PRODKT_THEMES.find((theme) => theme.name === "default") || {'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// name:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// META_PRODKT_THEMES.find((theme) => theme.name === "default")?.name ||'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// "default",'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// defaultMode:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// META_PRODKT_THEMES.find((theme) => theme.name === "default")'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// ?.defaultMode || "system",'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// primaryColor:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// META_PRODKT_THEMES.find((theme) => theme.name === "default")'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// ?.primaryColor || "lime",'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// accentColor:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// META_PRODKT_THEMES.find((theme) => theme.name === "default")'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// ?.accentColor || "ghost",'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// secondaryColor:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// META_PRODKT_THEMES.find((theme) => theme.name === "default")'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// ?.secondaryColor || "mint",'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// grayColor:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// META_PRODKT_THEMES.find((theme) => theme.name === "default")?.grayColor ||'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:'// "olive",'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" ConfigThemeSwitcher"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"mounted"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setMounted"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"open"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setOpen"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSelectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"selectedGray"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSelectedGray"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"selectedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSelectedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"selectedAccent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSelectedAccent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ProdktThemes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:' // const [selectedGray, setSelectedGray] = React.useState("mauve")'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:' // const [selectedSecondary, setSelectedSecondary] = React.useState("violet")'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:' // const [selectedAccent, setSelectedAccent] = React.useState("violet")'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeCookie"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.cookie "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `primary-color=${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"prodktThemes"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:")?."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"};path=/;max-age=31536000`"}),(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // 1 year expiry"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "primary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value)?.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "data-primary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value)?.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // Set the corresponding gray color based on the mapping"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" mappedGray"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )?.grayColor"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedGray) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.cookie "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `gray-color=${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"mappedGray"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"};path=/;max-age=31536000`"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"gray-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedGray)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"data-gray-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedGray)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" mappedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )?.secondaryColor"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedSecondary) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.cookie "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `secondary-color=${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"mappedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"};path=/;max-age=31536000`"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedSecondary)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "data-secondary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" mappedSecondary"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" mappedAccent"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )?.accentColor"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedAccent) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.cookie "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `accent-color=${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"mappedAccent"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"};path=/;max-age=31536000`"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"accent-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedAccent)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"data-accent-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", mappedAccent)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setThemeState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"META_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"gray"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setGrayState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"META_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"secondary"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSecondaryState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"META_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"accent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setAccentState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"META_THEMES"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setMounted"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" storedTheme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"getItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"primary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" foundTheme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" storedTheme) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setGrayState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSecondaryState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setAccentState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeCookie"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme.name)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex items-center space-x-4 [&_button]:rounded-full [&_button]:focus:rounded-full [&_button]:focus-visible:rounded-full"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" open"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{open} "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"onOpenChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{setOpen}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" asChild"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"icon"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sparkstack-border min-w-fit rounded-full"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {selectedTheme "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Circle"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"24"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" stroke"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-a7)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`ring-offset- shrink-0 scale-[2] ring-offset-0 focus-visible:rounded-full before:focus-visible:rounded-full after:focus-visible:rounded-full${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 text-shadow-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 text-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 stroke-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 fill-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-a7`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sr-only"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{selectedTheme.name}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"px-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Set theme"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"p-0"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" side"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"right"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" align"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"start"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Command"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandInput"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Change theme..."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandList"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandEmpty"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">No results found."})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandGroup"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`w-full [&>_div]:grid [&>_div]:w-full [&>_div]:grid-flow-row [&>_div]:grid-cols-2 [&>_div]:gap-1`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"CommandItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{theme.name}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{theme.name}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" selectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" prodktThemes."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.name "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(selectedTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(selectedTheme)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setThemeCookie"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(value)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setOpen"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" border: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`1px solid var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}-4)`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" backgroundColor: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}-1)`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`after:bg-[var(-- relative bg-inherit after:absolute after:inset-0 after:z-10${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}-4)] max-w-1/2 flex w-auto shrink grow-0 basis-1/2 flex-col items-start justify-start gap-1 px-3 py-2 after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out hover:after:opacity-100 `"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex flex-row items-center space-x-[-4px]"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Circle"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" stroke"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `!text- h-4 w-4 shrink-0${"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 !stroke-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 !fill-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.primaryColor"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-100"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-40"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Circle"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" stroke"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-7)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-7)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `!text- h-4 w-4 shrink-0${"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 !stroke-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 !fill-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.primaryColor"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-100"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-40"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Circle"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" stroke"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-5)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`var(--${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-5)`'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" `!text- h-4 w-4 shrink-0${"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9 !stroke-${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"}-9 !fill-${'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"primaryColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" }-9`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme.primaryColor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.primaryColor"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-100"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "opacity-40"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{theme.name}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),(0,e.jsx)(c,{children:"Update the import paths to match your project setup."}),(0,e.jsxs)(c,{children:["Update ",(0,e.jsx)(l.code,{children:"tailwind.config.js"})]}),(0,e.jsxs)(l.p,{children:["Add the following animations to your ",(0,e.jsx)(l.code,{children:"tailwind.config.js"})," file:"]}),(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"default",children:"tailwind.config.js"}),(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",__withMeta__:!0,__rawString__:`/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: {}, }, } `,children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"/** "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"@type"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" {import('tailwindcss').Config}"}),(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" */"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"module"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"exports"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme: {"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" extend: {},"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { ConfigThemeSwitcher } from "@/components/ui/config-theme-switcher" `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ConfigThemeSwitcher } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/config-theme-switcher"'})]})})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ConfigThemeSwitcher"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]})})})})]})}function B(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(F,{...n})}):F(n)}function r(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(_);})(); ;return Component;

Custom Config Switcher

Installation

Usage