@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/components-inputs.json

@@ -0,0 +1,34 @@
+{
+  "meta": {
+    "id": "Components-Inputs",
+    "title": "Inputs",
+    "description": "Form controls for data entry and selection",
+    "order": 5,
+    "repoPath": "packages/nimbus/src/docs/inputs.mdx",
+    "menu": [
+      "Components",
+      "Inputs"
+    ],
+    "route": "components/inputs",
+    "tags": [
+      "forms"
+    ],
+    "toc": [],
+    "icon": "Input",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Inputs\n\nForm controls for data entry and selection.\n\n<CategoryOverview variant=\"list\" />\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Inputs\n\nForm controls for data entry and selection.\n\n<CategoryOverview variant=\"list\" />\n",
+      "toc": []
+    }
+  }
+}

package/data/docs/routes/components-layout-box.json

@@ -0,0 +1,501 @@
+{
+  "meta": {
+    "id": "Components-Box",
+    "title": "Box",
+    "exportName": "Box",
+    "description": "Box is a basic layout component that serves as a wrapper or container. It's based on the Chakra UI Box component and supports all style props for rapid UI development.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/box/box.mdx",
+    "menu": [
+      "Components",
+      "Layout",
+      "Box"
+    ],
+    "route": "components/layout/box",
+    "tags": [
+      "component",
+      "box",
+      "container",
+      "wrapper",
+      "layout"
+    ],
+    "toc": [
+      {
+        "value": "Import",
+        "href": "#import",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Usage",
+        "href": "#usage",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Basic usage",
+        "href": "#basic-usage",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "As a flex container",
+        "href": "#as-a-flex-container",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "With border",
+        "href": "#with-border",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "With shadow",
+        "href": "#with-shadow",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "With asChild",
+        "href": "#with-aschild",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          5
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Import\n\n```jsx\nimport { Box } from \"@commercetools/nimbus\";\n```\n\n## Usage\n\n### Basic usage\n\n```jsx live\nconst App = () => (\n  <Box p=\"100\" bg=\"primary.3\">\n    Basic Box\n  </Box>\n);\n```\n\n### As a flex container\n\n```jsx live\nconst App = () => (\n  <Box display=\"flex\" gap=\"100\">\n    <Box p=\"100\" bg=\"primary.3\">\n      Item 1\n    </Box>\n    <Box p=\"100\" bg=\"primary.3\">\n      Item 2\n    </Box>\n  </Box>\n);\n```\n\n### With border\n\n```jsx live\nconst App = () => (\n  <Box p=\"100\" border=\"solid-50\" borderColor=\"primary.3\">\n    Box with border\n  </Box>\n);\n```\n\n### With shadow\n\n```jsx live\nconst App = () => (\n  <Box p=\"100\" boxShadow=\"6\">\n    Box with shadow\n  </Box>\n);\n```\n\n### With asChild\n\nUse the `asChild` prop to apply Box styles to any child element while\nmaintaining the child's functionality:\n\n```jsx live\nconst App = () => (\n  <Box p=\"100\" bg=\"primary.3\" asChild>\n    <button onClick={() => alert(\"Clicked!\")}>\n      I am a button with Box styles\n    </button>\n  </Box>\n);\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Import\n\n```jsx\nimport { Box } from \"@commercetools/nimbus\";\n```\n\n## Usage\n\n### Basic usage\n\n```jsx live\nconst App = () => (\n  <Box p=\"100\" bg=\"primary.3\">\n    Basic Box\n  </Box>\n);\n```\n\n### As a flex container\n\n```jsx live\nconst App = () => (\n  <Box display=\"flex\" gap=\"100\">\n    <Box p=\"100\" bg=\"primary.3\">\n      Item 1\n    </Box>\n    <Box p=\"100\" bg=\"primary.3\">\n      Item 2\n    </Box>\n  </Box>\n);\n```\n\n### With border\n\n```jsx live\nconst App = () => (\n  <Box p=\"100\" border=\"solid-50\" borderColor=\"primary.3\">\n    Box with border\n  </Box>\n);\n```\n\n### With shadow\n\n```jsx live\nconst App = () => (\n  <Box p=\"100\" boxShadow=\"6\">\n    Box with shadow\n  </Box>\n);\n```\n\n### With asChild\n\nUse the `asChild` prop to apply Box styles to any child element while\nmaintaining the child's functionality:\n\n```jsx live\nconst App = () => (\n  <Box p=\"100\" bg=\"primary.3\" asChild>\n    <button onClick={() => alert(\"Clicked!\")}>\n      I am a button with Box styles\n    </button>\n  </Box>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "As a flex container",
+          "href": "#as-a-flex-container",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With border",
+          "href": "#with-border",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With shadow",
+          "href": "#with-shadow",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With asChild",
+          "href": "#with-aschild",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <Box as=\"section\" p=\"100\">\n    Section content\n  </Box>\n);\n```\n\n### Accessibility standards\n\n- **Use semantic HTML:** Box renders a `div` by default but can be changed to\n  any other HTML element using the `as` prop. Choose appropriate semantic\n  elements (e.g., `section`, `article`, `nav`) to provide meaningful structure.\n- **Maintain proper document structure:** Ensure the chosen element maintains\n  logical document hierarchy and semantic meaning.\n- **Avoid layout-only divs when possible:** When the Box has semantic meaning,\n  use the `as` prop to render the appropriate HTML element.\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Box, type BoxProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe Box component is a fundamental layout primitive that accepts all Chakra UI system props for styling:\n\n```jsx live-dev\nconst App = () => (\n  <Box p=\"100\" bg=\"primary.3\">\n    Basic Box\n  </Box>\n)\n```\n\n## Usage examples\n\n### Spacing and layout\n\nUse spacing tokens to control padding and margin:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box p=\"100\" bg=\"primary.3\">\n      Padding: 100\n    </Box>\n    <Box p=\"200\" bg=\"primary.3\">\n      Padding: 200\n    </Box>\n    <Box p=\"300\" bg=\"primary.3\">\n      Padding: 300\n    </Box>\n  </Stack>\n)\n```\n\n### Colors and backgrounds\n\nApply background colors and text colors using design tokens:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box p=\"100\" bg=\"primary.3\" color=\"primary.11\">\n      Primary colors\n    </Box>\n    <Box p=\"100\" bg=\"positive.3\" color=\"positive.11\">\n      Positive colors\n    </Box>\n    <Box p=\"100\" bg=\"critical.3\" color=\"critical.11\">\n      Critical colors\n    </Box>\n  </Stack>\n)\n```\n\n### Borders and shadows\n\nCreate visual depth with borders and shadows:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box p=\"100\" border=\"solid-50\" borderColor=\"primary.3\">\n      Box with border\n    </Box>\n    <Box p=\"100\" shadow=\"6\" borderRadius=\"100\">\n      Box with shadow\n    </Box>\n    <Box p=\"100\" border=\"solid-50\" borderColor=\"primary.6\" borderRadius=\"200\" shadow=\"3\">\n      Border, radius, and shadow\n    </Box>\n  </Stack>\n)\n```\n\n### As a flex container\n\nUse Flexbox props to create flexible layouts in both horizontal and vertical orientations:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\">\n    <Box display=\"flex\" gap=\"100\" alignItems=\"center\" justifyContent=\"space-between\" p=\"200\" bg=\"primary.3\">\n      <Box p=\"100\" bg=\"primary.6\">\n        Column 1\n      </Box>\n      <Box p=\"100\" bg=\"primary.6\">\n        Column 2\n      </Box>\n      <Box p=\"100\" bg=\"primary.6\">\n        Column 3\n      </Box>\n    </Box>\n    \n    <Box display=\"flex\" flexDirection=\"column\" gap=\"100\" p=\"200\" bg=\"positive.3\">\n      <Box p=\"100\" bg=\"positive.6\">\n        Row 1\n      </Box>\n      <Box p=\"100\" bg=\"positive.6\">\n        Row 2\n      </Box>\n      <Box p=\"100\" bg=\"positive.6\">\n        Row 3\n      </Box>\n    </Box>\n  </Stack>\n)\n```\n\n**When to use Flexbox:**\n- One-dimensional layouts (row OR column)\n- Aligning and distributing items along a single axis\n- Components that need to grow or shrink based on content\n- Navigation bars, button groups, form layouts\n\n\n> [!TIP]\\\n> See the [Flex](/components/layout/flex) component documentation for complete API reference and advanced usage.\n\n\n### As a grid container\n\nCreate two-dimensional grid layouts with Grid props. Grid is ideal for complex layouts where you need control over both rows and columns simultaneously:\n\n```jsx live-dev\nconst App = () => (\n  <Box \n    display=\"grid\" \n    gridTemplateColumns=\"repeat(3, 1fr)\" \n    gap=\"100\" \n    p=\"200\" \n    bg=\"primary.3\"\n  >\n    <Box p=\"100\" bg=\"primary.6\">\n      Grid Item 1\n    </Box>\n    <Box p=\"100\" bg=\"primary.6\">\n      Grid Item 2\n    </Box>\n    <Box p=\"100\" bg=\"primary.6\">\n      Grid Item 3\n    </Box>\n    <Box p=\"100\" bg=\"primary.6\">\n      Grid Item 4\n    </Box>\n    <Box p=\"100\" bg=\"primary.6\">\n      Grid Item 5\n    </Box>\n    <Box p=\"100\" bg=\"primary.6\">\n      Grid Item 6\n    </Box>\n  </Box>\n)\n```\n\n**When to use Grid:**\n- Two-dimensional layouts (rows AND columns)\n- Complex layouts with defined grid structures\n- Card grids, dashboards, form layouts with multiple columns\n- When you need precise control over item placement\n\n\n> [!TIP]\\\n> See the [Grid](/components/layout/grid) component documentation for complete API reference and advanced usage.\n\n### Polymorphic rendering\n\nChange the underlying HTML element using the `as` prop:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box as=\"section\" p=\"100\" bg=\"primary.3\">\n      Rendered as section\n    </Box>\n    <Box as=\"article\" p=\"100\" bg=\"primary.3\">\n      Rendered as article\n    </Box>\n    <Box as=\"nav\" p=\"100\" bg=\"primary.3\">\n      Rendered as nav\n    </Box>\n  </Stack>\n)\n```\n\n### Composition with asChild\n\nApply Box styles to interactive elements (buttons, links, inputs, etc.) while maintaining their native functionality. The `asChild` prop merges Box's styling props directly onto the child element instead of wrapping it in an additional `<div>`, which helps preserve semantic HTML structure and accessibility. \nThis is particularly important for interactive elements where the element type must remain unchanged for proper behavior and accessibility.\n\n**Benefits:**\n- **No extra DOM wrapper**: Styles are applied directly to the child element\n- **Semantic HTML**: Maintains proper HTML structure (e.g., a `<button>` stays a `<button>`, not wrapped in a `<div>`)\n- **Better accessibility**: Screen readers and assistive technologies see the actual interactive element\n- **Preserved functionality**: The child element retains all its native behavior (click handlers, keyboard navigation, etc.)\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box p=\"100\" bg=\"primary.3\" color=\"primary.11\" asChild>\n      <button onClick={() => alert(\"Clicked!\")}>\n        Button with Box styles\n      </button>\n    </Box>\n    <Box p=\"100\" bg=\"positive.3\" color=\"positive.11\" asChild>\n      <a href=\"#\" onClick={(e) => e.preventDefault()}>\n        Link with Box styles\n      </a>\n    </Box>\n  </Stack>\n)\n```\n\n## Component requirements\n\n## Accessibility\n\nThe Box component is a layout primitive and renders as a `div` by default. For proper accessibility:\n\n- **Semantic HTML**: Use the `as` prop to render appropriate semantic elements (`section`, `article`, `nav`, `aside`, etc.) based on the content's purpose\n- **Landmarks**: When using Box as a landmark element (like `nav` or `main`), provide an `aria-label` for screen readers if multiple landmarks of the same type exist on the page\n- **Interactive elements**: When using `asChild` with interactive elements (buttons, links), ensure the child element has proper accessibility attributes\n\n```tsx\n// Semantic section\n<Box as=\"section\" aria-labelledby=\"section-heading\">\n  <h2 id=\"section-heading\">Section Title</h2>\n</Box>\n\n// Navigation landmark\n<Box as=\"nav\" aria-label=\"Main navigation\">\n  {/* navigation items */}\n</Box>\n\n// Interactive element with asChild\n<Box asChild>\n  <button aria-label={msg.format(labelMessage)}>\n    {/* button content */}\n  </button>\n</Box>\n```\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"example-box\";\n\nexport const Example = () => (\n  <Box id={PERSISTENT_ID} p=\"100\" bg=\"primary.3\">\n    Content\n  </Box>\n);\n```\n\n#### Keyboard navigation\n\nBox is a non-interactive layout component and does not support keyboard navigation by default. However, when using the `asChild` prop with interactive elements, the child element's keyboard interactions are preserved.\n\n## API reference\n\n<PropsTable id=\"Box\" />\n\n\n## Common patterns\n\n### Card-like containers\n\nCreate card-style containers with borders, shadows, and rounded corners:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box \n      p=\"300\" \n      border=\"solid-50\" \n      borderColor=\"neutral.6\" \n      borderRadius=\"200\" \n      shadow=\"3\"\n    >\n      <Text fontSize=\"lg\" fontWeight=\"semibold\" mb=\"100\">\n        Card Title\n      </Text>\n      <Text fontSize=\"sm\" color=\"neutral.11\">\n        This is a card-like container built with Box component using border, shadow, and border radius.\n      </Text>\n    </Box>\n    <Box \n      p=\"300\" \n      bg=\"primary.3\" \n      borderRadius=\"200\" \n      shadow=\"6\"\n    >\n      <Text fontSize=\"lg\" fontWeight=\"semibold\" mb=\"100\" color=\"primary.11\">\n        Colored Card\n      </Text>\n      <Text fontSize=\"sm\" color=\"primary.11\">\n        A card with background color and larger shadow for emphasis.\n      </Text>\n    </Box>\n  </Stack>\n)\n```\n\n> [!TIP]\\\n> See the [Card](/components/card) component documentation for complete API reference and advanced usage.\n\n\n\n\n### Responsive layouts\n\nUse responsive object syntax for adaptive layouts across breakpoints:\n\n```jsx live-dev\nconst App = () => (\n  <Box \n    display=\"grid\" \n    gridTemplateColumns={{ base: \"1fr\", md: \"repeat(2, 1fr)\", lg: \"repeat(3, 1fr)\" }} \n    gap=\"200\"\n  >\n    <Box p=\"200\" bg=\"primary.3\" borderRadius=\"100\">\n      Item 1\n    </Box>\n    <Box p=\"200\" bg=\"primary.3\" borderRadius=\"100\">\n      Item 2\n    </Box>\n    <Box p=\"200\" bg=\"primary.3\" borderRadius=\"100\">\n      Item 3\n    </Box>\n    <Box p=\"200\" bg=\"primary.3\" borderRadius=\"100\">\n      Item 4\n    </Box>\n    <Box p=\"200\" bg=\"primary.3\" borderRadius=\"100\">\n      Item 5\n    </Box>\n    <Box p=\"200\" bg=\"primary.3\" borderRadius=\"100\">\n      Item 6\n    </Box>\n  </Box>\n)\n```\n\n### Centered content container\n\nCreate a centered container with maximum width:\n\n```jsx live-dev\nconst App = () => (\n  <Box bg=\"neutral.2\" p=\"400\">\n    <Box maxWidth=\"3xl\" mx=\"auto\" p=\"400\" bg=\"primary.3\">\n      <Text fontSize=\"lg\" fontWeight=\"semibold\" mb=\"200\">\n        Centered Container\n      </Text>\n      <Text fontSize=\"sm\">\n        This content is centered with a maximum width, commonly used for readable text layouts or contained content areas.\n      </Text>\n    </Box>\n  </Box>\n)\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Box within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Rendering Tests\n\nVerify the component renders with expected content\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Box, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Box - Basic rendering\", () => {\n  it(\"renders content correctly\", () => {\n    render(\n      <NimbusProvider>\n        <Box>Box content</Box>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Box content\")).toBeInTheDocument();\n  });\n\n  it(\"renders with children components\", () => {\n    render(\n      <NimbusProvider>\n        <Box>\n          <span>Child element</span>\n        </Box>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Child element\")).toBeInTheDocument();\n  });\n});\n```\n\n### Style Props Tests\n\nTest rendering with various Chakra UI style props\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Box, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Box - Style props\", () => {\n  it(\"applies custom className\", () => {\n    render(\n      <NimbusProvider>\n        <Box className=\"custom-class\">Styled Box</Box>\n      </NimbusProvider>\n    );\n\n    const box = screen.getByText(\"Styled Box\");\n    expect(box).toHaveClass(\"custom-class\");\n  });\n\n  it(\"renders with data attributes for testing\", () => {\n    render(\n      <NimbusProvider>\n        <Box data-testid=\"test-box\">Test Box</Box>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByTestId(\"test-box\")).toBeInTheDocument();\n  });\n});\n```\n\n### Polymorphic Rendering Tests\n\nTest rendering as different HTML elements\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Box, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Box - Polymorphic rendering\", () => {\n  it(\"renders as section element\", () => {\n    render(\n      <NimbusProvider>\n        <Box as=\"section\" aria-label=\"Test section\">\n          Section content\n        </Box>\n      </NimbusProvider>\n    );\n\n    const section = screen.getByRole(\"region\", { name: \"Test section\" });\n    expect(section).toBeInTheDocument();\n    expect(section.tagName).toBe(\"SECTION\");\n  });\n\n  it(\"renders as nav element\", () => {\n    render(\n      <NimbusProvider>\n        <Box as=\"nav\" aria-label=\"Test navigation\">\n          Navigation content\n        </Box>\n      </NimbusProvider>\n    );\n\n    const nav = screen.getByRole(\"navigation\", { name: \"Test navigation\" });\n    expect(nav).toBeInTheDocument();\n    expect(nav.tagName).toBe(\"NAV\");\n  });\n\n  it(\"renders as article element\", () => {\n    render(\n      <NimbusProvider>\n        <Box as=\"article\">Article content</Box>\n      </NimbusProvider>\n    );\n\n    const article = screen.getByRole(\"article\");\n    expect(article).toBeInTheDocument();\n    expect(article.tagName).toBe(\"ARTICLE\");\n  });\n});\n```\n\n### AsChild Composition Tests\n\nTest style composition with asChild prop\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Box, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Box - AsChild composition\", () => {\n  it(\"applies styles to child button element\", () => {\n    render(\n      <NimbusProvider>\n        <Box asChild>\n          <button>Styled Button</button>\n        </Box>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\", { name: \"Styled Button\" });\n    expect(button).toBeInTheDocument();\n    expect(button.tagName).toBe(\"BUTTON\");\n  });\n\n  it(\"preserves child link functionality with styles\", () => {\n    render(\n      <NimbusProvider>\n        <Box asChild>\n          <a href=\"/test\">Styled Link</a>\n        </Box>\n      </NimbusProvider>\n    );\n\n    const link = screen.getByRole(\"link\", { name: \"Styled Link\" });\n    expect(link).toBeInTheDocument();\n    expect(link).toHaveAttribute(\"href\", \"/test\");\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-box--docs)\n- [Chakra UI Style Props](https://v2.chakra-ui.com/docs/styled-system/style-props)\n\n\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Spacing and layout",
+          "href": "#spacing-and-layout",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Colors and backgrounds",
+          "href": "#colors-and-backgrounds",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Borders and shadows",
+          "href": "#borders-and-shadows",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "As a flex container",
+          "href": "#as-a-flex-container",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "As a grid container",
+          "href": "#as-a-grid-container",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Polymorphic rendering",
+          "href": "#polymorphic-rendering",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Composition with asChild",
+          "href": "#composition-with-aschild",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common patterns",
+          "href": "#common-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Card-like containers",
+          "href": "#card-like-containers",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Responsive layouts",
+          "href": "#responsive-layouts",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Centered content container",
+          "href": "#centered-content-container",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Style Props Tests",
+          "href": "#style-props-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Polymorphic Rendering Tests",
+          "href": "#polymorphic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "AsChild Composition Tests",
+          "href": "#aschild-composition-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}