"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", figcaption: "figcaption", figure: "figure", h2: "h2", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }, {CommandBlock, DocsFileTabs} = _components; if (!CommandBlock) _missingMdxReference("CommandBlock", true); if (!DocsFileTabs) _missingMdxReference("DocsFileTabs", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "single-large-fence", children: "Single large fence" }), "\n", _jsxs(_components.p, { children: ["Use a normal fenced block with ", _jsx(_components.code, { children: "title=\"path/file.ext\"" }), ". Blocks longer than ~13 lines show ", _jsx(_components.strong, { children: "Expand" }), " with a gradient fade."] }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "tsx", "data-theme": "dracula", children: "components/learn/docs-sidebar.tsx" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "tsx", "data-theme": "dracula", __rawstring__: "'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport Link from 'next/link';\nimport { usePathname } from 'next/navigation';\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';\nimport { ScrollArea } from '@/components/ui/scroll-area';\nimport { cn } from '@/lib/utils';\nimport type { LearnNavNode } from '@/lib/learn';\n\nfunction NavLink({ node, depth = 0 }: { node: LearnNavNode; depth?: number }) {\n const pathname = usePathname();\n const active = pathname === node.href;\n\n return (\n \n {node.title}\n {node.badge && (\n \n {node.badge}\n \n )}\n \n );\n}\n\nfunction NavSection({ node, depth = 0 }: { node: LearnNavNode; depth?: number }) {\n if (node.type === 'page' || !node.children?.length) {\n return ;\n }\n\n return (\n \n \n \n {node.title}\n \n \n {node.children.map((child) => (\n \n ))}\n \n \n \n );\n}\n\nexport function DocsSidebar({ nav }: { nav: LearnNavNode[] }) {\n return (\n \n \n \n );\n}\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "tsx", "data-theme": "dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "use client" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { ChevronRight } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "lucide-react" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " Link " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "next/link" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { usePathname } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "next/navigation" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { Accordion, AccordionContent, AccordionItem, AccordionTrigger } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "@/components/ui/accordion" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { ScrollArea } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "@/components/ui/scroll-area" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { cn } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "@/lib/utils" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " type" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { LearnNavNode } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "@/lib/learn" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "function" }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: " NavLink" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "node" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "depth" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { color: "#BD93F9" }, children: " 0" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { node" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: " LearnNavNode" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "; depth" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "?:" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: " number" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " const" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " pathname " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: " usePathname" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "();" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " const" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " active " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " pathname " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "===" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " node.href;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "Link" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " href" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{node.href}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " className" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{" }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: "cn" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " active " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "?" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "bg-muted text-foreground" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " :" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "text-muted-foreground hover:text-foreground" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " )}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " style" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{{ paddingLeft" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: " `" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "${" }), _jsx(_components.span, { style: { color: "#BD93F9" }, children: "8" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " +" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " depth" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " *" }), _jsx(_components.span, { style: { color: "#BD93F9" }, children: " 12" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "}" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "px`" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " {node.title}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " {node.badge " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "&&" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "span" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " className" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "ml-auto rounded-full bg-primary/10 px-1.5 py-0.5 text-[0.65rem] font-medium text-primary" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " {node.badge}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " )}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "function" }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: " NavSection" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "node" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "depth" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { color: "#BD93F9" }, children: " 0" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { node" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: " LearnNavNode" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "; depth" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "?:" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: " number" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " if" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " (node.type " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "===" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "page" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " ||" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " !" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "node.children?.length) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "NavLink" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " node" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{node} " }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: "depth" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{depth} />;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "Accordion" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " type" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "multiple" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " defaultValue" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{[node.slug]}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "AccordionItem" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " value" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{node.slug} " }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: "className" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "border-0" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "AccordionTrigger" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " className" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "py-1.5 text-sm hover:no-underline" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " {node.title}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "AccordionContent" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " className" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "pb-0 pl-2" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " {node.children." }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: "map" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "child" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ") " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "NavSection" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " key" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{child.slug} " }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: "node" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{child} " }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: "depth" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{depth " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "+" }), _jsx(_components.span, { style: { color: "#BD93F9" }, children: " 1" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "} />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "export" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " function" }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: " DocsSidebar" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "nav" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { nav" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: " LearnNavNode" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "[] }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "ScrollArea" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " className" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "h-full pr-3" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "nav" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " className" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "space-y-1" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " {nav." }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: "map" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "node" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ") " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "NavSection" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " key" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{node.slug} " }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: "node" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{node} />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "}" }) })] }) })] }), "\n", _jsx(_components.h2, { id: "multi-file-tabs", children: "Multi-file tabs" }), "\n", _jsx(_components.p, { children: "Group related files under one heading — each tab gets its own expandable block." }), "\n", _jsxs(DocsFileTabs, { title: "MDX renderer stack", children: [_jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "tsx", "data-theme": "dracula", children: "components/learn/learn-mdx-renderer.tsx" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "tsx", "data-theme": "dracula", __rawstring__: "import { MDXRemote } from 'next-mdx-remote';\nimport type { MDXRemoteSerializeResult } from 'next-mdx-remote';\nimport { learnMdxComponents } from './learn-mdx-client';\n\nexport function LearnMdxRenderer({ source }: { source: MDXRemoteSerializeResult }) {\n return ;\n}\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "tsx", "data-theme": "dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { MDXRemote } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "next-mdx-remote" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " type" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { MDXRemoteSerializeResult } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "next-mdx-remote" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { learnMdxComponents } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "./learn-mdx-client" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "export" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " function" }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: " LearnMdxRenderer" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "source" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { source" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: " MDXRemoteSerializeResult" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "MDXRemote" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " {" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "..." }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "source} " }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: "components" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "{learnMdxComponents} />;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "}" }) })] }) })] }), _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "tsx", "data-theme": "dracula", children: "components/learn/learn-code-elements.tsx" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "tsx", "data-theme": "dracula", __rawstring__: "export function LearnPreCustom(props: LearnPreProps) {\n const inPrettyFigure = useInDocsPrettyFigure();\n const language = String(props['data-language'] || 'text').toLowerCase();\n\n if (inPrettyFigure) {\n return

;\n  }\n\n  return (\n    \n      \n    \n  );\n}\n",
          children: _jsxs(_components.code, {
            "data-line-numbers": "",
            "data-language": "tsx",
            "data-theme": "dracula",
            style: {
              display: "grid"
            },
            "data-line-numbers-max-digits": "2",
            children: [_jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "export"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: " function"
              }), _jsx(_components.span, {
                style: {
                  color: "#50FA7B"
                },
                children: " LearnPreCustom"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "("
              }), _jsx(_components.span, {
                style: {
                  color: "#FFB86C",
                  fontStyle: "italic"
                },
                children: "props"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: ":"
              }), _jsx(_components.span, {
                style: {
                  color: "#8BE9FD",
                  fontStyle: "italic"
                },
                children: " LearnPreProps"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: ") {"
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "  const"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: " inPrettyFigure "
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "="
              }), _jsx(_components.span, {
                style: {
                  color: "#50FA7B"
                },
                children: " useInDocsPrettyFigure"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "();"
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "  const"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: " language "
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "="
              }), _jsx(_components.span, {
                style: {
                  color: "#50FA7B"
                },
                children: " String"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "(props["
              }), _jsx(_components.span, {
                style: {
                  color: "#E9F284"
                },
                children: "'"
              }), _jsx(_components.span, {
                style: {
                  color: "#F1FA8C"
                },
                children: "data-language"
              }), _jsx(_components.span, {
                style: {
                  color: "#E9F284"
                },
                children: "'"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "] "
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "||"
              }), _jsx(_components.span, {
                style: {
                  color: "#E9F284"
                },
                children: " '"
              }), _jsx(_components.span, {
                style: {
                  color: "#F1FA8C"
                },
                children: "text"
              }), _jsx(_components.span, {
                style: {
                  color: "#E9F284"
                },
                children: "'"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: ")."
              }), _jsx(_components.span, {
                style: {
                  color: "#50FA7B"
                },
                children: "toLowerCase"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "();"
              })]
            }), "\n", _jsx(_components.span, {
              "data-line": "",
              children: " "
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "  if"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: " (inPrettyFigure) {"
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "    return"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: " <"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "pre"
              }), _jsx(_components.span, {
                style: {
                  color: "#50FA7B",
                  fontStyle: "italic"
                },
                children: " className"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "="
              }), _jsx(_components.span, {
                style: {
                  color: "#E9F284"
                },
                children: "\""
              }), _jsx(_components.span, {
                style: {
                  color: "#F1FA8C"
                },
                children: "code-pre m-0"
              }), _jsx(_components.span, {
                style: {
                  color: "#E9F284"
                },
                children: "\""
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: " {"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "..."
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "props} />;"
              })]
            }), "\n", _jsx(_components.span, {
              "data-line": "",
              children: _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "  }"
              })
            }), "\n", _jsx(_components.span, {
              "data-line": "",
              children: " "
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "  return"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: " ("
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "    <"
              }), _jsx(_components.span, {
                style: {
                  color: "#8BE9FD",
                  fontStyle: "italic"
                },
                children: "CodeBlock"
              }), _jsx(_components.span, {
                style: {
                  color: "#50FA7B",
                  fontStyle: "italic"
                },
                children: " language"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "="
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "{language} "
              }), _jsx(_components.span, {
                style: {
                  color: "#50FA7B",
                  fontStyle: "italic"
                },
                children: "rawString"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "="
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "{props.__rawstring__}>"
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "      <"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "pre"
              }), _jsx(_components.span, {
                style: {
                  color: "#50FA7B",
                  fontStyle: "italic"
                },
                children: " className"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "="
              }), _jsx(_components.span, {
                style: {
                  color: "#E9F284"
                },
                children: "\""
              }), _jsx(_components.span, {
                style: {
                  color: "#F1FA8C"
                },
                children: "code-pre m-0"
              }), _jsx(_components.span, {
                style: {
                  color: "#E9F284"
                },
                children: "\""
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: " {"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "..."
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "props} />"
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "    "
              })]
            }), "\n", _jsx(_components.span, {
              "data-line": "",
              children: _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "  );"
              })
            }), "\n", _jsx(_components.span, {
              "data-line": "",
              children: _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "}"
              })
            })]
          })
        })]
      }), _jsxs(_components.figure, {
        "data-rehype-pretty-code-figure": "",
        children: [_jsx(_components.figcaption, {
          "data-rehype-pretty-code-title": "",
          "data-language": "css",
          "data-theme": "dracula",
          children: "app/globals.css"
        }), _jsx(_components.pre, {
          tabIndex: "0",
          "data-language": "css",
          "data-theme": "dracula",
          __rawstring__: ".code-block [data-rehype-pretty-code-figure] > pre {\n  background: #131419;\n  border-radius: 0.5rem;\n  border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);\n}\n",
          children: _jsxs(_components.code, {
            "data-line-numbers": "",
            "data-language": "css",
            "data-theme": "dracula",
            style: {
              display: "grid"
            },
            "data-line-numbers-max-digits": "1",
            children: [_jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#50FA7B",
                  fontStyle: "italic"
                },
                children: ".code-block"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: " ["
              }), _jsx(_components.span, {
                style: {
                  color: "#50FA7B",
                  fontStyle: "italic"
                },
                children: "data-rehype-pretty-code-figure"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "]"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: " > pre"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: " {"
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#8BE9FD"
                },
                children: "  background"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: ":"
              }), _jsx(_components.span, {
                style: {
                  color: "#BD93F9"
                },
                children: " #131419"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: ";"
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#8BE9FD"
                },
                children: "  border-radius"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: ":"
              }), _jsx(_components.span, {
                style: {
                  color: "#BD93F9"
                },
                children: " 0.5"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "rem"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: ";"
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  color: "#8BE9FD"
                },
                children: "  border"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: ":"
              }), _jsx(_components.span, {
                style: {
                  color: "#BD93F9"
                },
                children: " 1"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "px"
              }), _jsx(_components.span, {
                style: {
                  color: "#BD93F9"
                },
                children: " solid"
              }), _jsx(_components.span, {
                style: {
                  color: "#8BE9FD"
                },
                children: " color-mix"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "("
              }), _jsx(_components.span, {
                style: {
                  color: "#FFB86C",
                  fontStyle: "italic"
                },
                children: "in"
              }), _jsx(_components.span, {
                style: {
                  color: "#FFB86C",
                  fontStyle: "italic"
                },
                children: " oklch"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: ", "
              }), _jsx(_components.span, {
                style: {
                  color: "#8BE9FD"
                },
                children: "var"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "(--border) "
              }), _jsx(_components.span, {
                style: {
                  color: "#BD93F9"
                },
                children: "80"
              }), _jsx(_components.span, {
                style: {
                  color: "#FF79C6"
                },
                children: "%"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: ", "
              }), _jsx(_components.span, {
                style: {
                  color: "#BD93F9"
                },
                children: "transparent"
              }), _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: ");"
              })]
            }), "\n", _jsx(_components.span, {
              "data-line": "",
              children: _jsx(_components.span, {
                style: {
                  color: "#F8F8F2"
                },
                children: "}"
              })
            })]
          })
        })]
      })]
    }), "\n", _jsx(_components.h2, {
      id: "transformer-highlights",
      children: "Transformer highlights"
    }), "\n", _jsxs(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: [_jsx(_components.figcaption, {
        "data-rehype-pretty-code-title": "",
        "data-language": "csharp",
        "data-theme": "dracula",
        children: "CatalogApi/Program.cs"
      }), _jsx(_components.pre, {
        className: "has-diff has-focused",
        tabIndex: "0",
        "data-language": "csharp",
        "data-theme": "dracula",
        __rawstring__: "app.MapPost(\"/products\", async (CreateProductRequest request, CatalogContext db) =>\n{\n    if (string.IsNullOrWhiteSpace(request.Name)) // [!code focus]\n        return Results.ValidationProblem(new Dictionary\n        {\n            [\"Name\"] = [\"Name is required.\"]\n        });\n\n    var product = new Product(0, request.Name, request.Sku, request.Price); // [!code ++]\n    db.Products.Add(product); // [!code ++]\n    await db.SaveChangesAsync(); // [!code ++]\n    return Results.Created($\"/products/{product.Id}\", product); // [!code ++]\n    // return Results.Ok(request); // [!code --]\n});\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "csharp",
          "data-theme": "dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "app."
            }), _jsx(_components.span, {
              style: {
                color: "#50FA7B"
              },
              children: "MapPost"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                color: "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                color: "#F1FA8C"
              },
              children: "/products"
            }), _jsx(_components.span, {
              style: {
                color: "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "async"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: " ("
            }), _jsx(_components.span, {
              style: {
                color: "#8BE9FD",
                fontStyle: "italic"
              },
              children: "CreateProductRequest"
            }), _jsx(_components.span, {
              style: {
                color: "#FFB86C",
                fontStyle: "italic"
              },
              children: " request"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                color: "#8BE9FD",
                fontStyle: "italic"
              },
              children: "CatalogContext"
            }), _jsx(_components.span, {
              style: {
                color: "#FFB86C",
                fontStyle: "italic"
              },
              children: " db"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: ") "
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "=>"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "{"
            })
          }), "\n", _jsxs(_components.span, {
            className: "focused",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "    if"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: " ("
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "string"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "."
            }), _jsx(_components.span, {
              style: {
                color: "#50FA7B"
              },
              children: "IsNullOrWhiteSpace"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "(request.Name)) "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "        return"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: " Results."
            }), _jsx(_components.span, {
              style: {
                color: "#50FA7B"
              },
              children: "ValidationProblem"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "new"
            }), _jsx(_components.span, {
              style: {
                color: "#8BE9FD",
                fontStyle: "italic"
              },
              children: " Dictionary"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "string"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "string"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "[]>"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "        {"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "            ["
            }), _jsx(_components.span, {
              style: {
                color: "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                color: "#F1FA8C"
              },
              children: "Name"
            }), _jsx(_components.span, {
              style: {
                color: "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "] "
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: " ["
            }), _jsx(_components.span, {
              style: {
                color: "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                color: "#F1FA8C"
              },
              children: "Name is required."
            }), _jsx(_components.span, {
              style: {
                color: "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "]"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "        });"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            className: "diff add",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "    var"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: " product "
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: " new"
            }), _jsx(_components.span, {
              style: {
                color: "#8BE9FD",
                fontStyle: "italic"
              },
              children: " Product"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                color: "#BD93F9"
              },
              children: "0"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: ", request.Name, request.Sku, request.Price); "
            })]
          }), "\n", _jsxs(_components.span, {
            className: "diff add",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "    db.Products."
            }), _jsx(_components.span, {
              style: {
                color: "#50FA7B"
              },
              children: "Add"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "(product); "
            })]
          }), "\n", _jsxs(_components.span, {
            className: "diff add",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "    await"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: " db."
            }), _jsx(_components.span, {
              style: {
                color: "#50FA7B"
              },
              children: "SaveChangesAsync"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "(); "
            })]
          }), "\n", _jsxs(_components.span, {
            className: "diff add",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "    return"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: " Results."
            }), _jsx(_components.span, {
              style: {
                color: "#50FA7B"
              },
              children: "Created"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                color: "#E9F284"
              },
              children: "$\""
            }), _jsx(_components.span, {
              style: {
                color: "#F1FA8C"
              },
              children: "/products/"
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "{"
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "product"
            }), _jsx(_components.span, {
              style: {
                color: "#F1FA8C"
              },
              children: "."
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "Id"
            }), _jsx(_components.span, {
              style: {
                color: "#FF79C6"
              },
              children: "}"
            }), _jsx(_components.span, {
              style: {
                color: "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: ", product); "
            })]
          }), "\n", _jsx(_components.span, {
            className: "diff remove",
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#6272A4"
              },
              children: "    // return Results.Ok(request);"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#F8F8F2"
              },
              children: "});"
            })
          })]
        })
      })]
    }), "\n", _jsx(_components.h2, {
      id: "command-blocks",
      children: "Command blocks"
    }), "\n", _jsx(CommandBlock, {
      pnpm: "pnpm add @radix-ui/react-collapsible lucide-react",
      npm: "npm install @radix-ui/react-collapsible lucide-react",
      yarn: "yarn add @radix-ui/react-collapsible lucide-react",
      bun: "bun add @radix-ui/react-collapsible lucide-react"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}