@commercetools/nimbus-mcp 3.4.0 → 3.5.1

package/data/docs/routes/home-getting-started-installation.json

@@ -319,10 +319,10 @@
       }
     ]
   },
-  "mdx": "\n# Installation\n\nHow to add Nimbus to your react frontend.\n\n## 1. Install the nimbus packages\n\nYou can install Nimbus using your preferred package manager.\n\n### Core Installation\n\nInstall the core Nimbus packages along with required peer dependencies:\n\n#### pnpm\n\n```bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### npm\n\n```bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### yarn\n\n```bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n### Rich Text Editor (Optional)\n\nIf you're using the Rich Text Input component, also install the Slate dependencies:\n\n#### pnpm\n\n```bash\npnpm add slate slate-history slate-hyperscript slate-react\n```\n\n#### npm\n\n```bash\nnpm install slate slate-history slate-hyperscript slate-react\n```\n\n#### yarn\n\n```bash\nyarn add slate slate-history slate-hyperscript slate-react\n```\n\n> [!TIP]\n> Your package manager will automatically resolve compatible versions based on Nimbus's peer dependency requirements.\n\n> [!NOTE]  \n> Nimbus requires React 19.x. If you're on an earlier version, upgrade with `pnpm add react@19 react-dom@19`\n\n### TypeScript Support\n\nTypeScript types for component variants, sizes, and design tokens are generated\nvia a postinstall hook. Modern package managers (pnpm v8+, yarn v2+) block\npostinstall scripts by default. To enable automatic type generation:\n\n#### pnpm\n\nAdd to your `package.json`:\n\n```json\n{\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"@commercetools/nimbus\"]\n  }\n}\n```\n\nOr run `pnpm approve-builds` after installation.\n\n#### Manual generation\n\nIf the postinstall doesn't run, generate types manually:\n\n```bash\nnpx @chakra-ui/cli typegen node_modules/@commercetools/nimbus/dist/index.es.js\n```\n\n### Design Token Autocomplete (Optional)\n\nInstall the design token TypeScript plugin to see resolved CSS values next to token names in autocomplete. For example, when you type `gap=\"`, the dropdown shows `600 = 24px` instead of just `600`.\n\n#### pnpm\n\n```bash\npnpm add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### npm\n\n```bash\nnpm install -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### yarn\n\n```bash\nyarn add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\nThen add the plugin to your `tsconfig.json` (or `tsconfig.app.json` if using\nproject references):\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      { \"name\": \"@commercetools/nimbus-design-token-ts-plugin\" }\n    ]\n  }\n}\n```\n\nIn VS Code, you must use the workspace TypeScript version for the plugin to\nactivate:\n\n1. Open the command palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)\n2. Run **\"TypeScript: Select TypeScript Version\"**\n3. Select **\"Use Workspace Version\"**\n4. Restart the TS server: **\"TypeScript: Restart TS Server\"**\n\nThe plugin supports spacing, colors, font sizes, border radius, font weights,\nshadows, opacity, z-index, and more.\n\n## 2. Set up NimbusProvider\n\nWrap your application with the `NimbusProvider` at the root level. This provider\nis essential for Nimbus components to function correctly, as it supplies the\nnecessary theme and context.\n\n```tsx\n// App.tsx or main.tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { NimbusProvider } from \"@commercetools/nimbus\";\nimport App from \"./App\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <NimbusProvider>\n      <App />\n    </NimbusProvider>\n  </React.StrictMode>\n);\n```\n\n### Font Loading\n\nBy default, `NimbusProvider` automatically loads the Inter font family from Google Fonts. This ensures consistent typography across all Nimbus components.\n\n```tsx\n// Default behavior - fonts are loaded automatically\n<NimbusProvider>\n  <App />\n</NimbusProvider>\n```\n\n> [!WARNING]\n> **Existing Applications**: If your application already loads Inter fonts (e.g., via global stylesheets, CDN links, or font files), you **must** set `loadFonts={false}` to prevent duplicate font loading, which can cause performance regressions.\n\n```tsx\n// Disable font loading if your app already loads fonts\n<NimbusProvider loadFonts={false}>\n  <App />\n</NimbusProvider>\n```\n\n**Check for existing font loading:**\n\nSearch your codebase for existing Inter font imports:\n- `<link>` tags in your HTML pointing to Google Fonts\n- `@import` statements in CSS files\n- `@font-face` declarations\n- Font files in your assets directory\n\n**When to use `loadFonts={false}`:**\n- ✅ Your application already loads Inter fonts globally\n- ✅ You're using a custom font or brand-specific typography\n- ✅ You're migrating an existing application to Nimbus\n\n**When to use the default (`loadFonts={true}`):**\n- ✅ New applications without existing font loading\n- ✅ You want Nimbus to handle all font requirements\n- ✅ You're building a standalone app or prototype\n\n> [!NOTE]\\\n> Checkout the [NimbusProvider documentation](/components/utilities/nimbusprovider)\n> for more details on how to set up **i18n** and **routing**.\n\n## 3. Use Nimbus Components\n\nOnce the provider is set up, you can start using Nimbus components in your\napplication.\n\n```jsx\n// App.tsx\nimport { Flex, Box, Button } from \"@commercetools/nimbus\";\nimport { ArrowForward } from \"@commercetools/nimbus-icons\";\n\nconst App = () => {\n  return (\n    <Flex width=\"100vw\" height=\"100vh\">\n      <Box margin=\"auto\">\n        <Button\n          variant=\"solid\"\n          colorPalette=\"primary\"\n          onPress={() => alert(\"It just works!\")}\n        >\n          <ArrowForward /> Click me\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default App;\n```\n\nThat's it! You've successfully installed and set up Nimbus in your project. You\ncan now explore and use the wide range of components offered by the library.\n\n## 4. Set up Testing (Optional)\n\nIf you're using Jest or Vitest to test your application, you'll need to add Nimbus polyfills to your test configuration:\n\n### Jest\n\n```javascript\n// jest.config.js\nmodule.exports = {\n  setupFiles: [\n    '@commercetools/nimbus/setup-jsdom-polyfills'\n  ]\n};\n```\n\n### Vitest\n\n```typescript\n// vitest.config.ts\nexport default defineConfig({\n  test: {\n    setupFiles: ['@commercetools/nimbus/setup-jsdom-polyfills']\n  }\n});\n```\n\nFor complete testing setup instructions, see the **[Testing Setup](/home/getting-started/testing-setup)** guide.\n\n## Troubleshooting\n\n### TypeScript types not working\n\nIf props like `variant` or `size` show as `any`:\n\n1. Run the manual type generation command (see TypeScript Support section above)\n2. Restart your TypeScript server (VS Code: `Cmd+Shift+P` → \"TypeScript: Restart TS Server\")\n\n## Next steps\n\nBefore diving into actual implementation work with Nimbus, take some time to familiarize yourself with the fundamentals.\nOnce you have a solid grasp of these concepts, you'll be well-prepared to explore the individual component documentation and start building beautiful, accessible interfaces with Nimbus.\n\n### Essential Reading\n\n- **[Explore the Core Concepts in detail →](/home/getting-started/core-concepts)**\n- **[Configure Testing Setup →](/home/getting-started/testing-setup)**",
+  "mdx": "\n# Installation\n\nHow to add Nimbus to your react frontend.\n\n## 1. Install the nimbus packages\n\nYou can install Nimbus using your preferred package manager.\n\n### Core Installation\n\nInstall the core Nimbus packages along with required peer dependencies:\n\n#### pnpm\n\n```bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### npm\n\n```bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### yarn\n\n```bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n### Rich Text Editor (Optional)\n\nIf you're using the Rich Text Input component, also install the Slate dependencies:\n\n#### pnpm\n\n```bash\npnpm add slate slate-history slate-hyperscript slate-react\n```\n\n#### npm\n\n```bash\nnpm install slate slate-history slate-hyperscript slate-react\n```\n\n#### yarn\n\n```bash\nyarn add slate slate-history slate-hyperscript slate-react\n```\n\n> [!TIP]\n> Your package manager will automatically resolve compatible versions based on Nimbus's peer dependency requirements.\n\n> [!NOTE]  \n> Nimbus requires React 19.x. If you're on an earlier version, upgrade with `pnpm add react@19 react-dom@19`\n\n### TypeScript Support\n\nTypeScript types for component variants, sizes, and design tokens are generated\nvia a postinstall hook. Modern package managers (pnpm v8+, yarn v2+) block\npostinstall scripts by default. To enable automatic type generation:\n\n#### pnpm\n\nAdd to your `package.json`:\n\n```json\n{\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"@commercetools/nimbus\"]\n  }\n}\n```\n\nOr run `pnpm approve-builds` after installation.\n\n#### Manual generation\n\nIf the postinstall doesn't run, generate types manually:\n\n```bash\nnpx @chakra-ui/cli typegen node_modules/@commercetools/nimbus/dist/theme.es.js\n```\n\n### Design Token Autocomplete (Optional)\n\nInstall the design token TypeScript plugin to see resolved CSS values next to token names in autocomplete. For example, when you type `gap=\"`, the dropdown shows `600 = 24px` instead of just `600`.\n\n#### pnpm\n\n```bash\npnpm add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### npm\n\n```bash\nnpm install -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### yarn\n\n```bash\nyarn add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\nThen add the plugin to your `tsconfig.json` (or `tsconfig.app.json` if using\nproject references):\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      { \"name\": \"@commercetools/nimbus-design-token-ts-plugin\" }\n    ]\n  }\n}\n```\n\nIn VS Code, you must use the workspace TypeScript version for the plugin to\nactivate:\n\n1. Open the command palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)\n2. Run **\"TypeScript: Select TypeScript Version\"**\n3. Select **\"Use Workspace Version\"**\n4. Restart the TS server: **\"TypeScript: Restart TS Server\"**\n\nThe plugin supports spacing, colors, font sizes, border radius, font weights,\nshadows, opacity, z-index, and more.\n\n## 2. Set up NimbusProvider\n\nWrap your application with the `NimbusProvider` at the root level. This provider\nis essential for Nimbus components to function correctly, as it supplies the\nnecessary theme and context.\n\n```tsx\n// App.tsx or main.tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { NimbusProvider } from \"@commercetools/nimbus\";\nimport App from \"./App\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <NimbusProvider>\n      <App />\n    </NimbusProvider>\n  </React.StrictMode>\n);\n```\n\n### Font Loading\n\nBy default, `NimbusProvider` automatically loads the Inter font family from Google Fonts. This ensures consistent typography across all Nimbus components.\n\n```tsx\n// Default behavior - fonts are loaded automatically\n<NimbusProvider>\n  <App />\n</NimbusProvider>\n```\n\n> [!WARNING]\n> **Existing Applications**: If your application already loads Inter fonts (e.g., via global stylesheets, CDN links, or font files), you **must** set `loadFonts={false}` to prevent duplicate font loading, which can cause performance regressions.\n\n```tsx\n// Disable font loading if your app already loads fonts\n<NimbusProvider loadFonts={false}>\n  <App />\n</NimbusProvider>\n```\n\n**Check for existing font loading:**\n\nSearch your codebase for existing Inter font imports:\n- `<link>` tags in your HTML pointing to Google Fonts\n- `@import` statements in CSS files\n- `@font-face` declarations\n- Font files in your assets directory\n\n**When to use `loadFonts={false}`:**\n- ✅ Your application already loads Inter fonts globally\n- ✅ You're using a custom font or brand-specific typography\n- ✅ You're migrating an existing application to Nimbus\n\n**When to use the default (`loadFonts={true}`):**\n- ✅ New applications without existing font loading\n- ✅ You want Nimbus to handle all font requirements\n- ✅ You're building a standalone app or prototype\n\n> [!NOTE]\\\n> Checkout the [NimbusProvider documentation](/components/utilities/nimbusprovider)\n> for more details on how to set up **i18n** and **routing**.\n\n## 3. Use Nimbus Components\n\nOnce the provider is set up, you can start using Nimbus components in your\napplication.\n\n```jsx\n// App.tsx\nimport { Flex, Box, Button } from \"@commercetools/nimbus\";\nimport { ArrowForward } from \"@commercetools/nimbus-icons\";\n\nconst App = () => {\n  return (\n    <Flex width=\"100vw\" height=\"100vh\">\n      <Box margin=\"auto\">\n        <Button\n          variant=\"solid\"\n          colorPalette=\"primary\"\n          onPress={() => alert(\"It just works!\")}\n        >\n          <ArrowForward /> Click me\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default App;\n```\n\nThat's it! You've successfully installed and set up Nimbus in your project. You\ncan now explore and use the wide range of components offered by the library.\n\n## 4. Set up Testing (Optional)\n\nIf you're using Jest or Vitest to test your application, you'll need to add Nimbus polyfills to your test configuration:\n\n### Jest\n\n```javascript\n// jest.config.js\nmodule.exports = {\n  setupFiles: [\n    '@commercetools/nimbus/setup-jsdom-polyfills'\n  ]\n};\n```\n\n### Vitest\n\n```typescript\n// vitest.config.ts\nexport default defineConfig({\n  test: {\n    setupFiles: ['@commercetools/nimbus/setup-jsdom-polyfills']\n  }\n});\n```\n\nFor complete testing setup instructions, see the **[Testing Setup](/home/getting-started/testing-setup)** guide.\n\n## Troubleshooting\n\n### TypeScript types not working\n\nIf props like `variant` or `size` show as `any`:\n\n1. Run the manual type generation command (see TypeScript Support section above)\n2. Restart your TypeScript server (VS Code: `Cmd+Shift+P` → \"TypeScript: Restart TS Server\")\n\n## Next steps\n\nBefore diving into actual implementation work with Nimbus, take some time to familiarize yourself with the fundamentals.\nOnce you have a solid grasp of these concepts, you'll be well-prepared to explore the individual component documentation and start building beautiful, accessible interfaces with Nimbus.\n\n### Essential Reading\n\n- **[Explore the Core Concepts in detail →](/home/getting-started/core-concepts)**\n- **[Configure Testing Setup →](/home/getting-started/testing-setup)**",
   "views": {
     "overview": {
-      "mdx": "\n# Installation\n\nHow to add Nimbus to your react frontend.\n\n## 1. Install the nimbus packages\n\nYou can install Nimbus using your preferred package manager.\n\n### Core Installation\n\nInstall the core Nimbus packages along with required peer dependencies:\n\n#### pnpm\n\n```bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### npm\n\n```bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### yarn\n\n```bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n### Rich Text Editor (Optional)\n\nIf you're using the Rich Text Input component, also install the Slate dependencies:\n\n#### pnpm\n\n```bash\npnpm add slate slate-history slate-hyperscript slate-react\n```\n\n#### npm\n\n```bash\nnpm install slate slate-history slate-hyperscript slate-react\n```\n\n#### yarn\n\n```bash\nyarn add slate slate-history slate-hyperscript slate-react\n```\n\n> [!TIP]\n> Your package manager will automatically resolve compatible versions based on Nimbus's peer dependency requirements.\n\n> [!NOTE]  \n> Nimbus requires React 19.x. If you're on an earlier version, upgrade with `pnpm add react@19 react-dom@19`\n\n### TypeScript Support\n\nTypeScript types for component variants, sizes, and design tokens are generated\nvia a postinstall hook. Modern package managers (pnpm v8+, yarn v2+) block\npostinstall scripts by default. To enable automatic type generation:\n\n#### pnpm\n\nAdd to your `package.json`:\n\n```json\n{\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"@commercetools/nimbus\"]\n  }\n}\n```\n\nOr run `pnpm approve-builds` after installation.\n\n#### Manual generation\n\nIf the postinstall doesn't run, generate types manually:\n\n```bash\nnpx @chakra-ui/cli typegen node_modules/@commercetools/nimbus/dist/index.es.js\n```\n\n### Design Token Autocomplete (Optional)\n\nInstall the design token TypeScript plugin to see resolved CSS values next to token names in autocomplete. For example, when you type `gap=\"`, the dropdown shows `600 = 24px` instead of just `600`.\n\n#### pnpm\n\n```bash\npnpm add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### npm\n\n```bash\nnpm install -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### yarn\n\n```bash\nyarn add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\nThen add the plugin to your `tsconfig.json` (or `tsconfig.app.json` if using\nproject references):\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      { \"name\": \"@commercetools/nimbus-design-token-ts-plugin\" }\n    ]\n  }\n}\n```\n\nIn VS Code, you must use the workspace TypeScript version for the plugin to\nactivate:\n\n1. Open the command palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)\n2. Run **\"TypeScript: Select TypeScript Version\"**\n3. Select **\"Use Workspace Version\"**\n4. Restart the TS server: **\"TypeScript: Restart TS Server\"**\n\nThe plugin supports spacing, colors, font sizes, border radius, font weights,\nshadows, opacity, z-index, and more.\n\n## 2. Set up NimbusProvider\n\nWrap your application with the `NimbusProvider` at the root level. This provider\nis essential for Nimbus components to function correctly, as it supplies the\nnecessary theme and context.\n\n```tsx\n// App.tsx or main.tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { NimbusProvider } from \"@commercetools/nimbus\";\nimport App from \"./App\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <NimbusProvider>\n      <App />\n    </NimbusProvider>\n  </React.StrictMode>\n);\n```\n\n### Font Loading\n\nBy default, `NimbusProvider` automatically loads the Inter font family from Google Fonts. This ensures consistent typography across all Nimbus components.\n\n```tsx\n// Default behavior - fonts are loaded automatically\n<NimbusProvider>\n  <App />\n</NimbusProvider>\n```\n\n> [!WARNING]\n> **Existing Applications**: If your application already loads Inter fonts (e.g., via global stylesheets, CDN links, or font files), you **must** set `loadFonts={false}` to prevent duplicate font loading, which can cause performance regressions.\n\n```tsx\n// Disable font loading if your app already loads fonts\n<NimbusProvider loadFonts={false}>\n  <App />\n</NimbusProvider>\n```\n\n**Check for existing font loading:**\n\nSearch your codebase for existing Inter font imports:\n- `<link>` tags in your HTML pointing to Google Fonts\n- `@import` statements in CSS files\n- `@font-face` declarations\n- Font files in your assets directory\n\n**When to use `loadFonts={false}`:**\n- ✅ Your application already loads Inter fonts globally\n- ✅ You're using a custom font or brand-specific typography\n- ✅ You're migrating an existing application to Nimbus\n\n**When to use the default (`loadFonts={true}`):**\n- ✅ New applications without existing font loading\n- ✅ You want Nimbus to handle all font requirements\n- ✅ You're building a standalone app or prototype\n\n> [!NOTE]\\\n> Checkout the [NimbusProvider documentation](/components/utilities/nimbusprovider)\n> for more details on how to set up **i18n** and **routing**.\n\n## 3. Use Nimbus Components\n\nOnce the provider is set up, you can start using Nimbus components in your\napplication.\n\n```jsx\n// App.tsx\nimport { Flex, Box, Button } from \"@commercetools/nimbus\";\nimport { ArrowForward } from \"@commercetools/nimbus-icons\";\n\nconst App = () => {\n  return (\n    <Flex width=\"100vw\" height=\"100vh\">\n      <Box margin=\"auto\">\n        <Button\n          variant=\"solid\"\n          colorPalette=\"primary\"\n          onPress={() => alert(\"It just works!\")}\n        >\n          <ArrowForward /> Click me\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default App;\n```\n\nThat's it! You've successfully installed and set up Nimbus in your project. You\ncan now explore and use the wide range of components offered by the library.\n\n## 4. Set up Testing (Optional)\n\nIf you're using Jest or Vitest to test your application, you'll need to add Nimbus polyfills to your test configuration:\n\n### Jest\n\n```javascript\n// jest.config.js\nmodule.exports = {\n  setupFiles: [\n    '@commercetools/nimbus/setup-jsdom-polyfills'\n  ]\n};\n```\n\n### Vitest\n\n```typescript\n// vitest.config.ts\nexport default defineConfig({\n  test: {\n    setupFiles: ['@commercetools/nimbus/setup-jsdom-polyfills']\n  }\n});\n```\n\nFor complete testing setup instructions, see the **[Testing Setup](/home/getting-started/testing-setup)** guide.\n\n## Troubleshooting\n\n### TypeScript types not working\n\nIf props like `variant` or `size` show as `any`:\n\n1. Run the manual type generation command (see TypeScript Support section above)\n2. Restart your TypeScript server (VS Code: `Cmd+Shift+P` → \"TypeScript: Restart TS Server\")\n\n## Next steps\n\nBefore diving into actual implementation work with Nimbus, take some time to familiarize yourself with the fundamentals.\nOnce you have a solid grasp of these concepts, you'll be well-prepared to explore the individual component documentation and start building beautiful, accessible interfaces with Nimbus.\n\n### Essential Reading\n\n- **[Explore the Core Concepts in detail →](/home/getting-started/core-concepts)**\n- **[Configure Testing Setup →](/home/getting-started/testing-setup)**",
+      "mdx": "\n# Installation\n\nHow to add Nimbus to your react frontend.\n\n## 1. Install the nimbus packages\n\nYou can install Nimbus using your preferred package manager.\n\n### Core Installation\n\nInstall the core Nimbus packages along with required peer dependencies:\n\n#### pnpm\n\n```bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### npm\n\n```bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n#### yarn\n\n```bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n```\n\n### Rich Text Editor (Optional)\n\nIf you're using the Rich Text Input component, also install the Slate dependencies:\n\n#### pnpm\n\n```bash\npnpm add slate slate-history slate-hyperscript slate-react\n```\n\n#### npm\n\n```bash\nnpm install slate slate-history slate-hyperscript slate-react\n```\n\n#### yarn\n\n```bash\nyarn add slate slate-history slate-hyperscript slate-react\n```\n\n> [!TIP]\n> Your package manager will automatically resolve compatible versions based on Nimbus's peer dependency requirements.\n\n> [!NOTE]  \n> Nimbus requires React 19.x. If you're on an earlier version, upgrade with `pnpm add react@19 react-dom@19`\n\n### TypeScript Support\n\nTypeScript types for component variants, sizes, and design tokens are generated\nvia a postinstall hook. Modern package managers (pnpm v8+, yarn v2+) block\npostinstall scripts by default. To enable automatic type generation:\n\n#### pnpm\n\nAdd to your `package.json`:\n\n```json\n{\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"@commercetools/nimbus\"]\n  }\n}\n```\n\nOr run `pnpm approve-builds` after installation.\n\n#### Manual generation\n\nIf the postinstall doesn't run, generate types manually:\n\n```bash\nnpx @chakra-ui/cli typegen node_modules/@commercetools/nimbus/dist/theme.es.js\n```\n\n### Design Token Autocomplete (Optional)\n\nInstall the design token TypeScript plugin to see resolved CSS values next to token names in autocomplete. For example, when you type `gap=\"`, the dropdown shows `600 = 24px` instead of just `600`.\n\n#### pnpm\n\n```bash\npnpm add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### npm\n\n```bash\nnpm install -D @commercetools/nimbus-design-token-ts-plugin\n```\n\n#### yarn\n\n```bash\nyarn add -D @commercetools/nimbus-design-token-ts-plugin\n```\n\nThen add the plugin to your `tsconfig.json` (or `tsconfig.app.json` if using\nproject references):\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      { \"name\": \"@commercetools/nimbus-design-token-ts-plugin\" }\n    ]\n  }\n}\n```\n\nIn VS Code, you must use the workspace TypeScript version for the plugin to\nactivate:\n\n1. Open the command palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)\n2. Run **\"TypeScript: Select TypeScript Version\"**\n3. Select **\"Use Workspace Version\"**\n4. Restart the TS server: **\"TypeScript: Restart TS Server\"**\n\nThe plugin supports spacing, colors, font sizes, border radius, font weights,\nshadows, opacity, z-index, and more.\n\n## 2. Set up NimbusProvider\n\nWrap your application with the `NimbusProvider` at the root level. This provider\nis essential for Nimbus components to function correctly, as it supplies the\nnecessary theme and context.\n\n```tsx\n// App.tsx or main.tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { NimbusProvider } from \"@commercetools/nimbus\";\nimport App from \"./App\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <NimbusProvider>\n      <App />\n    </NimbusProvider>\n  </React.StrictMode>\n);\n```\n\n### Font Loading\n\nBy default, `NimbusProvider` automatically loads the Inter font family from Google Fonts. This ensures consistent typography across all Nimbus components.\n\n```tsx\n// Default behavior - fonts are loaded automatically\n<NimbusProvider>\n  <App />\n</NimbusProvider>\n```\n\n> [!WARNING]\n> **Existing Applications**: If your application already loads Inter fonts (e.g., via global stylesheets, CDN links, or font files), you **must** set `loadFonts={false}` to prevent duplicate font loading, which can cause performance regressions.\n\n```tsx\n// Disable font loading if your app already loads fonts\n<NimbusProvider loadFonts={false}>\n  <App />\n</NimbusProvider>\n```\n\n**Check for existing font loading:**\n\nSearch your codebase for existing Inter font imports:\n- `<link>` tags in your HTML pointing to Google Fonts\n- `@import` statements in CSS files\n- `@font-face` declarations\n- Font files in your assets directory\n\n**When to use `loadFonts={false}`:**\n- ✅ Your application already loads Inter fonts globally\n- ✅ You're using a custom font or brand-specific typography\n- ✅ You're migrating an existing application to Nimbus\n\n**When to use the default (`loadFonts={true}`):**\n- ✅ New applications without existing font loading\n- ✅ You want Nimbus to handle all font requirements\n- ✅ You're building a standalone app or prototype\n\n> [!NOTE]\\\n> Checkout the [NimbusProvider documentation](/components/utilities/nimbusprovider)\n> for more details on how to set up **i18n** and **routing**.\n\n## 3. Use Nimbus Components\n\nOnce the provider is set up, you can start using Nimbus components in your\napplication.\n\n```jsx\n// App.tsx\nimport { Flex, Box, Button } from \"@commercetools/nimbus\";\nimport { ArrowForward } from \"@commercetools/nimbus-icons\";\n\nconst App = () => {\n  return (\n    <Flex width=\"100vw\" height=\"100vh\">\n      <Box margin=\"auto\">\n        <Button\n          variant=\"solid\"\n          colorPalette=\"primary\"\n          onPress={() => alert(\"It just works!\")}\n        >\n          <ArrowForward /> Click me\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default App;\n```\n\nThat's it! You've successfully installed and set up Nimbus in your project. You\ncan now explore and use the wide range of components offered by the library.\n\n## 4. Set up Testing (Optional)\n\nIf you're using Jest or Vitest to test your application, you'll need to add Nimbus polyfills to your test configuration:\n\n### Jest\n\n```javascript\n// jest.config.js\nmodule.exports = {\n  setupFiles: [\n    '@commercetools/nimbus/setup-jsdom-polyfills'\n  ]\n};\n```\n\n### Vitest\n\n```typescript\n// vitest.config.ts\nexport default defineConfig({\n  test: {\n    setupFiles: ['@commercetools/nimbus/setup-jsdom-polyfills']\n  }\n});\n```\n\nFor complete testing setup instructions, see the **[Testing Setup](/home/getting-started/testing-setup)** guide.\n\n## Troubleshooting\n\n### TypeScript types not working\n\nIf props like `variant` or `size` show as `any`:\n\n1. Run the manual type generation command (see TypeScript Support section above)\n2. Restart your TypeScript server (VS Code: `Cmd+Shift+P` → \"TypeScript: Restart TS Server\")\n\n## Next steps\n\nBefore diving into actual implementation work with Nimbus, take some time to familiarize yourself with the fundamentals.\nOnce you have a solid grasp of these concepts, you'll be well-prepared to explore the individual component documentation and start building beautiful, accessible interfaces with Nimbus.\n\n### Essential Reading\n\n- **[Explore the Core Concepts in detail →](/home/getting-started/core-concepts)**\n- **[Configure Testing Setup →](/home/getting-started/testing-setup)**",
       "toc": [
         {
           "value": "1. Install the nimbus packages",

package/data/docs/types/AccordionContent.json

@@ -12,12 +12,12 @@
       "description": "The content to display as the label.",
       "name": "label",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/labelable.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/labelable.d.ts",
         "name": "LabelableProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/labelable.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/labelable.d.ts",
           "name": "LabelableProps"
         }
       ],
@@ -31,12 +31,12 @@
       "description": "The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the\nelement. A function may be provided to compute the style based on component state.",
       "name": "style",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/utils.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/utils.d.ts",
         "name": "StyleRenderProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/utils.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/utils.d.ts",
           "name": "StyleRenderProps"
         }
       ],
@@ -52,16 +52,16 @@
       "description": "The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\nelement. A function may be provided to compute the class based on component state.",
       "name": "className",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
         "name": "DisclosureProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
           "name": "DisclosureProps"
         },
         {
-          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/index.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.18/node_modules/@types/react/index.d.ts",
           "name": "HTMLAttributes"
         }
       ],
@@ -75,12 +75,12 @@
       "description": "The element's unique identifier. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).",
       "name": "id",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
         "name": "DOMProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
           "name": "DOMProps"
         }
       ],
@@ -96,16 +96,16 @@
       "description": "The accessibility role for the disclosure's panel.",
       "name": "role",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
         "name": "DisclosurePanelProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
           "name": "DisclosurePanelProps"
         },
         {
-          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/index.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.18/node_modules/@types/react/index.d.ts",
           "name": "HTMLAttributes"
         }
       ],
@@ -128,12 +128,12 @@
       "description": "Identifies the element (or elements) that describes the object.",
       "name": "aria-describedby",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
         "name": "AriaLabelingProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
           "name": "AriaLabelingProps"
         }
       ],
@@ -147,12 +147,12 @@
       "description": "Identifies the element (or elements) that provide a detailed, extended description for the\nobject.",
       "name": "aria-details",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
         "name": "AriaLabelingProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
           "name": "AriaLabelingProps"
         }
       ],
@@ -166,12 +166,12 @@
       "description": "Defines a string value that labels the current element.",
       "name": "aria-label",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
         "name": "AriaLabelingProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
           "name": "AriaLabelingProps"
         }
       ],
@@ -185,12 +185,12 @@
       "description": "Identifies the element (or elements) that labels the current element.",
       "name": "aria-labelledby",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
         "name": "AriaLabelingProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.0_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@react-types+shared@3.36.1_react@19.2.0/node_modules/@react-types/shared/src/dom.d.ts",
           "name": "AriaLabelingProps"
         }
       ],
@@ -204,16 +204,16 @@
       "description": "The children of the component.\nThe content to display when expanded",
       "name": "children",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
         "name": "DisclosurePanelProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/Disclosure.d.ts",
           "name": "DisclosurePanelProps"
         },
         {
-          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/index.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.18/node_modules/@types/react/index.d.ts",
           "name": "DOMAttributes"
         },
         {
@@ -231,12 +231,12 @@
       "description": "Overrides the default DOM element with a custom render function.\nThis allows rendering existing components with built-in styles and behaviors\nsuch as router links, animation libraries, and pre-styled components.\n\nRequirements:\n\n- You must render the expected element type (e.g. if `<button>` is expected, you cannot render an\n  `<a>`).\n- Only a single root DOM element can be rendered (no fragments).\n- You must pass through props and ref to the underlying DOM element, merging with your own prop\n  as appropriate.",
       "name": "render",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/utils.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/utils.d.ts",
         "name": "DOMRenderProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.19.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/utils.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/react-aria-components@1.20.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/dist/types/src/utils.d.ts",
           "name": "DOMRenderProps"
         }
       ],
@@ -252,12 +252,12 @@
       "description": "The HTML element used to render the label, e.g. 'label', or 'span'.",
       "name": "labelElementType",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/react-aria@3.50.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria/dist/types/src/label/useLabel.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/react-aria@3.51.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria/dist/types/src/label/useLabel.d.ts",
         "name": "LabelAriaProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/react-aria@3.50.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria/dist/types/src/label/useLabel.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/react-aria@3.51.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria/dist/types/src/label/useLabel.d.ts",
           "name": "LabelAriaProps"
         }
       ],