) } `,__src__:"registry/new-york/examples/theme-switcher-demo.tsx",children:(0,e.jsxs)(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:" { ThemeSwitcher } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/theme-switcher"'})]}),` `,(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:" ThemeSwitcherDemo"}),(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:" 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:"#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:"ThemeSwitcher"}),(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__:`import { ThemeSwitcher } from "@/components/prodkt/theme-switcher" export function ThemeSwitcherDemo() { return (

) } `,__src__:"registry/default/examples/theme-switcher-demo.tsx",children:(0,e.jsxs)(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:" { ThemeSwitcher } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/theme-switcher"'})]}),` `,(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:" ThemeSwitcherDemo"}),(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:" 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:"#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:"ThemeSwitcher"}),(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.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(d,{defaultValue:"cli",children:[(0,e.jsxs)(p,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(i,{value:"cli",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx sparkstack@latest add theme-switcher `,__npmCommand__:`npx sparkstack@latest add theme-switcher `,__yarnCommand__:`npx sparkstack@latest add theme-switcher `,__pnpmCommand__:`pnpm dlx sparkstack@latest add theme-switcher `,__bunCommand__:`bunx --bun sparkstack@latest add theme-switcher `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" sparkstack@latest"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" theme-switcher"})]})})})})}),(0,e.jsx)(i,{value:"manual",children:(0,e.jsxs)(E,{children:[(0,e.jsx)(c,{children:"Install the following dependencies:"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install react-use `,__npmCommand__:`npm install react-use `,__yarnCommand__:`yarn add react-use `,__pnpmCommand__:`pnpm add react-use `,__bunCommand__:`bun add react-use `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" react-use"})]})})})}),(0,e.jsx)(c,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(a,{name:"theme-switcher",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 { 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 } 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", } const themes: Theme[] = [...radixColors, ...radixGrayColors] export function ThemeSwitcher() { 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=\${value};path=/;max-age=31536000\` // 1 year expiry localStorage.setItem("primary-color", value) document.documentElement.setAttribute("data-primary-color", value) // Set the corresponding gray color based on the mapping const mappedGray = grayColorMapping[value] 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 = secondaryColorMapping[value] 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 = accentColorMapping[value] 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("lime") const [gray, setGrayState] = React.useState("mauve") const [secondary, setSecondaryState] = React.useState( "mauve" ) const [accent, setAccentState] = React.useState("mauve") React.useEffect(() => { setMounted(true) }, []) React.useEffect(() => { const isThemeState = localStorage.getItem("primary-color") const isGrayState = localStorage.getItem("gray-color") const isSecondaryState = localStorage.getItem("secondary-color") const isAccentState = localStorage.getItem("accent-color") const foundTheme = themes.find((theme) => theme.value === isThemeState) // If we have a primary theme, get its mapped gray color const mappedGray = foundTheme ? grayColorMapping[foundTheme.value] : null const foundGray = themes.find( (theme) => theme.value === (mappedGray || isGrayState) ) const mappedSecondary = foundTheme ? secondaryColorMapping[foundTheme.value] : null const foundSecondary = themes.find( (theme) => theme.value === (mappedSecondary || isSecondaryState) ) const mappedAccent = foundTheme ? accentColorMapping[foundTheme.value] : null const foundAccent = themes.find( (theme) => theme.value === (mappedAccent || isAccentState) ) setSelectedTheme(foundTheme || null) setSelectedGray(foundGray || null) setSelectedSecondary(foundSecondary || null) setSelectedAccent(foundAccent || null) setThemeState(foundTheme || "lime") setGrayState(foundGray || "mauve") setSecondaryState(foundSecondary || "mauve") setAccentState(foundAccent || "mauve") // Update all theme attributes setThemeCookie(foundTheme?.value || "lime") }, [setSelectedTheme]) return (

No results found. _div]:grid [&>_div]:w-full [&>_div]:grid-flow-row [&>_div]:grid-cols-2 [&>_div]:gap-1\`} > {themes.map((theme) => ( { const selectedTheme = themes.find((theme) => theme.value === value) || null setSelectedTheme(selectedTheme) setThemeState(selectedTheme || "lime") setThemeCookie(value) setOpen(false) }} style={{ border: \`1px solid var(--\${theme.value}-4)\`, backgroundColor: \`var(--\${theme.value}-1)\`, }} className={\`after:bg-[var(-- relative bg-inherit after:absolute after:inset-0 after:z-10\${theme.value}-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.label} ))}

) } `,__src__:"registry/new-york/prodkt/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:" { 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.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:" 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.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:" themes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},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.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"radixColors, "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"radixGrayColors]"})]}),` `,(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:" ThemeSwitcher"}),(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:"Theme"}),(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:"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:"Theme"}),(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:"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:"Theme"}),(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.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:"Theme"}),(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:"value"}),(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.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"primary-color"'}),(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:"#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-primary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", value)"})]}),` `,(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:" grayColorMapping[value]"})]}),` `,(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:" secondaryColorMapping[value]"})]}),` `,(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:" accentColorMapping[value]"})]}),` `,(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:"Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(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:"#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:"Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(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:"#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:"Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(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:"#9ECBFF"},children:' "mauve"'})}),` `,(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:"Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(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.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:" isThemeState"}),(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:" isGrayState"}),(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:'"gray-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:" isSecondaryState"}),(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:'"secondary-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:" isAccentState"}),(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:'"accent-color"'}),(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:" foundTheme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" themes."}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isThemeState)"})]}),` `,(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:" // If we have a primary theme, get its mapped gray color"})}),` `,(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:" foundTheme "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" grayColorMapping[foundTheme.value] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},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:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" foundGray"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" themes."}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedGray "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isGrayState)"})]}),` `,(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:" foundTheme"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" secondaryColorMapping[foundTheme.value]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},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:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" foundSecondary"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" themes."}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedSecondary "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isSecondaryState)"})]}),` `,(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:" foundTheme"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" accentColorMapping[foundTheme.value]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},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:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" foundAccent"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" themes."}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedAccent "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isAccentState)"})]}),` `,(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:"#B392F0"},children:" setSelectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme "}),(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.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedGray"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundGray "}),(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.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundSecondary "}),(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.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedAccent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundAccent "}),(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.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.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:"#B392F0"},children:" setGrayState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundGray "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:"#B392F0"},children:" setSecondaryState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundSecondary "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:"#B392F0"},children:" setAccentState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundAccent "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // Update all theme attributes"})}),` `,(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?.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:" }, [setSelectedTheme])"})}),` `,(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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.label}"})]}),` `,(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:" {themes."}),(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.value}"})]}),` `,(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.value}"})]}),` `,(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:" themes."}),(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.value "}),(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,{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.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:"#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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.value"})]}),` `,(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.value"})]}),` `,(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.value"})]}),` `,(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:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{theme.label}"})]}),` `,(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 { 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 } 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", } const themes: Theme[] = [...radixColors, ...radixGrayColors] export function ThemeSwitcher() { 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=\${value};path=/;max-age=31536000\` // 1 year expiry localStorage.setItem("primary-color", value) document.documentElement.setAttribute("data-primary-color", value) // Set the corresponding gray color based on the mapping const mappedGray = grayColorMapping[value] 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 = secondaryColorMapping[value] 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 = accentColorMapping[value] 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("lime") const [gray, setGrayState] = React.useState("mauve") const [secondary, setSecondaryState] = React.useState( "mauve" ) const [accent, setAccentState] = React.useState("mauve") React.useEffect(() => { setMounted(true) }, []) React.useEffect(() => { const isThemeState = localStorage.getItem("primary-color") const isGrayState = localStorage.getItem("gray-color") const isSecondaryState = localStorage.getItem("secondary-color") const isAccentState = localStorage.getItem("accent-color") const foundTheme = themes.find((theme) => theme.value === isThemeState) // If we have a primary theme, get its mapped gray color const mappedGray = foundTheme ? grayColorMapping[foundTheme.value] : null const foundGray = themes.find( (theme) => theme.value === (mappedGray || isGrayState) ) const mappedSecondary = foundTheme ? secondaryColorMapping[foundTheme.value] : null const foundSecondary = themes.find( (theme) => theme.value === (mappedSecondary || isSecondaryState) ) const mappedAccent = foundTheme ? accentColorMapping[foundTheme.value] : null const foundAccent = themes.find( (theme) => theme.value === (mappedAccent || isAccentState) ) setSelectedTheme(foundTheme || null) setSelectedGray(foundGray || null) setSelectedSecondary(foundSecondary || null) setSelectedAccent(foundAccent || null) setThemeState(foundTheme || "lime") setGrayState(foundGray || "mauve") setSecondaryState(foundSecondary || "mauve") setAccentState(foundAccent || "mauve") // Update all theme attributes setThemeCookie(foundTheme?.value || "lime") }, [setSelectedTheme]) return (

{theme.label} ))}

) } `,__src__:"registry/default/prodkt/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:" { 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.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:" 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.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:" themes"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},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.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"radixColors, "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"radixGrayColors]"})]}),` `,(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:" ThemeSwitcher"}),(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:"Theme"}),(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:"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:"Theme"}),(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:"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:"Theme"}),(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.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:"Theme"}),(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:"value"}),(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.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"primary-color"'}),(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:"#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-primary-color"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", value)"})]}),` `,(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:" grayColorMapping[value]"})]}),` `,(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:" secondaryColorMapping[value]"})]}),` `,(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:" accentColorMapping[value]"})]}),` `,(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:"Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lime"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(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:"#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:"Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(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:"#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:"Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(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:"#9ECBFF"},children:' "mauve"'})}),` `,(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:"Theme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "mauve"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(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.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:" isThemeState"}),(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:" isGrayState"}),(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:'"gray-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:" isSecondaryState"}),(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:'"secondary-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:" isAccentState"}),(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:'"accent-color"'}),(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:" foundTheme"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" themes."}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isThemeState)"})]}),` `,(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:" // If we have a primary theme, get its mapped gray color"})}),` `,(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:" foundTheme "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" grayColorMapping[foundTheme.value] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},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:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" foundGray"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" themes."}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedGray "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isGrayState)"})]}),` `,(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:" foundTheme"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" secondaryColorMapping[foundTheme.value]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},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:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" foundSecondary"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" themes."}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedSecondary "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isSecondaryState)"})]}),` `,(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:" foundTheme"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" accentColorMapping[foundTheme.value]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},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:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" foundAccent"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" themes."}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (mappedAccent "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isAccentState)"})]}),` `,(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:"#B392F0"},children:" setSelectedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundTheme "}),(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.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedGray"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundGray "}),(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.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedSecondary"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundSecondary "}),(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.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setSelectedAccent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundAccent "}),(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.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.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:"#B392F0"},children:" setGrayState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundGray "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:"#B392F0"},children:" setSecondaryState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundSecondary "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:"#B392F0"},children:" setAccentState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(foundAccent "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:" // Update all theme attributes"})}),` `,(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?.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:" }, [setSelectedTheme])"})}),` `,(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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.label}"})]}),` `,(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:" {themes."}),(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.value}"})]}),` `,(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.value}"})]}),` `,(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:" themes."}),(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.value "}),(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,{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.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(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:"#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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.value"})]}),` `,(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.value"})]}),` `,(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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:"value"}),(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.value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selectedTheme?.value"})]}),` `,(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:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{theme.label}"})]}),` `,(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 { ThemeSwitcher } from "@/components/ui/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:" { ThemeSwitcher } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/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:"ThemeSwitcher"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]})})})})]})}function u(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 T(k);})(); ;return Component;

Theme Switcher

Installation

Usage