[bug] Stack, Grid, Container aren't usable as base for additional components

[pushys]

Steps to reproduce

Live example.

1. Try to create a custom component (using styled) based on top of Pigment CSS' Stack, Grid or Container.

Current behavior

Cannot read properties of undefined (reading 'values') is thrown.

Expected behavior

A working custom styled component.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.0 undefined
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react:  11.13.0 
    @emotion/styled:  11.13.0 
    @mui/private-theming:  6.0.0-dev.20240529-082515-213b5e33ab 
    @mui/styled-engine:  6.0.0-dev.20240529-082515-213b5e33ab 
    @mui/system:  6.0.0-dev.240424162023-9968b4889d 
    @mui/types:  7.2.15 
    @mui/utils:  6.0.0-dev.20240529-082515-213b5e33ab 
    @types/react: latest => 18.3.3 
    react: latest => 18.3.1 
    react-dom: latest => 18.3.1 
    typescript: latest => 5.5.4 

Search keywords: stack, grid, container, styled

[brijeshb42]

I finally got around to look at this and found that the issue here was that you were trying to use these components without setting up breakpoints in the theme. Adding this -

theme.breakpoints = {
  values: {},
};

after the theme definition in the vite.config.ts file fixed the issue.

@siriwatknp We should probably update the docs to mention this.

[oliviertassinari]

1. It's strange, why does it break with:

const StyledStack = styled(Stack)({
  margin: 8,
});

and works with?

const StyledStack = Stack;

I would expect a consistent behavior.

2. @pigment-css/react/Stack feels too risky from a product perspective. it's not what @pigment-css/react is about. Can we please remove this? Instead, maybe we can have @pigment-css/react-layout/Stack or anything not using the same npm package, or have this under Material UI.
3. +1 to update the docs
4. If we take a path of making theme.breakpoints.values required to be defined, it looks like we should have a dedicated throw error message when it's not done correctly, so it's clear (and like to 3.)