Repository: microsoft/griffel
Pull request #308 (2023-01-06 21:00:38)

chore: adjust error messaging for rules which don't include ampersands
With this rule:

```
rule: {
  '.my-class': {
    ...
  }
}
```

Before:

Would fail to register and emit a `console.error` message indicating something was wrong.

After

Same behavior, but the message indicates an ampersand is missing in '.my-class'.


github-actions[bot]: ## 📊 Bundle size report

<details>
<summary>Unchanged fixtures</summary>

| Package & Exports                                                                                                            |        Size (minified/GZIP) |
| ---------------------------------------------------------------------------------------------------------------------------- | --------------------------: |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeResetStyles-runtime.fixture.js'>makeResetStyles (runtime)</abbr>       |  `17.05 kB`<br />`6.321 kB` |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles + mergeClasses (build time)</abbr>       |   `2.19 kB`<br />`1.045 kB` |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStylesRuntime.fixture.js'>makeStyles + mergeClasses (runtime)</abbr>   |  `21.158 kB`<br />`7.89 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__css.fixture.js'>\_\_css + mergeClasses (build time)</abbr>              |  `2.227 kB`<br />`1.046 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__styles.fixture.js'>\_\_styles + mergeClasses (build time)</abbr>        |  `4.004 kB`<br />`1.785 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeResetStyles-runtime.fixture.js'>makeResetStyles (runtime)</abbr>      |  `18.887 kB`<br />`7.06 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStaticStyles-runtime.fixture.js'>makeStaticStyles (runtime)</abbr>    |  `9.732 kB`<br />`4.158 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStyles-runtime.fixture.js'>makeStyles + mergeClasses (runtime)</abbr> | `23.003 kB`<br />`8.596 kB` |

</details>
<sub>🤖 This report was generated against <a href='https://github.com/microsoft/griffel/commit/16250ce781f4f8329270ad83fdead9922bdfc234'>16250ce781f4f8329270ad83fdead9922bdfc234</a></sub>

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/.yarn/patches/@nrwl-js-npm-13.10.6-08130e9fbb.patch b/.yarn/patches/@nrwl-js-npm-13.10.6-08130e9fbb.patch
new file mode 100644
index 0000000..e853a93
--- /dev/null
+++ b/.yarn/patches/@nrwl-js-npm-13.10.6-08130e9fbb.patch
@@ -0,0 +1,13 @@
+diff --git a/src/utils/check-dependencies.js b/src/utils/check-dependencies.js
+index a217906583ac82d9e7881af4f02fc44f8afc04dc..ff5d6ea946c4c5b745d367f7070f00cfa166dcaa 100644
+--- a/src/utils/check-dependencies.js
++++ b/src/utils/check-dependencies.js
+@@ -5,7 +5,7 @@ const devkit_1 = require("@nrwl/devkit");
+ const buildable_libs_utils_1 = require("@nrwl/workspace/src/utilities/buildable-libs-utils");
+ function checkDependencies(context, tsConfigPath) {
+     const projectGraph = (0, devkit_1.readCachedProjectGraph)();
+-    const { target, dependencies, nonBuildableDependencies } = (0, buildable_libs_utils_1.calculateProjectDependencies)(projectGraph, context.root, context.projectName, context.targetName, context.configurationName);
++    const { target, dependencies, nonBuildableDependencies } = (0, buildable_libs_utils_1.calculateProjectDependencies)(projectGraph, context.root, context.projectName, context.targetName, context.configurationName, true);
+     const projectRoot = target.data.root;
+     if (nonBuildableDependencies.length > 0) {
+         throw new Error(`Buildable libraries can only depend on other buildable libraries. You must define the ${context.targetName} target for the following libraries: ${nonBuildableDependencies
diff --git a/.yarn/patches/@nrwl-web-npm-13.4.5-d7e9ea40d2 b/.yarn/patches/@nrwl-web-npm-13.10.6-0fda8b81ed.patch
similarity index 62%
rename from .yarn/patches/@nrwl-web-npm-13.4.5-d7e9ea40d2
rename to .yarn/patches/@nrwl-web-npm-13.10.6-0fda8b81ed.patch
index cc8cfea..8f244e2 100644
--- a/.yarn/patches/@nrwl-web-npm-13.4.5-d7e9ea40d2
+++ b/.yarn/patches/@nrwl-web-npm-13.10.6-0fda8b81ed.patch
@@ -1,16 +1,8 @@
 diff --git a/src/executors/rollup/rollup.impl.js b/src/executors/rollup/rollup.impl.js
-index b948c2e5f1228bb68fd820e396c332774322b13d..8d9f5d14aa57f8ec04d87394aa2c227533445d96 100644
+index baca3a675716434819a482ace464c4afa9e51b5f..7861137cb48e7dbf09709dfbd09517ed898a7959 100644
 --- a/src/executors/rollup/rollup.impl.js
 +++ b/src/executors/rollup/rollup.impl.js
-@@ -209,14 +209,14 @@ function createCompilerOptions(format, options, dependencies) {
-         paths: compilerOptionPaths,
-     };
-     if (format !== 'esm') {
--        return Object.assign(Object.assign({}, compilerOptions), { target: 'es5' });
-+        // return Object.assign(Object.assign({}, compilerOptions), { target: 'es5' });
-     }
-     return compilerOptions;
- }
+@@ -209,7 +209,7 @@ function createCompilerOptions(options, dependencies) {
  function updatePackageJson(options, context, target, dependencies, packageJson) {
      const entryFileTmpl = `./index.<%= extension %>.js`;
      const typingsFile = (0, path_1.relative)(options.entryRoot, options.entryFile).replace(/\.[jt]sx?$/, '.d.ts');
diff --git a/.yarn/patches/@nrwl-workspace-npm-13.4.5-233a3ec85c b/.yarn/patches/@nrwl-workspace-npm-13.4.5-233a3ec85c
deleted file mode 100644
index e7cdd2f..0000000
--- a/.yarn/patches/@nrwl-workspace-npm-13.4.5-233a3ec85c
+++ /dev/null
@@ -1,26 +0,0 @@
-diff --git a/src/core/assert-workspace-validity.js b/src/core/assert-workspace-validity.js
-index 3671fe2f138d04b58add0bf6531e166141f2eb0a..32093dad6079d6c80df4a5636803e5e4cf68234c 100644
---- a/src/core/assert-workspace-validity.js
-+++ b/src/core/assert-workspace-validity.js
-@@ -59,7 +59,7 @@ function assertWorkspaceValidity(workspaceJson, nxJson) {
- }
- exports.assertWorkspaceValidity = assertWorkspaceValidity;
- function detectAndSetInvalidProjectValues(map, sourceName, desiredProjectNames, validProjects) {
--    const invalidProjects = desiredProjectNames.filter((projectName) => !validProjects[projectName]);
-+    const invalidProjects = desiredProjectNames.filter((projectName) => !validProjects[projectName.replace('!', '')]);
-     if (invalidProjects.length > 0) {
-         map.set(sourceName, invalidProjects);
-     }
-diff --git a/src/utilities/buildable-libs-utils.js b/src/utilities/buildable-libs-utils.js
-index a3b897ae1a0f493f0d2a37598f988a6a78955f62..b22cddbcd84eca7d061b2396911b2f367307b951 100644
---- a/src/utilities/buildable-libs-utils.js
-+++ b/src/utilities/buildable-libs-utils.js
-@@ -60,7 +60,7 @@ function recursivelyCollectDependencies(project, projGraph, acc) {
-     (projGraph.dependencies[project] || []).forEach((dependency) => {
-         if (acc.indexOf(dependency.target) === -1) {
-             acc.push(dependency.target);
--            recursivelyCollectDependencies(dependency.target, projGraph, acc);
-+            // recursivelyCollectDependencies(dependency.target, projGraph, acc);
-         }
-     });
-     return acc;
diff --git a/apps/benchmark/src/implementations/inline-styles/Provider.tsx b/apps/benchmark/src/implementations/inline-styles/Provider.tsx
index 67a2a4a..9053171 100644
--- a/apps/benchmark/src/implementations/inline-styles/Provider.tsx
+++ b/apps/benchmark/src/implementations/inline-styles/Provider.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const InlineStylesProvider: React.FC = ({ children }) => {
+const InlineStylesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return <>{children}</>;
 };
 
diff --git a/apps/website/docs/react/api/make-styles.md b/apps/website/docs/react/api/make-styles.md
index b50ea7e..ab5773f 100644
--- a/apps/website/docs/react/api/make-styles.md
+++ b/apps/website/docs/react/api/make-styles.md
@@ -98,6 +98,30 @@ const useClasses = makeStyles({
 }
 ```
 
+### Pseudo-elements
+
+Griffel supports pseudo-elements like `::before` and `::after`.
+
+```ts
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    '::after': {
+      content: '""', // Note the nested quotes
+    },
+  },
+});
+```
+
+:::caution
+
+When setting content on pseudo elements, make sure to use nested quotes, e.g. `content: '"hello"'`
+
+This also applies for empty content: `content: '""'`.
+
+:::
+
 ### `:global()` selector
 
 Another useful feature is `:global()` selector, it associates local styles with global selectors.
diff --git a/apps/website/src/components/OutputTitle/index.tsx b/apps/website/src/components/OutputTitle/index.tsx
index 5578977..a90f45d 100644
--- a/apps/website/src/components/OutputTitle/index.tsx
+++ b/apps/website/src/components/OutputTitle/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { CogsIcon } from '../icons';
 import styles from './styles.module.css';
 
-const OutputTitle: React.FC = props => {
+const OutputTitle: React.FC<{ children: React.ReactNode }> = props => {
   return (
     <div className={styles['container']}>
       <CogsIcon />
diff --git a/apps/website/src/components/Playground/PlaygroundShare.tsx b/apps/website/src/components/Playground/PlaygroundShare.tsx
new file mode 100644
index 0000000..c1cb887
--- /dev/null
+++ b/apps/website/src/components/Playground/PlaygroundShare.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+export function PlaygroundShare() {
+  const [visible, setVisible] = React.useState<boolean>(false);
+
+  const handleClick = () => {
+    const url = window.location.href.toString();
+
+    window.navigator.clipboard.writeText(url).then(() => {
+      setVisible(true);
+    });
+  };
+
+  React.useEffect(() => {
+    if (visible) {
+      const timeoutId = setTimeout(() => {
+        setVisible(false);
+      }, 2000);
+
+      return () => clearTimeout(timeoutId);
+    }
+
+    return () => {};
+  }, [visible]);
+
+  return (
+    <button className="button button--sm button--secondary" onClick={handleClick}>
+      {visible ? '✅ Copied' : 'Share'}
+    </button>
+  );
+}
diff --git a/apps/website/src/components/Playground/PlaygroundUrl.ts b/apps/website/src/components/Playground/PlaygroundUrl.ts
new file mode 100644
index 0000000..aebcbb6
--- /dev/null
+++ b/apps/website/src/components/Playground/PlaygroundUrl.ts
@@ -0,0 +1,50 @@
+import { useActiveCode } from '@codesandbox/sandpack-react';
+import * as lz from 'lz-string';
+import * as React from 'react';
+
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => clearTimeout(timeoutId);
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+/**
+ * The component that checks for code modifications in the editor and updates URL to store it code there.
+ */
+export function PlaygroundUrl({ template }: { template: string }) {
+  const { code, updateCode } = useActiveCode();
+  const searchParam = useDebounce(code === template ? null : lz.compressToEncodedURIComponent(code), 400);
+
+  React.useEffect(() => {
+    const url = new URL(window.location.href);
+
+    if (searchParam) {
+      url.searchParams.set('code', searchParam);
+    } else {
+      url.searchParams.delete('code');
+    }
+
+    window.history.replaceState({}, '', url);
+  }, [searchParam]);
+
+  React.useLayoutEffect(() => {
+    const url = new URL(window.location.href);
+
+    const searchParam = url.searchParams.get('code');
+    const code = searchParam && lz.decompressFromEncodedURIComponent(searchParam);
+
+    if (code) {
+      updateCode(code);
+    }
+  }, []);
+
+  return null;
+}
diff --git a/apps/website/src/components/Playground/index.tsx b/apps/website/src/components/Playground/index.tsx
index 596760d..355ff90 100644
--- a/apps/website/src/components/Playground/index.tsx
+++ b/apps/website/src/components/Playground/index.tsx
@@ -5,6 +5,8 @@ import { useLocation } from '@docusaurus/router';
 
 import AppCode from './code/app';
 import DefaultStylesCode from './code/styles';
+import { PlaygroundUrl } from './PlaygroundUrl';
+import { PlaygroundShare } from './PlaygroundShare';
 
 const ctx = require.context('./code/templates', false, /\.js$/);
 
@@ -25,30 +27,38 @@ export default function Playground() {
   const template = templates[location.hash.slice(1)] ?? DefaultStylesCode;
 
   return (
-    <SandpackProvider
-      theme={oceanBlue}
-      template="react"
-      files={{
-        '/App.js': {
-          // "AppCode" is a string as it's processed by "raw-loader", see "webpackLoader.js"
-          code: AppCode as unknown as string,
-          hidden: true,
-        },
-        // Template files are in JS but type checked, don't want unnecessary comments leaking into docs
-        '/styles.js': { code: template, active: true },
-      }}
-      customSetup={{
-        dependencies: {
-          '@griffel/core': 'latest',
-          'highlight.js': 'latest',
-          'js-beautify': 'latest',
-        },
-      }}
-    >
-      <SandpackLayout>
-        <SandpackCodeEditor showLineNumbers style={{ height: PLAYGROUND_HEIGHT }} />
-        <SandpackPreview style={{ height: PLAYGROUND_HEIGHT }} showOpenInCodeSandbox={false} />
-      </SandpackLayout>
-    </SandpackProvider>
+    <>
+      <SandpackProvider
+        theme={oceanBlue}
+        template="react"
+        files={{
+          '/App.js': {
+            // "AppCode" is a string as it's processed by "raw-loader", see "webpackLoader.js"
+            code: AppCode as unknown as string,
+            hidden: true,
+          },
+          // Template files are in JS but type checked, don't want unnecessary comments leaking into docs
+          '/styles.js': { code: template, active: true },
+        }}
+        customSetup={{
+          dependencies: {
+            '@griffel/core': 'latest',
+            'highlight.js': 'latest',
+            'js-beautify': 'latest',
+          },
+        }}
+      >
+        <SandpackLayout>
+          <SandpackCodeEditor showLineNumbers style={{ height: PLAYGROUND_HEIGHT }} />
+          <SandpackPreview style={{ height: PLAYGROUND_HEIGHT }} showOpenInCodeSandbox={false} />
+        </SandpackLayout>
+
+        <PlaygroundUrl template={template} />
+      </SandpackProvider>
+
+      <div className="margin-top--xs" style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <PlaygroundShare />
+      </div>
+    </>
   );
 }
diff --git a/change/@griffel-core-d096f264-8c73-426c-b236-bcbf30ad8f49.json b/change/@griffel-core-d096f264-8c73-426c-b236-bcbf30ad8f49.json
new file mode 100644
index 0000000..d9baab6
--- /dev/null
+++ b/change/@griffel-core-d096f264-8c73-426c-b236-bcbf30ad8f49.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adjust console logging to emit a more descriptive error message",
+  "packageName": "@griffel/core",
+  "email": "dzearing@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@griffel-webpack-extraction-plugin-571baa73-c908-4cab-ad28-73d69aaed382.json b/change/@griffel-webpack-extraction-plugin-571baa73-c908-4cab-ad28-73d69aaed382.json
new file mode 100644
index 0000000..19c0149
--- /dev/null
+++ b/change/@griffel-webpack-extraction-plugin-571baa73-c908-4cab-ad28-73d69aaed382.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use typings for @babel/helper-module-imports",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@griffel-webpack-extraction-plugin-f9a0e45f-28d4-4e43-99e9-7783f2eace29.json b/change/@griffel-webpack-extraction-plugin-f9a0e45f-28d4-4e43-99e9-7783f2eace29.json
new file mode 100644
index 0000000..4383856
--- /dev/null
+++ b/change/@griffel-webpack-extraction-plugin-f9a0e45f-28d4-4e43-99e9-7783f2eace29.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: support aliased imports",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/nx.json b/nx.json
index 98609e9..ec76fb5 100644
--- a/nx.json
+++ b/nx.json
@@ -9,7 +9,7 @@
   },
   "tasksRunnerOptions": {
     "default": {
-      "runner": "@nrwl/workspace/tasks-runners/default",
+      "runner": "nx/tasks-runners/default",
       "options": {
         "cacheableOperations": ["build", "lint", "test", "e2e", "build-storybook", "type-check"]
       }
diff --git a/package.json b/package.json
index 7250507..faeed1e 100644
--- a/package.json
+++ b/package.json
@@ -33,45 +33,47 @@
     "@docusaurus/module-type-aliases": "2.1.0",
     "@docusaurus/preset-classic": "2.1.0",
     "@emotion/css": "^11.9.0",
-    "@nrwl/cli": "13.4.5",
-    "@nrwl/eslint-plugin-nx": "13.4.5",
-    "@nrwl/jest": "13.4.5",
-    "@nrwl/js": "13.4.5",
-    "@nrwl/linter": "13.4.5",
-    "@nrwl/node": "13.4.5",
-    "@nrwl/react": "13.4.5",
-    "@nrwl/storybook": "13.4.5",
-    "@nrwl/tao": "13.4.5",
-    "@nrwl/web": "13.4.5",
-    "@nrwl/workspace": "13.4.5",
+    "@nrwl/cli": "13.10.6",
+    "@nrwl/eslint-plugin-nx": "13.10.6",
+    "@nrwl/jest": "13.10.6",
+    "@nrwl/js": "13.10.6",
+    "@nrwl/linter": "13.10.6",
+    "@nrwl/node": "13.10.6",
+    "@nrwl/react": "13.10.6",
+    "@nrwl/storybook": "13.10.6",
+    "@nrwl/web": "13.10.6",
+    "@nrwl/workspace": "13.10.6",
     "@storybook/addon-essentials": "~6.4.5",
     "@storybook/builder-webpack5": "~6.4.5",
+    "@storybook/core-server": "6.4.22",
     "@storybook/manager-webpack5": "~6.4.5",
     "@storybook/react": "~6.4.5",
     "@svgr/webpack": "^5.4.0",
     "@testing-library/jest-dom": "5.16.1",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/react": "13.0.0",
     "@testing-library/react-hooks": "7.0.2",
     "@tsconfig/docusaurus": "^1.0.4",
+    "@types/babel__helper-module-imports": "7.18.0",
     "@types/babel__helper-plugin-utils": "7.10.0",
     "@types/chrome": "0.0.180",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/jest": "27.0.2",
     "@types/js-beautify": "^1.13.3",
+    "@types/lz-string": "1.3.34",
     "@types/mini-css-extract-plugin": "2.5.1",
     "@types/node": "14.14.33",
-    "@types/react": "17.0.30",
-    "@types/react-dom": "17.0.9",
+    "@types/react": "18.0.0",
+    "@types/react-dom": "18.0.0",
     "@types/stylis": "4.0.2",
     "@types/tmp": "0.2.3",
     "@types/webpack-env": "^1.17.0",
     "@types/yargs": "^17.0.10",
-    "@typescript-eslint/eslint-plugin": "~5.3.0",
-    "@typescript-eslint/parser": "~5.3.0",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/parser": "5.18.0",
     "babel-jest": "27.2.3",
     "babel-loader": "8.1.0",
     "babel-plugin-annotate-pure-calls": "0.4.0",
-    "babel-plugin-tester": "10.0.0",
+    "babel-plugin-tester": "11.0.0",
     "beachball": "2.31.5",
     "bestzip": "2.2.0",
     "d3-scale-chromatic": "^3.0.0",
@@ -79,19 +81,20 @@
     "esbuild": "^0.14.43",
     "esbuild-plugin-alias": "^0.2.1",
     "esbuild-plugin-import-glob": "^0.1.1",
-    "eslint": "8.2.0",
+    "eslint": "8.12.0",
     "eslint-config-prettier": "8.1.0",
     "eslint-import-resolver-typescript": "2.5.0",
-    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-react": "7.27.0",
-    "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "4.4.0",
     "highlight.js": "11.4.0",
     "jest": "27.2.3",
     "jest-chrome": "^0.7.2",
     "js-beautify": "^1.14.0",
     "log-symbols": "4.1.0",
+    "lz-string": "1.4.4",
     "mdx-mermaid": "1.3.2",
     "mermaid": "9.1.7",
     "mini-css-extract-plugin": "2.6.0",
@@ -99,23 +102,25 @@
     "monosize-storage-upstash": "0.0.8",
     "nano-staged": "0.5.0",
     "next": "12.2.4",
-    "prettier": "2.3.1",
+    "nx": "13.10.6",
+    "prettier": "2.8.2",
     "prism-react-renderer": "1.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-is": "18.0.0",
     "react-test-renderer": "17.0.2",
     "simple-git-hooks": "2.7.0",
-    "swc-node": "1.0.0",
     "syncpack": "6.2.0",
     "tmp": "0.2.1",
     "ts-jest": "27.0.5",
-    "typescript": "~4.5.2",
+    "typescript": "4.7.4",
     "url-loader": "^3.0.0",
     "yargs": "^17.5.1"
   },
   "dependencies": {
     "@babel/core": "^7.12.13",
     "@babel/generator": "^7.12.13",
+    "@babel/helper-module-imports": "^7.12.13",
     "@babel/helper-plugin-utils": "^7.12.13",
     "@babel/template": "^7.12.13",
     "@babel/traverse": "^7.12.13",
@@ -135,8 +140,8 @@
   },
   "resolutions": {
     "@docusaurus/theme-common@2.1.0": "patch:@docusaurus/theme-common@npm:2.1.0#.yarn/patches/@docusaurus-theme-common-npm-2.1.0-d5ae2a9539.patch",
-    "@nrwl/web": "patch:@nrwl/web@npm:13.4.5#.yarn/patches/@nrwl-web-npm-13.4.5-d7e9ea40d2",
-    "@nrwl/workspace": "patch:@nrwl/workspace@npm:13.4.5#.yarn/patches/@nrwl-workspace-npm-13.4.5-233a3ec85c",
+    "@nrwl/js@13.10.6": "patch:@nrwl/js@npm:13.10.6#.yarn/patches/@nrwl-js-npm-13.10.6-08130e9fbb.patch",
+    "@nrwl/web@13.10.6": "patch:@nrwl/web@npm:13.10.6#.yarn/patches/@nrwl-web-npm-13.10.6-0fda8b81ed.patch",
     "beachball@2.31.5": "patch:beachball@npm:2.31.5#.yarn/patches/beachball-npm-2.31.5-0e84ec4233.patch",
     "source-map-js@1.0.2": "patch:source-map-js@npm:1.0.2#.yarn/patches/source-map-js-npm-1.0.2-ee4f9f9b30.patch"
   }
diff --git a/packages/babel-preset/project.json b/packages/babel-preset/project.json
index bee1dc8..22be1d1 100644
--- a/packages/babel-preset/project.json
+++ b/packages/babel-preset/project.json
@@ -20,7 +20,7 @@
       }
     },
     "build": {
-      "executor": "@nrwl/node:package",
+      "executor": "@nrwl/js:tsc",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/packages/babel-preset",
diff --git a/packages/core/src/runtime/resolveResetStyleRules.ts b/packages/core/src/runtime/resolveResetStyleRules.ts
index 3f56929..ea85cba 100644
--- a/packages/core/src/runtime/resolveResetStyleRules.ts
+++ b/packages/core/src/runtime/resolveResetStyleRules.ts
@@ -11,6 +11,7 @@ import { isObject } from './utils/isObject';
 import { hyphenateProperty } from './utils/hyphenateProperty';
 import { compileCSSRules, normalizePseudoSelector } from './compileCSS';
 import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS';
+import { warnAboutUnresolvedRule } from './warnAboutUnresolvedRule';
 
 /**
  * @internal
@@ -119,8 +120,7 @@ function createStringFromStyles(styles: GriffelResetStyle) {
     }
 
     if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.error(`Please fix the unresolved style rule: \n ${property} \n ${JSON.stringify(value, null, 2)}"`);
+      warnAboutUnresolvedRule(property, value);
     }
   }
 
diff --git a/packages/core/src/runtime/resolveStyleRules.ts b/packages/core/src/runtime/resolveStyleRules.ts
index 8ad8a1c..91a2fb7 100644
--- a/packages/core/src/runtime/resolveStyleRules.ts
+++ b/packages/core/src/runtime/resolveStyleRules.ts
@@ -1,7 +1,7 @@
 import hashString from '@emotion/hash';
 import { convert, convertProperty } from 'rtl-css-js/core';
 
-import { HASH_PREFIX } from '../constants';
+import { HASH_PREFIX, UNSUPPORTED_CSS_PROPERTIES } from '../constants';
 import {
   GriffelStyle,
   CSSClassesMap,
@@ -22,7 +22,7 @@ import { isObject } from './utils/isObject';
 import { getStyleBucketName } from './getStyleBucketName';
 import { hashClassName } from './utils/hashClassName';
 import { hashPropertyKey } from './utils/hashPropertyKey';
-import { UNSUPPORTED_CSS_PROPERTIES } from '..';
+import { warnAboutUnresolvedRule } from './warnAboutUnresolvedRule';
 
 function pushToClassesMap(
   classesMap: CSSClassesMap,
@@ -320,8 +320,7 @@ export function resolveStyleRules(
         );
       } else {
         if (process.env.NODE_ENV !== 'production') {
-          // eslint-disable-next-line no-console
-          console.error(`Please fix the unresolved style rule: \n ${property} \n ${JSON.stringify(value, null, 2)}"`);
+          warnAboutUnresolvedRule(property, value);
         }
       }
     }
diff --git a/packages/core/src/runtime/warnAboutUnresolvedRule.ts b/packages/core/src/runtime/warnAboutUnresolvedRule.ts
new file mode 100644
index 0000000..372d348
--- /dev/null
+++ b/packages/core/src/runtime/warnAboutUnresolvedRule.ts
@@ -0,0 +1,34 @@
+import type { GriffelResetStyle, GriffelStyle } from '../types';
+
+export function warnAboutUnresolvedRule(property: string, value: GriffelStyle | GriffelResetStyle) {
+  const ruleText = JSON.stringify(value, null, 2);
+  const message: string[] = [
+    '@griffel/react: A rule was not resolved to CSS properly. ' +
+      'Please check your `makeStyles` or `makeResetStyles` calls for following:',
+    ' '.repeat(2) + 'makeStyles({',
+    ' '.repeat(4) + `[slot]: {`,
+    ' '.repeat(6) +
+      `"${property}": ${ruleText
+        .split('\n')
+        .map((l, n) => ' '.repeat(n === 0 ? 0 : 6) + l)
+        .join('\n')}`,
+    ' '.repeat(4) + '}',
+    ' '.repeat(2) + `})`,
+    '',
+  ];
+
+  if (property.indexOf('&') === -1) {
+    message.push(
+      `It looks that you're are using a nested selector, but it is missing an ampersand placeholder where the generated class name should be injected.`,
+    );
+    message.push(`Try to update a property to include it i.e "${property}" => "&${property}".`);
+  } else {
+    message.push('');
+    message.push(
+      "If it's not obvious what triggers a problem, please report an issue at https://github.com/microsoft/griffel/issues",
+    );
+  }
+
+  // eslint-disable-next-line no-console
+  console.error(message.join('\n'));
+}
diff --git a/packages/eslint-plugin/project.json b/packages/eslint-plugin/project.json
index f64f373..10dd623 100644
--- a/packages/eslint-plugin/project.json
+++ b/packages/eslint-plugin/project.json
@@ -19,7 +19,7 @@
       }
     },
     "build": {
-      "executor": "@nrwl/node:package",
+      "executor": "@nrwl/js:tsc",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/packages/eslint-plugin",
@@ -40,7 +40,11 @@
       "executor": "@nrwl/workspace:run-commands",
       "options": {
         "cwd": "packages/babel-preset",
-        "commands": [{ "command": "tsc -b --pretty" }],
+        "commands": [
+          {
+            "command": "tsc -b --pretty"
+          }
+        ],
         "outputPath": []
       }
     }
diff --git a/packages/jest-serializer/project.json b/packages/jest-serializer/project.json
index cbd5f73..7522a68 100644
--- a/packages/jest-serializer/project.json
+++ b/packages/jest-serializer/project.json
@@ -20,7 +20,7 @@
       }
     },
     "build": {
-      "executor": "@nrwl/node:package",
+      "executor": "@nrwl/js:tsc",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/packages/jest-serializer",
diff --git a/packages/next-extraction-plugin/project.json b/packages/next-extraction-plugin/project.json
index 4e83b1f..ea987e0 100644
--- a/packages/next-extraction-plugin/project.json
+++ b/packages/next-extraction-plugin/project.json
@@ -19,7 +19,7 @@
       }
     },
     "build": {
-      "executor": "@nrwl/node:package",
+      "executor": "@nrwl/js:tsc",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/packages/next-extraction-plugin",
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts
new file mode 100644
index 0000000..44ef1b6
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts
@@ -0,0 +1,11 @@
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
+  {
+    root: {
+      sj55zd: 'fe3e8s9',
+    },
+  },
+  {
+    d: ['.fe3e8s9{color:red;}'],
+  },
+);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts
new file mode 100644
index 0000000..20720d2
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts
@@ -0,0 +1,7 @@
+import { __css as _css } from '@griffel/react';
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _css({
+  root: {
+    sj55zd: 'fe3e8s9',
+  },
+});
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts
index 2a6fcfd..8f76c12 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts
@@ -1,5 +1,6 @@
-import { __styles, __css } from '@griffel/react';
-export const styles = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const styles = _css({
   root: {
     sj55zd: 'fe3e8s9',
     uwmqm3: ['fycuoez', 'f8wuabp'],
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts
index ebb2ab3..f7fb91a 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts
@@ -1,7 +1,9 @@
-import { __resetStyles, __styles, __resetCSS, __css } from '@griffel/react';
-export const useClasses = __css({
+import { __css as _css } from '@griffel/react';
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles, __styles } from '@griffel/react';
+export const useClasses = _css({
   root: {
     sj55zd: 'fe3e8s9',
   },
 });
-export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+export const useClassName = _resetCSS('rjefjbm', 'r7z97ji');
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts
index 9669953..74619f9 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts
@@ -1,10 +1,11 @@
-import { __styles, __css } from '@griffel/react';
-export const stylesA = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const stylesA = _css({
   root: {
     sj55zd: 'fe3e8s9',
   },
 });
-export const stylesB = __css({
+export const stylesB = _css({
   root: {
     De3pzq: 'fcnqdeg',
   },
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts
index d5a616d..5d8ef95 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts
@@ -1,2 +1,3 @@
-import { __resetStyles, __resetCSS } from '@griffel/react';
-export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles } from '@griffel/react';
+export const useClassName = _resetCSS('rjefjbm', 'r7z97ji');
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts
index b53ab79..f727873 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts
@@ -1,5 +1,6 @@
-import { __styles, __css } from '@griffel/react';
-export const useStyles = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const useStyles = _css({
   root: {
     Bcmaq0h: 'fp00rh9',
   },
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts
index ac34f90..6d076e4 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts
@@ -1,5 +1,6 @@
-import { __styles, __css } from '@griffel/react';
-export const useStyles = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const useStyles = _css({
   root: {
     Bcmaq0h: 'fnwsaxv',
   },
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts
index dd51f76..fd6229b 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts
@@ -1,5 +1,6 @@
-import { __styles, __css } from '@griffel/react';
-export const styles = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const styles = _css({
   root: {
     sj55zd: 'fe3e8s9',
     uwmqm3: ['fycuoez', 'f8wuabp'],
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts
index c43ec4d..49a406d 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts
@@ -1,9 +1,11 @@
-import { __resetStyles, __styles, __resetCSS, __css } from '@griffel/react';
-export const useClasses = __css({
+import { __css as _css } from '@griffel/react';
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles, __styles } from '@griffel/react';
+export const useClasses = _css({
   root: {
     sj55zd: 'fe3e8s9',
   },
 });
-export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+export const useClassName = _resetCSS('rjefjbm', 'r7z97ji');
 
-require('./code.griffel.css!=!../../../virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.fe3e8s9%7Bcolor%3Ared%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A%2F**%20%40griffel%3Acss-start%20%5Br%5D%20**%2F%0A.rjefjbm%7Bcolor%3Ared%3Bpadding-left%3A4px%3B%7D.r7z97ji%7Bcolor%3Ared%3Bpadding-right%3A4px%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./code.ts');
+require('./code.griffel.css!=!../../../virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Br%5D%20**%2F%0A.rjefjbm%7Bcolor%3Ared%3Bpadding-left%3A4px%3B%7D.r7z97ji%7Bcolor%3Ared%3Bpadding-right%3A4px%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.fe3e8s9%7Bcolor%3Ared%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./code.ts');
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts
index 691b6b6..3155418 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts
@@ -1,10 +1,11 @@
-import { __styles, __css } from '@griffel/react';
-export const stylesA = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const stylesA = _css({
   root: {
     sj55zd: 'fe3e8s9',
   },
 });
-export const stylesB = __css({
+export const stylesB = _css({
   root: {
     De3pzq: 'fcnqdeg',
   },
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts
index b2c42e3..9ebc58c 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts
@@ -1,4 +1,5 @@
-import { __resetStyles, __resetCSS } from '@griffel/react';
-export const useClassName = __resetCSS('ra9m047', null);
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles } from '@griffel/react';
+export const useClassName = _resetCSS('ra9m047', null);
 
 require('./code.griffel.css!=!../../../virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Br%5D%20**%2F%0A.ra9m047%7Bbackground-image%3Aurl(.%2Fblank.jpg)%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./code.ts');
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts
index 585a40e..cb2e407 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts
@@ -1,4 +1,5 @@
-import { __resetStyles, __resetCSS } from '@griffel/react';
-export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles } from '@griffel/react';
+export const useClassName = _resetCSS('rjefjbm', 'r7z97ji');
 
 require('./code.griffel.css!=!../../../virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Br%5D%20**%2F%0A.rjefjbm%7Bcolor%3Ared%3Bpadding-left%3A4px%3B%7D.r7z97ji%7Bcolor%3Ared%3Bpadding-right%3A4px%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./code.ts');
diff --git a/packages/webpack-extraction-plugin/package.json b/packages/webpack-extraction-plugin/package.json
index ef384f8..be9a609 100644
--- a/packages/webpack-extraction-plugin/package.json
+++ b/packages/webpack-extraction-plugin/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.13",
+    "@babel/helper-module-imports": "^7.12.13",
     "@babel/helper-plugin-utils": "^7.12.13",
     "stylis": "^4.0.13",
     "tslib": "^2.1.0"
diff --git a/packages/webpack-extraction-plugin/project.json b/packages/webpack-extraction-plugin/project.json
index 0afcbde..f275162 100644
--- a/packages/webpack-extraction-plugin/project.json
+++ b/packages/webpack-extraction-plugin/project.json
@@ -19,7 +19,7 @@
       }
     },
     "build": {
-      "executor": "@nrwl/node:package",
+      "executor": "@nrwl/js:tsc",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/packages/webpack-extraction-plugin",
diff --git a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts
index dc17c87..c27e954 100644
--- a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts
+++ b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts
@@ -1,4 +1,5 @@
 import { NodePath, PluginObj, PluginPass, types as t } from '@babel/core';
+import { addNamed } from '@babel/helper-module-imports';
 import { declare } from '@babel/helper-plugin-utils';
 import type { CSSRulesByBucket } from '@griffel/core';
 
@@ -24,6 +25,156 @@ function concatCSSRulesByBucket(bucketA: CSSRulesByBucket = {}, bucketB: CSSRule
   return bucketA;
 }
 
+function evaluateAndUpdateArgument(
+  argumentPath: NodePath<t.ObjectExpression> | NodePath<t.ArrayExpression>,
+  functionKind: FunctionKinds,
+  state: StripRuntimeBabelPluginState,
+) {
+  // Returns the styles as a JavaScript object
+  const evaluationResult = argumentPath.evaluate();
+
+  if (!evaluationResult.confident) {
+    throw argumentPath.buildCodeFrameError(
+      [
+        `Failed to evaluate CSS rules from "${functionKind}" call.`,
+        'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
+      ].join(' '),
+    );
+  }
+
+  if (functionKind === '__styles') {
+    const cssRulesByBucket = evaluationResult.value as CSSRulesByBucket;
+
+    state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, cssRulesByBucket);
+  } else if (functionKind === '__resetStyles') {
+    const cssRules = evaluationResult.value as NonNullable<CSSRulesByBucket['r']>;
+
+    state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, { r: cssRules });
+  }
+
+  argumentPath.remove();
+}
+
+function getFunctionArgumentPath(
+  callExpressionPath: NodePath<t.CallExpression>,
+  functionKind: FunctionKinds,
+): NodePath<t.ObjectExpression> | NodePath<t.ArrayExpression> | null {
+  const argumentPaths = callExpressionPath.get('arguments');
+
+  if (functionKind === '__styles') {
+    if (argumentPaths.length === 2 && argumentPaths[1].isObjectExpression()) {
+      return argumentPaths[1];
+    }
+  }
+
+  if (functionKind === '__resetStyles') {
+    if (argumentPaths.length === 3 && argumentPaths[2].isArrayExpression()) {
+      return argumentPaths[2];
+    }
+  }
+
+  return null;
+}
+
+function getReferencePaths(
+  specifierPath: NodePath<t.ImportSpecifier>,
+  functionKind: FunctionKinds,
+): NodePath<t.Node>[] {
+  const importedPath = specifierPath.get('imported');
+
+  if (importedPath.isIdentifier({ name: functionKind })) {
+    const localPath = specifierPath.get('local');
+    const programPath = specifierPath.findParent(p => p.isProgram())!;
+
+    const importBinding = programPath.scope.getBinding(localPath.node.name);
+
+    if (importBinding) {
+      return importBinding.referencePaths;
+    }
+  }
+
+  return [];
+}
+
+function inlineAssetImports(argumentPath: NodePath<t.ObjectExpression> | NodePath<t.ArrayExpression>) {
+  argumentPath.traverse({
+    TemplateLiteral(literalPath) {
+      const expressionPaths = literalPath.get('expressions');
+
+      expressionPaths.map(expressionPath => {
+        if (Array.isArray(expressionPath) || !expressionPath.isIdentifier()) {
+          throw literalPath.buildCodeFrameError(
+            [
+              'A template literal with an imported asset should contain an expression statement.',
+              'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
+            ].join(' '),
+          );
+        }
+
+        const expressionName = expressionPath.node.name;
+        const expressionBinding = literalPath.scope.getBinding(expressionName);
+
+        if (typeof expressionBinding === 'undefined') {
+          throw expressionPath.buildCodeFrameError(
+            [
+              'Failed to resolve a binding in a scope for an identifier.',
+              'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
+            ].join(' '),
+          );
+        }
+
+        const importDeclarationPath = expressionBinding.path.findParent(p =>
+          p.isImportDeclaration(),
+        ) as NodePath<t.ImportDeclaration> | null;
+
+        if (importDeclarationPath === null) {
+          throw expressionBinding.path.buildCodeFrameError(
+            [
+              'Failed to resolve an import for the identifier.',
+              'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
+            ].join(' '),
+          );
+        }
+
+        expressionPath.replaceWith(t.stringLiteral(importDeclarationPath.get('source').node.value));
+        importDeclarationPath.remove();
+      });
+    },
+  });
+}
+
+function updateCalleeName(callExpressionPath: NodePath<t.CallExpression>, importName: string) {
+  const calleePath = callExpressionPath.get('callee');
+
+  calleePath.replaceWith(t.identifier(importName));
+}
+
+function updateReferences(
+  state: StripRuntimeBabelPluginState,
+  importSpecifierPath: NodePath<t.ImportSpecifier>,
+  importSource: string,
+  functionKind: FunctionKinds,
+) {
+  const importName = functionKind === '__styles' ? '__css' : '__resetCSS';
+  const importIdentifier = addNamed(importSpecifierPath, importName, importSource);
+
+  const referencePaths = getReferencePaths(importSpecifierPath, functionKind);
+
+  for (const referencePath of referencePaths) {
+    if (referencePath.parentPath?.isCallExpression()) {
+      const callExpressionPath = referencePath.parentPath;
+      const argumentPath = getFunctionArgumentPath(callExpressionPath, functionKind);
+
+      if (argumentPath) {
+        inlineAssetImports(argumentPath);
+        evaluateAndUpdateArgument(argumentPath, functionKind, state);
+
+        updateCalleeName(callExpressionPath, importIdentifier.name);
+      }
+    }
+  }
+}
+
 export const babelPluginStripGriffelRuntime = declare<
   Partial<StripRuntimeBabelPluginOptions>,
   PluginObj<StripRuntimeBabelPluginState>
@@ -55,144 +206,15 @@ export const babelPluginStripGriffelRuntime = declare<
           path.traverse({
             ImportSpecifier(path) {
               const importedPath = path.get('imported');
-              let functionKind: FunctionKinds;
+
+              const importSourcePath = (path.parentPath as NodePath<t.ImportDeclaration>).get('source');
+              const importSource = importSourcePath.node.value;
 
               if (importedPath.isIdentifier({ name: '__styles' })) {
-                functionKind = '__styles';
+                updateReferences(state, path, importSource, '__styles');
               } else if (importedPath.isIdentifier({ name: '__resetStyles' })) {
-                functionKind = '__resetStyles';
-              } else {
-                return;
+                updateReferences(state, path, importSource, '__resetStyles');
               }
-
-              const declarationPath = path.findParent(p =>
-                p.isImportDeclaration(),
-              ) as NodePath<t.ImportDeclaration> | null;
-
-              if (declarationPath === null) {
-                throw path.buildCodeFrameError(
-                  [
-                    'Failed to find "ImportDeclaration" path for an "ImportSpecifier".',
-                    'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                  ].join(' '),
-                );
-              }
-
-              if (functionKind === '__styles') {
-                declarationPath.pushContainer('specifiers', t.identifier('__css'));
-              }
-
-              if (functionKind === '__resetStyles') {
-                declarationPath.pushContainer('specifiers', t.identifier('__resetCSS'));
-              }
-            },
-
-            /**
-             * Visits all call expressions (__styles function calls):
-             * - replaces "__styles" calls "__css"
-             * - removes CSS rules from "__styles" calls
-             */
-            CallExpression(path) {
-              const calleePath = path.get('callee');
-              const argumentPaths = path.get('arguments');
-
-              let argumentPath: typeof argumentPaths[number];
-              let functionKind: FunctionKinds;
-
-              if (calleePath.isIdentifier({ name: '__styles' })) {
-                argumentPath = argumentPaths[1];
-                functionKind = '__styles';
-
-                calleePath.replaceWith(t.identifier('__css'));
-              } else if (calleePath.isIdentifier({ name: '__resetStyles' })) {
-                argumentPath = argumentPaths[2];
-                functionKind = '__resetStyles';
-
-                calleePath.replaceWith(t.identifier('__resetCSS'));
-              } else {
-                return;
-              }
-
-              if (
-                (functionKind === '__styles' && argumentPaths.length !== 2) ||
-                (functionKind === '__resetStyles' && argumentPaths.length !== 3)
-              ) {
-                throw calleePath.buildCodeFrameError(
-                  [
-                    `"${functionKind}" function call should have exactly ${argumentPaths.length} arguments.`,
-                    'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                  ].join(' '),
-                );
-              }
-
-              argumentPath.traverse({
-                TemplateLiteral(literalPath) {
-                  const expressionPaths = literalPath.get('expressions');
-
-                  expressionPaths.map(expressionPath => {
-                    if (Array.isArray(expressionPath) || !expressionPath.isIdentifier()) {
-                      throw literalPath.buildCodeFrameError(
-                        [
-                          'A template literal with an imported asset should contain an expression statement.',
-                          'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                        ].join(' '),
-                      );
-                    }
-
-                    const expressionName = expressionPath.node.name;
-                    const expressionBinding = literalPath.scope.getBinding(expressionName);
-
-                    if (typeof expressionBinding === 'undefined') {
-                      throw expressionPath.buildCodeFrameError(
-                        [
-                          'Failed to resolve a binding in a scope for an identifier.',
-                          'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                        ].join(' '),
-                      );
-                    }
-
-                    const importDeclarationPath = expressionBinding.path.findParent(p =>
-                      p.isImportDeclaration(),
-                    ) as NodePath<t.ImportDeclaration> | null;
-
-                    if (importDeclarationPath === null) {
-                      throw expressionBinding.path.buildCodeFrameError(
-                        [
-                          'Failed to resolve an import for the identifier.',
-                          'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                        ].join(' '),
-                      );
-                    }
-
-                    expressionPath.replaceWith(t.stringLiteral(importDeclarationPath.get('source').node.value));
-                    importDeclarationPath.remove();
-                  });
-                },
-              });
-
-              // Returns the styles as a JavaScript object
-              const evaluationResult = argumentPath.evaluate();
-
-              if (!evaluationResult.confident) {
-                throw argumentPath.buildCodeFrameError(
-                  [
-                    `Failed to evaluate CSS rules from "${functionKind}" call.`,
-                    'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                  ].join(' '),
-                );
-              }
-
-              if (functionKind === '__styles') {
-                const cssRulesByBucket = evaluationResult.value as CSSRulesByBucket;
-
-                state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, cssRulesByBucket);
-              } else if (functionKind === '__resetStyles') {
-                const cssRules = evaluationResult.value as NonNullable<CSSRulesByBucket['r']>;
-
-                state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, { r: cssRules });
-              }
-
-              argumentPath.remove();
             },
           });
         },
diff --git a/packages/webpack-loader/project.json b/packages/webpack-loader/project.json
index 8c0863f..1e41585 100644
--- a/packages/webpack-loader/project.json
+++ b/packages/webpack-loader/project.json
@@ -19,7 +19,7 @@
       }
     },
     "build": {
-      "executor": "@nrwl/node:package",
+      "executor": "@nrwl/js:tsc",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/packages/webpack-loader",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 3ce9505..11a59f3 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -23,8 +23,8 @@
       "@griffel/jest-serializer": ["packages/jest-serializer/src/index.ts"],
       "@griffel/next-extraction-plugin": ["packages/next-extraction-plugin/src/index.ts"],
       "@griffel/react": ["packages/react/src/index.ts"],
-      "@griffel/webpack-loader": ["packages/webpack-loader/src/index.ts"],
-      "@griffel/webpack-extraction-plugin": ["packages/webpack-extraction-plugin/src/index.ts"]
+      "@griffel/webpack-extraction-plugin": ["packages/webpack-extraction-plugin/src/index.ts"],
+      "@griffel/webpack-loader": ["packages/webpack-loader/src/index.ts"]
     },
     "typeRoots": ["node_modules/@types", "./typings"]
   },
diff --git a/workspace.json b/workspace.json
index a3949ba..9a8b089 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,19 +1,19 @@
 {
   "version": 2,
   "projects": {
-    "@griffel/benchmark": "apps/benchmark",
     "@griffel/babel-preset": "packages/babel-preset",
+    "@griffel/benchmark": "apps/benchmark",
     "@griffel/core": "packages/core",
     "@griffel/devtools": "packages/devtools",
     "@griffel/e2e-nextjs": "e2e/nextjs",
-    "@griffel/e2e-utils": "e2e/utils",
     "@griffel/e2e-typescript": "e2e/typescript",
+    "@griffel/e2e-utils": "e2e/utils",
     "@griffel/eslint-plugin": "packages/eslint-plugin",
     "@griffel/jest-serializer": "packages/jest-serializer",
     "@griffel/next-extraction-plugin": "packages/next-extraction-plugin",
     "@griffel/react": "packages/react",
-    "@griffel/webpack-loader": "packages/webpack-loader",
     "@griffel/webpack-extraction-plugin": "packages/webpack-extraction-plugin",
+    "@griffel/webpack-loader": "packages/webpack-loader",
     "@griffel/website": "apps/website"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 6430453..2b228af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2904,20 +2904,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^1.0.4":
-  version: 1.0.5
-  resolution: "@eslint/eslintrc@npm:1.0.5"
+"@eslint/eslintrc@npm:^1.2.1":
+  version: 1.4.1
+  resolution: "@eslint/eslintrc@npm:1.4.1"
   dependencies:
     ajv: ^6.12.4
     debug: ^4.3.2
-    espree: ^9.2.0
-    globals: ^13.9.0
-    ignore: ^4.0.6
+    espree: ^9.4.0
+    globals: ^13.19.0
+    ignore: ^5.2.0
     import-fresh: ^3.2.1
     js-yaml: ^4.1.0
-    minimatch: ^3.0.4
+    minimatch: ^3.1.2
     strip-json-comments: ^3.1.1
-  checksum: b35b50d7b65bd8acd92a05b6fb15ac62c0cefa40dfef0324ca5bf8632bf3679bab6e173c53b3ad1e1d837701cecdbd9c144b35f46588cdf4e046a9caa272488d
+  checksum: cd3e5a8683db604739938b1c1c8b77927dc04fce3e28e0c88e7f2cd4900b89466baf83dfbad76b2b9e4d2746abdd00dd3f9da544d3e311633d8693f327d04cd7
   languageName: node
   linkType: hard
 
@@ -2944,18 +2944,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "@humanwhocodes/config-array@npm:0.6.0"
+"@humanwhocodes/config-array@npm:^0.9.2":
+  version: 0.9.5
+  resolution: "@humanwhocodes/config-array@npm:0.9.5"
   dependencies:
-    "@humanwhocodes/object-schema": ^1.2.0
+    "@humanwhocodes/object-schema": ^1.2.1
     debug: ^4.1.1
     minimatch: ^3.0.4
-  checksum: 1025b07514b7bfd10a05e8b6cb5e6520878e9c8836b3dd0569fc07df29a09e428c2df1e0760b1d461da8ed6f81ca83ecb02e24198f80b0a177a2acbf532e267c
+  checksum: 8ba6281bc0590f6c6eadeefc14244b5a3e3f5903445aadd1a32099ed80e753037674026ce1b3c945ab93561bea5eb29e3c5bff67060e230c295595ba517a3492
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^1.2.0":
+"@humanwhocodes/object-schema@npm:^1.2.1":
   version: 1.2.1
   resolution: "@humanwhocodes/object-schema@npm:1.2.1"
   checksum: a824a1ec31591231e4bad5787641f59e9633827d0a2eaae131a288d33c9ef0290bd16fda8da6f7c0fcb014147865d12118df10db57f27f41e20da92369fcb3f1
@@ -3279,10 +3279,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/resolve-uri@npm:^3.0.3":
-  version: 3.0.4
-  resolution: "@jridgewell/resolve-uri@npm:3.0.4"
-  checksum: 799bcba2730280a42f11b4d41a5d34d68ce72cb1bd23186bd3356607c93b62765b2b050e5dfb67f04ce4e817f882bfc10a4d1c43fe2d8eeb38371c98d71217b4
+"@jridgewell/resolve-uri@npm:3.1.0":
+  version: 3.1.0
+  resolution: "@jridgewell/resolve-uri@npm:3.1.0"
+  checksum: b5ceaaf9a110fcb2780d1d8f8d4a0bfd216702f31c988d8042e5f8fbe353c55d9b0f55a1733afdc64806f8e79c485d2464680ac48a0d9fcadb9548ee6b81d267
   languageName: node
   linkType: hard
 
@@ -3303,20 +3303,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10":
-  version: 1.4.11
-  resolution: "@jridgewell/sourcemap-codec@npm:1.4.11"
-  checksum: 3b2afaf8400fb07a36db60e901fcce6a746cdec587310ee9035939d89878e57b2dec8173b0b8f63176f647efa352294049a53c49739098eb907ff81fec2547c8
+"@jridgewell/sourcemap-codec@npm:1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.10":
+  version: 1.4.14
+  resolution: "@jridgewell/sourcemap-codec@npm:1.4.14"
+  checksum: 61100637b6d173d3ba786a5dff019e1a74b1f394f323c1fee337ff390239f053b87266c7a948777f4b1ee68c01a8ad0ab61e5ff4abb5a012a0b091bec391ab97
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.0, @jridgewell/trace-mapping@npm:^0.3.7, @jridgewell/trace-mapping@npm:^0.3.9":
-  version: 0.3.14
-  resolution: "@jridgewell/trace-mapping@npm:0.3.14"
+"@jridgewell/trace-mapping@npm:^0.3.0, @jridgewell/trace-mapping@npm:^0.3.14, @jridgewell/trace-mapping@npm:^0.3.9":
+  version: 0.3.17
+  resolution: "@jridgewell/trace-mapping@npm:0.3.17"
   dependencies:
-    "@jridgewell/resolve-uri": ^3.0.3
-    "@jridgewell/sourcemap-codec": ^1.4.10
-  checksum: b9537b9630ffb631aef9651a085fe361881cde1772cd482c257fe3c78c8fd5388d681f504a9c9fe1081b1c05e8f75edf55ee10fdb58d92bbaa8dbf6a7bd6b18c
+    "@jridgewell/resolve-uri": 3.1.0
+    "@jridgewell/sourcemap-codec": 1.4.14
+  checksum: 9d703b859cff5cd83b7308fd457a431387db5db96bd781a63bf48e183418dd9d3d44e76b9e4ae13237f6abeeb25d739ec9215c1d5bfdd08f66f750a50074a339
   languageName: node
   linkType: hard
 
@@ -3662,87 +3662,82 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nrwl/cli@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/cli@npm:13.4.5"
+"@nrwl/cli@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/cli@npm:13.10.6"
   dependencies:
-    "@nrwl/tao": 13.4.5
-    chalk: 4.1.0
-    enquirer: ~2.3.6
-    v8-compile-cache: 2.3.0
-    yargs: 15.4.1
-    yargs-parser: 20.0.0
-  bin:
-    nx: bin/nx.js
-  checksum: 346b23417133a2946c31837e547ba340ae00c9880887921e787448c1bcf431d94e0a79805c3f4bdc0da678eba371d93ca97c0b93f304bf95798bf54974b8dafe
+    nx: 13.10.6
+  checksum: 59eefd70f65017438881d5b2e272276e7203c3c691520a2998d8799c9454b86938c7475e9e3ce227021bc435df25fe94c5ae7643546604908a84ff1d9356c37c
   languageName: node
   linkType: hard
 
-"@nrwl/cypress@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/cypress@npm:13.4.5"
+"@nrwl/cypress@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/cypress@npm:13.10.6"
   dependencies:
     "@cypress/webpack-preprocessor": ^5.9.1
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/linter": 13.4.5
-    "@nrwl/workspace": 13.4.5
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/linter": 13.10.6
+    "@nrwl/workspace": 13.10.6
     chalk: 4.1.0
     enhanced-resolve: ^5.8.3
     fork-ts-checker-webpack-plugin: 6.2.10
     rxjs: ^6.5.4
     ts-loader: ^9.2.6
     tsconfig-paths: ^3.9.0
-    tsconfig-paths-webpack-plugin: 3.4.1
+    tsconfig-paths-webpack-plugin: 3.5.2
     tslib: ^2.3.0
     webpack-node-externals: ^3.0.0
-    yargs-parser: 20.0.0
   peerDependencies:
     cypress: ">= 3 < 10"
   peerDependenciesMeta:
     cypress:
       optional: true
-  checksum: 1403ba87874cd225a9a87b47e347fa1e5231f802901de2ef619218b788d4abb3d21483ec0d7ab3b63e25322ff9cf002085a2a0368793e03f121f844ff45567e5
+  checksum: 3c068dce584fdc1477c1789a2b08a5402bb643e9d96b7911b90ce4d49d9923f255798a9f7cf9f8ec28a2deba9c0576ae1d0d3245ec5e4a8cd70567fd243b6801
   languageName: node
   linkType: hard
 
-"@nrwl/devkit@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/devkit@npm:13.4.5"
+"@nrwl/devkit@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/devkit@npm:13.10.6"
   dependencies:
-    "@nrwl/tao": 13.4.5
     ejs: ^3.1.5
     ignore: ^5.0.4
     rxjs: ^6.5.4
     semver: 7.3.4
     tslib: ^2.3.0
-  checksum: 03b4e31506d5c7d3ed0e83ce38004063bd40c53ed5d1ed6fa439fad3aafce8ccd0e487251ce666fb8578b1adabf846deb254afb5152e785071ec6beeba16a480
+  peerDependencies:
+    nx: ">= 13.10 <= 15"
+  checksum: cadec2160fc84c1cc49e2e8642bba0372bd144fcb8a0a83df1af561db89a4e120ca5733a4650c18600a821313db87fb004b3f43207314c7a6bdaf9928c5eae60
   languageName: node
   linkType: hard
 
-"@nrwl/eslint-plugin-nx@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/eslint-plugin-nx@npm:13.4.5"
+"@nrwl/eslint-plugin-nx@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/eslint-plugin-nx@npm:13.10.6"
   dependencies:
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/workspace": 13.4.5
-    "@typescript-eslint/experimental-utils": ~5.3.0
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/workspace": 13.10.6
+    "@typescript-eslint/experimental-utils": ~5.18.0
+    chalk: 4.1.0
     confusing-browser-globals: ^1.0.9
-    ts-node: ^9.1.1
-    tsconfig-paths: ^3.9.0
   peerDependencies:
-    "@typescript-eslint/parser": ~5.3.0
+    "@typescript-eslint/parser": ~5.18.0
     eslint-config-prettier: ^8.1.0
-  checksum: ab4635e2deaf99731fad46dc934cdd44ebc514d0c750887b3fce0c25ca89dd3b9f161cea9af810d8057046258e7ebc9cb73b506912fc106b4d06f9cc9e49939d
+  peerDependenciesMeta:
+    eslint-config-prettier:
+      optional: true
+  checksum: 2786cbc8a121374078df9b1552840f6103d7682175043b6e023330df9bc6742ebdee57c3d7b6408d42ff1be798f6c66c4bededb4e11f1c2fdb5808ca77b99349
   languageName: node
   linkType: hard
 
-"@nrwl/jest@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/jest@npm:13.4.5"
+"@nrwl/jest@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/jest@npm:13.10.6"
   dependencies:
     "@jest/reporters": 27.2.2
     "@jest/test-result": 27.2.2
-    "@nrwl/devkit": 13.4.5
+    "@nrwl/devkit": 13.10.6
     chalk: 4.1.0
     identity-obj-proxy: 3.0.0
     jest-config: 27.2.2
@@ -3751,148 +3746,164 @@ __metadata:
     resolve.exports: 1.1.0
     rxjs: ^6.5.4
     tslib: ^2.3.0
-  checksum: fb6a42114a1040d71a04e7047f9a1684e87a8de7e25215d207ef8a8b67a717a781de4b28657b70e96b8a8ba0b35f68b7d079a50734a3b5d9c7ceaa9ad612707c
+  checksum: 659f84a48a184aeb75fc82ebf357a94be1385afa67e296be69207b624f3d04bea67430d7838eaf5e65cabb052097317f0ae13bc2b9b1e944f7735489668b71e7
   languageName: node
   linkType: hard
 
-"@nrwl/js@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/js@npm:13.4.5"
+"@nrwl/js@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/js@npm:13.10.6"
   dependencies:
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/jest": 13.4.5
-    "@nrwl/linter": 13.4.5
-    "@nrwl/workspace": 13.4.5
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/jest": 13.10.6
+    "@nrwl/linter": 13.10.6
+    "@nrwl/workspace": 13.10.6
+    "@parcel/watcher": 2.0.4
     chalk: 4.1.0
+    fast-glob: 3.2.7
+    fs-extra: ^9.1.0
+    ignore: ^5.0.4
     js-tokens: ^4.0.0
-    rxjs: ^6.5.4
-    rxjs-for-await: 0.0.2
+    minimatch: 3.0.4
     source-map-support: 0.5.19
     tree-kill: 1.2.2
-  checksum: 29cfc3f20684d6fbe936553a66e3fd77d7e9ff2b7672d606b35be9df5272ddbf7c8c0f4c0ce3a6b3d2945310750d892948cbd58f563e77dd63b131b998f0eff6
+  checksum: b68e5cb7002d3ad3071c605f884db4fec53c5341b7837adfc30346601cb597578ed12cb0cbd965095e6e58b20fe86805a452c0ee0bc2eb9cb988b9834a15ae7c
   languageName: node
   linkType: hard
 
-"@nrwl/linter@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/linter@npm:13.4.5"
+"@nrwl/js@patch:@nrwl/js@npm:13.10.6#.yarn/patches/@nrwl-js-npm-13.10.6-08130e9fbb.patch::locator=griffel-repository%40workspace%3A.":
+  version: 13.10.6
+  resolution: "@nrwl/js@patch:@nrwl/js@npm%3A13.10.6#.yarn/patches/@nrwl-js-npm-13.10.6-08130e9fbb.patch::version=13.10.6&hash=289171&locator=griffel-repository%40workspace%3A."
   dependencies:
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/jest": 13.4.5
-    "@phenomnomnominal/tsquery": 4.1.1
-    eslint: 8.2.0
-    glob: 7.1.4
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/jest": 13.10.6
+    "@nrwl/linter": 13.10.6
+    "@nrwl/workspace": 13.10.6
+    "@parcel/watcher": 2.0.4
+    chalk: 4.1.0
+    fast-glob: 3.2.7
+    fs-extra: ^9.1.0
+    ignore: ^5.0.4
+    js-tokens: ^4.0.0
     minimatch: 3.0.4
+    source-map-support: 0.5.19
+    tree-kill: 1.2.2
+  checksum: 0a582c89eb259de8659ce2de4319895e64505cc3475ae627fcffecebee1fb2d700bdeb65416679d89b213016d6bb2a559979e5c144f09da012e0faf96304c307
+  languageName: node
+  linkType: hard
+
+"@nrwl/linter@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/linter@npm:13.10.6"
+  dependencies:
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/jest": 13.10.6
+    "@phenomnomnominal/tsquery": 4.1.1
     tmp: ~0.2.1
     tslib: ^2.3.0
-  checksum: 3437b59577bf9c333fedb6f77773083734925ddb3cdd4f061df71ed7c803413c758c5db6286c98f0ca5a4de16d82795f5cb0a24c9d59d32b27ce4878f7504e02
+  peerDependencies:
+    eslint: ^8.0.0
+  peerDependenciesMeta:
+    eslint:
+      optional: true
+  checksum: d63b2640f5928713d74e3504cde45760eb71ac6b06faf58f0e7883775272c8998734b5837a68454a5a09048f645913a500df72d9a1d0a4d0eb2e363f09ff98ca
   languageName: node
   linkType: hard
 
-"@nrwl/node@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/node@npm:13.4.5"
+"@nrwl/node@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/node@npm:13.10.6"
   dependencies:
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/jest": 13.4.5
-    "@nrwl/linter": 13.4.5
-    "@nrwl/workspace": 13.4.5
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/jest": 13.10.6
+    "@nrwl/js": 13.10.6
+    "@nrwl/linter": 13.10.6
+    "@nrwl/workspace": 13.10.6
     chalk: 4.1.0
     copy-webpack-plugin: ^9.0.1
     enhanced-resolve: ^5.8.3
     fork-ts-checker-webpack-plugin: 6.2.10
     fs-extra: ^9.1.0
     glob: 7.1.4
-    license-webpack-plugin: 2.3.15
+    license-webpack-plugin: ^4.0.2
     rxjs: ^6.5.4
     rxjs-for-await: 0.0.2
     source-map-support: 0.5.19
+    terser-webpack-plugin: ^5.3.0
     tree-kill: 1.2.2
     ts-loader: ^9.2.6
     ts-node: ~9.1.1
     tsconfig-paths: ^3.9.0
-    tsconfig-paths-webpack-plugin: 3.4.1
+    tsconfig-paths-webpack-plugin: 3.5.2
     tslib: ^2.3.0
     webpack: ^5.58.1
     webpack-merge: ^5.8.0
     webpack-node-externals: ^3.0.0
-  checksum: df1164bb5390f625aa78105a9ab50486f144b831a74e412096c9690f8e6d82f5112672dca8b0552eadaef22e6775be1fc2dd5be9560b060fe022683d4163ed51
+  checksum: 4929dde716b9b5f2822a02e73ec8fb2681db9e2b216d2f2cb8055194185b681fbcc0fc027b86b80a296584744775aab0c78c747f153480c8fb5b92860566849b
   languageName: node
   linkType: hard
 
-"@nrwl/react@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/react@npm:13.4.5"
+"@nrwl/react@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/react@npm:13.10.6"
   dependencies:
     "@babel/core": ^7.15.0
     "@babel/preset-react": ^7.14.5
-    "@nrwl/cypress": 13.4.5
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/jest": 13.4.5
-    "@nrwl/js": 13.4.5
-    "@nrwl/linter": 13.4.5
-    "@nrwl/storybook": 13.4.5
-    "@nrwl/web": 13.4.5
-    "@nrwl/workspace": 13.4.5
+    "@nrwl/cypress": 13.10.6
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/jest": 13.10.6
+    "@nrwl/js": 13.10.6
+    "@nrwl/linter": 13.10.6
+    "@nrwl/storybook": 13.10.6
+    "@nrwl/web": 13.10.6
+    "@nrwl/workspace": 13.10.6
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1
     "@storybook/node-logger": 6.1.20
     "@svgr/webpack": ^6.1.2
     chalk: 4.1.0
     eslint-plugin-import: ^2.25.2
     eslint-plugin-jsx-a11y: ^6.5.1
-    eslint-plugin-react: ^7.27.0
-    eslint-plugin-react-hooks: ^4.2.0
+    eslint-plugin-react: 7.28.0
+    eslint-plugin-react-hooks: ^4.3.0
     react-refresh: ^0.10.0
     semver: 7.3.4
     url-loader: ^4.1.1
     webpack: ^5.58.1
     webpack-merge: ^5.8.0
-  checksum: eb8f4cfda529a106b53a5f44cd3da0668dd1595ef29d4dbdef6dd615ecad62835c708a7a81f2360875e0ae82ef5e566e927e3fc6efb4f9b5ef77e4161b715366
+  checksum: 289438730d8714ebcc5b19ef5564ee96a2bcfb6224bad2e9a282d1358649f13037b9aa264dc59f275c6da452b860face37e628fee04f80bc17a2344ce2fd406f
   languageName: node
   linkType: hard
 
-"@nrwl/storybook@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/storybook@npm:13.4.5"
+"@nrwl/storybook@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/storybook@npm:13.10.6"
   dependencies:
-    "@nrwl/cypress": 13.4.5
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/linter": 13.4.5
-    "@nrwl/workspace": 13.4.5
+    "@nrwl/cypress": 13.10.6
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/linter": 13.10.6
+    "@nrwl/workspace": 13.10.6
     core-js: ^3.6.5
     semver: 7.3.4
     ts-loader: ^9.2.6
-    tsconfig-paths-webpack-plugin: 3.4.1
-  checksum: 74db8327cb113b7f4f0bc7dd1f08532f8707c014ca0bba5ea7b1762019e8244c5bed97f704e13e390a3a1263a2a5f636ccc3c2e039f3fe529eb6f5e383c68ab3
+    tsconfig-paths-webpack-plugin: 3.5.2
+  checksum: 2d040c086476593bd614223f7f439248a90d868b52c5dcfd3d33a1b539138ec17a51f517a3fe2bf4735c995a9ec02fa252ff8b5c5cf22445dfb4b202a54ac88b
   languageName: node
   linkType: hard
 
-"@nrwl/tao@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/tao@npm:13.4.5"
+"@nrwl/tao@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/tao@npm:13.10.6"
   dependencies:
-    chalk: 4.1.0
-    enquirer: ~2.3.6
-    fast-glob: 3.2.7
-    fs-extra: ^9.1.0
-    ignore: ^5.0.4
-    jsonc-parser: 3.0.0
-    nx: 13.4.5
-    rxjs: ^6.5.4
-    rxjs-for-await: 0.0.2
-    semver: 7.3.4
-    tmp: ~0.2.1
-    tslib: ^2.3.0
-    yargs-parser: 20.0.0
+    nx: 13.10.6
   bin:
     tao: index.js
-  checksum: 928263d37396c71b691208fb6f9027e49a7ce418ea4c075d6cce8797c1597323cdcec94f76ca2fc5abebe00767219bb9f9ec1084d9cce803d39efbf1091b5243
+  checksum: 458c2a01f716e8b727b50bacf0205583146c4f3eaf1425e58c9b9c9a3f3ab65e90d296309c15cee6445cd3be47d21212cc6854ff89996d5c868cb5d74aaf6b9c
   languageName: node
   linkType: hard
 
-"@nrwl/web@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/web@npm:13.4.5"
+"@nrwl/web@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/web@npm:13.10.6"
   dependencies:
     "@babel/core": ^7.15.0
     "@babel/plugin-proposal-class-properties": ^7.14.5
@@ -3902,12 +3913,12 @@ __metadata:
     "@babel/preset-env": ^7.15.0
     "@babel/preset-typescript": ^7.15.0
     "@babel/runtime": ^7.14.8
-    "@nrwl/cypress": 13.4.5
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/jest": 13.4.5
-    "@nrwl/js": 13.4.5
-    "@nrwl/linter": 13.4.5
-    "@nrwl/workspace": 13.4.5
+    "@nrwl/cypress": 13.10.6
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/jest": 13.10.6
+    "@nrwl/js": 13.10.6
+    "@nrwl/linter": 13.10.6
+    "@nrwl/workspace": 13.10.6
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1
     "@rollup/plugin-babel": ^5.3.0
     "@rollup/plugin-commonjs": ^20.0.0
@@ -3938,18 +3949,16 @@ __metadata:
     ignore: ^5.0.4
     less: 3.12.2
     less-loader: ^10.1.0
-    license-webpack-plugin: 2.3.15
+    license-webpack-plugin: ^4.0.2
     loader-utils: 1.2.3
     mini-css-extract-plugin: ~2.4.7
-    open: ^7.4.2
     parse5: 4.0.0
     parse5-html-rewriting-stream: 6.0.1
-    postcss: 8.3.0
+    postcss: ^8.2.13
     postcss-import: 14.0.2
     postcss-loader: ^6.1.1
     raw-loader: ^4.0.2
     react-refresh: ^0.10.0
-    rimraf: ^3.0.2
     rollup: ^2.56.2
     rollup-plugin-copy: ^3.4.0
     rollup-plugin-peer-deps-external: ^2.2.4
@@ -3965,26 +3974,24 @@ __metadata:
     style-loader: ^3.3.0
     stylus: ^0.55.0
     stylus-loader: ^6.2.0
-    terser: 4.3.8
-    terser-webpack-plugin: ^5.1.1
+    terser-webpack-plugin: ^5.3.0
     ts-loader: ^9.2.6
     ts-node: ~9.1.1
     tsconfig-paths: ^3.9.0
-    tsconfig-paths-webpack-plugin: 3.4.1
+    tsconfig-paths-webpack-plugin: 3.5.2
     tslib: ^2.3.0
     webpack: ^5.58.1
     webpack-dev-server: ^4.3.1
     webpack-merge: ^5.8.0
     webpack-sources: ^3.0.2
-    webpack-subresource-integrity: ^1.5.2
-    worker-plugin: 3.2.0
-  checksum: 486a53f28377f601a0fdce93f1470d8662d8562f05ebde20cb9bf6bb955135dc28017afdd38b0d0a72be8f70bed61d2013ecffbdcc10040f24ebc8c27fd378b7
+    webpack-subresource-integrity: ^5.1.0
+  checksum: e57b944e24ee0517fc4662f08738f37a4a3833ea9450acf343f7e3d52859355a446c3c94e11f128d59c99152e04586eb8b7926521239f851f2305d485b01186c
   languageName: node
   linkType: hard
 
-"@nrwl/web@patch:@nrwl/web@npm:13.4.5#.yarn/patches/@nrwl-web-npm-13.4.5-d7e9ea40d2::locator=griffel-repository%40workspace%3A.":
-  version: 13.4.5
-  resolution: "@nrwl/web@patch:@nrwl/web@npm%3A13.4.5#.yarn/patches/@nrwl-web-npm-13.4.5-d7e9ea40d2::version=13.4.5&hash=9c55c0&locator=griffel-repository%40workspace%3A."
+"@nrwl/web@patch:@nrwl/web@npm:13.10.6#.yarn/patches/@nrwl-web-npm-13.10.6-0fda8b81ed.patch::locator=griffel-repository%40workspace%3A.":
+  version: 13.10.6
+  resolution: "@nrwl/web@patch:@nrwl/web@npm%3A13.10.6#.yarn/patches/@nrwl-web-npm-13.10.6-0fda8b81ed.patch::version=13.10.6&hash=fd1d33&locator=griffel-repository%40workspace%3A."
   dependencies:
     "@babel/core": ^7.15.0
     "@babel/plugin-proposal-class-properties": ^7.14.5
@@ -3994,12 +4001,12 @@ __metadata:
     "@babel/preset-env": ^7.15.0
     "@babel/preset-typescript": ^7.15.0
     "@babel/runtime": ^7.14.8
-    "@nrwl/cypress": 13.4.5
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/jest": 13.4.5
-    "@nrwl/js": 13.4.5
-    "@nrwl/linter": 13.4.5
-    "@nrwl/workspace": 13.4.5
+    "@nrwl/cypress": 13.10.6
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/jest": 13.10.6
+    "@nrwl/js": 13.10.6
+    "@nrwl/linter": 13.10.6
+    "@nrwl/workspace": 13.10.6
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1
     "@rollup/plugin-babel": ^5.3.0
     "@rollup/plugin-commonjs": ^20.0.0
@@ -4030,18 +4037,16 @@ __metadata:
     ignore: ^5.0.4
     less: 3.12.2
     less-loader: ^10.1.0
-    license-webpack-plugin: 2.3.15
+    license-webpack-plugin: ^4.0.2
     loader-utils: 1.2.3
     mini-css-extract-plugin: ~2.4.7
-    open: ^7.4.2
     parse5: 4.0.0
     parse5-html-rewriting-stream: 6.0.1
-    postcss: 8.3.0
+    postcss: ^8.2.13
     postcss-import: 14.0.2
     postcss-loader: ^6.1.1
     raw-loader: ^4.0.2
     react-refresh: ^0.10.0
-    rimraf: ^3.0.2
     rollup: ^2.56.2
     rollup-plugin-copy: ^3.4.0
     rollup-plugin-peer-deps-external: ^2.2.4
@@ -4057,75 +4062,33 @@ __metadata:
     style-loader: ^3.3.0
     stylus: ^0.55.0
     stylus-loader: ^6.2.0
-    terser: 4.3.8
-    terser-webpack-plugin: ^5.1.1
+    terser-webpack-plugin: ^5.3.0
     ts-loader: ^9.2.6
     ts-node: ~9.1.1
     tsconfig-paths: ^3.9.0
-    tsconfig-paths-webpack-plugin: 3.4.1
+    tsconfig-paths-webpack-plugin: 3.5.2
     tslib: ^2.3.0
     webpack: ^5.58.1
     webpack-dev-server: ^4.3.1
     webpack-merge: ^5.8.0
     webpack-sources: ^3.0.2
-    webpack-subresource-integrity: ^1.5.2
-    worker-plugin: 3.2.0
-  checksum: 027c5782d533122ed447b2686766c33391315b12d18536d6bc386c94826ad7ec85072578ba3f27da026e63aeec4f4c7e1aa51971f1cd1022af5d0c8c8ddc32f2
-  languageName: node
-  linkType: hard
-
-"@nrwl/workspace@npm:13.4.5":
-  version: 13.4.5
-  resolution: "@nrwl/workspace@npm:13.4.5"
-  dependencies:
-    "@nrwl/cli": 13.4.5
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/jest": 13.4.5
-    "@nrwl/linter": 13.4.5
-    "@parcel/watcher": 2.0.4
-    chalk: 4.1.0
-    chokidar: ^3.5.1
-    cli-spinners: 2.6.1
-    cosmiconfig: ^4.0.0
-    dotenv: ~10.0.0
-    enquirer: ~2.3.6
-    figures: 3.2.0
-    flat: ^5.0.2
-    fs-extra: ^9.1.0
-    glob: 7.1.4
-    ignore: ^5.0.4
-    minimatch: 3.0.4
-    npm-run-path: ^4.0.1
-    open: ^7.4.2
-    rxjs: ^6.5.4
-    semver: 7.3.4
-    strip-ansi: 6.0.0
-    tmp: ~0.2.1
-    tslib: ^2.3.0
-    yargs: 15.4.1
-    yargs-parser: 20.0.0
-  peerDependencies:
-    prettier: ^2.3.0
-  peerDependenciesMeta:
-    prettier:
-      optional: true
-  checksum: 46912c862587d301c68ff6fcf6beebd2f0ac2bd63c2f518e7a84d9bc149c2375511c089b8fa0991ed2daae0526a34d0e94e6e5edd54eff0c08d59433785e4bb8
+    webpack-subresource-integrity: ^5.1.0
+  checksum: 016fbef7e72acf2d1b773adda440aa71427138308adf5d39bf1eb2d7cea8b68693527082cde0d03077dcafaf44348af429ea9713b80d2cf1e1cb66113123cf8d
   languageName: node
   linkType: hard
 
-"@nrwl/workspace@patch:@nrwl/workspace@npm:13.4.5#.yarn/patches/@nrwl-workspace-npm-13.4.5-233a3ec85c::locator=griffel-repository%40workspace%3A.":
-  version: 13.4.5
-  resolution: "@nrwl/workspace@patch:@nrwl/workspace@npm%3A13.4.5#.yarn/patches/@nrwl-workspace-npm-13.4.5-233a3ec85c::version=13.4.5&hash=499941&locator=griffel-repository%40workspace%3A."
+"@nrwl/workspace@npm:13.10.6":
+  version: 13.10.6
+  resolution: "@nrwl/workspace@npm:13.10.6"
   dependencies:
-    "@nrwl/cli": 13.4.5
-    "@nrwl/devkit": 13.4.5
-    "@nrwl/jest": 13.4.5
-    "@nrwl/linter": 13.4.5
+    "@nrwl/devkit": 13.10.6
+    "@nrwl/jest": 13.10.6
+    "@nrwl/linter": 13.10.6
     "@parcel/watcher": 2.0.4
     chalk: 4.1.0
     chokidar: ^3.5.1
+    cli-cursor: 3.1.0
     cli-spinners: 2.6.1
-    cosmiconfig: ^4.0.0
     dotenv: ~10.0.0
     enquirer: ~2.3.6
     figures: 3.2.0
@@ -4135,20 +4098,20 @@ __metadata:
     ignore: ^5.0.4
     minimatch: 3.0.4
     npm-run-path: ^4.0.1
-    open: ^7.4.2
+    nx: 13.10.6
+    open: ^8.4.0
     rxjs: ^6.5.4
     semver: 7.3.4
-    strip-ansi: 6.0.0
     tmp: ~0.2.1
     tslib: ^2.3.0
-    yargs: 15.4.1
-    yargs-parser: 20.0.0
+    yargs: ^17.4.0
+    yargs-parser: 21.0.1
   peerDependencies:
-    prettier: ^2.3.0
+    prettier: ^2.5.1
   peerDependenciesMeta:
     prettier:
       optional: true
-  checksum: 4e5b0cb5d4436c888d37a1163ab6568a747b95e4e0a418b1e5cd05787ed38e9c798d2bc6623d9d2d6bb4d3e2e2d32be0d94aba1bfe258b22fe518459e7e0b72f
+  checksum: 6d25c1434b0c56a0071ca70bd4473de94c40257f50e27efaa1ee9c02294629add01b046481eb6dce805d56991be51045ce995f2fac5852a21e61d8e2c5a2e413
   languageName: node
   linkType: hard
 
@@ -4764,6 +4727,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addons@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/addons@npm:6.4.22"
+  dependencies:
+    "@storybook/api": 6.4.22
+    "@storybook/channels": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    "@storybook/core-events": 6.4.22
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/router": 6.4.22
+    "@storybook/theming": 6.4.22
+    "@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: c1372cb5e04ebc08b3f2df764630f370b9ccce0c7b47b5126c4964d53971e8a21efb1ef913a376cb6c289e6c492133e5273a36bd6ee4e39e1073acc12be51ee2
+  languageName: node
+  linkType: hard
+
 "@storybook/api@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/api@npm:6.4.18"
@@ -4792,6 +4777,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/api@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/api@npm:6.4.22"
+  dependencies:
+    "@storybook/channels": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    "@storybook/core-events": 6.4.22
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/router": 6.4.22
+    "@storybook/semver": ^7.3.2
+    "@storybook/theming": 6.4.22
+    core-js: ^3.8.2
+    fast-deep-equal: ^3.1.3
+    global: ^4.4.0
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    regenerator-runtime: ^0.13.7
+    store2: ^2.12.0
+    telejson: ^5.3.2
+    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: 3320bc73a892db6a2d0c0448c844084db14c898dd74b79de86df732e73fbe1c274fd8d109da5e8683e9b74c2d7a0f1a365ebc45bd0227a4e7e93db36402a391e
+  languageName: node
+  linkType: hard
+
 "@storybook/builder-webpack4@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/builder-webpack4@npm:6.4.18"
@@ -4875,6 +4888,89 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/builder-webpack4@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/builder-webpack4@npm:6.4.22"
+  dependencies:
+    "@babel/core": ^7.12.10
+    "@babel/plugin-proposal-class-properties": ^7.12.1
+    "@babel/plugin-proposal-decorators": ^7.12.12
+    "@babel/plugin-proposal-export-default-from": ^7.12.1
+    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.12.1
+    "@babel/plugin-proposal-object-rest-spread": ^7.12.1
+    "@babel/plugin-proposal-optional-chaining": ^7.12.7
+    "@babel/plugin-proposal-private-methods": ^7.12.1
+    "@babel/plugin-syntax-dynamic-import": ^7.8.3
+    "@babel/plugin-transform-arrow-functions": ^7.12.1
+    "@babel/plugin-transform-block-scoping": ^7.12.12
+    "@babel/plugin-transform-classes": ^7.12.1
+    "@babel/plugin-transform-destructuring": ^7.12.1
+    "@babel/plugin-transform-for-of": ^7.12.1
+    "@babel/plugin-transform-parameters": ^7.12.1
+    "@babel/plugin-transform-shorthand-properties": ^7.12.1
+    "@babel/plugin-transform-spread": ^7.12.1
+    "@babel/plugin-transform-template-literals": ^7.12.1
+    "@babel/preset-env": ^7.12.11
+    "@babel/preset-react": ^7.12.10
+    "@babel/preset-typescript": ^7.12.7
+    "@storybook/addons": 6.4.22
+    "@storybook/api": 6.4.22
+    "@storybook/channel-postmessage": 6.4.22
+    "@storybook/channels": 6.4.22
+    "@storybook/client-api": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    "@storybook/components": 6.4.22
+    "@storybook/core-common": 6.4.22
+    "@storybook/core-events": 6.4.22
+    "@storybook/node-logger": 6.4.22
+    "@storybook/preview-web": 6.4.22
+    "@storybook/router": 6.4.22
+    "@storybook/semver": ^7.3.2
+    "@storybook/store": 6.4.22
+    "@storybook/theming": 6.4.22
+    "@storybook/ui": 6.4.22
+    "@types/node": ^14.0.10
+    "@types/webpack": ^4.41.26
+    autoprefixer: ^9.8.6
+    babel-loader: ^8.0.0
+    babel-plugin-macros: ^2.8.0
+    babel-plugin-polyfill-corejs3: ^0.1.0
+    case-sensitive-paths-webpack-plugin: ^2.3.0
+    core-js: ^3.8.2
+    css-loader: ^3.6.0
+    file-loader: ^6.2.0
+    find-up: ^5.0.0
+    fork-ts-checker-webpack-plugin: ^4.1.6
+    glob: ^7.1.6
+    glob-promise: ^3.4.0
+    global: ^4.4.0
+    html-webpack-plugin: ^4.0.0
+    pnp-webpack-plugin: 1.6.4
+    postcss: ^7.0.36
+    postcss-flexbugs-fixes: ^4.2.1
+    postcss-loader: ^4.2.0
+    raw-loader: ^4.0.2
+    stable: ^0.1.8
+    style-loader: ^1.3.0
+    terser-webpack-plugin: ^4.2.3
+    ts-dedent: ^2.0.0
+    url-loader: ^4.1.1
+    util-deprecate: ^1.0.2
+    webpack: 4
+    webpack-dev-middleware: ^3.7.3
+    webpack-filter-warnings-plugin: ^1.2.1
+    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
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: fe6d0f0100b507dc6421f8e593dc3852376a021a01b00ec0fdee4365af2ea7afbcd905fd559e04512a992d72f059f57c1e47c577074f79bf903fc7559a4f78c6
+  languageName: node
+  linkType: hard
+
 "@storybook/builder-webpack5@npm:~6.4.5":
   version: 6.4.18
   resolution: "@storybook/builder-webpack5@npm:6.4.18"
@@ -4961,6 +5057,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channel-postmessage@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/channel-postmessage@npm:6.4.22"
+  dependencies:
+    "@storybook/channels": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    "@storybook/core-events": 6.4.22
+    core-js: ^3.8.2
+    global: ^4.4.0
+    qs: ^6.10.0
+    telejson: ^5.3.2
+  checksum: 870258cbc84ef4021603f3ab9a1cc24c696ac81124b90bcd1b4b9217e0ad84e0e4729832f54bf3adaccd2fa3508ba02fc50954531c3f3489dfd2e4998545520c
+  languageName: node
+  linkType: hard
+
 "@storybook/channel-websocket@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/channel-websocket@npm:6.4.18"
@@ -4974,6 +5085,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channel-websocket@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/channel-websocket@npm:6.4.22"
+  dependencies:
+    "@storybook/channels": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    core-js: ^3.8.2
+    global: ^4.4.0
+    telejson: ^5.3.2
+  checksum: c3be4a928924e490629b88c4cffa076ab7c46f67b784f2e794647317997d911c77b7eec785c32a367e6ef859a9b16eccabca830fe1d5769580a275eff881f275
+  languageName: node
+  linkType: hard
+
 "@storybook/channels@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/channels@npm:6.4.18"
@@ -4985,6 +5109,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channels@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/channels@npm:6.4.22"
+  dependencies:
+    core-js: ^3.8.2
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  checksum: cffd2055906e995719b392ccf2928cd244fc0ec278988c290b5d3a8bc8a0d2b2ef679c03e1959fa19134c41bea4f7490ccc9f85ab4211a58c597170c65caa77e
+  languageName: node
+  linkType: hard
+
 "@storybook/client-api@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/client-api@npm:6.4.18"
@@ -5016,6 +5151,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-api@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/client-api@npm:6.4.22"
+  dependencies:
+    "@storybook/addons": 6.4.22
+    "@storybook/channel-postmessage": 6.4.22
+    "@storybook/channels": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    "@storybook/core-events": 6.4.22
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/store": 6.4.22
+    "@types/qs": ^6.9.5
+    "@types/webpack-env": ^1.16.0
+    core-js: ^3.8.2
+    fast-deep-equal: ^3.1.3
+    global: ^4.4.0
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    qs: ^6.10.0
+    regenerator-runtime: ^0.13.7
+    store2: ^2.12.0
+    synchronous-promise: ^2.0.15
+    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: 606bde50ca49467863370062957f45ca83a39897c2c1997b87af08420deb2a60afba643c0eddebff74219cae1584c4a05e4a1ff69ca0e0bdff087a20939d87ce
+  languageName: node
+  linkType: hard
+
 "@storybook/client-logger@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/client-logger@npm:6.4.18"
@@ -5026,6 +5192,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/client-logger@npm:6.4.22"
+  dependencies:
+    core-js: ^3.8.2
+    global: ^4.4.0
+  checksum: ed615b4f4e022830565b47fe850fa4dc7f75169b84710b5807e95cb75e45b58cba3f514154e039e3fe6ad96519faacaa096e3fd26af5b31322c29946e066c5b2
+  languageName: node
+  linkType: hard
+
 "@storybook/components@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/components@npm:6.4.18"
@@ -5061,6 +5237,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/components@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/components@npm:6.4.22"
+  dependencies:
+    "@popperjs/core": ^2.6.0
+    "@storybook/client-logger": 6.4.22
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/theming": 6.4.22
+    "@types/color-convert": ^2.0.0
+    "@types/overlayscrollbars": ^1.12.0
+    "@types/react-syntax-highlighter": 11.0.5
+    color-convert: ^2.0.1
+    core-js: ^3.8.2
+    fast-deep-equal: ^3.1.3
+    global: ^4.4.0
+    lodash: ^4.17.21
+    markdown-to-jsx: ^7.1.3
+    memoizerific: ^1.11.3
+    overlayscrollbars: ^1.13.1
+    polished: ^4.0.5
+    prop-types: ^15.7.2
+    react-colorful: ^5.1.2
+    react-popper-tooltip: ^3.1.1
+    react-syntax-highlighter: ^13.5.3
+    react-textarea-autosize: ^8.3.0
+    regenerator-runtime: ^0.13.7
+    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: c558f9148aec6fc8fea746883d183163991c5b0887556abd9a5ffc2561c11f470177e4e83b08b34f11e2a3c344b73b0800c2cf1b3d6b82d1b8dbe0ee9e0ca468
+  languageName: node
+  linkType: hard
+
 "@storybook/core-client@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/core-client@npm:6.4.18"
@@ -5096,6 +5307,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-client@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/core-client@npm:6.4.22"
+  dependencies:
+    "@storybook/addons": 6.4.22
+    "@storybook/channel-postmessage": 6.4.22
+    "@storybook/channel-websocket": 6.4.22
+    "@storybook/client-api": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    "@storybook/core-events": 6.4.22
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/preview-web": 6.4.22
+    "@storybook/store": 6.4.22
+    "@storybook/ui": 6.4.22
+    airbnb-js-shims: ^2.2.1
+    ansi-to-html: ^0.6.11
+    core-js: ^3.8.2
+    global: ^4.4.0
+    lodash: ^4.17.21
+    qs: ^6.10.0
+    regenerator-runtime: ^0.13.7
+    ts-dedent: ^2.0.0
+    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
+    webpack: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 6b93171f3b57aee995ad2a031194ceaf1ae55aa05e58ae0d0612758e8fff216de0f14c4a98e3fd294da9984f34e1db94556c025bf551b3bf191b217c71b10a5a
+  languageName: node
+  linkType: hard
+
 "@storybook/core-common@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/core-common@npm:6.4.18"
@@ -5159,6 +5405,69 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-common@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/core-common@npm:6.4.22"
+  dependencies:
+    "@babel/core": ^7.12.10
+    "@babel/plugin-proposal-class-properties": ^7.12.1
+    "@babel/plugin-proposal-decorators": ^7.12.12
+    "@babel/plugin-proposal-export-default-from": ^7.12.1
+    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.12.1
+    "@babel/plugin-proposal-object-rest-spread": ^7.12.1
+    "@babel/plugin-proposal-optional-chaining": ^7.12.7
+    "@babel/plugin-proposal-private-methods": ^7.12.1
+    "@babel/plugin-syntax-dynamic-import": ^7.8.3
+    "@babel/plugin-transform-arrow-functions": ^7.12.1
+    "@babel/plugin-transform-block-scoping": ^7.12.12
+    "@babel/plugin-transform-classes": ^7.12.1
+    "@babel/plugin-transform-destructuring": ^7.12.1
+    "@babel/plugin-transform-for-of": ^7.12.1
+    "@babel/plugin-transform-parameters": ^7.12.1
+    "@babel/plugin-transform-shorthand-properties": ^7.12.1
+    "@babel/plugin-transform-spread": ^7.12.1
+    "@babel/preset-env": ^7.12.11
+    "@babel/preset-react": ^7.12.10
+    "@babel/preset-typescript": ^7.12.7
+    "@babel/register": ^7.12.1
+    "@storybook/node-logger": 6.4.22
+    "@storybook/semver": ^7.3.2
+    "@types/node": ^14.0.10
+    "@types/pretty-hrtime": ^1.0.0
+    babel-loader: ^8.0.0
+    babel-plugin-macros: ^3.0.1
+    babel-plugin-polyfill-corejs3: ^0.1.0
+    chalk: ^4.1.0
+    core-js: ^3.8.2
+    express: ^4.17.1
+    file-system-cache: ^1.0.5
+    find-up: ^5.0.0
+    fork-ts-checker-webpack-plugin: ^6.0.4
+    fs-extra: ^9.0.1
+    glob: ^7.1.6
+    handlebars: ^4.7.7
+    interpret: ^2.2.0
+    json5: ^2.1.3
+    lazy-universal-dotenv: ^3.0.1
+    picomatch: ^2.3.0
+    pkg-dir: ^5.0.0
+    pretty-hrtime: ^1.0.3
+    resolve-from: ^5.0.0
+    slash: ^3.0.0
+    telejson: ^5.3.2
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+    webpack: 4
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: afcbeb5878a3e01ec8b6258a64bb74610345419f10db6e8a9d9c5149b83a6dc4db8c5e60dac5967e0d0fe2c45b6cefb1877975756689c2b6ad7721f117f4c634
+  languageName: node
+  linkType: hard
+
 "@storybook/core-events@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/core-events@npm:6.4.18"
@@ -5168,6 +5477,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-events@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/core-events@npm:6.4.22"
+  dependencies:
+    core-js: ^3.8.2
+  checksum: d114e0ab9e6fbffb232f38cb964eaead5d3fa3752863cafd0be2afb249127b21f833a6f536655cabb41f1748e690e95fc749f5f2956989ea3d9b676f593a3b0b
+  languageName: node
+  linkType: hard
+
 "@storybook/core-server@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/core-server@npm:6.4.18"
@@ -5230,6 +5548,68 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-server@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/core-server@npm:6.4.22"
+  dependencies:
+    "@discoveryjs/json-ext": ^0.5.3
+    "@storybook/builder-webpack4": 6.4.22
+    "@storybook/core-client": 6.4.22
+    "@storybook/core-common": 6.4.22
+    "@storybook/core-events": 6.4.22
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/csf-tools": 6.4.22
+    "@storybook/manager-webpack4": 6.4.22
+    "@storybook/node-logger": 6.4.22
+    "@storybook/semver": ^7.3.2
+    "@storybook/store": 6.4.22
+    "@types/node": ^14.0.10
+    "@types/node-fetch": ^2.5.7
+    "@types/pretty-hrtime": ^1.0.0
+    "@types/webpack": ^4.41.26
+    better-opn: ^2.1.1
+    boxen: ^5.1.2
+    chalk: ^4.1.0
+    cli-table3: ^0.6.1
+    commander: ^6.2.1
+    compression: ^1.7.4
+    core-js: ^3.8.2
+    cpy: ^8.1.2
+    detect-port: ^1.3.0
+    express: ^4.17.1
+    file-system-cache: ^1.0.5
+    fs-extra: ^9.0.1
+    globby: ^11.0.2
+    ip: ^1.1.5
+    lodash: ^4.17.21
+    node-fetch: ^2.6.1
+    pretty-hrtime: ^1.0.3
+    prompts: ^2.4.0
+    regenerator-runtime: ^0.13.7
+    serve-favicon: ^2.5.0
+    slash: ^3.0.0
+    telejson: ^5.3.3
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+    watchpack: ^2.2.0
+    webpack: 4
+    ws: ^8.2.3
+  peerDependencies:
+    "@storybook/builder-webpack5": 6.4.22
+    "@storybook/manager-webpack5": 6.4.22
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  peerDependenciesMeta:
+    "@storybook/builder-webpack5":
+      optional: true
+    "@storybook/manager-webpack5":
+      optional: true
+    typescript:
+      optional: true
+  checksum: 38183ededd79f644374b75807f533111e7430d7aa2d761b9bb0f3e603e5c881cd08a38cad5e6b77d9560e3534b64e7b35043a3d5701b2cc2319b3d29c8298b6c
+  languageName: node
+  linkType: hard
+
 "@storybook/core@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/core@npm:6.4.18"
@@ -5275,6 +5655,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf-tools@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/csf-tools@npm:6.4.22"
+  dependencies:
+    "@babel/core": ^7.12.10
+    "@babel/generator": ^7.12.11
+    "@babel/parser": ^7.12.11
+    "@babel/plugin-transform-react-jsx": ^7.12.12
+    "@babel/preset-env": ^7.12.11
+    "@babel/traverse": ^7.12.11
+    "@babel/types": ^7.12.11
+    "@mdx-js/mdx": ^1.6.22
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    core-js: ^3.8.2
+    fs-extra: ^9.0.1
+    global: ^4.4.0
+    js-string-escape: ^1.0.1
+    lodash: ^4.17.21
+    prettier: ">=2.2.1 <=2.3.0"
+    regenerator-runtime: ^0.13.7
+    ts-dedent: ^2.0.0
+  checksum: 7f9e05d8579049fdfb3f1e726f8eb856499210169077da6f5e9b4e1cb4adf724c4a3a5dee299494ec57ccebbe2e8d286d48ed54d91f67157b0249c12632f0458
+  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"
@@ -5334,6 +5739,56 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/manager-webpack4@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/manager-webpack4@npm:6.4.22"
+  dependencies:
+    "@babel/core": ^7.12.10
+    "@babel/plugin-transform-template-literals": ^7.12.1
+    "@babel/preset-react": ^7.12.10
+    "@storybook/addons": 6.4.22
+    "@storybook/core-client": 6.4.22
+    "@storybook/core-common": 6.4.22
+    "@storybook/node-logger": 6.4.22
+    "@storybook/theming": 6.4.22
+    "@storybook/ui": 6.4.22
+    "@types/node": ^14.0.10
+    "@types/webpack": ^4.41.26
+    babel-loader: ^8.0.0
+    case-sensitive-paths-webpack-plugin: ^2.3.0
+    chalk: ^4.1.0
+    core-js: ^3.8.2
+    css-loader: ^3.6.0
+    express: ^4.17.1
+    file-loader: ^6.2.0
+    file-system-cache: ^1.0.5
+    find-up: ^5.0.0
+    fs-extra: ^9.0.1
+    html-webpack-plugin: ^4.0.0
+    node-fetch: ^2.6.1
+    pnp-webpack-plugin: 1.6.4
+    read-pkg-up: ^7.0.1
+    regenerator-runtime: ^0.13.7
+    resolve-from: ^5.0.0
+    style-loader: ^1.3.0
+    telejson: ^5.3.2
+    terser-webpack-plugin: ^4.2.3
+    ts-dedent: ^2.0.0
+    url-loader: ^4.1.1
+    util-deprecate: ^1.0.2
+    webpack: 4
+    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
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 8e203256420fe03534716f816fb23eb2a67f22ba7b6eedb0815ed91a40a67137b5da624e83b8e7c6419ee434506b01f61f3cf5a90e024d83a31d536265c9bc4e
+  languageName: node
+  linkType: hard
+
 "@storybook/manager-webpack5@npm:~6.4.5":
   version: 6.4.18
   resolution: "@storybook/manager-webpack5@npm:6.4.18"
@@ -5407,6 +5862,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/node-logger@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/node-logger@npm:6.4.22"
+  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: 9025f1c4d6bddaeddfd98471b3490b16747f9d8198292c58bd9311fd5d7e9fecc8ce7b20ea1bb52877eb2b21d6d1b9d4072ac4d5d21ef926e1c809b42f6f36ce
+  languageName: node
+  linkType: hard
+
 "@storybook/postinstall@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/postinstall@npm:6.4.18"
@@ -5443,6 +5911,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/preview-web@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/preview-web@npm:6.4.22"
+  dependencies:
+    "@storybook/addons": 6.4.22
+    "@storybook/channel-postmessage": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    "@storybook/core-events": 6.4.22
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/store": 6.4.22
+    ansi-to-html: ^0.6.11
+    core-js: ^3.8.2
+    global: ^4.4.0
+    lodash: ^4.17.21
+    qs: ^6.10.0
+    regenerator-runtime: ^0.13.7
+    synchronous-promise: ^2.0.15
+    ts-dedent: ^2.0.0
+    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: 378a908621391b405855ab6bfd0d912073d314f1fe989ee5390cc904bd10f92f96ed37d606e847bcfe3c5c682188a1182cb218e5f0f86da2354e19b66fc188db
+  languageName: node
+  linkType: hard
+
 "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.253f8c1.0":
   version: 1.0.2-canary.253f8c1.0
   resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.253f8c1.0"
@@ -5528,6 +6023,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/router@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/router@npm:6.4.22"
+  dependencies:
+    "@storybook/client-logger": 6.4.22
+    core-js: ^3.8.2
+    fast-deep-equal: ^3.1.3
+    global: ^4.4.0
+    history: 5.0.0
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    qs: ^6.10.0
+    react-router: ^6.0.0
+    react-router-dom: ^6.0.0
+    ts-dedent: ^2.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: 107f7e6fa244325f053bbd32a36c891db513d2c6802908964a5fa2f03302256d33c3a85b95e999f36dc8097fb89503999881f56affc8c542874a1dc0468781c7
+  languageName: node
+  linkType: hard
+
 "@storybook/semver@npm:^7.3.2":
   version: 7.3.2
   resolution: "@storybook/semver@npm:7.3.2"
@@ -5587,6 +6104,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/store@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/store@npm:6.4.22"
+  dependencies:
+    "@storybook/addons": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    "@storybook/core-events": 6.4.22
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    core-js: ^3.8.2
+    fast-deep-equal: ^3.1.3
+    global: ^4.4.0
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    regenerator-runtime: ^0.13.7
+    slash: ^3.0.0
+    stable: ^0.1.8
+    synchronous-promise: ^2.0.15
+    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: b2bd7be4aa3b71f17d371b0acb9cc5e39cd76c485b8f6c830f313ffb899a93496a352f17755d42c315108b6ab6b2ff576e7536c167fbe47a93ba65c55bf33874
+  languageName: node
+  linkType: hard
+
 "@storybook/theming@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/theming@npm:6.4.18"
@@ -5610,6 +6153,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/theming@npm:6.4.22"
+  dependencies:
+    "@emotion/core": ^10.1.1
+    "@emotion/is-prop-valid": ^0.8.6
+    "@emotion/styled": ^10.0.27
+    "@storybook/client-logger": 6.4.22
+    core-js: ^3.8.2
+    deep-object-diff: ^1.1.0
+    emotion-theming: ^10.0.27
+    global: ^4.4.0
+    memoizerific: ^1.11.3
+    polished: ^4.0.5
+    resolve-from: ^5.0.0
+    ts-dedent: ^2.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: bb95f7fa400f09eb01ac55ebb2ab65b03300033971fe921ab019dc01b9ccd110ed714da8788c0286a6b59ed1b31e6f65296b3319c332835d302cacf0259a0b44
+  languageName: node
+  linkType: hard
+
 "@storybook/ui@npm:6.4.18":
   version: 6.4.18
   resolution: "@storybook/ui@npm:6.4.18"
@@ -5649,6 +6215,45 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/ui@npm:6.4.22":
+  version: 6.4.22
+  resolution: "@storybook/ui@npm:6.4.22"
+  dependencies:
+    "@emotion/core": ^10.1.1
+    "@storybook/addons": 6.4.22
+    "@storybook/api": 6.4.22
+    "@storybook/channels": 6.4.22
+    "@storybook/client-logger": 6.4.22
+    "@storybook/components": 6.4.22
+    "@storybook/core-events": 6.4.22
+    "@storybook/router": 6.4.22
+    "@storybook/semver": ^7.3.2
+    "@storybook/theming": 6.4.22
+    copy-to-clipboard: ^3.3.1
+    core-js: ^3.8.2
+    core-js-pure: ^3.8.2
+    downshift: ^6.0.15
+    emotion-theming: ^10.0.27
+    fuse.js: ^3.6.1
+    global: ^4.4.0
+    lodash: ^4.17.21
+    markdown-to-jsx: ^7.1.3
+    memoizerific: ^1.11.3
+    polished: ^4.0.5
+    qs: ^6.10.0
+    react-draggable: ^4.4.3
+    react-helmet-async: ^1.0.7
+    react-sizeme: ^3.0.1
+    regenerator-runtime: ^0.13.7
+    resolve-from: ^5.0.0
+    store2: ^2.12.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: acc403f6f98b61f202b4cf3fd054696089d27c025d7630c413ab564f3a477239398258a3be075b23df504a064f4f31310ce6d19cdb3fdb859e53b701f2090a65
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-add-jsx-attribute@npm:^5.4.0":
   version: 5.4.0
   resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:5.4.0"
@@ -5934,126 +6539,126 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc-node/core@npm:^1.9.1":
-  version: 1.9.1
-  resolution: "@swc-node/core@npm:1.9.1"
+"@swc-node/core@npm:^1.9.2":
+  version: 1.9.2
+  resolution: "@swc-node/core@npm:1.9.2"
   peerDependencies:
     "@swc/core": ">= 1.3"
-  checksum: 4e76fd36002a64aa386288771ddc2b3c0e9a0e09bb8a4fc32d3e358181ad4dc8b945658cc47af036ba0bff4320b347db10191f8ffce73069be7e17f9c5745859
+  checksum: 2a91a294b9947b33d0244d5e176a89adc6986c04b9b9e0ec0471815bc3d6d7f250be4546e9bc19f30bce5c5f0dbea01ed13bca351c5dfd45e54e9becae3fa0f4
   languageName: node
   linkType: hard
 
-"@swc-node/register@npm:^1.4.0":
-  version: 1.5.4
-  resolution: "@swc-node/register@npm:1.5.4"
+"@swc-node/register@npm:^1.4.2":
+  version: 1.5.5
+  resolution: "@swc-node/register@npm:1.5.5"
   dependencies:
-    "@swc-node/core": ^1.9.1
-    "@swc-node/sourcemap-support": ^0.2.2
+    "@swc-node/core": ^1.9.2
+    "@swc-node/sourcemap-support": ^0.2.3
     colorette: ^2.0.19
     debug: ^4.3.4
     pirates: ^4.0.5
-    tslib: ^2.4.0
+    tslib: ^2.4.1
   peerDependencies:
     "@swc/core": ">= 1.3"
     typescript: ">= 4.3"
-  checksum: 1ebb39fb36576a96700f8a0c6d0a5f09dfcf4a0a3d5e81b3ae9ab44de6f9469a65463864992451fdcacce6670c95c82f2d74ccc439f4f6d1bd14bdede785ec2e
+  checksum: b05b5526077486355466bbc7bf86ad2c3aef8f90a789aa0f84f39503dd90b0285d01d7c12995a51d90c0f9a27fa24f0aea290b2cd69d041098751016602546cf
   languageName: node
   linkType: hard
 
-"@swc-node/sourcemap-support@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "@swc-node/sourcemap-support@npm:0.2.2"
+"@swc-node/sourcemap-support@npm:^0.2.3":
+  version: 0.2.3
+  resolution: "@swc-node/sourcemap-support@npm:0.2.3"
   dependencies:
     source-map-support: ^0.5.21
-    tslib: ^2.4.0
-  checksum: d0c0fba3e8f95fa3d42063ad1b757293caf1a32a92b2589a52e9f602d6a5f321b8ab2c87cb324470dd60b00fcb99bee5b38db0f4ab09e15360712fa5afad8a8c
+    tslib: ^2.4.1
+  checksum: 837ee82dcda8b937c4a7d9e39a4dbe8c0d01080a73b77613a6e2e30cdc3eb944ce2c4bc470673e7d0a5ce902929a4a75dc2fcfeb5b8069fb0ae862176a2fcf92
   languageName: node
   linkType: hard
 
-"@swc/core-darwin-arm64@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-darwin-arm64@npm:1.3.19"
+"@swc/core-darwin-arm64@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-darwin-arm64@npm:1.3.25"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-darwin-x64@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-darwin-x64@npm:1.3.19"
+"@swc/core-darwin-x64@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-darwin-x64@npm:1.3.25"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm-gnueabihf@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.19"
+"@swc/core-linux-arm-gnueabihf@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.25"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-gnu@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-linux-arm64-gnu@npm:1.3.19"
+"@swc/core-linux-arm64-gnu@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-linux-arm64-gnu@npm:1.3.25"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-musl@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-linux-arm64-musl@npm:1.3.19"
+"@swc/core-linux-arm64-musl@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-linux-arm64-musl@npm:1.3.25"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-gnu@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-linux-x64-gnu@npm:1.3.19"
+"@swc/core-linux-x64-gnu@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-linux-x64-gnu@npm:1.3.25"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-musl@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-linux-x64-musl@npm:1.3.19"
+"@swc/core-linux-x64-musl@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-linux-x64-musl@npm:1.3.25"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@swc/core-win32-arm64-msvc@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-win32-arm64-msvc@npm:1.3.19"
+"@swc/core-win32-arm64-msvc@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-win32-arm64-msvc@npm:1.3.25"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-win32-ia32-msvc@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-win32-ia32-msvc@npm:1.3.19"
+"@swc/core-win32-ia32-msvc@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-win32-ia32-msvc@npm:1.3.25"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@swc/core-win32-x64-msvc@npm:1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core-win32-x64-msvc@npm:1.3.19"
+"@swc/core-win32-x64-msvc@npm:1.3.25":
+  version: 1.3.25
+  resolution: "@swc/core-win32-x64-msvc@npm:1.3.25"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core@npm:^1.3.19":
-  version: 1.3.19
-  resolution: "@swc/core@npm:1.3.19"
+"@swc/core@npm:^1.2.152, @swc/core@npm:^1.3.19":
+  version: 1.3.25
+  resolution: "@swc/core@npm:1.3.25"
   dependencies:
-    "@swc/core-darwin-arm64": 1.3.19
-    "@swc/core-darwin-x64": 1.3.19
-    "@swc/core-linux-arm-gnueabihf": 1.3.19
-    "@swc/core-linux-arm64-gnu": 1.3.19
-    "@swc/core-linux-arm64-musl": 1.3.19
-    "@swc/core-linux-x64-gnu": 1.3.19
-    "@swc/core-linux-x64-musl": 1.3.19
-    "@swc/core-win32-arm64-msvc": 1.3.19
-    "@swc/core-win32-ia32-msvc": 1.3.19
-    "@swc/core-win32-x64-msvc": 1.3.19
+    "@swc/core-darwin-arm64": 1.3.25
+    "@swc/core-darwin-x64": 1.3.25
+    "@swc/core-linux-arm-gnueabihf": 1.3.25
+    "@swc/core-linux-arm64-gnu": 1.3.25
+    "@swc/core-linux-arm64-musl": 1.3.25
+    "@swc/core-linux-x64-gnu": 1.3.25
+    "@swc/core-linux-x64-musl": 1.3.25
+    "@swc/core-win32-arm64-msvc": 1.3.25
+    "@swc/core-win32-ia32-msvc": 1.3.25
+    "@swc/core-win32-x64-msvc": 1.3.25
   dependenciesMeta:
     "@swc/core-darwin-arm64":
       optional: true
@@ -6075,9 +6680,7 @@ __metadata:
       optional: true
     "@swc/core-win32-x64-msvc":
       optional: true
-  bin:
-    swcx: run_swcx.js
-  checksum: 752499e18f81df789a9737936b2a83ea1db34bb2f983c80b394766796d853fa7d30701b52b9cb30ba943ad15286d8316603149683f4c553a5493aa78d89a76e0
+  checksum: de45a7dd871cc9497ad998d6a320d3c95cb9c74fdcb70590ff1f631e75001820d021bbfd5c463e9172afcb5ee47bffaa8fb893230e1329538c9f7afbd5ed45cf
   languageName: node
   linkType: hard
 
@@ -6099,19 +6702,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.0.0":
-  version: 8.11.2
-  resolution: "@testing-library/dom@npm:8.11.2"
+"@testing-library/dom@npm:^8.5.0":
+  version: 8.19.1
+  resolution: "@testing-library/dom@npm:8.19.1"
   dependencies:
     "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
-    "@types/aria-query": ^4.2.0
+    "@types/aria-query": ^5.0.1
     aria-query: ^5.0.0
     chalk: ^4.1.0
     dom-accessibility-api: ^0.5.9
     lz-string: ^1.4.4
     pretty-format: ^27.0.2
-  checksum: 163e6572a3caa9fab4cb48e03fa2bf2cf702a72ba55b13c8ad7ad1f807762fd480e28f54c36ff5df8ce14a97adda275b4b3bf3c81439c6509ec219c198dc4f9b
+  checksum: 0fb1f05fa199491795063eae5e892922851570717c85131776de6edd5477b1bfa528790401120a616ce4846584570d1436b0bce4649652ddb6ea9d67a1f00b19
   languageName: node
   linkType: hard
 
@@ -6154,16 +6757,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:12.1.2":
-  version: 12.1.2
-  resolution: "@testing-library/react@npm:12.1.2"
+"@testing-library/react@npm:13.0.0":
+  version: 13.0.0
+  resolution: "@testing-library/react@npm:13.0.0"
   dependencies:
     "@babel/runtime": ^7.12.5
-    "@testing-library/dom": ^8.0.0
+    "@testing-library/dom": ^8.5.0
+    "@types/react-dom": "*"
   peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 70b0f7f27c83fe1a33e7df01b1e64850fbab4050c403848d611d852cadaa25ccde58518773002ae569a1350b2282c2ccbcbe5eb6af8b29ab377ab2a8ab573b3b
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 75c2348cff6ac00f22c997c72f1444a802ebe6e671c8db70f203070d0e5d4c5a7e31d62cd86e2eedde68558834b256f99a972fe45b15fd2356e3c65b5515e197
   languageName: node
   linkType: hard
 
@@ -6226,20 +6830,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/aria-query@npm:^4.2.0":
-  version: 4.2.2
-  resolution: "@types/aria-query@npm:4.2.2"
-  checksum: 6f2ce11d91e2d665f3873258db19da752d91d85d3679eb5efcdf9c711d14492287e1e4eb52613b28e60375841a9e428594e745b68436c963d8bad4bf72188df3
-  languageName: node
-  linkType: hard
-
-"@types/babel-plugin-tester@npm:^9.0.0":
-  version: 9.0.4
-  resolution: "@types/babel-plugin-tester@npm:9.0.4"
-  dependencies:
-    "@types/babel__core": "*"
-    "@types/prettier": "*"
-  checksum: ff34219d60212e4ec98868fdba13abcb9565f7be81fcd4a2b1944fc174b8784ab115df717675e3296c7e5dc572f9a422e351f3bfb064ed33ef6a0f7cb3d5791c
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "@types/aria-query@npm:5.0.1"
+  checksum: 69fd7cceb6113ed370591aef04b3fd0742e9a1b06dd045c43531448847b85de181495e4566f98e776b37c422a12fd71866e0a1dfd904c5ec3f84d271682901de
   languageName: node
   linkType: hard
 
@@ -6265,6 +6859,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__helper-module-imports@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@types/babel__helper-module-imports@npm:7.18.0"
+  dependencies:
+    "@types/babel__core": "*"
+    "@types/babel__traverse": "*"
+  checksum: a6c474e93bd85da957f1c66c5676cdc4b3c8dfd1af18b41e80e27c782d286a89dc9cde1c2870e93a786f810591525a5a4f61de9a3385a2fcd38a5fea50764cd9
+  languageName: node
+  linkType: hard
+
 "@types/babel__helper-plugin-utils@npm:7.10.0":
   version: 7.10.0
   resolution: "@types/babel__helper-plugin-utils@npm:7.10.0"
@@ -6603,6 +7207,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lz-string@npm:1.3.34":
+  version: 1.3.34
+  resolution: "@types/lz-string@npm:1.3.34"
+  checksum: e5c5ec0b9b9bfb0a64ca883152ce753244f53a6f12d8d3ba1a363262bea07fed1cd04c399a33a5d600a665d15a39a58bf5fd1ad9c52a98bccf7511f7a42e82f7
+  languageName: node
+  linkType: hard
+
 "@types/mdast@npm:^3.0.0":
   version: 3.0.10
   resolution: "@types/mdast@npm:3.0.10"
@@ -6701,7 +7312,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prettier@npm:*, @types/prettier@npm:^2.1.5":
+"@types/prettier@npm:^2.1.5":
   version: 2.4.3
   resolution: "@types/prettier@npm:2.4.3"
   checksum: b240434daabac54700c862b0bb52a83fec396e0e9c847447119ba41fd8404d79aadfa174e6306fb094b29efadac586344b7606c3a71c286b71755ab2579d54df
@@ -6743,21 +7354,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:17.0.9":
-  version: 17.0.9
-  resolution: "@types/react-dom@npm:17.0.9"
+"@types/react-dom@npm:*, @types/react-dom@npm:>=16.9.0":
+  version: 18.0.10
+  resolution: "@types/react-dom@npm:18.0.10"
   dependencies:
     "@types/react": "*"
-  checksum: b7e898e1a22643a371f58e801a3d1d8cf13a82d77063c24be73e840ef8d877ca1d04adc5db168d0dac3167dc050a26b1d70efc5fe8566a7f46a3c488a8322989
+  checksum: ff8282d5005a0b1cd95fb65bf79d3d8485e4cfe2aaf052129033a178684b940014a3f4536bc20d573f8a01cf4c6f4770c74988cef7c2b5cac3041d9f172647e3
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:>=16.9.0":
-  version: 17.0.11
-  resolution: "@types/react-dom@npm:17.0.11"
+"@types/react-dom@npm:18.0.0":
+  version: 18.0.0
+  resolution: "@types/react-dom@npm:18.0.0"
   dependencies:
     "@types/react": "*"
-  checksum: 4d5730dffbef86c887cecad7e3cecda424ce6a64d0b5441c63b5b015d48219868660a2bb1aa15e897e565ad8867fa6b885d4358b04e1c4e589ba4c07c3fda55c
+  checksum: 0d8c9cb3e72aefe0dd2b58a49845a200369f01ae92f3f11f642e04efc95dfd1c9380b6592d4273dd6113fb8707947d15b66d56c75c41f39f28bd897f0c08dfa9
   languageName: node
   linkType: hard
 
@@ -6811,25 +7422,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16.9.0":
-  version: 17.0.38
-  resolution: "@types/react@npm:17.0.38"
+"@types/react@npm:*, @types/react@npm:18.0.0, @types/react@npm:>=16.9.0":
+  version: 18.0.0
+  resolution: "@types/react@npm:18.0.0"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: 4079f4f959cd4a4bfaeda8b89fe8a1b1f8bdc9d87acfdc5f74a0b39cec9ec6a470724357c62778c0f063180b360c250e920c5a142f1dbcda67d9cc25a6d43a85
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:17.0.30":
-  version: 17.0.30
-  resolution: "@types/react@npm:17.0.30"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: e3aaac1b8fda6e3622b75db0bd7d8dc412c2f2b77a00afdd32cae8c71fb0b1ca6926ab1fbe1c536dd51d96c0ba372738993837a8df1637637aaab7b86e421b7f
+  checksum: 8a9769e2cabe335c86179881577e6ca32f3a6abdd5adbe2d498e48b78d532130da828a53ef25f21915179da454654b811292e0a8191c8a81af3bf4b05f5673bd
   languageName: node
   linkType: hard
 
@@ -6987,17 +7587,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/webpack-sources@npm:^0.1.5":
-  version: 0.1.9
-  resolution: "@types/webpack-sources@npm:0.1.9"
-  dependencies:
-    "@types/node": "*"
-    "@types/source-list-map": "*"
-    source-map: ^0.6.1
-  checksum: bc09c584c7047e8aed29801a3981787dee3898e9e7a99891a362df114fcac3879eea5a00932314866a01b25220391839be09fe1487b16d4970ff4a7afd5b9725
-  languageName: node
-  linkType: hard
-
 "@types/webpack@npm:^4.41.26, @types/webpack@npm:^4.41.8":
   version: 4.41.32
   resolution: "@types/webpack@npm:4.41.32"
@@ -7055,12 +7644,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:~5.3.0":
-  version: 5.3.1
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.3.1"
+"@typescript-eslint/eslint-plugin@npm:5.18.0":
+  version: 5.18.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.18.0"
   dependencies:
-    "@typescript-eslint/experimental-utils": 5.3.1
-    "@typescript-eslint/scope-manager": 5.3.1
+    "@typescript-eslint/scope-manager": 5.18.0
+    "@typescript-eslint/type-utils": 5.18.0
+    "@typescript-eslint/utils": 5.18.0
     debug: ^4.3.2
     functional-red-black-tree: ^1.0.1
     ignore: ^5.1.8
@@ -7073,50 +7663,45 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 084cac897b5f72a7abaea43e29e8a0dd47b1f13904637957e149ad1a8501e777200ae1c7ac13428be7a33490459867eec5848c6d281130f5b064ec52e6b90f6d
+  checksum: e8f0e7cfa0d102b1006a0f674fbba6cfc3d5a609d3ebb07306d744d3db91080659cd2b9935ccbde2ad9bbbe9543bc47540df1ffada0e7676dd38957cdffd7436
   languageName: node
   linkType: hard
 
-"@typescript-eslint/experimental-utils@npm:5.3.1, @typescript-eslint/experimental-utils@npm:~5.3.0":
-  version: 5.3.1
-  resolution: "@typescript-eslint/experimental-utils@npm:5.3.1"
+"@typescript-eslint/experimental-utils@npm:~5.18.0":
+  version: 5.18.0
+  resolution: "@typescript-eslint/experimental-utils@npm:5.18.0"
   dependencies:
-    "@types/json-schema": ^7.0.9
-    "@typescript-eslint/scope-manager": 5.3.1
-    "@typescript-eslint/types": 5.3.1
-    "@typescript-eslint/typescript-estree": 5.3.1
-    eslint-scope: ^5.1.1
-    eslint-utils: ^3.0.0
+    "@typescript-eslint/utils": 5.18.0
   peerDependencies:
-    eslint: "*"
-  checksum: 638829731400d3f654fdfb7ec173fc568f65cc9fbaaacffa8aa369411ba33acf9220bde9981a1226789fe15a1a1738c1840f5f26841bdc6583df5c72a90f01d7
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 924f52dca9ea1bb4ce39fae468ce02202592cfbadaeb36c50d35ba47e11fe25698dd5017ce234f0fec9faab4e05a43afa3461d014dd7ef40a1951ec09b479621
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:~5.3.0":
-  version: 5.3.1
-  resolution: "@typescript-eslint/parser@npm:5.3.1"
+"@typescript-eslint/parser@npm:5.18.0":
+  version: 5.18.0
+  resolution: "@typescript-eslint/parser@npm:5.18.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.3.1
-    "@typescript-eslint/types": 5.3.1
-    "@typescript-eslint/typescript-estree": 5.3.1
+    "@typescript-eslint/scope-manager": 5.18.0
+    "@typescript-eslint/types": 5.18.0
+    "@typescript-eslint/typescript-estree": 5.18.0
     debug: ^4.3.2
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 9ca2928ca3400898a16700deb5deb5aeb2e45c9f430e243be78e6aefa8e515edcb0d210e8ad2b195894a228a7d9c9355906cb68b9c7ed6b23642672465e501a3
+  checksum: 8e007a4980eb8794621bf51404b6ecc923eeffc661d7da2fac9d5c79f6ea70735322953dd88ee4a9b06d916f43e4cc633d724a5cf70c0a10a8cd251d54e67ff4
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.3.1":
-  version: 5.3.1
-  resolution: "@typescript-eslint/scope-manager@npm:5.3.1"
+"@typescript-eslint/scope-manager@npm:5.18.0":
+  version: 5.18.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.18.0"
   dependencies:
-    "@typescript-eslint/types": 5.3.1
-    "@typescript-eslint/visitor-keys": 5.3.1
-  checksum: 336bb99351be878c62c591c408bce24ee08fb3eef76595175263ac906d6153e1b75000696c093b869d904b9a3e80b8d2e550df5f52996c77f702be69c8c4c28d
+    "@typescript-eslint/types": 5.18.0
+    "@typescript-eslint/visitor-keys": 5.18.0
+  checksum: c82625ec8293afea6e3df035612e7a7ccf3b23476a9b20bf7eb1190a52bca1886a3ea479d6b6b92eaac77dbbb2a23112b03e97f894aac39c45f7442672338cb6
   languageName: node
   linkType: hard
 
@@ -7130,10 +7715,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.3.1":
-  version: 5.3.1
-  resolution: "@typescript-eslint/types@npm:5.3.1"
-  checksum: ccba0a505b96860b9a29f8cd1cd3c9dc7903fd21274c538ee988a4cf69c24274822e12ade61d05088626e43e3159ef5a9f5c0f4344d2c2223c6b3649cc70efb7
+"@typescript-eslint/type-utils@npm:5.18.0":
+  version: 5.18.0
+  resolution: "@typescript-eslint/type-utils@npm:5.18.0"
+  dependencies:
+    "@typescript-eslint/utils": 5.18.0
+    debug: ^4.3.2
+    tsutils: ^3.21.0
+  peerDependencies:
+    eslint: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: a9722e18635d98ed7b468b1915d4bc9ef3de6dd85bfe734d932465977f9952655171cb5c886c7d42145ebb8ef1b5b7fcf50e9937a9370080246a7bae4cbd1047
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/types@npm:5.18.0":
+  version: 5.18.0
+  resolution: "@typescript-eslint/types@npm:5.18.0"
+  checksum: 25d8d6f2f70ac4e93f4759a4927290749f528bce2150a87cde08200d706a6147880ca2ceeb8c93e0f370aace096c878096cd45427a59538877ac2121df8aaa01
   languageName: node
   linkType: hard
 
@@ -7144,12 +7745,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.3.1":
-  version: 5.3.1
-  resolution: "@typescript-eslint/typescript-estree@npm:5.3.1"
+"@typescript-eslint/typescript-estree@npm:5.18.0":
+  version: 5.18.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.18.0"
   dependencies:
-    "@typescript-eslint/types": 5.3.1
-    "@typescript-eslint/visitor-keys": 5.3.1
+    "@typescript-eslint/types": 5.18.0
+    "@typescript-eslint/visitor-keys": 5.18.0
     debug: ^4.3.2
     globby: ^11.0.4
     is-glob: ^4.0.3
@@ -7158,7 +7759,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: cc29aabda0e2f86783d82455a790deaa0b66b74373ae76709846d29eccce4fe7e942596e9329df39ad1ad44e7360100e9d0372e21ac66a0ab018ca8c10094c43
+  checksum: 2fc564062180a0623966061ecd0c9ecf4dfaa2350cc9b7584444cdc71afa615c2bafe75f7ea684289e38b4fd73d33766f4a99f2c1999321ba3826ad7ccbf4ea9
   languageName: node
   linkType: hard
 
@@ -7180,6 +7781,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/utils@npm:5.18.0":
+  version: 5.18.0
+  resolution: "@typescript-eslint/utils@npm:5.18.0"
+  dependencies:
+    "@types/json-schema": ^7.0.9
+    "@typescript-eslint/scope-manager": 5.18.0
+    "@typescript-eslint/types": 5.18.0
+    "@typescript-eslint/typescript-estree": 5.18.0
+    eslint-scope: ^5.1.1
+    eslint-utils: ^3.0.0
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: f0b03a7fe557ce97480b3824043900e563c173d46a759c8272d92ecaf32ff96e98212df76dbd2d20dc91ce512e6219bb69c9036896b8d7e22eec22366f80381b
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/utils@npm:^5.10.0, @typescript-eslint/utils@npm:^5.20.0":
   version: 5.36.2
   resolution: "@typescript-eslint/utils@npm:5.36.2"
@@ -7196,13 +7813,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.3.1":
-  version: 5.3.1
-  resolution: "@typescript-eslint/visitor-keys@npm:5.3.1"
+"@typescript-eslint/visitor-keys@npm:5.18.0":
+  version: 5.18.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.18.0"
   dependencies:
-    "@typescript-eslint/types": 5.3.1
+    "@typescript-eslint/types": 5.18.0
     eslint-visitor-keys: ^3.0.0
-  checksum: e2a2fb9dfa77d1db685540dd65c7fc8477ad910459cfdfe3600fff4ed27105f5a976cf1cfddc588f9231d74287e722b038ea17ba7b3ccff672642b492222f303
+  checksum: c856e3cf2fde3008e1d9bea3c73bc60d9060c7cb6d6ea186c20db9d74eff84986365f518dd1b4e142dca179e9a5cd7a6ed4381173d6abfd0ebd4d16d5cf50b94
   languageName: node
   linkType: hard
 
@@ -7635,7 +8252,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-jsx@npm:^5.3.1":
+"acorn-jsx@npm:^5.3.1, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
   peerDependencies:
@@ -7676,7 +8293,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.4, acorn@npm:^8.2.4, acorn@npm:^8.5.0, acorn@npm:^8.7.0, acorn@npm:^8.7.1":
+"acorn@npm:^8.0.4, acorn@npm:^8.2.4, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0":
   version: 8.8.1
   resolution: "acorn@npm:8.8.1"
   bin:
@@ -7914,7 +8531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-regex@npm:^5.0.0, ansi-regex@npm:^5.0.1":
+"ansi-regex@npm:^5.0.1":
   version: 5.0.1
   resolution: "ansi-regex@npm:5.0.1"
   checksum: 2aa4bb54caf2d622f1afdad09441695af2a83aa3fe8b8afa581d205e57ed4261c183c4d3877cee25794443fde5876417d859c108078ab788d6af7e4fe52eb66b
@@ -8661,17 +9278,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-tester@npm:10.0.0":
-  version: 10.0.0
-  resolution: "babel-plugin-tester@npm:10.0.0"
+"babel-plugin-tester@npm:11.0.0":
+  version: 11.0.0
+  resolution: "babel-plugin-tester@npm:11.0.0"
   dependencies:
-    "@types/babel-plugin-tester": ^9.0.0
+    debug: ^4.3.4
     lodash.mergewith: ^4.6.2
-    prettier: ^2.0.1
+    prettier: ^2.8.3
     strip-indent: ^3.0.0
   peerDependencies:
-    "@babel/core": ^7.11.6
-  checksum: 9a93dccee0347fe8953f2727da66a76fe27d9b4ead3ef86023d36d7fe6f6d85cfd4440b36134ceca317ae0700bf2a24997505be2c7c3f0c41ecf89b1fe7eb27d
+    "@babel/core": ">=7.11.6"
+  checksum: e88246f7fa333f4934ebca5988760da488ee6907b854d5b5f1a5632d96516870fd3c71c11b8d48e7516c9034c0af2c3d1eae87953abd9279bd8d694a145c69eb
   languageName: node
   linkType: hard
 
@@ -9417,7 +10034,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:^5.0.0, camelcase@npm:^5.3.1":
+"camelcase@npm:^5.3.1":
   version: 5.3.1
   resolution: "camelcase@npm:5.3.1"
   checksum: e6effce26b9404e3c0f301498184f243811c30dfe6d0b9051863bd8e4034d09c8c2923794f280d6827e5aa055f6c434115ff97864a16a963366fb35fd673024b
@@ -9739,6 +10356,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cli-cursor@npm:3.1.0":
+  version: 3.1.0
+  resolution: "cli-cursor@npm:3.1.0"
+  dependencies:
+    restore-cursor: ^3.1.0
+  checksum: 2692784c6cd2fd85cfdbd11f53aea73a463a6d64a77c3e098b2b4697a20443f430c220629e1ca3b195ea5ac4a97a74c2ee411f3807abf6df2b66211fec0c0a29
+  languageName: node
+  linkType: hard
+
 "cli-spinners@npm:2.6.1":
   version: 2.6.1
   resolution: "cli-spinners@npm:2.6.1"
@@ -9759,17 +10385,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cliui@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "cliui@npm:6.0.0"
-  dependencies:
-    string-width: ^4.2.0
-    strip-ansi: ^6.0.0
-    wrap-ansi: ^6.2.0
-  checksum: 4fcfd26d292c9f00238117f39fc797608292ae36bac2168cfee4c85923817d0607fe21b3329a8621e01aedf512c99b7eaa60e363a671ffd378df6649fb48ae42
-  languageName: node
-  linkType: hard
-
 "cliui@npm:^7.0.2":
   version: 7.0.4
   resolution: "cliui@npm:7.0.4"
@@ -10344,18 +10959,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "cosmiconfig@npm:4.0.0"
-  dependencies:
-    is-directory: ^0.3.1
-    js-yaml: ^3.9.0
-    parse-json: ^4.0.0
-    require-from-string: ^2.0.1
-  checksum: bf31256752138fedd4bef3195ca74731741e24978e0ccefeb91ebfff4b37d43648a791391106b048743015005acb614bf328b46b9a6ec55e52164f45af2959e8
-  languageName: node
-  linkType: hard
-
 "cosmiconfig@npm:^5.1.0":
   version: 5.2.1
   resolution: "cosmiconfig@npm:5.2.1"
@@ -11631,13 +12234,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decamelize@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "decamelize@npm:1.2.0"
-  checksum: ad8c51a7e7e0720c70ec2eeb1163b66da03e7616d7b98c9ef43cce2416395e84c1e9548dd94f5f6ffecfee9f8b94251fc57121a8b021f2ff2469b2bae247b8aa
-  languageName: node
-  linkType: hard
-
 "decimal.js@npm:^10.2.1":
   version: 10.3.1
   resolution: "decimal.js@npm:10.3.1"
@@ -12404,7 +13000,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enquirer@npm:^2.3.5, enquirer@npm:~2.3.6":
+"enquirer@npm:~2.3.6":
   version: 2.3.6
   resolution: "enquirer@npm:2.3.6"
   dependencies:
@@ -12924,59 +13520,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-module-utils@npm:^2.7.0, eslint-module-utils@npm:^2.7.2":
-  version: 2.7.2
-  resolution: "eslint-module-utils@npm:2.7.2"
+"eslint-module-utils@npm:^2.7.3":
+  version: 2.7.4
+  resolution: "eslint-module-utils@npm:2.7.4"
   dependencies:
     debug: ^3.2.7
-    find-up: ^2.1.0
-  checksum: 3e6407461d12b1568556fc9a84668415693ecce92d17d7407353defcfcafec5d3d8dfa2d9eda3743b3b53ef04101d8aa69072b3d634d92e766c3dfa10505542d
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-import@npm:2.25.2":
-  version: 2.25.2
-  resolution: "eslint-plugin-import@npm:2.25.2"
-  dependencies:
-    array-includes: ^3.1.4
-    array.prototype.flat: ^1.2.5
-    debug: ^2.6.9
-    doctrine: ^2.1.0
-    eslint-import-resolver-node: ^0.3.6
-    eslint-module-utils: ^2.7.0
-    has: ^1.0.3
-    is-core-module: ^2.7.0
-    is-glob: ^4.0.3
-    minimatch: ^3.0.4
-    object.values: ^1.1.5
-    resolve: ^1.20.0
-    tsconfig-paths: ^3.11.0
-  peerDependencies:
-    eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-  checksum: 4ca36e37faf72fb1ed25361ea8a6abbcc9daa65f3a9ac1dc0a660029000456e8c8b98a87b8cc2316541b13c6e5915df41d2dc4a1d7fe0729d9b72b9a3bd5b909
+  peerDependenciesMeta:
+    eslint:
+      optional: true
+  checksum: 5da13645daff145a5c922896b258f8bba560722c3767254e458d894ff5fbb505d6dfd945bffa932a5b0ae06714da2379bd41011c4c20d2d59cc83e23895360f7
   languageName: node
   linkType: hard
 
-"eslint-plugin-import@npm:^2.25.2":
-  version: 2.25.4
-  resolution: "eslint-plugin-import@npm:2.25.4"
+"eslint-plugin-import@npm:2.26.0, eslint-plugin-import@npm:^2.25.2":
+  version: 2.26.0
+  resolution: "eslint-plugin-import@npm:2.26.0"
   dependencies:
     array-includes: ^3.1.4
     array.prototype.flat: ^1.2.5
     debug: ^2.6.9
     doctrine: ^2.1.0
     eslint-import-resolver-node: ^0.3.6
-    eslint-module-utils: ^2.7.2
+    eslint-module-utils: ^2.7.3
     has: ^1.0.3
-    is-core-module: ^2.8.0
+    is-core-module: ^2.8.1
     is-glob: ^4.0.3
-    minimatch: ^3.0.4
+    minimatch: ^3.1.2
     object.values: ^1.1.5
-    resolve: ^1.20.0
-    tsconfig-paths: ^3.12.0
+    resolve: ^1.22.0
+    tsconfig-paths: ^3.14.1
   peerDependencies:
     eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-  checksum: 0af24f5c7c6ca692f42e3947127f0ae7dfe44f1e02740f7cbe988b510a9c52bab0065d7df04e2d953dcc88a4595a00cbdcf14018acf8cd75cfd47b72efcbb734
+  checksum: 0bf77ad80339554481eafa2b1967449e1f816b94c7a6f9614ce33fb4083c4e6c050f10d241dd50b4975d47922880a34de1e42ea9d8e6fd663ebb768baa67e655
   languageName: node
   linkType: hard
 
@@ -13019,18 +13594,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-hooks@npm:4.3.0, eslint-plugin-react-hooks@npm:^4.2.0":
-  version: 4.3.0
-  resolution: "eslint-plugin-react-hooks@npm:4.3.0"
+"eslint-plugin-react-hooks@npm:4.4.0":
+  version: 4.4.0
+  resolution: "eslint-plugin-react-hooks@npm:4.4.0"
+  peerDependencies:
+    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+  checksum: 350b50d45677cb2df682b9e54475912746bd2f56fc342e4d47fad78d71eb1b2b742e702f1e6c04ab2196346d3d7a2e327b5eee826f5b96bfb84b5c41d35e44e9
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-react-hooks@npm:^4.3.0":
+  version: 4.6.0
+  resolution: "eslint-plugin-react-hooks@npm:4.6.0"
   peerDependencies:
     eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-  checksum: 0ba1566ba0780bbc75a5921f49188edf232db2085ab32c8d3889592f0db9d6fadc97fcf639775e0101dec6b5409ca3c803ec44213b90c8bacaf0bdf921871c2e
+  checksum: 23001801f14c1d16bf0a837ca7970d9dd94e7b560384b41db378b49b6e32dc43d6e2790de1bd737a652a86f81a08d6a91f402525061b47719328f586a57e86c3
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:7.27.0":
-  version: 7.27.0
-  resolution: "eslint-plugin-react@npm:7.27.0"
+"eslint-plugin-react@npm:7.28.0":
+  version: 7.28.0
+  resolution: "eslint-plugin-react@npm:7.28.0"
   dependencies:
     array-includes: ^3.1.4
     array.prototype.flatmap: ^1.2.5
@@ -13048,31 +13632,31 @@ __metadata:
     string.prototype.matchall: ^4.0.6
   peerDependencies:
     eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-  checksum: 47d75e003898129a56ca2416d3aa038b4c4a752df3edf71174c3017788eb8b83d786091fc6c3702abf870a2abe5d25cc367d5aa7c1417153cf5b5b707aec6446
+  checksum: 90293d0fd53bb1f735ffd32141cdd211fb1120c9f7bbe5342f9e923261a39e52a2b2575d4e46c9cd77d257f42db4a99b8b339689fc5b5c1c26048929f69b1784
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.27.0":
-  version: 7.28.0
-  resolution: "eslint-plugin-react@npm:7.28.0"
+"eslint-plugin-react@npm:7.29.4":
+  version: 7.29.4
+  resolution: "eslint-plugin-react@npm:7.29.4"
   dependencies:
     array-includes: ^3.1.4
     array.prototype.flatmap: ^1.2.5
     doctrine: ^2.1.0
     estraverse: ^5.3.0
     jsx-ast-utils: ^2.4.1 || ^3.0.0
-    minimatch: ^3.0.4
+    minimatch: ^3.1.2
     object.entries: ^1.1.5
     object.fromentries: ^2.0.5
     object.hasown: ^1.1.0
     object.values: ^1.1.5
-    prop-types: ^15.7.2
+    prop-types: ^15.8.1
     resolve: ^2.0.0-next.3
     semver: ^6.3.0
     string.prototype.matchall: ^4.0.6
   peerDependencies:
     eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-  checksum: 90293d0fd53bb1f735ffd32141cdd211fb1120c9f7bbe5342f9e923261a39e52a2b2575d4e46c9cd77d257f42db4a99b8b339689fc5b5c1c26048929f69b1784
+  checksum: bb7d3715ccd7f3e0d7bfaa2125b26d96865695bcfea4a3d510a5763342a74ab5b99a88e13aad9245f9461ad87e4bce69c33fc946888115d576233f9b6e69700d
   languageName: node
   linkType: hard
 
@@ -13096,13 +13680,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "eslint-scope@npm:6.0.0"
+"eslint-scope@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "eslint-scope@npm:7.1.1"
   dependencies:
     esrecurse: ^4.3.0
     estraverse: ^5.2.0
-  checksum: 3f1b3578f288c3820f68ad2aae102300e546be8a98a958f515405dc20cc2fe64fda583d364977628bb14fe3d4f96f37de5e9bc5d6eb26bc310da33ba2a677dc3
+  checksum: 9f6e974ab2db641ca8ab13508c405b7b859e72afe9f254e8131ff154d2f40c99ad4545ce326fd9fde3212ff29707102562a4834f1c48617b35d98c71a97fbf3e
   languageName: node
   linkType: hard
 
@@ -13124,30 +13708,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^3.0.0, eslint-visitor-keys@npm:^3.1.0, eslint-visitor-keys@npm:^3.3.0":
+"eslint-visitor-keys@npm:^3.0.0, eslint-visitor-keys@npm:^3.3.0":
   version: 3.3.0
   resolution: "eslint-visitor-keys@npm:3.3.0"
   checksum: d59e68a7c5a6d0146526b0eec16ce87fbf97fe46b8281e0d41384224375c4e52f5ffb9e16d48f4ea50785cde93f766b0c898e31ab89978d88b0e1720fbfb7808
   languageName: node
   linkType: hard
 
-"eslint@npm:8.2.0":
-  version: 8.2.0
-  resolution: "eslint@npm:8.2.0"
+"eslint@npm:8.12.0":
+  version: 8.12.0
+  resolution: "eslint@npm:8.12.0"
   dependencies:
-    "@eslint/eslintrc": ^1.0.4
-    "@humanwhocodes/config-array": ^0.6.0
+    "@eslint/eslintrc": ^1.2.1
+    "@humanwhocodes/config-array": ^0.9.2
     ajv: ^6.10.0
     chalk: ^4.0.0
     cross-spawn: ^7.0.2
     debug: ^4.3.2
     doctrine: ^3.0.0
-    enquirer: ^2.3.5
     escape-string-regexp: ^4.0.0
-    eslint-scope: ^6.0.0
+    eslint-scope: ^7.1.1
     eslint-utils: ^3.0.0
-    eslint-visitor-keys: ^3.0.0
-    espree: ^9.0.0
+    eslint-visitor-keys: ^3.3.0
+    espree: ^9.3.1
     esquery: ^1.4.0
     esutils: ^2.0.2
     fast-deep-equal: ^3.1.3
@@ -13155,7 +13738,7 @@ __metadata:
     functional-red-black-tree: ^1.0.1
     glob-parent: ^6.0.1
     globals: ^13.6.0
-    ignore: ^4.0.6
+    ignore: ^5.2.0
     import-fresh: ^3.0.0
     imurmurhash: ^0.1.4
     is-glob: ^4.0.0
@@ -13166,27 +13749,25 @@ __metadata:
     minimatch: ^3.0.4
     natural-compare: ^1.4.0
     optionator: ^0.9.1
-    progress: ^2.0.0
     regexpp: ^3.2.0
-    semver: ^7.2.1
     strip-ansi: ^6.0.1
     strip-json-comments: ^3.1.0
     text-table: ^0.2.0
     v8-compile-cache: ^2.0.3
   bin:
     eslint: bin/eslint.js
-  checksum: 19f2f4e23bdd1d0f1c99759adb88c0bf01908ce5bd480913ca7b5d3183f4c42d93142ada699b196e228295c074254ad90a3475126784673bd1afeb22e91ceea8
+  checksum: 111bf9046b7a463049788dd00d7f4cd91e024029982352dff4811ce5dfa8cb1136aa127cd8a7a91508234d3e1b4fb6f638a1f5ef9ea08b1af93a18703a4a8dc1
   languageName: node
   linkType: hard
 
-"espree@npm:^9.0.0, espree@npm:^9.2.0":
-  version: 9.3.0
-  resolution: "espree@npm:9.3.0"
+"espree@npm:^9.3.1, espree@npm:^9.4.0":
+  version: 9.4.1
+  resolution: "espree@npm:9.4.1"
   dependencies:
-    acorn: ^8.7.0
-    acorn-jsx: ^5.3.1
-    eslint-visitor-keys: ^3.1.0
-  checksum: c0f1885c4eab652f9be08eb9228cea0df046b559b29d4aed8d6590ea9bd60177d4cb245d204a6f737a79a096861bb4ab8e480aeb8c1dbafef5beec1157353ce4
+    acorn: ^8.8.0
+    acorn-jsx: ^5.3.2
+    eslint-visitor-keys: ^3.3.0
+  checksum: 4d266b0cf81c7dfe69e542c7df0f246e78d29f5b04dda36e514eb4c7af117ee6cfbd3280e560571ed82ff6c9c3f0003c05b82583fc7a94006db7497c4fe4270e
   languageName: node
   linkType: hard
 
@@ -13779,15 +14360,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-up@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "find-up@npm:2.1.0"
-  dependencies:
-    locate-path: ^2.0.0
-  checksum: 43284fe4da09f89011f08e3c32cd38401e786b19226ea440b75386c1b12a4cb738c94969808d53a84f564ede22f732c8409e3cfc3f7fb5b5c32378ad0bbf28bd
-  languageName: node
-  linkType: hard
-
 "find-up@npm:^3.0.0":
   version: 3.0.0
   resolution: "find-up@npm:3.0.0"
@@ -14280,7 +14852,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-caller-file@npm:^2.0.1, get-caller-file@npm:^2.0.5":
+"get-caller-file@npm:^2.0.5":
   version: 2.0.5
   resolution: "get-caller-file@npm:2.0.5"
   checksum: b9769a836d2a98c3ee734a88ba712e62703f1df31b94b784762c433c27a386dd6029ff55c2a920c392e33657d80191edbf18c61487e198844844516f843496b9
@@ -14534,12 +15106,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^13.6.0, globals@npm:^13.9.0":
-  version: 13.12.0
-  resolution: "globals@npm:13.12.0"
+"globals@npm:^13.19.0, globals@npm:^13.6.0":
+  version: 13.19.0
+  resolution: "globals@npm:13.19.0"
   dependencies:
     type-fest: ^0.20.2
-  checksum: 1f959abb11117916468a1afcba527eead152900cad652c8383c4e8976daea7ec55e1ee30c086f48d1b8655719f214e9d92eca083c3a43b5543bc4056e7e5fccf
+  checksum: a000dbd00bcf28f0941d8a29c3522b1c3b8e4bfe4e60e262c477a550c3cbbe8dbe2925a6905f037acd40f9a93c039242e1f7079c76b0fd184bc41dcc3b5c8e2e
   languageName: node
   linkType: hard
 
@@ -14664,6 +15236,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.12.13
     "@babel/generator": ^7.12.13
+    "@babel/helper-module-imports": ^7.12.13
     "@babel/helper-plugin-utils": ^7.12.13
     "@babel/preset-typescript": 7.12.13
     "@babel/template": ^7.12.13
@@ -14677,48 +15250,50 @@ __metadata:
     "@emotion/hash": ^0.8.0
     "@linaria/babel-preset": ^3.0.0-beta.23
     "@linaria/shaker": ^3.0.0-beta.22
-    "@nrwl/cli": 13.4.5
-    "@nrwl/eslint-plugin-nx": 13.4.5
-    "@nrwl/jest": 13.4.5
-    "@nrwl/js": 13.4.5
-    "@nrwl/linter": 13.4.5
-    "@nrwl/node": 13.4.5
-    "@nrwl/react": 13.4.5
-    "@nrwl/storybook": 13.4.5
-    "@nrwl/tao": 13.4.5
-    "@nrwl/web": 13.4.5
-    "@nrwl/workspace": 13.4.5
+    "@nrwl/cli": 13.10.6
+    "@nrwl/eslint-plugin-nx": 13.10.6
+    "@nrwl/jest": 13.10.6
+    "@nrwl/js": 13.10.6
+    "@nrwl/linter": 13.10.6
+    "@nrwl/node": 13.10.6
+    "@nrwl/react": 13.10.6
+    "@nrwl/storybook": 13.10.6
+    "@nrwl/web": 13.10.6
+    "@nrwl/workspace": 13.10.6
     "@storybook/addon-essentials": ~6.4.5
     "@storybook/builder-webpack5": ~6.4.5
+    "@storybook/core-server": 6.4.22
     "@storybook/manager-webpack5": ~6.4.5
     "@storybook/react": ~6.4.5
     "@svgr/webpack": ^5.4.0
     "@swc/core": ^1.3.19
     "@testing-library/jest-dom": 5.16.1
-    "@testing-library/react": 12.1.2
+    "@testing-library/react": 13.0.0
     "@testing-library/react-hooks": 7.0.2
     "@tsconfig/docusaurus": ^1.0.4
+    "@types/babel__helper-module-imports": 7.18.0
     "@types/babel__helper-plugin-utils": 7.10.0
     "@types/chrome": 0.0.180
     "@types/d3-scale-chromatic": ^3.0.0
     "@types/jest": 27.0.2
     "@types/js-beautify": ^1.13.3
+    "@types/lz-string": 1.3.34
     "@types/mini-css-extract-plugin": 2.5.1
     "@types/node": 14.14.33
-    "@types/react": 17.0.30
-    "@types/react-dom": 17.0.9
+    "@types/react": 18.0.0
+    "@types/react-dom": 18.0.0
     "@types/stylis": 4.0.2
     "@types/tmp": 0.2.3
     "@types/webpack-env": ^1.17.0
     "@types/yargs": ^17.0.10
-    "@typescript-eslint/eslint-plugin": ~5.3.0
-    "@typescript-eslint/parser": ~5.3.0
+    "@typescript-eslint/eslint-plugin": 5.18.0
+    "@typescript-eslint/parser": 5.18.0
     "@typescript-eslint/utils": ^5.20.0
     ajv: ^8.4.0
     babel-jest: 27.2.3
     babel-loader: 8.1.0
     babel-plugin-annotate-pure-calls: 0.4.0
-    babel-plugin-tester: 10.0.0
+    babel-plugin-tester: 11.0.0
     beachball: 2.31.5
     bestzip: 2.2.0
     browserslist: ^4.19.1
@@ -14729,19 +15304,20 @@ __metadata:
     esbuild: ^0.14.43
     esbuild-plugin-alias: ^0.2.1
     esbuild-plugin-import-glob: ^0.1.1
-    eslint: 8.2.0
+    eslint: 8.12.0
     eslint-config-prettier: 8.1.0
     eslint-import-resolver-typescript: 2.5.0
-    eslint-plugin-import: 2.25.2
+    eslint-plugin-import: 2.26.0
     eslint-plugin-jest: ^27.0.1
     eslint-plugin-jsx-a11y: 6.5.1
-    eslint-plugin-react: 7.27.0
-    eslint-plugin-react-hooks: 4.3.0
+    eslint-plugin-react: 7.29.4
+    eslint-plugin-react-hooks: 4.4.0
     highlight.js: 11.4.0
     jest: 27.2.3
     jest-chrome: ^0.7.2
     js-beautify: ^1.14.0
     log-symbols: 4.1.0
+    lz-string: 1.4.4
     mdx-mermaid: 1.3.2
     mermaid: 9.1.7
     mini-css-extract-plugin: 2.6.0
@@ -14749,21 +15325,22 @@ __metadata:
     monosize-storage-upstash: 0.0.8
     nano-staged: 0.5.0
     next: 12.2.4
-    prettier: 2.3.1
+    nx: 13.10.6
+    prettier: 2.8.2
     prism-react-renderer: 1.2.1
-    react: 17.0.2
-    react-dom: 17.0.2
+    react: 18.0.0
+    react-dom: 18.0.0
+    react-is: 18.0.0
     react-test-renderer: 17.0.2
     rtl-css-js: ^1.16.0
     simple-git-hooks: 2.7.0
     source-map-js: 1.0.2
     stylis: ^4.0.13
-    swc-node: 1.0.0
     syncpack: 6.2.0
     tmp: 0.2.1
     ts-jest: 27.0.5
     tslib: ^2.1.0
-    typescript: ~4.5.2
+    typescript: 4.7.4
     url-loader: ^3.0.0
     yargs: ^17.5.1
   languageName: unknown
@@ -15480,7 +16057,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^4.0.3, ignore@npm:^4.0.6":
+"ignore@npm:^4.0.3":
   version: 4.0.6
   resolution: "ignore@npm:4.0.6"
   checksum: 248f82e50a430906f9ee7f35e1158e3ec4c3971451dd9f99c9bc1548261b4db2b99709f60ac6c6cac9333494384176cc4cc9b07acbe42d52ac6a09cad734d800
@@ -15880,12 +16457,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.2.0, is-core-module@npm:^2.7.0, is-core-module@npm:^2.8.0, is-core-module@npm:^2.9.0":
-  version: 2.9.0
-  resolution: "is-core-module@npm:2.9.0"
+"is-core-module@npm:^2.2.0, is-core-module@npm:^2.8.1, is-core-module@npm:^2.9.0":
+  version: 2.11.0
+  resolution: "is-core-module@npm:2.11.0"
   dependencies:
     has: ^1.0.3
-  checksum: b27034318b4b462f1c8f1dfb1b32baecd651d891a4e2d1922135daeff4141dfced2b82b07aef83ef54275c4a3526aa38da859223664d0868ca24182badb784ce
+  checksum: f96fd490c6b48eb4f6d10ba815c6ef13f410b0ba6f7eb8577af51697de523e5f2cd9de1c441b51d27251bf0e4aebc936545e33a5d26d5d51f28d25698d4a8bab
   languageName: node
   linkType: hard
 
@@ -17223,7 +17800,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:^3.13.1, js-yaml@npm:^3.9.0":
+"js-yaml@npm:^3.13.1":
   version: 3.14.1
   resolution: "js-yaml@npm:3.14.1"
   dependencies:
@@ -17620,13 +18197,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"license-webpack-plugin@npm:2.3.15":
-  version: 2.3.15
-  resolution: "license-webpack-plugin@npm:2.3.15"
+"license-webpack-plugin@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "license-webpack-plugin@npm:4.0.2"
   dependencies:
-    "@types/webpack-sources": ^0.1.5
-    webpack-sources: ^1.2.0
-  checksum: 029b76b04e3778a7ba22def1d782d174eecc9dd7513759f387afd79129c593c8e0f495a6afd793f9d7cc3555159016d0c36128155b4be522075bc65c5e2b0b6f
+    webpack-sources: ^3.0.0
+  peerDependenciesMeta:
+    webpack:
+      optional: true
+    webpack-sources:
+      optional: true
+  checksum: e88ebdb9c8bdfc0926dd7211d7fe2ee8697a44bb00a96bb5e6ca844b6acb7d24dd54eb17ec485e2e0140c3cc86709d1c2bd46e091ab52af076e1e421054c8322
   languageName: node
   linkType: hard
 
@@ -17680,7 +18261,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^1.1.0, loader-utils@npm:^1.2.3, loader-utils@npm:^1.4.0":
+"loader-utils@npm:^1.2.3, loader-utils@npm:^1.4.0":
   version: 1.4.2
   resolution: "loader-utils@npm:1.4.2"
   dependencies:
@@ -17709,16 +18290,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"locate-path@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "locate-path@npm:2.0.0"
-  dependencies:
-    p-locate: ^2.0.0
-    path-exists: ^3.0.0
-  checksum: 02d581edbbbb0fa292e28d96b7de36b5b62c2fa8b5a7e82638ebb33afa74284acf022d3b1e9ae10e3ffb7658fbc49163fcd5e76e7d1baaa7801c3e05a81da755
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^3.0.0":
   version: 3.0.0
   resolution: "locate-path@npm:3.0.0"
@@ -17950,7 +18521,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.4.4":
+"lz-string@npm:1.4.4, lz-string@npm:^1.4.4":
   version: 1.4.4
   resolution: "lz-string@npm:1.4.4"
   bin:
@@ -18684,7 +19255,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1":
+"minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -19392,14 +19963,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nx@npm:13.4.5":
-  version: 13.4.5
-  resolution: "nx@npm:13.4.5"
+"nx@npm:13.10.6":
+  version: 13.10.6
+  resolution: "nx@npm:13.10.6"
   dependencies:
-    "@nrwl/cli": 13.4.5
+    "@nrwl/cli": 13.10.6
+    "@nrwl/tao": 13.10.6
+    "@parcel/watcher": 2.0.4
+    "@swc-node/register": ^1.4.2
+    "@swc/core": ^1.2.152
+    chalk: 4.1.0
+    chokidar: ^3.5.1
+    cli-cursor: 3.1.0
+    cli-spinners: 2.6.1
+    dotenv: ~10.0.0
+    enquirer: ~2.3.6
+    fast-glob: 3.2.7
+    figures: 3.2.0
+    flat: ^5.0.2
+    fs-extra: ^9.1.0
+    glob: 7.1.4
+    ignore: ^5.0.4
+    jsonc-parser: 3.0.0
+    minimatch: 3.0.4
+    npm-run-path: ^4.0.1
+    open: ^8.4.0
+    rxjs: ^6.5.4
+    rxjs-for-await: 0.0.2
+    semver: 7.3.4
+    tar-stream: ~2.2.0
+    tmp: ~0.2.1
+    tsconfig-paths: ^3.9.0
+    tslib: ^2.3.0
+    v8-compile-cache: 2.3.0
+    yargs: ^17.4.0
+    yargs-parser: 21.0.1
   bin:
     nx: bin/nx.js
-  checksum: 4334d3f566fe9361e035407546187ce56c2e8b23295242d14655e4823851a58b88dcf37615dd54c06a3ecf0253e0839f1f80c119e028b30f6f879d8f1286a0c9
+  checksum: 26cbc585c8a3f22324250046f2086b69718de28837ba78460d63dc087c45c3d70b1da69f481d020cdae4cff45f3d036b113046d15a5d4503999cccaa0706ea81
   languageName: node
   linkType: hard
 
@@ -19558,7 +20159,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"onetime@npm:^5.1.2":
+"onetime@npm:^5.1.0, onetime@npm:^5.1.2":
   version: 5.1.2
   resolution: "onetime@npm:5.1.2"
   dependencies:
@@ -19567,7 +20168,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^7.0.3, open@npm:^7.4.2":
+"open@npm:^7.0.3":
   version: 7.4.2
   resolution: "open@npm:7.4.2"
   dependencies:
@@ -19687,15 +20288,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-limit@npm:^1.1.0":
-  version: 1.3.0
-  resolution: "p-limit@npm:1.3.0"
-  dependencies:
-    p-try: ^1.0.0
-  checksum: 281c1c0b8c82e1ac9f81acd72a2e35d402bf572e09721ce5520164e9de07d8274451378a3470707179ad13240535558f4b277f02405ad752e08c7d5b0d54fbfd
-  languageName: node
-  linkType: hard
-
 "p-limit@npm:^2.0.0, p-limit@npm:^2.2.0":
   version: 2.3.0
   resolution: "p-limit@npm:2.3.0"
@@ -19723,15 +20315,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-locate@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "p-locate@npm:2.0.0"
-  dependencies:
-    p-limit: ^1.1.0
-  checksum: e2dceb9b49b96d5513d90f715780f6f4972f46987dc32a0e18bc6c3fc74a1a5d73ec5f81b1398af5e58b99ea1ad03fd41e9181c01fa81b4af2833958696e3081
-  languageName: node
-  linkType: hard
-
 "p-locate@npm:^3.0.0":
   version: 3.0.0
   resolution: "p-locate@npm:3.0.0"
@@ -19831,13 +20414,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-try@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "p-try@npm:1.0.0"
-  checksum: 3b5303f77eb7722144154288bfd96f799f8ff3e2b2b39330efe38db5dd359e4fb27012464cd85cb0a76e9b7edd1b443568cb3192c22e7cffc34989df0bafd605
-  languageName: node
-  linkType: hard
-
 "p-try@npm:^2.0.0":
   version: 2.2.0
   resolution: "p-try@npm:2.2.0"
@@ -20879,18 +21455,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:8.3.0":
-  version: 8.3.0
-  resolution: "postcss@npm:8.3.0"
-  dependencies:
-    colorette: ^1.2.2
-    nanoid: ^3.1.23
-    source-map-js: ^0.6.2
-  checksum: 7786df62a605e6fc9380c1ee1e5ed177fbcdb3f3427ac6096ee0dbd9d80bdb8627d2e528d38d6f0fe850bb5668d4d46923eaf65dfd146e9b51fe770bf140d0ef
-  languageName: node
-  linkType: hard
-
-"postcss@npm:8.4.14, postcss@npm:^8.2.15, postcss@npm:^8.3.11, postcss@npm:^8.3.5, postcss@npm:^8.4.13, postcss@npm:^8.4.14, postcss@npm:^8.4.7":
+"postcss@npm:8.4.14":
   version: 8.4.14
   resolution: "postcss@npm:8.4.14"
   dependencies:
@@ -20911,6 +21476,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.2.13, postcss@npm:^8.2.15, postcss@npm:^8.3.11, postcss@npm:^8.3.5, postcss@npm:^8.4.13, postcss@npm:^8.4.14, postcss@npm:^8.4.7":
+  version: 8.4.21
+  resolution: "postcss@npm:8.4.21"
+  dependencies:
+    nanoid: ^3.3.4
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: e39ac60ccd1542d4f9d93d894048aac0d686b3bb38e927d8386005718e6793dbbb46930f0a523fe382f1bbd843c6d980aaea791252bf5e176180e5a4336d9679
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -20932,12 +21508,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:2.3.1":
-  version: 2.3.1
-  resolution: "prettier@npm:2.3.1"
+"prettier@npm:2.8.2":
+  version: 2.8.2
+  resolution: "prettier@npm:2.8.2"
   bin:
     prettier: bin-prettier.js
-  checksum: 3b37731ff7150feecf19736c77c790e7e276b404ac9af81cbaf87cfecefc48ef9a864f34c2a5caf5955378b8f2525984b8611703a0d9c1f052b4cfa6eb35899f
+  checksum: 740c56c2128d587d656ea1dde9bc9c3503dfc94db4f3ac387259215eeb2e216680bdad9d18a0c9feecc6b42cfa188d6fa777df4c36c1d00cedd4199074fbfbd2
   languageName: node
   linkType: hard
 
@@ -20950,12 +21526,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.0.1, prettier@npm:^2.8.0":
-  version: 2.8.0
-  resolution: "prettier@npm:2.8.0"
+"prettier@npm:^2.8.0, prettier@npm:^2.8.3":
+  version: 2.8.3
+  resolution: "prettier@npm:2.8.3"
   bin:
     prettier: bin-prettier.js
-  checksum: 72004ce0cc9bb097daf3e3833f62495768724392c1d5b178dd47372337616e9e50ecbb0804f236596223f7b5eb1bbe69cefc8957dca21112c5777e77ef73a564
+  checksum: 92f2ceb522d454370e02082aa74ad27388672f7cee8975028b59517c069fe643bdc73e322675c8faf2ff173d7a626d1a6389f26b474000308e793aa25fff46e5
   languageName: node
   linkType: hard
 
@@ -21057,13 +21633,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"progress@npm:^2.0.0":
-  version: 2.0.3
-  resolution: "progress@npm:2.0.3"
-  checksum: f67403fe7b34912148d9252cb7481266a354bd99ce82c835f79070643bb3c6583d10dbcfda4d41e04bbc1d8437e9af0fb1e1f2135727878f5308682a579429b7
-  languageName: node
-  linkType: hard
-
 "promise-inflight@npm:^1.0.1":
   version: 1.0.1
   resolution: "promise-inflight@npm:1.0.1"
@@ -21132,7 +21701,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.0.0, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -21502,16 +22071,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:18.0.0":
+  version: 18.0.0
+  resolution: "react-dom@npm:18.0.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.21.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.0.0
+  checksum: dd0ba9f2f31dd728076c892a95b2f5a8dfe79136431b0289afb46eec39d0ca6b6f0f40a60fd8aa6ef702c98ce7c26100d3d4dbc35c7c9e87429cd04f84cb58bd
   languageName: node
   linkType: hard
 
@@ -21603,6 +22171,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:18.0.0":
+  version: 18.0.0
+  resolution: "react-is@npm:18.0.0"
+  checksum: d38f6afee4d8d791cdd69c715841c01a503c9b06da6158e0893447cea6ba50cd262dca9bde84127720cf44fd05c58185eafc32accace4bb2deb03b3cdbeb6b6b
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -21824,13 +22399,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:18.0.0":
+  version: 18.0.0
+  resolution: "react@npm:18.0.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: 293020b96536b3c7113ee57ca5c990a3f25649d1751b1c7a3aabd16dff0691fe9f1eed1206616d0906d05933536052037340a0c8d0941ff870b0eb469a2f975b
   languageName: node
   linkType: hard
 
@@ -22277,7 +22851,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-from-string@npm:^2.0.1, require-from-string@npm:^2.0.2":
+"require-from-string@npm:^2.0.2":
   version: 2.0.2
   resolution: "require-from-string@npm:2.0.2"
   checksum: a03ef6895445f33a4015300c426699bc66b2b044ba7b670aa238610381b56d3f07c686251740d575e22f4c87531ba662d06937508f0f3c0f1ddc04db3130560b
@@ -22291,13 +22865,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-main-filename@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "require-main-filename@npm:2.0.0"
-  checksum: e9e294695fea08b076457e9ddff854e81bffbe248ed34c1eec348b7abbd22a0d02e8d75506559e2265e96978f3c4720bd77a6dad84755de8162b357eb6c778c7
-  languageName: node
-  linkType: hard
-
 "requires-port@npm:^1.0.0":
   version: 1.0.0
   resolution: "requires-port@npm:1.0.0"
@@ -22366,7 +22933,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.3.2":
+"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0, resolve@npm:^1.3.2":
   version: 1.22.1
   resolution: "resolve@npm:1.22.1"
   dependencies:
@@ -22399,7 +22966,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>":
   version: 1.22.1
   resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=07638b"
   dependencies:
@@ -22431,6 +22998,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"restore-cursor@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "restore-cursor@npm:3.1.0"
+  dependencies:
+    onetime: ^5.1.0
+    signal-exit: ^3.0.2
+  checksum: f877dd8741796b909f2a82454ec111afb84eb45890eb49ac947d87991379406b3b83ff9673a46012fca0d7844bb989f45cc5b788254cf1a39b6b5a9659de0630
+  languageName: node
+  linkType: hard
+
 "ret@npm:~0.1.10":
   version: 0.1.15
   resolution: "ret@npm:0.1.15"
@@ -22796,6 +23373,15 @@ __metadata:
   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"
@@ -22934,7 +23520,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.x, semver@npm:^7.0.0, semver@npm:^7.2.1, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7":
+"semver@npm:7.x, semver@npm:^7.0.0, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7":
   version: 7.3.8
   resolution: "semver@npm:7.3.8"
   dependencies:
@@ -23361,13 +23947,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^0.6.2":
-  version: 0.6.2
-  resolution: "source-map-js@npm:0.6.2"
-  checksum: 9c8151a29e00fd8d3ba87709fdf9a9ce48313d653f4a29a39b4ae53d346ac79e005de624796ff42eff55cbaf26d2e87f4466001ca87831d400d818c5cf146a0e
-  languageName: node
-  linkType: hard
-
 "source-map-js@patch:source-map-js@npm:1.0.2#.yarn/patches/source-map-js-npm-1.0.2-ee4f9f9b30.patch::locator=griffel-repository%40workspace%3A.":
   version: 1.0.2
   resolution: "source-map-js@patch:source-map-js@npm%3A1.0.2#.yarn/patches/source-map-js-npm-1.0.2-ee4f9f9b30.patch::version=1.0.2&hash=7077b7&locator=griffel-repository%40workspace%3A."
@@ -23813,15 +24392,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:6.0.0":
-  version: 6.0.0
-  resolution: "strip-ansi@npm:6.0.0"
-  dependencies:
-    ansi-regex: ^5.0.0
-  checksum: 04c3239ede44c4d195b0e66c0ad58b932f08bec7d05290416d361ff908ad282ecdaf5d9731e322c84f151d427436bde01f05b7422c3ec26dd927586736b0e5d0
-  languageName: node
-  linkType: hard
-
 "strip-ansi@npm:^3.0.0, strip-ansi@npm:^3.0.1":
   version: 3.0.1
   resolution: "strip-ansi@npm:3.0.1"
@@ -24126,17 +24696,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"swc-node@npm:1.0.0":
-  version: 1.0.0
-  resolution: "swc-node@npm:1.0.0"
-  dependencies:
-    "@swc-node/register": ^1.4.0
-  bin:
-    swc-node: bin/swc-node
-  checksum: 08602996e917b0f23bc0f2f7d5095bf65d3e057664a2849aeb88e40dcf465fcec9a3a7566f1bd1d1a81e2c57d90a5ea09fa0fbff14a9d3a286139eed64519257
-  languageName: node
-  linkType: hard
-
 "symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"
@@ -24203,7 +24762,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar-stream@npm:^2.2.0":
+"tar-stream@npm:^2.2.0, tar-stream@npm:~2.2.0":
   version: 2.2.0
   resolution: "tar-stream@npm:2.2.0"
   dependencies:
@@ -24294,15 +24853,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.0.3, terser-webpack-plugin@npm:^5.1.1, terser-webpack-plugin@npm:^5.1.3, terser-webpack-plugin@npm:^5.3.3":
-  version: 5.3.3
-  resolution: "terser-webpack-plugin@npm:5.3.3"
+"terser-webpack-plugin@npm:^5.0.3, terser-webpack-plugin@npm:^5.1.3, terser-webpack-plugin@npm:^5.3.0, terser-webpack-plugin@npm:^5.3.3":
+  version: 5.3.6
+  resolution: "terser-webpack-plugin@npm:5.3.6"
   dependencies:
-    "@jridgewell/trace-mapping": ^0.3.7
+    "@jridgewell/trace-mapping": ^0.3.14
     jest-worker: ^27.4.5
     schema-utils: ^3.1.1
     serialize-javascript: ^6.0.0
-    terser: ^5.7.2
+    terser: ^5.14.1
   peerDependencies:
     webpack: ^5.1.0
   peerDependenciesMeta:
@@ -24312,39 +24871,26 @@ __metadata:
       optional: true
     uglify-js:
       optional: true
-  checksum: 4b8d508d8a0f6e604addb286975f1fa670f8c3964a67abc03a7cfcfd4cdeca4b07dda6655e1c4425427fb62e4d2b0ca59d84f1b2cd83262ff73616d5d3ccdeb5
-  languageName: node
-  linkType: hard
-
-"terser@npm:4.3.8":
-  version: 4.3.8
-  resolution: "terser@npm:4.3.8"
-  dependencies:
-    commander: ^2.20.0
-    source-map: ~0.6.1
-    source-map-support: ~0.5.12
-  bin:
-    terser: bin/terser
-  checksum: 753570e104e983733ba6047d9315035e8d7306a42fa8948733b5c5eaee4825a70247b6da8ab726a7aff268c1d7312dd11d19b117eb8c103338fb3d9b08cf995d
+  checksum: 8f3448d7fdb0434ce6a0c09d95c462bfd2f4a5a430233d854163337f734a7f5c07c74513d16081e06d4ca33d366d5b1a36f5444219bc41a7403afd6162107bad
   languageName: node
   linkType: hard
 
 "terser@npm:^4.1.2, terser@npm:^4.6.3":
-  version: 4.8.0
-  resolution: "terser@npm:4.8.0"
+  version: 4.8.1
+  resolution: "terser@npm:4.8.1"
   dependencies:
     commander: ^2.20.0
     source-map: ~0.6.1
     source-map-support: ~0.5.12
   bin:
     terser: bin/terser
-  checksum: f980789097d4f856c1ef4b9a7ada37beb0bb022fb8aa3057968862b5864ad7c244253b3e269c9eb0ab7d0caf97b9521273f2d1cf1e0e942ff0016e0583859c71
+  checksum: b342819bf7e82283059aaa3f22bb74deb1862d07573ba5a8947882190ad525fd9b44a15074986be083fd379c58b9a879457a330b66dcdb77b485c44267f9a55a
   languageName: node
   linkType: hard
 
-"terser@npm:^5.10.0, terser@npm:^5.16.0, terser@npm:^5.3.4, terser@npm:^5.7.2":
-  version: 5.16.0
-  resolution: "terser@npm:5.16.0"
+"terser@npm:^5.10.0, terser@npm:^5.14.1, terser@npm:^5.16.0, terser@npm:^5.3.4":
+  version: 5.16.1
+  resolution: "terser@npm:5.16.1"
   dependencies:
     "@jridgewell/source-map": ^0.3.2
     acorn: ^8.5.0
@@ -24352,7 +24898,7 @@ __metadata:
     source-map-support: ~0.5.20
   bin:
     terser: bin/terser
-  checksum: d035672bd28bd40ff80d83bea6bc6c85bddf41c18060e49c8b36a3aa45a0a6b4a59c6a56bdf52f9d3350587684d664f8ca26656c6084abeb951b85edf34e47ae
+  checksum: cb524123504a2f0d9140c1e1a8628c83bba9cacc404c6aca79e2493a38dfdf21275617ba75b91006b3f1ff586e401ab31121160cd253699f334c6340ea2756f5
   languageName: node
   linkType: hard
 
@@ -24666,7 +25212,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-node@npm:^9.1.1, ts-node@npm:~9.1.1":
+"ts-node@npm:~9.1.1":
   version: 9.1.1
   resolution: "ts-node@npm:9.1.1"
   dependencies:
@@ -24711,26 +25257,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsconfig-paths-webpack-plugin@npm:3.4.1":
-  version: 3.4.1
-  resolution: "tsconfig-paths-webpack-plugin@npm:3.4.1"
+"tsconfig-paths-webpack-plugin@npm:3.5.2":
+  version: 3.5.2
+  resolution: "tsconfig-paths-webpack-plugin@npm:3.5.2"
   dependencies:
     chalk: ^4.1.0
     enhanced-resolve: ^5.7.0
     tsconfig-paths: ^3.9.0
-  checksum: 958e65c0d80f439fb17ec853ff1c7549b9f9d14e0684062b0d145d82505dbc98fbbb260399f932c76c8e3a82fe6aab6478e5eabc44240b4c1fce5be09cc9a8e7
+  checksum: e7872f45b10684204d4a6cbc7989073d885c99e0c9eb5222de6b2b83d2e1594bccb647f52d2f8e00c53da5b9a3084e47a2de44f41c6f7a607ec2b17330a8d9e9
   languageName: node
   linkType: hard
 
-"tsconfig-paths@npm:^3.11.0, tsconfig-paths@npm:^3.12.0, tsconfig-paths@npm:^3.9.0":
-  version: 3.12.0
-  resolution: "tsconfig-paths@npm:3.12.0"
+"tsconfig-paths@npm:^3.14.1, tsconfig-paths@npm:^3.9.0":
+  version: 3.14.1
+  resolution: "tsconfig-paths@npm:3.14.1"
   dependencies:
     "@types/json5": ^0.0.29
     json5: ^1.0.1
-    minimist: ^1.2.0
+    minimist: ^1.2.6
     strip-bom: ^3.0.0
-  checksum: 4999ec6cd1c7cc06750a460dbc0d39fe3595a4308cb5f1d0d0a8283009cf9c0a30d5a156508c28fe3a47760508af5263ab288fc23d71e9762779674257a95d3b
+  checksum: 8afa01c673ebb4782ba53d3a12df97fa837ce524f8ad38ee4e2b2fd57f5ac79abc21c574e9e9eb014d93efe7fe8214001b96233b5c6ea75bd1ea82afe17a4c6d
   languageName: node
   linkType: hard
 
@@ -24857,6 +25403,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-assert@npm:^1.0.8":
+  version: 1.0.9
+  resolution: "typed-assert@npm:1.0.9"
+  checksum: 79351bd3ea184a552bf55a77bd3012f128741c841ed718d054c5abbbc8925362aa033ae2cdcc79e1f445a15112447c8a95a08ddf7ff8aeb04f805e92187f77c1
+  languageName: node
+  linkType: hard
+
 "typedarray-dts@npm:^1.0.0":
   version: 1.0.0
   resolution: "typedarray-dts@npm:1.0.0"
@@ -24880,23 +25433,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:~4.5.2":
-  version: 4.5.5
-  resolution: "typescript@npm:4.5.5"
+"typescript@npm:4.7.4":
+  version: 4.7.4
+  resolution: "typescript@npm:4.7.4"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 506f4c919dc8aeaafa92068c997f1d213b9df4d9756d0fae1a1e7ab66b585ab3498050e236113a1c9e57ee08c21ec6814ca7a7f61378c058d79af50a4b1f5a5e
+  checksum: 5750181b1cd7e6482c4195825547e70f944114fb47e58e4aa7553e62f11b3f3173766aef9c281783edfd881f7b8299cf35e3ca8caebe73d8464528c907a164df
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@~4.5.2#~builtin<compat/typescript>":
-  version: 4.5.5
-  resolution: "typescript@patch:typescript@npm%3A4.5.5#~builtin<compat/typescript>::version=4.5.5&hash=7ad353"
+"typescript@patch:typescript@4.7.4#~builtin<compat/typescript>":
+  version: 4.7.4
+  resolution: "typescript@patch:typescript@npm%3A4.7.4#~builtin<compat/typescript>::version=4.7.4&hash=7ad353"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 858c61fa63f7274ca4aaaffeced854d550bf416cff6e558c4884041b3311fb662f476f167cf5c9f8680c607239797e26a2ee0bcc6467fbc05bfcb218e1c6c671
+  checksum: 9096d8f6c16cb80ef3bf96fcbbd055bf1c4a43bd14f3b7be45a9fbe7ada46ec977f604d5feed3263b4f2aa7d4c7477ce5f9cd87de0d6feedec69a983f3a4f93e
   languageName: node
   linkType: hard
 
@@ -25831,7 +26384,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-sources@npm:^1.2.0, webpack-sources@npm:^1.3.0, webpack-sources@npm:^1.4.0, webpack-sources@npm:^1.4.1, webpack-sources@npm:^1.4.3":
+"webpack-sources@npm:^1.4.0, webpack-sources@npm:^1.4.1, webpack-sources@npm:^1.4.3":
   version: 1.4.3
   resolution: "webpack-sources@npm:1.4.3"
   dependencies:
@@ -25841,25 +26394,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-sources@npm:^3.0.2, webpack-sources@npm:^3.2.2, webpack-sources@npm:^3.2.3":
+"webpack-sources@npm:^3.0.0, webpack-sources@npm:^3.0.2, webpack-sources@npm:^3.2.2, webpack-sources@npm:^3.2.3":
   version: 3.2.3
   resolution: "webpack-sources@npm:3.2.3"
   checksum: 989e401b9fe3536529e2a99dac8c1bdc50e3a0a2c8669cbafad31271eadd994bc9405f88a3039cd2e29db5e6d9d0926ceb7a1a4e7409ece021fe79c37d9c4607
   languageName: node
   linkType: hard
 
-"webpack-subresource-integrity@npm:^1.5.2":
-  version: 1.5.2
-  resolution: "webpack-subresource-integrity@npm:1.5.2"
+"webpack-subresource-integrity@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "webpack-subresource-integrity@npm:5.1.0"
   dependencies:
-    webpack-sources: ^1.3.0
+    typed-assert: ^1.0.8
   peerDependencies:
-    html-webpack-plugin: ">= 2.21.0 < 5"
-    webpack: ">= 1.12.11 < 6"
+    html-webpack-plugin: ">= 5.0.0-beta.1 < 6"
+    webpack: ^5.12.0
   peerDependenciesMeta:
     html-webpack-plugin:
       optional: true
-  checksum: ddb4dca747349da462c0828a2e4d7d08f58fee365733a2edf682c5cfe13497524fc2a40080522b3f67bdef547aca0acc0a125ae81535103119c8ae297c0b4b17
+  checksum: 827c2c1170f52eaec9d68728d4c3910be5451253ffb24e7dbab35c48acc69c4b4ed6dcea2c29bd62b4cb4569c00eafa4e95d8aa00305656fe9c2a6aeb5415e1e
   languageName: node
   linkType: hard
 
@@ -26052,13 +26605,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-module@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "which-module@npm:2.0.0"
-  checksum: 809f7fd3dfcb2cdbe0180b60d68100c88785084f8f9492b0998c051d7a8efe56784492609d3f09ac161635b78ea29219eb1418a98c15ce87d085bce905705c9c
-  languageName: node
-  linkType: hard
-
 "which@npm:^1.2.9, which@npm:^1.3.1":
   version: 1.3.1
   resolution: "which@npm:1.3.1"
@@ -26138,17 +26684,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"worker-plugin@npm:3.2.0":
-  version: 3.2.0
-  resolution: "worker-plugin@npm:3.2.0"
-  dependencies:
-    loader-utils: ^1.1.0
-  peerDependencies:
-    webpack: ">= 4"
-  checksum: ba5146dca00d99abfa77ffb4b263082b9dfd8b90ae38a98dae6ea4e1b1bba05994570577cb72c3f9a7fd43263377dcbae228dd71955dafb88978246afed7d8a7
-  languageName: node
-  linkType: hard
-
 "worker-rpc@npm:^0.1.0":
   version: 0.1.1
   resolution: "worker-rpc@npm:0.1.1"
@@ -26172,17 +26707,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wrap-ansi@npm:^6.2.0":
-  version: 6.2.0
-  resolution: "wrap-ansi@npm:6.2.0"
-  dependencies:
-    ansi-styles: ^4.0.0
-    string-width: ^4.1.0
-    strip-ansi: ^6.0.0
-  checksum: 6cd96a410161ff617b63581a08376f0cb9162375adeb7956e10c8cd397821f7eb2a6de24eb22a0b28401300bf228c86e50617cd568209b5f6775b93c97d2fe3a
-  languageName: node
-  linkType: hard
-
 "wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"
@@ -26335,13 +26859,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:20.0.0":
-  version: 20.0.0
-  resolution: "yargs-parser@npm:20.0.0"
-  checksum: 8a5e4bd50c09beb8aeed386b5c81b98310ff34f76cf0c120f7490caf9bb0218648c5cd53973fabb8c39f317f4df4e0318b1823f006be562f7202ce819c1bcc52
-  languageName: node
-  linkType: hard
-
 "yargs-parser@npm:20.x, yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.7":
   version: 20.2.9
   resolution: "yargs-parser@npm:20.2.9"
@@ -26349,13 +26866,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:^18.1.2":
-  version: 18.1.3
-  resolution: "yargs-parser@npm:18.1.3"
-  dependencies:
-    camelcase: ^5.0.0
-    decamelize: ^1.2.0
-  checksum: 60e8c7d1b85814594d3719300ecad4e6ae3796748b0926137bfec1f3042581b8646d67e83c6fc80a692ef08b8390f21ddcacb9464476c39bbdf52e34961dd4d9
+"yargs-parser@npm:21.0.1":
+  version: 21.0.1
+  resolution: "yargs-parser@npm:21.0.1"
+  checksum: c3ea2ed12cad0377ce3096b3f138df8267edf7b1aa7d710cd502fe16af417bafe4443dd71b28158c22fcd1be5dfd0e86319597e47badf42ff83815485887323a
   languageName: node
   linkType: hard
 
@@ -26366,25 +26880,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:15.4.1":
-  version: 15.4.1
-  resolution: "yargs@npm:15.4.1"
-  dependencies:
-    cliui: ^6.0.0
-    decamelize: ^1.2.0
-    find-up: ^4.1.0
-    get-caller-file: ^2.0.1
-    require-directory: ^2.1.1
-    require-main-filename: ^2.0.0
-    set-blocking: ^2.0.0
-    string-width: ^4.2.0
-    which-module: ^2.0.0
-    y18n: ^4.0.0
-    yargs-parser: ^18.1.2
-  checksum: 40b974f508d8aed28598087720e086ecd32a5fd3e945e95ea4457da04ee9bdb8bdd17fd91acff36dc5b7f0595a735929c514c40c402416bbb87c03f6fb782373
-  languageName: node
-  linkType: hard
-
 "yargs@npm:^16.2.0":
   version: 16.2.0
   resolution: "yargs@npm:16.2.0"
@@ -26400,7 +26895,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^17.5.1, yargs@npm:^17.6.2":
+"yargs@npm:^17.4.0, yargs@npm:^17.5.1, yargs@npm:^17.6.2":
   version: 17.6.2
   resolution: "yargs@npm:17.6.2"
   dependencies:


Test patch:
diff --git a/e2e/nextjs/project.json b/e2e/nextjs/project.json
index 192213a..b0b5ed8 100644
--- a/e2e/nextjs/project.json
+++ b/e2e/nextjs/project.json
@@ -9,7 +9,7 @@
       "dependsOn": [{ "target": "build", "projects": "dependencies" }],
       "options": {
         "cwd": "e2e/nextjs",
-        "commands": [{ "command": "swc-node src/test.ts" }],
+        "commands": [{ "command": "node -r @swc-node/register src/test.ts" }],
         "outputPath": []
       }
     },
diff --git a/e2e/typescript/project.json b/e2e/typescript/project.json
index 715877d..2fa748e 100644
--- a/e2e/typescript/project.json
+++ b/e2e/typescript/project.json
@@ -8,7 +8,7 @@
       "dependsOn": [{ "target": "build", "projects": "dependencies" }],
       "options": {
         "cwd": "e2e/typescript",
-        "commands": [{ "command": "swc-node src/test.ts" }],
+        "commands": [{ "command": "node -r @swc-node/register src/test.ts" }],
         "outputPath": []
       }
     },
diff --git a/e2e/typescript/src/test.ts b/e2e/typescript/src/test.ts
index e0bddcd..a6cbb02 100644
--- a/e2e/typescript/src/test.ts
+++ b/e2e/typescript/src/test.ts
@@ -34,7 +34,7 @@ async function performTest(tsVersion: string) {
     console.log(
       logSymbols.info,
       'Using TypeScript',
-      (await sh(`${tscBin} --version`, tempDir, true)).replace('Version', '').trim(),
+      (await sh(`node ${tscBin} --version`, tempDir, true)).replace('Version', '').trim(),
     );
   } catch (e) {
     console.error(logSymbols.error, 'Something went wrong setting up the test:');
@@ -43,7 +43,7 @@ async function performTest(tsVersion: string) {
   }
 
   try {
-    await sh(`${tscBin} --noEmit --pretty`, tempDir);
+    await sh(`node ${tscBin} --noEmit --pretty`, tempDir);
 
     console.log(logSymbols.success, `Example project was successfully built with typescript@${tsVersion}`);
     console.log('');
diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/transformPlugin.test.ts
index 64c0c2b..c99708b 100644
--- a/packages/babel-preset/src/transformPlugin.test.ts
+++ b/packages/babel-preset/src/transformPlugin.test.ts
@@ -22,7 +22,7 @@ pluginTester({
   },
   formatResult: code =>
     prettierFormatter(code, {
-      config: {
+      prettierOptions: {
         ...prettierConfig,
         parser: 'typescript',
       },
diff --git a/packages/core/src/devtools/getDebugTree.test.ts b/packages/core/src/devtools/getDebugTree.test.ts
index 425527b..552b319 100644
--- a/packages/core/src/devtools/getDebugTree.test.ts
+++ b/packages/core/src/devtools/getDebugTree.test.ts
@@ -17,7 +17,7 @@ const options: MakeStylesOptions = {
 const findSequenceHash = (classNames: string) =>
   classNames.split(' ').find(className => className.startsWith(SEQUENCE_PREFIX));
 
-const sourceURLregex = /.*\/.*:[0-9]+:[0-9]+/; // url with line and column number
+const sourceURLregex = /.*[/\\].*:[0-9]+:[0-9]+/; // url with line and column number
 
 describe('getDebugTree', () => {
   it.each<'ltr' | 'rtl'>(['ltr', 'rtl'])('returns styles merge tree when dir=%p', dir => {
diff --git a/packages/core/src/devtools/store.test.ts b/packages/core/src/devtools/store.test.ts
index babfafe..6eb7a9a 100644
--- a/packages/core/src/devtools/store.test.ts
+++ b/packages/core/src/devtools/store.test.ts
@@ -60,7 +60,7 @@ describe('debugData', () => {
     const sequenceBlock = findSequenceHash(classes.block);
     const sequenceGrid = findSequenceHash(classes.grid);
 
-    const sourceURLregex = /.*\/.*:[0-9]+:[0-9]+/; // url with line and column number
+    const sourceURLregex = /.*[/\\].*:[0-9]+:[0-9]+/; // url with line and column number
     expect(debugData.getSequenceDetails(sequenceBlock!)).toEqual({
       slotName: 'block',
       sourceURL: expect.stringMatching(sourceURLregex),
diff --git a/packages/core/src/runtime/warnAboutUnresolvedRule.test.ts b/packages/core/src/runtime/warnAboutUnresolvedRule.test.ts
new file mode 100644
index 0000000..86926e4
--- /dev/null
+++ b/packages/core/src/runtime/warnAboutUnresolvedRule.test.ts
@@ -0,0 +1,29 @@
+import { warnAboutUnresolvedRule } from './warnAboutUnresolvedRule';
+
+describe('warnAboutUnresolvedRule', () => {
+  it('warns on a missing "&"', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation();
+
+    warnAboutUnresolvedRule('div', {
+      color: 'red',
+      ':hover': { color: 'blue' },
+    });
+
+    expect(spy.mock.calls[0][0]).toMatchInlineSnapshot(`
+      "@griffel/react: A rule was not resolved to CSS properly. Please check your \`makeStyles\` or \`makeResetStyles\` calls for following:
+        makeStyles({
+          [slot]: {
+            \\"div\\": {
+              \\"color\\": \\"red\\",
+              \\":hover\\": {
+                \\"color\\": \\"blue\\"
+              }
+            }
+          }
+        })
+
+      It looks that you're are using a nested selector, but it is missing an ampersand placeholder where the generated class name should be injected.
+      Try to update a property to include it i.e \\"div\\" => \\"&div\\"."
+    `);
+  });
+});
diff --git a/packages/jest-serializer/src/index.test.tsx b/packages/jest-serializer/src/index.test.tsx
index 38ad22a..f8b2b7c 100644
--- a/packages/jest-serializer/src/index.test.tsx
+++ b/packages/jest-serializer/src/index.test.tsx
@@ -49,7 +49,9 @@ const TestResetComponent: React.FC<{ id?: string }> = ({ id }) => {
   return <div data-testid={id} className={className} />;
 };
 
-const RtlWrapper: React.FC = ({ children }) => <TextDirectionProvider dir="rtl">{children}</TextDirectionProvider>;
+const RtlWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <TextDirectionProvider dir="rtl">{children}</TextDirectionProvider>
+);
 
 describe('serializer', () => {
   it('should check styles', () => {
diff --git a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts
index 7c70cdc..aba0028 100644
--- a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts
+++ b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts
@@ -96,7 +96,7 @@ async function compileSourceWithWebpack(
         return;
       }
 
-      const filesList = virtualFsVolume.readdirSync(__dirname) as string[];
+      const filesList = (virtualFsVolume.readdirSync(__dirname) as string[]).sort();
       const cssOutput = filesList
         .filter(filename => filename.includes('.css'))
         .map(filename => {
diff --git a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts
index 9bee050..7857a30 100644
--- a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts
+++ b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts
@@ -17,14 +17,45 @@ pluginTester({
   },
   formatResult: code =>
     prettierFormatter(code, {
-      config: {
+      prettierOptions: {
         ...prettierConfig,
         parser: 'typescript',
       },
     }),
 
-  fixtures: fixturesDir,
-  tests: [],
+  tests: [
+    // 🎩 Tip: use "only: true" to run a single test
+    // https://github.com/babel-utils/babel-plugin-tester#only
+    //
+
+    {
+      title: 'basic (makeStyles)',
+      fixture: path.resolve(fixturesDir, 'basic', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'basic', 'output.ts'),
+    },
+    {
+      title: 'basic (makeResetStyles)',
+      fixture: path.resolve(fixturesDir, 'reset', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'reset', 'output.ts'),
+    },
+
+    {
+      title: 'multiple declarations (makeStyles)',
+      fixture: path.resolve(fixturesDir, 'multiple', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'multiple', 'output.ts'),
+    },
+    {
+      title: 'mixed (makeStyles + makeResetStyles)',
+      fixture: path.resolve(fixturesDir, 'mixed', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'mixed', 'output.ts'),
+    },
+
+    {
+      title: 'alias imports (makeStyles)',
+      fixture: path.resolve(fixturesDir, 'alias', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'alias', 'output.ts'),
+    },
+  ],
 
   plugin: babelPluginStripGriffelRuntime,
   pluginName: '@griffel/webpack-extraction-plugin/babel',