Flash component renders differently in server vs client

[peterbe]

Describe the bug

We use it like this:

import { Flash } from '@primer/components'

...

<Flash variant="warning">
   <p>
      Bla
   </p>
</Flash>

When rendered in NextJS on the server, the HTML it generates becomes:

<div class="Flash-sc-4y90bn-0 bIFBCA">
  <p>
    Bla
  </p>
</div>

But in the browser, it becomes:

<div class="Flash-sc-4y90bn-0 eTFOFY">
  <p>
    Bla
  </p>
</div>

If you have access, please see: https://github.com/github/docs-engineering/issues/1388
If not, open https://docs.github.com/en/rest/reference/repos and note how the "We've recently moved some of the REST API documentation ..." flash message changes color as the page re-renders in the client.

Note: As this is a public repo, please be careful not to include details or screenshots from unreleased GitHub products or features. In most cases, a good bug report should be able to describe the new component without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private Design Systems repo and link to it here.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[siddharthkp]

This is a great bug report! Thanks for taking the time, i'll find out what's up.