[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-chakra-ui-chakra-ui-migrate":3,"mdc-w45vrw-key":52,"related-org-chakra-ui-chakra-ui-migrate":6466,"related-repo-chakra-ui-chakra-ui-migrate":6502},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":47,"sourceUrl":50,"mdContent":51},"chakra-ui-migrate","migrate Chakra UI projects to v3","Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes, and Next.js updates. Use this skill whenever a user is upgrading Chakra UI versions, encountering breaking changes after an upgrade, converting old v2 patterns (ColorModeScript, useColorModeValue, styleConfig, extendTheme, isDisabled, colorScheme, @chakra-ui\u002Ficons, framer-motion dependency), fixing compound component patterns, or asking about differences between Chakra UI v2 and v3 — even if they don't say \"migrate\" or \"upgrade\" explicitly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"chakra-ui","Chakra UI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fchakra-ui.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"Next.js","next-js",{"name":20,"slug":21,"type":15},"Migration","migration",{"name":23,"slug":24,"type":15},"UI Components","ui-components",{"name":26,"slug":27,"type":15},"Frontend","frontend",40503,"https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fchakra-ui","2026-07-12T08:48:25.08774",null,3621,[34,35,36,8,37,38,39,40,14,41,42,43,24,44,45,46],"a11y","accessible","ark-ui","component","css-in-js","dark-mode","design-system","react-components","reactjs","styled","ui-library","uikit","wai-aria",{"repoUrl":29,"stars":28,"forks":32,"topics":48,"description":49},[34,35,36,8,37,38,39,40,14,41,42,43,24,44,45,46],"Chakra UI is a component system for building SaaS products with speed ⚡️","https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fchakra-ui\u002Ftree\u002FHEAD\u002Fskills\u002Fchakra-ui-migrate","---\nname: chakra-ui-migrate\ndescription: >\n  Migrate Chakra UI projects from v2 to v3, covering package changes, codemods,\n  provider setup, color mode, prop renaming, compound components, theming,\n  recipes, and Next.js updates. Use this skill whenever a user is upgrading\n  Chakra UI versions, encountering breaking changes after an upgrade, converting\n  old v2 patterns (ColorModeScript, useColorModeValue, styleConfig, extendTheme,\n  isDisabled, colorScheme, @chakra-ui\u002Ficons, framer-motion dependency), fixing\n  compound component patterns, or asking about differences between Chakra UI v2\n  and v3 — even if they don't say \"migrate\" or \"upgrade\" explicitly.\n---\n\n# Chakra UI Migration: v2 → v3\n\nYou are guiding a developer through migrating their project from Chakra UI v2 to\nv3. Work through the steps below in order. Inspect the project first — never\nguess the package versions or framework.\n\n> **Node requirement:** Chakra UI v3 requires Node >= 20.x. Confirm before\n> proceeding if the environment is uncertain.\n\n---\n\n## Step 1 — Inspect the project\n\nRead these files to understand the current state:\n\n```\npackage.json\n```\n\nLook for:\n\n- Current `@chakra-ui\u002Freact` version (v2.x vs v3.x)\n- Related packages: `@chakra-ui\u002Ficons`, `@chakra-ui\u002Fhooks`,\n  `@chakra-ui\u002Fnext-js`, `@emotion\u002Fstyled`, `framer-motion`\n- Framework: Next.js (App Router or Pages Router), Vite, plain React\n- Package manager (from lockfiles: `pnpm-lock.yaml`, `yarn.lock`, `bun.lock`,\n  `package-lock.json`)\n\nAlso spot-check key files when helpful:\n\n- Provider \u002F theme setup (`_app.tsx`, `layout.tsx`, `theme.ts`)\n- Color mode usage (`ColorModeScript`, `useColorMode`, `useColorModeValue`)\n- Any component files showing heavy v2 patterns\n\n---\n\n## Step 2 — Update packages\n\n### Remove v2-only dependencies\n\n```bash\n# npm\nnpm uninstall @chakra-ui\u002Ficons @chakra-ui\u002Fhooks @chakra-ui\u002Fnext-js @emotion\u002Fstyled framer-motion\n\n# pnpm\npnpm remove @chakra-ui\u002Ficons @chakra-ui\u002Fhooks @chakra-ui\u002Fnext-js @emotion\u002Fstyled framer-motion\n\n# yarn\nyarn remove @chakra-ui\u002Ficons @chakra-ui\u002Fhooks @chakra-ui\u002Fnext-js @emotion\u002Fstyled framer-motion\n```\n\n`@emotion\u002Fstyled` and `framer-motion` are no longer required in v3.\n\n### Install v3 core packages\n\n```bash\n# npm\nnpm install @chakra-ui\u002Freact @emotion\u002Freact\n\n# pnpm\npnpm add @chakra-ui\u002Freact @emotion\u002Freact\n\n# yarn\nyarn add @chakra-ui\u002Freact @emotion\u002Freact\n```\n\n### Replacements for removed packages\n\n| Removed              | Replacement                                  |\n| -------------------- | -------------------------------------------- |\n| `@chakra-ui\u002Ficons`   | `lucide-react` or `react-icons`              |\n| `@chakra-ui\u002Fhooks`   | `react-use` or `usehooks-ts`                 |\n| `@chakra-ui\u002Fnext-js` | `asChild` prop pattern (see Next.js section) |\n\n---\n\n## Step 3 — Run the codemod\n\nThe official codemod handles most mechanical changes: component renames, prop\nupdates, import rewrites, and compound component restructuring. It does not\nreplace manual review — plan to audit the output.\n\n**Dry run first (no files changed):**\n\n```bash\nnpx @chakra-ui\u002Fcodemod upgrade --dry\n```\n\nReview what it proposes. When satisfied:\n\n```bash\nnpx @chakra-ui\u002Fcodemod upgrade\n```\n\nAfter the codemod, commit the changes before making manual edits so you have a\nclean diff to work from.\n\n---\n\n## Step 4 — Update the Provider\n\n### Old v2 pattern\n\n```tsx\n\u002F\u002F v2\nimport { ChakraProvider } from \"@chakra-ui\u002Freact\"\nimport theme from \".\u002Ftheme\"\n\n;\u003CChakraProvider theme={theme}>{children}\u003C\u002FChakraProvider>\n```\n\n### New v3 pattern (using Chakra CLI snippets)\n\nGenerate the provider and component snippets:\n\n```bash\nnpx @chakra-ui\u002Fcli snippet add\n```\n\nThis creates `components\u002Fui\u002Fprovider.tsx` (plus `toaster` and `tooltip`\nsnippets) and automatically installs required npm dependencies — including\n`next-themes`. Import and use it:\n\n```tsx\n\u002F\u002F v3 — app\u002Flayout.tsx (Next.js App Router)\nimport { Provider } from \"@\u002Fcomponents\u002Fui\u002Fprovider\"\n\n;\u003Chtml lang=\"en\" suppressHydrationWarning>\n  \u003Cbody>\n    \u003CProvider>{children}\u003C\u002FProvider>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\nThe `Provider` file includes `\"use client\"` — do not add it to `layout.tsx`. See\nthe Next.js section for Pages Router placement.\n\n### Custom theme in v3\n\nReplace `extendTheme` with `createSystem`:\n\n```ts\n\u002F\u002F v2\nimport { extendTheme } from \"@chakra-ui\u002Freact\"\n\u002F\u002F v3\nimport { createSystem, defaultConfig, defineConfig } from \"@chakra-ui\u002Freact\"\n\nexport const theme = extendTheme({ colors: { brand: { 500: \"#2196f3\" } } })\n\nconst config = defineConfig({\n  theme: { tokens: { colors: { brand: { 500: { value: \"#2196f3\" } } } } },\n})\nexport const system = createSystem(defaultConfig, config)\n```\n\nPass `system` to `ChakraProvider` via `value={system}`.\n\n---\n\n## Step 5 — Color mode migration\n\n### Remove all v2 color mode patterns\n\n```tsx\n\u002F\u002F REMOVE these v2 imports and usages:\nimport { ColorModeScript } from \"@chakra-ui\u002Freact\"\n\u002F\u002F ❌\nimport { useColorMode } from \"@chakra-ui\u002Freact\"\n\u002F\u002F ❌ (use next-themes)\nimport { useColorModeValue } from \"@chakra-ui\u002Freact\"\n\u002F\u002F ❌ (use CSS tokens)\nimport { DarkMode, LightMode } from \"@chakra-ui\u002Freact\"\n\n\u002F\u002F ❌\n\n\u002F\u002F Also remove from _document.tsx:\n;\u003CColorModeScript initialColorMode={theme.config.initialColorMode} \u002F> \u002F\u002F ❌\n```\n\n### v3 color mode approach\n\nColor mode is handled by `next-themes` via the generated `Provider`. Use\nsemantic tokens that automatically respond to the active color mode:\n\n```tsx\n\u002F\u002F Use Chakra semantic tokens — they flip automatically in dark mode\n\u003CBox color=\"fg.default\" bg=\"bg.subtle\">\n  ...\n\u003C\u002FBox>\n```\n\nFor a color mode toggle, use the generated `components\u002Fui\u002Fcolor-mode.tsx`\nsnippet or `useColorMode` from `next-themes` directly.\n\n---\n\n## Step 6 — Prop renames\n\nThese boolean and style props were renamed in v3 for consistency with HTML and\nmodern React conventions. The codemod catches most of these, but verify manually\nafterward.\n\n### Boolean props\n\n| v2                | v3              |\n| ----------------- | --------------- |\n| `isOpen`          | `open`          |\n| `defaultIsOpen`   | `defaultOpen`   |\n| `isDisabled`      | `disabled`      |\n| `isInvalid`       | `invalid`       |\n| `isRequired`      | `required`      |\n| `isReadOnly`      | `readOnly`      |\n| `isChecked`       | `checked`       |\n| `isLoaded`        | `loaded`        |\n| `isIndeterminate` | `indeterminate` |\n\n### Style and layout props\n\n| v2                | v3                          |\n| ----------------- | --------------------------- |\n| `colorScheme`     | `colorPalette`              |\n| `noOfLines`       | `lineClamp`                 |\n| `truncated`       | `truncate`                  |\n| `spacing` (Stack) | `gap`                       |\n| `apply`           | `textStyle` or `layerStyle` |\n\n### Nested style props\n\n```tsx\n\u002F\u002F v2 — sx with nested pseudo-selectors\n\u003CBox sx={{ \"&:hover\": { color: \"blue.500\" } }} \u002F>\n\n\u002F\u002F v3 — css prop with \"&\" selectors\n\u003CBox css={{ \"&:hover\": { color: \"blue.500\" } }} \u002F>\n```\n\n---\n\n## Step 7 — Component migrations\n\n### Renamed components\n\n| v2            | v3                                  |\n| ------------- | ----------------------------------- |\n| `Modal`       | `Dialog`                            |\n| `FormControl` | `Field`                             |\n| `Select`      | `NativeSelect`                      |\n| `AlertDialog` | `AlertDialog` (compound, see below) |\n\n`Modal` is the most common rename — every `\u003CModal>`, `\u003CModalOverlay>`,\n`\u003CModalContent>`, `\u003CModalHeader>`, `\u003CModalBody>`, `\u003CModalFooter>`, and\n`\u003CModalCloseButton>` becomes a `Dialog.*` compound part:\n\n```tsx\n\u002F\u002F v2\n\u003CModal isOpen={open} onClose={onClose}>\n  \u003CModalOverlay \u002F>\n  \u003CModalContent>\n    \u003CModalHeader>Title\u003C\u002FModalHeader>\n    \u003CModalBody>Body\u003C\u002FModalBody>\n    \u003CModalFooter>\u003CButton onClick={onClose}>Close\u003C\u002FButton>\u003C\u002FModalFooter>\n  \u003C\u002FModalContent>\n\u003C\u002FModal>\n\n\u002F\u002F v3\n\u003CDialog.Root open={open} onOpenChange={({ open }) => setOpen(open)}>\n  \u003CDialog.Backdrop \u002F>\n  \u003CDialog.Positioner>\n    \u003CDialog.Content>\n      \u003CDialog.Header>\u003CDialog.Title>Title\u003C\u002FDialog.Title>\u003C\u002FDialog.Header>\n      \u003CDialog.Body>Body\u003C\u002FDialog.Body>\n      \u003CDialog.Footer>\u003CButton onClick={() => setOpen(false)}>Close\u003C\u002FButton>\u003C\u002FDialog.Footer>\n      \u003CDialog.CloseTrigger \u002F>\n    \u003C\u002FDialog.Content>\n  \u003C\u002FDialog.Positioner>\n\u003C\u002FDialog.Root>\n```\n\n### Compound component rewrites\n\nv3 adopts a consistent compound component API. The codemod handles many of\nthese, but complex custom usage needs manual review.\n\n**Checkbox**\n\n```tsx\n\u002F\u002F v2\n\u003CCheckbox isChecked={val} onChange={fn}>Label\u003C\u002FCheckbox>\n\n\u002F\u002F v3\n\u003CCheckbox.Root checked={val} onCheckedChange={fn}>\n  \u003CCheckbox.Control>\u003CCheckbox.Indicator \u002F>\u003C\u002FCheckbox.Control>\n  \u003CCheckbox.Label>Label\u003C\u002FCheckbox.Label>\n\u003C\u002FCheckbox.Root>\n```\n\n**Progress**\n\n```tsx\n\u002F\u002F v2\n\u003CProgress value={60} colorScheme=\"blue\" \u002F>\n\n\u002F\u002F v3\n\u003CProgress.Root value={60} colorPalette=\"blue\">\n  \u003CProgress.Track>\u003CProgress.Range \u002F>\u003C\u002FProgress.Track>\n\u003C\u002FProgress.Root>\n```\n\n**Accordion**\n\n```tsx\n\u002F\u002F v2\n\u003CAccordion>\u003CAccordionItem>\u003CAccordionButton \u002F>\u003CAccordionPanel \u002F>\u003C\u002FAccordionItem>\u003C\u002FAccordion>\n\n\u002F\u002F v3\n\u003CAccordion.Root>\n  \u003CAccordion.Item value=\"item-1\">\n    \u003CAccordion.ItemTrigger \u002F>\n    \u003CAccordion.ItemContent \u002F>\n  \u003C\u002FAccordion.Item>\n\u003C\u002FAccordion.Root>\n```\n\n**FormControl → Field**\n\n```tsx\n\u002F\u002F v2\n\u003CFormControl isInvalid={!!error} isRequired>\n  \u003CFormLabel>Email\u003C\u002FFormLabel>\n  \u003CInput type=\"email\" \u002F>\n  \u003CFormErrorMessage>{error}\u003C\u002FFormErrorMessage>\n  \u003CFormHelperText>We'll never share your email.\u003C\u002FFormHelperText>\n\u003C\u002FFormControl>\n\n\u002F\u002F v3\n\u003CField.Root invalid={!!error} required>\n  \u003CField.Label>Email\u003C\u002FField.Label>\n  \u003CInput type=\"email\" \u002F>\n  \u003CField.ErrorText>{error}\u003C\u002FField.ErrorText>\n  \u003CField.HelpText>We'll never share your email.\u003C\u002FField.HelpText>\n\u003C\u002FField.Root>\n```\n\nAll `FormControl` sub-parts map to `Field.*`:\n\n- `FormLabel` → `Field.Label`\n- `FormErrorMessage` → `Field.ErrorText`\n- `FormHelperText` → `Field.HelpText`\n- `FormControl` props `isInvalid`, `isRequired`, `isDisabled` → `invalid`,\n  `required`, `disabled`\n\n**Dialog \u002F Drawer \u002F Menu \u002F Tabs** follow the same compound pattern: use\n`ComponentName.Root`, `.Trigger`, `.Content`, `.Item`, etc. Check the Chakra UI\nv3 docs for the specific compound API for each.\n\n### Next.js Image and Link (replacing @chakra-ui\u002Fnext-js)\n\n```tsx\n\u002F\u002F v2 — @chakra-ui\u002Fnext-js\nimport { LinkOverlay } from \"@chakra-ui\u002Fnext-js\"\n\n\u002F\u002F v3 — asChild pattern\nimport NextLink from \"next\u002Flink\"\n\u003CChakraLink asChild>\u003CNextLink href=\"\u002Fabout\">About\u003C\u002FNextLink>\u003C\u002FChakraLink>\n\nimport NextImage from \"next\u002Fimage\"\n\u003CChakraImage asChild>\u003CNextImage src=\"...\" alt=\"...\" \u002F>\u003C\u002FChakraImage>\n```\n\n---\n\n## Step 8 — Theming migration\n\n### styleConfig and multiStyleConfig → recipes\n\n```ts\n\u002F\u002F v3 — single component (recipe)\nimport { defineRecipe } from \"@chakra-ui\u002Freact\"\n\n\u002F\u002F v2\nconst buttonStyle = {\n  baseStyle: { fontWeight: \"bold\" },\n  variants: { solid: { bg: \"blue.500\" } },\n  defaultProps: { variant: \"solid\" },\n}\n\nconst buttonRecipe = defineRecipe({\n  base: { fontWeight: \"bold\" },\n  variants: { variant: { solid: { bg: \"blue.500\" } } },\n  defaultVariants: { variant: \"solid\" },\n})\n```\n\n```ts\n\u002F\u002F v3 — slot recipe\nimport { defineSlotRecipe } from \"@chakra-ui\u002Freact\"\n\n\u002F\u002F v2 — multiStyleConfig (multi-part component)\nconst cardStyle = multiStyleConfig({\n  parts: [\"root\", \"header\"],\n  baseStyle: { root: { bg: \"white\" }, header: { fontWeight: \"bold\" } },\n})\n\nconst cardSlotRecipe = defineSlotRecipe({\n  slots: [\"root\", \"header\"],\n  base: { root: { bg: \"white\" }, header: { fontWeight: \"bold\" } },\n})\n```\n\n### Typegen for custom tokens\n\nAfter adding custom tokens, semantic tokens, recipes, or slot recipes, run\ntypegen to keep TypeScript types in sync:\n\n```bash\nnpx @chakra-ui\u002Fcli typegen .\u002Ftheme.ts\n```\n\n> **Complex theme migrations** — if you're moving a large v2 theme with many\n> custom tokens, semantic tokens, or multi-part component styles, use the\n> `chakra-ui-theming` skill. It covers the full token\u002Frecipe\u002Fslot-recipe API in\n> depth and is a better guide than this section alone.\n\n---\n\n## Step 9 — Next.js specifics\n\n### App Router\n\n- Place `\u003CProvider>` in `app\u002Flayout.tsx` (Server Component — no `\"use client\"`)\n- The generated `components\u002Fui\u002Fprovider.tsx` already has `\"use client\"`\n- Add `suppressHydrationWarning` to `\u003Chtml>` to prevent color mode flicker\n- Do not wrap the entire app or layout in `\"use client\"`\n\n### Pages Router\n\n```tsx\n\u002F\u002F pages\u002F_app.js\nimport { Provider } from \"@\u002Fcomponents\u002Fui\u002Fprovider\"\n\nexport default function App({ Component, pageProps }) {\n  return (\n    \u003CProvider>\n      \u003CComponent {...pageProps} \u002F>\n    \u003C\u002FProvider>\n  )\n}\n```\n\nRemove any `ColorModeScript` from `pages\u002F_document.tsx` — it is not used in v3.\n\n---\n\n## Step 10 — Validation checklist\n\nWork through this after the migration is complete:\n\n- [ ] Reinstall dependencies: `npm install` \u002F `pnpm install`\n- [ ] TypeScript: `npx tsc --noEmit` — resolve all type errors\n- [ ] Lint: `npm run lint`\n- [ ] Build: `npm run build`\n- [ ] Visually verify color mode toggle (light ↔ dark)\n- [ ] Test interactive components: Dialog, Drawer, Menu, Tabs, Accordion\n- [ ] Test form components: Checkbox, Select\u002FNativeSelect, Input, Radio\n- [ ] Check for visual regressions across key pages\n- [ ] Search codebase for leftover v2 imports:\n  ```bash\n  grep -r \"ColorModeScript\\|useColorModeValue\\|extendTheme\\|styleConfig\\|@chakra-ui\u002Ficons\\|@chakra-ui\u002Fnext-js\" src\u002F\n  ```\n\n---\n\n## Clarifying questions (when context is unclear)\n\nIf the user's version, framework, or scope is ambiguous, ask:\n\n1. \"What version of `@chakra-ui\u002Freact` are you on right now?\"\n2. \"Are you using Next.js App Router, Pages Router, Vite, or plain React?\"\n3. \"Are you migrating the full codebase or just specific components?\"\n\nState assumptions clearly if you proceed without asking.\n",{"data":53,"body":54},{"name":4,"description":6},{"type":55,"children":56},"root",[57,66,72,87,91,98,103,116,121,219,224,284,287,293,300,465,482,488,591,597,702,705,711,716,724,754,759,782,787,790,796,802,949,955,960,989,1025,1209,1236,1242,1263,1685,1713,1716,1722,1728,1986,1992,2011,2110,2137,2140,2146,2151,2157,2368,2374,2508,2514,2684,2687,2693,2699,2804,2873,3492,3498,3503,3511,3730,3738,3919,3927,4129,4137,4537,4556,4647,4686,4692,4980,4983,4989,4995,5427,5872,5878,5883,5911,5932,5935,5941,5947,6024,6030,6221,6240,6243,6249,6254,6415,6418,6424,6429,6455,6460],{"type":58,"tag":59,"props":60,"children":62},"element","h1",{"id":61},"chakra-ui-migration-v2-v3",[63],{"type":64,"value":65},"text","Chakra UI Migration: v2 → v3",{"type":58,"tag":67,"props":68,"children":69},"p",{},[70],{"type":64,"value":71},"You are guiding a developer through migrating their project from Chakra UI v2 to\nv3. Work through the steps below in order. Inspect the project first — never\nguess the package versions or framework.",{"type":58,"tag":73,"props":74,"children":75},"blockquote",{},[76],{"type":58,"tag":67,"props":77,"children":78},{},[79,85],{"type":58,"tag":80,"props":81,"children":82},"strong",{},[83],{"type":64,"value":84},"Node requirement:",{"type":64,"value":86}," Chakra UI v3 requires Node >= 20.x. Confirm before\nproceeding if the environment is uncertain.",{"type":58,"tag":88,"props":89,"children":90},"hr",{},[],{"type":58,"tag":92,"props":93,"children":95},"h2",{"id":94},"step-1-inspect-the-project",[96],{"type":64,"value":97},"Step 1 — Inspect the project",{"type":58,"tag":67,"props":99,"children":100},{},[101],{"type":64,"value":102},"Read these files to understand the current state:",{"type":58,"tag":104,"props":105,"children":109},"pre",{"className":106,"code":108,"language":64},[107],"language-text","package.json\n",[110],{"type":58,"tag":111,"props":112,"children":114},"code",{"__ignoreMap":113},"",[115],{"type":64,"value":108},{"type":58,"tag":67,"props":117,"children":118},{},[119],{"type":64,"value":120},"Look for:",{"type":58,"tag":122,"props":123,"children":124},"ul",{},[125,139,180,185],{"type":58,"tag":126,"props":127,"children":128},"li",{},[129,131,137],{"type":64,"value":130},"Current ",{"type":58,"tag":111,"props":132,"children":134},{"className":133},[],[135],{"type":64,"value":136},"@chakra-ui\u002Freact",{"type":64,"value":138}," version (v2.x vs v3.x)",{"type":58,"tag":126,"props":140,"children":141},{},[142,144,150,152,158,160,166,167,173,174],{"type":64,"value":143},"Related packages: ",{"type":58,"tag":111,"props":145,"children":147},{"className":146},[],[148],{"type":64,"value":149},"@chakra-ui\u002Ficons",{"type":64,"value":151},", ",{"type":58,"tag":111,"props":153,"children":155},{"className":154},[],[156],{"type":64,"value":157},"@chakra-ui\u002Fhooks",{"type":64,"value":159},",\n",{"type":58,"tag":111,"props":161,"children":163},{"className":162},[],[164],{"type":64,"value":165},"@chakra-ui\u002Fnext-js",{"type":64,"value":151},{"type":58,"tag":111,"props":168,"children":170},{"className":169},[],[171],{"type":64,"value":172},"@emotion\u002Fstyled",{"type":64,"value":151},{"type":58,"tag":111,"props":175,"children":177},{"className":176},[],[178],{"type":64,"value":179},"framer-motion",{"type":58,"tag":126,"props":181,"children":182},{},[183],{"type":64,"value":184},"Framework: Next.js (App Router or Pages Router), Vite, plain React",{"type":58,"tag":126,"props":186,"children":187},{},[188,190,196,197,203,204,210,211,217],{"type":64,"value":189},"Package manager (from lockfiles: ",{"type":58,"tag":111,"props":191,"children":193},{"className":192},[],[194],{"type":64,"value":195},"pnpm-lock.yaml",{"type":64,"value":151},{"type":58,"tag":111,"props":198,"children":200},{"className":199},[],[201],{"type":64,"value":202},"yarn.lock",{"type":64,"value":151},{"type":58,"tag":111,"props":205,"children":207},{"className":206},[],[208],{"type":64,"value":209},"bun.lock",{"type":64,"value":159},{"type":58,"tag":111,"props":212,"children":214},{"className":213},[],[215],{"type":64,"value":216},"package-lock.json",{"type":64,"value":218},")",{"type":58,"tag":67,"props":220,"children":221},{},[222],{"type":64,"value":223},"Also spot-check key files when helpful:",{"type":58,"tag":122,"props":225,"children":226},{},[227,253,279],{"type":58,"tag":126,"props":228,"children":229},{},[230,232,238,239,245,246,252],{"type":64,"value":231},"Provider \u002F theme setup (",{"type":58,"tag":111,"props":233,"children":235},{"className":234},[],[236],{"type":64,"value":237},"_app.tsx",{"type":64,"value":151},{"type":58,"tag":111,"props":240,"children":242},{"className":241},[],[243],{"type":64,"value":244},"layout.tsx",{"type":64,"value":151},{"type":58,"tag":111,"props":247,"children":249},{"className":248},[],[250],{"type":64,"value":251},"theme.ts",{"type":64,"value":218},{"type":58,"tag":126,"props":254,"children":255},{},[256,258,264,265,271,272,278],{"type":64,"value":257},"Color mode usage (",{"type":58,"tag":111,"props":259,"children":261},{"className":260},[],[262],{"type":64,"value":263},"ColorModeScript",{"type":64,"value":151},{"type":58,"tag":111,"props":266,"children":268},{"className":267},[],[269],{"type":64,"value":270},"useColorMode",{"type":64,"value":151},{"type":58,"tag":111,"props":273,"children":275},{"className":274},[],[276],{"type":64,"value":277},"useColorModeValue",{"type":64,"value":218},{"type":58,"tag":126,"props":280,"children":281},{},[282],{"type":64,"value":283},"Any component files showing heavy v2 patterns",{"type":58,"tag":88,"props":285,"children":286},{},[],{"type":58,"tag":92,"props":288,"children":290},{"id":289},"step-2-update-packages",[291],{"type":64,"value":292},"Step 2 — Update packages",{"type":58,"tag":294,"props":295,"children":297},"h3",{"id":296},"remove-v2-only-dependencies",[298],{"type":64,"value":299},"Remove v2-only dependencies",{"type":58,"tag":104,"props":301,"children":305},{"className":302,"code":303,"language":304,"meta":113,"style":113},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# npm\nnpm uninstall @chakra-ui\u002Ficons @chakra-ui\u002Fhooks @chakra-ui\u002Fnext-js @emotion\u002Fstyled framer-motion\n\n# pnpm\npnpm remove @chakra-ui\u002Ficons @chakra-ui\u002Fhooks @chakra-ui\u002Fnext-js @emotion\u002Fstyled framer-motion\n\n# yarn\nyarn remove @chakra-ui\u002Ficons @chakra-ui\u002Fhooks @chakra-ui\u002Fnext-js @emotion\u002Fstyled framer-motion\n","bash",[306],{"type":58,"tag":111,"props":307,"children":308},{"__ignoreMap":113},[309,321,362,372,381,415,423,432],{"type":58,"tag":310,"props":311,"children":314},"span",{"class":312,"line":313},"line",1,[315],{"type":58,"tag":310,"props":316,"children":318},{"style":317},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[319],{"type":64,"value":320},"# npm\n",{"type":58,"tag":310,"props":322,"children":324},{"class":312,"line":323},2,[325,331,337,342,347,352,357],{"type":58,"tag":310,"props":326,"children":328},{"style":327},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[329],{"type":64,"value":330},"npm",{"type":58,"tag":310,"props":332,"children":334},{"style":333},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[335],{"type":64,"value":336}," uninstall",{"type":58,"tag":310,"props":338,"children":339},{"style":333},[340],{"type":64,"value":341}," @chakra-ui\u002Ficons",{"type":58,"tag":310,"props":343,"children":344},{"style":333},[345],{"type":64,"value":346}," @chakra-ui\u002Fhooks",{"type":58,"tag":310,"props":348,"children":349},{"style":333},[350],{"type":64,"value":351}," @chakra-ui\u002Fnext-js",{"type":58,"tag":310,"props":353,"children":354},{"style":333},[355],{"type":64,"value":356}," @emotion\u002Fstyled",{"type":58,"tag":310,"props":358,"children":359},{"style":333},[360],{"type":64,"value":361}," framer-motion\n",{"type":58,"tag":310,"props":363,"children":365},{"class":312,"line":364},3,[366],{"type":58,"tag":310,"props":367,"children":369},{"emptyLinePlaceholder":368},true,[370],{"type":64,"value":371},"\n",{"type":58,"tag":310,"props":373,"children":375},{"class":312,"line":374},4,[376],{"type":58,"tag":310,"props":377,"children":378},{"style":317},[379],{"type":64,"value":380},"# pnpm\n",{"type":58,"tag":310,"props":382,"children":384},{"class":312,"line":383},5,[385,390,395,399,403,407,411],{"type":58,"tag":310,"props":386,"children":387},{"style":327},[388],{"type":64,"value":389},"pnpm",{"type":58,"tag":310,"props":391,"children":392},{"style":333},[393],{"type":64,"value":394}," remove",{"type":58,"tag":310,"props":396,"children":397},{"style":333},[398],{"type":64,"value":341},{"type":58,"tag":310,"props":400,"children":401},{"style":333},[402],{"type":64,"value":346},{"type":58,"tag":310,"props":404,"children":405},{"style":333},[406],{"type":64,"value":351},{"type":58,"tag":310,"props":408,"children":409},{"style":333},[410],{"type":64,"value":356},{"type":58,"tag":310,"props":412,"children":413},{"style":333},[414],{"type":64,"value":361},{"type":58,"tag":310,"props":416,"children":418},{"class":312,"line":417},6,[419],{"type":58,"tag":310,"props":420,"children":421},{"emptyLinePlaceholder":368},[422],{"type":64,"value":371},{"type":58,"tag":310,"props":424,"children":426},{"class":312,"line":425},7,[427],{"type":58,"tag":310,"props":428,"children":429},{"style":317},[430],{"type":64,"value":431},"# yarn\n",{"type":58,"tag":310,"props":433,"children":435},{"class":312,"line":434},8,[436,441,445,449,453,457,461],{"type":58,"tag":310,"props":437,"children":438},{"style":327},[439],{"type":64,"value":440},"yarn",{"type":58,"tag":310,"props":442,"children":443},{"style":333},[444],{"type":64,"value":394},{"type":58,"tag":310,"props":446,"children":447},{"style":333},[448],{"type":64,"value":341},{"type":58,"tag":310,"props":450,"children":451},{"style":333},[452],{"type":64,"value":346},{"type":58,"tag":310,"props":454,"children":455},{"style":333},[456],{"type":64,"value":351},{"type":58,"tag":310,"props":458,"children":459},{"style":333},[460],{"type":64,"value":356},{"type":58,"tag":310,"props":462,"children":463},{"style":333},[464],{"type":64,"value":361},{"type":58,"tag":67,"props":466,"children":467},{},[468,473,475,480],{"type":58,"tag":111,"props":469,"children":471},{"className":470},[],[472],{"type":64,"value":172},{"type":64,"value":474}," and ",{"type":58,"tag":111,"props":476,"children":478},{"className":477},[],[479],{"type":64,"value":179},{"type":64,"value":481}," are no longer required in v3.",{"type":58,"tag":294,"props":483,"children":485},{"id":484},"install-v3-core-packages",[486],{"type":64,"value":487},"Install v3 core packages",{"type":58,"tag":104,"props":489,"children":491},{"className":302,"code":490,"language":304,"meta":113,"style":113},"# npm\nnpm install @chakra-ui\u002Freact @emotion\u002Freact\n\n# pnpm\npnpm add @chakra-ui\u002Freact @emotion\u002Freact\n\n# yarn\nyarn add @chakra-ui\u002Freact @emotion\u002Freact\n",[492],{"type":58,"tag":111,"props":493,"children":494},{"__ignoreMap":113},[495,502,524,531,538,558,565,572],{"type":58,"tag":310,"props":496,"children":497},{"class":312,"line":313},[498],{"type":58,"tag":310,"props":499,"children":500},{"style":317},[501],{"type":64,"value":320},{"type":58,"tag":310,"props":503,"children":504},{"class":312,"line":323},[505,509,514,519],{"type":58,"tag":310,"props":506,"children":507},{"style":327},[508],{"type":64,"value":330},{"type":58,"tag":310,"props":510,"children":511},{"style":333},[512],{"type":64,"value":513}," install",{"type":58,"tag":310,"props":515,"children":516},{"style":333},[517],{"type":64,"value":518}," @chakra-ui\u002Freact",{"type":58,"tag":310,"props":520,"children":521},{"style":333},[522],{"type":64,"value":523}," @emotion\u002Freact\n",{"type":58,"tag":310,"props":525,"children":526},{"class":312,"line":364},[527],{"type":58,"tag":310,"props":528,"children":529},{"emptyLinePlaceholder":368},[530],{"type":64,"value":371},{"type":58,"tag":310,"props":532,"children":533},{"class":312,"line":374},[534],{"type":58,"tag":310,"props":535,"children":536},{"style":317},[537],{"type":64,"value":380},{"type":58,"tag":310,"props":539,"children":540},{"class":312,"line":383},[541,545,550,554],{"type":58,"tag":310,"props":542,"children":543},{"style":327},[544],{"type":64,"value":389},{"type":58,"tag":310,"props":546,"children":547},{"style":333},[548],{"type":64,"value":549}," add",{"type":58,"tag":310,"props":551,"children":552},{"style":333},[553],{"type":64,"value":518},{"type":58,"tag":310,"props":555,"children":556},{"style":333},[557],{"type":64,"value":523},{"type":58,"tag":310,"props":559,"children":560},{"class":312,"line":417},[561],{"type":58,"tag":310,"props":562,"children":563},{"emptyLinePlaceholder":368},[564],{"type":64,"value":371},{"type":58,"tag":310,"props":566,"children":567},{"class":312,"line":425},[568],{"type":58,"tag":310,"props":569,"children":570},{"style":317},[571],{"type":64,"value":431},{"type":58,"tag":310,"props":573,"children":574},{"class":312,"line":434},[575,579,583,587],{"type":58,"tag":310,"props":576,"children":577},{"style":327},[578],{"type":64,"value":440},{"type":58,"tag":310,"props":580,"children":581},{"style":333},[582],{"type":64,"value":549},{"type":58,"tag":310,"props":584,"children":585},{"style":333},[586],{"type":64,"value":518},{"type":58,"tag":310,"props":588,"children":589},{"style":333},[590],{"type":64,"value":523},{"type":58,"tag":294,"props":592,"children":594},{"id":593},"replacements-for-removed-packages",[595],{"type":64,"value":596},"Replacements for removed packages",{"type":58,"tag":598,"props":599,"children":600},"table",{},[601,620],{"type":58,"tag":602,"props":603,"children":604},"thead",{},[605],{"type":58,"tag":606,"props":607,"children":608},"tr",{},[609,615],{"type":58,"tag":610,"props":611,"children":612},"th",{},[613],{"type":64,"value":614},"Removed",{"type":58,"tag":610,"props":616,"children":617},{},[618],{"type":64,"value":619},"Replacement",{"type":58,"tag":621,"props":622,"children":623},"tbody",{},[624,653,680],{"type":58,"tag":606,"props":625,"children":626},{},[627,636],{"type":58,"tag":628,"props":629,"children":630},"td",{},[631],{"type":58,"tag":111,"props":632,"children":634},{"className":633},[],[635],{"type":64,"value":149},{"type":58,"tag":628,"props":637,"children":638},{},[639,645,647],{"type":58,"tag":111,"props":640,"children":642},{"className":641},[],[643],{"type":64,"value":644},"lucide-react",{"type":64,"value":646}," or ",{"type":58,"tag":111,"props":648,"children":650},{"className":649},[],[651],{"type":64,"value":652},"react-icons",{"type":58,"tag":606,"props":654,"children":655},{},[656,664],{"type":58,"tag":628,"props":657,"children":658},{},[659],{"type":58,"tag":111,"props":660,"children":662},{"className":661},[],[663],{"type":64,"value":157},{"type":58,"tag":628,"props":665,"children":666},{},[667,673,674],{"type":58,"tag":111,"props":668,"children":670},{"className":669},[],[671],{"type":64,"value":672},"react-use",{"type":64,"value":646},{"type":58,"tag":111,"props":675,"children":677},{"className":676},[],[678],{"type":64,"value":679},"usehooks-ts",{"type":58,"tag":606,"props":681,"children":682},{},[683,691],{"type":58,"tag":628,"props":684,"children":685},{},[686],{"type":58,"tag":111,"props":687,"children":689},{"className":688},[],[690],{"type":64,"value":165},{"type":58,"tag":628,"props":692,"children":693},{},[694,700],{"type":58,"tag":111,"props":695,"children":697},{"className":696},[],[698],{"type":64,"value":699},"asChild",{"type":64,"value":701}," prop pattern (see Next.js section)",{"type":58,"tag":88,"props":703,"children":704},{},[],{"type":58,"tag":92,"props":706,"children":708},{"id":707},"step-3-run-the-codemod",[709],{"type":64,"value":710},"Step 3 — Run the codemod",{"type":58,"tag":67,"props":712,"children":713},{},[714],{"type":64,"value":715},"The official codemod handles most mechanical changes: component renames, prop\nupdates, import rewrites, and compound component restructuring. It does not\nreplace manual review — plan to audit the output.",{"type":58,"tag":67,"props":717,"children":718},{},[719],{"type":58,"tag":80,"props":720,"children":721},{},[722],{"type":64,"value":723},"Dry run first (no files changed):",{"type":58,"tag":104,"props":725,"children":727},{"className":302,"code":726,"language":304,"meta":113,"style":113},"npx @chakra-ui\u002Fcodemod upgrade --dry\n",[728],{"type":58,"tag":111,"props":729,"children":730},{"__ignoreMap":113},[731],{"type":58,"tag":310,"props":732,"children":733},{"class":312,"line":313},[734,739,744,749],{"type":58,"tag":310,"props":735,"children":736},{"style":327},[737],{"type":64,"value":738},"npx",{"type":58,"tag":310,"props":740,"children":741},{"style":333},[742],{"type":64,"value":743}," @chakra-ui\u002Fcodemod",{"type":58,"tag":310,"props":745,"children":746},{"style":333},[747],{"type":64,"value":748}," upgrade",{"type":58,"tag":310,"props":750,"children":751},{"style":333},[752],{"type":64,"value":753}," --dry\n",{"type":58,"tag":67,"props":755,"children":756},{},[757],{"type":64,"value":758},"Review what it proposes. When satisfied:",{"type":58,"tag":104,"props":760,"children":762},{"className":302,"code":761,"language":304,"meta":113,"style":113},"npx @chakra-ui\u002Fcodemod upgrade\n",[763],{"type":58,"tag":111,"props":764,"children":765},{"__ignoreMap":113},[766],{"type":58,"tag":310,"props":767,"children":768},{"class":312,"line":313},[769,773,777],{"type":58,"tag":310,"props":770,"children":771},{"style":327},[772],{"type":64,"value":738},{"type":58,"tag":310,"props":774,"children":775},{"style":333},[776],{"type":64,"value":743},{"type":58,"tag":310,"props":778,"children":779},{"style":333},[780],{"type":64,"value":781}," upgrade\n",{"type":58,"tag":67,"props":783,"children":784},{},[785],{"type":64,"value":786},"After the codemod, commit the changes before making manual edits so you have a\nclean diff to work from.",{"type":58,"tag":88,"props":788,"children":789},{},[],{"type":58,"tag":92,"props":791,"children":793},{"id":792},"step-4-update-the-provider",[794],{"type":64,"value":795},"Step 4 — Update the Provider",{"type":58,"tag":294,"props":797,"children":799},{"id":798},"old-v2-pattern",[800],{"type":64,"value":801},"Old v2 pattern",{"type":58,"tag":104,"props":803,"children":807},{"className":804,"code":805,"language":806,"meta":113,"style":113},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F v2\nimport { ChakraProvider } from \"@chakra-ui\u002Freact\"\nimport theme from \".\u002Ftheme\"\n\n;\u003CChakraProvider theme={theme}>{children}\u003C\u002FChakraProvider>\n","tsx",[808],{"type":58,"tag":111,"props":809,"children":810},{"__ignoreMap":113},[811,819,864,894,901],{"type":58,"tag":310,"props":812,"children":813},{"class":312,"line":313},[814],{"type":58,"tag":310,"props":815,"children":816},{"style":317},[817],{"type":64,"value":818},"\u002F\u002F v2\n",{"type":58,"tag":310,"props":820,"children":821},{"class":312,"line":323},[822,828,834,840,845,850,855,859],{"type":58,"tag":310,"props":823,"children":825},{"style":824},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[826],{"type":64,"value":827},"import",{"type":58,"tag":310,"props":829,"children":831},{"style":830},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[832],{"type":64,"value":833}," {",{"type":58,"tag":310,"props":835,"children":837},{"style":836},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[838],{"type":64,"value":839}," ChakraProvider",{"type":58,"tag":310,"props":841,"children":842},{"style":830},[843],{"type":64,"value":844}," }",{"type":58,"tag":310,"props":846,"children":847},{"style":824},[848],{"type":64,"value":849}," from",{"type":58,"tag":310,"props":851,"children":852},{"style":830},[853],{"type":64,"value":854}," \"",{"type":58,"tag":310,"props":856,"children":857},{"style":333},[858],{"type":64,"value":136},{"type":58,"tag":310,"props":860,"children":861},{"style":830},[862],{"type":64,"value":863},"\"\n",{"type":58,"tag":310,"props":865,"children":866},{"class":312,"line":364},[867,871,876,881,885,890],{"type":58,"tag":310,"props":868,"children":869},{"style":824},[870],{"type":64,"value":827},{"type":58,"tag":310,"props":872,"children":873},{"style":836},[874],{"type":64,"value":875}," theme ",{"type":58,"tag":310,"props":877,"children":878},{"style":824},[879],{"type":64,"value":880},"from",{"type":58,"tag":310,"props":882,"children":883},{"style":830},[884],{"type":64,"value":854},{"type":58,"tag":310,"props":886,"children":887},{"style":333},[888],{"type":64,"value":889},".\u002Ftheme",{"type":58,"tag":310,"props":891,"children":892},{"style":830},[893],{"type":64,"value":863},{"type":58,"tag":310,"props":895,"children":896},{"class":312,"line":374},[897],{"type":58,"tag":310,"props":898,"children":899},{"emptyLinePlaceholder":368},[900],{"type":64,"value":371},{"type":58,"tag":310,"props":902,"children":903},{"class":312,"line":383},[904,909,914,919,924,929,934,939,944],{"type":58,"tag":310,"props":905,"children":906},{"style":830},[907],{"type":64,"value":908},";\u003C",{"type":58,"tag":310,"props":910,"children":911},{"style":836},[912],{"type":64,"value":913},"ChakraProvider theme",{"type":58,"tag":310,"props":915,"children":916},{"style":830},[917],{"type":64,"value":918},"={",{"type":58,"tag":310,"props":920,"children":921},{"style":836},[922],{"type":64,"value":923},"theme",{"type":58,"tag":310,"props":925,"children":926},{"style":830},[927],{"type":64,"value":928},"}>{",{"type":58,"tag":310,"props":930,"children":931},{"style":836},[932],{"type":64,"value":933},"children",{"type":58,"tag":310,"props":935,"children":936},{"style":830},[937],{"type":64,"value":938},"}\u003C\u002F",{"type":58,"tag":310,"props":940,"children":941},{"style":836},[942],{"type":64,"value":943},"ChakraProvider",{"type":58,"tag":310,"props":945,"children":946},{"style":830},[947],{"type":64,"value":948},">\n",{"type":58,"tag":294,"props":950,"children":952},{"id":951},"new-v3-pattern-using-chakra-cli-snippets",[953],{"type":64,"value":954},"New v3 pattern (using Chakra CLI snippets)",{"type":58,"tag":67,"props":956,"children":957},{},[958],{"type":64,"value":959},"Generate the provider and component snippets:",{"type":58,"tag":104,"props":961,"children":963},{"className":302,"code":962,"language":304,"meta":113,"style":113},"npx @chakra-ui\u002Fcli snippet add\n",[964],{"type":58,"tag":111,"props":965,"children":966},{"__ignoreMap":113},[967],{"type":58,"tag":310,"props":968,"children":969},{"class":312,"line":313},[970,974,979,984],{"type":58,"tag":310,"props":971,"children":972},{"style":327},[973],{"type":64,"value":738},{"type":58,"tag":310,"props":975,"children":976},{"style":333},[977],{"type":64,"value":978}," @chakra-ui\u002Fcli",{"type":58,"tag":310,"props":980,"children":981},{"style":333},[982],{"type":64,"value":983}," snippet",{"type":58,"tag":310,"props":985,"children":986},{"style":333},[987],{"type":64,"value":988}," add\n",{"type":58,"tag":67,"props":990,"children":991},{},[992,994,1000,1002,1008,1009,1015,1017,1023],{"type":64,"value":993},"This creates ",{"type":58,"tag":111,"props":995,"children":997},{"className":996},[],[998],{"type":64,"value":999},"components\u002Fui\u002Fprovider.tsx",{"type":64,"value":1001}," (plus ",{"type":58,"tag":111,"props":1003,"children":1005},{"className":1004},[],[1006],{"type":64,"value":1007},"toaster",{"type":64,"value":474},{"type":58,"tag":111,"props":1010,"children":1012},{"className":1011},[],[1013],{"type":64,"value":1014},"tooltip",{"type":64,"value":1016},"\nsnippets) and automatically installs required npm dependencies — including\n",{"type":58,"tag":111,"props":1018,"children":1020},{"className":1019},[],[1021],{"type":64,"value":1022},"next-themes",{"type":64,"value":1024},". Import and use it:",{"type":58,"tag":104,"props":1026,"children":1028},{"className":804,"code":1027,"language":806,"meta":113,"style":113},"\u002F\u002F v3 — app\u002Flayout.tsx (Next.js App Router)\nimport { Provider } from \"@\u002Fcomponents\u002Fui\u002Fprovider\"\n\n;\u003Chtml lang=\"en\" suppressHydrationWarning>\n  \u003Cbody>\n    \u003CProvider>{children}\u003C\u002FProvider>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[1029],{"type":58,"tag":111,"props":1030,"children":1031},{"__ignoreMap":113},[1032,1040,1077,1084,1124,1142,1176,1192],{"type":58,"tag":310,"props":1033,"children":1034},{"class":312,"line":313},[1035],{"type":58,"tag":310,"props":1036,"children":1037},{"style":317},[1038],{"type":64,"value":1039},"\u002F\u002F v3 — app\u002Flayout.tsx (Next.js App Router)\n",{"type":58,"tag":310,"props":1041,"children":1042},{"class":312,"line":323},[1043,1047,1051,1056,1060,1064,1068,1073],{"type":58,"tag":310,"props":1044,"children":1045},{"style":824},[1046],{"type":64,"value":827},{"type":58,"tag":310,"props":1048,"children":1049},{"style":830},[1050],{"type":64,"value":833},{"type":58,"tag":310,"props":1052,"children":1053},{"style":836},[1054],{"type":64,"value":1055}," Provider",{"type":58,"tag":310,"props":1057,"children":1058},{"style":830},[1059],{"type":64,"value":844},{"type":58,"tag":310,"props":1061,"children":1062},{"style":824},[1063],{"type":64,"value":849},{"type":58,"tag":310,"props":1065,"children":1066},{"style":830},[1067],{"type":64,"value":854},{"type":58,"tag":310,"props":1069,"children":1070},{"style":333},[1071],{"type":64,"value":1072},"@\u002Fcomponents\u002Fui\u002Fprovider",{"type":58,"tag":310,"props":1074,"children":1075},{"style":830},[1076],{"type":64,"value":863},{"type":58,"tag":310,"props":1078,"children":1079},{"class":312,"line":364},[1080],{"type":58,"tag":310,"props":1081,"children":1082},{"emptyLinePlaceholder":368},[1083],{"type":64,"value":371},{"type":58,"tag":310,"props":1085,"children":1086},{"class":312,"line":374},[1087,1091,1096,1101,1106,1111,1115,1120],{"type":58,"tag":310,"props":1088,"children":1089},{"style":830},[1090],{"type":64,"value":908},{"type":58,"tag":310,"props":1092,"children":1093},{"style":836},[1094],{"type":64,"value":1095},"html lang",{"type":58,"tag":310,"props":1097,"children":1098},{"style":830},[1099],{"type":64,"value":1100},"=",{"type":58,"tag":310,"props":1102,"children":1103},{"style":830},[1104],{"type":64,"value":1105},"\"",{"type":58,"tag":310,"props":1107,"children":1108},{"style":333},[1109],{"type":64,"value":1110},"en",{"type":58,"tag":310,"props":1112,"children":1113},{"style":830},[1114],{"type":64,"value":1105},{"type":58,"tag":310,"props":1116,"children":1117},{"style":836},[1118],{"type":64,"value":1119}," suppressHydrationWarning",{"type":58,"tag":310,"props":1121,"children":1122},{"style":830},[1123],{"type":64,"value":948},{"type":58,"tag":310,"props":1125,"children":1126},{"class":312,"line":383},[1127,1132,1138],{"type":58,"tag":310,"props":1128,"children":1129},{"style":830},[1130],{"type":64,"value":1131},"  \u003C",{"type":58,"tag":310,"props":1133,"children":1135},{"style":1134},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1136],{"type":64,"value":1137},"body",{"type":58,"tag":310,"props":1139,"children":1140},{"style":830},[1141],{"type":64,"value":948},{"type":58,"tag":310,"props":1143,"children":1144},{"class":312,"line":417},[1145,1150,1155,1160,1164,1168,1172],{"type":58,"tag":310,"props":1146,"children":1147},{"style":830},[1148],{"type":64,"value":1149},"    \u003C",{"type":58,"tag":310,"props":1151,"children":1152},{"style":327},[1153],{"type":64,"value":1154},"Provider",{"type":58,"tag":310,"props":1156,"children":1157},{"style":830},[1158],{"type":64,"value":1159},">{",{"type":58,"tag":310,"props":1161,"children":1162},{"style":836},[1163],{"type":64,"value":933},{"type":58,"tag":310,"props":1165,"children":1166},{"style":830},[1167],{"type":64,"value":938},{"type":58,"tag":310,"props":1169,"children":1170},{"style":327},[1171],{"type":64,"value":1154},{"type":58,"tag":310,"props":1173,"children":1174},{"style":830},[1175],{"type":64,"value":948},{"type":58,"tag":310,"props":1177,"children":1178},{"class":312,"line":425},[1179,1184,1188],{"type":58,"tag":310,"props":1180,"children":1181},{"style":830},[1182],{"type":64,"value":1183},"  \u003C\u002F",{"type":58,"tag":310,"props":1185,"children":1186},{"style":1134},[1187],{"type":64,"value":1137},{"type":58,"tag":310,"props":1189,"children":1190},{"style":830},[1191],{"type":64,"value":948},{"type":58,"tag":310,"props":1193,"children":1194},{"class":312,"line":434},[1195,1200,1205],{"type":58,"tag":310,"props":1196,"children":1197},{"style":830},[1198],{"type":64,"value":1199},"\u003C\u002F",{"type":58,"tag":310,"props":1201,"children":1202},{"style":836},[1203],{"type":64,"value":1204},"html",{"type":58,"tag":310,"props":1206,"children":1207},{"style":830},[1208],{"type":64,"value":948},{"type":58,"tag":67,"props":1210,"children":1211},{},[1212,1214,1219,1221,1227,1229,1234],{"type":64,"value":1213},"The ",{"type":58,"tag":111,"props":1215,"children":1217},{"className":1216},[],[1218],{"type":64,"value":1154},{"type":64,"value":1220}," file includes ",{"type":58,"tag":111,"props":1222,"children":1224},{"className":1223},[],[1225],{"type":64,"value":1226},"\"use client\"",{"type":64,"value":1228}," — do not add it to ",{"type":58,"tag":111,"props":1230,"children":1232},{"className":1231},[],[1233],{"type":64,"value":244},{"type":64,"value":1235},". See\nthe Next.js section for Pages Router placement.",{"type":58,"tag":294,"props":1237,"children":1239},{"id":1238},"custom-theme-in-v3",[1240],{"type":64,"value":1241},"Custom theme in v3",{"type":58,"tag":67,"props":1243,"children":1244},{},[1245,1247,1253,1255,1261],{"type":64,"value":1246},"Replace ",{"type":58,"tag":111,"props":1248,"children":1250},{"className":1249},[],[1251],{"type":64,"value":1252},"extendTheme",{"type":64,"value":1254}," with ",{"type":58,"tag":111,"props":1256,"children":1258},{"className":1257},[],[1259],{"type":64,"value":1260},"createSystem",{"type":64,"value":1262},":",{"type":58,"tag":104,"props":1264,"children":1268},{"className":1265,"code":1266,"language":1267,"meta":113,"style":113},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F v2\nimport { extendTheme } from \"@chakra-ui\u002Freact\"\n\u002F\u002F v3\nimport { createSystem, defaultConfig, defineConfig } from \"@chakra-ui\u002Freact\"\n\nexport const theme = extendTheme({ colors: { brand: { 500: \"#2196f3\" } } })\n\nconst config = defineConfig({\n  theme: { tokens: { colors: { brand: { 500: { value: \"#2196f3\" } } } } },\n})\nexport const system = createSystem(defaultConfig, config)\n","ts",[1269],{"type":58,"tag":111,"props":1270,"children":1271},{"__ignoreMap":113},[1272,1279,1315,1323,1378,1385,1488,1495,1525,1633,1646],{"type":58,"tag":310,"props":1273,"children":1274},{"class":312,"line":313},[1275],{"type":58,"tag":310,"props":1276,"children":1277},{"style":317},[1278],{"type":64,"value":818},{"type":58,"tag":310,"props":1280,"children":1281},{"class":312,"line":323},[1282,1286,1290,1295,1299,1303,1307,1311],{"type":58,"tag":310,"props":1283,"children":1284},{"style":824},[1285],{"type":64,"value":827},{"type":58,"tag":310,"props":1287,"children":1288},{"style":830},[1289],{"type":64,"value":833},{"type":58,"tag":310,"props":1291,"children":1292},{"style":836},[1293],{"type":64,"value":1294}," extendTheme",{"type":58,"tag":310,"props":1296,"children":1297},{"style":830},[1298],{"type":64,"value":844},{"type":58,"tag":310,"props":1300,"children":1301},{"style":824},[1302],{"type":64,"value":849},{"type":58,"tag":310,"props":1304,"children":1305},{"style":830},[1306],{"type":64,"value":854},{"type":58,"tag":310,"props":1308,"children":1309},{"style":333},[1310],{"type":64,"value":136},{"type":58,"tag":310,"props":1312,"children":1313},{"style":830},[1314],{"type":64,"value":863},{"type":58,"tag":310,"props":1316,"children":1317},{"class":312,"line":364},[1318],{"type":58,"tag":310,"props":1319,"children":1320},{"style":317},[1321],{"type":64,"value":1322},"\u002F\u002F v3\n",{"type":58,"tag":310,"props":1324,"children":1325},{"class":312,"line":374},[1326,1330,1334,1339,1344,1349,1353,1358,1362,1366,1370,1374],{"type":58,"tag":310,"props":1327,"children":1328},{"style":824},[1329],{"type":64,"value":827},{"type":58,"tag":310,"props":1331,"children":1332},{"style":830},[1333],{"type":64,"value":833},{"type":58,"tag":310,"props":1335,"children":1336},{"style":836},[1337],{"type":64,"value":1338}," createSystem",{"type":58,"tag":310,"props":1340,"children":1341},{"style":830},[1342],{"type":64,"value":1343},",",{"type":58,"tag":310,"props":1345,"children":1346},{"style":836},[1347],{"type":64,"value":1348}," defaultConfig",{"type":58,"tag":310,"props":1350,"children":1351},{"style":830},[1352],{"type":64,"value":1343},{"type":58,"tag":310,"props":1354,"children":1355},{"style":836},[1356],{"type":64,"value":1357}," defineConfig",{"type":58,"tag":310,"props":1359,"children":1360},{"style":830},[1361],{"type":64,"value":844},{"type":58,"tag":310,"props":1363,"children":1364},{"style":824},[1365],{"type":64,"value":849},{"type":58,"tag":310,"props":1367,"children":1368},{"style":830},[1369],{"type":64,"value":854},{"type":58,"tag":310,"props":1371,"children":1372},{"style":333},[1373],{"type":64,"value":136},{"type":58,"tag":310,"props":1375,"children":1376},{"style":830},[1377],{"type":64,"value":863},{"type":58,"tag":310,"props":1379,"children":1380},{"class":312,"line":383},[1381],{"type":58,"tag":310,"props":1382,"children":1383},{"emptyLinePlaceholder":368},[1384],{"type":64,"value":371},{"type":58,"tag":310,"props":1386,"children":1387},{"class":312,"line":417},[1388,1393,1399,1403,1407,1412,1417,1422,1427,1431,1435,1440,1444,1448,1454,1458,1462,1467,1471,1475,1479,1483],{"type":58,"tag":310,"props":1389,"children":1390},{"style":824},[1391],{"type":64,"value":1392},"export",{"type":58,"tag":310,"props":1394,"children":1396},{"style":1395},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1397],{"type":64,"value":1398}," const",{"type":58,"tag":310,"props":1400,"children":1401},{"style":836},[1402],{"type":64,"value":875},{"type":58,"tag":310,"props":1404,"children":1405},{"style":830},[1406],{"type":64,"value":1100},{"type":58,"tag":310,"props":1408,"children":1410},{"style":1409},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1411],{"type":64,"value":1294},{"type":58,"tag":310,"props":1413,"children":1414},{"style":836},[1415],{"type":64,"value":1416},"(",{"type":58,"tag":310,"props":1418,"children":1419},{"style":830},[1420],{"type":64,"value":1421},"{",{"type":58,"tag":310,"props":1423,"children":1424},{"style":1134},[1425],{"type":64,"value":1426}," colors",{"type":58,"tag":310,"props":1428,"children":1429},{"style":830},[1430],{"type":64,"value":1262},{"type":58,"tag":310,"props":1432,"children":1433},{"style":830},[1434],{"type":64,"value":833},{"type":58,"tag":310,"props":1436,"children":1437},{"style":1134},[1438],{"type":64,"value":1439}," brand",{"type":58,"tag":310,"props":1441,"children":1442},{"style":830},[1443],{"type":64,"value":1262},{"type":58,"tag":310,"props":1445,"children":1446},{"style":830},[1447],{"type":64,"value":833},{"type":58,"tag":310,"props":1449,"children":1451},{"style":1450},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1452],{"type":64,"value":1453}," 500",{"type":58,"tag":310,"props":1455,"children":1456},{"style":830},[1457],{"type":64,"value":1262},{"type":58,"tag":310,"props":1459,"children":1460},{"style":830},[1461],{"type":64,"value":854},{"type":58,"tag":310,"props":1463,"children":1464},{"style":333},[1465],{"type":64,"value":1466},"#2196f3",{"type":58,"tag":310,"props":1468,"children":1469},{"style":830},[1470],{"type":64,"value":1105},{"type":58,"tag":310,"props":1472,"children":1473},{"style":830},[1474],{"type":64,"value":844},{"type":58,"tag":310,"props":1476,"children":1477},{"style":830},[1478],{"type":64,"value":844},{"type":58,"tag":310,"props":1480,"children":1481},{"style":830},[1482],{"type":64,"value":844},{"type":58,"tag":310,"props":1484,"children":1485},{"style":836},[1486],{"type":64,"value":1487},")\n",{"type":58,"tag":310,"props":1489,"children":1490},{"class":312,"line":425},[1491],{"type":58,"tag":310,"props":1492,"children":1493},{"emptyLinePlaceholder":368},[1494],{"type":64,"value":371},{"type":58,"tag":310,"props":1496,"children":1497},{"class":312,"line":434},[1498,1503,1508,1512,1516,1520],{"type":58,"tag":310,"props":1499,"children":1500},{"style":1395},[1501],{"type":64,"value":1502},"const",{"type":58,"tag":310,"props":1504,"children":1505},{"style":836},[1506],{"type":64,"value":1507}," config ",{"type":58,"tag":310,"props":1509,"children":1510},{"style":830},[1511],{"type":64,"value":1100},{"type":58,"tag":310,"props":1513,"children":1514},{"style":1409},[1515],{"type":64,"value":1357},{"type":58,"tag":310,"props":1517,"children":1518},{"style":836},[1519],{"type":64,"value":1416},{"type":58,"tag":310,"props":1521,"children":1522},{"style":830},[1523],{"type":64,"value":1524},"{\n",{"type":58,"tag":310,"props":1526,"children":1528},{"class":312,"line":1527},9,[1529,1534,1538,1542,1547,1551,1555,1559,1563,1567,1571,1575,1579,1583,1587,1591,1596,1600,1604,1608,1612,1616,1620,1624,1628],{"type":58,"tag":310,"props":1530,"children":1531},{"style":1134},[1532],{"type":64,"value":1533},"  theme",{"type":58,"tag":310,"props":1535,"children":1536},{"style":830},[1537],{"type":64,"value":1262},{"type":58,"tag":310,"props":1539,"children":1540},{"style":830},[1541],{"type":64,"value":833},{"type":58,"tag":310,"props":1543,"children":1544},{"style":1134},[1545],{"type":64,"value":1546}," tokens",{"type":58,"tag":310,"props":1548,"children":1549},{"style":830},[1550],{"type":64,"value":1262},{"type":58,"tag":310,"props":1552,"children":1553},{"style":830},[1554],{"type":64,"value":833},{"type":58,"tag":310,"props":1556,"children":1557},{"style":1134},[1558],{"type":64,"value":1426},{"type":58,"tag":310,"props":1560,"children":1561},{"style":830},[1562],{"type":64,"value":1262},{"type":58,"tag":310,"props":1564,"children":1565},{"style":830},[1566],{"type":64,"value":833},{"type":58,"tag":310,"props":1568,"children":1569},{"style":1134},[1570],{"type":64,"value":1439},{"type":58,"tag":310,"props":1572,"children":1573},{"style":830},[1574],{"type":64,"value":1262},{"type":58,"tag":310,"props":1576,"children":1577},{"style":830},[1578],{"type":64,"value":833},{"type":58,"tag":310,"props":1580,"children":1581},{"style":1450},[1582],{"type":64,"value":1453},{"type":58,"tag":310,"props":1584,"children":1585},{"style":830},[1586],{"type":64,"value":1262},{"type":58,"tag":310,"props":1588,"children":1589},{"style":830},[1590],{"type":64,"value":833},{"type":58,"tag":310,"props":1592,"children":1593},{"style":1134},[1594],{"type":64,"value":1595}," value",{"type":58,"tag":310,"props":1597,"children":1598},{"style":830},[1599],{"type":64,"value":1262},{"type":58,"tag":310,"props":1601,"children":1602},{"style":830},[1603],{"type":64,"value":854},{"type":58,"tag":310,"props":1605,"children":1606},{"style":333},[1607],{"type":64,"value":1466},{"type":58,"tag":310,"props":1609,"children":1610},{"style":830},[1611],{"type":64,"value":1105},{"type":58,"tag":310,"props":1613,"children":1614},{"style":830},[1615],{"type":64,"value":844},{"type":58,"tag":310,"props":1617,"children":1618},{"style":830},[1619],{"type":64,"value":844},{"type":58,"tag":310,"props":1621,"children":1622},{"style":830},[1623],{"type":64,"value":844},{"type":58,"tag":310,"props":1625,"children":1626},{"style":830},[1627],{"type":64,"value":844},{"type":58,"tag":310,"props":1629,"children":1630},{"style":830},[1631],{"type":64,"value":1632}," },\n",{"type":58,"tag":310,"props":1634,"children":1636},{"class":312,"line":1635},10,[1637,1642],{"type":58,"tag":310,"props":1638,"children":1639},{"style":830},[1640],{"type":64,"value":1641},"}",{"type":58,"tag":310,"props":1643,"children":1644},{"style":836},[1645],{"type":64,"value":1487},{"type":58,"tag":310,"props":1647,"children":1649},{"class":312,"line":1648},11,[1650,1654,1658,1663,1667,1671,1676,1680],{"type":58,"tag":310,"props":1651,"children":1652},{"style":824},[1653],{"type":64,"value":1392},{"type":58,"tag":310,"props":1655,"children":1656},{"style":1395},[1657],{"type":64,"value":1398},{"type":58,"tag":310,"props":1659,"children":1660},{"style":836},[1661],{"type":64,"value":1662}," system ",{"type":58,"tag":310,"props":1664,"children":1665},{"style":830},[1666],{"type":64,"value":1100},{"type":58,"tag":310,"props":1668,"children":1669},{"style":1409},[1670],{"type":64,"value":1338},{"type":58,"tag":310,"props":1672,"children":1673},{"style":836},[1674],{"type":64,"value":1675},"(defaultConfig",{"type":58,"tag":310,"props":1677,"children":1678},{"style":830},[1679],{"type":64,"value":1343},{"type":58,"tag":310,"props":1681,"children":1682},{"style":836},[1683],{"type":64,"value":1684}," config)\n",{"type":58,"tag":67,"props":1686,"children":1687},{},[1688,1690,1696,1698,1703,1705,1711],{"type":64,"value":1689},"Pass ",{"type":58,"tag":111,"props":1691,"children":1693},{"className":1692},[],[1694],{"type":64,"value":1695},"system",{"type":64,"value":1697}," to ",{"type":58,"tag":111,"props":1699,"children":1701},{"className":1700},[],[1702],{"type":64,"value":943},{"type":64,"value":1704}," via ",{"type":58,"tag":111,"props":1706,"children":1708},{"className":1707},[],[1709],{"type":64,"value":1710},"value={system}",{"type":64,"value":1712},".",{"type":58,"tag":88,"props":1714,"children":1715},{},[],{"type":58,"tag":92,"props":1717,"children":1719},{"id":1718},"step-5-color-mode-migration",[1720],{"type":64,"value":1721},"Step 5 — Color mode migration",{"type":58,"tag":294,"props":1723,"children":1725},{"id":1724},"remove-all-v2-color-mode-patterns",[1726],{"type":64,"value":1727},"Remove all v2 color mode patterns",{"type":58,"tag":104,"props":1729,"children":1731},{"className":804,"code":1730,"language":806,"meta":113,"style":113},"\u002F\u002F REMOVE these v2 imports and usages:\nimport { ColorModeScript } from \"@chakra-ui\u002Freact\"\n\u002F\u002F ❌\nimport { useColorMode } from \"@chakra-ui\u002Freact\"\n\u002F\u002F ❌ (use next-themes)\nimport { useColorModeValue } from \"@chakra-ui\u002Freact\"\n\u002F\u002F ❌ (use CSS tokens)\nimport { DarkMode, LightMode } from \"@chakra-ui\u002Freact\"\n\n\u002F\u002F ❌\n\n\u002F\u002F Also remove from _document.tsx:\n;\u003CColorModeScript initialColorMode={theme.config.initialColorMode} \u002F> \u002F\u002F ❌\n",[1732],{"type":58,"tag":111,"props":1733,"children":1734},{"__ignoreMap":113},[1735,1743,1779,1787,1823,1831,1867,1875,1920,1927,1934,1941,1950],{"type":58,"tag":310,"props":1736,"children":1737},{"class":312,"line":313},[1738],{"type":58,"tag":310,"props":1739,"children":1740},{"style":317},[1741],{"type":64,"value":1742},"\u002F\u002F REMOVE these v2 imports and usages:\n",{"type":58,"tag":310,"props":1744,"children":1745},{"class":312,"line":323},[1746,1750,1754,1759,1763,1767,1771,1775],{"type":58,"tag":310,"props":1747,"children":1748},{"style":824},[1749],{"type":64,"value":827},{"type":58,"tag":310,"props":1751,"children":1752},{"style":830},[1753],{"type":64,"value":833},{"type":58,"tag":310,"props":1755,"children":1756},{"style":836},[1757],{"type":64,"value":1758}," ColorModeScript",{"type":58,"tag":310,"props":1760,"children":1761},{"style":830},[1762],{"type":64,"value":844},{"type":58,"tag":310,"props":1764,"children":1765},{"style":824},[1766],{"type":64,"value":849},{"type":58,"tag":310,"props":1768,"children":1769},{"style":830},[1770],{"type":64,"value":854},{"type":58,"tag":310,"props":1772,"children":1773},{"style":333},[1774],{"type":64,"value":136},{"type":58,"tag":310,"props":1776,"children":1777},{"style":830},[1778],{"type":64,"value":863},{"type":58,"tag":310,"props":1780,"children":1781},{"class":312,"line":364},[1782],{"type":58,"tag":310,"props":1783,"children":1784},{"style":317},[1785],{"type":64,"value":1786},"\u002F\u002F ❌\n",{"type":58,"tag":310,"props":1788,"children":1789},{"class":312,"line":374},[1790,1794,1798,1803,1807,1811,1815,1819],{"type":58,"tag":310,"props":1791,"children":1792},{"style":824},[1793],{"type":64,"value":827},{"type":58,"tag":310,"props":1795,"children":1796},{"style":830},[1797],{"type":64,"value":833},{"type":58,"tag":310,"props":1799,"children":1800},{"style":836},[1801],{"type":64,"value":1802}," useColorMode",{"type":58,"tag":310,"props":1804,"children":1805},{"style":830},[1806],{"type":64,"value":844},{"type":58,"tag":310,"props":1808,"children":1809},{"style":824},[1810],{"type":64,"value":849},{"type":58,"tag":310,"props":1812,"children":1813},{"style":830},[1814],{"type":64,"value":854},{"type":58,"tag":310,"props":1816,"children":1817},{"style":333},[1818],{"type":64,"value":136},{"type":58,"tag":310,"props":1820,"children":1821},{"style":830},[1822],{"type":64,"value":863},{"type":58,"tag":310,"props":1824,"children":1825},{"class":312,"line":383},[1826],{"type":58,"tag":310,"props":1827,"children":1828},{"style":317},[1829],{"type":64,"value":1830},"\u002F\u002F ❌ (use next-themes)\n",{"type":58,"tag":310,"props":1832,"children":1833},{"class":312,"line":417},[1834,1838,1842,1847,1851,1855,1859,1863],{"type":58,"tag":310,"props":1835,"children":1836},{"style":824},[1837],{"type":64,"value":827},{"type":58,"tag":310,"props":1839,"children":1840},{"style":830},[1841],{"type":64,"value":833},{"type":58,"tag":310,"props":1843,"children":1844},{"style":836},[1845],{"type":64,"value":1846}," useColorModeValue",{"type":58,"tag":310,"props":1848,"children":1849},{"style":830},[1850],{"type":64,"value":844},{"type":58,"tag":310,"props":1852,"children":1853},{"style":824},[1854],{"type":64,"value":849},{"type":58,"tag":310,"props":1856,"children":1857},{"style":830},[1858],{"type":64,"value":854},{"type":58,"tag":310,"props":1860,"children":1861},{"style":333},[1862],{"type":64,"value":136},{"type":58,"tag":310,"props":1864,"children":1865},{"style":830},[1866],{"type":64,"value":863},{"type":58,"tag":310,"props":1868,"children":1869},{"class":312,"line":425},[1870],{"type":58,"tag":310,"props":1871,"children":1872},{"style":317},[1873],{"type":64,"value":1874},"\u002F\u002F ❌ (use CSS tokens)\n",{"type":58,"tag":310,"props":1876,"children":1877},{"class":312,"line":434},[1878,1882,1886,1891,1895,1900,1904,1908,1912,1916],{"type":58,"tag":310,"props":1879,"children":1880},{"style":824},[1881],{"type":64,"value":827},{"type":58,"tag":310,"props":1883,"children":1884},{"style":830},[1885],{"type":64,"value":833},{"type":58,"tag":310,"props":1887,"children":1888},{"style":836},[1889],{"type":64,"value":1890}," DarkMode",{"type":58,"tag":310,"props":1892,"children":1893},{"style":830},[1894],{"type":64,"value":1343},{"type":58,"tag":310,"props":1896,"children":1897},{"style":836},[1898],{"type":64,"value":1899}," LightMode",{"type":58,"tag":310,"props":1901,"children":1902},{"style":830},[1903],{"type":64,"value":844},{"type":58,"tag":310,"props":1905,"children":1906},{"style":824},[1907],{"type":64,"value":849},{"type":58,"tag":310,"props":1909,"children":1910},{"style":830},[1911],{"type":64,"value":854},{"type":58,"tag":310,"props":1913,"children":1914},{"style":333},[1915],{"type":64,"value":136},{"type":58,"tag":310,"props":1917,"children":1918},{"style":830},[1919],{"type":64,"value":863},{"type":58,"tag":310,"props":1921,"children":1922},{"class":312,"line":1527},[1923],{"type":58,"tag":310,"props":1924,"children":1925},{"emptyLinePlaceholder":368},[1926],{"type":64,"value":371},{"type":58,"tag":310,"props":1928,"children":1929},{"class":312,"line":1635},[1930],{"type":58,"tag":310,"props":1931,"children":1932},{"style":317},[1933],{"type":64,"value":1786},{"type":58,"tag":310,"props":1935,"children":1936},{"class":312,"line":1648},[1937],{"type":58,"tag":310,"props":1938,"children":1939},{"emptyLinePlaceholder":368},[1940],{"type":64,"value":371},{"type":58,"tag":310,"props":1942,"children":1944},{"class":312,"line":1943},12,[1945],{"type":58,"tag":310,"props":1946,"children":1947},{"style":317},[1948],{"type":64,"value":1949},"\u002F\u002F Also remove from _document.tsx:\n",{"type":58,"tag":310,"props":1951,"children":1953},{"class":312,"line":1952},13,[1954,1958,1963,1967,1972,1976,1981],{"type":58,"tag":310,"props":1955,"children":1956},{"style":830},[1957],{"type":64,"value":908},{"type":58,"tag":310,"props":1959,"children":1960},{"style":836},[1961],{"type":64,"value":1962},"ColorModeScript initialColorMode",{"type":58,"tag":310,"props":1964,"children":1965},{"style":830},[1966],{"type":64,"value":918},{"type":58,"tag":310,"props":1968,"children":1969},{"style":836},[1970],{"type":64,"value":1971},"theme.config.initialColorMode",{"type":58,"tag":310,"props":1973,"children":1974},{"style":830},[1975],{"type":64,"value":1641},{"type":58,"tag":310,"props":1977,"children":1978},{"style":830},[1979],{"type":64,"value":1980}," \u002F>",{"type":58,"tag":310,"props":1982,"children":1983},{"style":317},[1984],{"type":64,"value":1985}," \u002F\u002F ❌\n",{"type":58,"tag":294,"props":1987,"children":1989},{"id":1988},"v3-color-mode-approach",[1990],{"type":64,"value":1991},"v3 color mode approach",{"type":58,"tag":67,"props":1993,"children":1994},{},[1995,1997,2002,2004,2009],{"type":64,"value":1996},"Color mode is handled by ",{"type":58,"tag":111,"props":1998,"children":2000},{"className":1999},[],[2001],{"type":64,"value":1022},{"type":64,"value":2003}," via the generated ",{"type":58,"tag":111,"props":2005,"children":2007},{"className":2006},[],[2008],{"type":64,"value":1154},{"type":64,"value":2010},". Use\nsemantic tokens that automatically respond to the active color mode:",{"type":58,"tag":104,"props":2012,"children":2014},{"className":804,"code":2013,"language":806,"meta":113,"style":113},"\u002F\u002F Use Chakra semantic tokens — they flip automatically in dark mode\n\u003CBox color=\"fg.default\" bg=\"bg.subtle\">\n  ...\n\u003C\u002FBox>\n",[2015],{"type":58,"tag":111,"props":2016,"children":2017},{"__ignoreMap":113},[2018,2026,2087,2095],{"type":58,"tag":310,"props":2019,"children":2020},{"class":312,"line":313},[2021],{"type":58,"tag":310,"props":2022,"children":2023},{"style":317},[2024],{"type":64,"value":2025},"\u002F\u002F Use Chakra semantic tokens — they flip automatically in dark mode\n",{"type":58,"tag":310,"props":2027,"children":2028},{"class":312,"line":323},[2029,2034,2039,2044,2048,2052,2057,2061,2066,2070,2074,2079,2083],{"type":58,"tag":310,"props":2030,"children":2031},{"style":830},[2032],{"type":64,"value":2033},"\u003C",{"type":58,"tag":310,"props":2035,"children":2036},{"style":327},[2037],{"type":64,"value":2038},"Box",{"type":58,"tag":310,"props":2040,"children":2041},{"style":1395},[2042],{"type":64,"value":2043}," color",{"type":58,"tag":310,"props":2045,"children":2046},{"style":830},[2047],{"type":64,"value":1100},{"type":58,"tag":310,"props":2049,"children":2050},{"style":830},[2051],{"type":64,"value":1105},{"type":58,"tag":310,"props":2053,"children":2054},{"style":333},[2055],{"type":64,"value":2056},"fg.default",{"type":58,"tag":310,"props":2058,"children":2059},{"style":830},[2060],{"type":64,"value":1105},{"type":58,"tag":310,"props":2062,"children":2063},{"style":1395},[2064],{"type":64,"value":2065}," bg",{"type":58,"tag":310,"props":2067,"children":2068},{"style":830},[2069],{"type":64,"value":1100},{"type":58,"tag":310,"props":2071,"children":2072},{"style":830},[2073],{"type":64,"value":1105},{"type":58,"tag":310,"props":2075,"children":2076},{"style":333},[2077],{"type":64,"value":2078},"bg.subtle",{"type":58,"tag":310,"props":2080,"children":2081},{"style":830},[2082],{"type":64,"value":1105},{"type":58,"tag":310,"props":2084,"children":2085},{"style":830},[2086],{"type":64,"value":948},{"type":58,"tag":310,"props":2088,"children":2089},{"class":312,"line":364},[2090],{"type":58,"tag":310,"props":2091,"children":2092},{"style":836},[2093],{"type":64,"value":2094},"  ...\n",{"type":58,"tag":310,"props":2096,"children":2097},{"class":312,"line":374},[2098,2102,2106],{"type":58,"tag":310,"props":2099,"children":2100},{"style":830},[2101],{"type":64,"value":1199},{"type":58,"tag":310,"props":2103,"children":2104},{"style":327},[2105],{"type":64,"value":2038},{"type":58,"tag":310,"props":2107,"children":2108},{"style":830},[2109],{"type":64,"value":948},{"type":58,"tag":67,"props":2111,"children":2112},{},[2113,2115,2121,2123,2128,2130,2135],{"type":64,"value":2114},"For a color mode toggle, use the generated ",{"type":58,"tag":111,"props":2116,"children":2118},{"className":2117},[],[2119],{"type":64,"value":2120},"components\u002Fui\u002Fcolor-mode.tsx",{"type":64,"value":2122},"\nsnippet or ",{"type":58,"tag":111,"props":2124,"children":2126},{"className":2125},[],[2127],{"type":64,"value":270},{"type":64,"value":2129}," from ",{"type":58,"tag":111,"props":2131,"children":2133},{"className":2132},[],[2134],{"type":64,"value":1022},{"type":64,"value":2136}," directly.",{"type":58,"tag":88,"props":2138,"children":2139},{},[],{"type":58,"tag":92,"props":2141,"children":2143},{"id":2142},"step-6-prop-renames",[2144],{"type":64,"value":2145},"Step 6 — Prop renames",{"type":58,"tag":67,"props":2147,"children":2148},{},[2149],{"type":64,"value":2150},"These boolean and style props were renamed in v3 for consistency with HTML and\nmodern React conventions. The codemod catches most of these, but verify manually\nafterward.",{"type":58,"tag":294,"props":2152,"children":2154},{"id":2153},"boolean-props",[2155],{"type":64,"value":2156},"Boolean props",{"type":58,"tag":598,"props":2158,"children":2159},{},[2160,2176],{"type":58,"tag":602,"props":2161,"children":2162},{},[2163],{"type":58,"tag":606,"props":2164,"children":2165},{},[2166,2171],{"type":58,"tag":610,"props":2167,"children":2168},{},[2169],{"type":64,"value":2170},"v2",{"type":58,"tag":610,"props":2172,"children":2173},{},[2174],{"type":64,"value":2175},"v3",{"type":58,"tag":621,"props":2177,"children":2178},{},[2179,2200,2221,2242,2263,2284,2305,2326,2347],{"type":58,"tag":606,"props":2180,"children":2181},{},[2182,2191],{"type":58,"tag":628,"props":2183,"children":2184},{},[2185],{"type":58,"tag":111,"props":2186,"children":2188},{"className":2187},[],[2189],{"type":64,"value":2190},"isOpen",{"type":58,"tag":628,"props":2192,"children":2193},{},[2194],{"type":58,"tag":111,"props":2195,"children":2197},{"className":2196},[],[2198],{"type":64,"value":2199},"open",{"type":58,"tag":606,"props":2201,"children":2202},{},[2203,2212],{"type":58,"tag":628,"props":2204,"children":2205},{},[2206],{"type":58,"tag":111,"props":2207,"children":2209},{"className":2208},[],[2210],{"type":64,"value":2211},"defaultIsOpen",{"type":58,"tag":628,"props":2213,"children":2214},{},[2215],{"type":58,"tag":111,"props":2216,"children":2218},{"className":2217},[],[2219],{"type":64,"value":2220},"defaultOpen",{"type":58,"tag":606,"props":2222,"children":2223},{},[2224,2233],{"type":58,"tag":628,"props":2225,"children":2226},{},[2227],{"type":58,"tag":111,"props":2228,"children":2230},{"className":2229},[],[2231],{"type":64,"value":2232},"isDisabled",{"type":58,"tag":628,"props":2234,"children":2235},{},[2236],{"type":58,"tag":111,"props":2237,"children":2239},{"className":2238},[],[2240],{"type":64,"value":2241},"disabled",{"type":58,"tag":606,"props":2243,"children":2244},{},[2245,2254],{"type":58,"tag":628,"props":2246,"children":2247},{},[2248],{"type":58,"tag":111,"props":2249,"children":2251},{"className":2250},[],[2252],{"type":64,"value":2253},"isInvalid",{"type":58,"tag":628,"props":2255,"children":2256},{},[2257],{"type":58,"tag":111,"props":2258,"children":2260},{"className":2259},[],[2261],{"type":64,"value":2262},"invalid",{"type":58,"tag":606,"props":2264,"children":2265},{},[2266,2275],{"type":58,"tag":628,"props":2267,"children":2268},{},[2269],{"type":58,"tag":111,"props":2270,"children":2272},{"className":2271},[],[2273],{"type":64,"value":2274},"isRequired",{"type":58,"tag":628,"props":2276,"children":2277},{},[2278],{"type":58,"tag":111,"props":2279,"children":2281},{"className":2280},[],[2282],{"type":64,"value":2283},"required",{"type":58,"tag":606,"props":2285,"children":2286},{},[2287,2296],{"type":58,"tag":628,"props":2288,"children":2289},{},[2290],{"type":58,"tag":111,"props":2291,"children":2293},{"className":2292},[],[2294],{"type":64,"value":2295},"isReadOnly",{"type":58,"tag":628,"props":2297,"children":2298},{},[2299],{"type":58,"tag":111,"props":2300,"children":2302},{"className":2301},[],[2303],{"type":64,"value":2304},"readOnly",{"type":58,"tag":606,"props":2306,"children":2307},{},[2308,2317],{"type":58,"tag":628,"props":2309,"children":2310},{},[2311],{"type":58,"tag":111,"props":2312,"children":2314},{"className":2313},[],[2315],{"type":64,"value":2316},"isChecked",{"type":58,"tag":628,"props":2318,"children":2319},{},[2320],{"type":58,"tag":111,"props":2321,"children":2323},{"className":2322},[],[2324],{"type":64,"value":2325},"checked",{"type":58,"tag":606,"props":2327,"children":2328},{},[2329,2338],{"type":58,"tag":628,"props":2330,"children":2331},{},[2332],{"type":58,"tag":111,"props":2333,"children":2335},{"className":2334},[],[2336],{"type":64,"value":2337},"isLoaded",{"type":58,"tag":628,"props":2339,"children":2340},{},[2341],{"type":58,"tag":111,"props":2342,"children":2344},{"className":2343},[],[2345],{"type":64,"value":2346},"loaded",{"type":58,"tag":606,"props":2348,"children":2349},{},[2350,2359],{"type":58,"tag":628,"props":2351,"children":2352},{},[2353],{"type":58,"tag":111,"props":2354,"children":2356},{"className":2355},[],[2357],{"type":64,"value":2358},"isIndeterminate",{"type":58,"tag":628,"props":2360,"children":2361},{},[2362],{"type":58,"tag":111,"props":2363,"children":2365},{"className":2364},[],[2366],{"type":64,"value":2367},"indeterminate",{"type":58,"tag":294,"props":2369,"children":2371},{"id":2370},"style-and-layout-props",[2372],{"type":64,"value":2373},"Style and layout props",{"type":58,"tag":598,"props":2375,"children":2376},{},[2377,2391],{"type":58,"tag":602,"props":2378,"children":2379},{},[2380],{"type":58,"tag":606,"props":2381,"children":2382},{},[2383,2387],{"type":58,"tag":610,"props":2384,"children":2385},{},[2386],{"type":64,"value":2170},{"type":58,"tag":610,"props":2388,"children":2389},{},[2390],{"type":64,"value":2175},{"type":58,"tag":621,"props":2392,"children":2393},{},[2394,2415,2436,2457,2480],{"type":58,"tag":606,"props":2395,"children":2396},{},[2397,2406],{"type":58,"tag":628,"props":2398,"children":2399},{},[2400],{"type":58,"tag":111,"props":2401,"children":2403},{"className":2402},[],[2404],{"type":64,"value":2405},"colorScheme",{"type":58,"tag":628,"props":2407,"children":2408},{},[2409],{"type":58,"tag":111,"props":2410,"children":2412},{"className":2411},[],[2413],{"type":64,"value":2414},"colorPalette",{"type":58,"tag":606,"props":2416,"children":2417},{},[2418,2427],{"type":58,"tag":628,"props":2419,"children":2420},{},[2421],{"type":58,"tag":111,"props":2422,"children":2424},{"className":2423},[],[2425],{"type":64,"value":2426},"noOfLines",{"type":58,"tag":628,"props":2428,"children":2429},{},[2430],{"type":58,"tag":111,"props":2431,"children":2433},{"className":2432},[],[2434],{"type":64,"value":2435},"lineClamp",{"type":58,"tag":606,"props":2437,"children":2438},{},[2439,2448],{"type":58,"tag":628,"props":2440,"children":2441},{},[2442],{"type":58,"tag":111,"props":2443,"children":2445},{"className":2444},[],[2446],{"type":64,"value":2447},"truncated",{"type":58,"tag":628,"props":2449,"children":2450},{},[2451],{"type":58,"tag":111,"props":2452,"children":2454},{"className":2453},[],[2455],{"type":64,"value":2456},"truncate",{"type":58,"tag":606,"props":2458,"children":2459},{},[2460,2471],{"type":58,"tag":628,"props":2461,"children":2462},{},[2463,2469],{"type":58,"tag":111,"props":2464,"children":2466},{"className":2465},[],[2467],{"type":64,"value":2468},"spacing",{"type":64,"value":2470}," (Stack)",{"type":58,"tag":628,"props":2472,"children":2473},{},[2474],{"type":58,"tag":111,"props":2475,"children":2477},{"className":2476},[],[2478],{"type":64,"value":2479},"gap",{"type":58,"tag":606,"props":2481,"children":2482},{},[2483,2492],{"type":58,"tag":628,"props":2484,"children":2485},{},[2486],{"type":58,"tag":111,"props":2487,"children":2489},{"className":2488},[],[2490],{"type":64,"value":2491},"apply",{"type":58,"tag":628,"props":2493,"children":2494},{},[2495,2501,2502],{"type":58,"tag":111,"props":2496,"children":2498},{"className":2497},[],[2499],{"type":64,"value":2500},"textStyle",{"type":64,"value":646},{"type":58,"tag":111,"props":2503,"children":2505},{"className":2504},[],[2506],{"type":64,"value":2507},"layerStyle",{"type":58,"tag":294,"props":2509,"children":2511},{"id":2510},"nested-style-props",[2512],{"type":64,"value":2513},"Nested style props",{"type":58,"tag":104,"props":2515,"children":2517},{"className":804,"code":2516,"language":806,"meta":113,"style":113},"\u002F\u002F v2 — sx with nested pseudo-selectors\n\u003CBox sx={{ \"&:hover\": { color: \"blue.500\" } }} \u002F>\n\n\u002F\u002F v3 — css prop with \"&\" selectors\n\u003CBox css={{ \"&:hover\": { color: \"blue.500\" } }} \u002F>\n",[2518],{"type":58,"tag":111,"props":2519,"children":2520},{"__ignoreMap":113},[2521,2529,2601,2608,2616],{"type":58,"tag":310,"props":2522,"children":2523},{"class":312,"line":313},[2524],{"type":58,"tag":310,"props":2525,"children":2526},{"style":317},[2527],{"type":64,"value":2528},"\u002F\u002F v2 — sx with nested pseudo-selectors\n",{"type":58,"tag":310,"props":2530,"children":2531},{"class":312,"line":323},[2532,2536,2540,2545,2550,2554,2559,2563,2567,2571,2575,2579,2583,2588,2592,2596],{"type":58,"tag":310,"props":2533,"children":2534},{"style":830},[2535],{"type":64,"value":2033},{"type":58,"tag":310,"props":2537,"children":2538},{"style":327},[2539],{"type":64,"value":2038},{"type":58,"tag":310,"props":2541,"children":2542},{"style":1395},[2543],{"type":64,"value":2544}," sx",{"type":58,"tag":310,"props":2546,"children":2547},{"style":830},[2548],{"type":64,"value":2549},"={{",{"type":58,"tag":310,"props":2551,"children":2552},{"style":830},[2553],{"type":64,"value":854},{"type":58,"tag":310,"props":2555,"children":2556},{"style":1134},[2557],{"type":64,"value":2558},"&:hover",{"type":58,"tag":310,"props":2560,"children":2561},{"style":830},[2562],{"type":64,"value":1105},{"type":58,"tag":310,"props":2564,"children":2565},{"style":830},[2566],{"type":64,"value":1262},{"type":58,"tag":310,"props":2568,"children":2569},{"style":830},[2570],{"type":64,"value":833},{"type":58,"tag":310,"props":2572,"children":2573},{"style":1134},[2574],{"type":64,"value":2043},{"type":58,"tag":310,"props":2576,"children":2577},{"style":830},[2578],{"type":64,"value":1262},{"type":58,"tag":310,"props":2580,"children":2581},{"style":830},[2582],{"type":64,"value":854},{"type":58,"tag":310,"props":2584,"children":2585},{"style":333},[2586],{"type":64,"value":2587},"blue.500",{"type":58,"tag":310,"props":2589,"children":2590},{"style":830},[2591],{"type":64,"value":1105},{"type":58,"tag":310,"props":2593,"children":2594},{"style":830},[2595],{"type":64,"value":844},{"type":58,"tag":310,"props":2597,"children":2598},{"style":830},[2599],{"type":64,"value":2600}," }} \u002F>\n",{"type":58,"tag":310,"props":2602,"children":2603},{"class":312,"line":364},[2604],{"type":58,"tag":310,"props":2605,"children":2606},{"emptyLinePlaceholder":368},[2607],{"type":64,"value":371},{"type":58,"tag":310,"props":2609,"children":2610},{"class":312,"line":374},[2611],{"type":58,"tag":310,"props":2612,"children":2613},{"style":317},[2614],{"type":64,"value":2615},"\u002F\u002F v3 — css prop with \"&\" selectors\n",{"type":58,"tag":310,"props":2617,"children":2618},{"class":312,"line":383},[2619,2623,2627,2632,2636,2640,2644,2648,2652,2656,2660,2664,2668,2672,2676,2680],{"type":58,"tag":310,"props":2620,"children":2621},{"style":830},[2622],{"type":64,"value":2033},{"type":58,"tag":310,"props":2624,"children":2625},{"style":327},[2626],{"type":64,"value":2038},{"type":58,"tag":310,"props":2628,"children":2629},{"style":1395},[2630],{"type":64,"value":2631}," css",{"type":58,"tag":310,"props":2633,"children":2634},{"style":830},[2635],{"type":64,"value":2549},{"type":58,"tag":310,"props":2637,"children":2638},{"style":830},[2639],{"type":64,"value":854},{"type":58,"tag":310,"props":2641,"children":2642},{"style":1134},[2643],{"type":64,"value":2558},{"type":58,"tag":310,"props":2645,"children":2646},{"style":830},[2647],{"type":64,"value":1105},{"type":58,"tag":310,"props":2649,"children":2650},{"style":830},[2651],{"type":64,"value":1262},{"type":58,"tag":310,"props":2653,"children":2654},{"style":830},[2655],{"type":64,"value":833},{"type":58,"tag":310,"props":2657,"children":2658},{"style":1134},[2659],{"type":64,"value":2043},{"type":58,"tag":310,"props":2661,"children":2662},{"style":830},[2663],{"type":64,"value":1262},{"type":58,"tag":310,"props":2665,"children":2666},{"style":830},[2667],{"type":64,"value":854},{"type":58,"tag":310,"props":2669,"children":2670},{"style":333},[2671],{"type":64,"value":2587},{"type":58,"tag":310,"props":2673,"children":2674},{"style":830},[2675],{"type":64,"value":1105},{"type":58,"tag":310,"props":2677,"children":2678},{"style":830},[2679],{"type":64,"value":844},{"type":58,"tag":310,"props":2681,"children":2682},{"style":830},[2683],{"type":64,"value":2600},{"type":58,"tag":88,"props":2685,"children":2686},{},[],{"type":58,"tag":92,"props":2688,"children":2690},{"id":2689},"step-7-component-migrations",[2691],{"type":64,"value":2692},"Step 7 — Component migrations",{"type":58,"tag":294,"props":2694,"children":2696},{"id":2695},"renamed-components",[2697],{"type":64,"value":2698},"Renamed components",{"type":58,"tag":598,"props":2700,"children":2701},{},[2702,2716],{"type":58,"tag":602,"props":2703,"children":2704},{},[2705],{"type":58,"tag":606,"props":2706,"children":2707},{},[2708,2712],{"type":58,"tag":610,"props":2709,"children":2710},{},[2711],{"type":64,"value":2170},{"type":58,"tag":610,"props":2713,"children":2714},{},[2715],{"type":64,"value":2175},{"type":58,"tag":621,"props":2717,"children":2718},{},[2719,2740,2761,2782],{"type":58,"tag":606,"props":2720,"children":2721},{},[2722,2731],{"type":58,"tag":628,"props":2723,"children":2724},{},[2725],{"type":58,"tag":111,"props":2726,"children":2728},{"className":2727},[],[2729],{"type":64,"value":2730},"Modal",{"type":58,"tag":628,"props":2732,"children":2733},{},[2734],{"type":58,"tag":111,"props":2735,"children":2737},{"className":2736},[],[2738],{"type":64,"value":2739},"Dialog",{"type":58,"tag":606,"props":2741,"children":2742},{},[2743,2752],{"type":58,"tag":628,"props":2744,"children":2745},{},[2746],{"type":58,"tag":111,"props":2747,"children":2749},{"className":2748},[],[2750],{"type":64,"value":2751},"FormControl",{"type":58,"tag":628,"props":2753,"children":2754},{},[2755],{"type":58,"tag":111,"props":2756,"children":2758},{"className":2757},[],[2759],{"type":64,"value":2760},"Field",{"type":58,"tag":606,"props":2762,"children":2763},{},[2764,2773],{"type":58,"tag":628,"props":2765,"children":2766},{},[2767],{"type":58,"tag":111,"props":2768,"children":2770},{"className":2769},[],[2771],{"type":64,"value":2772},"Select",{"type":58,"tag":628,"props":2774,"children":2775},{},[2776],{"type":58,"tag":111,"props":2777,"children":2779},{"className":2778},[],[2780],{"type":64,"value":2781},"NativeSelect",{"type":58,"tag":606,"props":2783,"children":2784},{},[2785,2794],{"type":58,"tag":628,"props":2786,"children":2787},{},[2788],{"type":58,"tag":111,"props":2789,"children":2791},{"className":2790},[],[2792],{"type":64,"value":2793},"AlertDialog",{"type":58,"tag":628,"props":2795,"children":2796},{},[2797,2802],{"type":58,"tag":111,"props":2798,"children":2800},{"className":2799},[],[2801],{"type":64,"value":2793},{"type":64,"value":2803}," (compound, see below)",{"type":58,"tag":67,"props":2805,"children":2806},{},[2807,2812,2814,2820,2821,2827,2828,2834,2835,2841,2842,2848,2849,2855,2857,2863,2865,2871],{"type":58,"tag":111,"props":2808,"children":2810},{"className":2809},[],[2811],{"type":64,"value":2730},{"type":64,"value":2813}," is the most common rename — every ",{"type":58,"tag":111,"props":2815,"children":2817},{"className":2816},[],[2818],{"type":64,"value":2819},"\u003CModal>",{"type":64,"value":151},{"type":58,"tag":111,"props":2822,"children":2824},{"className":2823},[],[2825],{"type":64,"value":2826},"\u003CModalOverlay>",{"type":64,"value":159},{"type":58,"tag":111,"props":2829,"children":2831},{"className":2830},[],[2832],{"type":64,"value":2833},"\u003CModalContent>",{"type":64,"value":151},{"type":58,"tag":111,"props":2836,"children":2838},{"className":2837},[],[2839],{"type":64,"value":2840},"\u003CModalHeader>",{"type":64,"value":151},{"type":58,"tag":111,"props":2843,"children":2845},{"className":2844},[],[2846],{"type":64,"value":2847},"\u003CModalBody>",{"type":64,"value":151},{"type":58,"tag":111,"props":2850,"children":2852},{"className":2851},[],[2853],{"type":64,"value":2854},"\u003CModalFooter>",{"type":64,"value":2856},", and\n",{"type":58,"tag":111,"props":2858,"children":2860},{"className":2859},[],[2861],{"type":64,"value":2862},"\u003CModalCloseButton>",{"type":64,"value":2864}," becomes a ",{"type":58,"tag":111,"props":2866,"children":2868},{"className":2867},[],[2869],{"type":64,"value":2870},"Dialog.*",{"type":64,"value":2872}," compound part:",{"type":58,"tag":104,"props":2874,"children":2876},{"className":804,"code":2875,"language":806,"meta":113,"style":113},"\u002F\u002F v2\n\u003CModal isOpen={open} onClose={onClose}>\n  \u003CModalOverlay \u002F>\n  \u003CModalContent>\n    \u003CModalHeader>Title\u003C\u002FModalHeader>\n    \u003CModalBody>Body\u003C\u002FModalBody>\n    \u003CModalFooter>\u003CButton onClick={onClose}>Close\u003C\u002FButton>\u003C\u002FModalFooter>\n  \u003C\u002FModalContent>\n\u003C\u002FModal>\n\n\u002F\u002F v3\n\u003CDialog.Root open={open} onOpenChange={({ open }) => setOpen(open)}>\n  \u003CDialog.Backdrop \u002F>\n  \u003CDialog.Positioner>\n    \u003CDialog.Content>\n      \u003CDialog.Header>\u003CDialog.Title>Title\u003C\u002FDialog.Title>\u003C\u002FDialog.Header>\n      \u003CDialog.Body>Body\u003C\u002FDialog.Body>\n      \u003CDialog.Footer>\u003CButton onClick={() => setOpen(false)}>Close\u003C\u002FButton>\u003C\u002FDialog.Footer>\n      \u003CDialog.CloseTrigger \u002F>\n    \u003C\u002FDialog.Content>\n  \u003C\u002FDialog.Positioner>\n\u003C\u002FDialog.Root>\n",[2877],{"type":58,"tag":111,"props":2878,"children":2879},{"__ignoreMap":113},[2880,2887,2934,2951,2967,3001,3034,3100,3115,3130,3137,3144,3212,3228,3245,3262,3313,3346,3426,3443,3460,3476],{"type":58,"tag":310,"props":2881,"children":2882},{"class":312,"line":313},[2883],{"type":58,"tag":310,"props":2884,"children":2885},{"style":317},[2886],{"type":64,"value":818},{"type":58,"tag":310,"props":2888,"children":2889},{"class":312,"line":323},[2890,2894,2898,2903,2907,2911,2916,2921,2925,2929],{"type":58,"tag":310,"props":2891,"children":2892},{"style":830},[2893],{"type":64,"value":2033},{"type":58,"tag":310,"props":2895,"children":2896},{"style":327},[2897],{"type":64,"value":2730},{"type":58,"tag":310,"props":2899,"children":2900},{"style":1395},[2901],{"type":64,"value":2902}," isOpen",{"type":58,"tag":310,"props":2904,"children":2905},{"style":830},[2906],{"type":64,"value":918},{"type":58,"tag":310,"props":2908,"children":2909},{"style":836},[2910],{"type":64,"value":2199},{"type":58,"tag":310,"props":2912,"children":2913},{"style":830},[2914],{"type":64,"value":2915},"} ",{"type":58,"tag":310,"props":2917,"children":2918},{"style":1395},[2919],{"type":64,"value":2920},"onClose",{"type":58,"tag":310,"props":2922,"children":2923},{"style":830},[2924],{"type":64,"value":918},{"type":58,"tag":310,"props":2926,"children":2927},{"style":836},[2928],{"type":64,"value":2920},{"type":58,"tag":310,"props":2930,"children":2931},{"style":830},[2932],{"type":64,"value":2933},"}>\n",{"type":58,"tag":310,"props":2935,"children":2936},{"class":312,"line":364},[2937,2941,2946],{"type":58,"tag":310,"props":2938,"children":2939},{"style":830},[2940],{"type":64,"value":1131},{"type":58,"tag":310,"props":2942,"children":2943},{"style":327},[2944],{"type":64,"value":2945},"ModalOverlay",{"type":58,"tag":310,"props":2947,"children":2948},{"style":830},[2949],{"type":64,"value":2950}," \u002F>\n",{"type":58,"tag":310,"props":2952,"children":2953},{"class":312,"line":374},[2954,2958,2963],{"type":58,"tag":310,"props":2955,"children":2956},{"style":830},[2957],{"type":64,"value":1131},{"type":58,"tag":310,"props":2959,"children":2960},{"style":327},[2961],{"type":64,"value":2962},"ModalContent",{"type":58,"tag":310,"props":2964,"children":2965},{"style":830},[2966],{"type":64,"value":948},{"type":58,"tag":310,"props":2968,"children":2969},{"class":312,"line":383},[2970,2974,2979,2984,2989,2993,2997],{"type":58,"tag":310,"props":2971,"children":2972},{"style":830},[2973],{"type":64,"value":1149},{"type":58,"tag":310,"props":2975,"children":2976},{"style":327},[2977],{"type":64,"value":2978},"ModalHeader",{"type":58,"tag":310,"props":2980,"children":2981},{"style":830},[2982],{"type":64,"value":2983},">",{"type":58,"tag":310,"props":2985,"children":2986},{"style":836},[2987],{"type":64,"value":2988},"Title",{"type":58,"tag":310,"props":2990,"children":2991},{"style":830},[2992],{"type":64,"value":1199},{"type":58,"tag":310,"props":2994,"children":2995},{"style":327},[2996],{"type":64,"value":2978},{"type":58,"tag":310,"props":2998,"children":2999},{"style":830},[3000],{"type":64,"value":948},{"type":58,"tag":310,"props":3002,"children":3003},{"class":312,"line":417},[3004,3008,3013,3017,3022,3026,3030],{"type":58,"tag":310,"props":3005,"children":3006},{"style":830},[3007],{"type":64,"value":1149},{"type":58,"tag":310,"props":3009,"children":3010},{"style":327},[3011],{"type":64,"value":3012},"ModalBody",{"type":58,"tag":310,"props":3014,"children":3015},{"style":830},[3016],{"type":64,"value":2983},{"type":58,"tag":310,"props":3018,"children":3019},{"style":836},[3020],{"type":64,"value":3021},"Body",{"type":58,"tag":310,"props":3023,"children":3024},{"style":830},[3025],{"type":64,"value":1199},{"type":58,"tag":310,"props":3027,"children":3028},{"style":327},[3029],{"type":64,"value":3012},{"type":58,"tag":310,"props":3031,"children":3032},{"style":830},[3033],{"type":64,"value":948},{"type":58,"tag":310,"props":3035,"children":3036},{"class":312,"line":425},[3037,3041,3046,3051,3056,3061,3065,3069,3074,3079,3083,3087,3092,3096],{"type":58,"tag":310,"props":3038,"children":3039},{"style":830},[3040],{"type":64,"value":1149},{"type":58,"tag":310,"props":3042,"children":3043},{"style":327},[3044],{"type":64,"value":3045},"ModalFooter",{"type":58,"tag":310,"props":3047,"children":3048},{"style":830},[3049],{"type":64,"value":3050},">\u003C",{"type":58,"tag":310,"props":3052,"children":3053},{"style":327},[3054],{"type":64,"value":3055},"Button",{"type":58,"tag":310,"props":3057,"children":3058},{"style":1395},[3059],{"type":64,"value":3060}," onClick",{"type":58,"tag":310,"props":3062,"children":3063},{"style":830},[3064],{"type":64,"value":918},{"type":58,"tag":310,"props":3066,"children":3067},{"style":836},[3068],{"type":64,"value":2920},{"type":58,"tag":310,"props":3070,"children":3071},{"style":830},[3072],{"type":64,"value":3073},"}>",{"type":58,"tag":310,"props":3075,"children":3076},{"style":836},[3077],{"type":64,"value":3078},"Close",{"type":58,"tag":310,"props":3080,"children":3081},{"style":830},[3082],{"type":64,"value":1199},{"type":58,"tag":310,"props":3084,"children":3085},{"style":327},[3086],{"type":64,"value":3055},{"type":58,"tag":310,"props":3088,"children":3089},{"style":830},[3090],{"type":64,"value":3091},">\u003C\u002F",{"type":58,"tag":310,"props":3093,"children":3094},{"style":327},[3095],{"type":64,"value":3045},{"type":58,"tag":310,"props":3097,"children":3098},{"style":830},[3099],{"type":64,"value":948},{"type":58,"tag":310,"props":3101,"children":3102},{"class":312,"line":434},[3103,3107,3111],{"type":58,"tag":310,"props":3104,"children":3105},{"style":830},[3106],{"type":64,"value":1183},{"type":58,"tag":310,"props":3108,"children":3109},{"style":327},[3110],{"type":64,"value":2962},{"type":58,"tag":310,"props":3112,"children":3113},{"style":830},[3114],{"type":64,"value":948},{"type":58,"tag":310,"props":3116,"children":3117},{"class":312,"line":1527},[3118,3122,3126],{"type":58,"tag":310,"props":3119,"children":3120},{"style":830},[3121],{"type":64,"value":1199},{"type":58,"tag":310,"props":3123,"children":3124},{"style":327},[3125],{"type":64,"value":2730},{"type":58,"tag":310,"props":3127,"children":3128},{"style":830},[3129],{"type":64,"value":948},{"type":58,"tag":310,"props":3131,"children":3132},{"class":312,"line":1635},[3133],{"type":58,"tag":310,"props":3134,"children":3135},{"emptyLinePlaceholder":368},[3136],{"type":64,"value":371},{"type":58,"tag":310,"props":3138,"children":3139},{"class":312,"line":1648},[3140],{"type":58,"tag":310,"props":3141,"children":3142},{"style":317},[3143],{"type":64,"value":1322},{"type":58,"tag":310,"props":3145,"children":3146},{"class":312,"line":1943},[3147,3151,3156,3161,3165,3169,3173,3178,3183,3188,3193,3198,3203,3208],{"type":58,"tag":310,"props":3148,"children":3149},{"style":830},[3150],{"type":64,"value":2033},{"type":58,"tag":310,"props":3152,"children":3153},{"style":327},[3154],{"type":64,"value":3155},"Dialog.Root",{"type":58,"tag":310,"props":3157,"children":3158},{"style":1395},[3159],{"type":64,"value":3160}," open",{"type":58,"tag":310,"props":3162,"children":3163},{"style":830},[3164],{"type":64,"value":918},{"type":58,"tag":310,"props":3166,"children":3167},{"style":836},[3168],{"type":64,"value":2199},{"type":58,"tag":310,"props":3170,"children":3171},{"style":830},[3172],{"type":64,"value":2915},{"type":58,"tag":310,"props":3174,"children":3175},{"style":1395},[3176],{"type":64,"value":3177},"onOpenChange",{"type":58,"tag":310,"props":3179,"children":3180},{"style":830},[3181],{"type":64,"value":3182},"={({",{"type":58,"tag":310,"props":3184,"children":3186},{"style":3185},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[3187],{"type":64,"value":3160},{"type":58,"tag":310,"props":3189,"children":3190},{"style":830},[3191],{"type":64,"value":3192}," })",{"type":58,"tag":310,"props":3194,"children":3195},{"style":1395},[3196],{"type":64,"value":3197}," =>",{"type":58,"tag":310,"props":3199,"children":3200},{"style":1409},[3201],{"type":64,"value":3202}," setOpen",{"type":58,"tag":310,"props":3204,"children":3205},{"style":836},[3206],{"type":64,"value":3207},"(open)",{"type":58,"tag":310,"props":3209,"children":3210},{"style":830},[3211],{"type":64,"value":2933},{"type":58,"tag":310,"props":3213,"children":3214},{"class":312,"line":1952},[3215,3219,3224],{"type":58,"tag":310,"props":3216,"children":3217},{"style":830},[3218],{"type":64,"value":1131},{"type":58,"tag":310,"props":3220,"children":3221},{"style":327},[3222],{"type":64,"value":3223},"Dialog.Backdrop",{"type":58,"tag":310,"props":3225,"children":3226},{"style":830},[3227],{"type":64,"value":2950},{"type":58,"tag":310,"props":3229,"children":3231},{"class":312,"line":3230},14,[3232,3236,3241],{"type":58,"tag":310,"props":3233,"children":3234},{"style":830},[3235],{"type":64,"value":1131},{"type":58,"tag":310,"props":3237,"children":3238},{"style":327},[3239],{"type":64,"value":3240},"Dialog.Positioner",{"type":58,"tag":310,"props":3242,"children":3243},{"style":830},[3244],{"type":64,"value":948},{"type":58,"tag":310,"props":3246,"children":3248},{"class":312,"line":3247},15,[3249,3253,3258],{"type":58,"tag":310,"props":3250,"children":3251},{"style":830},[3252],{"type":64,"value":1149},{"type":58,"tag":310,"props":3254,"children":3255},{"style":327},[3256],{"type":64,"value":3257},"Dialog.Content",{"type":58,"tag":310,"props":3259,"children":3260},{"style":830},[3261],{"type":64,"value":948},{"type":58,"tag":310,"props":3263,"children":3265},{"class":312,"line":3264},16,[3266,3271,3276,3280,3285,3289,3293,3297,3301,3305,3309],{"type":58,"tag":310,"props":3267,"children":3268},{"style":830},[3269],{"type":64,"value":3270},"      \u003C",{"type":58,"tag":310,"props":3272,"children":3273},{"style":327},[3274],{"type":64,"value":3275},"Dialog.Header",{"type":58,"tag":310,"props":3277,"children":3278},{"style":830},[3279],{"type":64,"value":3050},{"type":58,"tag":310,"props":3281,"children":3282},{"style":327},[3283],{"type":64,"value":3284},"Dialog.Title",{"type":58,"tag":310,"props":3286,"children":3287},{"style":830},[3288],{"type":64,"value":2983},{"type":58,"tag":310,"props":3290,"children":3291},{"style":836},[3292],{"type":64,"value":2988},{"type":58,"tag":310,"props":3294,"children":3295},{"style":830},[3296],{"type":64,"value":1199},{"type":58,"tag":310,"props":3298,"children":3299},{"style":327},[3300],{"type":64,"value":3284},{"type":58,"tag":310,"props":3302,"children":3303},{"style":830},[3304],{"type":64,"value":3091},{"type":58,"tag":310,"props":3306,"children":3307},{"style":327},[3308],{"type":64,"value":3275},{"type":58,"tag":310,"props":3310,"children":3311},{"style":830},[3312],{"type":64,"value":948},{"type":58,"tag":310,"props":3314,"children":3316},{"class":312,"line":3315},17,[3317,3321,3326,3330,3334,3338,3342],{"type":58,"tag":310,"props":3318,"children":3319},{"style":830},[3320],{"type":64,"value":3270},{"type":58,"tag":310,"props":3322,"children":3323},{"style":327},[3324],{"type":64,"value":3325},"Dialog.Body",{"type":58,"tag":310,"props":3327,"children":3328},{"style":830},[3329],{"type":64,"value":2983},{"type":58,"tag":310,"props":3331,"children":3332},{"style":836},[3333],{"type":64,"value":3021},{"type":58,"tag":310,"props":3335,"children":3336},{"style":830},[3337],{"type":64,"value":1199},{"type":58,"tag":310,"props":3339,"children":3340},{"style":327},[3341],{"type":64,"value":3325},{"type":58,"tag":310,"props":3343,"children":3344},{"style":830},[3345],{"type":64,"value":948},{"type":58,"tag":310,"props":3347,"children":3349},{"class":312,"line":3348},18,[3350,3354,3359,3363,3367,3371,3376,3380,3384,3388,3394,3398,3402,3406,3410,3414,3418,3422],{"type":58,"tag":310,"props":3351,"children":3352},{"style":830},[3353],{"type":64,"value":3270},{"type":58,"tag":310,"props":3355,"children":3356},{"style":327},[3357],{"type":64,"value":3358},"Dialog.Footer",{"type":58,"tag":310,"props":3360,"children":3361},{"style":830},[3362],{"type":64,"value":3050},{"type":58,"tag":310,"props":3364,"children":3365},{"style":327},[3366],{"type":64,"value":3055},{"type":58,"tag":310,"props":3368,"children":3369},{"style":1395},[3370],{"type":64,"value":3060},{"type":58,"tag":310,"props":3372,"children":3373},{"style":830},[3374],{"type":64,"value":3375},"={()",{"type":58,"tag":310,"props":3377,"children":3378},{"style":1395},[3379],{"type":64,"value":3197},{"type":58,"tag":310,"props":3381,"children":3382},{"style":1409},[3383],{"type":64,"value":3202},{"type":58,"tag":310,"props":3385,"children":3386},{"style":836},[3387],{"type":64,"value":1416},{"type":58,"tag":310,"props":3389,"children":3391},{"style":3390},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[3392],{"type":64,"value":3393},"false",{"type":58,"tag":310,"props":3395,"children":3396},{"style":836},[3397],{"type":64,"value":218},{"type":58,"tag":310,"props":3399,"children":3400},{"style":830},[3401],{"type":64,"value":3073},{"type":58,"tag":310,"props":3403,"children":3404},{"style":836},[3405],{"type":64,"value":3078},{"type":58,"tag":310,"props":3407,"children":3408},{"style":830},[3409],{"type":64,"value":1199},{"type":58,"tag":310,"props":3411,"children":3412},{"style":327},[3413],{"type":64,"value":3055},{"type":58,"tag":310,"props":3415,"children":3416},{"style":830},[3417],{"type":64,"value":3091},{"type":58,"tag":310,"props":3419,"children":3420},{"style":327},[3421],{"type":64,"value":3358},{"type":58,"tag":310,"props":3423,"children":3424},{"style":830},[3425],{"type":64,"value":948},{"type":58,"tag":310,"props":3427,"children":3429},{"class":312,"line":3428},19,[3430,3434,3439],{"type":58,"tag":310,"props":3431,"children":3432},{"style":830},[3433],{"type":64,"value":3270},{"type":58,"tag":310,"props":3435,"children":3436},{"style":327},[3437],{"type":64,"value":3438},"Dialog.CloseTrigger",{"type":58,"tag":310,"props":3440,"children":3441},{"style":830},[3442],{"type":64,"value":2950},{"type":58,"tag":310,"props":3444,"children":3446},{"class":312,"line":3445},20,[3447,3452,3456],{"type":58,"tag":310,"props":3448,"children":3449},{"style":830},[3450],{"type":64,"value":3451},"    \u003C\u002F",{"type":58,"tag":310,"props":3453,"children":3454},{"style":327},[3455],{"type":64,"value":3257},{"type":58,"tag":310,"props":3457,"children":3458},{"style":830},[3459],{"type":64,"value":948},{"type":58,"tag":310,"props":3461,"children":3463},{"class":312,"line":3462},21,[3464,3468,3472],{"type":58,"tag":310,"props":3465,"children":3466},{"style":830},[3467],{"type":64,"value":1183},{"type":58,"tag":310,"props":3469,"children":3470},{"style":327},[3471],{"type":64,"value":3240},{"type":58,"tag":310,"props":3473,"children":3474},{"style":830},[3475],{"type":64,"value":948},{"type":58,"tag":310,"props":3477,"children":3479},{"class":312,"line":3478},22,[3480,3484,3488],{"type":58,"tag":310,"props":3481,"children":3482},{"style":830},[3483],{"type":64,"value":1199},{"type":58,"tag":310,"props":3485,"children":3486},{"style":327},[3487],{"type":64,"value":3155},{"type":58,"tag":310,"props":3489,"children":3490},{"style":830},[3491],{"type":64,"value":948},{"type":58,"tag":294,"props":3493,"children":3495},{"id":3494},"compound-component-rewrites",[3496],{"type":64,"value":3497},"Compound component rewrites",{"type":58,"tag":67,"props":3499,"children":3500},{},[3501],{"type":64,"value":3502},"v3 adopts a consistent compound component API. The codemod handles many of\nthese, but complex custom usage needs manual review.",{"type":58,"tag":67,"props":3504,"children":3505},{},[3506],{"type":58,"tag":80,"props":3507,"children":3508},{},[3509],{"type":64,"value":3510},"Checkbox",{"type":58,"tag":104,"props":3512,"children":3514},{"className":804,"code":3513,"language":806,"meta":113,"style":113},"\u002F\u002F v2\n\u003CCheckbox isChecked={val} onChange={fn}>Label\u003C\u002FCheckbox>\n\n\u002F\u002F v3\n\u003CCheckbox.Root checked={val} onCheckedChange={fn}>\n  \u003CCheckbox.Control>\u003CCheckbox.Indicator \u002F>\u003C\u002FCheckbox.Control>\n  \u003CCheckbox.Label>Label\u003C\u002FCheckbox.Label>\n\u003C\u002FCheckbox.Root>\n",[3515],{"type":58,"tag":111,"props":3516,"children":3517},{"__ignoreMap":113},[3518,3525,3589,3596,3603,3649,3683,3715],{"type":58,"tag":310,"props":3519,"children":3520},{"class":312,"line":313},[3521],{"type":58,"tag":310,"props":3522,"children":3523},{"style":317},[3524],{"type":64,"value":818},{"type":58,"tag":310,"props":3526,"children":3527},{"class":312,"line":323},[3528,3532,3536,3541,3545,3550,3554,3559,3563,3568,3572,3577,3581,3585],{"type":58,"tag":310,"props":3529,"children":3530},{"style":830},[3531],{"type":64,"value":2033},{"type":58,"tag":310,"props":3533,"children":3534},{"style":327},[3535],{"type":64,"value":3510},{"type":58,"tag":310,"props":3537,"children":3538},{"style":1395},[3539],{"type":64,"value":3540}," isChecked",{"type":58,"tag":310,"props":3542,"children":3543},{"style":830},[3544],{"type":64,"value":918},{"type":58,"tag":310,"props":3546,"children":3547},{"style":836},[3548],{"type":64,"value":3549},"val",{"type":58,"tag":310,"props":3551,"children":3552},{"style":830},[3553],{"type":64,"value":2915},{"type":58,"tag":310,"props":3555,"children":3556},{"style":1395},[3557],{"type":64,"value":3558},"onChange",{"type":58,"tag":310,"props":3560,"children":3561},{"style":830},[3562],{"type":64,"value":918},{"type":58,"tag":310,"props":3564,"children":3565},{"style":836},[3566],{"type":64,"value":3567},"fn",{"type":58,"tag":310,"props":3569,"children":3570},{"style":830},[3571],{"type":64,"value":3073},{"type":58,"tag":310,"props":3573,"children":3574},{"style":836},[3575],{"type":64,"value":3576},"Label",{"type":58,"tag":310,"props":3578,"children":3579},{"style":830},[3580],{"type":64,"value":1199},{"type":58,"tag":310,"props":3582,"children":3583},{"style":327},[3584],{"type":64,"value":3510},{"type":58,"tag":310,"props":3586,"children":3587},{"style":830},[3588],{"type":64,"value":948},{"type":58,"tag":310,"props":3590,"children":3591},{"class":312,"line":364},[3592],{"type":58,"tag":310,"props":3593,"children":3594},{"emptyLinePlaceholder":368},[3595],{"type":64,"value":371},{"type":58,"tag":310,"props":3597,"children":3598},{"class":312,"line":374},[3599],{"type":58,"tag":310,"props":3600,"children":3601},{"style":317},[3602],{"type":64,"value":1322},{"type":58,"tag":310,"props":3604,"children":3605},{"class":312,"line":383},[3606,3610,3615,3620,3624,3628,3632,3637,3641,3645],{"type":58,"tag":310,"props":3607,"children":3608},{"style":830},[3609],{"type":64,"value":2033},{"type":58,"tag":310,"props":3611,"children":3612},{"style":327},[3613],{"type":64,"value":3614},"Checkbox.Root",{"type":58,"tag":310,"props":3616,"children":3617},{"style":1395},[3618],{"type":64,"value":3619}," checked",{"type":58,"tag":310,"props":3621,"children":3622},{"style":830},[3623],{"type":64,"value":918},{"type":58,"tag":310,"props":3625,"children":3626},{"style":836},[3627],{"type":64,"value":3549},{"type":58,"tag":310,"props":3629,"children":3630},{"style":830},[3631],{"type":64,"value":2915},{"type":58,"tag":310,"props":3633,"children":3634},{"style":1395},[3635],{"type":64,"value":3636},"onCheckedChange",{"type":58,"tag":310,"props":3638,"children":3639},{"style":830},[3640],{"type":64,"value":918},{"type":58,"tag":310,"props":3642,"children":3643},{"style":836},[3644],{"type":64,"value":3567},{"type":58,"tag":310,"props":3646,"children":3647},{"style":830},[3648],{"type":64,"value":2933},{"type":58,"tag":310,"props":3650,"children":3651},{"class":312,"line":417},[3652,3656,3661,3665,3670,3675,3679],{"type":58,"tag":310,"props":3653,"children":3654},{"style":830},[3655],{"type":64,"value":1131},{"type":58,"tag":310,"props":3657,"children":3658},{"style":327},[3659],{"type":64,"value":3660},"Checkbox.Control",{"type":58,"tag":310,"props":3662,"children":3663},{"style":830},[3664],{"type":64,"value":3050},{"type":58,"tag":310,"props":3666,"children":3667},{"style":327},[3668],{"type":64,"value":3669},"Checkbox.Indicator",{"type":58,"tag":310,"props":3671,"children":3672},{"style":830},[3673],{"type":64,"value":3674}," \u002F>\u003C\u002F",{"type":58,"tag":310,"props":3676,"children":3677},{"style":327},[3678],{"type":64,"value":3660},{"type":58,"tag":310,"props":3680,"children":3681},{"style":830},[3682],{"type":64,"value":948},{"type":58,"tag":310,"props":3684,"children":3685},{"class":312,"line":425},[3686,3690,3695,3699,3703,3707,3711],{"type":58,"tag":310,"props":3687,"children":3688},{"style":830},[3689],{"type":64,"value":1131},{"type":58,"tag":310,"props":3691,"children":3692},{"style":327},[3693],{"type":64,"value":3694},"Checkbox.Label",{"type":58,"tag":310,"props":3696,"children":3697},{"style":830},[3698],{"type":64,"value":2983},{"type":58,"tag":310,"props":3700,"children":3701},{"style":836},[3702],{"type":64,"value":3576},{"type":58,"tag":310,"props":3704,"children":3705},{"style":830},[3706],{"type":64,"value":1199},{"type":58,"tag":310,"props":3708,"children":3709},{"style":327},[3710],{"type":64,"value":3694},{"type":58,"tag":310,"props":3712,"children":3713},{"style":830},[3714],{"type":64,"value":948},{"type":58,"tag":310,"props":3716,"children":3717},{"class":312,"line":434},[3718,3722,3726],{"type":58,"tag":310,"props":3719,"children":3720},{"style":830},[3721],{"type":64,"value":1199},{"type":58,"tag":310,"props":3723,"children":3724},{"style":327},[3725],{"type":64,"value":3614},{"type":58,"tag":310,"props":3727,"children":3728},{"style":830},[3729],{"type":64,"value":948},{"type":58,"tag":67,"props":3731,"children":3732},{},[3733],{"type":58,"tag":80,"props":3734,"children":3735},{},[3736],{"type":64,"value":3737},"Progress",{"type":58,"tag":104,"props":3739,"children":3741},{"className":804,"code":3740,"language":806,"meta":113,"style":113},"\u002F\u002F v2\n\u003CProgress value={60} colorScheme=\"blue\" \u002F>\n\n\u002F\u002F v3\n\u003CProgress.Root value={60} colorPalette=\"blue\">\n  \u003CProgress.Track>\u003CProgress.Range \u002F>\u003C\u002FProgress.Track>\n\u003C\u002FProgress.Root>\n",[3742],{"type":58,"tag":111,"props":3743,"children":3744},{"__ignoreMap":113},[3745,3752,3805,3812,3819,3871,3904],{"type":58,"tag":310,"props":3746,"children":3747},{"class":312,"line":313},[3748],{"type":58,"tag":310,"props":3749,"children":3750},{"style":317},[3751],{"type":64,"value":818},{"type":58,"tag":310,"props":3753,"children":3754},{"class":312,"line":323},[3755,3759,3763,3767,3771,3776,3780,3784,3788,3792,3797,3801],{"type":58,"tag":310,"props":3756,"children":3757},{"style":830},[3758],{"type":64,"value":2033},{"type":58,"tag":310,"props":3760,"children":3761},{"style":327},[3762],{"type":64,"value":3737},{"type":58,"tag":310,"props":3764,"children":3765},{"style":1395},[3766],{"type":64,"value":1595},{"type":58,"tag":310,"props":3768,"children":3769},{"style":830},[3770],{"type":64,"value":918},{"type":58,"tag":310,"props":3772,"children":3773},{"style":1450},[3774],{"type":64,"value":3775},"60",{"type":58,"tag":310,"props":3777,"children":3778},{"style":830},[3779],{"type":64,"value":2915},{"type":58,"tag":310,"props":3781,"children":3782},{"style":1395},[3783],{"type":64,"value":2405},{"type":58,"tag":310,"props":3785,"children":3786},{"style":830},[3787],{"type":64,"value":1100},{"type":58,"tag":310,"props":3789,"children":3790},{"style":830},[3791],{"type":64,"value":1105},{"type":58,"tag":310,"props":3793,"children":3794},{"style":333},[3795],{"type":64,"value":3796},"blue",{"type":58,"tag":310,"props":3798,"children":3799},{"style":830},[3800],{"type":64,"value":1105},{"type":58,"tag":310,"props":3802,"children":3803},{"style":830},[3804],{"type":64,"value":2950},{"type":58,"tag":310,"props":3806,"children":3807},{"class":312,"line":364},[3808],{"type":58,"tag":310,"props":3809,"children":3810},{"emptyLinePlaceholder":368},[3811],{"type":64,"value":371},{"type":58,"tag":310,"props":3813,"children":3814},{"class":312,"line":374},[3815],{"type":58,"tag":310,"props":3816,"children":3817},{"style":317},[3818],{"type":64,"value":1322},{"type":58,"tag":310,"props":3820,"children":3821},{"class":312,"line":383},[3822,3826,3831,3835,3839,3843,3847,3851,3855,3859,3863,3867],{"type":58,"tag":310,"props":3823,"children":3824},{"style":830},[3825],{"type":64,"value":2033},{"type":58,"tag":310,"props":3827,"children":3828},{"style":327},[3829],{"type":64,"value":3830},"Progress.Root",{"type":58,"tag":310,"props":3832,"children":3833},{"style":1395},[3834],{"type":64,"value":1595},{"type":58,"tag":310,"props":3836,"children":3837},{"style":830},[3838],{"type":64,"value":918},{"type":58,"tag":310,"props":3840,"children":3841},{"style":1450},[3842],{"type":64,"value":3775},{"type":58,"tag":310,"props":3844,"children":3845},{"style":830},[3846],{"type":64,"value":2915},{"type":58,"tag":310,"props":3848,"children":3849},{"style":1395},[3850],{"type":64,"value":2414},{"type":58,"tag":310,"props":3852,"children":3853},{"style":830},[3854],{"type":64,"value":1100},{"type":58,"tag":310,"props":3856,"children":3857},{"style":830},[3858],{"type":64,"value":1105},{"type":58,"tag":310,"props":3860,"children":3861},{"style":333},[3862],{"type":64,"value":3796},{"type":58,"tag":310,"props":3864,"children":3865},{"style":830},[3866],{"type":64,"value":1105},{"type":58,"tag":310,"props":3868,"children":3869},{"style":830},[3870],{"type":64,"value":948},{"type":58,"tag":310,"props":3872,"children":3873},{"class":312,"line":417},[3874,3878,3883,3887,3892,3896,3900],{"type":58,"tag":310,"props":3875,"children":3876},{"style":830},[3877],{"type":64,"value":1131},{"type":58,"tag":310,"props":3879,"children":3880},{"style":327},[3881],{"type":64,"value":3882},"Progress.Track",{"type":58,"tag":310,"props":3884,"children":3885},{"style":830},[3886],{"type":64,"value":3050},{"type":58,"tag":310,"props":3888,"children":3889},{"style":327},[3890],{"type":64,"value":3891},"Progress.Range",{"type":58,"tag":310,"props":3893,"children":3894},{"style":830},[3895],{"type":64,"value":3674},{"type":58,"tag":310,"props":3897,"children":3898},{"style":327},[3899],{"type":64,"value":3882},{"type":58,"tag":310,"props":3901,"children":3902},{"style":830},[3903],{"type":64,"value":948},{"type":58,"tag":310,"props":3905,"children":3906},{"class":312,"line":425},[3907,3911,3915],{"type":58,"tag":310,"props":3908,"children":3909},{"style":830},[3910],{"type":64,"value":1199},{"type":58,"tag":310,"props":3912,"children":3913},{"style":327},[3914],{"type":64,"value":3830},{"type":58,"tag":310,"props":3916,"children":3917},{"style":830},[3918],{"type":64,"value":948},{"type":58,"tag":67,"props":3920,"children":3921},{},[3922],{"type":58,"tag":80,"props":3923,"children":3924},{},[3925],{"type":64,"value":3926},"Accordion",{"type":58,"tag":104,"props":3928,"children":3930},{"className":804,"code":3929,"language":806,"meta":113,"style":113},"\u002F\u002F v2\n\u003CAccordion>\u003CAccordionItem>\u003CAccordionButton \u002F>\u003CAccordionPanel \u002F>\u003C\u002FAccordionItem>\u003C\u002FAccordion>\n\n\u002F\u002F v3\n\u003CAccordion.Root>\n  \u003CAccordion.Item value=\"item-1\">\n    \u003CAccordion.ItemTrigger \u002F>\n    \u003CAccordion.ItemContent \u002F>\n  \u003C\u002FAccordion.Item>\n\u003C\u002FAccordion.Root>\n",[3931],{"type":58,"tag":111,"props":3932,"children":3933},{"__ignoreMap":113},[3934,3941,4000,4007,4014,4030,4067,4083,4099,4114],{"type":58,"tag":310,"props":3935,"children":3936},{"class":312,"line":313},[3937],{"type":58,"tag":310,"props":3938,"children":3939},{"style":317},[3940],{"type":64,"value":818},{"type":58,"tag":310,"props":3942,"children":3943},{"class":312,"line":323},[3944,3948,3952,3956,3961,3965,3970,3975,3980,3984,3988,3992,3996],{"type":58,"tag":310,"props":3945,"children":3946},{"style":830},[3947],{"type":64,"value":2033},{"type":58,"tag":310,"props":3949,"children":3950},{"style":327},[3951],{"type":64,"value":3926},{"type":58,"tag":310,"props":3953,"children":3954},{"style":830},[3955],{"type":64,"value":3050},{"type":58,"tag":310,"props":3957,"children":3958},{"style":327},[3959],{"type":64,"value":3960},"AccordionItem",{"type":58,"tag":310,"props":3962,"children":3963},{"style":830},[3964],{"type":64,"value":3050},{"type":58,"tag":310,"props":3966,"children":3967},{"style":327},[3968],{"type":64,"value":3969},"AccordionButton",{"type":58,"tag":310,"props":3971,"children":3972},{"style":830},[3973],{"type":64,"value":3974}," \u002F>\u003C",{"type":58,"tag":310,"props":3976,"children":3977},{"style":327},[3978],{"type":64,"value":3979},"AccordionPanel",{"type":58,"tag":310,"props":3981,"children":3982},{"style":830},[3983],{"type":64,"value":3674},{"type":58,"tag":310,"props":3985,"children":3986},{"style":327},[3987],{"type":64,"value":3960},{"type":58,"tag":310,"props":3989,"children":3990},{"style":830},[3991],{"type":64,"value":3091},{"type":58,"tag":310,"props":3993,"children":3994},{"style":327},[3995],{"type":64,"value":3926},{"type":58,"tag":310,"props":3997,"children":3998},{"style":830},[3999],{"type":64,"value":948},{"type":58,"tag":310,"props":4001,"children":4002},{"class":312,"line":364},[4003],{"type":58,"tag":310,"props":4004,"children":4005},{"emptyLinePlaceholder":368},[4006],{"type":64,"value":371},{"type":58,"tag":310,"props":4008,"children":4009},{"class":312,"line":374},[4010],{"type":58,"tag":310,"props":4011,"children":4012},{"style":317},[4013],{"type":64,"value":1322},{"type":58,"tag":310,"props":4015,"children":4016},{"class":312,"line":383},[4017,4021,4026],{"type":58,"tag":310,"props":4018,"children":4019},{"style":830},[4020],{"type":64,"value":2033},{"type":58,"tag":310,"props":4022,"children":4023},{"style":327},[4024],{"type":64,"value":4025},"Accordion.Root",{"type":58,"tag":310,"props":4027,"children":4028},{"style":830},[4029],{"type":64,"value":948},{"type":58,"tag":310,"props":4031,"children":4032},{"class":312,"line":417},[4033,4037,4042,4046,4050,4054,4059,4063],{"type":58,"tag":310,"props":4034,"children":4035},{"style":830},[4036],{"type":64,"value":1131},{"type":58,"tag":310,"props":4038,"children":4039},{"style":327},[4040],{"type":64,"value":4041},"Accordion.Item",{"type":58,"tag":310,"props":4043,"children":4044},{"style":1395},[4045],{"type":64,"value":1595},{"type":58,"tag":310,"props":4047,"children":4048},{"style":830},[4049],{"type":64,"value":1100},{"type":58,"tag":310,"props":4051,"children":4052},{"style":830},[4053],{"type":64,"value":1105},{"type":58,"tag":310,"props":4055,"children":4056},{"style":333},[4057],{"type":64,"value":4058},"item-1",{"type":58,"tag":310,"props":4060,"children":4061},{"style":830},[4062],{"type":64,"value":1105},{"type":58,"tag":310,"props":4064,"children":4065},{"style":830},[4066],{"type":64,"value":948},{"type":58,"tag":310,"props":4068,"children":4069},{"class":312,"line":425},[4070,4074,4079],{"type":58,"tag":310,"props":4071,"children":4072},{"style":830},[4073],{"type":64,"value":1149},{"type":58,"tag":310,"props":4075,"children":4076},{"style":327},[4077],{"type":64,"value":4078},"Accordion.ItemTrigger",{"type":58,"tag":310,"props":4080,"children":4081},{"style":830},[4082],{"type":64,"value":2950},{"type":58,"tag":310,"props":4084,"children":4085},{"class":312,"line":434},[4086,4090,4095],{"type":58,"tag":310,"props":4087,"children":4088},{"style":830},[4089],{"type":64,"value":1149},{"type":58,"tag":310,"props":4091,"children":4092},{"style":327},[4093],{"type":64,"value":4094},"Accordion.ItemContent",{"type":58,"tag":310,"props":4096,"children":4097},{"style":830},[4098],{"type":64,"value":2950},{"type":58,"tag":310,"props":4100,"children":4101},{"class":312,"line":1527},[4102,4106,4110],{"type":58,"tag":310,"props":4103,"children":4104},{"style":830},[4105],{"type":64,"value":1183},{"type":58,"tag":310,"props":4107,"children":4108},{"style":327},[4109],{"type":64,"value":4041},{"type":58,"tag":310,"props":4111,"children":4112},{"style":830},[4113],{"type":64,"value":948},{"type":58,"tag":310,"props":4115,"children":4116},{"class":312,"line":1635},[4117,4121,4125],{"type":58,"tag":310,"props":4118,"children":4119},{"style":830},[4120],{"type":64,"value":1199},{"type":58,"tag":310,"props":4122,"children":4123},{"style":327},[4124],{"type":64,"value":4025},{"type":58,"tag":310,"props":4126,"children":4127},{"style":830},[4128],{"type":64,"value":948},{"type":58,"tag":67,"props":4130,"children":4131},{},[4132],{"type":58,"tag":80,"props":4133,"children":4134},{},[4135],{"type":64,"value":4136},"FormControl → Field",{"type":58,"tag":104,"props":4138,"children":4140},{"className":804,"code":4139,"language":806,"meta":113,"style":113},"\u002F\u002F v2\n\u003CFormControl isInvalid={!!error} isRequired>\n  \u003CFormLabel>Email\u003C\u002FFormLabel>\n  \u003CInput type=\"email\" \u002F>\n  \u003CFormErrorMessage>{error}\u003C\u002FFormErrorMessage>\n  \u003CFormHelperText>We'll never share your email.\u003C\u002FFormHelperText>\n\u003C\u002FFormControl>\n\n\u002F\u002F v3\n\u003CField.Root invalid={!!error} required>\n  \u003CField.Label>Email\u003C\u002FField.Label>\n  \u003CInput type=\"email\" \u002F>\n  \u003CField.ErrorText>{error}\u003C\u002FField.ErrorText>\n  \u003CField.HelpText>We'll never share your email.\u003C\u002FField.HelpText>\n\u003C\u002FField.Root>\n",[4141],{"type":58,"tag":111,"props":4142,"children":4143},{"__ignoreMap":113},[4144,4151,4189,4222,4260,4292,4325,4340,4347,4354,4391,4423,4458,4490,4522],{"type":58,"tag":310,"props":4145,"children":4146},{"class":312,"line":313},[4147],{"type":58,"tag":310,"props":4148,"children":4149},{"style":317},[4150],{"type":64,"value":818},{"type":58,"tag":310,"props":4152,"children":4153},{"class":312,"line":323},[4154,4158,4162,4167,4172,4177,4181,4185],{"type":58,"tag":310,"props":4155,"children":4156},{"style":830},[4157],{"type":64,"value":2033},{"type":58,"tag":310,"props":4159,"children":4160},{"style":327},[4161],{"type":64,"value":2751},{"type":58,"tag":310,"props":4163,"children":4164},{"style":1395},[4165],{"type":64,"value":4166}," isInvalid",{"type":58,"tag":310,"props":4168,"children":4169},{"style":830},[4170],{"type":64,"value":4171},"={!!",{"type":58,"tag":310,"props":4173,"children":4174},{"style":836},[4175],{"type":64,"value":4176},"error",{"type":58,"tag":310,"props":4178,"children":4179},{"style":830},[4180],{"type":64,"value":2915},{"type":58,"tag":310,"props":4182,"children":4183},{"style":1395},[4184],{"type":64,"value":2274},{"type":58,"tag":310,"props":4186,"children":4187},{"style":830},[4188],{"type":64,"value":948},{"type":58,"tag":310,"props":4190,"children":4191},{"class":312,"line":364},[4192,4196,4201,4205,4210,4214,4218],{"type":58,"tag":310,"props":4193,"children":4194},{"style":830},[4195],{"type":64,"value":1131},{"type":58,"tag":310,"props":4197,"children":4198},{"style":327},[4199],{"type":64,"value":4200},"FormLabel",{"type":58,"tag":310,"props":4202,"children":4203},{"style":830},[4204],{"type":64,"value":2983},{"type":58,"tag":310,"props":4206,"children":4207},{"style":836},[4208],{"type":64,"value":4209},"Email",{"type":58,"tag":310,"props":4211,"children":4212},{"style":830},[4213],{"type":64,"value":1199},{"type":58,"tag":310,"props":4215,"children":4216},{"style":327},[4217],{"type":64,"value":4200},{"type":58,"tag":310,"props":4219,"children":4220},{"style":830},[4221],{"type":64,"value":948},{"type":58,"tag":310,"props":4223,"children":4224},{"class":312,"line":374},[4225,4229,4234,4239,4243,4247,4252,4256],{"type":58,"tag":310,"props":4226,"children":4227},{"style":830},[4228],{"type":64,"value":1131},{"type":58,"tag":310,"props":4230,"children":4231},{"style":327},[4232],{"type":64,"value":4233},"Input",{"type":58,"tag":310,"props":4235,"children":4236},{"style":1395},[4237],{"type":64,"value":4238}," type",{"type":58,"tag":310,"props":4240,"children":4241},{"style":830},[4242],{"type":64,"value":1100},{"type":58,"tag":310,"props":4244,"children":4245},{"style":830},[4246],{"type":64,"value":1105},{"type":58,"tag":310,"props":4248,"children":4249},{"style":333},[4250],{"type":64,"value":4251},"email",{"type":58,"tag":310,"props":4253,"children":4254},{"style":830},[4255],{"type":64,"value":1105},{"type":58,"tag":310,"props":4257,"children":4258},{"style":830},[4259],{"type":64,"value":2950},{"type":58,"tag":310,"props":4261,"children":4262},{"class":312,"line":383},[4263,4267,4272,4276,4280,4284,4288],{"type":58,"tag":310,"props":4264,"children":4265},{"style":830},[4266],{"type":64,"value":1131},{"type":58,"tag":310,"props":4268,"children":4269},{"style":327},[4270],{"type":64,"value":4271},"FormErrorMessage",{"type":58,"tag":310,"props":4273,"children":4274},{"style":830},[4275],{"type":64,"value":1159},{"type":58,"tag":310,"props":4277,"children":4278},{"style":836},[4279],{"type":64,"value":4176},{"type":58,"tag":310,"props":4281,"children":4282},{"style":830},[4283],{"type":64,"value":938},{"type":58,"tag":310,"props":4285,"children":4286},{"style":327},[4287],{"type":64,"value":4271},{"type":58,"tag":310,"props":4289,"children":4290},{"style":830},[4291],{"type":64,"value":948},{"type":58,"tag":310,"props":4293,"children":4294},{"class":312,"line":417},[4295,4299,4304,4308,4313,4317,4321],{"type":58,"tag":310,"props":4296,"children":4297},{"style":830},[4298],{"type":64,"value":1131},{"type":58,"tag":310,"props":4300,"children":4301},{"style":327},[4302],{"type":64,"value":4303},"FormHelperText",{"type":58,"tag":310,"props":4305,"children":4306},{"style":830},[4307],{"type":64,"value":2983},{"type":58,"tag":310,"props":4309,"children":4310},{"style":836},[4311],{"type":64,"value":4312},"We'll never share your email.",{"type":58,"tag":310,"props":4314,"children":4315},{"style":830},[4316],{"type":64,"value":1199},{"type":58,"tag":310,"props":4318,"children":4319},{"style":327},[4320],{"type":64,"value":4303},{"type":58,"tag":310,"props":4322,"children":4323},{"style":830},[4324],{"type":64,"value":948},{"type":58,"tag":310,"props":4326,"children":4327},{"class":312,"line":425},[4328,4332,4336],{"type":58,"tag":310,"props":4329,"children":4330},{"style":830},[4331],{"type":64,"value":1199},{"type":58,"tag":310,"props":4333,"children":4334},{"style":327},[4335],{"type":64,"value":2751},{"type":58,"tag":310,"props":4337,"children":4338},{"style":830},[4339],{"type":64,"value":948},{"type":58,"tag":310,"props":4341,"children":4342},{"class":312,"line":434},[4343],{"type":58,"tag":310,"props":4344,"children":4345},{"emptyLinePlaceholder":368},[4346],{"type":64,"value":371},{"type":58,"tag":310,"props":4348,"children":4349},{"class":312,"line":1527},[4350],{"type":58,"tag":310,"props":4351,"children":4352},{"style":317},[4353],{"type":64,"value":1322},{"type":58,"tag":310,"props":4355,"children":4356},{"class":312,"line":1635},[4357,4361,4366,4371,4375,4379,4383,4387],{"type":58,"tag":310,"props":4358,"children":4359},{"style":830},[4360],{"type":64,"value":2033},{"type":58,"tag":310,"props":4362,"children":4363},{"style":327},[4364],{"type":64,"value":4365},"Field.Root",{"type":58,"tag":310,"props":4367,"children":4368},{"style":1395},[4369],{"type":64,"value":4370}," invalid",{"type":58,"tag":310,"props":4372,"children":4373},{"style":830},[4374],{"type":64,"value":4171},{"type":58,"tag":310,"props":4376,"children":4377},{"style":836},[4378],{"type":64,"value":4176},{"type":58,"tag":310,"props":4380,"children":4381},{"style":830},[4382],{"type":64,"value":2915},{"type":58,"tag":310,"props":4384,"children":4385},{"style":1395},[4386],{"type":64,"value":2283},{"type":58,"tag":310,"props":4388,"children":4389},{"style":830},[4390],{"type":64,"value":948},{"type":58,"tag":310,"props":4392,"children":4393},{"class":312,"line":1648},[4394,4398,4403,4407,4411,4415,4419],{"type":58,"tag":310,"props":4395,"children":4396},{"style":830},[4397],{"type":64,"value":1131},{"type":58,"tag":310,"props":4399,"children":4400},{"style":327},[4401],{"type":64,"value":4402},"Field.Label",{"type":58,"tag":310,"props":4404,"children":4405},{"style":830},[4406],{"type":64,"value":2983},{"type":58,"tag":310,"props":4408,"children":4409},{"style":836},[4410],{"type":64,"value":4209},{"type":58,"tag":310,"props":4412,"children":4413},{"style":830},[4414],{"type":64,"value":1199},{"type":58,"tag":310,"props":4416,"children":4417},{"style":327},[4418],{"type":64,"value":4402},{"type":58,"tag":310,"props":4420,"children":4421},{"style":830},[4422],{"type":64,"value":948},{"type":58,"tag":310,"props":4424,"children":4425},{"class":312,"line":1943},[4426,4430,4434,4438,4442,4446,4450,4454],{"type":58,"tag":310,"props":4427,"children":4428},{"style":830},[4429],{"type":64,"value":1131},{"type":58,"tag":310,"props":4431,"children":4432},{"style":327},[4433],{"type":64,"value":4233},{"type":58,"tag":310,"props":4435,"children":4436},{"style":1395},[4437],{"type":64,"value":4238},{"type":58,"tag":310,"props":4439,"children":4440},{"style":830},[4441],{"type":64,"value":1100},{"type":58,"tag":310,"props":4443,"children":4444},{"style":830},[4445],{"type":64,"value":1105},{"type":58,"tag":310,"props":4447,"children":4448},{"style":333},[4449],{"type":64,"value":4251},{"type":58,"tag":310,"props":4451,"children":4452},{"style":830},[4453],{"type":64,"value":1105},{"type":58,"tag":310,"props":4455,"children":4456},{"style":830},[4457],{"type":64,"value":2950},{"type":58,"tag":310,"props":4459,"children":4460},{"class":312,"line":1952},[4461,4465,4470,4474,4478,4482,4486],{"type":58,"tag":310,"props":4462,"children":4463},{"style":830},[4464],{"type":64,"value":1131},{"type":58,"tag":310,"props":4466,"children":4467},{"style":327},[4468],{"type":64,"value":4469},"Field.ErrorText",{"type":58,"tag":310,"props":4471,"children":4472},{"style":830},[4473],{"type":64,"value":1159},{"type":58,"tag":310,"props":4475,"children":4476},{"style":836},[4477],{"type":64,"value":4176},{"type":58,"tag":310,"props":4479,"children":4480},{"style":830},[4481],{"type":64,"value":938},{"type":58,"tag":310,"props":4483,"children":4484},{"style":327},[4485],{"type":64,"value":4469},{"type":58,"tag":310,"props":4487,"children":4488},{"style":830},[4489],{"type":64,"value":948},{"type":58,"tag":310,"props":4491,"children":4492},{"class":312,"line":3230},[4493,4497,4502,4506,4510,4514,4518],{"type":58,"tag":310,"props":4494,"children":4495},{"style":830},[4496],{"type":64,"value":1131},{"type":58,"tag":310,"props":4498,"children":4499},{"style":327},[4500],{"type":64,"value":4501},"Field.HelpText",{"type":58,"tag":310,"props":4503,"children":4504},{"style":830},[4505],{"type":64,"value":2983},{"type":58,"tag":310,"props":4507,"children":4508},{"style":836},[4509],{"type":64,"value":4312},{"type":58,"tag":310,"props":4511,"children":4512},{"style":830},[4513],{"type":64,"value":1199},{"type":58,"tag":310,"props":4515,"children":4516},{"style":327},[4517],{"type":64,"value":4501},{"type":58,"tag":310,"props":4519,"children":4520},{"style":830},[4521],{"type":64,"value":948},{"type":58,"tag":310,"props":4523,"children":4524},{"class":312,"line":3247},[4525,4529,4533],{"type":58,"tag":310,"props":4526,"children":4527},{"style":830},[4528],{"type":64,"value":1199},{"type":58,"tag":310,"props":4530,"children":4531},{"style":327},[4532],{"type":64,"value":4365},{"type":58,"tag":310,"props":4534,"children":4535},{"style":830},[4536],{"type":64,"value":948},{"type":58,"tag":67,"props":4538,"children":4539},{},[4540,4542,4547,4549,4555],{"type":64,"value":4541},"All ",{"type":58,"tag":111,"props":4543,"children":4545},{"className":4544},[],[4546],{"type":64,"value":2751},{"type":64,"value":4548}," sub-parts map to ",{"type":58,"tag":111,"props":4550,"children":4552},{"className":4551},[],[4553],{"type":64,"value":4554},"Field.*",{"type":64,"value":1262},{"type":58,"tag":122,"props":4557,"children":4558},{},[4559,4574,4588,4602],{"type":58,"tag":126,"props":4560,"children":4561},{},[4562,4567,4569],{"type":58,"tag":111,"props":4563,"children":4565},{"className":4564},[],[4566],{"type":64,"value":4200},{"type":64,"value":4568}," → ",{"type":58,"tag":111,"props":4570,"children":4572},{"className":4571},[],[4573],{"type":64,"value":4402},{"type":58,"tag":126,"props":4575,"children":4576},{},[4577,4582,4583],{"type":58,"tag":111,"props":4578,"children":4580},{"className":4579},[],[4581],{"type":64,"value":4271},{"type":64,"value":4568},{"type":58,"tag":111,"props":4584,"children":4586},{"className":4585},[],[4587],{"type":64,"value":4469},{"type":58,"tag":126,"props":4589,"children":4590},{},[4591,4596,4597],{"type":58,"tag":111,"props":4592,"children":4594},{"className":4593},[],[4595],{"type":64,"value":4303},{"type":64,"value":4568},{"type":58,"tag":111,"props":4598,"children":4600},{"className":4599},[],[4601],{"type":64,"value":4501},{"type":58,"tag":126,"props":4603,"children":4604},{},[4605,4610,4612,4617,4618,4623,4624,4629,4630,4635,4636,4641,4642],{"type":58,"tag":111,"props":4606,"children":4608},{"className":4607},[],[4609],{"type":64,"value":2751},{"type":64,"value":4611}," props ",{"type":58,"tag":111,"props":4613,"children":4615},{"className":4614},[],[4616],{"type":64,"value":2253},{"type":64,"value":151},{"type":58,"tag":111,"props":4619,"children":4621},{"className":4620},[],[4622],{"type":64,"value":2274},{"type":64,"value":151},{"type":58,"tag":111,"props":4625,"children":4627},{"className":4626},[],[4628],{"type":64,"value":2232},{"type":64,"value":4568},{"type":58,"tag":111,"props":4631,"children":4633},{"className":4632},[],[4634],{"type":64,"value":2262},{"type":64,"value":159},{"type":58,"tag":111,"props":4637,"children":4639},{"className":4638},[],[4640],{"type":64,"value":2283},{"type":64,"value":151},{"type":58,"tag":111,"props":4643,"children":4645},{"className":4644},[],[4646],{"type":64,"value":2241},{"type":58,"tag":67,"props":4648,"children":4649},{},[4650,4655,4657,4663,4664,4670,4671,4677,4678,4684],{"type":58,"tag":80,"props":4651,"children":4652},{},[4653],{"type":64,"value":4654},"Dialog \u002F Drawer \u002F Menu \u002F Tabs",{"type":64,"value":4656}," follow the same compound pattern: use\n",{"type":58,"tag":111,"props":4658,"children":4660},{"className":4659},[],[4661],{"type":64,"value":4662},"ComponentName.Root",{"type":64,"value":151},{"type":58,"tag":111,"props":4665,"children":4667},{"className":4666},[],[4668],{"type":64,"value":4669},".Trigger",{"type":64,"value":151},{"type":58,"tag":111,"props":4672,"children":4674},{"className":4673},[],[4675],{"type":64,"value":4676},".Content",{"type":64,"value":151},{"type":58,"tag":111,"props":4679,"children":4681},{"className":4680},[],[4682],{"type":64,"value":4683},".Item",{"type":64,"value":4685},", etc. Check the Chakra UI\nv3 docs for the specific compound API for each.",{"type":58,"tag":294,"props":4687,"children":4689},{"id":4688},"nextjs-image-and-link-replacing-chakra-uinext-js",[4690],{"type":64,"value":4691},"Next.js Image and Link (replacing @chakra-ui\u002Fnext-js)",{"type":58,"tag":104,"props":4693,"children":4695},{"className":804,"code":4694,"language":806,"meta":113,"style":113},"\u002F\u002F v2 — @chakra-ui\u002Fnext-js\nimport { LinkOverlay } from \"@chakra-ui\u002Fnext-js\"\n\n\u002F\u002F v3 — asChild pattern\nimport NextLink from \"next\u002Flink\"\n\u003CChakraLink asChild>\u003CNextLink href=\"\u002Fabout\">About\u003C\u002FNextLink>\u003C\u002FChakraLink>\n\nimport NextImage from \"next\u002Fimage\"\n\u003CChakraImage asChild>\u003CNextImage src=\"...\" alt=\"...\" \u002F>\u003C\u002FChakraImage>\n",[4696],{"type":58,"tag":111,"props":4697,"children":4698},{"__ignoreMap":113},[4699,4707,4743,4750,4758,4787,4864,4871,4900],{"type":58,"tag":310,"props":4700,"children":4701},{"class":312,"line":313},[4702],{"type":58,"tag":310,"props":4703,"children":4704},{"style":317},[4705],{"type":64,"value":4706},"\u002F\u002F v2 — @chakra-ui\u002Fnext-js\n",{"type":58,"tag":310,"props":4708,"children":4709},{"class":312,"line":323},[4710,4714,4718,4723,4727,4731,4735,4739],{"type":58,"tag":310,"props":4711,"children":4712},{"style":824},[4713],{"type":64,"value":827},{"type":58,"tag":310,"props":4715,"children":4716},{"style":830},[4717],{"type":64,"value":833},{"type":58,"tag":310,"props":4719,"children":4720},{"style":836},[4721],{"type":64,"value":4722}," LinkOverlay",{"type":58,"tag":310,"props":4724,"children":4725},{"style":830},[4726],{"type":64,"value":844},{"type":58,"tag":310,"props":4728,"children":4729},{"style":824},[4730],{"type":64,"value":849},{"type":58,"tag":310,"props":4732,"children":4733},{"style":830},[4734],{"type":64,"value":854},{"type":58,"tag":310,"props":4736,"children":4737},{"style":333},[4738],{"type":64,"value":165},{"type":58,"tag":310,"props":4740,"children":4741},{"style":830},[4742],{"type":64,"value":863},{"type":58,"tag":310,"props":4744,"children":4745},{"class":312,"line":364},[4746],{"type":58,"tag":310,"props":4747,"children":4748},{"emptyLinePlaceholder":368},[4749],{"type":64,"value":371},{"type":58,"tag":310,"props":4751,"children":4752},{"class":312,"line":374},[4753],{"type":58,"tag":310,"props":4754,"children":4755},{"style":317},[4756],{"type":64,"value":4757},"\u002F\u002F v3 — asChild pattern\n",{"type":58,"tag":310,"props":4759,"children":4760},{"class":312,"line":383},[4761,4765,4770,4774,4778,4783],{"type":58,"tag":310,"props":4762,"children":4763},{"style":824},[4764],{"type":64,"value":827},{"type":58,"tag":310,"props":4766,"children":4767},{"style":836},[4768],{"type":64,"value":4769}," NextLink ",{"type":58,"tag":310,"props":4771,"children":4772},{"style":824},[4773],{"type":64,"value":880},{"type":58,"tag":310,"props":4775,"children":4776},{"style":830},[4777],{"type":64,"value":854},{"type":58,"tag":310,"props":4779,"children":4780},{"style":333},[4781],{"type":64,"value":4782},"next\u002Flink",{"type":58,"tag":310,"props":4784,"children":4785},{"style":830},[4786],{"type":64,"value":863},{"type":58,"tag":310,"props":4788,"children":4789},{"class":312,"line":417},[4790,4794,4799,4804,4808,4813,4818,4822,4826,4831,4835,4839,4844,4848,4852,4856,4860],{"type":58,"tag":310,"props":4791,"children":4792},{"style":830},[4793],{"type":64,"value":2033},{"type":58,"tag":310,"props":4795,"children":4796},{"style":327},[4797],{"type":64,"value":4798},"ChakraLink",{"type":58,"tag":310,"props":4800,"children":4801},{"style":1395},[4802],{"type":64,"value":4803}," asChild",{"type":58,"tag":310,"props":4805,"children":4806},{"style":830},[4807],{"type":64,"value":3050},{"type":58,"tag":310,"props":4809,"children":4810},{"style":327},[4811],{"type":64,"value":4812},"NextLink",{"type":58,"tag":310,"props":4814,"children":4815},{"style":1395},[4816],{"type":64,"value":4817}," href",{"type":58,"tag":310,"props":4819,"children":4820},{"style":830},[4821],{"type":64,"value":1100},{"type":58,"tag":310,"props":4823,"children":4824},{"style":830},[4825],{"type":64,"value":1105},{"type":58,"tag":310,"props":4827,"children":4828},{"style":333},[4829],{"type":64,"value":4830},"\u002Fabout",{"type":58,"tag":310,"props":4832,"children":4833},{"style":830},[4834],{"type":64,"value":1105},{"type":58,"tag":310,"props":4836,"children":4837},{"style":830},[4838],{"type":64,"value":2983},{"type":58,"tag":310,"props":4840,"children":4841},{"style":836},[4842],{"type":64,"value":4843},"About",{"type":58,"tag":310,"props":4845,"children":4846},{"style":830},[4847],{"type":64,"value":1199},{"type":58,"tag":310,"props":4849,"children":4850},{"style":327},[4851],{"type":64,"value":4812},{"type":58,"tag":310,"props":4853,"children":4854},{"style":830},[4855],{"type":64,"value":3091},{"type":58,"tag":310,"props":4857,"children":4858},{"style":327},[4859],{"type":64,"value":4798},{"type":58,"tag":310,"props":4861,"children":4862},{"style":830},[4863],{"type":64,"value":948},{"type":58,"tag":310,"props":4865,"children":4866},{"class":312,"line":425},[4867],{"type":58,"tag":310,"props":4868,"children":4869},{"emptyLinePlaceholder":368},[4870],{"type":64,"value":371},{"type":58,"tag":310,"props":4872,"children":4873},{"class":312,"line":434},[4874,4878,4883,4887,4891,4896],{"type":58,"tag":310,"props":4875,"children":4876},{"style":824},[4877],{"type":64,"value":827},{"type":58,"tag":310,"props":4879,"children":4880},{"style":836},[4881],{"type":64,"value":4882}," NextImage ",{"type":58,"tag":310,"props":4884,"children":4885},{"style":824},[4886],{"type":64,"value":880},{"type":58,"tag":310,"props":4888,"children":4889},{"style":830},[4890],{"type":64,"value":854},{"type":58,"tag":310,"props":4892,"children":4893},{"style":333},[4894],{"type":64,"value":4895},"next\u002Fimage",{"type":58,"tag":310,"props":4897,"children":4898},{"style":830},[4899],{"type":64,"value":863},{"type":58,"tag":310,"props":4901,"children":4902},{"class":312,"line":1527},[4903,4907,4912,4916,4920,4925,4930,4934,4938,4943,4947,4952,4956,4960,4964,4968,4972,4976],{"type":58,"tag":310,"props":4904,"children":4905},{"style":830},[4906],{"type":64,"value":2033},{"type":58,"tag":310,"props":4908,"children":4909},{"style":327},[4910],{"type":64,"value":4911},"ChakraImage",{"type":58,"tag":310,"props":4913,"children":4914},{"style":1395},[4915],{"type":64,"value":4803},{"type":58,"tag":310,"props":4917,"children":4918},{"style":830},[4919],{"type":64,"value":3050},{"type":58,"tag":310,"props":4921,"children":4922},{"style":327},[4923],{"type":64,"value":4924},"NextImage",{"type":58,"tag":310,"props":4926,"children":4927},{"style":1395},[4928],{"type":64,"value":4929}," src",{"type":58,"tag":310,"props":4931,"children":4932},{"style":830},[4933],{"type":64,"value":1100},{"type":58,"tag":310,"props":4935,"children":4936},{"style":830},[4937],{"type":64,"value":1105},{"type":58,"tag":310,"props":4939,"children":4940},{"style":333},[4941],{"type":64,"value":4942},"...",{"type":58,"tag":310,"props":4944,"children":4945},{"style":830},[4946],{"type":64,"value":1105},{"type":58,"tag":310,"props":4948,"children":4949},{"style":1395},[4950],{"type":64,"value":4951}," alt",{"type":58,"tag":310,"props":4953,"children":4954},{"style":830},[4955],{"type":64,"value":1100},{"type":58,"tag":310,"props":4957,"children":4958},{"style":830},[4959],{"type":64,"value":1105},{"type":58,"tag":310,"props":4961,"children":4962},{"style":333},[4963],{"type":64,"value":4942},{"type":58,"tag":310,"props":4965,"children":4966},{"style":830},[4967],{"type":64,"value":1105},{"type":58,"tag":310,"props":4969,"children":4970},{"style":830},[4971],{"type":64,"value":3674},{"type":58,"tag":310,"props":4973,"children":4974},{"style":327},[4975],{"type":64,"value":4911},{"type":58,"tag":310,"props":4977,"children":4978},{"style":830},[4979],{"type":64,"value":948},{"type":58,"tag":88,"props":4981,"children":4982},{},[],{"type":58,"tag":92,"props":4984,"children":4986},{"id":4985},"step-8-theming-migration",[4987],{"type":64,"value":4988},"Step 8 — Theming migration",{"type":58,"tag":294,"props":4990,"children":4992},{"id":4991},"styleconfig-and-multistyleconfig-recipes",[4993],{"type":64,"value":4994},"styleConfig and multiStyleConfig → recipes",{"type":58,"tag":104,"props":4996,"children":4998},{"className":1265,"code":4997,"language":1267,"meta":113,"style":113},"\u002F\u002F v3 — single component (recipe)\nimport { defineRecipe } from \"@chakra-ui\u002Freact\"\n\n\u002F\u002F v2\nconst buttonStyle = {\n  baseStyle: { fontWeight: \"bold\" },\n  variants: { solid: { bg: \"blue.500\" } },\n  defaultProps: { variant: \"solid\" },\n}\n\nconst buttonRecipe = defineRecipe({\n  base: { fontWeight: \"bold\" },\n  variants: { variant: { solid: { bg: \"blue.500\" } } },\n  defaultVariants: { variant: \"solid\" },\n})\n",[4999],{"type":58,"tag":111,"props":5000,"children":5001},{"__ignoreMap":113},[5002,5010,5046,5053,5060,5081,5123,5180,5222,5230,5237,5265,5305,5376,5416],{"type":58,"tag":310,"props":5003,"children":5004},{"class":312,"line":313},[5005],{"type":58,"tag":310,"props":5006,"children":5007},{"style":317},[5008],{"type":64,"value":5009},"\u002F\u002F v3 — single component (recipe)\n",{"type":58,"tag":310,"props":5011,"children":5012},{"class":312,"line":323},[5013,5017,5021,5026,5030,5034,5038,5042],{"type":58,"tag":310,"props":5014,"children":5015},{"style":824},[5016],{"type":64,"value":827},{"type":58,"tag":310,"props":5018,"children":5019},{"style":830},[5020],{"type":64,"value":833},{"type":58,"tag":310,"props":5022,"children":5023},{"style":836},[5024],{"type":64,"value":5025}," defineRecipe",{"type":58,"tag":310,"props":5027,"children":5028},{"style":830},[5029],{"type":64,"value":844},{"type":58,"tag":310,"props":5031,"children":5032},{"style":824},[5033],{"type":64,"value":849},{"type":58,"tag":310,"props":5035,"children":5036},{"style":830},[5037],{"type":64,"value":854},{"type":58,"tag":310,"props":5039,"children":5040},{"style":333},[5041],{"type":64,"value":136},{"type":58,"tag":310,"props":5043,"children":5044},{"style":830},[5045],{"type":64,"value":863},{"type":58,"tag":310,"props":5047,"children":5048},{"class":312,"line":364},[5049],{"type":58,"tag":310,"props":5050,"children":5051},{"emptyLinePlaceholder":368},[5052],{"type":64,"value":371},{"type":58,"tag":310,"props":5054,"children":5055},{"class":312,"line":374},[5056],{"type":58,"tag":310,"props":5057,"children":5058},{"style":317},[5059],{"type":64,"value":818},{"type":58,"tag":310,"props":5061,"children":5062},{"class":312,"line":383},[5063,5067,5072,5076],{"type":58,"tag":310,"props":5064,"children":5065},{"style":1395},[5066],{"type":64,"value":1502},{"type":58,"tag":310,"props":5068,"children":5069},{"style":836},[5070],{"type":64,"value":5071}," buttonStyle ",{"type":58,"tag":310,"props":5073,"children":5074},{"style":830},[5075],{"type":64,"value":1100},{"type":58,"tag":310,"props":5077,"children":5078},{"style":830},[5079],{"type":64,"value":5080}," {\n",{"type":58,"tag":310,"props":5082,"children":5083},{"class":312,"line":417},[5084,5089,5093,5097,5102,5106,5110,5115,5119],{"type":58,"tag":310,"props":5085,"children":5086},{"style":1134},[5087],{"type":64,"value":5088},"  baseStyle",{"type":58,"tag":310,"props":5090,"children":5091},{"style":830},[5092],{"type":64,"value":1262},{"type":58,"tag":310,"props":5094,"children":5095},{"style":830},[5096],{"type":64,"value":833},{"type":58,"tag":310,"props":5098,"children":5099},{"style":1134},[5100],{"type":64,"value":5101}," fontWeight",{"type":58,"tag":310,"props":5103,"children":5104},{"style":830},[5105],{"type":64,"value":1262},{"type":58,"tag":310,"props":5107,"children":5108},{"style":830},[5109],{"type":64,"value":854},{"type":58,"tag":310,"props":5111,"children":5112},{"style":333},[5113],{"type":64,"value":5114},"bold",{"type":58,"tag":310,"props":5116,"children":5117},{"style":830},[5118],{"type":64,"value":1105},{"type":58,"tag":310,"props":5120,"children":5121},{"style":830},[5122],{"type":64,"value":1632},{"type":58,"tag":310,"props":5124,"children":5125},{"class":312,"line":425},[5126,5131,5135,5139,5144,5148,5152,5156,5160,5164,5168,5172,5176],{"type":58,"tag":310,"props":5127,"children":5128},{"style":1134},[5129],{"type":64,"value":5130},"  variants",{"type":58,"tag":310,"props":5132,"children":5133},{"style":830},[5134],{"type":64,"value":1262},{"type":58,"tag":310,"props":5136,"children":5137},{"style":830},[5138],{"type":64,"value":833},{"type":58,"tag":310,"props":5140,"children":5141},{"style":1134},[5142],{"type":64,"value":5143}," solid",{"type":58,"tag":310,"props":5145,"children":5146},{"style":830},[5147],{"type":64,"value":1262},{"type":58,"tag":310,"props":5149,"children":5150},{"style":830},[5151],{"type":64,"value":833},{"type":58,"tag":310,"props":5153,"children":5154},{"style":1134},[5155],{"type":64,"value":2065},{"type":58,"tag":310,"props":5157,"children":5158},{"style":830},[5159],{"type":64,"value":1262},{"type":58,"tag":310,"props":5161,"children":5162},{"style":830},[5163],{"type":64,"value":854},{"type":58,"tag":310,"props":5165,"children":5166},{"style":333},[5167],{"type":64,"value":2587},{"type":58,"tag":310,"props":5169,"children":5170},{"style":830},[5171],{"type":64,"value":1105},{"type":58,"tag":310,"props":5173,"children":5174},{"style":830},[5175],{"type":64,"value":844},{"type":58,"tag":310,"props":5177,"children":5178},{"style":830},[5179],{"type":64,"value":1632},{"type":58,"tag":310,"props":5181,"children":5182},{"class":312,"line":434},[5183,5188,5192,5196,5201,5205,5209,5214,5218],{"type":58,"tag":310,"props":5184,"children":5185},{"style":1134},[5186],{"type":64,"value":5187},"  defaultProps",{"type":58,"tag":310,"props":5189,"children":5190},{"style":830},[5191],{"type":64,"value":1262},{"type":58,"tag":310,"props":5193,"children":5194},{"style":830},[5195],{"type":64,"value":833},{"type":58,"tag":310,"props":5197,"children":5198},{"style":1134},[5199],{"type":64,"value":5200}," variant",{"type":58,"tag":310,"props":5202,"children":5203},{"style":830},[5204],{"type":64,"value":1262},{"type":58,"tag":310,"props":5206,"children":5207},{"style":830},[5208],{"type":64,"value":854},{"type":58,"tag":310,"props":5210,"children":5211},{"style":333},[5212],{"type":64,"value":5213},"solid",{"type":58,"tag":310,"props":5215,"children":5216},{"style":830},[5217],{"type":64,"value":1105},{"type":58,"tag":310,"props":5219,"children":5220},{"style":830},[5221],{"type":64,"value":1632},{"type":58,"tag":310,"props":5223,"children":5224},{"class":312,"line":1527},[5225],{"type":58,"tag":310,"props":5226,"children":5227},{"style":830},[5228],{"type":64,"value":5229},"}\n",{"type":58,"tag":310,"props":5231,"children":5232},{"class":312,"line":1635},[5233],{"type":58,"tag":310,"props":5234,"children":5235},{"emptyLinePlaceholder":368},[5236],{"type":64,"value":371},{"type":58,"tag":310,"props":5238,"children":5239},{"class":312,"line":1648},[5240,5244,5249,5253,5257,5261],{"type":58,"tag":310,"props":5241,"children":5242},{"style":1395},[5243],{"type":64,"value":1502},{"type":58,"tag":310,"props":5245,"children":5246},{"style":836},[5247],{"type":64,"value":5248}," buttonRecipe ",{"type":58,"tag":310,"props":5250,"children":5251},{"style":830},[5252],{"type":64,"value":1100},{"type":58,"tag":310,"props":5254,"children":5255},{"style":1409},[5256],{"type":64,"value":5025},{"type":58,"tag":310,"props":5258,"children":5259},{"style":836},[5260],{"type":64,"value":1416},{"type":58,"tag":310,"props":5262,"children":5263},{"style":830},[5264],{"type":64,"value":1524},{"type":58,"tag":310,"props":5266,"children":5267},{"class":312,"line":1943},[5268,5273,5277,5281,5285,5289,5293,5297,5301],{"type":58,"tag":310,"props":5269,"children":5270},{"style":1134},[5271],{"type":64,"value":5272},"  base",{"type":58,"tag":310,"props":5274,"children":5275},{"style":830},[5276],{"type":64,"value":1262},{"type":58,"tag":310,"props":5278,"children":5279},{"style":830},[5280],{"type":64,"value":833},{"type":58,"tag":310,"props":5282,"children":5283},{"style":1134},[5284],{"type":64,"value":5101},{"type":58,"tag":310,"props":5286,"children":5287},{"style":830},[5288],{"type":64,"value":1262},{"type":58,"tag":310,"props":5290,"children":5291},{"style":830},[5292],{"type":64,"value":854},{"type":58,"tag":310,"props":5294,"children":5295},{"style":333},[5296],{"type":64,"value":5114},{"type":58,"tag":310,"props":5298,"children":5299},{"style":830},[5300],{"type":64,"value":1105},{"type":58,"tag":310,"props":5302,"children":5303},{"style":830},[5304],{"type":64,"value":1632},{"type":58,"tag":310,"props":5306,"children":5307},{"class":312,"line":1952},[5308,5312,5316,5320,5324,5328,5332,5336,5340,5344,5348,5352,5356,5360,5364,5368,5372],{"type":58,"tag":310,"props":5309,"children":5310},{"style":1134},[5311],{"type":64,"value":5130},{"type":58,"tag":310,"props":5313,"children":5314},{"style":830},[5315],{"type":64,"value":1262},{"type":58,"tag":310,"props":5317,"children":5318},{"style":830},[5319],{"type":64,"value":833},{"type":58,"tag":310,"props":5321,"children":5322},{"style":1134},[5323],{"type":64,"value":5200},{"type":58,"tag":310,"props":5325,"children":5326},{"style":830},[5327],{"type":64,"value":1262},{"type":58,"tag":310,"props":5329,"children":5330},{"style":830},[5331],{"type":64,"value":833},{"type":58,"tag":310,"props":5333,"children":5334},{"style":1134},[5335],{"type":64,"value":5143},{"type":58,"tag":310,"props":5337,"children":5338},{"style":830},[5339],{"type":64,"value":1262},{"type":58,"tag":310,"props":5341,"children":5342},{"style":830},[5343],{"type":64,"value":833},{"type":58,"tag":310,"props":5345,"children":5346},{"style":1134},[5347],{"type":64,"value":2065},{"type":58,"tag":310,"props":5349,"children":5350},{"style":830},[5351],{"type":64,"value":1262},{"type":58,"tag":310,"props":5353,"children":5354},{"style":830},[5355],{"type":64,"value":854},{"type":58,"tag":310,"props":5357,"children":5358},{"style":333},[5359],{"type":64,"value":2587},{"type":58,"tag":310,"props":5361,"children":5362},{"style":830},[5363],{"type":64,"value":1105},{"type":58,"tag":310,"props":5365,"children":5366},{"style":830},[5367],{"type":64,"value":844},{"type":58,"tag":310,"props":5369,"children":5370},{"style":830},[5371],{"type":64,"value":844},{"type":58,"tag":310,"props":5373,"children":5374},{"style":830},[5375],{"type":64,"value":1632},{"type":58,"tag":310,"props":5377,"children":5378},{"class":312,"line":3230},[5379,5384,5388,5392,5396,5400,5404,5408,5412],{"type":58,"tag":310,"props":5380,"children":5381},{"style":1134},[5382],{"type":64,"value":5383},"  defaultVariants",{"type":58,"tag":310,"props":5385,"children":5386},{"style":830},[5387],{"type":64,"value":1262},{"type":58,"tag":310,"props":5389,"children":5390},{"style":830},[5391],{"type":64,"value":833},{"type":58,"tag":310,"props":5393,"children":5394},{"style":1134},[5395],{"type":64,"value":5200},{"type":58,"tag":310,"props":5397,"children":5398},{"style":830},[5399],{"type":64,"value":1262},{"type":58,"tag":310,"props":5401,"children":5402},{"style":830},[5403],{"type":64,"value":854},{"type":58,"tag":310,"props":5405,"children":5406},{"style":333},[5407],{"type":64,"value":5213},{"type":58,"tag":310,"props":5409,"children":5410},{"style":830},[5411],{"type":64,"value":1105},{"type":58,"tag":310,"props":5413,"children":5414},{"style":830},[5415],{"type":64,"value":1632},{"type":58,"tag":310,"props":5417,"children":5418},{"class":312,"line":3247},[5419,5423],{"type":58,"tag":310,"props":5420,"children":5421},{"style":830},[5422],{"type":64,"value":1641},{"type":58,"tag":310,"props":5424,"children":5425},{"style":836},[5426],{"type":64,"value":1487},{"type":58,"tag":104,"props":5428,"children":5430},{"className":1265,"code":5429,"language":1267,"meta":113,"style":113},"\u002F\u002F v3 — slot recipe\nimport { defineSlotRecipe } from \"@chakra-ui\u002Freact\"\n\n\u002F\u002F v2 — multiStyleConfig (multi-part component)\nconst cardStyle = multiStyleConfig({\n  parts: [\"root\", \"header\"],\n  baseStyle: { root: { bg: \"white\" }, header: { fontWeight: \"bold\" } },\n})\n\nconst cardSlotRecipe = defineSlotRecipe({\n  slots: [\"root\", \"header\"],\n  base: { root: { bg: \"white\" }, header: { fontWeight: \"bold\" } },\n})\n",[5431],{"type":58,"tag":111,"props":5432,"children":5433},{"__ignoreMap":113},[5434,5442,5478,5485,5493,5522,5577,5672,5683,5690,5718,5770,5861],{"type":58,"tag":310,"props":5435,"children":5436},{"class":312,"line":313},[5437],{"type":58,"tag":310,"props":5438,"children":5439},{"style":317},[5440],{"type":64,"value":5441},"\u002F\u002F v3 — slot recipe\n",{"type":58,"tag":310,"props":5443,"children":5444},{"class":312,"line":323},[5445,5449,5453,5458,5462,5466,5470,5474],{"type":58,"tag":310,"props":5446,"children":5447},{"style":824},[5448],{"type":64,"value":827},{"type":58,"tag":310,"props":5450,"children":5451},{"style":830},[5452],{"type":64,"value":833},{"type":58,"tag":310,"props":5454,"children":5455},{"style":836},[5456],{"type":64,"value":5457}," defineSlotRecipe",{"type":58,"tag":310,"props":5459,"children":5460},{"style":830},[5461],{"type":64,"value":844},{"type":58,"tag":310,"props":5463,"children":5464},{"style":824},[5465],{"type":64,"value":849},{"type":58,"tag":310,"props":5467,"children":5468},{"style":830},[5469],{"type":64,"value":854},{"type":58,"tag":310,"props":5471,"children":5472},{"style":333},[5473],{"type":64,"value":136},{"type":58,"tag":310,"props":5475,"children":5476},{"style":830},[5477],{"type":64,"value":863},{"type":58,"tag":310,"props":5479,"children":5480},{"class":312,"line":364},[5481],{"type":58,"tag":310,"props":5482,"children":5483},{"emptyLinePlaceholder":368},[5484],{"type":64,"value":371},{"type":58,"tag":310,"props":5486,"children":5487},{"class":312,"line":374},[5488],{"type":58,"tag":310,"props":5489,"children":5490},{"style":317},[5491],{"type":64,"value":5492},"\u002F\u002F v2 — multiStyleConfig (multi-part component)\n",{"type":58,"tag":310,"props":5494,"children":5495},{"class":312,"line":383},[5496,5500,5505,5509,5514,5518],{"type":58,"tag":310,"props":5497,"children":5498},{"style":1395},[5499],{"type":64,"value":1502},{"type":58,"tag":310,"props":5501,"children":5502},{"style":836},[5503],{"type":64,"value":5504}," cardStyle ",{"type":58,"tag":310,"props":5506,"children":5507},{"style":830},[5508],{"type":64,"value":1100},{"type":58,"tag":310,"props":5510,"children":5511},{"style":1409},[5512],{"type":64,"value":5513}," multiStyleConfig",{"type":58,"tag":310,"props":5515,"children":5516},{"style":836},[5517],{"type":64,"value":1416},{"type":58,"tag":310,"props":5519,"children":5520},{"style":830},[5521],{"type":64,"value":1524},{"type":58,"tag":310,"props":5523,"children":5524},{"class":312,"line":417},[5525,5530,5534,5539,5543,5547,5551,5555,5559,5564,5568,5573],{"type":58,"tag":310,"props":5526,"children":5527},{"style":1134},[5528],{"type":64,"value":5529},"  parts",{"type":58,"tag":310,"props":5531,"children":5532},{"style":830},[5533],{"type":64,"value":1262},{"type":58,"tag":310,"props":5535,"children":5536},{"style":836},[5537],{"type":64,"value":5538}," [",{"type":58,"tag":310,"props":5540,"children":5541},{"style":830},[5542],{"type":64,"value":1105},{"type":58,"tag":310,"props":5544,"children":5545},{"style":333},[5546],{"type":64,"value":55},{"type":58,"tag":310,"props":5548,"children":5549},{"style":830},[5550],{"type":64,"value":1105},{"type":58,"tag":310,"props":5552,"children":5553},{"style":830},[5554],{"type":64,"value":1343},{"type":58,"tag":310,"props":5556,"children":5557},{"style":830},[5558],{"type":64,"value":854},{"type":58,"tag":310,"props":5560,"children":5561},{"style":333},[5562],{"type":64,"value":5563},"header",{"type":58,"tag":310,"props":5565,"children":5566},{"style":830},[5567],{"type":64,"value":1105},{"type":58,"tag":310,"props":5569,"children":5570},{"style":836},[5571],{"type":64,"value":5572},"]",{"type":58,"tag":310,"props":5574,"children":5575},{"style":830},[5576],{"type":64,"value":159},{"type":58,"tag":310,"props":5578,"children":5579},{"class":312,"line":425},[5580,5584,5588,5592,5597,5601,5605,5609,5613,5617,5622,5626,5631,5636,5640,5644,5648,5652,5656,5660,5664,5668],{"type":58,"tag":310,"props":5581,"children":5582},{"style":1134},[5583],{"type":64,"value":5088},{"type":58,"tag":310,"props":5585,"children":5586},{"style":830},[5587],{"type":64,"value":1262},{"type":58,"tag":310,"props":5589,"children":5590},{"style":830},[5591],{"type":64,"value":833},{"type":58,"tag":310,"props":5593,"children":5594},{"style":1134},[5595],{"type":64,"value":5596}," root",{"type":58,"tag":310,"props":5598,"children":5599},{"style":830},[5600],{"type":64,"value":1262},{"type":58,"tag":310,"props":5602,"children":5603},{"style":830},[5604],{"type":64,"value":833},{"type":58,"tag":310,"props":5606,"children":5607},{"style":1134},[5608],{"type":64,"value":2065},{"type":58,"tag":310,"props":5610,"children":5611},{"style":830},[5612],{"type":64,"value":1262},{"type":58,"tag":310,"props":5614,"children":5615},{"style":830},[5616],{"type":64,"value":854},{"type":58,"tag":310,"props":5618,"children":5619},{"style":333},[5620],{"type":64,"value":5621},"white",{"type":58,"tag":310,"props":5623,"children":5624},{"style":830},[5625],{"type":64,"value":1105},{"type":58,"tag":310,"props":5627,"children":5628},{"style":830},[5629],{"type":64,"value":5630}," },",{"type":58,"tag":310,"props":5632,"children":5633},{"style":1134},[5634],{"type":64,"value":5635}," header",{"type":58,"tag":310,"props":5637,"children":5638},{"style":830},[5639],{"type":64,"value":1262},{"type":58,"tag":310,"props":5641,"children":5642},{"style":830},[5643],{"type":64,"value":833},{"type":58,"tag":310,"props":5645,"children":5646},{"style":1134},[5647],{"type":64,"value":5101},{"type":58,"tag":310,"props":5649,"children":5650},{"style":830},[5651],{"type":64,"value":1262},{"type":58,"tag":310,"props":5653,"children":5654},{"style":830},[5655],{"type":64,"value":854},{"type":58,"tag":310,"props":5657,"children":5658},{"style":333},[5659],{"type":64,"value":5114},{"type":58,"tag":310,"props":5661,"children":5662},{"style":830},[5663],{"type":64,"value":1105},{"type":58,"tag":310,"props":5665,"children":5666},{"style":830},[5667],{"type":64,"value":844},{"type":58,"tag":310,"props":5669,"children":5670},{"style":830},[5671],{"type":64,"value":1632},{"type":58,"tag":310,"props":5673,"children":5674},{"class":312,"line":434},[5675,5679],{"type":58,"tag":310,"props":5676,"children":5677},{"style":830},[5678],{"type":64,"value":1641},{"type":58,"tag":310,"props":5680,"children":5681},{"style":836},[5682],{"type":64,"value":1487},{"type":58,"tag":310,"props":5684,"children":5685},{"class":312,"line":1527},[5686],{"type":58,"tag":310,"props":5687,"children":5688},{"emptyLinePlaceholder":368},[5689],{"type":64,"value":371},{"type":58,"tag":310,"props":5691,"children":5692},{"class":312,"line":1635},[5693,5697,5702,5706,5710,5714],{"type":58,"tag":310,"props":5694,"children":5695},{"style":1395},[5696],{"type":64,"value":1502},{"type":58,"tag":310,"props":5698,"children":5699},{"style":836},[5700],{"type":64,"value":5701}," cardSlotRecipe ",{"type":58,"tag":310,"props":5703,"children":5704},{"style":830},[5705],{"type":64,"value":1100},{"type":58,"tag":310,"props":5707,"children":5708},{"style":1409},[5709],{"type":64,"value":5457},{"type":58,"tag":310,"props":5711,"children":5712},{"style":836},[5713],{"type":64,"value":1416},{"type":58,"tag":310,"props":5715,"children":5716},{"style":830},[5717],{"type":64,"value":1524},{"type":58,"tag":310,"props":5719,"children":5720},{"class":312,"line":1648},[5721,5726,5730,5734,5738,5742,5746,5750,5754,5758,5762,5766],{"type":58,"tag":310,"props":5722,"children":5723},{"style":1134},[5724],{"type":64,"value":5725},"  slots",{"type":58,"tag":310,"props":5727,"children":5728},{"style":830},[5729],{"type":64,"value":1262},{"type":58,"tag":310,"props":5731,"children":5732},{"style":836},[5733],{"type":64,"value":5538},{"type":58,"tag":310,"props":5735,"children":5736},{"style":830},[5737],{"type":64,"value":1105},{"type":58,"tag":310,"props":5739,"children":5740},{"style":333},[5741],{"type":64,"value":55},{"type":58,"tag":310,"props":5743,"children":5744},{"style":830},[5745],{"type":64,"value":1105},{"type":58,"tag":310,"props":5747,"children":5748},{"style":830},[5749],{"type":64,"value":1343},{"type":58,"tag":310,"props":5751,"children":5752},{"style":830},[5753],{"type":64,"value":854},{"type":58,"tag":310,"props":5755,"children":5756},{"style":333},[5757],{"type":64,"value":5563},{"type":58,"tag":310,"props":5759,"children":5760},{"style":830},[5761],{"type":64,"value":1105},{"type":58,"tag":310,"props":5763,"children":5764},{"style":836},[5765],{"type":64,"value":5572},{"type":58,"tag":310,"props":5767,"children":5768},{"style":830},[5769],{"type":64,"value":159},{"type":58,"tag":310,"props":5771,"children":5772},{"class":312,"line":1943},[5773,5777,5781,5785,5789,5793,5797,5801,5805,5809,5813,5817,5821,5825,5829,5833,5837,5841,5845,5849,5853,5857],{"type":58,"tag":310,"props":5774,"children":5775},{"style":1134},[5776],{"type":64,"value":5272},{"type":58,"tag":310,"props":5778,"children":5779},{"style":830},[5780],{"type":64,"value":1262},{"type":58,"tag":310,"props":5782,"children":5783},{"style":830},[5784],{"type":64,"value":833},{"type":58,"tag":310,"props":5786,"children":5787},{"style":1134},[5788],{"type":64,"value":5596},{"type":58,"tag":310,"props":5790,"children":5791},{"style":830},[5792],{"type":64,"value":1262},{"type":58,"tag":310,"props":5794,"children":5795},{"style":830},[5796],{"type":64,"value":833},{"type":58,"tag":310,"props":5798,"children":5799},{"style":1134},[5800],{"type":64,"value":2065},{"type":58,"tag":310,"props":5802,"children":5803},{"style":830},[5804],{"type":64,"value":1262},{"type":58,"tag":310,"props":5806,"children":5807},{"style":830},[5808],{"type":64,"value":854},{"type":58,"tag":310,"props":5810,"children":5811},{"style":333},[5812],{"type":64,"value":5621},{"type":58,"tag":310,"props":5814,"children":5815},{"style":830},[5816],{"type":64,"value":1105},{"type":58,"tag":310,"props":5818,"children":5819},{"style":830},[5820],{"type":64,"value":5630},{"type":58,"tag":310,"props":5822,"children":5823},{"style":1134},[5824],{"type":64,"value":5635},{"type":58,"tag":310,"props":5826,"children":5827},{"style":830},[5828],{"type":64,"value":1262},{"type":58,"tag":310,"props":5830,"children":5831},{"style":830},[5832],{"type":64,"value":833},{"type":58,"tag":310,"props":5834,"children":5835},{"style":1134},[5836],{"type":64,"value":5101},{"type":58,"tag":310,"props":5838,"children":5839},{"style":830},[5840],{"type":64,"value":1262},{"type":58,"tag":310,"props":5842,"children":5843},{"style":830},[5844],{"type":64,"value":854},{"type":58,"tag":310,"props":5846,"children":5847},{"style":333},[5848],{"type":64,"value":5114},{"type":58,"tag":310,"props":5850,"children":5851},{"style":830},[5852],{"type":64,"value":1105},{"type":58,"tag":310,"props":5854,"children":5855},{"style":830},[5856],{"type":64,"value":844},{"type":58,"tag":310,"props":5858,"children":5859},{"style":830},[5860],{"type":64,"value":1632},{"type":58,"tag":310,"props":5862,"children":5863},{"class":312,"line":1952},[5864,5868],{"type":58,"tag":310,"props":5865,"children":5866},{"style":830},[5867],{"type":64,"value":1641},{"type":58,"tag":310,"props":5869,"children":5870},{"style":836},[5871],{"type":64,"value":1487},{"type":58,"tag":294,"props":5873,"children":5875},{"id":5874},"typegen-for-custom-tokens",[5876],{"type":64,"value":5877},"Typegen for custom tokens",{"type":58,"tag":67,"props":5879,"children":5880},{},[5881],{"type":64,"value":5882},"After adding custom tokens, semantic tokens, recipes, or slot recipes, run\ntypegen to keep TypeScript types in sync:",{"type":58,"tag":104,"props":5884,"children":5886},{"className":302,"code":5885,"language":304,"meta":113,"style":113},"npx @chakra-ui\u002Fcli typegen .\u002Ftheme.ts\n",[5887],{"type":58,"tag":111,"props":5888,"children":5889},{"__ignoreMap":113},[5890],{"type":58,"tag":310,"props":5891,"children":5892},{"class":312,"line":313},[5893,5897,5901,5906],{"type":58,"tag":310,"props":5894,"children":5895},{"style":327},[5896],{"type":64,"value":738},{"type":58,"tag":310,"props":5898,"children":5899},{"style":333},[5900],{"type":64,"value":978},{"type":58,"tag":310,"props":5902,"children":5903},{"style":333},[5904],{"type":64,"value":5905}," typegen",{"type":58,"tag":310,"props":5907,"children":5908},{"style":333},[5909],{"type":64,"value":5910}," .\u002Ftheme.ts\n",{"type":58,"tag":73,"props":5912,"children":5913},{},[5914],{"type":58,"tag":67,"props":5915,"children":5916},{},[5917,5922,5924,5930],{"type":58,"tag":80,"props":5918,"children":5919},{},[5920],{"type":64,"value":5921},"Complex theme migrations",{"type":64,"value":5923}," — if you're moving a large v2 theme with many\ncustom tokens, semantic tokens, or multi-part component styles, use the\n",{"type":58,"tag":111,"props":5925,"children":5927},{"className":5926},[],[5928],{"type":64,"value":5929},"chakra-ui-theming",{"type":64,"value":5931}," skill. It covers the full token\u002Frecipe\u002Fslot-recipe API in\ndepth and is a better guide than this section alone.",{"type":58,"tag":88,"props":5933,"children":5934},{},[],{"type":58,"tag":92,"props":5936,"children":5938},{"id":5937},"step-9-nextjs-specifics",[5939],{"type":64,"value":5940},"Step 9 — Next.js specifics",{"type":58,"tag":294,"props":5942,"children":5944},{"id":5943},"app-router",[5945],{"type":64,"value":5946},"App Router",{"type":58,"tag":122,"props":5948,"children":5949},{},[5950,5977,5994,6014],{"type":58,"tag":126,"props":5951,"children":5952},{},[5953,5955,5961,5963,5969,5971,5976],{"type":64,"value":5954},"Place ",{"type":58,"tag":111,"props":5956,"children":5958},{"className":5957},[],[5959],{"type":64,"value":5960},"\u003CProvider>",{"type":64,"value":5962}," in ",{"type":58,"tag":111,"props":5964,"children":5966},{"className":5965},[],[5967],{"type":64,"value":5968},"app\u002Flayout.tsx",{"type":64,"value":5970}," (Server Component — no ",{"type":58,"tag":111,"props":5972,"children":5974},{"className":5973},[],[5975],{"type":64,"value":1226},{"type":64,"value":218},{"type":58,"tag":126,"props":5978,"children":5979},{},[5980,5982,5987,5989],{"type":64,"value":5981},"The generated ",{"type":58,"tag":111,"props":5983,"children":5985},{"className":5984},[],[5986],{"type":64,"value":999},{"type":64,"value":5988}," already has ",{"type":58,"tag":111,"props":5990,"children":5992},{"className":5991},[],[5993],{"type":64,"value":1226},{"type":58,"tag":126,"props":5995,"children":5996},{},[5997,5999,6005,6006,6012],{"type":64,"value":5998},"Add ",{"type":58,"tag":111,"props":6000,"children":6002},{"className":6001},[],[6003],{"type":64,"value":6004},"suppressHydrationWarning",{"type":64,"value":1697},{"type":58,"tag":111,"props":6007,"children":6009},{"className":6008},[],[6010],{"type":64,"value":6011},"\u003Chtml>",{"type":64,"value":6013}," to prevent color mode flicker",{"type":58,"tag":126,"props":6015,"children":6016},{},[6017,6019],{"type":64,"value":6018},"Do not wrap the entire app or layout in ",{"type":58,"tag":111,"props":6020,"children":6022},{"className":6021},[],[6023],{"type":64,"value":1226},{"type":58,"tag":294,"props":6025,"children":6027},{"id":6026},"pages-router",[6028],{"type":64,"value":6029},"Pages Router",{"type":58,"tag":104,"props":6031,"children":6033},{"className":804,"code":6032,"language":806,"meta":113,"style":113},"\u002F\u002F pages\u002F_app.js\nimport { Provider } from \"@\u002Fcomponents\u002Fui\u002Fprovider\"\n\nexport default function App({ Component, pageProps }) {\n  return (\n    \u003CProvider>\n      \u003CComponent {...pageProps} \u002F>\n    \u003C\u002FProvider>\n  )\n}\n",[6034],{"type":58,"tag":111,"props":6035,"children":6036},{"__ignoreMap":113},[6037,6045,6080,6087,6136,6149,6164,6191,6206,6214],{"type":58,"tag":310,"props":6038,"children":6039},{"class":312,"line":313},[6040],{"type":58,"tag":310,"props":6041,"children":6042},{"style":317},[6043],{"type":64,"value":6044},"\u002F\u002F pages\u002F_app.js\n",{"type":58,"tag":310,"props":6046,"children":6047},{"class":312,"line":323},[6048,6052,6056,6060,6064,6068,6072,6076],{"type":58,"tag":310,"props":6049,"children":6050},{"style":824},[6051],{"type":64,"value":827},{"type":58,"tag":310,"props":6053,"children":6054},{"style":830},[6055],{"type":64,"value":833},{"type":58,"tag":310,"props":6057,"children":6058},{"style":836},[6059],{"type":64,"value":1055},{"type":58,"tag":310,"props":6061,"children":6062},{"style":830},[6063],{"type":64,"value":844},{"type":58,"tag":310,"props":6065,"children":6066},{"style":824},[6067],{"type":64,"value":849},{"type":58,"tag":310,"props":6069,"children":6070},{"style":830},[6071],{"type":64,"value":854},{"type":58,"tag":310,"props":6073,"children":6074},{"style":333},[6075],{"type":64,"value":1072},{"type":58,"tag":310,"props":6077,"children":6078},{"style":830},[6079],{"type":64,"value":863},{"type":58,"tag":310,"props":6081,"children":6082},{"class":312,"line":364},[6083],{"type":58,"tag":310,"props":6084,"children":6085},{"emptyLinePlaceholder":368},[6086],{"type":64,"value":371},{"type":58,"tag":310,"props":6088,"children":6089},{"class":312,"line":374},[6090,6094,6099,6104,6109,6114,6119,6123,6128,6132],{"type":58,"tag":310,"props":6091,"children":6092},{"style":824},[6093],{"type":64,"value":1392},{"type":58,"tag":310,"props":6095,"children":6096},{"style":824},[6097],{"type":64,"value":6098}," default",{"type":58,"tag":310,"props":6100,"children":6101},{"style":1395},[6102],{"type":64,"value":6103}," function",{"type":58,"tag":310,"props":6105,"children":6106},{"style":1409},[6107],{"type":64,"value":6108}," App",{"type":58,"tag":310,"props":6110,"children":6111},{"style":830},[6112],{"type":64,"value":6113},"({",{"type":58,"tag":310,"props":6115,"children":6116},{"style":3185},[6117],{"type":64,"value":6118}," Component",{"type":58,"tag":310,"props":6120,"children":6121},{"style":830},[6122],{"type":64,"value":1343},{"type":58,"tag":310,"props":6124,"children":6125},{"style":3185},[6126],{"type":64,"value":6127}," pageProps",{"type":58,"tag":310,"props":6129,"children":6130},{"style":830},[6131],{"type":64,"value":3192},{"type":58,"tag":310,"props":6133,"children":6134},{"style":830},[6135],{"type":64,"value":5080},{"type":58,"tag":310,"props":6137,"children":6138},{"class":312,"line":383},[6139,6144],{"type":58,"tag":310,"props":6140,"children":6141},{"style":824},[6142],{"type":64,"value":6143},"  return",{"type":58,"tag":310,"props":6145,"children":6146},{"style":1134},[6147],{"type":64,"value":6148}," (\n",{"type":58,"tag":310,"props":6150,"children":6151},{"class":312,"line":417},[6152,6156,6160],{"type":58,"tag":310,"props":6153,"children":6154},{"style":830},[6155],{"type":64,"value":1149},{"type":58,"tag":310,"props":6157,"children":6158},{"style":327},[6159],{"type":64,"value":1154},{"type":58,"tag":310,"props":6161,"children":6162},{"style":830},[6163],{"type":64,"value":948},{"type":58,"tag":310,"props":6165,"children":6166},{"class":312,"line":425},[6167,6171,6176,6181,6186],{"type":58,"tag":310,"props":6168,"children":6169},{"style":830},[6170],{"type":64,"value":3270},{"type":58,"tag":310,"props":6172,"children":6173},{"style":327},[6174],{"type":64,"value":6175},"Component",{"type":58,"tag":310,"props":6177,"children":6178},{"style":830},[6179],{"type":64,"value":6180}," {...",{"type":58,"tag":310,"props":6182,"children":6183},{"style":836},[6184],{"type":64,"value":6185},"pageProps",{"type":58,"tag":310,"props":6187,"children":6188},{"style":830},[6189],{"type":64,"value":6190},"} \u002F>\n",{"type":58,"tag":310,"props":6192,"children":6193},{"class":312,"line":434},[6194,6198,6202],{"type":58,"tag":310,"props":6195,"children":6196},{"style":830},[6197],{"type":64,"value":3451},{"type":58,"tag":310,"props":6199,"children":6200},{"style":327},[6201],{"type":64,"value":1154},{"type":58,"tag":310,"props":6203,"children":6204},{"style":830},[6205],{"type":64,"value":948},{"type":58,"tag":310,"props":6207,"children":6208},{"class":312,"line":1527},[6209],{"type":58,"tag":310,"props":6210,"children":6211},{"style":1134},[6212],{"type":64,"value":6213},"  )\n",{"type":58,"tag":310,"props":6215,"children":6216},{"class":312,"line":1635},[6217],{"type":58,"tag":310,"props":6218,"children":6219},{"style":830},[6220],{"type":64,"value":5229},{"type":58,"tag":67,"props":6222,"children":6223},{},[6224,6226,6231,6232,6238],{"type":64,"value":6225},"Remove any ",{"type":58,"tag":111,"props":6227,"children":6229},{"className":6228},[],[6230],{"type":64,"value":263},{"type":64,"value":2129},{"type":58,"tag":111,"props":6233,"children":6235},{"className":6234},[],[6236],{"type":64,"value":6237},"pages\u002F_document.tsx",{"type":64,"value":6239}," — it is not used in v3.",{"type":58,"tag":88,"props":6241,"children":6242},{},[],{"type":58,"tag":92,"props":6244,"children":6246},{"id":6245},"step-10-validation-checklist",[6247],{"type":64,"value":6248},"Step 10 — Validation checklist",{"type":58,"tag":67,"props":6250,"children":6251},{},[6252],{"type":64,"value":6253},"Work through this after the migration is complete:",{"type":58,"tag":122,"props":6255,"children":6258},{"className":6256},[6257],"contains-task-list",[6259,6285,6302,6317,6332,6341,6350,6359,6368],{"type":58,"tag":126,"props":6260,"children":6263},{"className":6261},[6262],"task-list-item",[6264,6269,6271,6277,6279],{"type":58,"tag":6265,"props":6266,"children":6268},"input",{"disabled":368,"type":6267},"checkbox",[],{"type":64,"value":6270}," Reinstall dependencies: ",{"type":58,"tag":111,"props":6272,"children":6274},{"className":6273},[],[6275],{"type":64,"value":6276},"npm install",{"type":64,"value":6278}," \u002F ",{"type":58,"tag":111,"props":6280,"children":6282},{"className":6281},[],[6283],{"type":64,"value":6284},"pnpm install",{"type":58,"tag":126,"props":6286,"children":6288},{"className":6287},[6262],[6289,6292,6294,6300],{"type":58,"tag":6265,"props":6290,"children":6291},{"disabled":368,"type":6267},[],{"type":64,"value":6293}," TypeScript: ",{"type":58,"tag":111,"props":6295,"children":6297},{"className":6296},[],[6298],{"type":64,"value":6299},"npx tsc --noEmit",{"type":64,"value":6301}," — resolve all type errors",{"type":58,"tag":126,"props":6303,"children":6305},{"className":6304},[6262],[6306,6309,6311],{"type":58,"tag":6265,"props":6307,"children":6308},{"disabled":368,"type":6267},[],{"type":64,"value":6310}," Lint: ",{"type":58,"tag":111,"props":6312,"children":6314},{"className":6313},[],[6315],{"type":64,"value":6316},"npm run lint",{"type":58,"tag":126,"props":6318,"children":6320},{"className":6319},[6262],[6321,6324,6326],{"type":58,"tag":6265,"props":6322,"children":6323},{"disabled":368,"type":6267},[],{"type":64,"value":6325}," Build: ",{"type":58,"tag":111,"props":6327,"children":6329},{"className":6328},[],[6330],{"type":64,"value":6331},"npm run build",{"type":58,"tag":126,"props":6333,"children":6335},{"className":6334},[6262],[6336,6339],{"type":58,"tag":6265,"props":6337,"children":6338},{"disabled":368,"type":6267},[],{"type":64,"value":6340}," Visually verify color mode toggle (light ↔ dark)",{"type":58,"tag":126,"props":6342,"children":6344},{"className":6343},[6262],[6345,6348],{"type":58,"tag":6265,"props":6346,"children":6347},{"disabled":368,"type":6267},[],{"type":64,"value":6349}," Test interactive components: Dialog, Drawer, Menu, Tabs, Accordion",{"type":58,"tag":126,"props":6351,"children":6353},{"className":6352},[6262],[6354,6357],{"type":58,"tag":6265,"props":6355,"children":6356},{"disabled":368,"type":6267},[],{"type":64,"value":6358}," Test form components: Checkbox, Select\u002FNativeSelect, Input, Radio",{"type":58,"tag":126,"props":6360,"children":6362},{"className":6361},[6262],[6363,6366],{"type":58,"tag":6265,"props":6364,"children":6365},{"disabled":368,"type":6267},[],{"type":64,"value":6367}," Check for visual regressions across key pages",{"type":58,"tag":126,"props":6369,"children":6371},{"className":6370},[6262],[6372,6375,6377],{"type":58,"tag":6265,"props":6373,"children":6374},{"disabled":368,"type":6267},[],{"type":64,"value":6376}," Search codebase for leftover v2 imports:\n",{"type":58,"tag":104,"props":6378,"children":6380},{"className":302,"code":6379,"language":304,"meta":113,"style":113},"grep -r \"ColorModeScript\\|useColorModeValue\\|extendTheme\\|styleConfig\\|@chakra-ui\u002Ficons\\|@chakra-ui\u002Fnext-js\" src\u002F\n",[6381],{"type":58,"tag":111,"props":6382,"children":6383},{"__ignoreMap":113},[6384],{"type":58,"tag":310,"props":6385,"children":6386},{"class":312,"line":313},[6387,6392,6397,6401,6406,6410],{"type":58,"tag":310,"props":6388,"children":6389},{"style":327},[6390],{"type":64,"value":6391},"grep",{"type":58,"tag":310,"props":6393,"children":6394},{"style":333},[6395],{"type":64,"value":6396}," -r",{"type":58,"tag":310,"props":6398,"children":6399},{"style":830},[6400],{"type":64,"value":854},{"type":58,"tag":310,"props":6402,"children":6403},{"style":333},[6404],{"type":64,"value":6405},"ColorModeScript\\|useColorModeValue\\|extendTheme\\|styleConfig\\|@chakra-ui\u002Ficons\\|@chakra-ui\u002Fnext-js",{"type":58,"tag":310,"props":6407,"children":6408},{"style":830},[6409],{"type":64,"value":1105},{"type":58,"tag":310,"props":6411,"children":6412},{"style":333},[6413],{"type":64,"value":6414}," src\u002F\n",{"type":58,"tag":88,"props":6416,"children":6417},{},[],{"type":58,"tag":92,"props":6419,"children":6421},{"id":6420},"clarifying-questions-when-context-is-unclear",[6422],{"type":64,"value":6423},"Clarifying questions (when context is unclear)",{"type":58,"tag":67,"props":6425,"children":6426},{},[6427],{"type":64,"value":6428},"If the user's version, framework, or scope is ambiguous, ask:",{"type":58,"tag":6430,"props":6431,"children":6432},"ol",{},[6433,6445,6450],{"type":58,"tag":126,"props":6434,"children":6435},{},[6436,6438,6443],{"type":64,"value":6437},"\"What version of ",{"type":58,"tag":111,"props":6439,"children":6441},{"className":6440},[],[6442],{"type":64,"value":136},{"type":64,"value":6444}," are you on right now?\"",{"type":58,"tag":126,"props":6446,"children":6447},{},[6448],{"type":64,"value":6449},"\"Are you using Next.js App Router, Pages Router, Vite, or plain React?\"",{"type":58,"tag":126,"props":6451,"children":6452},{},[6453],{"type":64,"value":6454},"\"Are you migrating the full codebase or just specific components?\"",{"type":58,"tag":67,"props":6456,"children":6457},{},[6458],{"type":64,"value":6459},"State assumptions clearly if you proceed without asking.",{"type":58,"tag":6461,"props":6462,"children":6463},"style",{},[6464],{"type":64,"value":6465},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":6467,"total":364},[6468,6483,6491],{"slug":6469,"name":6469,"fn":6470,"description":6471,"org":6472,"tags":6473,"stars":28,"repoUrl":29,"updatedAt":6482},"chakra-ui-builder","build UI components with Chakra UI","Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form, dashboard, navbar, card, landing section, pricing table, or layout using Chakra UI; wants to add Chakra UI to a project, set up ChakraProvider, run CLI snippets, configure color mode, or fix provider wrapping; or asks about theming — defining brand colors, design tokens, semantic tokens, dark mode values, component recipes, slot recipes, typegen, or ejecting the default theme. Trigger on any Chakra UI building, setup, or theming or charts request, however casually phrased — \"add my brand colors\", \"make a reusable card style\", \"build a bar chart\", \"show me a line chart\", \"make me a login form\", \"build a sidebar\", \"add Chakra to my app\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6474,6477,6478,6481],{"name":6475,"slug":6476,"type":15},"Design","design",{"name":26,"slug":27,"type":15},{"name":6479,"slug":6480,"type":15},"Themes","themes",{"name":23,"slug":24,"type":15},"2026-07-12T08:48:27.118378",{"slug":4,"name":4,"fn":5,"description":6,"org":6484,"tags":6485,"stars":28,"repoUrl":29,"updatedAt":30},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6486,6487,6488,6489,6490],{"name":26,"slug":27,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},{"slug":6492,"name":6492,"fn":6493,"description":6494,"org":6495,"tags":6496,"stars":28,"repoUrl":29,"updatedAt":6501},"chakra-ui-refactor","refactor and improve Chakra UI components","Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML\u002FCSS, Tailwind, CSS Modules, or styled-components to Chakra UI, clean up messy Chakra components, fix layout structure or token usage, or asks anything like \"is this correct\", \"what's wrong with this\", \"review my component\", \"refactor this\", \"clean up\", \"convert\", or \"chakra-ify this\" — even without the words \"review\" or \"refactor\". Trigger on any request to check, improve, or convert Chakra UI code, however casually phrased.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6497,6498,6499,6500],{"name":6475,"slug":6476,"type":15},{"name":26,"slug":27,"type":15},{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},"2026-07-12T08:48:28.392675",{"items":6503,"total":364},[6504,6511,6519],{"slug":6469,"name":6469,"fn":6470,"description":6471,"org":6505,"tags":6506,"stars":28,"repoUrl":29,"updatedAt":6482},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6507,6508,6509,6510],{"name":6475,"slug":6476,"type":15},{"name":26,"slug":27,"type":15},{"name":6479,"slug":6480,"type":15},{"name":23,"slug":24,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":6512,"tags":6513,"stars":28,"repoUrl":29,"updatedAt":30},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6514,6515,6516,6517,6518],{"name":26,"slug":27,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},{"slug":6492,"name":6492,"fn":6493,"description":6494,"org":6520,"tags":6521,"stars":28,"repoUrl":29,"updatedAt":6501},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6522,6523,6524,6525],{"name":6475,"slug":6476,"type":15},{"name":26,"slug":27,"type":15},{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15}]