Design-System v2 questions

Discord Q&A frontend-questions
4

To keep it simple: I have created a Test plugin in my react strapi project and a component TestComponent.Then basically just copied the Grid Example from the documentation (@storybook/cli - Storybook)

import React from 'react'
import { Grid, Typography } from '@strapi/design-system'

const TestComponent = () => {
 return (
   <div>
     <Grid.Root gap={5}>
       <Grid.Item xs={1} background="primary100">
         <Typography>First</Typography>
       </Grid.Item>
       <Grid.Item xs={1} background="primary100">
         <Typography>Second</Typography>
       </Grid.Item>
       <Grid.Item xs={1} background="primary100">
         <Typography>Third</Typography>
       </Grid.Item>
       <Grid.Item xs={1} background="primary100" color="primary700">
         <Typography>Last</Typography>
       </Grid.Item>
     </Grid.Root>
   </div>
 )
}

export default TestComponent

  "dependencies": {
    "@strapi/design-system": "2.0.0-rc.7",
    "@strapi/icons": "2.0.0-rc.7",
    "prop-types": "15.8.1",
    "zustand": "4.5.4"
  },
  "devDependencies": {
    "@strapi/typescript-utils": "4.25.2",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@types/react-router-dom": "5.3.3",
    "@types/styled-components": "5.1.34",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "5.3.4",
    "styled-components": "6.1.11",
    "typescript": "5.5.3"
  },