From d3f54adfe911143483cc2732a890a9d6e6f70106 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Wed, 6 Apr 2022 22:26:18 -0400
Subject: [PATCH 01/11] Update examples to sb 6.5.0-alpha.57

---
 examples/react-ts/package.json                |   8 +-
 examples/react/package.json                   |   8 +-
 examples/svelte/package.json                  |   8 +-
 examples/vue/package.json                     |   6 +-
 .../workspaces/packages/catalog/package.json  |   8 +-
 yarn.lock                                     | 939 +++++++++---------
 6 files changed, 510 insertions(+), 467 deletions(-)

diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json
index 1f74837b..f2cab1e4 100644
--- a/examples/react-ts/package.json
+++ b/examples/react-ts/package.json
@@ -18,11 +18,11 @@
     "react-dom": "^16.4.14"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.0-alpha.49",
-    "@storybook/addon-docs": "^6.5.0-alpha.49",
-    "@storybook/addon-essentials": "^6.5.0-alpha.49",
+    "@storybook/addon-a11y": "^6.5.0-alpha.57",
+    "@storybook/addon-docs": "^6.5.0-alpha.57",
+    "@storybook/addon-essentials": "^6.5.0-alpha.57",
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/react": "^6.5.0-alpha.49",
+    "@storybook/react": "^6.5.0-alpha.57",
     "@storybook/test-runner": "^0.0.4",
     "@vitejs/plugin-react": "^1.3.0",
     "http-server": "^14.1.0",
diff --git a/examples/react/package.json b/examples/react/package.json
index 565c5429..27cdfbac 100644
--- a/examples/react/package.json
+++ b/examples/react/package.json
@@ -18,11 +18,11 @@
     "react-dom": "^16.4.14"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.0-alpha.49",
-    "@storybook/addon-docs": "^6.5.0-alpha.49",
-    "@storybook/addon-essentials": "^6.5.0-alpha.49",
+    "@storybook/addon-a11y": "^6.5.0-alpha.57",
+    "@storybook/addon-docs": "^6.5.0-alpha.57",
+    "@storybook/addon-essentials": "^6.5.0-alpha.57",
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/react": "^6.5.0-alpha.49",
+    "@storybook/react": "^6.5.0-alpha.57",
     "@storybook/test-runner": "^0.0.4",
     "@vitejs/plugin-react": "^1.3.0",
     "http-server": "^14.1.0",
diff --git a/examples/svelte/package.json b/examples/svelte/package.json
index 1e0aa3b8..5e3cd33e 100644
--- a/examples/svelte/package.json
+++ b/examples/svelte/package.json
@@ -17,12 +17,12 @@
     "svelte": "^3.46.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.0-alpha.49",
-    "@storybook/addon-essentials": "^6.5.0-alpha.49",
-    "@storybook/addon-links": "^6.5.0-alpha.49",
+    "@storybook/addon-actions": "^6.5.0-alpha.57",
+    "@storybook/addon-essentials": "^6.5.0-alpha.57",
+    "@storybook/addon-links": "^6.5.0-alpha.57",
     "@storybook/addon-svelte-csf": "^1.1.0",
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/svelte": "^6.5.0-alpha.49",
+    "@storybook/svelte": "^6.5.0-alpha.57",
     "@storybook/test-runner": "^0.0.4",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.37",
     "@tsconfig/svelte": "^3.0.0",
diff --git a/examples/vue/package.json b/examples/vue/package.json
index 6e61d329..2b5d52cf 100644
--- a/examples/vue/package.json
+++ b/examples/vue/package.json
@@ -17,11 +17,11 @@
     "vue": "^3.2.25"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.0-alpha.49",
-    "@storybook/addon-essentials": "^6.5.0-alpha.49",
+    "@storybook/addon-a11y": "^6.5.0-alpha.57",
+    "@storybook/addon-essentials": "^6.5.0-alpha.57",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/test-runner": "^0.0.4",
-    "@storybook/vue3": "^6.5.0-alpha.49",
+    "@storybook/vue3": "^6.5.0-alpha.57",
     "@vitejs/plugin-vue": "^2.3.0",
     "http-server": "^14.1.0",
     "jest": "^27.5.1",
diff --git a/examples/workspaces/packages/catalog/package.json b/examples/workspaces/packages/catalog/package.json
index fa44ba2f..ba2d170c 100644
--- a/examples/workspaces/packages/catalog/package.json
+++ b/examples/workspaces/packages/catalog/package.json
@@ -15,11 +15,11 @@
     "react-dom": "^16.4.14"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.0-alpha.49",
-    "@storybook/addon-docs": "^6.5.0-alpha.49",
-    "@storybook/addon-essentials": "^6.5.0-alpha.49",
+    "@storybook/addon-a11y": "^6.5.0-alpha.57",
+    "@storybook/addon-docs": "^6.5.0-alpha.57",
+    "@storybook/addon-essentials": "^6.5.0-alpha.57",
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/react": "^6.5.0-alpha.49",
+    "@storybook/react": "^6.5.0-alpha.57",
     "vite": "2.9.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 756e13a2..189cfd34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3003,18 +3003,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@npm:^6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-a11y@npm:6.5.0-alpha.49"
-  dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/channels": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.5.0-alpha.49
+"@storybook/addon-a11y@npm:^6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-a11y@npm:6.5.0-alpha.57"
+  dependencies:
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/channels": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/theming": 6.5.0-alpha.57
     axe-core: ^4.2.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -3024,27 +3024,28 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 0bd460e7c17440e3729f79987b6a1a30c4d4c4720b260882cfc4168ec898249c17b2994d28df169413fbd19cf383dead71126947e8ea39a946edc63757f9abd2
+  checksum: 11db171ba1f762ff650acdc1f61a0c17b7fbac1d32ef050f50ac63c2bd16934430d5af7f587b1d496abd6e56c43f1017ad8ed158deb38f6719ea868c8a1f87e3
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:6.5.0-alpha.49, @storybook/addon-actions@npm:^6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-actions@npm:6.5.0-alpha.49"
+"@storybook/addon-actions@npm:6.5.0-alpha.57, @storybook/addon-actions@npm:^6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-actions@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/theming": 6.5.0-alpha.57
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -3058,28 +3059,28 @@ __metadata:
     util-deprecate: ^1.0.2
     uuid-browser: ^3.1.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 52ff581e3034ae1d3f146182787419e32554ce9e2c6f6bc85287b5dd393fb96b627521fb945f2bc5a0fa9148c37bbfc3975f629f4c964b4d5917773b69db7dfd
+  checksum: ff3dd013f841ad20d1439ed0d72fabd5bb2cd5de03b7f5a74e38caa96ba6c03f447ead2f701faaec1df0c840e5fe7ea409205e9c21ba664f453f5395f9da62d1
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-backgrounds@npm:6.5.0-alpha.49"
+"@storybook/addon-backgrounds@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-backgrounds@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/theming": 6.5.0-alpha.57
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -3087,113 +3088,108 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 67a06f52836050ebd2055c1da6d3131a7b4c72d9e40fd8f64f9b6836b5470b09c1ce5f3a22af398262efc8981541b7fe3d8b4edb85970232b07f84fc0901d5c7
+  checksum: 456cee21ce97938da3173ab988541700103e1a951a2d142baf902435595e6b382fa08a1e6f4bb6736120b8313965e13f45fe05dc0c899aff106686f9c84a21b1
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-controls@npm:6.5.0-alpha.49"
+"@storybook/addon-controls@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-controls@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-common": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/node-logger": 6.5.0-alpha.49
-    "@storybook/store": 6.5.0-alpha.49
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/node-logger": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.57
     core-js: ^3.8.2
     lodash: ^4.17.21
     ts-dedent: ^2.0.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 3d6f6896f7fc360fc2d7e5773bc14b3dc7d4f08c5c110abde7b15102b1c08548e57ac56d9cc62eec4ee7f4a7066eb42a37876fc6f09e7d7884a94da9be673089
+  checksum: 8cb3f14cb36e20ff9ffc5d6ea848545e2a6cd305a30b54813cff88af5de95a87d6193953f54ef14e913d7155a7561cc3e1e097039b28ea8a68a8f225aa4f025e
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:6.5.0-alpha.49, @storybook/addon-docs@npm:^6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-docs@npm:6.5.0-alpha.49"
+"@storybook/addon-docs@npm:6.5.0-alpha.57, @storybook/addon-docs@npm:^6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-docs@npm:6.5.0-alpha.57"
   dependencies:
     "@babel/plugin-transform-react-jsx": ^7.12.12
     "@babel/preset-env": ^7.12.11
     "@jest/transform": ^26.6.2
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-common": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/docs-tools": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/docs-tools": 6.5.0-alpha.57
     "@storybook/mdx1-csf": canary
-    "@storybook/node-logger": 6.5.0-alpha.49
-    "@storybook/postinstall": 6.5.0-alpha.49
-    "@storybook/preview-web": 6.5.0-alpha.49
-    "@storybook/source-loader": 6.5.0-alpha.49
-    "@storybook/store": 6.5.0-alpha.49
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/node-logger": 6.5.0-alpha.57
+    "@storybook/postinstall": 6.5.0-alpha.57
+    "@storybook/preview-web": 6.5.0-alpha.57
+    "@storybook/source-loader": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.57
+    babel-loader: ^8.0.0
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
     lodash: ^4.17.21
+    regenerator-runtime: ^0.13.7
     remark-external-links: ^8.0.0
     remark-slug: ^6.0.0
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
     "@storybook/mdx2-csf": "*"
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-    webpack: "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
-    "@storybook/builder-webpack4":
-      optional: true
-    "@storybook/builder-webpack5":
-      optional: true
     "@storybook/mdx2-csf":
       optional: true
     react:
       optional: true
     react-dom:
       optional: true
-    webpack:
-      optional: true
-  checksum: b97738e1fd563eda6f17480061904053c04302ed099030cc9008456569f04892effb5e74d943e6acc3312ea02200d76269f0cf1ea06bf432c2874b7351ad094c
-  languageName: node
-  linkType: hard
-
-"@storybook/addon-essentials@npm:^6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-essentials@npm:6.5.0-alpha.49"
-  dependencies:
-    "@storybook/addon-actions": 6.5.0-alpha.49
-    "@storybook/addon-backgrounds": 6.5.0-alpha.49
-    "@storybook/addon-controls": 6.5.0-alpha.49
-    "@storybook/addon-docs": 6.5.0-alpha.49
-    "@storybook/addon-measure": 6.5.0-alpha.49
-    "@storybook/addon-outline": 6.5.0-alpha.49
-    "@storybook/addon-toolbars": 6.5.0-alpha.49
-    "@storybook/addon-viewport": 6.5.0-alpha.49
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/core-common": 6.5.0-alpha.49
-    "@storybook/node-logger": 6.5.0-alpha.49
+  checksum: 2cd8aa42eb7a3ef1b84d67ff68d4471d2a65f6b2b8adab0267fada72153b32e93605949fc38172dc8a2941f3585a8e6a18c64b6e597884edc9462a1a00702631
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-essentials@npm:^6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-essentials@npm:6.5.0-alpha.57"
+  dependencies:
+    "@storybook/addon-actions": 6.5.0-alpha.57
+    "@storybook/addon-backgrounds": 6.5.0-alpha.57
+    "@storybook/addon-controls": 6.5.0-alpha.57
+    "@storybook/addon-docs": 6.5.0-alpha.57
+    "@storybook/addon-measure": 6.5.0-alpha.57
+    "@storybook/addon-outline": 6.5.0-alpha.57
+    "@storybook/addon-toolbars": 6.5.0-alpha.57
+    "@storybook/addon-viewport": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/node-logger": 6.5.0-alpha.57
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
@@ -3234,19 +3230,19 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: b7f43bf960dde458db1b7a9eed441a2611a54189b09cf80254af570c739d0c5d1edb108ce5bc433a98428a688995a189ade4a14a234e2ca473529055c3c00c26
+  checksum: 2406e597ff4f8a7afb15223bfc5d7f5808938bda239c6c225147eb8f2f6c409eae035736e35312ff81bf4e91793ccd2ab1bc57f4b126185f394ccc627a8b24ed
   languageName: node
   linkType: hard
 
-"@storybook/addon-links@npm:^6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-links@npm:6.5.0-alpha.49"
+"@storybook/addon-links@npm:^6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-links@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/router": 6.5.0-alpha.57
     "@types/qs": ^6.9.5
     core-js: ^3.8.2
     global: ^4.4.0
@@ -3255,64 +3251,64 @@ __metadata:
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: ff5a32de6d6dbc6908dd0b3ad81a71ac679b9c5b8033019d3ca47ba389657183910b320f4f0ac9f816937f3c31913a7cf4f0257306953d03f426b4b058240f19
+  checksum: 796dd7037ddb285659c88f2d4ab9da688f5c0e4c53d2aa0e843c597370ec4b6294d0815094e376263daa12832b91506d1f67b342b931b94a6e44d028583b01cb
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-measure@npm:6.5.0-alpha.49"
+"@storybook/addon-measure@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-measure@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
     core-js: ^3.8.2
     global: ^4.4.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: dd034895b79f0f0ee7256b4621cb7ad5d8f488c2073b0a9873fffae38e5dae2c59489790fb9571bcd7047f1d0a9d8f0de0f84fb89e2a8b305ed37dda12433bcd
+  checksum: e284e98cc185568e579c88e8112b25b6a0872e97d67b7d6b74c0fd3ca10157743aa3c0e027d7e5f0a9f7cf690f2dcf3a72b0437901239285a78d59a5d7c3b9d9
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-outline@npm:6.5.0-alpha.49"
+"@storybook/addon-outline@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-outline@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
     core-js: ^3.8.2
     global: ^4.4.0
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 6890ac9ce1f76e5efdbb0e08aedbd0dd5aad2e09fce33abdda1eb8ace58419f5aa526b905282ce8066bfa999c2295b9d3894f435c5b937afa07dfca096ff7d61
+  checksum: 57907335040fcb32fb0335560e65d3262227e91043e4b62022def8302b0e75ab0bb005c424c208b5fc04d6e9a9309d5cb6178117513d4c90c9405f3f64741fef
   languageName: node
   linkType: hard
 
@@ -3345,52 +3341,53 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-toolbars@npm:6.5.0-alpha.49"
+"@storybook/addon-toolbars@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-toolbars@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.57
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 1fdff9caa6dcc97b91c6a1eb9117234df0630c14222759f16aa13ddb2f3d63bde40496762b68649c22a2174b8f4d2f5ccab3a9388a2c0ed326d3df4a0c55345f
+  checksum: fef82a50c94a14a15f1f29ffca0684e16f24335d50c6a50c5b5002bed1a64fa16b376cdf433a6edddbb114b04abc75d20eca9b28b681359930f94582bae05456
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addon-viewport@npm:6.5.0-alpha.49"
+"@storybook/addon-viewport@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addon-viewport@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.57
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
     prop-types: ^15.7.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 66a62ad630c7f8ee4334ad6052fce3970459d531eaba1d5aacd909fd8768e6a5f09ffb4dfb2bfef3625fa8df39b3684bc753cf363cad2c096625231865bde43b
+  checksum: 7f935fc13f1284a1da7f63ef4b891320df9e34d603f119dfe855fd1bec4e125ba68c200fd89e9ea670b22a449cd2887f6520526631d2af8bda2da9af8d764969
   languageName: node
   linkType: hard
 
@@ -3414,25 +3411,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addons@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/addons@npm:6.5.0-alpha.49"
+"@storybook/addons@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/addons@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/channels": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.5.0-alpha.49
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/channels": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/router": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.57
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 2bad568e252ebed405dba23fde157413458ee5dc85e54a11869e511962824cdabd83ace35e3a01070120a179885f0c5a08650a074b976240188cb42a7d6b34f6
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 4c8c5040070758aba4b11ef7cf1a116b2d491d9ed96e4bbe0a8937754c52086cca2047dd6d499442e36c859c58c241ad15543b9ac9780d7118bd822c54dfcae8
   languageName: node
   linkType: hard
 
@@ -3467,17 +3464,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/api@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/api@npm:6.5.0-alpha.49"
+"@storybook/api@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/api@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/channels": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.5.0-alpha.49
+    "@storybook/channels": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/router": 6.5.0-alpha.57
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/theming": 6.5.0-alpha.57
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -3489,9 +3486,9 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 3bf4a478073ef7929c3d1539cdc32d08cbf68d00c4f7ce8e2bfd15bbe406c436e40a4566df5c16c063b08dc7adb609611587b717d884ef58ac7043256f8a8679
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 7bb1d0c94228d523dbc890609aed04d0e0b486eb7006663bc7f1079690d8833c9a816dc393f3feec85b78274d0655046517919f6ca0097bb2033c229ea729499
   languageName: node
   linkType: hard
 
@@ -3520,27 +3517,27 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-webpack4@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/builder-webpack4@npm:6.5.0-alpha.49"
+"@storybook/builder-webpack4@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/builder-webpack4@npm:6.5.0-alpha.57"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/channel-postmessage": 6.5.0-alpha.49
-    "@storybook/channels": 6.5.0-alpha.49
-    "@storybook/client-api": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-common": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/node-logger": 6.5.0-alpha.49
-    "@storybook/preview-web": 6.5.0-alpha.49
-    "@storybook/router": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/channel-postmessage": 6.5.0-alpha.57
+    "@storybook/channels": 6.5.0-alpha.57
+    "@storybook/client-api": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/node-logger": 6.5.0-alpha.57
+    "@storybook/preview-web": 6.5.0-alpha.57
+    "@storybook/router": 6.5.0-alpha.57
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.49
-    "@storybook/theming": 6.5.0-alpha.49
-    "@storybook/ui": 6.5.0-alpha.49
+    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/ui": 6.5.0-alpha.57
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/webpack": ^4.41.26
     autoprefixer: ^9.8.6
@@ -3572,40 +3569,40 @@ __metadata:
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.2.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 2f897afd5fb4942f7c113231542e9e883755c5edcc8eba2ad41ec75ef6765667d39526839d984b98008fbfdda398b605f2b49fe7514ca9aefd3bad8429f7e535
+  checksum: 63efefdaff24dc8fd03c5302d0b788e073871a82525349c94344bb85d7473597ce5db3ef672935f4e3fbed03c5d30f14a9a42c46d88cdd354d36fcebbf404906
   languageName: node
   linkType: hard
 
-"@storybook/channel-postmessage@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/channel-postmessage@npm:6.5.0-alpha.49"
+"@storybook/channel-postmessage@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/channel-postmessage@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/channels": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
+    "@storybook/channels": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
     telejson: ^5.3.3
-  checksum: dacbf688c02171b29f330859cb077f1587ec2efd17fb6dcdd5f4a3c225cb365bbcd1820e572c9ef17ef9a5155b3b146d1288c2ea1f2eb9357566647c250e02bb
+  checksum: 48fef8fc91962d767aa6fd5c0c0efde4a91891859205a421043f2648f36b2733086c257a46e85f325842304ccef7030e28a3716555fbb28a68559d76ae2f4ef8
   languageName: node
   linkType: hard
 
-"@storybook/channel-websocket@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/channel-websocket@npm:6.5.0-alpha.49"
+"@storybook/channel-websocket@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/channel-websocket@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/channels": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
+    "@storybook/channels": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
     core-js: ^3.8.2
     global: ^4.4.0
     telejson: ^5.3.3
-  checksum: eb524d657753e1ef16e68ad4b7e6c46859995eabc79cb768a1be4db06699e67f95f9b854a206991a4fbf6f2769a57513935fe388f9354c4b099056aac1b3046d
+  checksum: cdff9920fc9e36ba77769d62e2573c943cb0e21b4b1d4c0dde786b20188b89ccdeaa1ffb24e0011179d22ea2a4cb5dc5228bca20ecabfdd21ef82b6b7d2fafab
   languageName: node
   linkType: hard
 
@@ -3620,28 +3617,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/channels@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/channels@npm:6.5.0-alpha.49"
+"@storybook/channels@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/channels@npm:6.5.0-alpha.57"
   dependencies:
     core-js: ^3.8.2
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
-  checksum: 4edf39cbab6e8311bea144b2d4e645e0186dac832edf13f93af9bd95238721fae06d0a4f9d399b6bacdeb82126e281f687ef87913ee9decdbf0b588e224dd4dc
+  checksum: 0884a75fff69f7f6cdb113327f6a8d6efac92f78b8fb1f03ca1417812ae3d2fab16154090a65ec6dd9798d442f8e9578b33b33a545083ec00f95b7af06b6a9ce
   languageName: node
   linkType: hard
 
-"@storybook/client-api@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/client-api@npm:6.5.0-alpha.49"
+"@storybook/client-api@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/client-api@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/channel-postmessage": 6.5.0-alpha.49
-    "@storybook/channels": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/channel-postmessage": 6.5.0-alpha.57
+    "@storybook/channels": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/store": 6.5.0-alpha.57
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -3656,9 +3653,9 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: f135071a1d21e295c118829bf914802c2ea1d3f9787924da4c69e72bfe3e7e3adae65995b1044e391d5994191861e3c36132a404da3c7eb23a3426ba9bbad3ff
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 269a6b3e4a08a7302a649dfb2e3bac6f651b769f8dc383d4a5df127dda8f1fe32bd0c8534eee0343d274ca3c4de4c6e03d71ad0522beba8afb34b698ad07f6e1
   languageName: node
   linkType: hard
 
@@ -3672,46 +3669,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/client-logger@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/client-logger@npm:6.5.0-alpha.49"
+"@storybook/client-logger@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/client-logger@npm:6.5.0-alpha.57"
   dependencies:
     core-js: ^3.8.2
     global: ^4.4.0
-  checksum: e3d8fb270d535c08058ded3cc1dabab9b2ea6160ea1c2d889ad5445e8624e532b01ac55d4e1f1b452dafdfbd431b14f66d746e6fa350b4c2cf1bc876e17ed96f
+  checksum: 4ae893328c3a9e7660c642c2614fed1898957f8524e3fcb8f74d3b5ecbe07252eb7dda0aa64f08f531e9b7a0195341961d1dca0ae141b1fa018e118fba81e207
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/components@npm:6.5.0-alpha.49"
+"@storybook/components@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/components@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/theming": 6.5.0-alpha.57
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: d3e277f6db66ce124a0dc2b1d25363cce70cce2d3df30de03dee3af0195811bb67c29f987ace659f4e1ccb9546ec0ab6a0cbf816ba4c59d976f4339b6ae02fbb
-  languageName: node
-  linkType: hard
-
-"@storybook/core-client@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/core-client@npm:6.5.0-alpha.49"
-  dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/channel-postmessage": 6.5.0-alpha.49
-    "@storybook/channel-websocket": 6.5.0-alpha.49
-    "@storybook/client-api": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/preview-web": 6.5.0-alpha.49
-    "@storybook/store": 6.5.0-alpha.49
-    "@storybook/ui": 6.5.0-alpha.49
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 6f7b81f613e018d0091bcc6b16a796ef32350a0ab3991e595b66de7d793bf165f8871caf25c5e239b7a7b83406f4087ba608ebc531c2c587035cbfbba6f84ee1
+  languageName: node
+  linkType: hard
+
+"@storybook/core-client@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/core-client@npm:6.5.0-alpha.57"
+  dependencies:
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/channel-postmessage": 6.5.0-alpha.57
+    "@storybook/channel-websocket": 6.5.0-alpha.57
+    "@storybook/client-api": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/preview-web": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/ui": 6.5.0-alpha.57
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -3723,19 +3720,19 @@ __metadata:
     unfetch: ^4.2.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     webpack: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 89118a1357faf75004bd92b063b1f596cc5868a9d4b9cb47e07eddf49b68c15f4a4c1b40375f8b8709e2ae9f4665983283c57a06206357c2bddbe79ff00197de
+  checksum: b9db72e53bb82a779203347c13db29cb43d393cfc1fea203839dfc6feade1a59281d4e6a0bf0dc1c6c1cb7c7959091d53d670de56b8fe8a558d565f470d9c3a5
   languageName: node
   linkType: hard
 
-"@storybook/core-common@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/core-common@npm:6.5.0-alpha.49"
+"@storybook/core-common@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/core-common@npm:6.5.0-alpha.57"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-proposal-class-properties": ^7.12.1
@@ -3759,7 +3756,7 @@ __metadata:
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
     "@babel/register": ^7.12.1
-    "@storybook/node-logger": 6.5.0-alpha.49
+    "@storybook/node-logger": 6.5.0-alpha.57
     "@storybook/semver": ^7.3.2
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/pretty-hrtime": ^1.0.0
@@ -3788,12 +3785,12 @@ __metadata:
     util-deprecate: ^1.0.2
     webpack: 4
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: dc245a4c870fc327e2275e6b10381b248a8e22821a4ae99956a0ac244c8bab8e7d244224f726993a704af6180d9c8ee5aa8656400f2bb051bef4c2889f515de2
+  checksum: a894c6e44c8d1f04898e0650b39dca0498c8ab57267077b6d124682c61e639d1520e1bb4b891969d2dfee340cab3ca54422e9db7ebcda97ec5d4e0c1f9ed84cf
   languageName: node
   linkType: hard
 
@@ -3806,30 +3803,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/core-events@npm:6.5.0-alpha.49"
+"@storybook/core-events@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/core-events@npm:6.5.0-alpha.57"
   dependencies:
     core-js: ^3.8.2
-  checksum: 5ef4eedb67e6036846c3fafb1b676cc767c9d40e61148f6f87930095b1cc506f7b8ffb3e709075ef652e4ad7a97eda2d5c453c64874acee39a80b3173fc4a865
+  checksum: 06fa8e1dbd9d47c8937eed2dc220afbdced06aad2df0ec9e7c3f7e1c62b8789a00bb4ca36feac0f2bb97383f628f988d159265e4adb6a6e146e5bc219d22a93c
   languageName: node
   linkType: hard
 
-"@storybook/core-server@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/core-server@npm:6.5.0-alpha.49"
+"@storybook/core-server@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/core-server@npm:6.5.0-alpha.57"
   dependencies:
     "@discoveryjs/json-ext": ^0.5.3
-    "@storybook/builder-webpack4": 6.5.0-alpha.49
-    "@storybook/core-client": 6.5.0-alpha.49
-    "@storybook/core-common": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/csf-tools": 6.5.0-alpha.49
-    "@storybook/manager-webpack4": 6.5.0-alpha.49
-    "@storybook/node-logger": 6.5.0-alpha.49
+    "@storybook/builder-webpack4": 6.5.0-alpha.57
+    "@storybook/core-client": 6.5.0-alpha.57
+    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/csf-tools": 6.5.0-alpha.57
+    "@storybook/manager-webpack4": 6.5.0-alpha.57
+    "@storybook/node-logger": 6.5.0-alpha.57
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.49
+    "@storybook/store": 6.5.0-alpha.57
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/node-fetch": ^2.5.7
     "@types/pretty-hrtime": ^1.0.0
@@ -3864,8 +3861,8 @@ __metadata:
     ws: ^8.2.3
     x-default-browser: ^0.4.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     "@storybook/builder-webpack5":
       optional: true
@@ -3873,19 +3870,19 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: 92737fa84576d61140661b0b7151cec9fbca2eee69a8f143538cbfe4d60275b2c22c7349420b70c56d54f4d779756f697a190cad7fcd67bdad9efe215f319c48
+  checksum: 3a2aebfc606b8dc2111685a33358be29b354f1f5a9a04e760327570a7aaad7d41f2ec6c802b484229ea2deafc766f82325f2e42fe49ae94957d431a302c2807b
   languageName: node
   linkType: hard
 
-"@storybook/core@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/core@npm:6.5.0-alpha.49"
+"@storybook/core@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/core@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/core-client": 6.5.0-alpha.49
-    "@storybook/core-server": 6.5.0-alpha.49
+    "@storybook/core-client": 6.5.0-alpha.57
+    "@storybook/core-server": 6.5.0-alpha.57
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     webpack: "*"
   peerDependenciesMeta:
     "@storybook/builder-webpack5":
@@ -3894,13 +3891,13 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: d1eb7fe2ed00d7d807df6428367eb2b4a6455c2c947d3ad2bedd66e3ed7d8c0c6f4243b978fd62b823b9b1fc39510f3e297a2d477bf48977e7fa2c6131b78e17
+  checksum: 3900560dd52b6308b912143a53116119068ec8f2219523740a87971c01f6c04dc4292d651f405fd1bd08c20105d3d3bfc45cac3e176be275767cbb9be00b9822
   languageName: node
   linkType: hard
 
-"@storybook/csf-tools@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/csf-tools@npm:6.5.0-alpha.49"
+"@storybook/csf-tools@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/csf-tools@npm:6.5.0-alpha.57"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/generator": ^7.12.11
@@ -3909,7 +3906,7 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/traverse": ^7.12.11
     "@babel/types": ^7.12.11
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
     "@storybook/mdx1-csf": canary
     core-js: ^3.8.2
     fs-extra: ^9.0.1
@@ -3921,7 +3918,7 @@ __metadata:
   peerDependenciesMeta:
     "@storybook/mdx2-csf":
       optional: true
-  checksum: 0292639132729f45f4828c1a50886e262157192ef1311d92c48adc0f609d6b360b4a5764682075e398d48b59fbcd589d11c180e6bc4d4865288e2dfafd195091
+  checksum: 69811d6d63b491f28b7d50edc04f0562a5fd96efdf1c113f15173b7792341b6b0ab4fbc92a15d764fd7f2a7c7db5d1e498616fcb4256663bdbb3d041afa76e4f
   languageName: node
   linkType: hard
 
@@ -3981,6 +3978,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf@npm:0.0.2--canary.7c6c115.0":
+  version: 0.0.2--canary.7c6c115.0
+  resolution: "@storybook/csf@npm:0.0.2--canary.7c6c115.0"
+  dependencies:
+    lodash: ^4.17.15
+  checksum: 7ab70cc589d8e1d19abaabd62244dd47d23f79b6c6568cbb74ea5cb2a426accded46ac31e7683ea5ee23b91b9545968896bf3f3a37494e3770500d4f3555764f
+  languageName: node
+  linkType: hard
+
 "@storybook/csf@npm:0.0.2--canary.87bc651.0":
   version: 0.0.2--canary.87bc651.0
   resolution: "@storybook/csf@npm:0.0.2--canary.87bc651.0"
@@ -3990,34 +3996,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/docs-tools@npm:6.5.0-alpha.49"
+"@storybook/docs-tools@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/docs-tools@npm:6.5.0-alpha.57"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.5.0-alpha.49
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/store": 6.5.0-alpha.57
     core-js: ^3.8.2
     doctrine: ^3.0.0
     lodash: ^4.17.21
     regenerator-runtime: ^0.13.7
-  checksum: ba181f57b60187e985eab9c3ce126d9d3ef3dd084339a8e1cf4e14617c4ccafff8a4f74b797afa23736aad30bff47f509770fe725fef5182f263262a14bf7fba
+  checksum: 629caac238981c6b5b6d22b0e1e8727818f4a66b718266a7bae18147a3af89aa806521fc97dc352847cbd5808f2a813a999591381ed8e3308a1339ef3f51f983
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack4@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/manager-webpack4@npm:6.5.0-alpha.49"
+"@storybook/manager-webpack4@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/manager-webpack4@npm:6.5.0-alpha.57"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/core-client": 6.5.0-alpha.49
-    "@storybook/core-common": 6.5.0-alpha.49
-    "@storybook/node-logger": 6.5.0-alpha.49
-    "@storybook/theming": 6.5.0-alpha.49
-    "@storybook/ui": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/core-client": 6.5.0-alpha.57
+    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/node-logger": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/ui": 6.5.0-alpha.57
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/webpack": ^4.41.26
     babel-loader: ^8.0.0
@@ -4045,12 +4051,12 @@ __metadata:
     webpack-dev-middleware: ^3.7.3
     webpack-virtual-modules: ^0.2.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 65b1ddb51dbed06981ca796862a67e993d210576f00a5faa452b85beecd5de99ab6766796d3db9d81925bcfa9ee20fef74d511f96e0a4d311c806dea26bec7db
+  checksum: 34c29a6c04c9ea475bdfeb18347c7e091cf094594acea6cc2f9eae0261a4f8ac352b6370f54356f6a1f3eb8df94191d759a8382322982be7268e7d45f724a416
   languageName: node
   linkType: hard
 
@@ -4073,38 +4079,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/node-logger@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/node-logger@npm:6.5.0-alpha.49"
+"@storybook/node-logger@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/node-logger@npm:6.5.0-alpha.57"
   dependencies:
     "@types/npmlog": ^4.1.2
     chalk: ^4.1.0
     core-js: ^3.8.2
     npmlog: ^5.0.1
     pretty-hrtime: ^1.0.3
-  checksum: 8122236f62c69902b24a1277254ecbaab9a6bfe2e60cd53a683a536573ec019b88cd3e8809fd36cc14d308499f35bc981367f3ff70f4dd4f132f5758584a5746
+  checksum: bc932679a277f3abd2de1b3a96409618424a9235dd87bfd44a03cfef31fc3c1792ea60b14cc946adce5f36247ee731f73ae5b5bb68619b20edb16d3919ac26e7
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/postinstall@npm:6.5.0-alpha.49"
+"@storybook/postinstall@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/postinstall@npm:6.5.0-alpha.57"
   dependencies:
     core-js: ^3.8.2
-  checksum: 528b55a834982f6f4e3d9cbc9c02038739e90963299b235c103c2e1bde755facd6372b61fdb95c22df1457e287bbd9291fd4c667a76b888c2743143a6b1181e0
+  checksum: e9a6a4a5c3a20867a47b8c972ff317888b070f23a659aea8b3c1811f8808a575cbf0ef8de051aa32d7147fc1fe2a4d7c7edb9a6fd9bb34d5f7a30c7c702a9c66
   languageName: node
   linkType: hard
 
-"@storybook/preview-web@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/preview-web@npm:6.5.0-alpha.49"
+"@storybook/preview-web@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/preview-web@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/channel-postmessage": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/channel-postmessage": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/store": 6.5.0-alpha.57
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
     global: ^4.4.0
@@ -4116,9 +4122,9 @@ __metadata:
     unfetch: ^4.2.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: cd40f233deffa5feab1d634417031901eaf5dd89e770b2f7aa3210fcfafdda99852e37d4b39b644c5288d70cf69e22af96d2288f383071ef18b5607b14f4f1a8
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: a22f966f3c40805e4213083233852c821fe0326028b2cffd3207f7bd1fbe61197d2315cbe291bd4a9779b6f8ebcd35bf17b8fb973bb8ff899bd3993b337ce682
   languageName: node
   linkType: hard
 
@@ -4140,23 +4146,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:^6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/react@npm:6.5.0-alpha.49"
+"@storybook/react@npm:^6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/react@npm:6.5.0-alpha.57"
   dependencies:
     "@babel/preset-flow": ^7.12.1
     "@babel/preset-react": ^7.12.10
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core": 6.5.0-alpha.49
-    "@storybook/core-common": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/docs-tools": 6.5.0-alpha.49
-    "@storybook/node-logger": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core": 6.5.0-alpha.57
+    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/docs-tools": 6.5.0-alpha.57
+    "@storybook/node-logger": 6.5.0-alpha.57
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.49
+    "@storybook/store": 6.5.0-alpha.57
     "@types/estree": ^0.0.51
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
@@ -4181,8 +4187,8 @@ __metadata:
   peerDependencies:
     "@babel/core": ^7.11.5
     jest-specific-snapshot: ^4.0.0
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     require-from-string: ^2.0.2
   peerDependenciesMeta:
     "@babel/core":
@@ -4201,7 +4207,7 @@ __metadata:
     build-storybook: bin/build.js
     start-storybook: bin/index.js
     storybook-server: bin/index.js
-  checksum: 8c09ab0964521e26e565ec1f2a4e70082dad2cfcefe94e7f08d845c93dd322bd7f4347ae7723a238146ad0ad35686b8a3b455097e5390f087c987344860c907b
+  checksum: 906236d17fd4aa8f98542df13a389699efda739d4b24e717f7b6e8a513bd5330ccc4d97478bdc7833a3c0ca6ce7b6c1ea396e3c8f29d423e89c8a51593ec8a28
   languageName: node
   linkType: hard
 
@@ -4226,17 +4232,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/router@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/router@npm:6.5.0-alpha.49"
+"@storybook/router@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/router@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/client-logger": 6.5.0-alpha.49
+    "@storybook/client-logger": 6.5.0-alpha.57
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 22e0426bd03da64402940cabd49c6c245cdfd2b26191046c0ebb180d47468afa66fbe05f44c5c01876f482ac823a6bb42d9719047c87c8f91a014e37126396d7
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 705ad7a36235cbdcf86edf53ceca67a178e9b7222ec2ab1047b475602d37b2032d525b421af0023b7ac657073b623202af48548da98c97cf1854bba2422b51e9
   languageName: node
   linkType: hard
 
@@ -4252,13 +4258,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/source-loader@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/source-loader@npm:6.5.0-alpha.49"
+"@storybook/source-loader@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/source-loader@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
     core-js: ^3.8.2
     estraverse: ^5.2.0
     global: ^4.4.0
@@ -4267,9 +4273,9 @@ __metadata:
     prettier: ">=2.2.1 <=2.3.0"
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 791e415900f3fe8e578e6591a10417275578440a9ad609305e314e214c9111a67c03a404ca9e22a2c9c3253d8fac00fdcadc9fce0e4ac1d76d7fcd57d570d307
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 847bc20271268c9fbc70228ff37e97f943a81f29b73318155a866ae6d7dceb422ad208f690a345d92a4a46334cb242c3a0aa6dd7b5b9ff2bd5968583d8d9d03b
   languageName: node
   linkType: hard
 
@@ -4294,14 +4300,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/store@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/store@npm:6.5.0-alpha.49"
+"@storybook/store@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/store@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -4314,24 +4320,24 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: da8389b7d7a2b869500bf43edc35ffdf5f4273eb3a85632dbe99c086b0bd94d060fb1fa036adf18da92a8c10e7facdf963af5f3ae524148a23c6a4da7d0c8cda
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: af2d6446f6b2a0376b8868978347cc069b6f7815b8f2db6317c08a38a0a0e1461a4d9b226f008c8ebfa9b22b6fb8a388f4a68e0c21042266b70389d4ea5b06f9
   languageName: node
   linkType: hard
 
-"@storybook/svelte@npm:^6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/svelte@npm:6.5.0-alpha.49"
+"@storybook/svelte@npm:^6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/svelte@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/core": 6.5.0-alpha.49
-    "@storybook/core-common": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/docs-tools": 6.5.0-alpha.49
-    "@storybook/node-logger": 6.5.0-alpha.49
-    "@storybook/store": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/core": 6.5.0-alpha.57
+    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/docs-tools": 6.5.0-alpha.57
+    "@storybook/node-logger": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.57
     core-js: ^3.8.2
     global: ^4.4.0
     loader-utils: ^2.0.0
@@ -4341,7 +4347,7 @@ __metadata:
     regenerator-runtime: ^0.13.7
     sveltedoc-parser: 4.1.0
     ts-dedent: ^2.0.0
-    webpack: 4
+    webpack: ">=4.0.0 <6.0.0"
   peerDependencies:
     "@babel/core": "*"
     svelte: ^3.1.0
@@ -4350,7 +4356,7 @@ __metadata:
     build-storybook: bin/build.js
     start-storybook: bin/index.js
     storybook-server: bin/index.js
-  checksum: 190ce79b764fd4cd5707cc676a5d16aa38b64b43c37ed85e947711cc0d64ff340bf7cea6cd8560e55f4590a84b97816bb93060428132b7ba1abf12d6f79596d4
+  checksum: dcd0f211033c083900ef6c5900821da97d5b22b368d54c8b5f93d7d116213ef7b2d41efa0100e29edf240db42cacad9d58a1fb8c09bcbb47dd7de6b9e875f7e0
   languageName: node
   linkType: hard
 
@@ -4399,53 +4405,53 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/theming@npm:6.5.0-alpha.49"
+"@storybook/theming@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/theming@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/client-logger": 6.5.0-alpha.49
+    "@storybook/client-logger": 6.5.0-alpha.57
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: c492bccedf2945541cda003030ce9fde761a4120bcb30e71cb9194bdc6e57d2049eafd2771642d8ac16ce0c14b5971f63612b996452b9b549c1e9033632f748f
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 76d88c7a60651b2dca986dda80e98ab13c574d10b9dde44351a1fe08861a063ca59ef6b2b99473cdf9c1331fbe23a56ae4fd7a35b8dbf52a6daa8a007ad387ff
   languageName: node
   linkType: hard
 
-"@storybook/ui@npm:6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/ui@npm:6.5.0-alpha.49"
+"@storybook/ui@npm:6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/ui@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/api": 6.5.0-alpha.49
-    "@storybook/channels": 6.5.0-alpha.49
-    "@storybook/client-logger": 6.5.0-alpha.49
-    "@storybook/components": 6.5.0-alpha.49
-    "@storybook/core-events": 6.5.0-alpha.49
-    "@storybook/router": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.57
+    "@storybook/channels": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/components": 6.5.0-alpha.57
+    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/router": 6.5.0-alpha.57
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.5.0-alpha.49
+    "@storybook/theming": 6.5.0-alpha.57
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
     resolve-from: ^5.0.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 140fdcecd7da5d34a7db5727abb0fd0bccdf7abc9e5961c20daac6640d3998c9ee1d0eaa22e694b1da5a214e6017b84c2f477ea5bc1756607ede264bdbb5cc04
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 41e66bf973c3ae23a805d963617d0aab9aade9e44d0e66bcf2df0dd3781adebf3280df87c06fcd181032cc716a5fec4372e6a4ed6a83f0597a855ad16dfb7816
   languageName: node
   linkType: hard
 
-"@storybook/vue3@npm:^6.5.0-alpha.49":
-  version: 6.5.0-alpha.49
-  resolution: "@storybook/vue3@npm:6.5.0-alpha.49"
+"@storybook/vue3@npm:^6.5.0-alpha.57":
+  version: 6.5.0-alpha.57
+  resolution: "@storybook/vue3@npm:6.5.0-alpha.57"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.49
-    "@storybook/core": 6.5.0-alpha.49
-    "@storybook/core-common": 6.5.0-alpha.49
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/docs-tools": 6.5.0-alpha.49
-    "@storybook/store": 6.5.0-alpha.49
+    "@storybook/addons": 6.5.0-alpha.57
+    "@storybook/core": 6.5.0-alpha.57
+    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/csf": 0.0.2--canary.7c6c115.0
+    "@storybook/docs-tools": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.57
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -4459,7 +4465,7 @@ __metadata:
     vue-docgen-api: ^4.44.15
     vue-docgen-loader: ^1.5.0
     vue-loader: ^16.0.0
-    webpack: 4
+    webpack: ">=4.0.0 <6.0.0"
   peerDependencies:
     "@babel/core": "*"
     "@vue/compiler-sfc": ^3.0.0
@@ -4469,7 +4475,7 @@ __metadata:
     build-storybook: bin/build.js
     start-storybook: bin/index.js
     storybook-server: bin/index.js
-  checksum: 6ea74143f9993b51da85d527736131123ca26bd0cfce55adcf4d3ccd7696d02da2e0a38ae8c2e2ad96a0bc87c59f8ad4992bd86fb62306298168f43dbbec7a45
+  checksum: f11f07326840fd1a099290b92007d72d782cadde876b490a6e57c1c69cb32540119276ae172e8971896119b70bec2ce177e2d7527c176af7c68c9554654c6156
   languageName: node
   linkType: hard
 
@@ -9408,11 +9414,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-react-ts@workspace:examples/react-ts"
   dependencies:
-    "@storybook/addon-a11y": ^6.5.0-alpha.49
-    "@storybook/addon-docs": ^6.5.0-alpha.49
-    "@storybook/addon-essentials": ^6.5.0-alpha.49
+    "@storybook/addon-a11y": ^6.5.0-alpha.57
+    "@storybook/addon-docs": ^6.5.0-alpha.57
+    "@storybook/addon-essentials": ^6.5.0-alpha.57
     "@storybook/builder-vite": "workspace:*"
-    "@storybook/react": ^6.5.0-alpha.49
+    "@storybook/react": ^6.5.0-alpha.57
     "@storybook/test-runner": ^0.0.4
     "@vitejs/plugin-react": ^1.3.0
     http-server: ^14.1.0
@@ -9430,11 +9436,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-react@workspace:examples/react"
   dependencies:
-    "@storybook/addon-a11y": ^6.5.0-alpha.49
-    "@storybook/addon-docs": ^6.5.0-alpha.49
-    "@storybook/addon-essentials": ^6.5.0-alpha.49
+    "@storybook/addon-a11y": ^6.5.0-alpha.57
+    "@storybook/addon-docs": ^6.5.0-alpha.57
+    "@storybook/addon-essentials": ^6.5.0-alpha.57
     "@storybook/builder-vite": "workspace:*"
-    "@storybook/react": ^6.5.0-alpha.49
+    "@storybook/react": ^6.5.0-alpha.57
     "@storybook/test-runner": ^0.0.4
     "@vitejs/plugin-react": ^1.3.0
     http-server: ^14.1.0
@@ -9451,12 +9457,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-svelte@workspace:examples/svelte"
   dependencies:
-    "@storybook/addon-actions": ^6.5.0-alpha.49
-    "@storybook/addon-essentials": ^6.5.0-alpha.49
-    "@storybook/addon-links": ^6.5.0-alpha.49
+    "@storybook/addon-actions": ^6.5.0-alpha.57
+    "@storybook/addon-essentials": ^6.5.0-alpha.57
+    "@storybook/addon-links": ^6.5.0-alpha.57
     "@storybook/addon-svelte-csf": ^1.1.0
     "@storybook/builder-vite": "workspace:*"
-    "@storybook/svelte": ^6.5.0-alpha.49
+    "@storybook/svelte": ^6.5.0-alpha.57
     "@storybook/test-runner": ^0.0.4
     "@sveltejs/vite-plugin-svelte": ^1.0.0-next.37
     "@tsconfig/svelte": ^3.0.0
@@ -9475,11 +9481,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-vue@workspace:examples/vue"
   dependencies:
-    "@storybook/addon-a11y": ^6.5.0-alpha.49
-    "@storybook/addon-essentials": ^6.5.0-alpha.49
+    "@storybook/addon-a11y": ^6.5.0-alpha.57
+    "@storybook/addon-essentials": ^6.5.0-alpha.57
     "@storybook/builder-vite": "workspace:*"
     "@storybook/test-runner": ^0.0.4
-    "@storybook/vue3": ^6.5.0-alpha.49
+    "@storybook/vue3": ^6.5.0-alpha.57
     "@vitejs/plugin-vue": ^2.3.0
     http-server: ^14.1.0
     jest: ^27.5.1
@@ -9494,11 +9500,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-workspaces-catalog@workspace:examples/workspaces/packages/catalog"
   dependencies:
-    "@storybook/addon-a11y": ^6.5.0-alpha.49
-    "@storybook/addon-docs": ^6.5.0-alpha.49
-    "@storybook/addon-essentials": ^6.5.0-alpha.49
+    "@storybook/addon-a11y": ^6.5.0-alpha.57
+    "@storybook/addon-docs": ^6.5.0-alpha.57
+    "@storybook/addon-essentials": ^6.5.0-alpha.57
     "@storybook/builder-vite": "workspace:*"
-    "@storybook/react": ^6.5.0-alpha.49
+    "@storybook/react": ^6.5.0-alpha.57
     react: ^16.4.14
     react-dom: ^16.4.14
     vite: 2.9.0
@@ -19256,6 +19262,43 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"webpack@npm:>=4.0.0 <6.0.0":
+  version: 5.71.0
+  resolution: "webpack@npm:5.71.0"
+  dependencies:
+    "@types/eslint-scope": ^3.7.3
+    "@types/estree": ^0.0.51
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/wasm-edit": 1.11.1
+    "@webassemblyjs/wasm-parser": 1.11.1
+    acorn: ^8.4.1
+    acorn-import-assertions: ^1.7.6
+    browserslist: ^4.14.5
+    chrome-trace-event: ^1.0.2
+    enhanced-resolve: ^5.9.2
+    es-module-lexer: ^0.9.0
+    eslint-scope: 5.1.1
+    events: ^3.2.0
+    glob-to-regexp: ^0.4.1
+    graceful-fs: ^4.2.9
+    json-parse-better-errors: ^1.0.2
+    loader-runner: ^4.2.0
+    mime-types: ^2.1.27
+    neo-async: ^2.6.2
+    schema-utils: ^3.1.0
+    tapable: ^2.1.1
+    terser-webpack-plugin: ^5.1.3
+    watchpack: ^2.3.1
+    webpack-sources: ^3.2.3
+  peerDependenciesMeta:
+    webpack-cli:
+      optional: true
+  bin:
+    webpack: bin/webpack.js
+  checksum: 84b273a15180d45dafe4fc4a3ccccba2f72210f327a1af39713b3ef78148768afb0e18fa0cddaea4af5dd54ace199fbbdfcef9aec8da7e9c248f8b1b7cc413e1
+  languageName: node
+  linkType: hard
+
 "webpack@npm:>=4.43.0 <6.0.0":
   version: 5.70.0
   resolution: "webpack@npm:5.70.0"

From 867e41acb54445e3dd1a6ea07ff62ebd03545349 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Wed, 6 Apr 2022 22:27:29 -0400
Subject: [PATCH 02/11] Avoid error in React < 18 projects

---
 .../builder-vite/code-generator-plugin.ts     |  8 ++++++++
 .../input/react-dom-client-placeholder.js     |  3 +++
 packages/builder-vite/optimizeDeps.ts         | 19 +++++++++++++++++++
 packages/builder-vite/package.json            |  1 +
 4 files changed, 31 insertions(+)
 create mode 100644 packages/builder-vite/input/react-dom-client-placeholder.js

diff --git a/packages/builder-vite/code-generator-plugin.ts b/packages/builder-vite/code-generator-plugin.ts
index 1299e052..b5a5a386 100644
--- a/packages/builder-vite/code-generator-plugin.ts
+++ b/packages/builder-vite/code-generator-plugin.ts
@@ -63,6 +63,14 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
         return virtualPreviewFile;
       } else if (source === virtualAddonSetupFile) {
         return virtualAddonSetupFile;
+        // Avoid error in react < 18 projects
+      } else if (source === 'react-dom/client') {
+        try {
+          return require.resolve('react-dom/client');
+        } catch (e) {
+          // This is not a react 18 project, need to stub out to avoid error
+          return path.resolve(__dirname, '..', 'input', 'react-dom-client-placeholder.js');
+        }
       }
     },
     async load(id) {
diff --git a/packages/builder-vite/input/react-dom-client-placeholder.js b/packages/builder-vite/input/react-dom-client-placeholder.js
new file mode 100644
index 00000000..ac58bff7
--- /dev/null
+++ b/packages/builder-vite/input/react-dom-client-placeholder.js
@@ -0,0 +1,3 @@
+// This file is to work around https://github.com/vitejs/vite/issues/6007
+// For react < 18 projects, where `react-dom/client` does not exist, yet is
+// conditionally imported by @storybook/react.
diff --git a/packages/builder-vite/optimizeDeps.ts b/packages/builder-vite/optimizeDeps.ts
index 22cfc3bf..18b8c0da 100644
--- a/packages/builder-vite/optimizeDeps.ts
+++ b/packages/builder-vite/optimizeDeps.ts
@@ -63,6 +63,7 @@ const INCLUDE_CANDIDATES = [
   'prop-types',
   'qs',
   'react-dom',
+  'react-dom/client',
   'react-fast-compare',
   'react-is',
   'react-textarea-autosize',
@@ -104,10 +105,23 @@ export async function getOptimizeDeps(
   options: ExtendedOptions
 ) {
   const { root } = config;
+  const { framework } = options;
   const absoluteStories = await listStories(options);
   const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));
   const resolvedConfig = await resolveConfig(config, 'serve', 'development');
 
+  const exclude = [];
+  // This is necessary to support react < 18 with new versions of @storybook/react that support react 18.
+  if (framework === 'react') {
+    try {
+      require.resolve('react-dom/client');
+    } catch (e) {
+      if (isNodeError(e) && e.code === 'MODULE_NOT_FOUND') {
+        exclude.push('react-dom/client');
+      }
+    }
+  }
+
   // This function converts ids which might include ` > ` to a real path, if it exists on disk.
   // See https://github.com/vitejs/vite/blob/67d164392e8e9081dc3f0338c4b4b8eea6c5f7da/packages/vite/src/node/optimizer/index.ts#L182-L199
   const resolve = resolvedConfig.createResolver({ asSrc: false });
@@ -119,5 +133,10 @@ export async function getOptimizeDeps(
     // We need Vite to precompile these dependencies, because they contain non-ESM code that would break
     // if we served it directly to the browser.
     include,
+    // In some cases we need to prevent deps from being pre-bundled
+    exclude,
   };
 }
+
+// Refines an error received from 'catch' to be a NodeJS exception
+const isNodeError = (error: unknown): error is NodeJS.ErrnoException => error instanceof Error;
diff --git a/packages/builder-vite/package.json b/packages/builder-vite/package.json
index 15e9bcc0..2e227ae1 100644
--- a/packages/builder-vite/package.json
+++ b/packages/builder-vite/package.json
@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
+    "@types/node": "^17.0.23",
     "vue-docgen-api": "^4.40.0"
   },
   "peerDependencies": {

From ae50c5b70ac75d854a3c5270bdcf2893976fdaea Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Wed, 6 Apr 2022 22:59:44 -0400
Subject: [PATCH 03/11] Add react 18 example

---
 examples/react-18/.env                        |   3 +
 examples/react-18/.storybook/main.js          |  16 ++
 examples/react-18/.storybook/preview.js       |   9 +
 examples/react-18/package.json                |  34 +++
 examples/react-18/stories/Button.jsx          |  49 +++++
 examples/react-18/stories/Button.stories.jsx  |  36 ++++
 .../react-18/stories/EnvironmentVariables.jsx |  16 ++
 .../stories/EnvironmentVariables.stories.jsx  |   8 +
 examples/react-18/stories/Header.jsx          |  42 ++++
 examples/react-18/stories/Header.stories.jsx  |  16 ++
 .../react-18/stories/Introduction.stories.mdx | 198 ++++++++++++++++++
 examples/react-18/stories/Page.jsx            |  69 ++++++
 examples/react-18/stories/Page.stories.jsx    |  19 ++
 .../react-18/stories/assets/code-brackets.svg |   1 +
 examples/react-18/stories/assets/colors.svg   |   1 +
 examples/react-18/stories/assets/comments.svg |   1 +
 .../react-18/stories/assets/direction.svg     |   1 +
 examples/react-18/stories/assets/flow.svg     |   1 +
 examples/react-18/stories/assets/plugin.svg   |   1 +
 examples/react-18/stories/assets/repo.svg     |   1 +
 examples/react-18/stories/assets/stackalt.svg |   1 +
 examples/react-18/stories/button.css          |  30 +++
 examples/react-18/stories/header.css          |  26 +++
 .../stories/mdx-in-stories/Example.docs.mdx   |  16 ++
 .../mdx-in-stories/Example.stories.jsx        |  16 ++
 examples/react-18/stories/page.css            |  69 ++++++
 yarn.lock                                     |  59 ++++++
 27 files changed, 739 insertions(+)
 create mode 100644 examples/react-18/.env
 create mode 100644 examples/react-18/.storybook/main.js
 create mode 100644 examples/react-18/.storybook/preview.js
 create mode 100644 examples/react-18/package.json
 create mode 100644 examples/react-18/stories/Button.jsx
 create mode 100644 examples/react-18/stories/Button.stories.jsx
 create mode 100644 examples/react-18/stories/EnvironmentVariables.jsx
 create mode 100644 examples/react-18/stories/EnvironmentVariables.stories.jsx
 create mode 100644 examples/react-18/stories/Header.jsx
 create mode 100644 examples/react-18/stories/Header.stories.jsx
 create mode 100644 examples/react-18/stories/Introduction.stories.mdx
 create mode 100644 examples/react-18/stories/Page.jsx
 create mode 100644 examples/react-18/stories/Page.stories.jsx
 create mode 100644 examples/react-18/stories/assets/code-brackets.svg
 create mode 100644 examples/react-18/stories/assets/colors.svg
 create mode 100644 examples/react-18/stories/assets/comments.svg
 create mode 100644 examples/react-18/stories/assets/direction.svg
 create mode 100644 examples/react-18/stories/assets/flow.svg
 create mode 100644 examples/react-18/stories/assets/plugin.svg
 create mode 100644 examples/react-18/stories/assets/repo.svg
 create mode 100644 examples/react-18/stories/assets/stackalt.svg
 create mode 100644 examples/react-18/stories/button.css
 create mode 100644 examples/react-18/stories/header.css
 create mode 100644 examples/react-18/stories/mdx-in-stories/Example.docs.mdx
 create mode 100644 examples/react-18/stories/mdx-in-stories/Example.stories.jsx
 create mode 100644 examples/react-18/stories/page.css

diff --git a/examples/react-18/.env b/examples/react-18/.env
new file mode 100644
index 00000000..e613627a
--- /dev/null
+++ b/examples/react-18/.env
@@ -0,0 +1,3 @@
+STORYBOOK_ENV_VAR=included
+VITE_ENV_VAR=included
+ENV_VAR=should_not_be_included
diff --git a/examples/react-18/.storybook/main.js b/examples/react-18/.storybook/main.js
new file mode 100644
index 00000000..e5ecd51d
--- /dev/null
+++ b/examples/react-18/.storybook/main.js
@@ -0,0 +1,16 @@
+module.exports = {
+  framework: '@storybook/react',
+  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  features: {
+    storyStoreV7: true,
+  },
+  async viteFinal(config, { configType }) {
+    // customize the Vite config here
+    config.optimizeDeps.include = [...config.optimizeDeps.include, 'react-dom/client'];
+    return config;
+  },
+};
diff --git a/examples/react-18/.storybook/preview.js b/examples/react-18/.storybook/preview.js
new file mode 100644
index 00000000..d3914580
--- /dev/null
+++ b/examples/react-18/.storybook/preview.js
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
diff --git a/examples/react-18/package.json b/examples/react-18/package.json
new file mode 100644
index 00000000..e7e1a7b7
--- /dev/null
+++ b/examples/react-18/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "example-react-18",
+  "private": true,
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "storybook": "start-storybook --port 6006",
+    "build-storybook": "build-storybook",
+    "preview-storybook": "http-server storybook-static --port 6006 --silent",
+    "test": "wait-on tcp:6006 && test-storybook",
+    "test-ci": "run-p --race test preview-storybook"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.5.0-alpha.57",
+    "@storybook/addon-docs": "^6.5.0-alpha.57",
+    "@storybook/addon-essentials": "^6.5.0-alpha.57",
+    "@storybook/builder-vite": "workspace:*",
+    "@storybook/react": "^6.5.0-alpha.57",
+    "@storybook/test-runner": "^0.0.4",
+    "@vitejs/plugin-react": "^1.3.0",
+    "http-server": "^14.1.0",
+    "jest": "^27.5.1",
+    "npm-run-all": "^4.1.5",
+    "vite": "2.9.0",
+    "wait-on": "^6.0.1"
+  }
+}
diff --git a/examples/react-18/stories/Button.jsx b/examples/react-18/stories/Button.jsx
new file mode 100644
index 00000000..eefda2bf
--- /dev/null
+++ b/examples/react-18/stories/Button.jsx
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary: PropTypes.bool,
+  /**
+   * What background color to use
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * How large should the button be?
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Button contents
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Optional click handler
+   */
+  onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined,
+};
diff --git a/examples/react-18/stories/Button.stories.jsx b/examples/react-18/stories/Button.stories.jsx
new file mode 100644
index 00000000..11428b26
--- /dev/null
+++ b/examples/react-18/stories/Button.stories.jsx
@@ -0,0 +1,36 @@
+import { Button } from './Button';
+
+export default {
+  // no title, to demonstrate autotitle
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/examples/react-18/stories/EnvironmentVariables.jsx b/examples/react-18/stories/EnvironmentVariables.jsx
new file mode 100644
index 00000000..eb6729d3
--- /dev/null
+++ b/examples/react-18/stories/EnvironmentVariables.jsx
@@ -0,0 +1,16 @@
+export function EnvironmentVariables() {
+  return (
+    <div>
+      <h1>import . meta . env:</h1>
+      <div>{JSON.stringify(import.meta.env, null, 2)}</div>
+      <h1>import . meta . env . STORYBOOK:</h1>
+      <div>{import.meta.env.STORYBOOK}</div>
+      <h1>import . meta . env . STORYBOOK_ENV_VAR:</h1>
+      <div>{import.meta.env.STORYBOOK_ENV_VAR}</div>
+      <h1>import . meta . env . VITE_ENV_VAR:</h1>
+      <div>{import.meta.env.VITE_ENV_VAR}</div>
+      <h1>import . meta . env . ENV_VAR:</h1>
+      <div>{import.meta.env.ENV_VAR}</div>
+    </div>
+  );
+}
diff --git a/examples/react-18/stories/EnvironmentVariables.stories.jsx b/examples/react-18/stories/EnvironmentVariables.stories.jsx
new file mode 100644
index 00000000..d9544b7b
--- /dev/null
+++ b/examples/react-18/stories/EnvironmentVariables.stories.jsx
@@ -0,0 +1,8 @@
+import { EnvironmentVariables } from './EnvironmentVariables';
+
+export default {
+  title: 'Environment Variables',
+  component: EnvironmentVariables,
+};
+
+export const Info = () => <EnvironmentVariables />;
diff --git a/examples/react-18/stories/Header.jsx b/examples/react-18/stories/Header.jsx
new file mode 100644
index 00000000..14393acf
--- /dev/null
+++ b/examples/react-18/stories/Header.jsx
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+
+import { Button } from './Button';
+import './header.css';
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+  <header>
+    <div className="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
+            <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
+            <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <Button size="small" onClick={onLogout} label="Log out" />
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);
+
+Header.propTypes = {
+  user: PropTypes.shape({}),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};
+
+Header.defaultProps = {
+  user: null,
+};
diff --git a/examples/react-18/stories/Header.stories.jsx b/examples/react-18/stories/Header.stories.jsx
new file mode 100644
index 00000000..5d776c95
--- /dev/null
+++ b/examples/react-18/stories/Header.stories.jsx
@@ -0,0 +1,16 @@
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+};
+
+const Template = (args) => <Header {...args} />;
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};
diff --git a/examples/react-18/stories/Introduction.stories.mdx b/examples/react-18/stories/Introduction.stories.mdx
new file mode 100644
index 00000000..e0cdad29
--- /dev/null
+++ b/examples/react-18/stories/Introduction.stories.mdx
@@ -0,0 +1,198 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Example/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in <code>src/stories/Introduction.stories.mdx</code>
+</div>
diff --git a/examples/react-18/stories/Page.jsx b/examples/react-18/stories/Page.jsx
new file mode 100644
index 00000000..d4e0e2ed
--- /dev/null
+++ b/examples/react-18/stories/Page.jsx
@@ -0,0 +1,69 @@
+/* eslint-disable max-len */
+import PropTypes from 'prop-types';
+
+import { Header } from './Header';
+import './page.css';
+
+export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
+  <article>
+    <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
+
+    <section>
+      <h2>Pages in Storybook</h2>
+      <p>
+        We recommend building UIs with a{' '}
+        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <strong>component-driven</strong>
+        </a>{' '}
+        process starting with atomic components and ending with pages.
+      </p>
+      <p>
+        Render pages with mock data. This makes it easy to build and review page states without needing to navigate to
+        them in your app. Here are some handy patterns for managing page data in Storybook:
+      </p>
+      <ul>
+        <li>
+          Use a higher-level connected component. Storybook helps you compose such data from the "args" of child
+          component stories
+        </li>
+        <li>
+          Assemble data in the page component from your services. You can mock these services out using Storybook.
+        </li>
+      </ul>
+      <p>
+        Get a guided tutorial on component-driven development at{' '}
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          Storybook tutorials
+        </a>
+        . Read more in the{' '}
+        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+          docs
+        </a>
+        .
+      </p>
+      <div className="tip-wrapper">
+        <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+              id="a"
+              fill="#999"
+            />
+          </g>
+        </svg>
+        Viewports addon in the toolbar
+      </div>
+    </section>
+  </article>
+);
+Page.propTypes = {
+  user: PropTypes.shape({}),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};
+
+Page.defaultProps = {
+  user: null,
+};
diff --git a/examples/react-18/stories/Page.stories.jsx b/examples/react-18/stories/Page.stories.jsx
new file mode 100644
index 00000000..15e09a5f
--- /dev/null
+++ b/examples/react-18/stories/Page.stories.jsx
@@ -0,0 +1,19 @@
+import { Page } from './Page';
+import * as HeaderStories from './Header.stories';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+};
+
+const Template = (args) => <Page {...args} />;
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  ...HeaderStories.LoggedIn.args,
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {
+  ...HeaderStories.LoggedOut.args,
+};
diff --git a/examples/react-18/stories/assets/code-brackets.svg b/examples/react-18/stories/assets/code-brackets.svg
new file mode 100644
index 00000000..73de9477
--- /dev/null
+++ b/examples/react-18/stories/assets/code-brackets.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
\ No newline at end of file
diff --git a/examples/react-18/stories/assets/colors.svg b/examples/react-18/stories/assets/colors.svg
new file mode 100644
index 00000000..17d58d51
--- /dev/null
+++ b/examples/react-18/stories/assets/colors.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/colors</title><g id="illustration/colors" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><circle id="Oval" cx="23.763" cy="16.192" r="13.271" fill="#FC521F" opacity=".6"/><circle id="Oval-Copy" cx="15.468" cy="32.308" r="13.271" fill="#66BF3C" opacity=".6"/><path id="Combined-Shape" fill="#FF5F95" d="M15.4683651,19.0362231 C21.5434817,19.0362231 26.6652087,23.1181689 28.2404554,28.6889694 C26.8420385,29.1906678 25.3344184,29.4637769 23.7630101,29.4637769 C17.6878936,29.4637769 12.5661666,25.3818311 10.9909199,19.8110306 C12.3898993,19.3092302 13.8972501,19.0362231 15.4683651,19.0362231 Z"/><circle id="Oval-Copy-2" cx="32.532" cy="32.308" r="13.271" fill="#1EA7FD" opacity=".6"/><path id="Combined-Shape" fill="#87E6E5" d="M24.00025,22.1417324 C26.897967,24.5762286 28.7397972,28.2268506 28.7397972,32.3076552 C28.7397972,36.3884597 26.897967,40.0390817 24.00025,42.4735779 C21.1018087,40.038637 19.2602028,36.3882111 19.2602028,32.3076552 C19.2602028,28.2815316 21.0530043,24.6741393 23.8838362,22.2402492 Z"/><path id="Combined-Shape" fill="#FBD178" d="M32.5316349,19.0362231 C33.9415155,19.0362231 35.3000478,19.2560712 36.5748203,19.6633557 C35.0489179,25.3104816 29.8909911,29.4637769 23.7630101,29.4637769 C22.3527608,29.4637769 20.9938866,29.2438138 19.7188247,28.8363247 C21.2451195,23.1900077 26.403293,19.0362231 32.5316349,19.0362231 Z"/><path id="Combined-Shape" fill="#FFF" d="M24.00025,22.1417324 L24.0124326,22.1519799 C24.1747744,22.288701 24.3337918,22.4292434 24.4893463,22.5734686 L24.3896855,22.4820008 C24.4671836,22.552408 24.5438453,22.6237194 24.619654,22.6959185 L24.4893463,22.5734686 C24.5690639,22.6473803 24.6478719,22.7222591 24.7257519,22.7980864 L24.619654,22.6959185 C24.6907654,22.7636441 24.7611262,22.8321506 24.8307226,22.9014245 L24.7257519,22.7980864 C24.8120661,22.8821258 24.8972403,22.9673303 24.981249,23.0536745 L24.8307226,22.9014245 C24.9073006,22.9776475 24.9829531,23.0547994 25.0576619,23.132862 L25.057852,23.1330605 C25.3140855,23.4007967 25.559391,23.679459 25.7928375,23.9681079 L25.7230574,23.8825538 C25.7985998,23.9743942 25.8729325,24.0672672 25.9460311,24.1611484 L25.7928375,23.9681079 C25.8624256,24.0541514 25.93096,24.1410823 25.998421,24.228881 L25.9460311,24.1611484 C26.0074362,24.2400115 26.0679704,24.319586 26.1276194,24.3998576 L25.998421,24.228881 C26.0663495,24.317288 26.1331896,24.4065749 26.1989214,24.4967216 L26.1276194,24.3998576 C26.204848,24.5037867 26.2805926,24.6088841 26.3548219,24.7151187 L26.1989214,24.4967216 C26.2678555,24.59126 26.3355706,24.6867441 26.4020436,24.7831507 L26.3548219,24.7151187 C26.4130013,24.798383 26.4702498,24.8823459 26.5265523,24.9669921 L26.4020436,24.7831507 C26.4678788,24.8786322 26.5324956,24.9750187 26.5958716,25.0722875 L26.5959296,25.0723765 C26.736338,25.2878741 26.870709,25.5077955 26.9987399,25.7318073 L26.9410662,25.6319089 C26.9973106,25.7283602 27.0523736,25.8255849 27.1062352,25.9235633 L26.9987399,25.7318073 C27.0539848,25.8284676 27.1080492,25.9258895 27.1609136,26.0240532 L27.1606656,26.0235927 C27.2696676,26.2259984 27.3733426,26.4310837 27.4717677,26.6391379 L27.4715275,26.6386302 C27.5541941,26.8133735 27.6329386,26.9896914 27.7079006,27.1679911 C27.7630163,27.299081 27.8161443,27.431391 27.8671831,27.5647345 L27.804312,27.4036517 C27.8391482,27.4912057 27.8730792,27.5792182 27.9060936,27.6676774 L27.8671831,27.5647345 C27.906613,27.6677486 27.9447959,27.7713796 27.9817136,27.8756091 L27.9060936,27.6676774 C27.946474,27.7758735 27.9854831,27.884738 28.0230997,27.9942498 L27.9817136,27.8756091 C28.0144978,27.9681688 28.0462842,28.0612004 28.0770597,28.1546911 L28.0230997,27.9942498 C28.0618265,28.1069941 28.0990774,28.2204244 28.1348294,28.3345177 L28.0770597,28.1546911 C28.1112208,28.2584663 28.1441365,28.3628071 28.175789,28.4676958 L28.1756797,28.4673338 L28.2408136,28.6893554 C28.2284694,28.6937793 28.2161167,28.6981854 28.2037557,28.7025737 L28.2404554,28.6889694 C27.9517707,28.7925384 27.6584322,28.8863659 27.3608394,28.97006 L27.3609965,28.9702524 C27.0695498,29.0519815 26.7741843,29.1241944 26.4751174,29.1863314 L26.5385665,29.1730829 C26.3901218,29.2046704 26.2407589,29.2337757 26.0905233,29.2603535 L26.4751174,29.1863314 C26.3367402,29.215082 26.1975707,29.2416755 26.0576458,29.2660754 L26.0905233,29.2603535 C25.9366833,29.2875689 25.7819282,29.312134 25.6263069,29.334 L26.0576458,29.2660754 C25.9017815,29.2932549 25.7449801,29.3177127 25.5872928,29.3393985 L25.6263069,29.334 C25.493366,29.3526793 25.3597929,29.3693888 25.2256182,29.3840982 L25.5872928,29.3393985 C25.4326976,29.360659 25.277251,29.3792552 25.1210012,29.3951396 L25.2256182,29.3840982 C25.0570566,29.4025774 24.8875455,29.4178998 24.7171453,29.4300052 L25.1210012,29.3951396 C24.9661341,29.4108835 24.810478,29.4239634 24.6540799,29.4343333 L24.7171453,29.4300052 C24.5612618,29.4410793 24.4046342,29.4494611 24.2473088,29.4551045 L24.6540799,29.4343333 C24.5098436,29.4438967 24.3649762,29.4511552 24.2195147,29.4560724 L24.2473088,29.4551045 C24.0865878,29.4608697 23.9251385,29.4637769 23.7630101,29.4637769 L23.3130142,29.4562912 C23.2993121,29.4558347 23.2856153,29.4553574 23.2719237,29.4548593 C22.9596275,29.4434959 22.6502324,29.4213577 22.3439491,29.3888006 L22.3886972,29.3934808 C22.2468147,29.3788837 22.105595,29.3620515 21.9650736,29.3430199 L22.3439491,29.3888006 C22.1914515,29.3725905 22.0397254,29.3537976 21.8888152,29.3324664 L21.9650736,29.3430199 C21.8025527,29.3210088 21.6409661,29.2960557 21.4803691,29.2682161 L21.8888152,29.3324664 C21.7352182,29.3107553 21.5824665,29.2864149 21.4306071,29.2594919 L21.4803691,29.2682161 C21.3506285,29.2457255 21.2215338,29.221351 21.0931142,29.1951218 L21.4306071,29.2594919 C21.2772401,29.2323016 21.1247833,29.2024774 20.973285,29.1700676 L21.0931142,29.1951218 C20.9267071,29.1611338 20.7614335,29.1240315 20.5973571,29.0838786 L20.973285,29.1700676 C20.825476,29.138447 20.6785795,29.1043653 20.5326403,29.0678674 L20.5973571,29.0838786 C20.4596684,29.0501832 20.3228227,29.0143396 20.1868576,28.9763851 L20.5326403,29.0678674 C20.3930822,29.0329653 20.2543997,28.9958536 20.1166319,28.9565718 L20.1169729,28.956669 L19.7188247,28.8363247 L19.7188247,28.8363247 L19.7880988,28.5894836 C19.8166627,28.4914193 19.8463277,28.3938241 19.8770797,28.2967124 L19.8480041,28.389868 C19.888904,28.2573207 19.931824,28.1256601 19.9767281,27.9949221 L19.8770797,28.2967124 C19.9117081,28.1873592 19.9477148,28.0786191 19.9850793,27.9705124 L19.9853117,27.9700125 C20.1152243,27.5939638 20.2618428,27.2250995 20.4240731,26.8647811 L20.345088,27.0439391 C20.3899401,26.9402428 20.4360767,26.8372321 20.4834778,26.7349269 L20.4240731,26.8647811 C20.461061,26.78263 20.4988604,26.7009231 20.5374612,26.6196707 L20.4834778,26.7349269 C20.5344734,26.6248636 20.5869326,26.515617 20.6408302,26.4072119 L20.5374612,26.6196707 C20.5871241,26.5151329 20.6381134,26.4113474 20.6904074,26.308336 L20.6408302,26.4072119 C20.681671,26.3250682 20.7233378,26.2434076 20.7658197,26.1622412 L20.7658807,26.1619302 C20.8435258,26.013775 20.923959,25.866962 21.0070529,25.7218685 C21.2050227,25.3759931 21.4182299,25.0398756 21.6456589,24.7144306 L21.5286537,24.8848257 C21.5876708,24.7975143 21.6476996,24.7109431 21.7087233,24.6251289 L21.6456589,24.7144306 C21.6993229,24.6376387 21.7537788,24.5614411 21.8090146,24.4858495 L21.7087233,24.6251289 C21.7826333,24.5211934 21.8580028,24.4183683 21.9348018,24.3166836 L21.8090146,24.4858495 C21.8722751,24.3992759 21.9365587,24.3134973 22.0018475,24.2285315 L22.0016895,24.2288802 C22.3179789,23.8171232 22.6576794,23.4247699 23.0189296,23.053491 L22.8296293,23.2521975 C22.9033796,23.1732135 22.9780829,23.095131 23.0537208,23.0179683 L23.0189296,23.053491 C23.083529,22.9870982 23.1488175,22.9213793 23.2147836,22.8563459 L23.0537208,23.0179683 C23.131055,22.9390752 23.2093662,22.8611436 23.2886348,22.7841931 L23.2147836,22.8563459 C23.2821211,22.7899605 23.3501645,22.7242893 23.4189017,22.6593447 L23.2886348,22.7841931 C23.3852399,22.6904132 23.4832671,22.5980904 23.582681,22.5072602 L23.4189017,22.6593447 C23.4912637,22.5909753 23.5643945,22.523411 23.6382797,22.4566663 L23.582681,22.5072602 C23.6715916,22.4260264 23.7616113,22.3459865 23.8527148,22.2671658 L23.8525967,22.2671923 C23.8915062,22.2336043 23.9304941,22.2002638 23.9696766,22.1671464 L24.00025,22.1417324 Z"/></g></svg>
\ No newline at end of file
diff --git a/examples/react-18/stories/assets/comments.svg b/examples/react-18/stories/assets/comments.svg
new file mode 100644
index 00000000..6493a139
--- /dev/null
+++ b/examples/react-18/stories/assets/comments.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>
\ No newline at end of file
diff --git a/examples/react-18/stories/assets/direction.svg b/examples/react-18/stories/assets/direction.svg
new file mode 100644
index 00000000..65676ac2
--- /dev/null
+++ b/examples/react-18/stories/assets/direction.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>
\ No newline at end of file
diff --git a/examples/react-18/stories/assets/flow.svg b/examples/react-18/stories/assets/flow.svg
new file mode 100644
index 00000000..8ac27db4
--- /dev/null
+++ b/examples/react-18/stories/assets/flow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>
\ No newline at end of file
diff --git a/examples/react-18/stories/assets/plugin.svg b/examples/react-18/stories/assets/plugin.svg
new file mode 100644
index 00000000..29e5c690
--- /dev/null
+++ b/examples/react-18/stories/assets/plugin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>
\ No newline at end of file
diff --git a/examples/react-18/stories/assets/repo.svg b/examples/react-18/stories/assets/repo.svg
new file mode 100644
index 00000000..f386ee90
--- /dev/null
+++ b/examples/react-18/stories/assets/repo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>
\ No newline at end of file
diff --git a/examples/react-18/stories/assets/stackalt.svg b/examples/react-18/stories/assets/stackalt.svg
new file mode 100644
index 00000000..9b7ad274
--- /dev/null
+++ b/examples/react-18/stories/assets/stackalt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>
\ No newline at end of file
diff --git a/examples/react-18/stories/button.css b/examples/react-18/stories/button.css
new file mode 100644
index 00000000..dc91dc76
--- /dev/null
+++ b/examples/react-18/stories/button.css
@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}
diff --git a/examples/react-18/stories/header.css b/examples/react-18/stories/header.css
new file mode 100644
index 00000000..acadc9ec
--- /dev/null
+++ b/examples/react-18/stories/header.css
@@ -0,0 +1,26 @@
+.wrapper {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+h1 {
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+button + button {
+  margin-left: 10px;
+}
diff --git a/examples/react-18/stories/mdx-in-stories/Example.docs.mdx b/examples/react-18/stories/mdx-in-stories/Example.docs.mdx
new file mode 100644
index 00000000..357cc05f
--- /dev/null
+++ b/examples/react-18/stories/mdx-in-stories/Example.docs.mdx
@@ -0,0 +1,16 @@
+import { Canvas, Story } from '@storybook/addon-docs';
+
+# Embedding stories by reference in MDX files
+
+In this example `Example.stories.jsx` import an MDX file, which contains
+references to stories by their unique ID.
+
+See also [CSF Stories with arbitrary MDX](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx).
+
+## Button
+
+<Canvas>
+  <Story id="example-mdx-in-stories--primary-button" />
+</Canvas>
+
+_You should be able to see the source of the above story._
diff --git a/examples/react-18/stories/mdx-in-stories/Example.stories.jsx b/examples/react-18/stories/mdx-in-stories/Example.stories.jsx
new file mode 100644
index 00000000..d9a4b857
--- /dev/null
+++ b/examples/react-18/stories/mdx-in-stories/Example.stories.jsx
@@ -0,0 +1,16 @@
+import page from './Example.docs.mdx';
+import { Button } from '../Button';
+
+export default {
+  title: 'Example/MDX in stories',
+
+  parameters: {
+    docs: {
+      page,
+    },
+  },
+};
+
+export function PrimaryButton() {
+  return <Button primary label="Primary button" />;
+}
diff --git a/examples/react-18/stories/page.css b/examples/react-18/stories/page.css
new file mode 100644
index 00000000..51c9d099
--- /dev/null
+++ b/examples/react-18/stories/page.css
@@ -0,0 +1,69 @@
+section {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: #333;
+}
+
+h2 {
+  font-weight: 900;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0 0 4px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+p {
+  margin: 1em 0;
+}
+
+a {
+  text-decoration: none;
+  color: #1ea7fd;
+}
+
+ul {
+  padding-left: 30px;
+  margin: 1em 0;
+}
+
+li {
+  margin-bottom: 8px;
+}
+
+.tip {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #e7fdd8;
+  color: #66bf3c;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+.tip-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.tip-wrapper svg {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  margin-right: 4px;
+  vertical-align: top;
+  margin-top: 3px;
+}
+
+.tip-wrapper svg path {
+  fill: #1ea7fd;
+}
diff --git a/yarn.lock b/yarn.lock
index 189cfd34..91853dce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3501,6 +3501,7 @@ __metadata:
     "@storybook/csf-tools": ^6.3.3
     "@storybook/source-loader": ^6.3.12
     "@types/express": ^4.17.13
+    "@types/node": ^17.0.23
     "@vitejs/plugin-react": ^1.0.8
     ast-types: ^0.14.2
     es-module-lexer: ^0.9.3
@@ -4765,6 +4766,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^17.0.23":
+  version: 17.0.23
+  resolution: "@types/node@npm:17.0.23"
+  checksum: a3517554737cbb042e76c30d0e5482192ac4d9bea0eeb086e2622d9cabf460a0eb52a696b99fcd18e7fcc93c96db6cc7ae507f6608f256ef0b5c1d8c87a5a470
+  languageName: node
+  linkType: hard
+
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.0
   resolution: "@types/normalize-package-data@npm:2.4.0"
@@ -9410,6 +9418,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"example-react-18@workspace:examples/react-18":
+  version: 0.0.0-use.local
+  resolution: "example-react-18@workspace:examples/react-18"
+  dependencies:
+    "@storybook/addon-a11y": ^6.5.0-alpha.57
+    "@storybook/addon-docs": ^6.5.0-alpha.57
+    "@storybook/addon-essentials": ^6.5.0-alpha.57
+    "@storybook/builder-vite": "workspace:*"
+    "@storybook/react": ^6.5.0-alpha.57
+    "@storybook/test-runner": ^0.0.4
+    "@vitejs/plugin-react": ^1.3.0
+    http-server: ^14.1.0
+    jest: ^27.5.1
+    npm-run-all: ^4.1.5
+    react: ^18.0.0
+    react-dom: ^18.0.0
+    vite: 2.9.0
+    wait-on: ^6.0.1
+  languageName: unknown
+  linkType: soft
+
 "example-react-ts@workspace:examples/react-ts":
   version: 0.0.0-use.local
   resolution: "example-react-ts@workspace:examples/react-ts"
@@ -15785,6 +15814,18 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"react-dom@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "react-dom@npm:18.0.0"
+  dependencies:
+    loose-envify: ^1.1.0
+    scheduler: ^0.21.0
+  peerDependencies:
+    react: ^18.0.0
+  checksum: dd0ba9f2f31dd728076c892a95b2f5a8dfe79136431b0289afb46eec39d0ca6b6f0f40a60fd8aa6ef702c98ce7c26100d3d4dbc35c7c9e87429cd04f84cb58bd
+  languageName: node
+  linkType: hard
+
 "react-element-to-jsx-string@npm:^14.3.4":
   version: 14.3.4
   resolution: "react-element-to-jsx-string@npm:14.3.4"
@@ -15873,6 +15914,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"react@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "react@npm:18.0.0"
+  dependencies:
+    loose-envify: ^1.1.0
+  checksum: 293020b96536b3c7113ee57ca5c990a3f25649d1751b1c7a3aabd16dff0691fe9f1eed1206616d0906d05933536052037340a0c8d0941ff870b0eb469a2f975b
+  languageName: node
+  linkType: hard
+
 "read-pkg-up@npm:^1.0.1":
   version: 1.0.1
   resolution: "read-pkg-up@npm:1.0.1"
@@ -16586,6 +16636,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.21.0":
+  version: 0.21.0
+  resolution: "scheduler@npm:0.21.0"
+  dependencies:
+    loose-envify: ^1.1.0
+  checksum: 4f8285076041ed2c81acdd1faa987f1655fdbd30554bc667c1ea64743fc74fb3a04ca7d27454b3d678735df5a230137a3b84756061b43dc5796e80701b66d124
+  languageName: node
+  linkType: hard
+
 "schema-utils@npm:2.7.0":
   version: 2.7.0
   resolution: "schema-utils@npm:2.7.0"

From 9188ea0990be0e107c91ef535b3dab06b976bc5a Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Wed, 6 Apr 2022 23:59:38 -0400
Subject: [PATCH 04/11] Bump to alpha.58

---
 examples/react-18/package.json                |   8 +-
 examples/react-ts/package.json                |   8 +-
 examples/react/package.json                   |   8 +-
 examples/svelte/package.json                  |   8 +-
 examples/vue/package.json                     |   6 +-
 .../workspaces/packages/catalog/package.json  |   8 +-
 yarn.lock                                     | 731 +++++++++---------
 7 files changed, 389 insertions(+), 388 deletions(-)

diff --git a/examples/react-18/package.json b/examples/react-18/package.json
index e7e1a7b7..547534f3 100644
--- a/examples/react-18/package.json
+++ b/examples/react-18/package.json
@@ -18,11 +18,11 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.0-alpha.57",
-    "@storybook/addon-docs": "^6.5.0-alpha.57",
-    "@storybook/addon-essentials": "^6.5.0-alpha.57",
+    "@storybook/addon-a11y": "^6.5.0-alpha.58",
+    "@storybook/addon-docs": "^6.5.0-alpha.58",
+    "@storybook/addon-essentials": "^6.5.0-alpha.58",
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/react": "^6.5.0-alpha.57",
+    "@storybook/react": "^6.5.0-alpha.58",
     "@storybook/test-runner": "^0.0.4",
     "@vitejs/plugin-react": "^1.3.0",
     "http-server": "^14.1.0",
diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json
index f2cab1e4..8489070d 100644
--- a/examples/react-ts/package.json
+++ b/examples/react-ts/package.json
@@ -18,11 +18,11 @@
     "react-dom": "^16.4.14"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.0-alpha.57",
-    "@storybook/addon-docs": "^6.5.0-alpha.57",
-    "@storybook/addon-essentials": "^6.5.0-alpha.57",
+    "@storybook/addon-a11y": "^6.5.0-alpha.58",
+    "@storybook/addon-docs": "^6.5.0-alpha.58",
+    "@storybook/addon-essentials": "^6.5.0-alpha.58",
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/react": "^6.5.0-alpha.57",
+    "@storybook/react": "^6.5.0-alpha.58",
     "@storybook/test-runner": "^0.0.4",
     "@vitejs/plugin-react": "^1.3.0",
     "http-server": "^14.1.0",
diff --git a/examples/react/package.json b/examples/react/package.json
index 27cdfbac..e39345e3 100644
--- a/examples/react/package.json
+++ b/examples/react/package.json
@@ -18,11 +18,11 @@
     "react-dom": "^16.4.14"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.0-alpha.57",
-    "@storybook/addon-docs": "^6.5.0-alpha.57",
-    "@storybook/addon-essentials": "^6.5.0-alpha.57",
+    "@storybook/addon-a11y": "^6.5.0-alpha.58",
+    "@storybook/addon-docs": "^6.5.0-alpha.58",
+    "@storybook/addon-essentials": "^6.5.0-alpha.58",
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/react": "^6.5.0-alpha.57",
+    "@storybook/react": "^6.5.0-alpha.58",
     "@storybook/test-runner": "^0.0.4",
     "@vitejs/plugin-react": "^1.3.0",
     "http-server": "^14.1.0",
diff --git a/examples/svelte/package.json b/examples/svelte/package.json
index 5e3cd33e..c0f04edb 100644
--- a/examples/svelte/package.json
+++ b/examples/svelte/package.json
@@ -17,12 +17,12 @@
     "svelte": "^3.46.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.0-alpha.57",
-    "@storybook/addon-essentials": "^6.5.0-alpha.57",
-    "@storybook/addon-links": "^6.5.0-alpha.57",
+    "@storybook/addon-actions": "^6.5.0-alpha.58",
+    "@storybook/addon-essentials": "^6.5.0-alpha.58",
+    "@storybook/addon-links": "^6.5.0-alpha.58",
     "@storybook/addon-svelte-csf": "^1.1.0",
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/svelte": "^6.5.0-alpha.57",
+    "@storybook/svelte": "^6.5.0-alpha.58",
     "@storybook/test-runner": "^0.0.4",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.37",
     "@tsconfig/svelte": "^3.0.0",
diff --git a/examples/vue/package.json b/examples/vue/package.json
index 2b5d52cf..0058086d 100644
--- a/examples/vue/package.json
+++ b/examples/vue/package.json
@@ -17,11 +17,11 @@
     "vue": "^3.2.25"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.0-alpha.57",
-    "@storybook/addon-essentials": "^6.5.0-alpha.57",
+    "@storybook/addon-a11y": "^6.5.0-alpha.58",
+    "@storybook/addon-essentials": "^6.5.0-alpha.58",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/test-runner": "^0.0.4",
-    "@storybook/vue3": "^6.5.0-alpha.57",
+    "@storybook/vue3": "^6.5.0-alpha.58",
     "@vitejs/plugin-vue": "^2.3.0",
     "http-server": "^14.1.0",
     "jest": "^27.5.1",
diff --git a/examples/workspaces/packages/catalog/package.json b/examples/workspaces/packages/catalog/package.json
index ba2d170c..a69e841e 100644
--- a/examples/workspaces/packages/catalog/package.json
+++ b/examples/workspaces/packages/catalog/package.json
@@ -15,11 +15,11 @@
     "react-dom": "^16.4.14"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.0-alpha.57",
-    "@storybook/addon-docs": "^6.5.0-alpha.57",
-    "@storybook/addon-essentials": "^6.5.0-alpha.57",
+    "@storybook/addon-a11y": "^6.5.0-alpha.58",
+    "@storybook/addon-docs": "^6.5.0-alpha.58",
+    "@storybook/addon-essentials": "^6.5.0-alpha.58",
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/react": "^6.5.0-alpha.57",
+    "@storybook/react": "^6.5.0-alpha.58",
     "vite": "2.9.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 91853dce..b4bcd58b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3003,18 +3003,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@npm:^6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-a11y@npm:6.5.0-alpha.57"
-  dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/channels": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+"@storybook/addon-a11y@npm:^6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-a11y@npm:6.5.0-alpha.58"
+  dependencies:
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/channels": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.58
     axe-core: ^4.2.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -3031,21 +3031,21 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 11db171ba1f762ff650acdc1f61a0c17b7fbac1d32ef050f50ac63c2bd16934430d5af7f587b1d496abd6e56c43f1017ad8ed158deb38f6719ea868c8a1f87e3
+  checksum: e22bcaa36604474241e845391667b7e344cdc94dfd76f1ac17a45770f593a5cf2742ab8f9b69063f514176e1c69554a8ca1561bb93c4f372f63a47d15cb6b25c
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:6.5.0-alpha.57, @storybook/addon-actions@npm:^6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-actions@npm:6.5.0-alpha.57"
+"@storybook/addon-actions@npm:6.5.0-alpha.58, @storybook/addon-actions@npm:^6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-actions@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.58
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -3066,21 +3066,21 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: ff3dd013f841ad20d1439ed0d72fabd5bb2cd5de03b7f5a74e38caa96ba6c03f447ead2f701faaec1df0c840e5fe7ea409205e9c21ba664f453f5395f9da62d1
+  checksum: 9e4b883aa73aa82d9ec74e01a86d649825653a3a9b39341d61bf5971d493de0cd3e608e848ba758f7996967c4ea83855e21ab38c9db299cb106d360b7e27ee04
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-backgrounds@npm:6.5.0-alpha.57"
+"@storybook/addon-backgrounds@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-backgrounds@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.58
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -3095,23 +3095,23 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 456cee21ce97938da3173ab988541700103e1a951a2d142baf902435595e6b382fa08a1e6f4bb6736120b8313965e13f45fe05dc0c899aff106686f9c84a21b1
+  checksum: d9c9704ffa3e7c19d1609d1a12232194d08898876a07c6a45e8f97acbeb41df2389082ce771232d545dca55575f3381892b46baa1a838654eeb713249ab95a9d
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-controls@npm:6.5.0-alpha.57"
+"@storybook/addon-controls@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-controls@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-common": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/node-logger": 6.5.0-alpha.57
-    "@storybook/store": 6.5.0-alpha.57
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/node-logger": 6.5.0-alpha.58
+    "@storybook/store": 6.5.0-alpha.58
+    "@storybook/theming": 6.5.0-alpha.58
     core-js: ^3.8.2
     lodash: ^4.17.21
     ts-dedent: ^2.0.0
@@ -3123,32 +3123,32 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 8cb3f14cb36e20ff9ffc5d6ea848545e2a6cd305a30b54813cff88af5de95a87d6193953f54ef14e913d7155a7561cc3e1e097039b28ea8a68a8f225aa4f025e
+  checksum: d23bcf1d3296b282436c9f8965a15998e518cee8ed558e4d3ec038699dc35e540909cf7fada3aa65a77739c0af853809f0a50fa25009b4190e4946b45fac14cf
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:6.5.0-alpha.57, @storybook/addon-docs@npm:^6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-docs@npm:6.5.0-alpha.57"
+"@storybook/addon-docs@npm:6.5.0-alpha.58, @storybook/addon-docs@npm:^6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-docs@npm:6.5.0-alpha.58"
   dependencies:
     "@babel/plugin-transform-react-jsx": ^7.12.12
     "@babel/preset-env": ^7.12.11
     "@jest/transform": ^26.6.2
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-common": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-common": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/docs-tools": 6.5.0-alpha.57
+    "@storybook/docs-tools": 6.5.0-alpha.58
     "@storybook/mdx1-csf": canary
-    "@storybook/node-logger": 6.5.0-alpha.57
-    "@storybook/postinstall": 6.5.0-alpha.57
-    "@storybook/preview-web": 6.5.0-alpha.57
-    "@storybook/source-loader": 6.5.0-alpha.57
-    "@storybook/store": 6.5.0-alpha.57
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/node-logger": 6.5.0-alpha.58
+    "@storybook/postinstall": 6.5.0-alpha.58
+    "@storybook/preview-web": 6.5.0-alpha.58
+    "@storybook/source-loader": 6.5.0-alpha.58
+    "@storybook/store": 6.5.0-alpha.58
+    "@storybook/theming": 6.5.0-alpha.58
     babel-loader: ^8.0.0
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -3170,26 +3170,26 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 2cd8aa42eb7a3ef1b84d67ff68d4471d2a65f6b2b8adab0267fada72153b32e93605949fc38172dc8a2941f3585a8e6a18c64b6e597884edc9462a1a00702631
-  languageName: node
-  linkType: hard
-
-"@storybook/addon-essentials@npm:^6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-essentials@npm:6.5.0-alpha.57"
-  dependencies:
-    "@storybook/addon-actions": 6.5.0-alpha.57
-    "@storybook/addon-backgrounds": 6.5.0-alpha.57
-    "@storybook/addon-controls": 6.5.0-alpha.57
-    "@storybook/addon-docs": 6.5.0-alpha.57
-    "@storybook/addon-measure": 6.5.0-alpha.57
-    "@storybook/addon-outline": 6.5.0-alpha.57
-    "@storybook/addon-toolbars": 6.5.0-alpha.57
-    "@storybook/addon-viewport": 6.5.0-alpha.57
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/core-common": 6.5.0-alpha.57
-    "@storybook/node-logger": 6.5.0-alpha.57
+  checksum: 1aadbf4bb70dbf44b606839969df96ad917ac8afc64bda00e34a2d8e6f93b9ef979ed80e7bdfc5988b5fee7b660452eb5c61f9596f308531a1fdc20e7dccd40a
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-essentials@npm:^6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-essentials@npm:6.5.0-alpha.58"
+  dependencies:
+    "@storybook/addon-actions": 6.5.0-alpha.58
+    "@storybook/addon-backgrounds": 6.5.0-alpha.58
+    "@storybook/addon-controls": 6.5.0-alpha.58
+    "@storybook/addon-docs": 6.5.0-alpha.58
+    "@storybook/addon-measure": 6.5.0-alpha.58
+    "@storybook/addon-outline": 6.5.0-alpha.58
+    "@storybook/addon-toolbars": 6.5.0-alpha.58
+    "@storybook/addon-viewport": 6.5.0-alpha.58
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/core-common": 6.5.0-alpha.58
+    "@storybook/node-logger": 6.5.0-alpha.58
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
@@ -3230,19 +3230,19 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: 2406e597ff4f8a7afb15223bfc5d7f5808938bda239c6c225147eb8f2f6c409eae035736e35312ff81bf4e91793ccd2ab1bc57f4b126185f394ccc627a8b24ed
+  checksum: 699cbbfc64580fba3112ffc07010c5f33c87fe3cd53e8fc6fed5d785f17e4c833ec6ce8b64e1eb9e3058f47c8a6ed695ab6f4e37394436941d3616c7eaab6d40
   languageName: node
   linkType: hard
 
-"@storybook/addon-links@npm:^6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-links@npm:6.5.0-alpha.57"
+"@storybook/addon-links@npm:^6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-links@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/router": 6.5.0-alpha.57
+    "@storybook/router": 6.5.0-alpha.58
     "@types/qs": ^6.9.5
     core-js: ^3.8.2
     global: ^4.4.0
@@ -3258,19 +3258,19 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 796dd7037ddb285659c88f2d4ab9da688f5c0e4c53d2aa0e843c597370ec4b6294d0815094e376263daa12832b91506d1f67b342b931b94a6e44d028583b01cb
+  checksum: 210b69a3a0a5537755e4ba5b0c2eed242c1ab3b9cd9cb371e6762854f260dc48c605b1fe30760c19b28c92fa2ac3ee351cd1838a513d85aa33d3bdb8f88a2264
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-measure@npm:6.5.0-alpha.57"
+"@storybook/addon-measure@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-measure@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -3282,19 +3282,19 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: e284e98cc185568e579c88e8112b25b6a0872e97d67b7d6b74c0fd3ca10157743aa3c0e027d7e5f0a9f7cf690f2dcf3a72b0437901239285a78d59a5d7c3b9d9
+  checksum: 40d052b33b69d965e7313aa3fb04738dfe9c1678dcc51e1e6c4cfcb252cec569bd4611c1174f76304d4f1b95785858a4b36bdb5facacc967484c74c3507e9421
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-outline@npm:6.5.0-alpha.57"
+"@storybook/addon-outline@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-outline@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -3308,7 +3308,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 57907335040fcb32fb0335560e65d3262227e91043e4b62022def8302b0e75ab0bb005c424c208b5fc04d6e9a9309d5cb6178117513d4c90c9405f3f64741fef
+  checksum: 7b74a311d75b2337f5b545748046228c201e7c9f37ee928cfb394b3a2c714ecd79f590fda8c063aadb8e28a170f9b67e2f6b7b12a520b26b5e0214761d42f147
   languageName: node
   linkType: hard
 
@@ -3341,15 +3341,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-toolbars@npm:6.5.0-alpha.57"
+"@storybook/addon-toolbars@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-toolbars@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/theming": 6.5.0-alpha.58
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
@@ -3360,20 +3360,20 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: fef82a50c94a14a15f1f29ffca0684e16f24335d50c6a50c5b5002bed1a64fa16b376cdf433a6edddbb114b04abc75d20eca9b28b681359930f94582bae05456
+  checksum: 9c15db7d66235ceec857cb2ffc28f3b4c8e2e5704b318ec961cb04e7e894be3332d858185d307f752301971cd1b3354f18a71e03281c86013f94b09a95e9622c
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addon-viewport@npm:6.5.0-alpha.57"
+"@storybook/addon-viewport@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addon-viewport@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
+    "@storybook/theming": 6.5.0-alpha.58
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -3387,7 +3387,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 7f935fc13f1284a1da7f63ef4b891320df9e34d603f119dfe855fd1bec4e125ba68c200fd89e9ea670b22a449cd2887f6520526631d2af8bda2da9af8d764969
+  checksum: 7577f5cb3dd8812ffa498baf146cfb0166c09d9044d6c7db2c265db5f4e66987f3a91d1e9711518c0d04344678ddb09c22ce89c9d575b678d0b2ac3f6803a6fd
   languageName: node
   linkType: hard
 
@@ -3411,17 +3411,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addons@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/addons@npm:6.5.0-alpha.57"
+"@storybook/addons@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/addons@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/channels": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/channels": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/router": 6.5.0-alpha.57
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/router": 6.5.0-alpha.58
+    "@storybook/theming": 6.5.0-alpha.58
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -3429,7 +3429,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 4c8c5040070758aba4b11ef7cf1a116b2d491d9ed96e4bbe0a8937754c52086cca2047dd6d499442e36c859c58c241ad15543b9ac9780d7118bd822c54dfcae8
+  checksum: cf7b7e89bf8d0afbee474ffd89e70de744d85f85a40b80ea5e1456b0c08b12f50d1e5a94649be0c4b06a1d47e7ccea16d32ef884d3b650ddfc2147279ab9b354
   languageName: node
   linkType: hard
 
@@ -3464,17 +3464,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/api@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/api@npm:6.5.0-alpha.57"
+"@storybook/api@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/api@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/channels": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/channels": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/router": 6.5.0-alpha.57
+    "@storybook/router": 6.5.0-alpha.58
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.58
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -3488,7 +3488,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 7bb1d0c94228d523dbc890609aed04d0e0b486eb7006663bc7f1079690d8833c9a816dc393f3feec85b78274d0655046517919f6ca0097bb2033c229ea729499
+  checksum: a456df5aaa1f6635129e266b57008315b20f1fda0a4dadf1a1153323a1d0253d2524c30dbc7aff9ce22c9a992f00c68b5d5c3ef5dd7ebca7fc51f0de332253f0
   languageName: node
   linkType: hard
 
@@ -3518,27 +3518,27 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-webpack4@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/builder-webpack4@npm:6.5.0-alpha.57"
+"@storybook/builder-webpack4@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/builder-webpack4@npm:6.5.0-alpha.58"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/channel-postmessage": 6.5.0-alpha.57
-    "@storybook/channels": 6.5.0-alpha.57
-    "@storybook/client-api": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-common": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
-    "@storybook/node-logger": 6.5.0-alpha.57
-    "@storybook/preview-web": 6.5.0-alpha.57
-    "@storybook/router": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/channel-postmessage": 6.5.0-alpha.58
+    "@storybook/channels": 6.5.0-alpha.58
+    "@storybook/client-api": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-common": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
+    "@storybook/node-logger": 6.5.0-alpha.58
+    "@storybook/preview-web": 6.5.0-alpha.58
+    "@storybook/router": 6.5.0-alpha.58
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.57
-    "@storybook/theming": 6.5.0-alpha.57
-    "@storybook/ui": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.58
+    "@storybook/theming": 6.5.0-alpha.58
+    "@storybook/ui": 6.5.0-alpha.58
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/webpack": ^4.41.26
     autoprefixer: ^9.8.6
@@ -3575,35 +3575,35 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 63efefdaff24dc8fd03c5302d0b788e073871a82525349c94344bb85d7473597ce5db3ef672935f4e3fbed03c5d30f14a9a42c46d88cdd354d36fcebbf404906
+  checksum: 60bbb1b2e1c4b206a87648d133304630b33b22254e67d6c44be7a9200ebe49b743c3e208a07380a34a3a868e4f9dd89810e6dec6fd313da0e1912192ee955e30
   languageName: node
   linkType: hard
 
-"@storybook/channel-postmessage@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/channel-postmessage@npm:6.5.0-alpha.57"
+"@storybook/channel-postmessage@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/channel-postmessage@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/channels": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/channels": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
     telejson: ^5.3.3
-  checksum: 48fef8fc91962d767aa6fd5c0c0efde4a91891859205a421043f2648f36b2733086c257a46e85f325842304ccef7030e28a3716555fbb28a68559d76ae2f4ef8
+  checksum: 37e60ed965e82c78519f835537c168b6ff74b0588e5b517397e14b717da86d8a005601beb7fa034aeae0412bd822dbb711279ab5a0b66936426142eed263a131
   languageName: node
   linkType: hard
 
-"@storybook/channel-websocket@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/channel-websocket@npm:6.5.0-alpha.57"
+"@storybook/channel-websocket@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/channel-websocket@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/channels": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/channels": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
     core-js: ^3.8.2
     global: ^4.4.0
     telejson: ^5.3.3
-  checksum: cdff9920fc9e36ba77769d62e2573c943cb0e21b4b1d4c0dde786b20188b89ccdeaa1ffb24e0011179d22ea2a4cb5dc5228bca20ecabfdd21ef82b6b7d2fafab
+  checksum: 0e119469b8219ae314250e826d9b55a625ca798a2f508f569b81746780d8f93590546ddade97e21e96f56facdfa17a97b03fea93b4526d703e1e2ec7bd63447e
   languageName: node
   linkType: hard
 
@@ -3618,28 +3618,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/channels@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/channels@npm:6.5.0-alpha.57"
+"@storybook/channels@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/channels@npm:6.5.0-alpha.58"
   dependencies:
     core-js: ^3.8.2
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
-  checksum: 0884a75fff69f7f6cdb113327f6a8d6efac92f78b8fb1f03ca1417812ae3d2fab16154090a65ec6dd9798d442f8e9578b33b33a545083ec00f95b7af06b6a9ce
+  checksum: daea811ca9620c80537de387c09059a4cfc08362c72e669e7a79e0ac1aa6b10995bf416b6dbe15a41dc0a2c626bd3fab0049227ef26a5a13270df22d9ca97c6d
   languageName: node
   linkType: hard
 
-"@storybook/client-api@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/client-api@npm:6.5.0-alpha.57"
+"@storybook/client-api@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/client-api@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/channel-postmessage": 6.5.0-alpha.57
-    "@storybook/channels": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/channel-postmessage": 6.5.0-alpha.58
+    "@storybook/channels": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.58
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -3656,7 +3656,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 269a6b3e4a08a7302a649dfb2e3bac6f651b769f8dc383d4a5df127dda8f1fe32bd0c8534eee0343d274ca3c4de4c6e03d71ad0522beba8afb34b698ad07f6e1
+  checksum: 8200b8949c6217801e8b517cbc42696f161faf739592557681079bb95aaee87ff983ff65442701b6aa9ee6b0db77b0e0f9c4ffec3bd191344b67696273e2f548
   languageName: node
   linkType: hard
 
@@ -3670,46 +3670,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/client-logger@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/client-logger@npm:6.5.0-alpha.57"
+"@storybook/client-logger@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/client-logger@npm:6.5.0-alpha.58"
   dependencies:
     core-js: ^3.8.2
     global: ^4.4.0
-  checksum: 4ae893328c3a9e7660c642c2614fed1898957f8524e3fcb8f74d3b5ecbe07252eb7dda0aa64f08f531e9b7a0195341961d1dca0ae141b1fa018e118fba81e207
+  checksum: 8c5a854d7a1159b48270152a0aebddefb3afb63287abb32c3aec939c12abf5141c7356138a44df769ebd4224681696ae77b1c293068742082bc94875a342ce4d
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/components@npm:6.5.0-alpha.57"
+"@storybook/components@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/components@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.58
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 6f7b81f613e018d0091bcc6b16a796ef32350a0ab3991e595b66de7d793bf165f8871caf25c5e239b7a7b83406f4087ba608ebc531c2c587035cbfbba6f84ee1
+  checksum: f2d2e8af71780084385299ad0f2a67bedd66cd238a0103993376ebdd8a033ae1649ebf87176bd34f63499dd659108c6e0e479c43953b89dc4f5bfb02e6ae23f3
   languageName: node
   linkType: hard
 
-"@storybook/core-client@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/core-client@npm:6.5.0-alpha.57"
+"@storybook/core-client@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/core-client@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/channel-postmessage": 6.5.0-alpha.57
-    "@storybook/channel-websocket": 6.5.0-alpha.57
-    "@storybook/client-api": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/channel-postmessage": 6.5.0-alpha.58
+    "@storybook/channel-websocket": 6.5.0-alpha.58
+    "@storybook/client-api": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/preview-web": 6.5.0-alpha.57
-    "@storybook/store": 6.5.0-alpha.57
-    "@storybook/ui": 6.5.0-alpha.57
+    "@storybook/preview-web": 6.5.0-alpha.58
+    "@storybook/store": 6.5.0-alpha.58
+    "@storybook/ui": 6.5.0-alpha.58
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -3727,13 +3727,13 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: b9db72e53bb82a779203347c13db29cb43d393cfc1fea203839dfc6feade1a59281d4e6a0bf0dc1c6c1cb7c7959091d53d670de56b8fe8a558d565f470d9c3a5
+  checksum: 570c5d46ff97fbf8752bb48da11345a8ee4c742c3a30069a89b83f95bb1ae1c78d85ee3b694b10d5eadab2b00fa19dfc0ddec707a66f7c03bcc4fab4ff17fffe
   languageName: node
   linkType: hard
 
-"@storybook/core-common@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/core-common@npm:6.5.0-alpha.57"
+"@storybook/core-common@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/core-common@npm:6.5.0-alpha.58"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-proposal-class-properties": ^7.12.1
@@ -3757,7 +3757,7 @@ __metadata:
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
     "@babel/register": ^7.12.1
-    "@storybook/node-logger": 6.5.0-alpha.57
+    "@storybook/node-logger": 6.5.0-alpha.58
     "@storybook/semver": ^7.3.2
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/pretty-hrtime": ^1.0.0
@@ -3791,7 +3791,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: a894c6e44c8d1f04898e0650b39dca0498c8ab57267077b6d124682c61e639d1520e1bb4b891969d2dfee340cab3ca54422e9db7ebcda97ec5d4e0c1f9ed84cf
+  checksum: 86ab4e45e40232302643254aaa1fee5cabade3f17d985ce35feb940b714d47f05e02472ca576ad97a7929982f6a7d7af3eb71d6c1230b9382448fa882504d503
   languageName: node
   linkType: hard
 
@@ -3804,30 +3804,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/core-events@npm:6.5.0-alpha.57"
+"@storybook/core-events@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/core-events@npm:6.5.0-alpha.58"
   dependencies:
     core-js: ^3.8.2
-  checksum: 06fa8e1dbd9d47c8937eed2dc220afbdced06aad2df0ec9e7c3f7e1c62b8789a00bb4ca36feac0f2bb97383f628f988d159265e4adb6a6e146e5bc219d22a93c
+  checksum: ecc95423320a04c2e21556d24a9f66cd4784d0e3e69948fd951ffbc582512fcf275f138680e4a766059ce651264140ebb4fa4895f1411942e42328795fb3ffb2
   languageName: node
   linkType: hard
 
-"@storybook/core-server@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/core-server@npm:6.5.0-alpha.57"
+"@storybook/core-server@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/core-server@npm:6.5.0-alpha.58"
   dependencies:
     "@discoveryjs/json-ext": ^0.5.3
-    "@storybook/builder-webpack4": 6.5.0-alpha.57
-    "@storybook/core-client": 6.5.0-alpha.57
-    "@storybook/core-common": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/builder-webpack4": 6.5.0-alpha.58
+    "@storybook/core-client": 6.5.0-alpha.58
+    "@storybook/core-common": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/csf-tools": 6.5.0-alpha.57
-    "@storybook/manager-webpack4": 6.5.0-alpha.57
-    "@storybook/node-logger": 6.5.0-alpha.57
+    "@storybook/csf-tools": 6.5.0-alpha.58
+    "@storybook/manager-webpack4": 6.5.0-alpha.58
+    "@storybook/node-logger": 6.5.0-alpha.58
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.58
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/node-fetch": ^2.5.7
     "@types/pretty-hrtime": ^1.0.0
@@ -3871,16 +3871,16 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: 3a2aebfc606b8dc2111685a33358be29b354f1f5a9a04e760327570a7aaad7d41f2ec6c802b484229ea2deafc766f82325f2e42fe49ae94957d431a302c2807b
+  checksum: 56b52bcc59d8ebb3e5ae2e1eeef5ff25e2f7771af44e7f0ebd67fabb18bbc4ba04af16656e3bd597ee163a0b40553fec00061f7414bcb4b06a562d3828f893f6
   languageName: node
   linkType: hard
 
-"@storybook/core@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/core@npm:6.5.0-alpha.57"
+"@storybook/core@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/core@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/core-client": 6.5.0-alpha.57
-    "@storybook/core-server": 6.5.0-alpha.57
+    "@storybook/core-client": 6.5.0-alpha.58
+    "@storybook/core-server": 6.5.0-alpha.58
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -3892,13 +3892,13 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: 3900560dd52b6308b912143a53116119068ec8f2219523740a87971c01f6c04dc4292d651f405fd1bd08c20105d3d3bfc45cac3e176be275767cbb9be00b9822
+  checksum: 3eef17d0e9478582a0c9f74a66a5fb42dd21b6ca04b405432cb69e2f508c60d9574ee7344017e3f6256c53efd29418ffa9dfc142218bf1d2474768ace49e1e70
   languageName: node
   linkType: hard
 
-"@storybook/csf-tools@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/csf-tools@npm:6.5.0-alpha.57"
+"@storybook/csf-tools@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/csf-tools@npm:6.5.0-alpha.58"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/generator": ^7.12.11
@@ -3919,7 +3919,7 @@ __metadata:
   peerDependenciesMeta:
     "@storybook/mdx2-csf":
       optional: true
-  checksum: 69811d6d63b491f28b7d50edc04f0562a5fd96efdf1c113f15173b7792341b6b0ab4fbc92a15d764fd7f2a7c7db5d1e498616fcb4256663bdbb3d041afa76e4f
+  checksum: bceeb38f3ee1c8924963c99a320aa8839bb2c075db4d921b8a54a2ade31a5b6c8226f0cbbe651bac8ac8deedf85ec12573288eaf5d2bcb23beeb4b94a0af6dd3
   languageName: node
   linkType: hard
 
@@ -3997,34 +3997,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/docs-tools@npm:6.5.0-alpha.57"
+"@storybook/docs-tools@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/docs-tools@npm:6.5.0-alpha.58"
   dependencies:
     "@babel/core": ^7.12.10
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.58
     core-js: ^3.8.2
     doctrine: ^3.0.0
     lodash: ^4.17.21
     regenerator-runtime: ^0.13.7
-  checksum: 629caac238981c6b5b6d22b0e1e8727818f4a66b718266a7bae18147a3af89aa806521fc97dc352847cbd5808f2a813a999591381ed8e3308a1339ef3f51f983
+  checksum: 382f2825328316d5ec894b4ba903b37c5bdfb818263d87f496bf1960f55fb4ab88d9e58fe186e42392a3c077da9a963ab241fc3ad1c75a262c0a324045aac152
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack4@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/manager-webpack4@npm:6.5.0-alpha.57"
+"@storybook/manager-webpack4@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/manager-webpack4@npm:6.5.0-alpha.58"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/core-client": 6.5.0-alpha.57
-    "@storybook/core-common": 6.5.0-alpha.57
-    "@storybook/node-logger": 6.5.0-alpha.57
-    "@storybook/theming": 6.5.0-alpha.57
-    "@storybook/ui": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/core-client": 6.5.0-alpha.58
+    "@storybook/core-common": 6.5.0-alpha.58
+    "@storybook/node-logger": 6.5.0-alpha.58
+    "@storybook/theming": 6.5.0-alpha.58
+    "@storybook/ui": 6.5.0-alpha.58
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/webpack": ^4.41.26
     babel-loader: ^8.0.0
@@ -4057,7 +4057,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 34c29a6c04c9ea475bdfeb18347c7e091cf094594acea6cc2f9eae0261a4f8ac352b6370f54356f6a1f3eb8df94191d759a8382322982be7268e7d45f724a416
+  checksum: 819f64085236682cf851ffe57378f0093dcb111b95830fc77c70854bc8edf277d7caefdce0031955a63340387e5ec62b5f725279cb44050197783b98d0bb81cd
   languageName: node
   linkType: hard
 
@@ -4080,38 +4080,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/node-logger@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/node-logger@npm:6.5.0-alpha.57"
+"@storybook/node-logger@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/node-logger@npm:6.5.0-alpha.58"
   dependencies:
     "@types/npmlog": ^4.1.2
     chalk: ^4.1.0
     core-js: ^3.8.2
     npmlog: ^5.0.1
     pretty-hrtime: ^1.0.3
-  checksum: bc932679a277f3abd2de1b3a96409618424a9235dd87bfd44a03cfef31fc3c1792ea60b14cc946adce5f36247ee731f73ae5b5bb68619b20edb16d3919ac26e7
+  checksum: 2d8620bf3ebf9e8c8f7e6d0d26bd4a714b0ce9e1661c80cb6aa45d4c93c061161c31a363faa0c4c2438bdb7bffbf8c43211500622698a04e71cc17f6f958906a
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/postinstall@npm:6.5.0-alpha.57"
+"@storybook/postinstall@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/postinstall@npm:6.5.0-alpha.58"
   dependencies:
     core-js: ^3.8.2
-  checksum: e9a6a4a5c3a20867a47b8c972ff317888b070f23a659aea8b3c1811f8808a575cbf0ef8de051aa32d7147fc1fe2a4d7c7edb9a6fd9bb34d5f7a30c7c702a9c66
+  checksum: 088cb5b500a500fdbf7fe6b5002ba4185c9b029f6c8ca4c6e959ad9d99bc411aa06a4faa45cd3577dacf23b90a3f4eaa0554103ab033be38250577af99b7346c
   languageName: node
   linkType: hard
 
-"@storybook/preview-web@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/preview-web@npm:6.5.0-alpha.57"
+"@storybook/preview-web@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/preview-web@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/channel-postmessage": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/channel-postmessage": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.58
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
     global: ^4.4.0
@@ -4125,7 +4125,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: a22f966f3c40805e4213083233852c821fe0326028b2cffd3207f7bd1fbe61197d2315cbe291bd4a9779b6f8ebcd35bf17b8fb973bb8ff899bd3993b337ce682
+  checksum: 97bcac2b61ae40ac8f6499e55c72bb62dd6329a7c53f07a65cefa60f33c218f8c0f5276764fe521c046adb41073520d13364cbea5cfc3fc5cab8fa133f11786c
   languageName: node
   linkType: hard
 
@@ -4147,23 +4147,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:^6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/react@npm:6.5.0-alpha.57"
+"@storybook/react@npm:^6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/react@npm:6.5.0-alpha.58"
   dependencies:
     "@babel/preset-flow": ^7.12.1
     "@babel/preset-react": ^7.12.10
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core": 6.5.0-alpha.57
-    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core": 6.5.0-alpha.58
+    "@storybook/core-common": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/docs-tools": 6.5.0-alpha.57
-    "@storybook/node-logger": 6.5.0-alpha.57
+    "@storybook/docs-tools": 6.5.0-alpha.58
+    "@storybook/node-logger": 6.5.0-alpha.58
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/store": 6.5.0-alpha.58
     "@types/estree": ^0.0.51
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
@@ -4174,6 +4174,7 @@ __metadata:
     babel-plugin-react-docgen: ^4.2.1
     core-js: ^3.8.2
     escodegen: ^2.0.0
+    fs-extra: ^9.0.1
     global: ^4.4.0
     html-tags: ^3.1.0
     lodash: ^4.17.21
@@ -4208,7 +4209,7 @@ __metadata:
     build-storybook: bin/build.js
     start-storybook: bin/index.js
     storybook-server: bin/index.js
-  checksum: 906236d17fd4aa8f98542df13a389699efda739d4b24e717f7b6e8a513bd5330ccc4d97478bdc7833a3c0ca6ce7b6c1ea396e3c8f29d423e89c8a51593ec8a28
+  checksum: fbffdbadd06ac1d4e295d52deec6fe2102d7b127546f7317567525e1e5ee6778ffa838aeea5ce8189bc8b964250c0b0a331057f3509e552edae3d97cc96a6487
   languageName: node
   linkType: hard
 
@@ -4233,17 +4234,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/router@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/router@npm:6.5.0-alpha.57"
+"@storybook/router@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/router@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.58
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 705ad7a36235cbdcf86edf53ceca67a178e9b7222ec2ab1047b475602d37b2032d525b421af0023b7ac657073b623202af48548da98c97cf1854bba2422b51e9
+  checksum: f86ed486366160fd4cecc835aaa684e0cc321a42130a6b08acc4ff0139167bf6726885848abb8d750b4d0c9bc613f66a2085313e70b906343da85180ecdfec53
   languageName: node
   linkType: hard
 
@@ -4259,12 +4260,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/source-loader@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/source-loader@npm:6.5.0-alpha.57"
+"@storybook/source-loader@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/source-loader@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
     core-js: ^3.8.2
     estraverse: ^5.2.0
@@ -4276,7 +4277,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 847bc20271268c9fbc70228ff37e97f943a81f29b73318155a866ae6d7dceb422ad208f690a345d92a4a46334cb242c3a0aa6dd7b5b9ff2bd5968583d8d9d03b
+  checksum: 6fb6b2ab5917c291a25a35289fe36dcd9965b7c23c58be2c4be2628c76e6d55352a297a3cf07d11b10bdaefb825bf992ce58ed241aa65ca0430c9931f7f104b4
   languageName: node
   linkType: hard
 
@@ -4301,13 +4302,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/store@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/store@npm:6.5.0-alpha.57"
+"@storybook/store@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/store@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -4323,22 +4324,22 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: af2d6446f6b2a0376b8868978347cc069b6f7815b8f2db6317c08a38a0a0e1461a4d9b226f008c8ebfa9b22b6fb8a388f4a68e0c21042266b70389d4ea5b06f9
+  checksum: d423b1494e302bc6329a4e16604327b42c8a84978a575d7ff6fce28c71bff5213a12bfbfd1b54de65e6f8a6106f27e77384de99c949a976c3a489ae4758b16a7
   languageName: node
   linkType: hard
 
-"@storybook/svelte@npm:^6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/svelte@npm:6.5.0-alpha.57"
+"@storybook/svelte@npm:^6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/svelte@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/core": 6.5.0-alpha.57
-    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/core": 6.5.0-alpha.58
+    "@storybook/core-common": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/docs-tools": 6.5.0-alpha.57
-    "@storybook/node-logger": 6.5.0-alpha.57
-    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/docs-tools": 6.5.0-alpha.58
+    "@storybook/node-logger": 6.5.0-alpha.58
+    "@storybook/store": 6.5.0-alpha.58
     core-js: ^3.8.2
     global: ^4.4.0
     loader-utils: ^2.0.0
@@ -4357,7 +4358,7 @@ __metadata:
     build-storybook: bin/build.js
     start-storybook: bin/index.js
     storybook-server: bin/index.js
-  checksum: dcd0f211033c083900ef6c5900821da97d5b22b368d54c8b5f93d7d116213ef7b2d41efa0100e29edf240db42cacad9d58a1fb8c09bcbb47dd7de6b9e875f7e0
+  checksum: 7f246632623721e7d73c57e8a4439e9d7906da59fff28e564d50e97e4d95bb7247f78d6eec6de7203e6aaaa5ba68d29239e7b216724ea464695a84cedde6f924
   languageName: node
   linkType: hard
 
@@ -4406,53 +4407,53 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/theming@npm:6.5.0-alpha.57"
+"@storybook/theming@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/theming@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/client-logger": 6.5.0-alpha.57
+    "@storybook/client-logger": 6.5.0-alpha.58
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 76d88c7a60651b2dca986dda80e98ab13c574d10b9dde44351a1fe08861a063ca59ef6b2b99473cdf9c1331fbe23a56ae4fd7a35b8dbf52a6daa8a007ad387ff
+  checksum: f20d5905229df6961057063a4dcf577d718a790e6e8e2cabf897ac1d746f1d4c1cfca161fcc2ce1e26251b552bd6a1838f35614f52fdec1d20f6970d8648ee4b
   languageName: node
   linkType: hard
 
-"@storybook/ui@npm:6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/ui@npm:6.5.0-alpha.57"
+"@storybook/ui@npm:6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/ui@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/api": 6.5.0-alpha.57
-    "@storybook/channels": 6.5.0-alpha.57
-    "@storybook/client-logger": 6.5.0-alpha.57
-    "@storybook/components": 6.5.0-alpha.57
-    "@storybook/core-events": 6.5.0-alpha.57
-    "@storybook/router": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/api": 6.5.0-alpha.58
+    "@storybook/channels": 6.5.0-alpha.58
+    "@storybook/client-logger": 6.5.0-alpha.58
+    "@storybook/components": 6.5.0-alpha.58
+    "@storybook/core-events": 6.5.0-alpha.58
+    "@storybook/router": 6.5.0-alpha.58
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.5.0-alpha.57
+    "@storybook/theming": 6.5.0-alpha.58
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
     resolve-from: ^5.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 41e66bf973c3ae23a805d963617d0aab9aade9e44d0e66bcf2df0dd3781adebf3280df87c06fcd181032cc716a5fec4372e6a4ed6a83f0597a855ad16dfb7816
+  checksum: 195e039446a7c21dbebd9bb03477a3cefe3235ab64ef53898863dce59937085668d2699c134eedcb8775999f62667600350264a9ed0e6535c2ccfdd4a1cc9601
   languageName: node
   linkType: hard
 
-"@storybook/vue3@npm:^6.5.0-alpha.57":
-  version: 6.5.0-alpha.57
-  resolution: "@storybook/vue3@npm:6.5.0-alpha.57"
+"@storybook/vue3@npm:^6.5.0-alpha.58":
+  version: 6.5.0-alpha.58
+  resolution: "@storybook/vue3@npm:6.5.0-alpha.58"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.57
-    "@storybook/core": 6.5.0-alpha.57
-    "@storybook/core-common": 6.5.0-alpha.57
+    "@storybook/addons": 6.5.0-alpha.58
+    "@storybook/core": 6.5.0-alpha.58
+    "@storybook/core-common": 6.5.0-alpha.58
     "@storybook/csf": 0.0.2--canary.7c6c115.0
-    "@storybook/docs-tools": 6.5.0-alpha.57
-    "@storybook/store": 6.5.0-alpha.57
+    "@storybook/docs-tools": 6.5.0-alpha.58
+    "@storybook/store": 6.5.0-alpha.58
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -4476,7 +4477,7 @@ __metadata:
     build-storybook: bin/build.js
     start-storybook: bin/index.js
     storybook-server: bin/index.js
-  checksum: f11f07326840fd1a099290b92007d72d782cadde876b490a6e57c1c69cb32540119276ae172e8971896119b70bec2ce177e2d7527c176af7c68c9554654c6156
+  checksum: 2921cc2665810ec11f310c45d1b6f50cc8336afc7b9e29b780e9a0c2b6dd70cec35dd82c5dfc8a6d913907d6bd30927e449efe8b423968a03c61c6996039d86c
   languageName: node
   linkType: hard
 
@@ -9422,11 +9423,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-react-18@workspace:examples/react-18"
   dependencies:
-    "@storybook/addon-a11y": ^6.5.0-alpha.57
-    "@storybook/addon-docs": ^6.5.0-alpha.57
-    "@storybook/addon-essentials": ^6.5.0-alpha.57
+    "@storybook/addon-a11y": ^6.5.0-alpha.58
+    "@storybook/addon-docs": ^6.5.0-alpha.58
+    "@storybook/addon-essentials": ^6.5.0-alpha.58
     "@storybook/builder-vite": "workspace:*"
-    "@storybook/react": ^6.5.0-alpha.57
+    "@storybook/react": ^6.5.0-alpha.58
     "@storybook/test-runner": ^0.0.4
     "@vitejs/plugin-react": ^1.3.0
     http-server: ^14.1.0
@@ -9443,11 +9444,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-react-ts@workspace:examples/react-ts"
   dependencies:
-    "@storybook/addon-a11y": ^6.5.0-alpha.57
-    "@storybook/addon-docs": ^6.5.0-alpha.57
-    "@storybook/addon-essentials": ^6.5.0-alpha.57
+    "@storybook/addon-a11y": ^6.5.0-alpha.58
+    "@storybook/addon-docs": ^6.5.0-alpha.58
+    "@storybook/addon-essentials": ^6.5.0-alpha.58
     "@storybook/builder-vite": "workspace:*"
-    "@storybook/react": ^6.5.0-alpha.57
+    "@storybook/react": ^6.5.0-alpha.58
     "@storybook/test-runner": ^0.0.4
     "@vitejs/plugin-react": ^1.3.0
     http-server: ^14.1.0
@@ -9465,11 +9466,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-react@workspace:examples/react"
   dependencies:
-    "@storybook/addon-a11y": ^6.5.0-alpha.57
-    "@storybook/addon-docs": ^6.5.0-alpha.57
-    "@storybook/addon-essentials": ^6.5.0-alpha.57
+    "@storybook/addon-a11y": ^6.5.0-alpha.58
+    "@storybook/addon-docs": ^6.5.0-alpha.58
+    "@storybook/addon-essentials": ^6.5.0-alpha.58
     "@storybook/builder-vite": "workspace:*"
-    "@storybook/react": ^6.5.0-alpha.57
+    "@storybook/react": ^6.5.0-alpha.58
     "@storybook/test-runner": ^0.0.4
     "@vitejs/plugin-react": ^1.3.0
     http-server: ^14.1.0
@@ -9486,12 +9487,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-svelte@workspace:examples/svelte"
   dependencies:
-    "@storybook/addon-actions": ^6.5.0-alpha.57
-    "@storybook/addon-essentials": ^6.5.0-alpha.57
-    "@storybook/addon-links": ^6.5.0-alpha.57
+    "@storybook/addon-actions": ^6.5.0-alpha.58
+    "@storybook/addon-essentials": ^6.5.0-alpha.58
+    "@storybook/addon-links": ^6.5.0-alpha.58
     "@storybook/addon-svelte-csf": ^1.1.0
     "@storybook/builder-vite": "workspace:*"
-    "@storybook/svelte": ^6.5.0-alpha.57
+    "@storybook/svelte": ^6.5.0-alpha.58
     "@storybook/test-runner": ^0.0.4
     "@sveltejs/vite-plugin-svelte": ^1.0.0-next.37
     "@tsconfig/svelte": ^3.0.0
@@ -9510,11 +9511,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-vue@workspace:examples/vue"
   dependencies:
-    "@storybook/addon-a11y": ^6.5.0-alpha.57
-    "@storybook/addon-essentials": ^6.5.0-alpha.57
+    "@storybook/addon-a11y": ^6.5.0-alpha.58
+    "@storybook/addon-essentials": ^6.5.0-alpha.58
     "@storybook/builder-vite": "workspace:*"
     "@storybook/test-runner": ^0.0.4
-    "@storybook/vue3": ^6.5.0-alpha.57
+    "@storybook/vue3": ^6.5.0-alpha.58
     "@vitejs/plugin-vue": ^2.3.0
     http-server: ^14.1.0
     jest: ^27.5.1
@@ -9529,11 +9530,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "example-workspaces-catalog@workspace:examples/workspaces/packages/catalog"
   dependencies:
-    "@storybook/addon-a11y": ^6.5.0-alpha.57
-    "@storybook/addon-docs": ^6.5.0-alpha.57
-    "@storybook/addon-essentials": ^6.5.0-alpha.57
+    "@storybook/addon-a11y": ^6.5.0-alpha.58
+    "@storybook/addon-docs": ^6.5.0-alpha.58
+    "@storybook/addon-essentials": ^6.5.0-alpha.58
     "@storybook/builder-vite": "workspace:*"
-    "@storybook/react": ^6.5.0-alpha.57
+    "@storybook/react": ^6.5.0-alpha.58
     react: ^16.4.14
     react-dom: ^16.4.14
     vite: 2.9.0

From dc2d7e0caa70674a33bad9a5c68c121e392901da Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 7 Apr 2022 08:50:35 -0400
Subject: [PATCH 05/11] Force update of vue-loader

---
 package.json |  3 +++
 yarn.lock    | 14 ++++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index b34f477b..7b87ed85 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,9 @@
     "example:vue": "NAME=vue yarn example",
     "example:workspaces": "NAME=workspaces yarn example"
   },
+  "resolutions": {
+    "vue-loader": "16.4.1"
+  },
   "workspaces": [
     "examples/*",
     "packages/*"
diff --git a/yarn.lock b/yarn.lock
index b4bcd58b..4d380af6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19035,14 +19035,20 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"vue-loader@npm:^16.0.0":
-  version: 16.2.0
-  resolution: "vue-loader@npm:16.2.0"
+"vue-loader@npm:16.4.1":
+  version: 16.4.1
+  resolution: "vue-loader@npm:16.4.1"
   dependencies:
     chalk: ^4.1.0
     hash-sum: ^2.0.0
     loader-utils: ^2.0.0
-  checksum: 8697786cf52c6e216e583efb522e122c00381797f0cb282bf24ef5b76c49ce9b119bd8930ce565029ef93d917ade3ec27e299de6c6a345bcbcdeab28362a15b9
+  peerDependencies:
+    "@vue/compiler-sfc": ^3.0.8
+    webpack: ^4.1.0 || ^5.0.0-0
+  peerDependenciesMeta:
+    "@vue/compiler-sfc":
+      optional: true
+  checksum: 9142b561fbdbb4c1f4a0a418be6d373efda9aaabd8a0118e1c29fc8c2b0f663102e66198e89f674f78f9a2f7c124ac964fd33042bcfe006f2cb4531a5fe122ef
   languageName: node
   linkType: hard
 

From 8066f8dfde924beaefb8936ce62151d161fbad4c Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 7 Apr 2022 08:59:51 -0400
Subject: [PATCH 06/11] Do not check for framework

Vite is trying to prebundle @storybook/react even in vue, because it's in our list of optimizeDeps.include.
We'll be able to remove it soon in another PR, when we can revisit this as well.
---
 packages/builder-vite/optimizeDeps.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/builder-vite/optimizeDeps.ts b/packages/builder-vite/optimizeDeps.ts
index 18b8c0da..b568204e 100644
--- a/packages/builder-vite/optimizeDeps.ts
+++ b/packages/builder-vite/optimizeDeps.ts
@@ -105,20 +105,18 @@ export async function getOptimizeDeps(
   options: ExtendedOptions
 ) {
   const { root } = config;
-  const { framework } = options;
   const absoluteStories = await listStories(options);
   const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));
   const resolvedConfig = await resolveConfig(config, 'serve', 'development');
 
   const exclude = [];
   // This is necessary to support react < 18 with new versions of @storybook/react that support react 18.
-  if (framework === 'react') {
-    try {
-      require.resolve('react-dom/client');
-    } catch (e) {
-      if (isNodeError(e) && e.code === 'MODULE_NOT_FOUND') {
-        exclude.push('react-dom/client');
-      }
+  // TODO: narrow this down to just framework === 'react'.  But causes a vue dev start problem in this monorepo.
+  try {
+    require.resolve('react-dom/client');
+  } catch (e) {
+    if (isNodeError(e) && e.code === 'MODULE_NOT_FOUND') {
+      exclude.push('react-dom/client');
     }
   }
 

From cce4e7ba6d46d2691cbbad353ebeb30486981bf2 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 7 Apr 2022 09:15:27 -0400
Subject: [PATCH 07/11] Remove experimental config

---
 examples/react-18/.storybook/main.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/react-18/.storybook/main.js b/examples/react-18/.storybook/main.js
index e5ecd51d..36b7d5fe 100644
--- a/examples/react-18/.storybook/main.js
+++ b/examples/react-18/.storybook/main.js
@@ -10,7 +10,6 @@ module.exports = {
   },
   async viteFinal(config, { configType }) {
     // customize the Vite config here
-    config.optimizeDeps.include = [...config.optimizeDeps.include, 'react-dom/client'];
     return config;
   },
 };

From a5f87407b9d99bd98859f28830b25520ca2d4a93 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 7 Apr 2022 10:09:04 -0400
Subject: [PATCH 08/11] Require.resolve from project root

---
 packages/builder-vite/code-generator-plugin.ts | 4 +++-
 packages/builder-vite/optimizeDeps.ts          | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/builder-vite/code-generator-plugin.ts b/packages/builder-vite/code-generator-plugin.ts
index b5a5a386..645cf461 100644
--- a/packages/builder-vite/code-generator-plugin.ts
+++ b/packages/builder-vite/code-generator-plugin.ts
@@ -15,6 +15,7 @@ import { virtualAddonSetupFile, virtualFileId, virtualPreviewFile, virtualStorie
 export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
   const iframePath = path.resolve(__dirname, '..', 'input', 'iframe.html');
   let iframeId: string;
+  let projRoot: string;
 
   // noinspection JSUnusedGlobalSymbols
   return {
@@ -50,6 +51,7 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
       }
     },
     configResolved(config) {
+      projRoot = config.root;
       iframeId = `${config.root}/iframe.html`;
     },
     resolveId(source) {
@@ -66,7 +68,7 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
         // Avoid error in react < 18 projects
       } else if (source === 'react-dom/client') {
         try {
-          return require.resolve('react-dom/client');
+          return require.resolve('react-dom/client', { paths: [projRoot] });
         } catch (e) {
           // This is not a react 18 project, need to stub out to avoid error
           return path.resolve(__dirname, '..', 'input', 'react-dom-client-placeholder.js');
diff --git a/packages/builder-vite/optimizeDeps.ts b/packages/builder-vite/optimizeDeps.ts
index b568204e..f41fa65b 100644
--- a/packages/builder-vite/optimizeDeps.ts
+++ b/packages/builder-vite/optimizeDeps.ts
@@ -113,7 +113,7 @@ export async function getOptimizeDeps(
   // This is necessary to support react < 18 with new versions of @storybook/react that support react 18.
   // TODO: narrow this down to just framework === 'react'.  But causes a vue dev start problem in this monorepo.
   try {
-    require.resolve('react-dom/client');
+    require.resolve('react-dom/client', { paths: [config.root] });
   } catch (e) {
     if (isNodeError(e) && e.code === 'MODULE_NOT_FOUND') {
       exclude.push('react-dom/client');

From 8b345e9eb4ace2c9a7871b244a8d3b26ad2b54d0 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 7 Apr 2022 10:54:42 -0400
Subject: [PATCH 09/11] Change port for react-18 example

---
 examples/react-18/package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/react-18/package.json b/examples/react-18/package.json
index 547534f3..19267c79 100644
--- a/examples/react-18/package.json
+++ b/examples/react-18/package.json
@@ -5,10 +5,10 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "start-storybook --port 6006",
+    "storybook": "start-storybook --port 6018",
     "build-storybook": "build-storybook",
-    "preview-storybook": "http-server storybook-static --port 6006 --silent",
-    "test": "wait-on tcp:6006 && test-storybook",
+    "preview-storybook": "http-server storybook-static --port 6018 --silent",
+    "test": "wait-on tcp:6018 && test-storybook",
     "test-ci": "run-p --race test preview-storybook"
   },
   "author": "",

From 37b84b28bb6da712a0af25cc9121bb8d79f1278f Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 7 Apr 2022 11:18:37 -0400
Subject: [PATCH 10/11] Print workspace names in ci jobs

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 7b87ed85..c38b8f8b 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,8 @@
     "node": ">=16.0.0"
   },
   "scripts": {
-    "build-examples": "yarn workspaces foreach --include 'example-*' -p run build-storybook",
-    "test-ci": "yarn workspaces foreach  --exclude 'example-svelte' -p run test-ci",
+    "build-examples": "yarn workspaces foreach -v --include 'example-*' -p run build-storybook",
+    "test-ci": "yarn workspaces foreach  -v --exclude 'example-svelte' -p run test-ci",
     "start": "cd packages/builder-vite && tsc -w",
     "prepublish": "cd packages/builder-vite && tsc",
     "lint": "yarn lint:prettier && yarn lint:eslint",

From 250350e56da273f633a0c347f1d957f3e77ffba6 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 7 Apr 2022 12:01:22 -0400
Subject: [PATCH 11/11] Pass url to test-storybook

---
 examples/react-18/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/react-18/package.json b/examples/react-18/package.json
index 19267c79..ba4f3163 100644
--- a/examples/react-18/package.json
+++ b/examples/react-18/package.json
@@ -8,7 +8,7 @@
     "storybook": "start-storybook --port 6018",
     "build-storybook": "build-storybook",
     "preview-storybook": "http-server storybook-static --port 6018 --silent",
-    "test": "wait-on tcp:6018 && test-storybook",
+    "test": "wait-on tcp:6018 && test-storybook --url 'http://localhost:6018'",
     "test-ci": "run-p --race test preview-storybook"
   },
   "author": "",