Please use the div here instead of introducing a new component. The component is not relevant to this demo.

If we agree that each instance of the date picker (same of the other components) needs to have a large enough gap with its neighbors so the developers can easily process the content, then I believe we don't have that many options.

The alternatives are:

• A root Box with a descendant selector to add the margin. This adds boilerplate, it's what we used to do in the other demos before replacing the with Stack. For instance https://next.material-ui.com/components/text-fields/#BasicTextFields.tsx
• Use the margin prop of the TextField. This adds margin outside of the demo, once the developer copy and paste it into it's project. The date pickers is already using a lot of space, I expect that most developers will want to remove the margin, and have to figure out how. It's also learning that can't be shared with the other demos like Stack, as specific to the TextField. This prop was introduced before we had the sx, not sure if it's still relevant anymore.

I personally think that updating https://next.material-ui.com/components/autocomplete/ too would help.

cc @mui-org/core for thoughts on this matter. How can we maximize the DX? Keeping the content of the demos short, minimizing imports, and making it easy to map what's displayed on the screen with the associated source.

I pushed in the same direction for the Autocomplete in: d5455a9 (82 additions and 262 deletions) for #26127.

If we agree that each instance of the date picker (same of the other components) needs to have a large enough gap with its neighbors so the developers can easily process the content, then I believe we don't have that many options.

Sure, just don't introduce new components when they're not relevant to the demo.

We agree with the intent, the less developers have to learn / information to process / cleanup to do to use an example, the better.

On the terminology, I use "demo" as a group of multiple "examples". Here, we have two examples bundled under the same demo. The distinction is important because developer don't care so much about the demo but one specific example.

If a demo has multiple examples, each must be spaced enough so that developers can mentally isolate and identify them.

As for how this is solved, either we leak into the example to add spacing, something the developers will need to learn (e.g. margin here or sx when not available) and remove, or it's globally handled by a wrapper that developers can ignore when they copy and paste one instance.

So far, we have systematically refactored the demos in the documentation to use a Stack (as simpler than a Box with a descendant selector).