@commercetools/nimbus-mcp 0.1.0 → 2.10.0

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

@@ -0,0 +1,587 @@
+{
+  "meta": {
+    "id": "Components-Flex",
+    "title": "Flex",
+    "exportName": "Flex",
+    "description": "Flex is a layout component that provides a convenient way to create flexible layouts based on CSS Flexbox. It's based on the Chakra UI Flex component and supports all style props for rapid UI development.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/flex/flex.mdx",
+    "menu": [
+      "Components",
+      "Layout",
+      "Flex"
+    ],
+    "route": "components/layout/flex",
+    "tags": [
+      "component",
+      "flex",
+      "flexbox",
+      "layout"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Key features",
+        "href": "#key-features",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Usage",
+        "href": "#usage",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Import",
+        "href": "#import",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Basic usage",
+        "href": "#basic-usage",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Direction",
+        "href": "#direction",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Alignment",
+        "href": "#alignment",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Wrapping",
+        "href": "#wrapping",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Flexible items",
+        "href": "#flexible-items",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          6
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Centering content",
+        "href": "#centering-content",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          7
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "With asChild",
+        "href": "#with-aschild",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          8
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nThe Flex component is essentially a Box component with `display: flex` applied\nby default. It provides an intuitive API for creating flexible layouts and\nsupports all flexbox properties.\n\n### Key features\n\n- **Flexbox by default**: Automatically applies `display: flex`\n- **Style props**: Supports all Chakra UI style props for rapid development\n- **Responsive design**: Easily create responsive layouts with responsive props\n- **Semantic HTML**: Can render as any HTML element using the `as` prop\n\n### Resources\n\nLearn more about CSS Flexbox and the underlying implementation:\n\n[Chakra UI Flex](https://chakra-ui.com/docs/components/flex)\n[CSS Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\n## Usage\n\n### Import\n\n```jsx\nimport { Flex } from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\n```jsx live\nconst App = () => (\n  <Flex gap=\"400\">\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 1\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 2\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 3\n    </Box>\n  </Flex>\n);\n```\n\n### Direction\n\nControl the direction of flex items using the `direction` prop:\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"600\">\n    <Stack gap=\"200\">\n      <Text fontWeight=\"500\">Horizontal (row):</Text>\n      <Flex direction=\"row\" gap=\"400\">\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 1\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 2\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 3\n        </Box>\n      </Flex>\n    </Stack>\n    <Stack gap=\"200\">\n      <Text fontWeight=\"500\">Vertical (column):</Text>\n      <Flex direction=\"column\" gap=\"400\">\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 1\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 2\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 3\n        </Box>\n      </Flex>\n    </Stack>\n  </Stack>\n);\n```\n\n### Alignment\n\nControl alignment of flex items using `alignItems` and `justifyContent`:\n\n```jsx live\nconst App = () => (\n  <Flex\n    direction=\"row\"\n    gap=\"400\"\n    alignItems=\"center\"\n    justifyContent=\"space-between\"\n    p=\"400\"\n    bg=\"neutral.2\"\n  >\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 1\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 2\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 3\n    </Box>\n  </Flex>\n);\n```\n\n### Wrapping\n\nControl how flex items wrap using the `wrap` prop:\n\n```jsx live\nconst App = () => (\n  <Flex wrap=\"wrap\" gap=\"400\" maxWidth=\"600px\">\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 1\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 2\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 3\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 4\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 5\n    </Box>\n  </Flex>\n);\n```\n\n### Flexible items\n\nControl how individual items grow and shrink using flex properties:\n\n```jsx live\nconst App = () => (\n  <Flex gap=\"400\">\n    <Box p=\"400\" bg=\"primary.7\" flex=\"1\">\n      Flexible item (flex: 1)\n    </Box>\n    <Box p=\"400\" bg=\"positive.7\">\n      Fixed width item\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" flex=\"2\">\n      More flexible item (flex: 2)\n    </Box>\n  </Flex>\n);\n```\n\n### Centering content\n\nA common use case is centering content both horizontally and vertically:\n\n```jsx live\nconst App = () => (\n  <Flex\n    alignItems=\"center\"\n    justifyContent=\"center\"\n    height=\"200px\"\n    bg=\"neutral.2\"\n  >\n    <Box p=\"400\" bg=\"primary.7\">\n      Centered content\n    </Box>\n  </Flex>\n);\n```\n\n### With asChild\n\nUse the `asChild` prop to apply Flex styles to any child element while\nmaintaining the child's functionality:\n\n```jsx live\nconst App = () => (\n  <Flex gap=\"400\" p=\"400\" bg=\"neutral.2\" asChild>\n    <section>\n      <Box p=\"400\" bg=\"primary.7\">\n        Item 1\n      </Box>\n      <Box p=\"400\" bg=\"primary.7\">\n        Item 2\n      </Box>\n    </section>\n  </Flex>\n);\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nThe Flex component is essentially a Box component with `display: flex` applied\nby default. It provides an intuitive API for creating flexible layouts and\nsupports all flexbox properties.\n\n### Key features\n\n- **Flexbox by default**: Automatically applies `display: flex`\n- **Style props**: Supports all Chakra UI style props for rapid development\n- **Responsive design**: Easily create responsive layouts with responsive props\n- **Semantic HTML**: Can render as any HTML element using the `as` prop\n\n### Resources\n\nLearn more about CSS Flexbox and the underlying implementation:\n\n[Chakra UI Flex](https://chakra-ui.com/docs/components/flex)\n[CSS Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\n## Usage\n\n### Import\n\n```jsx\nimport { Flex } from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\n```jsx live\nconst App = () => (\n  <Flex gap=\"400\">\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 1\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 2\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 3\n    </Box>\n  </Flex>\n);\n```\n\n### Direction\n\nControl the direction of flex items using the `direction` prop:\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"600\">\n    <Stack gap=\"200\">\n      <Text fontWeight=\"500\">Horizontal (row):</Text>\n      <Flex direction=\"row\" gap=\"400\">\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 1\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 2\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 3\n        </Box>\n      </Flex>\n    </Stack>\n    <Stack gap=\"200\">\n      <Text fontWeight=\"500\">Vertical (column):</Text>\n      <Flex direction=\"column\" gap=\"400\">\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 1\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 2\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\">\n          Item 3\n        </Box>\n      </Flex>\n    </Stack>\n  </Stack>\n);\n```\n\n### Alignment\n\nControl alignment of flex items using `alignItems` and `justifyContent`:\n\n```jsx live\nconst App = () => (\n  <Flex\n    direction=\"row\"\n    gap=\"400\"\n    alignItems=\"center\"\n    justifyContent=\"space-between\"\n    p=\"400\"\n    bg=\"neutral.2\"\n  >\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 1\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 2\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\">\n      Item 3\n    </Box>\n  </Flex>\n);\n```\n\n### Wrapping\n\nControl how flex items wrap using the `wrap` prop:\n\n```jsx live\nconst App = () => (\n  <Flex wrap=\"wrap\" gap=\"400\" maxWidth=\"600px\">\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 1\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 2\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 3\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 4\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" minWidth=\"150px\">\n      Item 5\n    </Box>\n  </Flex>\n);\n```\n\n### Flexible items\n\nControl how individual items grow and shrink using flex properties:\n\n```jsx live\nconst App = () => (\n  <Flex gap=\"400\">\n    <Box p=\"400\" bg=\"primary.7\" flex=\"1\">\n      Flexible item (flex: 1)\n    </Box>\n    <Box p=\"400\" bg=\"positive.7\">\n      Fixed width item\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" flex=\"2\">\n      More flexible item (flex: 2)\n    </Box>\n  </Flex>\n);\n```\n\n### Centering content\n\nA common use case is centering content both horizontally and vertically:\n\n```jsx live\nconst App = () => (\n  <Flex\n    alignItems=\"center\"\n    justifyContent=\"center\"\n    height=\"200px\"\n    bg=\"neutral.2\"\n  >\n    <Box p=\"400\" bg=\"primary.7\">\n      Centered content\n    </Box>\n  </Flex>\n);\n```\n\n### With asChild\n\nUse the `asChild` prop to apply Flex styles to any child element while\nmaintaining the child's functionality:\n\n```jsx live\nconst App = () => (\n  <Flex gap=\"400\" p=\"400\" bg=\"neutral.2\" asChild>\n    <section>\n      <Box p=\"400\" bg=\"primary.7\">\n        Item 1\n      </Box>\n      <Box p=\"400\" bg=\"primary.7\">\n        Item 2\n      </Box>\n    </section>\n  </Flex>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Key features",
+          "href": "#key-features",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Direction",
+          "href": "#direction",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Alignment",
+          "href": "#alignment",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Wrapping",
+          "href": "#wrapping",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Flexible items",
+          "href": "#flexible-items",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Centering content",
+          "href": "#centering-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With asChild",
+          "href": "#with-aschild",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            8
+          ],
+          "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  <Flex as=\"nav\" gap=\"400\" p=\"400\">\n    <Box as=\"a\" href=\"#\" p=\"200\">\n      Home\n    </Box>\n    <Box as=\"a\" href=\"#\" p=\"200\">\n      About\n    </Box>\n    <Box as=\"a\" href=\"#\" p=\"200\">\n      Contact\n    </Box>\n  </Flex>\n);\n```\n\n### Accessibility standards\n\n- **Use semantic HTML**: Choose appropriate HTML elements with the `as` prop\n- **Maintain reading order**: Ensure visual order matches DOM order for screen\n  readers\n- **Avoid layout-only divs**: When possible, apply flex styles to semantic\n  elements\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 { Flex, type FlexProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe Flex component applies `display: flex` to create flexible layouts. By default, items are arranged horizontally in a single row:\n\n```jsx live-dev\nconst App = () => (\n  <Flex gap=\"400\">\n    <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\">\n      Item 1\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\">\n      Item 2\n    </Box>\n    <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\">\n      Item 3\n    </Box>\n  </Flex>\n)\n```\n\n## Usage examples\n\n### Direction control\n\nUse the `direction` prop to arrange items horizontally or vertically:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"600\">\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">Row (horizontal):</Text>\n      <Flex direction=\"row\" gap=\"400\" bg=\"neutral.3\" p=\"400\" borderRadius=\"200\">\n        <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\">\n          Item 1\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\">\n          Item 2\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\">\n          Item 3\n        </Box>\n      </Flex>\n    </Box>\n\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">Column (vertical):</Text>\n      <Flex direction=\"column\" gap=\"400\" bg=\"neutral.3\" p=\"400\" borderRadius=\"200\">\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\">\n          Item 1\n        </Box>\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\">\n          Item 2\n        </Box>\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\">\n          Item 3\n        </Box>\n      </Flex>\n    </Box>\n  </Stack>\n)\n```\n\n### Alignment control\n\nUse `alignItems` and `justifyContent` to control how items are positioned:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"600\">\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">Align items to center:</Text>\n      <Flex direction=\"row\" gap=\"400\" alignItems=\"center\" bg=\"neutral.3\" p=\"400\" borderRadius=\"200\" height=\"1600\">\n        <Box p=\"200\" bg=\"primary.7\" borderRadius=\"200\">Short</Box>\n        <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\">\n          <Text>Taller</Text>\n          <Text>Content</Text>\n        </Box>\n        <Box p=\"200\" bg=\"primary.7\" borderRadius=\"200\">Short</Box>\n      </Flex>\n    </Box>\n\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">Justify content with space-between:</Text>\n      <Flex direction=\"row\" gap=\"400\" justifyContent=\"space-between\" bg=\"neutral.3\" p=\"400\" borderRadius=\"200\">\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\">Start</Box>\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\">Middle</Box>\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\">End</Box>\n      </Flex>\n    </Box>\n\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">Center both axes:</Text>\n      <Flex direction=\"row\" alignItems=\"center\" justifyContent=\"center\" bg=\"neutral.3\" p=\"600\" borderRadius=\"200\" height=\"2000\">\n        <Box p=\"400\" bg=\"positive.7\" borderRadius=\"200\">\n          Centered\n        </Box>\n      </Flex>\n    </Box>\n  </Stack>\n)\n```\n\n### Item flexibility\n\nControl how items grow and shrink using flex properties:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">Items with different flex values:</Text>\n      <Flex direction=\"row\" gap=\"400\" bg=\"neutral.3\" p=\"400\" borderRadius=\"200\">\n        <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\" flex=\"1\">\n          Flex: 1\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\">\n          Fixed width\n        </Box>\n        <Box p=\"400\" bg=\"primary.7\" borderRadius=\"200\" flex=\"2\">\n          Flex: 2\n        </Box>\n      </Flex>\n    </Box>\n\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">No grow (minWidth constraint):</Text>\n      <Flex direction=\"row\" gap=\"400\" bg=\"neutral.3\" p=\"400\" borderRadius=\"200\">\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\" minWidth=\"1200\">\n          Fixed min width\n        </Box>\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\" minWidth=\"1200\">\n          Fixed min width\n        </Box>\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\" minWidth=\"1200\">\n          Fixed min width\n        </Box>\n      </Flex>\n    </Box>\n  </Stack>\n)\n```\n\n### Wrapping behavior\n\nControl how items wrap when they exceed available space:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"600\">\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">Wrap enabled:</Text>\n      <Flex wrap=\"wrap\" gap=\"400\" bg=\"neutral.3\" p=\"400\" borderRadius=\"200\">\n        {Array.from({ length: 6 }, (_, i) => (\n          <Box key={i} p=\"400\" bg=\"primary.7\" borderRadius=\"200\" minWidth=\"2000\">\n            Item {i + 1}\n          </Box>\n        ))}\n      </Flex>\n    </Box>\n\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">No wrap (overflow):</Text>\n      <Flex wrap=\"nowrap\" gap=\"400\" bg=\"neutral.3\" p=\"400\" borderRadius=\"200\" overflow=\"auto\">\n        {Array.from({ length: 6 }, (_, i) => (\n          <Box key={i} p=\"400\" bg=\"info.7\" borderRadius=\"200\" minWidth=\"2000\">\n            Item {i + 1}\n          </Box>\n        ))}\n      </Flex>\n    </Box>\n  </Stack>\n)\n```\n\n### Responsive layouts\n\nUse responsive prop values to change layout based on viewport size:\n\n```jsx live-dev\nconst App = () => (\n  <Flex\n    direction={{ base: \"column\", md: \"row\" }}\n    gap={{ base: \"300\", md: \"600\" }}\n    alignItems={{ base: \"stretch\", md: \"center\" }}\n  >\n    <Box p=\"600\" bg=\"primary.7\" borderRadius=\"200\" flex=\"1\">\n      <Text fontWeight=\"600\" mb=\"200\">Card 1</Text>\n      <Text fontSize=\"sm\">Stacks vertically on mobile, horizontally on desktop</Text>\n    </Box>\n    <Box p=\"600\" bg=\"primary.7\" borderRadius=\"200\" flex=\"1\">\n      <Text fontWeight=\"600\" mb=\"200\">Card 2</Text>\n      <Text fontSize=\"sm\">Resize the window to see the layout change</Text>\n    </Box>\n    <Box p=\"600\" bg=\"primary.7\" borderRadius=\"200\" flex=\"1\">\n      <Text fontWeight=\"600\" mb=\"200\">Card 3</Text>\n      <Text fontSize=\"sm\">Gap also adjusts responsively</Text>\n    </Box>\n  </Flex>\n)\n```\n\n## Component requirements\n\n### Usage context\n\nFlex should be used when you need to:\n- Arrange items in one direction (row or column) with flexible sizing\n- Create dynamic layouts where items grow or shrink based on available space\n- Build responsive navigation bars, button groups, or form layouts\n- Align items with precise control over spacing and distribution\n\nFor two-dimensional grid layouts, consider using the `Grid` component. For simple vertical or horizontal stacking with consistent spacing, consider using `Stack` for a more semantic API.\n\n## Accessibility\n\nFlex is a layout component and does not have inherent accessibility requirements. However:\n\n- Ensure child elements have appropriate accessibility attributes\n- Use semantic HTML elements within Flex when appropriate\n- Consider reading order when using `row-reverse` or `column-reverse` directions\n- Test keyboard navigation flows through flex-arranged elements\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-flex\";\n\nexport const Example = () => (\n  <Flex id={PERSISTENT_ID} direction=\"row\" gap=\"400\">\n    {/* children */}\n  </Flex>\n);\n```\n\n#### Keyboard navigation\n\nFlex is a non-interactive layout component and does not support keyboard navigation by default. Keyboard navigation is determined by the interactive child elements contained within the Flex.\n\n## API reference\n\nThe component supports all [Style Props](/home/style-props) with `display=\"flex\"` applied by default.\n\n## Common patterns\n\n### Centered content\n\nCreate a container that centers content both horizontally and vertically:\n\n```jsx live-dev\nconst App = () => (\n  <Flex\n    direction=\"column\"\n    alignItems=\"center\"\n    justifyContent=\"center\"\n    height=\"3000\"\n    gap=\"400\"\n    bg=\"neutral.2\"\n    borderRadius=\"200\"\n  >\n    <Box p=\"600\" bg=\"primary.7\" borderRadius=\"200\" textAlign=\"center\">\n      <Text fontWeight=\"600\" fontSize=\"lg\" mb=\"200\">Centered Content</Text>\n      <Text fontSize=\"sm\">This content is centered on both axes</Text>\n    </Box>\n  </Flex>\n)\n```\n\n### Space-between layout\n\nDistribute items with space between them:\n\n```jsx live-dev\nconst App = () => (\n  <Flex\n    direction=\"row\"\n    justifyContent=\"space-between\"\n    alignItems=\"center\"\n    gap=\"400\"\n    p=\"400\"\n    bg=\"neutral.2\"\n    borderRadius=\"200\"\n  >\n    <Text fontWeight=\"600\">Logo</Text>\n    <Flex direction=\"row\" gap=\"200\">\n      <Button size=\"xs\" variant=\"ghost\">Home</Button>\n      <Button size=\"xs\" variant=\"ghost\">About</Button>\n      <Button size=\"xs\" variant=\"outline\">Sign In</Button>\n    </Flex>\n  </Flex>\n)\n```\n\n### Flexible vs fixed items\n\nMix flexible and fixed-width items:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box>\n      <Text fontWeight=\"400\" mb=\"100\">Sidebar layout:</Text>\n      <Flex direction=\"row\" gap=\"200\" bg=\"neutral.3\" p=\"200\" borderRadius=\"100\" height=\"3200\">\n        <Box p=\"400\" bg=\"info.7\" borderRadius=\"200\" width=\"2400\" flexShrink=\"0\">\n          Sidebar\n        </Box>\n        <Flex direction=\"column\" gap=\"300\" flex=\"1\" bg=\"primary.7\" p=\"400\" borderRadius=\"200\">\n          <Text fontWeight=\"600\">Main Content</Text>\n          <Text fontSize=\"sm\">This content grows to fill available space</Text>\n        </Flex>\n      </Flex>\n    </Box>\n\n    <Box>\n      <Text fontWeight=\"600\" mb=\"200\">Header with flexible content:</Text>\n      <Flex direction=\"row\" gap=\"400\" alignItems=\"center\" bg=\"neutral.3\" p=\"300\" borderRadius=\"200\">\n        <Box  p=\"300\" bg=\"neutral.6\" borderRadius=\"100\" flexShrink=\"0\">\n          Logo\n        </Box>\n        <Flex direction=\"column\" gap=\"100\" flex=\"1\">\n          <Text fontWeight=\"600\" fontSize=\"sm\">Flexible section</Text>\n          <Text fontSize=\"xs\" color=\"neutral.11\">Grows with available space</Text>\n        </Flex>\n        <Button size=\"xs\" flexShrink=\"0\">Action</Button>\n      </Flex>\n    </Box>\n  </Stack>\n)\n```\n\n## Resources\n\n- [Box Component](/components/layout/box)\n- [Stack Component](/components/layout/stack)\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": "Direction control",
+          "href": "#direction-control",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Alignment control",
+          "href": "#alignment-control",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Item flexibility",
+          "href": "#item-flexibility",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Wrapping behavior",
+          "href": "#wrapping-behavior",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Responsive layouts",
+          "href": "#responsive-layouts",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage context",
+          "href": "#usage-context",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "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": "Centered content",
+          "href": "#centered-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Space-between layout",
+          "href": "#space-between-layout",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Flexible vs fixed items",
+          "href": "#flexible-vs-fixed-items",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nUse the Flex component strategically to create flexible and responsive layouts.\n\n### Best practices\n\n- **Use for flexible layouts**: Flex is ideal when you need items to grow,\n  shrink, or align dynamically\n- **Consider Stack first**: For simple vertical or horizontal stacking with\n  consistent spacing, Stack may be simpler\n- **Leverage responsive props**: Use responsive values for direction, alignment,\n  and other properties\n- **Combine with other layout components**: Flex works well with Box, Stack, and\n  Grid for complex layouts\n\n### When to use\n\n> [!TIP]\\\n> When to use\n\n- **Dynamic layouts**: When items need to grow or shrink based on available\n  space\n- **Complex alignment**: When you need precise control over item alignment\n- **Responsive designs**: When layout needs to change based on viewport size\n- **Flexible spacing**: When items should distribute space dynamically\n\n> [!CAUTION]\\\n> When not to use\n\n- **Simple stacking**: Use Stack instead for basic vertical/horizontal layouts\n  with consistent spacing\n- **Grid layouts**: Use Grid for two-dimensional layouts with rows and columns\n- **Static layouts**: Use Box when flexbox features aren't needed\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When to use",
+          "href": "#when-to-use",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}