[docs] Editable demos with CSB Sandpack

[bharatkashyap]

• Allows editing the demos on the documentation website, using Sandpack

• Proof of concept: We can leverage the custom theming to make it match the earlier appearance

• Based off the discussion here

• An alternative to [docs] Make demos editable #29885 (which uses Jarle and simple-react-code-editor along with Next.js dynamic)

• Fixes [docs] Make source code snippet editable #26476

• Deploy preview

[oliviertassinari]

I think that it's fundamentally a dead-end, I would encourage we close. By order of importance:

• It renders inside an iframe but the demos must be part of the flow of the main page. This is important as we don't want isolation, we want the natural flow, for a11y test, breakpoint test, focus test, optimal usage of the scrollbar, etc. I would encourage that we close, not worth exploring further.
• https://sandpack.codesandbox.io/docs/getting-started/custom-content#dependencies it doesn't seem to use the local code.
• The demos seem to take forever to display (>5s), on https://deploy-preview-30627--material-ui.netlify.app/components/button-group/. I guess there might be a solution since it's fast in https://beta.reactjs.org/learn/render-and-commit.

[oliviertassinari]

I'm closing per #30627 (review). Demos can't be rendered in an iframe.