Fix Banner hydration error (#10882)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes[ hydration error following next
guidance](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr).
More info in the code comments

<img width="2032" alt="Screenshot 2023-10-04 at 3 29 52 PM"
src="https://github.com/Shopify/polaris/assets/4642404/5c1ce40e-2617-4d1c-8c27-a4fe9a20f5ea">

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

polaris.shopify.com/pages/examples/banner-critical.tsx

@@ -1,7 +1,26 @@
-import {Banner, Link} from '@shopify/polaris';
+import {Link} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerExample() {
   return (
     <Banner

polaris.shopify.com/pages/examples/banner-default.tsx

@@ -1,7 +1,25 @@
-import {Banner} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerExample() {
   return (
     <Banner title="Order archived" onDismiss={() => {}}>

polaris.shopify.com/pages/examples/banner-dismissible.tsx

@@ -1,7 +1,26 @@
-import {Banner, Link} from '@shopify/polaris';
+import {Link} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerExample() {
   return (
     <Banner onDismiss={() => {}}>

polaris.shopify.com/pages/examples/banner-in-a-card.tsx

@@ -1,7 +1,26 @@
-import {LegacyCard, TextContainer, Banner, Link} from '@shopify/polaris';
+import {LegacyCard, TextContainer, Link} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerExample() {
   return (
     <LegacyCard title="Online store dashboard" sectioned>

polaris.shopify.com/pages/examples/banner-in-a-modal.tsx

@@ -1,7 +1,26 @@
-import {Button, Modal, TextContainer, Banner} from '@shopify/polaris';
+import {Button, Modal, TextContainer} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
 import React, {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerInModalExample() {
   const [active, setActive] = useState(false);
 

polaris.shopify.com/pages/examples/banner-informational.tsx

@@ -1,7 +1,25 @@
-import {Banner} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerExample() {
   return (
     <Banner

polaris.shopify.com/pages/examples/banner-success.tsx

@@ -1,7 +1,25 @@
-import {Banner} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerExample() {
   return (
     <Banner

polaris.shopify.com/pages/examples/banner-warning.tsx

@@ -1,7 +1,26 @@
-import {Banner, List} from '@shopify/polaris';
+import {List} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerExample() {
   return (
     <Banner

polaris.shopify.com/pages/examples/banner-with-focus.tsx

@@ -1,7 +1,26 @@
-import {Banner, BannerHandles} from '@shopify/polaris';
-import React, {useEffect, useRef} from 'react';
+import {BannerHandles} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
+import React, {useRef, useEffect} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerWithFocusExample() {
   const banner = useRef<BannerHandles>(null);
 

polaris.shopify.com/pages/examples/banner-with-footer-call-to-action.tsx

@@ -1,7 +1,25 @@
-import {Banner} from '@shopify/polaris';
+import dynamic from 'next/dynamic';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
+/**
+ * For some reason when the Banner component is hydrated on the client the css
+ * variables are incorrect, causing the top border-radius of the component to
+ * not get set correctly. Disabling SSR via the documentation below resolves
+ * this hydration issue, but I'm not sure what the root cause of this problem is.
+ * This is a temporary fix until we can dig into things furthur
+ *
+ * To see the hydration error, remove lines 17-20 and import the Banner component
+ * as you normally would. Then load the page with the banner component example
+ * and open up the dev console.
+ *
+ * https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+ */
+const Banner = dynamic(
+  () => import('@shopify/polaris').then((polaris) => polaris.Banner),
+  {ssr: false},
+);
+
 function BannerExample() {
   return (
     <Banner