[system] `maxWidth='xs'` is applied inconsistently, cannot be configured

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Sandbox Link

Current behavior 😯

setting maxWidth='xs' has different effects on different components.

There are three issues with this behavior:

1. xs is not a valid CSS value.
2. As xs is a breakpoint with the value of 0, both 444px and xs are semantically incorrect.
3. The value 444px is not configurable.

Expected behavior 🤔

Ideally, every use of maxWidth='xs' should apply this value of 444px.

This fallback value should also be configurable. Currently, to achieve the same behavior, you need to overwrite the xs breakpoint in a custom theme to be 444px, which would then cause issues with xs media queries and so on.

Context 🔦

I'm trying to cleanly refactor a component away from from using a container. Currently I'm using a custom css class to work around this.

Here are the implementations of the 444 value.

• mui-system/src/Container/createContainer.tsx Line 115
• mui-material/src/Dialog/Dialog.js Line 127, 130

Your environment 🌎

  System:
    OS: macOS 12.5.1
  Binaries:
    Node: 14.15.1 - ~/.asdf/installs/nodejs/14.15.1/bin/node
    Yarn: Not Found
    npm: 6.14.8 - ~/.asdf/installs/nodejs/14.15.1/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Edge: Not Found
    Firefox: 105.0.1
    Safari: 15.6.1
  npmPackages:
    @emotion/react: ^11.10.4 => 11.10.4
    @emotion/styled: ^11.10.4 => 11.10.4
    @mui/base:  5.0.0-alpha.98
    @mui/core-downloads-tracker:  5.10.6
    @mui/material: ^5.10.6 => 5.10.6
    @mui/private-theming:  5.10.6
    @mui/styled-engine:  5.10.6
    @mui/system:  5.10.6
    @mui/types:  7.2.0
    @mui/utils:  5.10.6
    @types/react: ^18.0.21 => 18.0.21
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.8.3 => 4.8.3

Start by comparing the maxWidth handling in mui-system/src/Container/createContainer.tsx and mui-material/src/Dialog/Dialog.js, then use the linked CodeSandbox to inspect how Box and other components behave. Done means maxWidth='xs' produces a consistent value across components and the 444px fallback can be configured without changing the xs breakpoint.