chore: add prettier-plugin-tailwindcss, upgrade husky and lint-staged (#329)

2026-04-04 22:09:04 +08:00 · 2023-02-28 12:18:43 +08:00
parent ef9f01dbab
commit 70377d0f54
33 changed files with 342 additions and 403 deletions
--- a/.github/stale.yml
+++ b/.github/stale.yml
@@ -7,7 +7,6 @@ exemptLabels:
  - pinned
  - security
  - Category: Announcement
-  - 
 # Label to use when marking an issue as stale
 staleLabel: stale-issue
 # Comment to post when marking an issue as stale. Set to `false` to disable
@@ -16,4 +15,4 @@ markComment: >
  recent activity. It will be closed if no further activity occurs. Thank you
  for your contributions.
 # Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false
+closeComment: false
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run lint-staged
+yarn run eslint . --fix
+yarn run prettier --write .
--- a/.prettierrc
+++ b/.prettierrc
@@ -11,5 +11,6 @@
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
-  ]
+  ],
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,12 +1,11 @@
-version: "3"
+version: '3'

 services:
  qwertylearner:
-    image: "node:16"
-    user: "root"
-    working_dir: "/app/qwerty-learner"
-    ports:
-      [8990:3000]
+    image: 'node:16'
+    user: 'root'
+    working_dir: '/app/qwerty-learner'
+    ports: [8990:3000]
    volumes:
      - $PWD/:/app/qwerty-learner
    command:
--- a/docs/tobuildwordbook.md
+++ b/docs/tobuildwordbook.md
@@ -1,30 +1,35 @@
 ## 如何导入自己的词单
+
 > 这是一种方法 有更方便的可以继续分享

 ### 制作 csv

-> 工具： 欧路词典、excel、Numbers表格
+> 工具： 欧路词典、excel、Numbers 表格

 #### STEP1 构建自己生词本
+
 1. 在欧路词典中 添加一个生词本，并勾选默认添加到此生词本

 2. 正常看单词，不会的点击收藏
-> 此收藏会自动添加到设置默认添加的生词本中，请确保默认添加生词本的正确性。

-3. 登陆`my.eudic.net` --> 我的生词本 --> 生词本工具 --> 打印当前列表 --> 复制到excel中
+   > 此收藏会自动添加到设置默认添加的生词本中，请确保默认添加生词本的正确性。
+
+3. 登陆`my.eudic.net` --> 我的生词本 --> 生词本工具 --> 打印当前列表 --> 复制到 excel 中
+
+4. excel 中的格式

-4. excel中的格式
 ```
 name | trans
 单词	| [翻译]
 ```
-> 翻译一览可以在新的列C使用 `="["&B2&"]"`
+
+> 翻译一览可以在新的列 C 使用 `="["&B2&"]"`

 5. 导出为`csv`格式

 ### STEP2 格式处理

-使用`apple`的 `number表格` 删除B列，保留`[翻译]`这一列，同时务必确保只有`name`和 `trans`这两列
+使用`apple`的 `number表格` 删除 B 列，保留`[翻译]`这一列，同时务必确保只有`name`和 `trans`这两列
 保存导出为`csv`格式

 ### STEP3 csv to json
@@ -39,6 +44,7 @@ name | trans
 保存

 ### STEP5 导入项目文件
+
 将该`json`文件导入到`/public/dicts`中
 同时修改`/resources/dictionary.ts`
 修改格式为：
@@ -46,18 +52,22 @@ name | trans
 ```json
 { id: 'test', name: 'test', description: 'test', category: '英语学习', url: './dicts/test.json', length: 0 },
 ```
+
 #### 注意
+
 `length`该字段可以使用`node ./scripts/update-dict-size.js`来进行统计

 ## 项目参数

 默认端口`3000`
 `Local:http://localhost:3000`
+
 ## 疑难杂症

-### yarn start失败
+### yarn start 失败
+
 > 报错：ERR_PACKAGE_PATH_NOT_EXPORTED

-尝试删除 `node_modules` 重新`yarn`安装依赖，然后再 `yarn start` 
+尝试删除 `node_modules` 重新`yarn`安装依赖，然后再 `yarn start`

 如果还是失败，请确保`node`版本一致，自行修改当前版本
--- a/package.json
+++ b/package.json
@@ -12,31 +12,14 @@
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@headlessui/react": "^0.2.0",
    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/howler": "^2.2.3",
-    "@types/jest": "^26.0.15",
-    "@types/lodash": "^4.14.168",
-    "@types/mixpanel-browser": "^2.38.1",
-    "@types/node": "16",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
    "autoprefixer": "^10.4.13",
    "classnames": "^2.3.2",
    "dayjs": "^1.11.7",
    "eslint": "^7.18.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
    "howler": "^2.2.3",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.3",
    "lodash": "^4.17.20",
    "mixpanel-browser": "^2.45.0",
    "postcss": "^8.4.21",
-    "prettier": "^2.2.1",
    "react": "^17.0.1",
    "react-app-polyfill": "^2.0.0",
    "react-dom": "^17.0.1",
@@ -56,7 +39,9 @@
    "build": "cross-env CI=false vite build --base=./",
    "test": "echo \"No tests\"",
    "lint": "eslint .",
-    "analyze": "source-map-explorer 'build/static/js/*.js'"
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "prettier": "prettier --write .",
+    "prepare": "husky install"
  },
  "eslintConfig": {
    "plugins": [
@@ -78,11 +63,6 @@
      "prettier/prettier": "error"
    }
  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged && eslint . --fix"
-    }
-  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
@@ -107,10 +87,28 @@
    ]
  },
  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/howler": "^2.2.3",
+    "@types/jest": "^26.0.15",
+    "@types/lodash": "^4.14.168",
+    "@types/mixpanel-browser": "^2.38.1",
+    "@types/node": "16",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.7",
    "@vitejs/plugin-react": "^3.1.0",
    "cross-env": "^7.0.3",
+    "eslint-config-prettier": "^7.2.0",
    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.0",
+    "lint-staged": "^13.1.2",
+    "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.3",
    "tailwindcss": "^3.2.6",
    "vite": "^4.1.1",
    "vite-plugin-svgr": "^2.4.0"
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -26,7 +26,7 @@ const Footer: React.FC = () => {
        >
          {content === 'donate' ? (
            <>
-              <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white dark:text-opacity-70" id="modal-headline">
+              <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white dark:text-opacity-70" id="modal-headline">
                Buy me a coffee
              </h3>
              <div className="mt-2 ">
@@ -37,12 +37,12 @@ const Footer: React.FC = () => {
                <br />
                <p className="text-sm text-gray-700 dark:text-gray-200">如果您喜欢我们软件，非常感谢您对我们未来的支持!</p>
                <br />
-                <img className="w-2/6 ml-1 " src={alipay} alt="alipay" />
+                <img className="ml-1 w-2/6 " src={alipay} alt="alipay" />
              </div>
            </>
          ) : (
            <>
-              <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white dark:text-opacity-70" id="modal-headline">
+              <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white dark:text-opacity-70" id="modal-headline">
                VSCode 摸🐟插件
              </h3>
              <div className="mt-2 ">
@@ -51,7 +51,7 @@ const Footer: React.FC = () => {
                  可以在任意文件中一键开启，开启后单词显示在状态栏中，且插件会拦截用户对文档的输入，不会影响到原始文档。
                </p>
                <br /> <br />
-                <a className="underline mr-5 dark:text-gray-300" href="https://github.com/Kaiyiwing/qwerty-learner-vscode">
+                <a className="mr-5 underline dark:text-gray-300" href="https://github.com/Kaiyiwing/qwerty-learner-vscode">
                  GitHub 项目
                </a>
                <a className="underline dark:text-gray-300" href="https://marketplace.visualstudio.com/items?itemName=Kaiyi.qwerty-learner">
@@ -63,9 +63,9 @@ const Footer: React.FC = () => {
          )}
        </InfoPanel>
      )}
-      <div className="w-full text-sm text-center mt-4 pb-1 ease-in" onClick={(e) => e.currentTarget.blur()}>
+      <div className="mt-4 w-full pb-1 text-center text-sm ease-in" onClick={(e) => e.currentTarget.blur()}>
        <a href="https://github.com/Kaiyiwing/qwerty-learner" target="_blank" rel="noreferrer">
-          <FontAwesomeIcon icon={['fab', 'github']} className="text-gray-500 dark:text-gray-400 mr-3" />
+          <FontAwesomeIcon icon={['fab', 'github']} className="mr-3 text-gray-500 dark:text-gray-400" />
        </a>

        <span
@@ -76,7 +76,7 @@ const Footer: React.FC = () => {
            e.currentTarget.blur()
          }}
        >
-          <FontAwesomeIcon icon={['fas', 'coffee']} className="text-gray-500 dark:text-gray-400 mr-3" />
+          <FontAwesomeIcon icon={['fas', 'coffee']} className="mr-3 text-gray-500 dark:text-gray-400" />
        </span>

        <span
@@ -91,19 +91,19 @@ const Footer: React.FC = () => {
        </span>

        <a href="mailto:ZHANG.Kaiyi42@gmail.com" target="_blank" rel="noreferrer" onClick={(e) => e.currentTarget.blur()}>
-          <FontAwesomeIcon icon={['fas', 'envelope']} className="text-gray-500 dark:text-gray-400 mr-3" />
+          <FontAwesomeIcon icon={['fas', 'envelope']} className="mr-3 text-gray-500 dark:text-gray-400" />
        </a>

        <div className="group relative inline-block ">
-          <a href="https://kaiyiwing.gitee.io/qwerty-learner/" className="text-gray-500 dark:text-gray-400 mr-3" title="中国大陆节点">
+          <a href="https://kaiyiwing.gitee.io/qwerty-learner/" className="mr-3 text-gray-500 dark:text-gray-400" title="中国大陆节点">
            🇨🇳
          </a>
-          <div className="invisible group-hover:visible absolute bottom-full left-1/2 w-40 -ml-20 pt-2 flex items-center justify-center">
-            <span className="py-1 px-3 text-gray-500 dark:text-gray-400 text-xs">中国大陆镜像</span>
+          <div className="invisible absolute bottom-full left-1/2 -ml-20 flex w-40 items-center justify-center pt-2 group-hover:visible">
+            <span className="py-1 px-3 text-xs text-gray-500 dark:text-gray-400">中国大陆镜像</span>
          </div>
        </div>
        <span
-          className="text-gray-500 dark:text-gray-400 cursor-pointer no-underline hover:no-underline "
+          className="cursor-pointer text-gray-500 no-underline hover:no-underline dark:text-gray-400 "
          onClick={(e) => {
            setShowContent('donate')
            setShowModal(true)
@@ -113,7 +113,7 @@ const Footer: React.FC = () => {
          @ Qwerty Learner
        </span>
        <a
-          className="text-gray-500 dark:text-gray-400 cursor-pointer no-underline hover:no-underline pl-2"
+          className="cursor-pointer pl-2 text-gray-500 no-underline hover:no-underline dark:text-gray-400"
          href="https://beian.miit.gov.cn"
          target="_blank"
          rel="noreferrer"
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -4,13 +4,13 @@ import { ReactComponent as Logo } from '@/assets/logo.svg'

 const Header: React.FC = ({ children }) => {
  return (
-    <nav className="w-full container mx-auto px-10 py-6">
-      <div className="w-full flex items-center justify-between flex-col lg:flex-row space-y-3 lg:space-y-0">
-        <NavLink className="flex items-center text-indigo-400 no-underline hover:no-underline font-bold text-2xl lg:text-4xl" to="/">
-          <Logo className="w-16 h-16 mr-3" />
+    <nav className="container mx-auto w-full px-10 py-6">
+      <div className="flex w-full flex-col items-center justify-between space-y-3 lg:flex-row lg:space-y-0">
+        <NavLink className="flex items-center text-2xl font-bold text-indigo-400 no-underline hover:no-underline lg:text-4xl" to="/">
+          <Logo className="mr-3 h-16 w-16" />
          Qwerty Learner
        </NavLink>
-        <div className="flex bg-white dark:bg-gray-800 transition-colors duration-300 justify-end content-center items-center space-x-3 card rounded-large w-auto on element p-4">
+        <div className="card on element flex w-auto content-center items-center justify-end space-x-3 rounded-large bg-white p-4 transition-colors duration-300 dark:bg-gray-800">
          {children}
        </div>
      </div>
--- a/src/components/InfoPanel/index.tsx
+++ b/src/components/InfoPanel/index.tsx
@@ -14,8 +14,8 @@ type InfoPanelProps = {

 const InfoPanel: React.FC<InfoPanelProps> = ({ state, buttonOnclick, icon, color, iconColor, btnColor, children }) => {
  return (
-    <div className="fixed z-10 inset-0 overflow-y-auto">
-      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+    <div className="fixed inset-0 z-10 overflow-y-auto">
+      <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <Transition
          show={state}
          enter="ease-out duration-30"
@@ -27,7 +27,7 @@ const InfoPanel: React.FC<InfoPanelProps> = ({ state, buttonOnclick, icon, color
        >
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
        </Transition>
-        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+        <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
          &#8203;
        </span>
        <Transition
@@ -41,7 +41,7 @@ const InfoPanel: React.FC<InfoPanelProps> = ({ state, buttonOnclick, icon, color
        >
          {(ref) => (
            <div
-              className="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full "
+              className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:align-middle "
              ref={ref}
              role="dialog"
              aria-modal="true"
@@ -50,7 +50,7 @@ const InfoPanel: React.FC<InfoPanelProps> = ({ state, buttonOnclick, icon, color
              <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div
-                    className={`mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-md dark:bg-opacity-70 ${color} sm:mx-0 sm:h-10 sm:w-10 `}
+                    className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md dark:bg-opacity-70 ${color} sm:mx-0 sm:h-10 sm:w-10 `}
                  >
                    <FontAwesomeIcon icon={icon} className={`h-5 w-5 stroke-current  ${iconColor}`} />
                  </div>
@@ -59,10 +59,10 @@ const InfoPanel: React.FC<InfoPanelProps> = ({ state, buttonOnclick, icon, color
                </div>
              </div>

-              <div className="bg-gray-50 dark:bg-gray-700 dark:bg-opacity-10 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+              <div className="bg-gray-50 px-4 py-3 dark:bg-gray-700 dark:bg-opacity-10 sm:flex sm:flex-row-reverse sm:px-6">
                <button
                  type="button"
-                  className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ${btnColor} dark:bg-opacity-70 text-base font-medium text-white dark:text-opacity-80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm `}
+                  className={`inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 shadow-sm ${btnColor} text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-opacity-70 dark:text-opacity-80 sm:ml-3 sm:w-auto sm:text-sm `}
                  onClick={buttonOnclick}
                >
                  {'关闭'}
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Footer from './Footer'

 const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({ children }) => (
-  <div className="h-screen w-full pb-4 flex flex-col items-center">
+  <div className="flex h-screen w-full flex-col items-center pb-4">
    {children}
    <Footer />
  </div>
--- a/src/components/Main/index.tsx
+++ b/src/components/Main/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'

 const Main: React.FC = ({ children }) => {
-  return <div className="container h-full mx-auto pb-20 flex flex-col flex-1 items-center justify-center">{children}</div>
+  return <div className="container mx-auto flex h-full flex-1 flex-col items-center justify-center pb-20">{children}</div>
 }

 export default Main
--- a/src/components/Modals/index.tsx
+++ b/src/components/Modals/index.tsx
@@ -34,23 +34,23 @@ const Modals: React.FC<ModalsProps> = ({
  thirdButtonHotkey = '',
 }) => {
  useHotkeys('enter', () => {
-    const e: MouseEvent = (null as unknown) as MouseEvent
+    const e: MouseEvent = null as unknown as MouseEvent
    firstButtonOnclick(e)
  })

  useHotkeys('shift+enter', () => {
-    const e: MouseEvent = (null as unknown) as MouseEvent
+    const e: MouseEvent = null as unknown as MouseEvent
    secondButtonOnclick(e)
  })

  useHotkeys(thirdButtonHotkey, () => {
-    const e: MouseEvent = (null as unknown) as MouseEvent
+    const e: MouseEvent = null as unknown as MouseEvent
    if (thirdButtonOnclick) thirdButtonOnclick(e)
  })

  return (
-    <div className="fixed z-10 inset-0 overflow-y-auto">
-      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+    <div className="fixed inset-0 z-10 overflow-y-auto">
+      <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <Transition
          show={state}
          enter="ease-out duration-30"
@@ -65,7 +65,7 @@ const Modals: React.FC<ModalsProps> = ({
          </div>
        </Transition>

-        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+        <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
          &#8203;
        </span>

@@ -80,7 +80,7 @@ const Modals: React.FC<ModalsProps> = ({
        >
          {(ref) => (
            <div
-              className="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+              className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:align-middle"
              ref={ref}
              role="dialog"
              aria-modal="true"
@@ -88,12 +88,12 @@ const Modals: React.FC<ModalsProps> = ({
            >
              <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 dark:bg-indigo-900 sm:mx-0 sm:h-10 sm:w-10">
+                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900 sm:mx-0 sm:h-10 sm:w-10">
                    <FontAwesomeIcon icon="book-reader" className="h-10 w-10 stroke-current text-indigo-500 dark:text-indigo-400" />
                  </div>

                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white dark:text-opacity-70" id="modal-headline">
+                    <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white dark:text-opacity-70" id="modal-headline">
                      {title}
                    </h3>
                    <div className="mt-2">
@@ -103,11 +103,11 @@ const Modals: React.FC<ModalsProps> = ({
                </div>
              </div>

-              <div className="bg-gray-50 dark:bg-gray-700 dark:bg-opacity-10 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:space-x-3 sm:space-x-reverse">
+              <div className="bg-gray-50 px-4 py-3 dark:bg-gray-700 dark:bg-opacity-10 sm:flex sm:flex-row-reverse sm:space-x-3 sm:space-x-reverse sm:px-6">
                <Tooltip content="快捷键 Enter">
                  <button
                    type="button"
-                    className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white dark:text-opacity-80 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto sm:text-sm ${firstButtonClassName}`}
+                    className={`inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-opacity-80 sm:w-auto sm:text-sm ${firstButtonClassName}`}
                    onClick={firstButtonOnclick}
                  >
                    {firstButton}
@@ -117,7 +117,7 @@ const Modals: React.FC<ModalsProps> = ({
                <Tooltip content="快捷键 Shift + Enter">
                  <button
                    type="button"
-                    className={`mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-500 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-base font-medium text-gray-700 dark:text-white dark:text-opacity-60 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm ${
+                    className={`mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-gray-500 dark:bg-gray-800 dark:text-white dark:text-opacity-60 dark:hover:bg-gray-700 sm:mt-0 sm:w-auto sm:text-sm ${
                      secondButtonClassName ?? ''
                    }`}
                    onClick={secondButtonOnclick}
@@ -130,7 +130,7 @@ const Modals: React.FC<ModalsProps> = ({
                  <Tooltip content={`快捷键 ${thirdButtonHotkey}`}>
                    <button
                      type="button"
-                      className={`mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-500 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-base font-medium text-gray-700 dark:text-white dark:text-opacity-60 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm ${
+                      className={`mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-gray-500 dark:bg-gray-800 dark:text-white dark:text-opacity-60 dark:hover:bg-gray-700 sm:mt-0 sm:w-auto sm:text-sm ${
                        secondButtonClassName ?? ''
                      }`}
                      onClick={thirdButtonOnclick}
--- a/src/components/Phonetic/index.tsx
+++ b/src/components/Phonetic/index.tsx
@@ -7,7 +7,7 @@ export type PhoneticProps = {

 const Phonetic: React.FC<PhoneticProps> = ({ usphone, ukphone }) => {
  return (
-    <div className="pt-1 text-sm font-normal text-gray-600 dark:text-gray-400 transition-colors duration-300 text-center space-x-5">
+    <div className="space-x-5 pt-1 text-center text-sm font-normal text-gray-600 transition-colors duration-300 dark:text-gray-400">
      {usphone && usphone.length > 1 && <span>{`US: [${usphone}]`}</span>}
      {ukphone && ukphone.length > 1 && <span>{`UK: [${ukphone}]`}</span>}
    </div>
--- a/src/components/ResultScreen/ConclusionBar.tsx
+++ b/src/components/ResultScreen/ConclusionBar.tsx
@@ -25,9 +25,9 @@ const ConclusionBar = ({ mistakeLevel, mistakeCount }: ConclusionBarProps) => {
  const { icon, className, size, text } = ICON_MAPPER[mistakeLevel]

  return (
-    <div className="h-10 flex flex-row items-center">
+    <div className="flex h-10 flex-row items-center">
      <FontAwesomeIcon icon={icon as any} className={className} size={size as any} />
-      <span className="md:text-base sm:text-sm text-sm font-medium text-gray-700 ml-2 leading-10 inline-block align-middle">
+      <span className="ml-2 inline-block align-middle text-sm font-medium leading-10 text-gray-700 sm:text-sm md:text-base">
        {text(mistakeCount)}
      </span>
    </div>
--- a/src/components/ResultScreen/RemarkRing.tsx
+++ b/src/components/ResultScreen/RemarkRing.tsx
@@ -35,7 +35,7 @@ export default function RemarkRing({ remark, caption, percentage = null, size =
  return (
    <div
      className={classNames(
-        'flex-shrink-0 relative flex flex-col items-center justify-center rounded-full border-8 border-indigo-200 dark:border-gray-700 bg-transparent',
+        'relative flex flex-shrink-0 flex-col items-center justify-center rounded-full border-8 border-indigo-200 bg-transparent dark:border-gray-700',
      )}
      style={{
        width: `${size}rem`,
@@ -44,13 +44,13 @@ export default function RemarkRing({ remark, caption, percentage = null, size =
    >
      {percentage !== null && (
        <div
-          className="absolute -inset-2 rounded-full border-8 border-indigo-400 dark:border-indigo-500 bg-transparent"
+          className="absolute -inset-2 rounded-full border-8 border-indigo-400 bg-transparent dark:border-indigo-500"
          style={{ clipPath }}
          aria-hidden
        />
      )}
-      <span className="text-xl text-gray-800 dark:text-gray-300 tabular-nums">{remark}</span>
-      <span className="text-sm text-gray-600 dark:text-gray-500 font-medium">{caption}</span>
+      <span className="text-xl tabular-nums text-gray-800 dark:text-gray-300">{remark}</span>
+      <span className="text-sm font-medium text-gray-600 dark:text-gray-500">{caption}</span>
    </div>
  )
 }
--- a/src/components/ResultScreen/index.tsx
+++ b/src/components/ResultScreen/index.tsx
@@ -84,8 +84,8 @@ const ResultScreen: React.FC<ResultScreenProps> = ({
  })

  return (
-    <div className="fixed z-10 inset-0 overflow-y-auto">
-      <div className="absolute inset-0 bg-gray-300 dark:bg-gray-600 opacity-80"></div>
+    <div className="fixed inset-0 z-10 overflow-y-auto">
+      <div className="absolute inset-0 bg-gray-300 opacity-80 dark:bg-gray-600"></div>
      <Transition
        show={true}
        enter="ease-in duration-300"
@@ -95,32 +95,32 @@ const ResultScreen: React.FC<ResultScreenProps> = ({
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
-        <div className="flex items-center justify-center h-screen">
-          <div className="max-w-6xl w-[90vw] md:w-4/5 lg:w-3/5 px-10 pt-10 pb-14 card bg-white dark:bg-gray-800 rounded-3xl shadow-lg fixed flex flex-col overflow-hidden">
-            <div className="text-center font-sans font-normal text-gray-900 text-xl md:text-2xl dark:text-gray-400">
+        <div className="flex h-screen items-center justify-center">
+          <div className="card fixed flex w-[90vw] max-w-6xl flex-col overflow-hidden rounded-3xl bg-white px-10 pt-10 pb-14 shadow-lg dark:bg-gray-800 md:w-4/5 lg:w-3/5">
+            <div className="text-center font-sans text-xl font-normal text-gray-900 dark:text-gray-400 md:text-2xl">
              {wordList ? `${wordList.dictName}  第 ${wordList.chapter + 1} 章` : ' '}
            </div>
-            <div className="flex flex-row gap-2 mt-10 overflow-hidden">
-              <div className="flex flex-col gap-3 flex-grow-0 flex-shrink-0 px-4 lg:px-4 md:px-2 sm:px-1">
+            <div className="mt-10 flex flex-row gap-2 overflow-hidden">
+              <div className="flex flex-shrink-0 flex-grow-0 flex-col gap-3 px-4 sm:px-1 md:px-2 lg:px-4">
                <RemarkRing remark={`${correctRate}%`} caption="正确率" percentage={correctRate} />
                <RemarkRing remark={timeString} caption="章节耗时" />
                <RemarkRing remark={`${speedInfo.speed}个/s`} caption="输入字符" />
              </div>
-              <div className="rounded-xl bg-indigo-50 dark:bg-gray-700 flex-1 mx-6 overflow-visible z-10">
-                <div className="flex flex-row gap-4 flex-wrap overflow-y-auto overflow-x-hidden customized-scrollbar h-80 content-start ml-8 mr-1 pr-7 pt-9 z-20">
+              <div className="z-10 mx-6 flex-1 overflow-visible rounded-xl bg-indigo-50 dark:bg-gray-700">
+                <div className="customized-scrollbar z-20 ml-8 mr-1 flex h-80 flex-row flex-wrap content-start gap-4 overflow-y-auto overflow-x-hidden pr-7 pt-9">
                  {incorrectInfo.map((info) => (
                    <WordChip key={info.word} mistake={info} />
                  ))}
                </div>
-                <div className="bg-indigo-200 dark:bg-indigo-400 w-full rounded-b-xl flex flex-row justify-start align-center px-4">
+                <div className="align-center flex w-full flex-row justify-start rounded-b-xl bg-indigo-200 px-4 dark:bg-indigo-400">
                  <ConclusionBar mistakeLevel={mistakeLevel} mistakeCount={incorrectInfo.length} />
                </div>
              </div>
            </div>
-            <div className="w-full flex justify-center mt-10 gap-5 px-5 text-xl">
+            <div className="mt-10 flex w-full justify-center gap-5 px-5 text-xl">
              <Tooltip content="快捷键：shift + enter">
                <button
-                  className="rounded-md overflow-hidden bg-white dark:bg-gray-600 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 hover:bg-indigo-200 px-6 py-2 h-12 md:text-base sm:text-sm text-sm font-normal text-gray-700 transition-colors duration-100 border-solid border-2 border-gray-300"
+                  className="h-12 overflow-hidden rounded-md border-2 border-solid border-gray-300 bg-white px-6 py-2 text-sm font-normal text-gray-700 transition-colors duration-100 hover:bg-indigo-200 dark:border-gray-700 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700 sm:text-sm md:text-base"
                  onClick={invisibleButtonHandler}
                >
                  默写本章节
@@ -128,7 +128,7 @@ const ResultScreen: React.FC<ResultScreenProps> = ({
              </Tooltip>
              <Tooltip content="快捷键：space">
                <button
-                  className="rounded-md overflow-hidden bg-white dark:bg-gray-600 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 hover:bg-indigo-200 px-6 py-2 h-12 md:text-base sm:text-sm text-sm font-normal text-gray-700 transition-colors duration-100 border-solid border-2 border-gray-300"
+                  className="h-12 overflow-hidden rounded-md border-2 border-solid border-gray-300 bg-white px-6 py-2 text-sm font-normal text-gray-700 transition-colors duration-100 hover:bg-indigo-200 dark:border-gray-700 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700 sm:text-sm md:text-base"
                  onClick={repeatButtonHandler}
                >
                  重复本章节
@@ -136,7 +136,7 @@ const ResultScreen: React.FC<ResultScreenProps> = ({
              </Tooltip>
              <Tooltip content="快捷键：enter">
                <button
-                  className={`rounded-md overflow-hidden bg-indigo-400 hover:bg-indigo-600 px-6 py-2 h-12 md:text-base sm:text-sm text-sm font-bold text-white transition-colors duration-100 ${
+                  className={`h-12 overflow-hidden rounded-md bg-indigo-400 px-6 py-2 text-sm font-bold text-white transition-colors duration-100 hover:bg-indigo-600 sm:text-sm md:text-base ${
                    isLastChapter ? 'cursor-not-allowed opacity-50' : ''
                  }`}
                  onClick={nextButtonHandler}
--- a/src/components/Speed/InfoBox.tsx
+++ b/src/components/Speed/InfoBox.tsx
@@ -3,10 +3,10 @@ import React from 'react'
 const InfoBox: React.FC<InfoBoxProps> = ({ info, description }) => {
  return (
    <div className="flex flex-1 flex-col items-center justify-center">
-      <span className="font-bold w-4/5 text-center text-xl text-gray-600 dark:text-gray-400 transition-colors duration-300 pb-2 border-b">
+      <span className="w-4/5 border-b pb-2 text-center text-xl font-bold text-gray-600 transition-colors duration-300 dark:text-gray-400">
        {info}
      </span>
-      <span className="text-xs pt-2 dark:text-gray-300 transition-colors duration-300">{description}</span>
+      <span className="pt-2 text-xs transition-colors duration-300 dark:text-gray-300">{description}</span>
    </div>
  )
 }
--- a/src/components/Speed/index.tsx
+++ b/src/components/Speed/index.tsx
@@ -19,7 +19,7 @@ const Speed: React.FC<SpeedProps> = ({ correctCount, inputCount, isStart, setSpe
  }, [speed, minutes, seconds, setSpeedInfo])

  return (
-    <div className="w-3/5 flex bg-white dark:bg-gray-800 transition-colors duration-300 mt-auto rounded-large card p-4 py-10 opacity-45">
+    <div className="card opacity-45 mt-auto flex w-3/5 rounded-large bg-white p-4 py-10 transition-colors duration-300 dark:bg-gray-800">
      <InfoBox info={`${minutesStirng}:${secondsStirng}`} description="时间" />
      <InfoBox info={inputCount + ''} description="输入数" />
      <InfoBox info={speed + ''} description="速度" />
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -17,9 +17,9 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({ children, co
      <div
        className={`${
          visible ? 'opacity-100' : 'opacity-0'
-        } ${placementClasses} absolute left-1/2 transform -translate-x-1/2 flex items-center justify-center pointer-events-none transition-opacity`}
+        } ${placementClasses} pointer-events-none absolute left-1/2 flex -translate-x-1/2 transform items-center justify-center transition-opacity`}
      >
-        <span className="py-1 px-2 bg-white dark:bg-gray-700 rounded-lg shadow-md text-gray-500 dark:text-gray-300 text-xs whitespace-nowrap">
+        <span className="whitespace-nowrap rounded-lg bg-white py-1 px-2 text-xs text-gray-500 shadow-md dark:bg-gray-700 dark:text-gray-300">
          {content}
        </span>
      </div>
--- a/src/components/Translation/index.tsx
+++ b/src/components/Translation/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'

 const Translation: React.FC<TranslationProps> = ({ trans }) => {
  return (
-    <div className="pt-5 pb-4 text-lg font-sans dark:text-white dark:text-opacity-80 transition-colors duration-300 max-w-4xl">{trans}</div>
+    <div className="max-w-4xl pt-5 pb-4 font-sans text-lg transition-colors duration-300 dark:text-white dark:text-opacity-80">{trans}</div>
  )
 }

--- a/src/components/Word/Letter/index.tsx
+++ b/src/components/Word/Letter/index.tsx
@@ -19,8 +19,8 @@ const stateClassNameMap: Record<string, Record<LetterState, string>> = {

 const Letter: React.FC<LetterProps> = ({ letter, state = 'normal', visible }) => (
  <span
-    className={`m-0 p-0 text-5xl font-mono font-normal ${
-      stateClassNameMap[((letter === EXPLICIT_SPACE) as unknown) as string][state]
+    className={`m-0 p-0 font-mono text-5xl font-normal ${
+      stateClassNameMap[(letter === EXPLICIT_SPACE) as unknown as string][state]
    } pr-0.8 duration-0 dark:text-opacity-80`}
  >
    {visible ? letter : '_'}
--- a/src/index.css
+++ b/src/index.css
@@ -52,21 +52,21 @@ body,

@layer components {
  .word-chip {
-    @apply border-indigo-400 dark:border-slate-800 border-solid border-2
-      rounded-md bg-white
-    dark:bg-slate-700 hover:bg-indigo-100 dark:hover:bg-slate-600
-      w-auto h-10 md:h-12 px-2 md:px-5 py-0.5 md:py-1 flex flex-row
-      cursor-pointer transition-colors duration-100
-      items-center justify-center;
+    @apply flex h-10 w-auto cursor-pointer
+      flex-row items-center
+    justify-center rounded-md border-2
+      border-solid border-indigo-400 bg-white px-2 py-0.5 transition-colors duration-100 hover:bg-indigo-100 dark:border-slate-800
+      dark:bg-slate-700 dark:hover:bg-slate-600 md:h-12
+      md:px-5 md:py-1;
  }

  .word-chip > span {
-    @apply font-mono font-light text-gray-600 dark:text-gray-300 text-2xl md:text-3xl;
+    @apply font-mono text-2xl font-light text-gray-600 dark:text-gray-300 md:text-3xl;
  }

  .word-chip-tooltip {
-    @apply flex items-center justify-center pointer-events-none py-1 px-2
-      bg-white dark:bg-gray-800 rounded-lg shadow-md text-gray-500
-      dark:text-gray-300 text-xs whitespace-nowrap;
+    @apply pointer-events-none flex items-center justify-center whitespace-nowrap rounded-lg
+      bg-white py-1 px-2 text-xs text-gray-500
+      shadow-md dark:bg-gray-800 dark:text-gray-300;
  }
 }
--- a/src/pages/Gallery/ChapterButton.tsx
+++ b/src/pages/Gallery/ChapterButton.tsx
@@ -15,14 +15,14 @@ export const ChapterButton: React.FC<ChapterButtonProps> = ({ index, selected, w
  return (
    <button
      ref={buttonRef}
-      className="relative p-4 w-36 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-10 border border-gray-300 dark:border-gray-500 shadow-lg rounded-md text-left overflow-hidden focus:outline-none"
+      className="relative w-36 overflow-hidden rounded-md border border-gray-300 bg-gray-50 p-4 text-left shadow-lg focus:outline-none dark:border-gray-500 dark:bg-gray-700 dark:bg-opacity-10"
      onClick={onClick}
    >
-      <p className="text-lg text-gray-800 dark:text-white dark:text-opacity-80 w-full">Chapter {index + 1}</p>
+      <p className="w-full text-lg text-gray-800 dark:text-white dark:text-opacity-80">Chapter {index + 1}</p>
      <p className="text-sm font-bold text-gray-600 dark:text-white dark:text-opacity-60">{wordCount} 词</p>
      {selected ? (
        <FontAwesomeIcon
-          className="absolute -right-4 -bottom-4 text-6xl text-green-500 dark:text-green-300 opacity-60"
+          className="absolute -right-4 -bottom-4 text-6xl text-green-500 opacity-60 dark:text-green-300"
          icon={['fas', 'check-circle']}
          fixedWidth
        />
--- a/src/pages/Gallery/ChapterGroup.tsx
+++ b/src/pages/Gallery/ChapterGroup.tsx
@@ -7,7 +7,7 @@ const ChapterGroup: React.FC<ChapterGroupProps> = ({ totalWords }) => {
  const [selectedChapter, setSelectedChapter] = useSelectedChapter()
  const chapterCount = Math.ceil(totalWords / 20)
  return (
-    <main className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mr-4">
+    <main className="mr-4 grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      {range(chapterCount).map((index) =>
        index + 1 === chapterCount ? (
          <ChapterButton
--- a/src/pages/Gallery/DictionaryCard.tsx
+++ b/src/pages/Gallery/DictionaryCard.tsx
@@ -19,7 +19,7 @@ const DictionaryCard: React.FC<DictionaryCardProps> = ({ dictionary }) => {
  return (
    <button
      ref={buttonRef}
-      className="relative p-4 w-48 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-10 border border-gray-300 dark:border-gray-500 shadow-lg rounded-md text-left overflow-hidden focus:outline-none "
+      className="relative w-48 overflow-hidden rounded-md border border-gray-300 bg-gray-50 p-4 text-left shadow-lg focus:outline-none dark:border-gray-500 dark:bg-gray-700 dark:bg-opacity-10 "
      onClick={setDictionary.bind(null, dictionary.id)}
    >
      <p className="mb-1 text-xl text-gray-800 dark:text-white dark:text-opacity-80">{dictionary.name}</p>
@@ -27,7 +27,7 @@ const DictionaryCard: React.FC<DictionaryCardProps> = ({ dictionary }) => {
      <p className="text-sm font-bold text-gray-600 dark:text-white dark:text-opacity-60">{dictionary.length} 词</p>
      {selectedDictionary.id === dictionary.id ? (
        <FontAwesomeIcon
-          className="absolute -right-4 -bottom-4 text-6xl text-green-500 dark:text-green-300 opacity-60"
+          className="absolute -right-4 -bottom-4 text-6xl text-green-500 opacity-60 dark:text-green-300"
          icon={['fas', 'check-circle']}
          fixedWidth
        />
--- a/src/pages/Gallery/DictionaryGroup.tsx
+++ b/src/pages/Gallery/DictionaryGroup.tsx
@@ -5,7 +5,7 @@ import DictionaryCard from './DictionaryCard'
 const DictionaryGroup: React.FC<DictionaryGroupProps> = ({ title, dictionaries }) => {
  return (
    <section className="mb-4 mr-1">
-      <h3 className="sticky top-0 pb-2 text-sm font-bold text-gray-600 z-50 bg-indigo-50 dark:bg-slate-800 dark:text-white dark:text-opacity-60">
+      <h3 className="sticky top-0 z-50 bg-indigo-50 pb-2 text-sm font-bold text-gray-600 dark:bg-slate-800 dark:text-white dark:text-opacity-60">
        {title}
      </h3>
      <main className="grid gap-4 rounded-md sm:grid-cols-1 md:grid-cols-2">
--- a/src/pages/Gallery/index.tsx
+++ b/src/pages/Gallery/index.tsx
@@ -22,27 +22,27 @@ const GalleryPage: React.FC = () => {
    <Layout>
      <Header>
        <Tooltip content="快捷键 Enter or Esc">
-          <NavLink className="bg-indigo-400 text-white dark:text-opacity-80 text-lg px-6 py-1 rounded-lg focus:outline-none" to="/">
+          <NavLink className="rounded-lg bg-indigo-400 px-6 py-1 text-lg text-white focus:outline-none dark:text-opacity-80" to="/">
            完成选择
          </NavLink>
        </Tooltip>
      </Header>
      <div className="mt-auto mb-auto flex w-auto space-x-4 overflow-y-auto">
-        <div className="bg-indigo-50 dark:bg-slate-800 rounded-lg p-6 space-y-2 overflow-y-auto flex flex-col">
-          <h2 className="sticky top-0 mb-2 font-bold text-lg text-gray-700 dark:text-white dark:text-opacity-70 text-shadow z-10">
+        <div className="flex flex-col space-y-2 overflow-y-auto rounded-lg bg-indigo-50 p-6 dark:bg-slate-800">
+          <h2 className="text-shadow sticky top-0 z-10 mb-2 text-lg font-bold text-gray-700 dark:text-white dark:text-opacity-70">
            词典选择
          </h2>
-          <div className="overflow-y-auto customized-scrollbar">
+          <div className="customized-scrollbar overflow-y-auto">
            {groups.map(([name, items]) => (
              <DictionaryGroup key={name} title={name} dictionaries={items} />
            ))}
          </div>
        </div>
-        <div className="p-6 overflow-y-auto bg-indigo-50 dark:bg-slate-800 rounded-lg flex flex-col">
-          <h2 className="sticky top-0 mb-4 font-bold text-lg text-gray-700 dark:text-white dark:text-opacity-70 text-shadow z-10">
+        <div className="flex flex-col overflow-y-auto rounded-lg bg-indigo-50 p-6 dark:bg-slate-800">
+          <h2 className="text-shadow sticky top-0 z-10 mb-4 text-lg font-bold text-gray-700 dark:text-white dark:text-opacity-70">
            章节选择
          </h2>
-          <div className="overflow-y-auto customized-scrollbar">
+          <div className="customized-scrollbar overflow-y-auto">
            <ChapterGroup totalWords={selectedDictionary.length} />
          </div>
        </div>
--- a/src/pages/Typing/Progress/index.tsx
+++ b/src/pages/Typing/Progress/index.tsx
@@ -23,11 +23,11 @@ const Progress: React.FC<ProgressProps> = ({ order, wordsLength }) => {
  }, [order, wordsLength])

  return (
-    <div className="relative pt-1 w-1/4 mt-auto">
-      <div className="overflow-hidden h-2 mb-4 text-xs flex rounded-large bg-indigo-100 dark:bg-indigo-200 transition-all duration-300">
+    <div className="relative mt-auto w-1/4 pt-1">
+      <div className="mb-4 flex h-2 overflow-hidden rounded-large bg-indigo-100 text-xs transition-all duration-300 dark:bg-indigo-200">
        <div
          style={{ width: `${progress}%` }}
-          className={`rounded-large shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center transition-all duration-300 ${
+          className={`flex flex-col justify-center whitespace-nowrap rounded-large text-center text-white shadow-none transition-all duration-300 ${
            colorSwitcher[phase] ?? 'bg-indigo-200 dark:bg-indigo-300'
          }`}
        ></div>
--- a/src/pages/Typing/PronunciationSwitcher/index.tsx
+++ b/src/pages/Typing/PronunciationSwitcher/index.tsx
@@ -8,7 +8,7 @@ const PronunciationSwitcher: React.FC<PronunciationSwitcherPropsType> = ({ state
    <div className="flex items-center justify-center space-x-3">
      <div>
        <select
-          className="dark:bg-gray-800 dark:text-white dark:text-opacity-60 transition-colors duration-300 cursor-pointer focus:outline-none"
+          className="cursor-pointer transition-colors duration-300 focus:outline-none dark:bg-gray-800 dark:text-white dark:text-opacity-60"
          value={state}
          onChange={(e) => {
            changePronunciationState(e.target.value)
--- a/src/pages/Typing/Switcher/index.tsx
+++ b/src/pages/Typing/Switcher/index.tsx
@@ -110,7 +110,7 @@ const Switcher: React.FC<SwitcherPropsType> = ({ state, dispatch }) => {
      </Tooltip>
      <Tooltip content="开关深色模式（Ctrl + D）">
        <button
-          className={`text-indigo-400 text-lg focus:outline-none`}
+          className={`text-lg text-indigo-400 focus:outline-none`}
          onClick={(e) => {
            dispatch('darkMode')
            e.currentTarget.blur()
--- a/src/pages/Typing/index.tsx
+++ b/src/pages/Typing/index.tsx
@@ -215,7 +215,7 @@ const App: React.FC = () => {
          <Header>
            <Tooltip content="词典章节切换">
              <NavLink
-                className="text-lg px-4 py-1 rounded-lg transition-colors duration-300 ease-in-out focus:outline-none dark:text-white dark:text-opacity-60 hover:bg-indigo-400 hover:text-white dark:hover:text-opacity-100 block"
+                className="block rounded-lg px-4 py-1 text-lg transition-colors duration-300 ease-in-out hover:bg-indigo-400 hover:text-white focus:outline-none dark:text-white dark:text-opacity-60 dark:hover:text-opacity-100"
                to="/gallery"
              >
                {wordList.dictName} 第 {wordList.chapter + 1} 章
@@ -229,7 +229,7 @@ const App: React.FC = () => {
              <button
                className={`${
                  isStart ? 'bg-gray-300 dark:bg-gray-700' : 'bg-indigo-400'
-                }  text-white dark:text-opacity-80 transition-colors duration-300 text-lg w-20 px-6 py-1 rounded-lg focus:outline-none flex items-center justify-center`}
+                }  flex w-20 items-center justify-center rounded-lg px-6 py-1 text-lg text-white transition-colors duration-300 focus:outline-none dark:text-opacity-80`}
                onClick={(e) => {
                  setIsStart((isStart) => !isStart)
                }}
@@ -239,9 +239,9 @@ const App: React.FC = () => {
            </Tooltip>
          </Header>
          <Main>
-            <div className="container h-full relative flex mx-auto flex-col items-center">
+            <div className="container relative mx-auto flex h-full flex-col items-center">
              <div className="h-1/3"></div>
-              {!isStart && <h3 className="pb-4 text-xl text-gray-600 dark:text-gray-50 animate-pulse">按任意键开始</h3>}
+              {!isStart && <h3 className="animate-pulse pb-4 text-xl text-gray-600 dark:text-gray-50">按任意键开始</h3>}
              {isStart && (
                <div className="flex flex-col items-center">
                  <Word
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
@@ -28,9 +24,7 @@
      "@/resources/*": ["resources/*"],
      "@/store/*": ["store/*"],
      "@/utils/*": ["utils/*"]
-    },
+    }
  },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -1877,6 +1877,11 @@ ansi-regex@^5.0.0:
  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==

+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
 ansi-styles@^3.2.1:
  version "3.2.1"
  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -1891,6 +1896,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
  dependencies:
    color-convert "^2.0.1"

+ansi-styles@^6.0.0:
+  version "6.2.1"
+  resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
 anymatch@~3.1.2:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -2141,7 +2151,7 @@ brace-expansion@^1.1.7:
    balanced-match "^1.0.0"
    concat-map "0.0.1"

-braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
+braces@^3.0.2, braces@~3.0.2:
  version "3.0.2"
  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -2252,11 +2262,6 @@ chokidar@^3.5.3:
  optionalDependencies:
    fsevents "~2.3.2"

-ci-info@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
-  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
-
 classnames@^2.3.2:
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
@@ -2282,6 +2287,14 @@ cli-truncate@^2.1.0:
    slice-ansi "^3.0.0"
    string-width "^4.2.0"

+cli-truncate@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/cli-truncate/-/cli-truncate-3.1.0.tgz#3f23ab12535e3d73e839bb43e73c9de487db1389"
+  integrity sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^5.0.0"
+
 cliui@^7.0.2:
  version "7.0.4"
  resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
@@ -2336,15 +2349,20 @@ colorette@^1.2.1:
  resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==

-commander@^6.0.0, commander@^6.2.0:
+colorette@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.npmmirror.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
+  integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
+
+commander@^6.0.0:
  version "6.2.1"
  resolved "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==

-compare-versions@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62"
-  integrity sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==
+commander@^9.4.1:
+  version "9.5.0"
+  resolved "https://registry.npmmirror.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==

 concat-map@0.0.1:
  version "0.0.1"
@@ -2416,7 +2434,7 @@ cross-env@^7.0.3:
  dependencies:
    cross-spawn "^7.0.1"

-cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2:
+cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
  version "7.0.3"
  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -2487,7 +2505,7 @@ debug@^3.2.7:
  dependencies:
    ms "^2.1.1"

-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0:
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
  version "4.3.1"
  resolved "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
@@ -2506,11 +2524,6 @@ decode-uri-component@^0.2.0:
  resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=

-dedent@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
-  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
-
 deep-equal@^2.0.5:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.0.tgz#5caeace9c781028b9ff459f33b779346637c43e6"
@@ -2633,6 +2646,11 @@ duplexer@^0.1.2:
  resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==

+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
 ejs@^3.1.5:
  version "3.1.5"
  resolved "https://registry.npmjs.org/ejs/-/ejs-3.1.5.tgz#aed723844dc20acb4b170cd9ab1017e476a0d93b"
@@ -2660,14 +2678,7 @@ emoji-regex@^9.2.2:
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==

-end-of-stream@^1.1.0:
-  version "1.4.4"
-  resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-enquirer@^2.3.5, enquirer@^2.3.6:
+enquirer@^2.3.5:
  version "2.3.6"
  resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
@@ -3112,20 +3123,20 @@ esutils@^2.0.2:
  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==

-execa@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
-  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
+execa@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.npmmirror.com/execa/-/execa-6.1.0.tgz#cea16dee211ff011246556388effa0818394fb20"
+  integrity sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==
  dependencies:
-    cross-spawn "^7.0.0"
-    get-stream "^5.0.0"
-    human-signals "^1.1.1"
-    is-stream "^2.0.0"
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.1"
+    human-signals "^3.0.1"
+    is-stream "^3.0.0"
    merge-stream "^2.0.0"
-    npm-run-path "^4.0.0"
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-    strip-final-newline "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^3.0.7"
+    strip-final-newline "^3.0.0"

 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
@@ -3175,13 +3186,6 @@ fastq@^1.6.0:
  dependencies:
    reusify "^1.0.4"

-figures@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
-  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
 file-entry-cache@^6.0.0:
  version "6.0.0"
  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.0.tgz#7921a89c391c6d93efec2169ac6bf300c527ea0a"
@@ -3203,21 +3207,6 @@ fill-range@^7.0.1:
  dependencies:
    to-regex-range "^5.0.1"

-find-up@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
-  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
-  dependencies:
-    locate-path "^6.0.0"
-    path-exists "^4.0.0"
-
-find-versions@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/find-versions/-/find-versions-4.0.0.tgz#3c57e573bf97769b8cb8df16934b627915da4965"
-  integrity sha512-wgpWy002tA+wgmO27buH/9KzyEOQnKsG/R0yrcjPT9BOFm0zRBVQbZ95nRGXWMywS8YR5knRbpohio0bcJABxQ==
-  dependencies:
-    semver-regex "^3.1.2"
-
 flat-cache@^3.0.4:
  version "3.0.4"
  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -3316,17 +3305,10 @@ get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
    has "^1.0.3"
    has-symbols "^1.0.3"

-get-own-enumerable-property-symbols@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
-  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
-
-get-stream@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
-  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
-  dependencies:
-    pump "^3.0.0"
+get-stream@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==

 get-symbol-description@^1.0.0:
  version "1.0.0"
@@ -3514,26 +3496,15 @@ html-tags@^3.1.0:
  resolved "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==

-human-signals@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
-  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+human-signals@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/human-signals/-/human-signals-3.0.1.tgz#c740920859dafa50e5a3222da9d3bf4bb0e5eef5"
+  integrity sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==

-husky@^4.3.8:
-  version "4.3.8"
-  resolved "https://registry.npmjs.org/husky/-/husky-4.3.8.tgz#31144060be963fd6850e5cc8f019a1dfe194296d"
-  integrity sha512-LCqqsB0PzJQ/AlCgfrfzRe3e3+NvmefAdKQhRYpxS4u6clblBoDdzzvHi8fmxKRzvMxPY/1WZWzomPZww0Anow==
-  dependencies:
-    chalk "^4.0.0"
-    ci-info "^2.0.0"
-    compare-versions "^3.6.0"
-    cosmiconfig "^7.0.0"
-    find-versions "^4.0.0"
-    opencollective-postinstall "^2.0.2"
-    pkg-dir "^5.0.0"
-    please-upgrade-node "^3.2.0"
-    slash "^3.0.0"
-    which-pm-runs "^1.0.0"
+husky@^8.0.0:
+  version "8.0.3"
+  resolved "https://registry.npmmirror.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
+  integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==

 hyphenate-style-name@^1.0.2:
  version "1.0.4"
@@ -3702,6 +3673,11 @@ is-fullwidth-code-point@^3.0.0:
  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==

+is-fullwidth-code-point@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
+  integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
  version "4.0.1"
  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
@@ -3743,11 +3719,6 @@ is-number@^7.0.0:
  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==

-is-obj@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
-  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
-
 is-regex@^1.1.1:
  version "1.1.1"
  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
@@ -3763,11 +3734,6 @@ is-regex@^1.1.4:
    call-bind "^1.0.2"
    has-tostringtag "^1.0.0"

-is-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
-  integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
-
 is-set@^2.0.1, is-set@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
@@ -3780,10 +3746,10 @@ is-shared-array-buffer@^1.0.2:
  dependencies:
    call-bind "^1.0.2"

-is-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
-  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
+is-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
+  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==

 is-string@^1.0.5:
  version "1.0.5"
@@ -3999,7 +3965,7 @@ levn@^0.4.1:
    prelude-ls "^1.2.1"
    type-check "~0.4.0"

-lilconfig@^2.0.5, lilconfig@^2.0.6:
+lilconfig@2.0.6, lilconfig@^2.0.5, lilconfig@^2.0.6:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
@@ -4009,49 +3975,39 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=

-lint-staged@^10.5.3:
-  version "10.5.3"
-  resolved "https://registry.npmjs.org/lint-staged/-/lint-staged-10.5.3.tgz#c682838b3eadd4c864d1022da05daa0912fb1da5"
-  integrity sha512-TanwFfuqUBLufxCc3RUtFEkFraSPNR3WzWcGF39R3f2J7S9+iF9W0KTVLfSy09lYGmZS5NDCxjNvhGMSJyFCWg==
+lint-staged@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.npmmirror.com/lint-staged/-/lint-staged-13.1.2.tgz#443636a0cfd834d5518d57d228130dc04c83d6fb"
+  integrity sha512-K9b4FPbWkpnupvK3WXZLbgu9pchUJ6N7TtVZjbaPsoizkqFUDkUReUL25xdrCljJs7uLUF3tZ7nVPeo/6lp+6w==
  dependencies:
-    chalk "^4.1.0"
-    cli-truncate "^2.1.0"
-    commander "^6.2.0"
-    cosmiconfig "^7.0.0"
-    debug "^4.2.0"
-    dedent "^0.7.0"
-    enquirer "^2.3.6"
-    execa "^4.1.0"
-    listr2 "^3.2.2"
-    log-symbols "^4.0.0"
-    micromatch "^4.0.2"
+    cli-truncate "^3.1.0"
+    colorette "^2.0.19"
+    commander "^9.4.1"
+    debug "^4.3.4"
+    execa "^6.1.0"
+    lilconfig "2.0.6"
+    listr2 "^5.0.5"
+    micromatch "^4.0.5"
    normalize-path "^3.0.0"
-    please-upgrade-node "^3.2.0"
-    string-argv "0.3.1"
-    stringify-object "^3.3.0"
+    object-inspect "^1.12.2"
+    pidtree "^0.6.0"
+    string-argv "^0.3.1"
+    yaml "^2.1.3"

-listr2@^3.2.2:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/listr2/-/listr2-3.3.0.tgz#fab51211e4152d88bab7d91e4f7f896b0d9e5ba1"
-  integrity sha512-G9IFI/m65icgVlifS0wMQnvn35/8VJGzEb3crpE4NnaegQYQOn/wP7yqi9TTJQ/eoxme4UaPbffBK1XqKP/DOg==
+listr2@^5.0.5:
+  version "5.0.7"
+  resolved "https://registry.npmmirror.com/listr2/-/listr2-5.0.7.tgz#de69ccc4caf6bea7da03c74f7a2ffecf3904bd53"
+  integrity sha512-MD+qXHPmtivrHIDRwPYdfNkrzqDiuaKU/rfBcec3WMyMF3xylQj3jMq344OtvQxz7zaCFViRAeqlr2AFhPvXHw==
  dependencies:
-    chalk "^4.1.0"
    cli-truncate "^2.1.0"
-    figures "^3.2.0"
-    indent-string "^4.0.0"
+    colorette "^2.0.19"
    log-update "^4.0.0"
    p-map "^4.0.0"
-    rxjs "^6.6.3"
+    rfdc "^1.3.0"
+    rxjs "^7.8.0"
    through "^2.3.8"
    wrap-ansi "^7.0.0"

-locate-path@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
-  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
-  dependencies:
-    p-locate "^5.0.0"
-
 lodash.debounce@^4.0.8:
  version "4.0.8"
  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -4072,13 +4028,6 @@ lodash@^4.17.21:
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

-log-symbols@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
-  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
-  dependencies:
-    chalk "^4.0.0"
-
 log-update@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"
@@ -4137,14 +4086,6 @@ merge2@^1.3.0, merge2@^1.4.1:
  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==

-micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
-
 micromatch@^4.0.4, micromatch@^4.0.5:
  version "4.0.5"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
@@ -4158,6 +4099,11 @@ mimic-fn@^2.1.0:
  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==

+mimic-fn@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
+  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
+
 min-indent@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -4283,12 +4229,12 @@ normalize-range@^0.1.2:
  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=

-npm-run-path@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
-  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+npm-run-path@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
+  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
  dependencies:
-    path-key "^3.0.0"
+    path-key "^4.0.0"

 num2fraction@^1.2.2:
  version "1.2.2"
@@ -4388,7 +4334,7 @@ object.values@^1.1.6:
    define-properties "^1.1.4"
    es-abstract "^1.20.4"

-once@^1.3.0, once@^1.3.1, once@^1.4.0:
+once@^1.3.0:
  version "1.4.0"
  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -4402,6 +4348,13 @@ onetime@^5.1.0:
  dependencies:
    mimic-fn "^2.1.0"

+onetime@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmmirror.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
+  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
+  dependencies:
+    mimic-fn "^4.0.0"
+
 open@^7.3.1:
  version "7.3.1"
  resolved "https://registry.npmjs.org/open/-/open-7.3.1.tgz#111119cb919ca1acd988f49685c4fdd0f4755356"
@@ -4410,11 +4363,6 @@ open@^7.3.1:
    is-docker "^2.0.0"
    is-wsl "^2.1.1"

-opencollective-postinstall@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
-  integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
-
 optionator@^0.9.1:
  version "0.9.1"
  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
@@ -4427,20 +4375,6 @@ optionator@^0.9.1:
    type-check "^0.4.0"
    word-wrap "^1.2.3"

-p-limit@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
-  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
-  dependencies:
-    yocto-queue "^0.1.0"
-
-p-locate@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
-  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
-  dependencies:
-    p-limit "^3.0.2"
-
 p-map@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
@@ -4465,21 +4399,21 @@ parse-json@^5.0.0:
    json-parse-even-better-errors "^2.3.0"
    lines-and-columns "^1.1.6"

-path-exists@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
-  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
-
 path-is-absolute@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=

-path-key@^3.0.0, path-key@^3.1.0:
+path-key@^3.1.0:
  version "3.1.1"
  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==

+path-key@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
+  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
+
 path-parse@^1.0.6:
  version "1.0.6"
  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
@@ -4512,7 +4446,7 @@ picocolors@^1.0.0:
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==

-picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
+picomatch@^2.0.4, picomatch@^2.2.1:
  version "2.2.2"
  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -4522,25 +4456,16 @@ picomatch@^2.3.1:
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==

+pidtree@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.npmmirror.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
+  integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
+
 pify@^2.3.0:
  version "2.3.0"
  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=

-pkg-dir@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz#a02d6aebe6ba133a928f74aec20bafdfe6b8e760"
-  integrity sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==
-  dependencies:
-    find-up "^5.0.0"
-
-please-upgrade-node@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
-  integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
-  dependencies:
-    semver-compare "^1.0.0"
-
 postcss-functions@^3:
  version "3.0.0"
  resolved "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
@@ -4679,10 +4604,15 @@ prettier-linter-helpers@^1.0.0:
  dependencies:
    fast-diff "^1.1.2"

-prettier@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
-  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
+prettier-plugin-tailwindcss@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.npmmirror.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.3.tgz#b68a1de10056fc84055426af132c2697bea0955c"
+  integrity sha512-s2N5Dh7Ao5KTV1mao5ZBnn8EKtUcDPJEkGViZIjI0Ij9TTI5zgTz4IHOxW33jOdjHKa8CSjM88scelUiC5TNRQ==
+
+prettier@^2.8.4:
+  version "2.8.4"
+  resolved "https://registry.npmmirror.com/prettier/-/prettier-2.8.4.tgz#34dd2595629bfbb79d344ac4a91ff948694463c3"
+  integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==

 pretty-format@^26.0.0, pretty-format@^26.6.2:
  version "26.6.2"
@@ -4729,14 +4659,6 @@ prop-types@^15.8.1:
    object-assign "^4.1.1"
    react-is "^16.13.1"

-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
 punycode@^2.1.0:
  version "2.1.1"
  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -5034,6 +4956,11 @@ reusify@^1.0.4:
  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==

+rfdc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
+  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+
 rimraf@^3.0.2:
  version "3.0.2"
  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -5067,12 +4994,12 @@ run-parallel@^1.1.9:
  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
  integrity sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==

-rxjs@^6.6.3:
-  version "6.6.3"
-  resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
-  integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==
+rxjs@^7.8.0:
+  version "7.8.0"
+  resolved "https://registry.npmmirror.com/rxjs/-/rxjs-7.8.0.tgz#90a938862a82888ff4c7359811a595e14e1e09a4"
+  integrity sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==
  dependencies:
-    tslib "^1.9.0"
+    tslib "^2.1.0"

 safe-buffer@~5.1.1:
  version "5.1.2"
@@ -5101,16 +5028,6 @@ screenfull@^5.1.0:
  resolved "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz#85c13c70f4ead4c1b8a935c70010dfdcd2c0e5c8"
  integrity sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA==

-semver-compare@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
-  integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
-
-semver-regex@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.2.tgz#34b4c0d361eef262e07199dbef316d0f2ab11807"
-  integrity sha512-bXWyL6EAKOJa81XG1OZ/Yyuq+oT0b2YLlxx7c+mrdYPaPbnj6WgVULXhinMIeZGufuUBu/eVRqXEhiv4imfwxA==
-
 semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
  version "6.3.0"
  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -5161,6 +5078,11 @@ signal-exit@^3.0.2:
  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==

+signal-exit@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
 simple-swizzle@^0.2.2:
  version "0.2.2"
  resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -5191,6 +5113,14 @@ slice-ansi@^4.0.0:
    astral-regex "^2.0.0"
    is-fullwidth-code-point "^3.0.0"

+slice-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/slice-ansi/-/slice-ansi-5.0.0.tgz#b73063c57aa96f9cd881654b15294d95d285c42a"
+  integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
+  dependencies:
+    ansi-styles "^6.0.0"
+    is-fullwidth-code-point "^4.0.0"
+
 source-map-explorer@^2.5.2:
  version "2.5.2"
  resolved "https://registry.npmjs.org/source-map-explorer/-/source-map-explorer-2.5.2.tgz#857cab5dd9d1d7175e9c5c2739dc9ccfb99f2dc5"
@@ -5283,9 +5213,9 @@ stop-iteration-iterator@^1.0.0:
  dependencies:
    internal-slot "^1.0.4"

-string-argv@0.3.1:
+string-argv@^0.3.1:
  version "0.3.1"
-  resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
+  resolved "https://registry.npmmirror.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==

 string-natural-compare@^3.0.1:
@@ -5302,6 +5232,15 @@ string-width@^4.1.0, string-width@^4.2.0:
    is-fullwidth-code-point "^3.0.0"
    strip-ansi "^6.0.0"

+string-width@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
 string.prototype.matchall@^4.0.8:
  version "4.0.8"
  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
@@ -5350,15 +5289,6 @@ string.prototype.trimstart@^1.0.6:
    define-properties "^1.1.4"
    es-abstract "^1.20.4"

-stringify-object@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
-  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
-  dependencies:
-    get-own-enumerable-property-symbols "^3.0.0"
-    is-obj "^1.0.1"
-    is-regexp "^1.0.0"
-
 strip-ansi@^6.0.0:
  version "6.0.0"
  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
@@ -5366,15 +5296,22 @@ strip-ansi@^6.0.0:
  dependencies:
    ansi-regex "^5.0.0"

+strip-ansi@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
+  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
+  dependencies:
+    ansi-regex "^6.0.1"
+
 strip-bom@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==

-strip-final-newline@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
-  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+strip-final-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
+  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==

 strip-indent@^3.0.0:
  version "3.0.0"
@@ -5540,7 +5477,7 @@ tsconfig-paths@^3.14.1:
    minimist "^1.2.6"
    strip-bom "^3.0.0"

-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1:
  version "1.14.1"
  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -5724,11 +5661,6 @@ which-collection@^1.0.1:
    is-weakmap "^2.0.1"
    is-weakset "^2.0.1"

-which-pm-runs@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
-  integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
-
 which-typed-array@^1.1.9:
  version "1.1.9"
  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
@@ -5806,6 +5738,11 @@ yaml@^1.10.2:
  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==

+yaml@^2.1.3:
+  version "2.2.1"
+  resolved "https://registry.npmmirror.com/yaml/-/yaml-2.2.1.tgz#3014bf0482dcd15147aa8e56109ce8632cd60ce4"
+  integrity sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==
+
 yargs-parser@^20.2.2:
  version "20.2.4"
  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
@@ -5823,8 +5760,3 @@ yargs@^16.2.0:
    string-width "^4.2.0"
    y18n "^5.0.5"
    yargs-parser "^20.2.2"
-
-yocto-queue@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
-  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==