chore: remove usage of styled-jsx

2022-10-03 21:23:17 +02:00
parent a37453a115
commit 1683474fa6
12 changed files with 2218 additions and 2180 deletions
--- a/example/components/Header/SwitchTheme.tsx
+++ b/example/components/Header/SwitchTheme.tsx
@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import classNames from 'clsx'
 import { useTheme } from 'next-themes'

 export const SwitchTheme: React.FC = () => {
@ -18,109 +19,60 @@ export const SwitchTheme: React.FC = () => {
  }

  return (
-    <>
-      <div
-        className='flex items-center'
-        data-cy='switch-theme-click'
-        onClick={handleClick}
-      >
-        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
-          <div className='toggle-track'>
-            <div
-              data-cy='switch-theme-dark'
-              className='toggle-track-check absolute'
-            >
-              <span className='toggle_Dark relative flex items-center justify-center'>
-                🌜
-              </span>
-            </div>
-            <div
-              data-cy='switch-theme-light'
-              className='toggle-track-x absolute'
-            >
-              <span className='toggle_Light relative flex items-center justify-center'>
-                🌞
-              </span>
-            </div>
+    <div
+      className='flex items-center'
+      data-cy='switch-theme-click'
+      onClick={handleClick}
+    >
+      <div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
+        <div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
+          <div
+            data-cy='switch-theme-dark'
+            className={classNames(
+              'absolute top-0 bottom-0 left-[8px] mt-auto mb-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              {
+                'opacity-100': theme === 'dark',
+                'opacity-0': theme === 'light'
+              }
+            )}
+          >
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+              🌜
+            </span>
+          </div>
+          <div
+            data-cy='switch-theme-light'
+            className={classNames(
+              'absolute right-[10px] top-0 bottom-0 mt-auto mb-auto h-[10px] w-[10px] leading-[0]',
+              {
+                'opacity-100': theme === 'light',
+                'opacity-0': theme === 'dark'
+              }
+            )}
+          >
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+              🌞
+            </span>
          </div>
-          <div className='toggle-thumb absolute' />
-          <input
-            data-cy='switch-theme-input'
-            type='checkbox'
-            aria-label='Dark mode toggle'
-            className='toggle-screenreader-only absolute overflow-hidden'
-            defaultChecked
-          />
        </div>
+        <div
+          className={classNames(
+            'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
+            {
+              'left-[27px]': theme === 'dark',
+              'left-0': theme === 'light'
+            }
+          )}
+          style={{ border: '1px solid #4d4d4d' }}
+        />
+        <input
+          data-cy='switch-theme-input'
+          type='checkbox'
+          aria-label='Dark mode toggle'
+          className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
+          defaultChecked
+        />
      </div>
-
-      <style jsx>
-        {`
-          .toggle-theme-button {
-            touch-action: pan-x;
-            border: 0;
-            padding: 0;
-            user-select: none;
-          }
-          .toggle-track {
-            width: 50px;
-            height: 24px;
-            padding: 0;
-            border-radius: 30px;
-            background-color: #4d4d4d;
-            transition: all 0.2s ease;
-            color: #fff;
-          }
-          .toggle-track-check {
-            width: 14px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            left: 8px;
-            opacity: ${theme === 'dark' ? 1 : 0};
-            transition: opacity 0.25s ease;
-          }
-          .toggle-track-x {
-            width: 10px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            right: 10px;
-            opacity: ${theme === 'dark' ? 0 : 1};
-          }
-          .toggle_Dark,
-          .toggle_Light {
-            height: 10px;
-            width: 10px;
-          }
-          .toggle-thumb {
-            left: ${theme === 'dark' ? '27px' : '0px'};
-            width: 22px;
-            height: 22px;
-            border: 1px solid #4d4d4d;
-            border-radius: 50%;
-            background-color: #fafafa;
-            box-sizing: border-box;
-            transition: all 0.25s ease;
-            top: 1px;
-            color: #fff;
-          }
-          .toggle-screenreader-only {
-            border: 0;
-            clip: rect(0 0 0 0);
-            height: 1px;
-            margin: -1px;
-            padding: 0;
-            width: 1px;
-          }
-        `}
-      </style>
-    </>
+    </div>
  )
 }
--- a/example/components/design/Loader.tsx
+++ b/example/components/design/Loader.tsx
@ -1,81 +0,0 @@
-export interface LoaderProps {
-  width?: number
-  height?: number
-  className?: string
-}
-
-export const Loader: React.FC<LoaderProps> = (props) => {
-  const { width = 50, height = 50 } = props
-
-  return (
-    <div className={props.className}>
-      <div data-cy='progress-spinner' className='progress-spinner'>
-        <svg className='progress-spinner-svg' viewBox='25 25 50 50'>
-          <circle
-            className='progress-spinner-circle'
-            cx='50'
-            cy='50'
-            r='20'
-            fill='none'
-            strokeWidth='2'
-            strokeMiterlimit='10'
-          />
-        </svg>
-      </div>
-
-      <style jsx>
-        {`
-          .progress-spinner {
-            position: relative;
-            margin: 0 auto;
-            width: ${width}px;
-            height: ${height}px;
-          }
-          .progress-spinner::before {
-            content: '';
-            display: block;
-            padding-top: 100%;
-          }
-          .progress-spinner-svg {
-            animation: progress-spinner-rotate 2s linear infinite;
-            height: 100%;
-            transform-origin: center center;
-            width: 100%;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-          }
-          .progress-spinner-circle {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: 0;
-            stroke: #27b05e;
-            animation: progress-spinner-dash 1.5s ease-in-out infinite;
-            stroke-linecap: round;
-          }
-          @keyframes progress-spinner-rotate {
-            100% {
-              transform: rotate(360deg);
-            }
-          }
-          @keyframes progress-spinner-dash {
-            0% {
-              stroke-dasharray: 1, 200;
-              stroke-dashoffset: 0;
-            }
-            50% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -35px;
-            }
-            100% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -124px;
-            }
-          }
-        `}
-      </style>
-    </div>
-  )
-}
--- a/example/components/design/Loader/Loader.module.css
+++ b/example/components/design/Loader/Loader.module.css
@ -0,0 +1,39 @@
+@keyframes progressSpinnerRotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes progressSpinnerDash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+
+.progressSpinnerSvg {
+  animation: progressSpinnerRotate 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.progressSpinnerCircle {
+  stroke-dasharray: 89, 200;
+  stroke-dashoffset: 0;
+  stroke: #27b05e;
+  animation: progressSpinnerDash 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+}
--- a/example/components/design/Loader/Loader.tsx
+++ b/example/components/design/Loader/Loader.tsx
@ -0,0 +1,33 @@
+import styles from './Loader.module.css'
+
+export interface LoaderProps {
+  width?: number
+  height?: number
+  className?: string
+}
+
+export const Loader: React.FC<LoaderProps> = (props) => {
+  const { width = 50, height = 50 } = props
+
+  return (
+    <div className={props.className}>
+      <div
+        data-cy='progress-spinner'
+        className='relative my-0 mx-auto before:content-none before:block before:pt-[100%]'
+        style={{ width: `${width}px`, height: `${height}px` }}
+      >
+        <svg className={styles.progressSpinnerSvg} viewBox='25 25 50 50'>
+          <circle
+            className={styles.progressSpinnerCircle}
+            cx='50'
+            cy='50'
+            r='20'
+            fill='none'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+          />
+        </svg>
+      </div>
+    </div>
+  )
+}
--- a/example/components/design/Loader/index.ts
+++ b/example/components/design/Loader/index.ts
@ -0,0 +1 @@
+export * from './Loader'
--- a/example/package-lock.json
+++ b/example/package-lock.json
@ -8,7 +8,7 @@
      "name": "example",
      "version": "1.0.0",
      "dependencies": {
-        "@sinclair/typebox": "0.24.42",
+        "@sinclair/typebox": "0.24.44",
        "clsx": "1.2.1",
        "next": "12.3.1",
        "next-themes": "0.2.1",
@ -18,24 +18,24 @@
        "react-dom": "18.2.0"
      },
      "devDependencies": {
-        "@types/node": "18.7.18",
-        "@types/react": "18.0.20",
+        "@types/node": "18.8.0",
+        "@types/react": "18.0.21",
        "@types/react-dom": "18.0.6",
        "autoprefixer": "10.4.12",
-        "cypress": "10.8.0",
-        "eslint": "8.23.1",
+        "cypress": "10.9.0",
+        "eslint": "8.24.0",
        "eslint-config-next": "12.3.1",
-        "postcss": "8.4.16",
+        "postcss": "8.4.17",
        "start-server-and-test": "1.14.0",
        "tailwindcss": "3.1.8",
-        "typescript": "4.8.3"
+        "typescript": "4.8.4"
      }
    },
    "..": {
      "version": "0.0.0-development",
      "license": "MIT",
      "dependencies": {
-        "@sinclair/typebox": "0.24.42",
+        "@sinclair/typebox": "0.24.44",
        "ajv": "8.11.0",
        "ajv-formats": "2.1.1"
      },
@ -43,30 +43,30 @@
        "@commitlint/cli": "17.1.2",
        "@commitlint/config-conventional": "17.1.0",
        "@testing-library/react": "13.4.0",
-        "@types/jest": "29.0.3",
-        "@types/react": "18.0.20",
+        "@types/jest": "29.1.1",
+        "@types/react": "18.0.21",
        "@types/react-dom": "18.0.6",
-        "@typescript-eslint/eslint-plugin": "5.38.0",
-        "@typescript-eslint/parser": "5.38.0",
+        "@typescript-eslint/eslint-plugin": "5.39.0",
+        "@typescript-eslint/parser": "5.39.0",
        "editorconfig-checker": "4.0.2",
-        "esbuild": "0.15.8",
+        "esbuild": "0.15.10",
        "esbuild-jest": "0.5.0",
-        "eslint": "8.23.1",
-        "eslint-config-conventions": "4.0.1",
+        "eslint": "8.24.0",
+        "eslint-config-conventions": "5.0.0",
        "eslint-config-prettier": "8.5.0",
        "eslint-plugin-import": "2.26.0",
        "eslint-plugin-prettier": "4.2.1",
        "eslint-plugin-promise": "6.0.1",
-        "eslint-plugin-unicorn": "43.0.2",
-        "jest": "29.0.3",
-        "jest-environment-jsdom": "29.0.3",
+        "eslint-plugin-unicorn": "44.0.0",
+        "jest": "29.1.2",
+        "jest-environment-jsdom": "29.1.2",
        "markdownlint-cli2": "0.5.1",
        "prettier": "2.7.1",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "semantic-release": "19.0.5",
        "tsup": "6.2.3",
-        "typescript": "4.8.3"
+        "typescript": "4.8.4"
      },
      "peerDependencies": {
        "react": ">=16"
@ -194,9 +194,9 @@
      }
    },
    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
-      "integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
+      "integrity": "sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==",
      "dev": true,
      "dependencies": {
        "@humanwhocodes/object-schema": "^1.2.1",
@ -508,9 +508,9 @@
      "dev": true
    },
    "node_modules/@sinclair/typebox": {
-      "version": "0.24.42",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.42.tgz",
-      "integrity": "sha512-d+2AtrHGyWek2u2ITF0lHRIv6Tt7X0dEHW+0rP+5aDCEjC3fiN2RBjrLD0yU0at52BcZbRGxLbAtXiR0hFCjYw=="
+      "version": "0.24.44",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.44.tgz",
+      "integrity": "sha512-ka0W0KN5i6LfrSocduwliMMpqVgohtPFidKdMEOUjoOFCHcOOYkKsPRxfs5f15oPNHTm6ERAm0GV/+/LTKeiWg=="
    },
    "node_modules/@swc/helpers": {
      "version": "0.4.11",
@ -527,9 +527,9 @@
      "dev": true
    },
    "node_modules/@types/node": {
-      "version": "18.7.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.18.tgz",
-      "integrity": "sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==",
+      "version": "18.8.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.0.tgz",
+      "integrity": "sha512-u+h43R6U8xXDt2vzUaVP3VwjjLyOJk6uEciZS8OSyziUQGOwmk+l+4drxcsDboHXwyTaqS1INebghmWMRxq3LA==",
      "dev": true
    },
    "node_modules/@types/prop-types": {
@ -539,9 +539,9 @@
      "dev": true
    },
    "node_modules/@types/react": {
-      "version": "18.0.20",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.20.tgz",
-      "integrity": "sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==",
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
      "dev": true,
      "dependencies": {
        "@types/prop-types": "*",
@ -587,14 +587,14 @@
      }
    },
    "node_modules/@typescript-eslint/parser": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.38.0.tgz",
-      "integrity": "sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.39.0.tgz",
+      "integrity": "sha512-PhxLjrZnHShe431sBAGHaNe6BDdxAASDySgsBCGxcBecVCi8NQWxQZMcizNA4g0pN51bBAn/FUfkWG3SDVcGlA==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/scope-manager": "5.38.0",
-        "@typescript-eslint/types": "5.38.0",
-        "@typescript-eslint/typescript-estree": "5.38.0",
+        "@typescript-eslint/scope-manager": "5.39.0",
+        "@typescript-eslint/types": "5.39.0",
+        "@typescript-eslint/typescript-estree": "5.39.0",
        "debug": "^4.3.4"
      },
      "engines": {
@ -614,13 +614,13 @@
      }
    },
    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.38.0.tgz",
-      "integrity": "sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.39.0.tgz",
+      "integrity": "sha512-/I13vAqmG3dyqMVSZPjsbuNQlYS082Y7OMkwhCfLXYsmlI0ca4nkL7wJ/4gjX70LD4P8Hnw1JywUVVAwepURBw==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "5.38.0",
-        "@typescript-eslint/visitor-keys": "5.38.0"
+        "@typescript-eslint/types": "5.39.0",
+        "@typescript-eslint/visitor-keys": "5.39.0"
      },
      "engines": {
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@ -631,9 +631,9 @@
      }
    },
    "node_modules/@typescript-eslint/types": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.38.0.tgz",
-      "integrity": "sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.39.0.tgz",
+      "integrity": "sha512-gQMZrnfEBFXK38hYqt8Lkwt8f4U6yq+2H5VDSgP/qiTzC8Nw8JO3OuSUOQ2qW37S/dlwdkHDntkZM6SQhKyPhw==",
      "dev": true,
      "engines": {
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@ -644,13 +644,13 @@
      }
    },
    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.38.0.tgz",
-      "integrity": "sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.39.0.tgz",
+      "integrity": "sha512-qLFQP0f398sdnogJoLtd43pUgB18Q50QSA+BTE5h3sUxySzbWDpTSdgt4UyxNSozY/oDK2ta6HVAzvGgq8JYnA==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "5.38.0",
-        "@typescript-eslint/visitor-keys": "5.38.0",
+        "@typescript-eslint/types": "5.39.0",
+        "@typescript-eslint/visitor-keys": "5.39.0",
        "debug": "^4.3.4",
        "globby": "^11.1.0",
        "is-glob": "^4.0.3",
@ -671,12 +671,12 @@
      }
    },
    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.38.0.tgz",
-      "integrity": "sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.39.0.tgz",
+      "integrity": "sha512-yyE3RPwOG+XJBLrhvsxAidUgybJVQ/hG8BhiJo0k8JSAYfk/CshVcxf0HwP4Jt7WZZ6vLmxdo1p6EyN3tzFTkg==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "5.38.0",
+        "@typescript-eslint/types": "5.39.0",
        "eslint-visitor-keys": "^3.3.0"
      },
      "engines": {
@ -1257,9 +1257,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001408",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001408.tgz",
-      "integrity": "sha512-DdUCktgMSM+1ndk9EFMZcavsGszV7zxV9O7MtOHniTa/iyAIwJCF0dFVBdU9SijJbfh29hC9bCs07wu8pjnGJQ==",
+      "version": "1.0.30001414",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz",
+      "integrity": "sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg==",
      "funding": [
        {
          "type": "opencollective",
@ -1480,9 +1480,9 @@
      "dev": true
    },
    "node_modules/core-js-pure": {
-      "version": "3.25.2",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.2.tgz",
-      "integrity": "sha512-ItD7YpW1cUB4jaqFLZXe1AXkyqIxz6GqPnsDV4uF4hVcWh/WAGIqSqw5p0/WdsILM0Xht9s3Koyw05R3K6RtiA==",
+      "version": "3.25.5",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.5.tgz",
+      "integrity": "sha512-oml3M22pHM+igfWHDfdLVq2ShWmjM2V4L+dQEBs0DWVIqEm9WHCwGAlZ6BmyBQGy5sFrJmcx+856D9lVKyGWYg==",
      "dev": true,
      "hasInstallScript": true,
      "funding": {
@ -1529,9 +1529,9 @@
      "dev": true
    },
    "node_modules/cypress": {
-      "version": "10.8.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.8.0.tgz",
-      "integrity": "sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.9.0.tgz",
+      "integrity": "sha512-MjIWrRpc+bQM9U4kSSdATZWZ2hUqHGFEQTF7dfeZRa4MnalMtc88FIE49USWP2ZVtfy5WPBcgfBX+YorFqGElA==",
      "dev": true,
      "hasInstallScript": true,
      "dependencies": {
@ -1586,9 +1586,9 @@
      }
    },
    "node_modules/cypress/node_modules/@types/node": {
-      "version": "14.18.29",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.29.tgz",
-      "integrity": "sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A==",
+      "version": "14.18.31",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.31.tgz",
+      "integrity": "sha512-vQAnaReSQkEDa8uwAyQby8bYGKu84R/deEc6mg5T8fX6gzCn8QW6rziSgsti1fNvsrswKUKPnVTi7uoB+u62Mw==",
      "dev": true
    },
    "node_modules/damerau-levenshtein": {
@ -1739,9 +1739,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.256",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.256.tgz",
-      "integrity": "sha512-x+JnqyluoJv8I0U9gVe+Sk2st8vF0CzMt78SXxuoWCooLLY2k5VerIBdpvG7ql6GKI4dzNnPjmqgDJ76EdaAKw==",
+      "version": "1.4.270",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.270.tgz",
+      "integrity": "sha512-KNhIzgLiJmDDC444dj9vEOpZEgsV96ult9Iff98Vanumn+ShJHd5se8aX6KeVxdc0YQeqdrezBZv89rleDbvSg==",
      "dev": true
    },
    "node_modules/emoji-regex": {
@ -1772,22 +1772,22 @@
      }
    },
    "node_modules/es-abstract": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.2.tgz",
-      "integrity": "sha512-XxXQuVNrySBNlEkTYJoDNFe5+s2yIOpzq80sUHEdPdQr0S5nTLz4ZPPPswNIpKseDDUS5yghX1gfLIHQZ1iNuQ==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.3.tgz",
+      "integrity": "sha512-AyrnaKVpMzljIdwjzrj+LxGmj8ik2LckwXacHqrJJ/jxz6dDDBcZ7I7nlHM0FvEW8MfbWJwOd+yT2XzYW49Frw==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "es-to-primitive": "^1.2.1",
        "function-bind": "^1.1.1",
        "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.2",
+        "get-intrinsic": "^1.1.3",
        "get-symbol-description": "^1.0.0",
        "has": "^1.0.3",
        "has-property-descriptors": "^1.0.0",
        "has-symbols": "^1.0.3",
        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "is-callable": "^1.2.6",
        "is-negative-zero": "^2.0.2",
        "is-regex": "^1.1.4",
        "is-shared-array-buffer": "^1.0.2",
@ -1797,6 +1797,7 @@
        "object-keys": "^1.1.1",
        "object.assign": "^4.1.4",
        "regexp.prototype.flags": "^1.4.3",
+        "safe-regex-test": "^1.0.0",
        "string.prototype.trimend": "^1.0.5",
        "string.prototype.trimstart": "^1.0.5",
        "unbox-primitive": "^1.0.2"
@ -1856,13 +1857,13 @@
      }
    },
    "node_modules/eslint": {
-      "version": "8.23.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.1.tgz",
-      "integrity": "sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==",
+      "version": "8.24.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.24.0.tgz",
+      "integrity": "sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==",
      "dev": true,
      "dependencies": {
        "@eslint/eslintrc": "^1.3.2",
-        "@humanwhocodes/config-array": "^0.10.4",
+        "@humanwhocodes/config-array": "^0.10.5",
        "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
        "@humanwhocodes/module-importer": "^1.0.1",
        "ajv": "^6.10.0",
@ -3058,9 +3059,9 @@
      }
    },
    "node_modules/is-callable": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.6.tgz",
-      "integrity": "sha512-krO72EO2NptOGAX2KYyqbP9vYMlNAXdB53rq6f8LXY6RY7JdSR/3BD6wLUlPHSAesmY9vstNrjvqGaCiRK/91Q==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
      "dev": true,
      "engines": {
        "node": ">= 0.4"
@ -3312,9 +3313,9 @@
      "dev": true
    },
    "node_modules/joi": {
-      "version": "17.6.0",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.6.0.tgz",
-      "integrity": "sha512-OX5dG6DTbcr/kbMFj0KGYxuew69HPcAE3K/sZpEV2nP6e/j/C0HV+HNiBPCASxdx5T7DMoa0s8UeHWMnb6n2zw==",
+      "version": "17.6.2",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.6.2.tgz",
+      "integrity": "sha512-+gqqdh1xc1wb+Lor0J9toqgeReyDOCqOdG8QSdRcEvwrcRiFQZneUCGKjFjuyBWUb3uaFOgY56yMaZ5FIc+H4w==",
      "dev": true,
      "dependencies": {
        "@hapi/hoek": "^9.0.0",
@ -3325,9 +3326,9 @@
      }
    },
    "node_modules/js-sdsl": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
-      "integrity": "sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
+      "integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==",
      "dev": true
    },
    "node_modules/js-tokens": {
@ -4167,9 +4168,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+      "version": "8.4.17",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz",
+      "integrity": "sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==",
      "dev": true,
      "funding": [
        {
@ -4604,9 +4605,9 @@
      }
    },
    "node_modules/rxjs": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgz",
-      "integrity": "sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz",
+      "integrity": "sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==",
      "dev": true,
      "dependencies": {
        "tslib": "^2.1.0"
@ -4632,6 +4633,20 @@
        }
      ]
    },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@ -5194,9 +5209,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "4.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
-      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
      "dev": true,
      "bin": {
        "tsc": "bin/tsc",
@ -5547,9 +5562,9 @@
      }
    },
    "@humanwhocodes/config-array": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
-      "integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
+      "integrity": "sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==",
      "dev": true,
      "requires": {
        "@humanwhocodes/object-schema": "^1.2.1",
@ -5721,9 +5736,9 @@
      "dev": true
    },
    "@sinclair/typebox": {
-      "version": "0.24.42",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.42.tgz",
-      "integrity": "sha512-d+2AtrHGyWek2u2ITF0lHRIv6Tt7X0dEHW+0rP+5aDCEjC3fiN2RBjrLD0yU0at52BcZbRGxLbAtXiR0hFCjYw=="
+      "version": "0.24.44",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.44.tgz",
+      "integrity": "sha512-ka0W0KN5i6LfrSocduwliMMpqVgohtPFidKdMEOUjoOFCHcOOYkKsPRxfs5f15oPNHTm6ERAm0GV/+/LTKeiWg=="
    },
    "@swc/helpers": {
      "version": "0.4.11",
@ -5740,9 +5755,9 @@
      "dev": true
    },
    "@types/node": {
-      "version": "18.7.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.18.tgz",
-      "integrity": "sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==",
+      "version": "18.8.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.0.tgz",
+      "integrity": "sha512-u+h43R6U8xXDt2vzUaVP3VwjjLyOJk6uEciZS8OSyziUQGOwmk+l+4drxcsDboHXwyTaqS1INebghmWMRxq3LA==",
      "dev": true
    },
    "@types/prop-types": {
@ -5752,9 +5767,9 @@
      "dev": true
    },
    "@types/react": {
-      "version": "18.0.20",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.20.tgz",
-      "integrity": "sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==",
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
      "dev": true,
      "requires": {
        "@types/prop-types": "*",
@ -5800,41 +5815,41 @@
      }
    },
    "@typescript-eslint/parser": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.38.0.tgz",
-      "integrity": "sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.39.0.tgz",
+      "integrity": "sha512-PhxLjrZnHShe431sBAGHaNe6BDdxAASDySgsBCGxcBecVCi8NQWxQZMcizNA4g0pN51bBAn/FUfkWG3SDVcGlA==",
      "dev": true,
      "requires": {
-        "@typescript-eslint/scope-manager": "5.38.0",
-        "@typescript-eslint/types": "5.38.0",
-        "@typescript-eslint/typescript-estree": "5.38.0",
+        "@typescript-eslint/scope-manager": "5.39.0",
+        "@typescript-eslint/types": "5.39.0",
+        "@typescript-eslint/typescript-estree": "5.39.0",
        "debug": "^4.3.4"
      }
    },
    "@typescript-eslint/scope-manager": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.38.0.tgz",
-      "integrity": "sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.39.0.tgz",
+      "integrity": "sha512-/I13vAqmG3dyqMVSZPjsbuNQlYS082Y7OMkwhCfLXYsmlI0ca4nkL7wJ/4gjX70LD4P8Hnw1JywUVVAwepURBw==",
      "dev": true,
      "requires": {
-        "@typescript-eslint/types": "5.38.0",
-        "@typescript-eslint/visitor-keys": "5.38.0"
+        "@typescript-eslint/types": "5.39.0",
+        "@typescript-eslint/visitor-keys": "5.39.0"
      }
    },
    "@typescript-eslint/types": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.38.0.tgz",
-      "integrity": "sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.39.0.tgz",
+      "integrity": "sha512-gQMZrnfEBFXK38hYqt8Lkwt8f4U6yq+2H5VDSgP/qiTzC8Nw8JO3OuSUOQ2qW37S/dlwdkHDntkZM6SQhKyPhw==",
      "dev": true
    },
    "@typescript-eslint/typescript-estree": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.38.0.tgz",
-      "integrity": "sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.39.0.tgz",
+      "integrity": "sha512-qLFQP0f398sdnogJoLtd43pUgB18Q50QSA+BTE5h3sUxySzbWDpTSdgt4UyxNSozY/oDK2ta6HVAzvGgq8JYnA==",
      "dev": true,
      "requires": {
-        "@typescript-eslint/types": "5.38.0",
-        "@typescript-eslint/visitor-keys": "5.38.0",
+        "@typescript-eslint/types": "5.39.0",
+        "@typescript-eslint/visitor-keys": "5.39.0",
        "debug": "^4.3.4",
        "globby": "^11.1.0",
        "is-glob": "^4.0.3",
@ -5843,12 +5858,12 @@
      }
    },
    "@typescript-eslint/visitor-keys": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.38.0.tgz",
-      "integrity": "sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.39.0.tgz",
+      "integrity": "sha512-yyE3RPwOG+XJBLrhvsxAidUgybJVQ/hG8BhiJo0k8JSAYfk/CshVcxf0HwP4Jt7WZZ6vLmxdo1p6EyN3tzFTkg==",
      "dev": true,
      "requires": {
-        "@typescript-eslint/types": "5.38.0",
+        "@typescript-eslint/types": "5.39.0",
        "eslint-visitor-keys": "^3.3.0"
      }
    },
@ -6238,9 +6253,9 @@
      "dev": true
    },
    "caniuse-lite": {
-      "version": "1.0.30001408",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001408.tgz",
-      "integrity": "sha512-DdUCktgMSM+1ndk9EFMZcavsGszV7zxV9O7MtOHniTa/iyAIwJCF0dFVBdU9SijJbfh29hC9bCs07wu8pjnGJQ=="
+      "version": "1.0.30001414",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz",
+      "integrity": "sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg=="
    },
    "caseless": {
      "version": "0.12.0",
@ -6397,9 +6412,9 @@
      "dev": true
    },
    "core-js-pure": {
-      "version": "3.25.2",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.2.tgz",
-      "integrity": "sha512-ItD7YpW1cUB4jaqFLZXe1AXkyqIxz6GqPnsDV4uF4hVcWh/WAGIqSqw5p0/WdsILM0Xht9s3Koyw05R3K6RtiA==",
+      "version": "3.25.5",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.5.tgz",
+      "integrity": "sha512-oml3M22pHM+igfWHDfdLVq2ShWmjM2V4L+dQEBs0DWVIqEm9WHCwGAlZ6BmyBQGy5sFrJmcx+856D9lVKyGWYg==",
      "dev": true
    },
    "core-util-is": {
@ -6432,9 +6447,9 @@
      "dev": true
    },
    "cypress": {
-      "version": "10.8.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.8.0.tgz",
-      "integrity": "sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.9.0.tgz",
+      "integrity": "sha512-MjIWrRpc+bQM9U4kSSdATZWZ2hUqHGFEQTF7dfeZRa4MnalMtc88FIE49USWP2ZVtfy5WPBcgfBX+YorFqGElA==",
      "dev": true,
      "requires": {
        "@cypress/request": "^2.88.10",
@ -6482,9 +6497,9 @@
      },
      "dependencies": {
        "@types/node": {
-          "version": "14.18.29",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.29.tgz",
-          "integrity": "sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A==",
+          "version": "14.18.31",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.31.tgz",
+          "integrity": "sha512-vQAnaReSQkEDa8uwAyQby8bYGKu84R/deEc6mg5T8fX6gzCn8QW6rziSgsti1fNvsrswKUKPnVTi7uoB+u62Mw==",
          "dev": true
        }
      }
@ -6605,9 +6620,9 @@
      }
    },
    "electron-to-chromium": {
-      "version": "1.4.256",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.256.tgz",
-      "integrity": "sha512-x+JnqyluoJv8I0U9gVe+Sk2st8vF0CzMt78SXxuoWCooLLY2k5VerIBdpvG7ql6GKI4dzNnPjmqgDJ76EdaAKw==",
+      "version": "1.4.270",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.270.tgz",
+      "integrity": "sha512-KNhIzgLiJmDDC444dj9vEOpZEgsV96ult9Iff98Vanumn+ShJHd5se8aX6KeVxdc0YQeqdrezBZv89rleDbvSg==",
      "dev": true
    },
    "emoji-regex": {
@ -6635,22 +6650,22 @@
      }
    },
    "es-abstract": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.2.tgz",
-      "integrity": "sha512-XxXQuVNrySBNlEkTYJoDNFe5+s2yIOpzq80sUHEdPdQr0S5nTLz4ZPPPswNIpKseDDUS5yghX1gfLIHQZ1iNuQ==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.3.tgz",
+      "integrity": "sha512-AyrnaKVpMzljIdwjzrj+LxGmj8ik2LckwXacHqrJJ/jxz6dDDBcZ7I7nlHM0FvEW8MfbWJwOd+yT2XzYW49Frw==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "es-to-primitive": "^1.2.1",
        "function-bind": "^1.1.1",
        "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.2",
+        "get-intrinsic": "^1.1.3",
        "get-symbol-description": "^1.0.0",
        "has": "^1.0.3",
        "has-property-descriptors": "^1.0.0",
        "has-symbols": "^1.0.3",
        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "is-callable": "^1.2.6",
        "is-negative-zero": "^2.0.2",
        "is-regex": "^1.1.4",
        "is-shared-array-buffer": "^1.0.2",
@ -6660,6 +6675,7 @@
        "object-keys": "^1.1.1",
        "object.assign": "^4.1.4",
        "regexp.prototype.flags": "^1.4.3",
+        "safe-regex-test": "^1.0.0",
        "string.prototype.trimend": "^1.0.5",
        "string.prototype.trimstart": "^1.0.5",
        "unbox-primitive": "^1.0.2"
@ -6698,13 +6714,13 @@
      "dev": true
    },
    "eslint": {
-      "version": "8.23.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.1.tgz",
-      "integrity": "sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==",
+      "version": "8.24.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.24.0.tgz",
+      "integrity": "sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==",
      "dev": true,
      "requires": {
        "@eslint/eslintrc": "^1.3.2",
-        "@humanwhocodes/config-array": "^0.10.4",
+        "@humanwhocodes/config-array": "^0.10.5",
        "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
        "@humanwhocodes/module-importer": "^1.0.1",
        "ajv": "^6.10.0",
@ -7587,9 +7603,9 @@
      }
    },
    "is-callable": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.6.tgz",
-      "integrity": "sha512-krO72EO2NptOGAX2KYyqbP9vYMlNAXdB53rq6f8LXY6RY7JdSR/3BD6wLUlPHSAesmY9vstNrjvqGaCiRK/91Q==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
      "dev": true
    },
    "is-ci": {
@ -7754,9 +7770,9 @@
      "dev": true
    },
    "joi": {
-      "version": "17.6.0",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.6.0.tgz",
-      "integrity": "sha512-OX5dG6DTbcr/kbMFj0KGYxuew69HPcAE3K/sZpEV2nP6e/j/C0HV+HNiBPCASxdx5T7DMoa0s8UeHWMnb6n2zw==",
+      "version": "17.6.2",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.6.2.tgz",
+      "integrity": "sha512-+gqqdh1xc1wb+Lor0J9toqgeReyDOCqOdG8QSdRcEvwrcRiFQZneUCGKjFjuyBWUb3uaFOgY56yMaZ5FIc+H4w==",
      "dev": true,
      "requires": {
        "@hapi/hoek": "^9.0.0",
@ -7767,9 +7783,9 @@
      }
    },
    "js-sdsl": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
-      "integrity": "sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
+      "integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==",
      "dev": true
    },
    "js-tokens": {
@ -8380,9 +8396,9 @@
      "dev": true
    },
    "postcss": {
-      "version": "8.4.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+      "version": "8.4.17",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz",
+      "integrity": "sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==",
      "dev": true,
      "requires": {
        "nanoid": "^3.3.4",
@ -8536,34 +8552,34 @@
      "requires": {
        "@commitlint/cli": "17.1.2",
        "@commitlint/config-conventional": "17.1.0",
-        "@sinclair/typebox": "0.24.42",
+        "@sinclair/typebox": "0.24.44",
        "@testing-library/react": "13.4.0",
-        "@types/jest": "29.0.3",
-        "@types/react": "18.0.20",
+        "@types/jest": "29.1.1",
+        "@types/react": "18.0.21",
        "@types/react-dom": "18.0.6",
-        "@typescript-eslint/eslint-plugin": "5.38.0",
-        "@typescript-eslint/parser": "5.38.0",
+        "@typescript-eslint/eslint-plugin": "5.39.0",
+        "@typescript-eslint/parser": "5.39.0",
        "ajv": "8.11.0",
        "ajv-formats": "2.1.1",
        "editorconfig-checker": "4.0.2",
-        "esbuild": "0.15.8",
+        "esbuild": "0.15.10",
        "esbuild-jest": "0.5.0",
-        "eslint": "8.23.1",
-        "eslint-config-conventions": "4.0.1",
+        "eslint": "8.24.0",
+        "eslint-config-conventions": "5.0.0",
        "eslint-config-prettier": "8.5.0",
        "eslint-plugin-import": "2.26.0",
        "eslint-plugin-prettier": "4.2.1",
        "eslint-plugin-promise": "6.0.1",
-        "eslint-plugin-unicorn": "43.0.2",
-        "jest": "29.0.3",
-        "jest-environment-jsdom": "29.0.3",
+        "eslint-plugin-unicorn": "44.0.0",
+        "jest": "29.1.2",
+        "jest-environment-jsdom": "29.1.2",
        "markdownlint-cli2": "0.5.1",
        "prettier": "2.7.1",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "semantic-release": "19.0.5",
        "tsup": "6.2.3",
-        "typescript": "4.8.3"
+        "typescript": "4.8.4"
      }
    },
    "react-dom": {
@ -8689,9 +8705,9 @@
      }
    },
    "rxjs": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgz",
-      "integrity": "sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz",
+      "integrity": "sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==",
      "dev": true,
      "requires": {
        "tslib": "^2.1.0"
@ -8703,6 +8719,17 @@
      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
      "dev": true
    },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
+    },
    "safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@ -9116,9 +9143,9 @@
      "dev": true
    },
    "typescript": {
-      "version": "4.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
-      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
      "dev": true
    },
    "unbox-primitive": {
--- a/example/package.json
+++ b/example/package.json
@ -11,7 +11,7 @@
    "test:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\""
  },
  "dependencies": {
-    "@sinclair/typebox": "0.24.42",
+    "@sinclair/typebox": "0.24.44",
    "clsx": "1.2.1",
    "next": "12.3.1",
    "next-themes": "0.2.1",
@ -21,16 +21,16 @@
    "react-dom": "18.2.0"
  },
  "devDependencies": {
-    "@types/node": "18.7.18",
-    "@types/react": "18.0.20",
+    "@types/node": "18.8.0",
+    "@types/react": "18.0.21",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "10.4.12",
-    "cypress": "10.8.0",
-    "eslint": "8.23.1",
+    "cypress": "10.9.0",
+    "eslint": "8.24.0",
    "eslint-config-next": "12.3.1",
-    "postcss": "8.4.16",
+    "postcss": "8.4.17",
    "start-server-and-test": "1.14.0",
    "tailwindcss": "3.1.8",
-    "typescript": "4.8.3"
+    "typescript": "4.8.4"
  }
 }
--- a/example/tailwind.config.js
+++ b/example/tailwind.config.js
@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+const tailwindConfig = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
@ -16,3 +16,5 @@ module.exports = {
  },
  plugins: []
 }
+
+module.exports = tailwindConfig