update pw version and config

2d545554 · tom · 60d2851e · 2d545554 · 2d545554 · 2d545554
Commit 2d545554 authored Nov 17, 2022 by tom
25 changed files
--- a/.github/workflows/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
@@ -18,13 +18,13 @@ jobs:
    - name: Install dependencies
      run: yarn install --frozen-lockfile
    - name: Run tests
-      run: yarn test:unit
+      run: yarn test:jest

  pw_tests:
    name: Run components visual tests with PlayWright
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.27.0-focal
+      image: mcr.microsoft.com/playwright:v1.28.0-focal

    steps:
      - run: apt-get update && apt-get install git-lfs
@@ -38,7 +38,7 @@ jobs:
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Run your tests
-        run: HOME=/root yarn test-ct
+        run: HOME=/root yarn test:pw
      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v2

--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -84,7 +84,7 @@
        },
        {
            "type": "npm",
-            "script": "test-docker",
+            "script": "test:pw:docker",
            "problemMatcher": [],
            "label": "test: playwright",
            "detail": "run visual components tests",
@@ -102,10 +102,10 @@
        },
        {
            "type": "npm",
-            "script": "test:unit",
+            "script": "test:jest",
            "problemMatcher": [],
-            "label": "test: unit",
-            "detail": "run unit tests",
+            "label": "test: jest",
+            "detail": "run jest tests",
            "presentation": {
                "reveal": "always",
                "panel": "new",
@@ -120,10 +120,10 @@
        },
        {
            "type": "npm",
-            "script": "test:unit:watch",
+            "script": "test:jest:watch",
            "problemMatcher": [],
-            "label": "test: unit: watch",
-            "detail": "run unit tests in watch mode",
+            "label": "test: jest: watch",
+            "detail": "run jest tests in watch mode",
            "presentation": {
                "reveal": "always",
                "panel": "new",

--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ For local development please follow next steps:
 ## Components visual testing

 We use [playwright experimental components testing](https://playwright.dev/docs/test-components) for visual (screenshots) CI check. Test renders a single component in headless browser in docker, generates screenshots and then compares this screenshot with a reference one.
-To perform testing locally you need to install docker and run `yarn test-docker`
+To perform testing locally you need to install docker and run `yarn test:pw:docker`

 ## Environment variables


--- a/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-dark-1-chromium-linux.png
+++ b/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-dark-1-chromium-linux.png
--- a/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-dark-1-firefox-linux.png
+++ b/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-dark-1-firefox-linux.png
--- a/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-dark-1-webkit-linux.png
+++ b/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-dark-1-webkit-linux.png
--- a/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-light-1-chromium-linux.png
+++ b/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-light-1-chromium-linux.png
--- a/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-light-1-firefox-linux.png
+++ b/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-light-1-firefox-linux.png
--- a/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-light-1-webkit-linux.png
+++ b/__snapshots__/ui/shared/Utilization.pw.tsx-snapshots/Utilization-light-1-webkit-linux.png
--- a/package.json
+++ b/package.json
@@ -20,10 +20,10 @@
    "lint:tsc": "./node_modules/.bin/tsc -p ./tsconfig.json",
    "prepare": "husky install",
    "format-svg": "./node_modules/.bin/svgo -r ./icons",
-    "test-ct": "playwright test -c playwright-ct.config.ts",
-    "test-docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.27.0-focal ./run-tests.sh",
-    "test:unit": "jest",
-    "test:unit:watch": "jest --watch"
+    "test:pw": "playwright test -c playwright-ct.config.ts",
+    "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.28.0-focal ./playwright/run-tests.sh",
+    "test:jest": "jest",
+    "test:jest:watch": "jest --watch"
  },
  "dependencies": {
    "@chakra-ui/react": "2.3.1",
@@ -57,10 +57,10 @@
    "use-font-face-observer": "^1.2.1"
  },
  "devDependencies": {
-    "@playwright/experimental-ct-react": "^1.26.1",
+    "@playwright/experimental-ct-react": "^1.28.0",
    "@svgr/webpack": "^6.5.1",
-    "@types/d3": "^7.4.0",
    "@testing-library/react": "^13.4.0",
+    "@types/d3": "^7.4.0",
    "@types/jest": "^29.2.0",
    "@types/node": "17.0.36",
    "@types/phoenix": "^1.5.4",
@@ -78,11 +78,12 @@
    "jest-environment-jsdom": "^29.2.1",
    "lint-staged": ">=10",
    "mockdate": "^3.0.5",
-    "playwright": "^1.26.1",
+    "playwright": "^1.28.0",
    "svgo": "^2.8.0",
    "ts-jest": "^29.0.3",
    "ts-node": "^10.9.1",
-    "typescript": "4.7.2"
+    "typescript": "4.7.2",
+    "vite-tsconfig-paths": "^3.5.2"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --cache --fix"

--- a/playwright-ct.config.ts
+++ b/playwright-ct.config.ts
 import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
 import { devices } from '@playwright/experimental-ct-react';
+import tsconfigPaths from 'vite-tsconfig-paths';

 /**
 * See https://playwright.dev/docs/test-configuration.
@@ -9,8 +10,7 @@ const config: PlaywrightTestConfig = {

  testMatch: /.*\.pw\.tsx/,

-  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
-  snapshotDir: './__snapshots__',
+  snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshots__/{testFileName}_{arg}{ext}',

  /* Maximum time one test can run for. */
  timeout: 10 * 1000,
@@ -40,27 +40,17 @@ const config: PlaywrightTestConfig = {
    ctPort: 3100,

    headless: true,
+
+    ctViteConfig: {
+      plugins: [ tsconfigPaths() ],
+    },
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-    },
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-      },
-    },
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari'],
-      },
+      use: devices['Desktop Chrome'],
    },
  ],
 };

--- a/playwright/RenderWithChakra.tsx
+++ b/playwright/RenderWithChakra.tsx
@@ -2,7 +2,7 @@ import { ChakraProvider } from '@chakra-ui/react';
 import type { ColorMode } from '@chakra-ui/react';
 import React from 'react';

-import theme from '../theme';
+import theme from 'theme';

 type Props = {
  children: React.ReactNode;

--- a/run-tests.sh
+++ b/run-tests.sh
 #!/bin/sh
 yarn install
-yarn test-ct
\ No newline at end of file
+yarn test:pw
\ No newline at end of file
--- a/ui/block/BlockDetails.tsx
+++ b/ui/block/BlockDetails.tsx
@@ -30,7 +30,7 @@ import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import PrevNext from 'ui/shared/PrevNext';
 import TextSeparator from 'ui/shared/TextSeparator';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';

 const BlockDetails = () => {
  const [ isExpanded, setIsExpanded ] = React.useState(false);

--- a/ui/blocks/BlocksListItem.tsx
+++ b/ui/blocks/BlocksListItem.tsx
@@ -14,7 +14,7 @@ import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';

 interface Props {
  data: Block;

--- a/ui/blocks/BlocksTableItem.tsx
+++ b/ui/blocks/BlocksTableItem.tsx
@@ -11,7 +11,7 @@ import link from 'lib/link/link';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';

 interface Props {
  data: Block;

--- a/ui/shared/Utilization.pw.tsx
+++ b/ui/shared/Utilization.pw.tsx
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';

-import RenderWithChakra from '../../playwright/RenderWithChakra';
+import RenderWithChakra from 'playwright/RenderWithChakra';
+
 import Utilization from './Utilization';

 test.use({ viewport: { width: 100, height: 50 } });

-test('Utilization light', async({ mount }) => {
+test('green color scheme in light mode', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra>
+      <Utilization value={ 0.423 }/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('green color scheme in dark mode', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra colorMode="dark">
+      <Utilization value={ 0.423 }/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('gray color scheme in light mode', async({ mount }) => {
  const component = await mount(
    <RenderWithChakra>
-      <Utilization value={ 0.1 }/>
+      <Utilization value={ 0.423 } colorScheme="gray"/>
    </RenderWithChakra>,
  );
  await expect(component).toHaveScreenshot();
 });

-test('Utilization dark', async({ mount }) => {
+test('gray color scheme in dark mode', async({ mount }) => {
  const component = await mount(
    <RenderWithChakra colorMode="dark">
-      <Utilization value={ 0.1 }/>
+      <Utilization value={ 0.423 } colorScheme="gray"/>
    </RenderWithChakra>,
  );
  await expect(component).toHaveScreenshot();

--- a/ui/shared/Utilization.tsx
+++ b/ui/shared/Utilization.tsx
--- a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_gray-color-scheme-in-dark-mode-1.png
+++ b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_gray-color-scheme-in-dark-mode-1.png
--- a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_gray-color-scheme-in-light-mode-1.png
+++ b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_gray-color-scheme-in-light-mode-1.png
--- a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_green-color-scheme-in-dark-mode-1.png
+++ b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_green-color-scheme-in-dark-mode-1.png
--- a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_green-color-scheme-in-light-mode-1.png
+++ b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_green-color-scheme-in-light-mode-1.png
--- a/ui/tx/TxDetails.tsx
+++ b/ui/tx/TxDetails.tsx
@@ -23,7 +23,7 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import RawInputData from 'ui/shared/RawInputData';
 import TextSeparator from 'ui/shared/TextSeparator';
 import TxStatus from 'ui/shared/TxStatus';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';
 import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
 import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
 import TxRevertReason from 'ui/tx/details/TxRevertReason';

--- a/ui/txs/TxAdditionalInfo.tsx
+++ b/ui/txs/TxAdditionalInfo.tsx
@@ -9,7 +9,7 @@ import getValueWithUnit from 'lib/getValueWithUnit';
 import link from 'lib/link/link';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import TextSeparator from 'ui/shared/TextSeparator';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';

 const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
  const sectionBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');

--- a/yarn.lock
+++ b/yarn.lock
@@ -22,11 +22,6 @@
  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.1.tgz#f2e6ef7790d8c8dbf03d379502dcc246dcce0b30"
  integrity sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==

-"@babel/compat-data@^7.19.3":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.4.tgz#95c86de137bf0317f3a570e1b6e996b427299747"
-  integrity sha512-CHIGpJcUQ5lU9KrPHTjBMhVwQG6CQjxfg36fGXl3qk/Gik1WwWachaXFuo0uCWJT/mStOKtcbFJCaVLihC1CMw==
-
 "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.19.6":
  version "7.20.2"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.2.tgz#8dc9b1620a673f92d3624bd926dc49a52cf25b92"
@@ -48,28 +43,7 @@
    json5 "^2.2.1"
    semver "^6.3.0"

-"@babel/core@^7.18.13":
-  version "7.19.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.3.tgz#2519f62a51458f43b682d61583c3810e7dcee64c"
-  integrity sha512-WneDJxdsjEvyKtXKsaBGbDeiyOjR5vYq4HcShxnIbG0qixpoHjI3MqeZM9NDvsojNCEBItQE4juOo/bU6e72gQ==
-  dependencies:
-    "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.19.3"
-    "@babel/helper-compilation-targets" "^7.19.3"
-    "@babel/helper-module-transforms" "^7.19.0"
-    "@babel/helpers" "^7.19.0"
-    "@babel/parser" "^7.19.3"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.3"
-    "@babel/types" "^7.19.3"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.2.1"
-    semver "^6.3.0"
-
-"@babel/generator@^7.19.3", "@babel/generator@^7.19.4":
+"@babel/generator@^7.19.4":
  version "7.19.5"
  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.5.tgz#da3f4b301c8086717eee9cab14da91b1fa5dcca7"
  integrity sha512-DxbNz9Lz4aMZ99qPpO1raTbcrI1ZeYh+9NR9qhfkQIbFtVEqotHojEBxHzmxhVONkGt6VyrqVQcgpefMy9pqcg==
@@ -112,16 +86,6 @@
    browserslist "^4.21.3"
    semver "^6.3.0"

-"@babel/helper-compilation-targets@^7.19.3":
-  version "7.19.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.3.tgz#a10a04588125675d7c7ae299af86fa1b2ee038ca"
-  integrity sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==
-  dependencies:
-    "@babel/compat-data" "^7.19.3"
-    "@babel/helper-validator-option" "^7.18.6"
-    browserslist "^4.21.3"
-    semver "^6.3.0"
-
 "@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.20.2":
  version "7.20.2"
  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.2.tgz#3c08a5b5417c7f07b5cf3dfb6dc79cbec682e8c2"
@@ -210,20 +174,6 @@
    "@babel/traverse" "^7.20.1"
    "@babel/types" "^7.20.2"

-"@babel/helper-module-transforms@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz#309b230f04e22c58c6a2c0c0c7e50b216d350c30"
-  integrity sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.18.6"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.0"
-    "@babel/types" "^7.19.0"
-
 "@babel/helper-optimise-call-expression@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
@@ -262,13 +212,6 @@
    "@babel/traverse" "^7.19.1"
    "@babel/types" "^7.19.0"

-"@babel/helper-simple-access@^7.18.6":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz#be553f4951ac6352df2567f7daa19a0ee15668e7"
-  integrity sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==
-  dependencies:
-    "@babel/types" "^7.19.4"
-
 "@babel/helper-simple-access@^7.19.4", "@babel/helper-simple-access@^7.20.2":
  version "7.20.2"
  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
@@ -315,15 +258,6 @@
    "@babel/traverse" "^7.19.0"
    "@babel/types" "^7.19.0"

-"@babel/helpers@^7.19.0":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.19.4.tgz#42154945f87b8148df7203a25c31ba9a73be46c5"
-  integrity sha512-G+z3aOx2nfDHwX/kyVii5fJq+bgscg89/dJNWpYeKeBv3v9xX8EIabmx1k6u9LS04H7nROFVRVK+e3k0VHp+sw==
-  dependencies:
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.4"
-    "@babel/types" "^7.19.4"
-
 "@babel/helpers@^7.20.1":
  version "7.20.1"
  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.1.tgz#2ab7a0fcb0a03b5bf76629196ed63c2d7311f4c9"
@@ -347,7 +281,7 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2"
  integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==

-"@babel/parser@^7.18.10", "@babel/parser@^7.19.3", "@babel/parser@^7.19.4":
+"@babel/parser@^7.18.10", "@babel/parser@^7.19.4":
  version "7.19.4"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.4.tgz#03c4339d2b8971eb3beca5252bafd9b9f79db3dc"
  integrity sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==
@@ -842,14 +776,14 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.18.6"

-"@babel/plugin-transform-react-jsx-source@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.18.6.tgz#06e9ae8a14d2bc19ce6e3c447d842032a50598fc"
-  integrity sha512-utZmlASneDfdaMh0m/WausbjUjEdGrQJz0vFK93d7wD3xf5wBtX219+q6IlCNZeguIcxS2f/CvLZrlLSvSHQXw==
+"@babel/plugin-transform-react-jsx-source@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz#88578ae8331e5887e8ce28e4c9dc83fb29da0b86"
+  integrity sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==
  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.19.0"

-"@babel/plugin-transform-react-jsx@^7.18.10", "@babel/plugin-transform-react-jsx@^7.18.6":
+"@babel/plugin-transform-react-jsx@^7.18.6", "@babel/plugin-transform-react-jsx@^7.19.0":
  version "7.19.0"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz#b3cbb7c3a00b92ec8ae1027910e331ba5c500eb9"
  integrity sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==
@@ -1087,7 +1021,7 @@
    "@babel/parser" "^7.18.10"
    "@babel/types" "^7.18.10"

-"@babel/traverse@^7.19.0", "@babel/traverse@^7.19.3", "@babel/traverse@^7.19.4":
+"@babel/traverse@^7.19.0":
  version "7.19.4"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.4.tgz#f117820e18b1e59448a6c1fa9d0ff08f7ac459a8"
  integrity sha512-w3K1i+V5u2aJUOXBFFC5pveFLmtq1s3qcdDNC2qRI6WPBQIDaKFqXxDEqDO/h1dQ3HjsZoZMyIy6jGLq0xtw+g==
@@ -1128,7 +1062,7 @@
    "@babel/helper-validator-identifier" "^7.19.1"
    to-fast-properties "^2.0.0"

-"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.19.3", "@babel/types@^7.19.4":
+"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.19.4":
  version "7.19.4"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.4.tgz#0dd5c91c573a202d600490a35b33246fed8a41c7"
  integrity sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==
@@ -1883,6 +1817,11 @@
  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32"
  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==

+"@cush/relative@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@cush/relative/-/relative-1.0.0.tgz#8cd1769bf9bde3bb27dac356b1bc94af40f6cc16"
+  integrity sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==
+
 "@emotion/babel-plugin@^11.10.0":
  version "11.10.2"
  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7"
@@ -2799,22 +2738,22 @@
    "@nodelib/fs.scandir" "2.1.5"
    fastq "^1.6.0"

-"@playwright/experimental-ct-react@^1.26.1":
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-react/-/experimental-ct-react-1.27.0.tgz#9e569167b695cb80d4f348325cce105b8df0d4de"
-  integrity sha512-m89OyNdnmUIFjJePuZJNJOucu17Yk6YfLepIutCttRuZSGDD1rF4GxNe0VTk83qD4k+maNHlQgD8CVaHkQHtpA==
+"@playwright/experimental-ct-react@^1.28.0":
+  version "1.28.0"
+  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-react/-/experimental-ct-react-1.28.0.tgz#ed1c7fcea8978fde7ab4109aab1e06e7a12b661d"
+  integrity sha512-qjEI0pFNoAUeiP1UpbOSPD75DmftfxDL3WehvmtsXZyg+/qfft08YkVZ5BiohynvimyUHTzhsqoewr8NAWO4tg==
  dependencies:
-    "@playwright/test" "1.27.0"
-    "@vitejs/plugin-react" "^2.0.1"
-    vite "^3.0.9"
+    "@playwright/test" "1.28.0"
+    "@vitejs/plugin-react" "^2.2.0"
+    vite "^3.2.1"

-"@playwright/test@1.27.0":
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.27.0.tgz#a5327a4823837a718ae6fad9b1e5ff520927e834"
-  integrity sha512-L4BswoJvGkFsEHhEgzVNHBnkFB1FbnBQn3QmvTl7+AouoJQ4a8tLwZKvytdovCsNi7B5cXuRo58yGvfM5PnExw==
+"@playwright/test@1.28.0":
+  version "1.28.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.28.0.tgz#8de83f9d2291bba3f37883e33431b325661720d9"
+  integrity sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==
  dependencies:
    "@types/node" "*"
-    playwright-core "1.27.0"
+    playwright-core "1.28.0"

 "@popperjs/core@^2.9.3":
  version "2.11.6"
@@ -3665,17 +3604,17 @@
    "@typescript-eslint/types" "5.40.0"
    eslint-visitor-keys "^3.3.0"

-"@vitejs/plugin-react@^2.0.1":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-2.1.0.tgz#4c99df15e71d2630601bd3018093bdc787d40e55"
-  integrity sha512-am6rPyyU3LzUYne3Gd9oj9c4Rzbq5hQnuGXSMT6Gujq45Il/+bunwq3lrB7wghLkiF45ygMwft37vgJ/NE8IAA==
+"@vitejs/plugin-react@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-2.2.0.tgz#1b9f63b8b6bc3f56258d20cd19b33f5cc761ce6e"
+  integrity sha512-FFpefhvExd1toVRlokZgxgy2JtnBOdp4ZDsq7ldCWaqGSGn9UhWMAVm/1lxPL14JfNS5yGz+s9yFrQY6shoStA==
  dependencies:
-    "@babel/core" "^7.18.13"
-    "@babel/plugin-transform-react-jsx" "^7.18.10"
+    "@babel/core" "^7.19.6"
+    "@babel/plugin-transform-react-jsx" "^7.19.0"
    "@babel/plugin-transform-react-jsx-development" "^7.18.6"
    "@babel/plugin-transform-react-jsx-self" "^7.18.6"
-    "@babel/plugin-transform-react-jsx-source" "^7.18.6"
-    magic-string "^0.26.2"
+    "@babel/plugin-transform-react-jsx-source" "^7.19.6"
+    magic-string "^0.26.7"
    react-refresh "^0.14.0"

 "@zag-js/element-size@0.1.0":
@@ -5819,6 +5758,11 @@ glob-parent@^6.0.1:
  dependencies:
    is-glob "^4.0.3"

+glob-regex@^0.3.0:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/glob-regex/-/glob-regex-0.3.2.tgz#27348f2f60648ec32a4a53137090b9fb934f3425"
+  integrity sha512-m5blUd3/OqDTWwzBBtWBPrGlAzatRywHameHeekAZyZrskYouOGdNB8T/q6JucucvJXtOuyHIn0/Yia7iDasDw==
+
 glob@7.1.6:
  version "7.1.6"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -5890,6 +5834,11 @@ globby@^11.1.0:
    merge2 "^1.4.1"
    slash "^3.0.0"

+globrex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
+  integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
+
 gopd@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -7014,7 +6963,7 @@ lz-string@^1.4.4:
  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
  integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==

-magic-string@^0.26.2:
+magic-string@^0.26.7:
  version "0.26.7"
  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.7.tgz#caf7daf61b34e9982f8228c4527474dac8981d6f"
  integrity sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==
@@ -7566,17 +7515,17 @@ pkg-dir@^4.2.0:
  dependencies:
    find-up "^4.0.0"

-playwright-core@1.27.0:
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.27.0.tgz#e5f9d2bc19ebdd9581a01e74f019bb91aa7cf55d"
-  integrity sha512-VBKaaFUVKDo3akW+o4DwbK1ZyXh46tcSwQKPK3lruh8IJd5feu55XVZx4vOkbb2uqrNdIF51sgsadYT533SdpA==
+playwright-core@1.28.0:
+  version "1.28.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.28.0.tgz#61df5c714f45139cca07095eccb4891e520e06f2"
+  integrity sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==

-playwright@^1.26.1:
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.27.0.tgz#68a0e29f1756da105b22291a7c3f402ae749213a"
-  integrity sha512-F+0+0RD03LS+KdNAMMp63OBzu+NwYYLd52pKLczuSlTsV5b/SLkUoNhSfzDFngEFOuRL2gk0LlfGW3mKiUBk6w==
+playwright@^1.28.0:
+  version "1.28.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.28.0.tgz#eaec2e607858bd4c0bd7434ac01042720e6a39e3"
+  integrity sha512-kyOXGc5y1mgi+hgEcCIyE1P1+JumLrxS09nFHo5sdJNzrucxPRAGwM4A2X3u3SDOfdgJqx61yIoR6Av+5plJPg==
  dependencies:
-    playwright-core "1.27.0"
+    playwright-core "1.28.0"

 popmotion@11.0.3:
  version "11.0.3"
@@ -7597,10 +7546,10 @@ postcss@8.4.14:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

-postcss@^8.4.16:
-  version "8.4.17"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.17.tgz#f87863ec7cd353f81f7ab2dec5d67d861bbb1be5"
-  integrity sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==
+postcss@^8.4.18:
+  version "8.4.19"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
+  integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
  dependencies:
    nanoid "^3.3.4"
    picocolors "^1.0.0"
@@ -7871,6 +7820,17 @@ real-require@^0.2.0:
  resolved "https://registry.yarnpkg.com/real-require/-/real-require-0.2.0.tgz#209632dea1810be2ae063a6ac084fee7e33fba78"
  integrity sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==

+recrawl-sync@^2.0.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/recrawl-sync/-/recrawl-sync-2.2.3.tgz#757adcdaae4799466dde5b8ee52122ff9636dfb1"
+  integrity sha512-vSaTR9t+cpxlskkdUFrsEpnf67kSmPk66yAGT1fZPrDudxQjoMzPgQhSMImQ0pAw5k0NPirefQfhopSjhdUtpQ==
+  dependencies:
+    "@cush/relative" "^1.0.0"
+    glob-regex "^0.3.0"
+    slash "^3.0.0"
+    sucrase "^3.20.3"
+    tslib "^1.9.3"
+
 refa@^0.9.0:
  version "0.9.1"
  resolved "https://registry.yarnpkg.com/refa/-/refa-0.9.1.tgz#12731fce378d235731b1f73182b20083c8a75ca8"
@@ -8053,10 +8013,10 @@ rollup@2.78.0:
  optionalDependencies:
    fsevents "~2.3.2"

-rollup@~2.78.0:
-  version "2.78.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.1.tgz#52fe3934d9c83cb4f7c4cb5fb75d88591be8648f"
-  integrity sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==
+rollup@^2.79.1:
+  version "2.79.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
+  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
  optionalDependencies:
    fsevents "~2.3.2"

@@ -8439,6 +8399,18 @@ sucrase@^3.20.0:
    pirates "^4.0.1"
    ts-interface-checker "^0.1.9"

+sucrase@^3.20.3:
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.29.0.tgz#3207c5bc1b980fdae1e539df3f8a8a518236da7d"
+  integrity sha512-bZPAuGA5SdFHuzqIhTAqt9fvNEo9rESqXIG3oiKdF8K4UmkQxC4KlNL3lVyAErXp+mPvUqZ5l13qx6TrDIGf3A==
+  dependencies:
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 superjson@^1.10.0:
  version "1.10.1"
  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.10.1.tgz#9c73e9393489dddab89d638694eadcbf4bda2f36"
@@ -8632,6 +8604,15 @@ tsconfig-paths@^3.14.1:
    minimist "^1.2.6"
    strip-bom "^3.0.0"

+tsconfig-paths@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.1.0.tgz#f8ef7d467f08ae3a695335bf1ece088c5538d2c1"
+  integrity sha512-AHx4Euop/dXFC+Vx589alFba8QItjF+8hf8LtmuiCwHyI4rHXQtOOENaM8kvYf5fR0dRChy3wzWIZ9WbB7FWow==
+  dependencies:
+    json5 "^2.2.1"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
 tslib@^1.8.1, tslib@^1.9.3:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -8801,15 +8782,25 @@ v8-to-istanbul@^9.0.1:
    "@types/istanbul-lib-coverage" "^2.0.1"
    convert-source-map "^1.6.0"

-vite@^3.0.9:
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-3.1.7.tgz#9fc2b57a395f79175d38fa3cffd15080b0d9cbfc"
-  integrity sha512-5vCAmU4S8lyVdFCInu9M54f/g8qbOMakVw5xJ4pjoaDy5wgy9sLLZkGdSLN52dlsBqh0tBqxjaqqa8LgPqwRAA==
+vite-tsconfig-paths@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-3.5.2.tgz#fd3232f93c426311d7e0d581187d8b63fff55fbc"
+  integrity sha512-xJMgHA2oJ28QCG2f+hXrcqzo7IttrSRK4A//Tp94CfuX5eetOx33qiwXHUdi3FwkHP2ocpxHuvE45Ix67gwEmQ==
+  dependencies:
+    debug "^4.1.1"
+    globrex "^0.1.2"
+    recrawl-sync "^2.0.3"
+    tsconfig-paths "^4.0.0"
+
+vite@^3.2.1:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.2.4.tgz#d8c7892dd4268064e04fffbe7d866207dd24166e"
+  integrity sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==
  dependencies:
    esbuild "^0.15.9"
-    postcss "^8.4.16"
+    postcss "^8.4.18"
    resolve "^1.22.1"
-    rollup "~2.78.0"
+    rollup "^2.79.1"
  optionalDependencies:
    fsevents "~2.3.2"