From 275fc5afe65d784f98f75d1eaf3c1770811b1968 Mon Sep 17 00:00:00 2001
From: Outwater <kocon135@gmail.com>
Date: Wed, 19 Jan 2022 22:20:01 +0900
Subject: [PATCH 1/9] =?UTF-8?q?ienv:=20=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=20init=20By=20=EB=B0=94=EB=B2=A8,=EC=9B=B9=ED=8C=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .babelrc                           |    3 +
 .gitignore                         |    5 +
 docs/TODO.md                       |   58 +
 docs/index.html                    |  346 ++
 {styles => docs/styles}/button.css |    0
 {styles => docs/styles}/card.css   |    0
 {styles => docs/styles}/index.css  |    0
 {styles => docs/styles}/input.css  |    0
 {styles => docs/styles}/modal.css  |    0
 {styles => docs/styles}/utils.css  |    0
 index.html                         |  346 --
 package-lock.json                  | 5022 ++++++++++++++++++++++++++++
 package.json                       |   40 +
 public/index.html                  |   12 +
 src/App.css                        |    3 +
 src/App.jsx                        |    8 +
 src/index.js                       |    5 +
 webpack.config.js                  |   48 +
 18 files changed, 5550 insertions(+), 346 deletions(-)
 create mode 100644 .babelrc
 create mode 100644 .gitignore
 create mode 100644 docs/TODO.md
 create mode 100644 docs/index.html
 rename {styles => docs/styles}/button.css (100%)
 rename {styles => docs/styles}/card.css (100%)
 rename {styles => docs/styles}/index.css (100%)
 rename {styles => docs/styles}/input.css (100%)
 rename {styles => docs/styles}/modal.css (100%)
 rename {styles => docs/styles}/utils.css (100%)
 delete mode 100644 index.html
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/index.html
 create mode 100644 src/App.css
 create mode 100644 src/App.jsx
 create mode 100644 src/index.js
 create mode 100644 webpack.config.js

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 00000000..0dce8c0a
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", "@babel/preset-react"]
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..53f7466a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
\ No newline at end of file
diff --git a/docs/TODO.md b/docs/TODO.md
new file mode 100644
index 00000000..aac472ff
--- /dev/null
+++ b/docs/TODO.md
@@ -0,0 +1,58 @@
+## 📝 Requirements
+
+## TODO
+
+## 요구사항 리스트
+
+#### 카드 추가
+
+- [ ] `<`(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
+- [ ] 카드 번호를 입력 받을 수 있다.
+  - [ ] 카드 번호입력 폼에 라벨을 보여준다.
+  - [ ] 카드 번호는 숫자만 입력가능하다.
+  - [ ] 카드 번호 4자리마다 `-`가 삽입된다.
+  - [ ] 카드 번호는 실시간으로 카드 UI에 반영된다.
+  - [ ] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
+  - [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
+  - [ ] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
+  - [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
+  - [ ] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [ ] 만료일을 입력 받을 수 있다.
+  - [ ] 만료일 입력 폼에 라벨을 보여준다.
+  - [ ] `MM / YY` 로 placeholder를 적용한다.
+  - [ ] 월, 년 사이에 자동으로 `/`가 삽입된다.
+  - [ ] 만료일은 실시간으로 카드 UI에 반영된다.
+  - [ ] 월은 1이상 12이하 숫자여야 한다.
+  - [ ] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
+  - [ ] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [ ] 보안코드를 입력 받을 수 있다.
+  - [ ] 카드 보안코드 입력 폼에 라벨을 보여준다.
+  - [ ] 보안코드는 `*`으로 보여진다.
+  - [ ] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
+  - [ ] 보안코드는 숫자만 입력가능하다.
+  - [ ] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [ ] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
+  - [ ] 카드 비밀번호 입력 폼에 라벨을 보여준다.
+  - [ ] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
+  - [ ] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
+  - [ ] 카드 번호 입력 시, `*`으로 보여진다.
+  - [ ] 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [ ] 카드 소유자 이름을 입력 받을 수 있다.
+  - [ ] 카드 소유자 이름 입력 폼 라벨을 보여준다.
+  - [ ] 이름은 30자리까지 입력할 수 있다.
+  - [ ] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
+- [ ] 클릭 시, 카드 등록 완료 페이지로 이동한다.
+
+### 심화 요구사항 (선택사항)
+
+- [ ] `Storybook` 단위 테스트
+- [ ] 유효성 검증 실패에 대한 UI/UX 추가
+- [ ] 카드사 선택
+  - [ ] 카드사를 선택하면 모달이 닫히고, 그 테마를 카드 UI에 반영한다.
+  - [ ] 카드사를 선택하지 않아도 모달을 닫을 수 있다.
+- [ ] 보안코드 툴팁
+  - [ ] 클릭 시, 보안코드 관련 안내 메시지를 보여준다.
+  - [ ] focusout 시, 툴팁이 닫힌다.
+- [ ] 가상 키보드
+  - [ ] 마스킹 처리된 값 입력시 사용
+  - [ ] 숫자를 랜덤으로 배열
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..339cc147
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles/index.css" />
+    <title>React Clean Code Payments</title>
+  </head>
+  <body>
+    <h1>React Clean Code Payments CSS example</h1>
+
+    <!-- 
+
+    PAGE 01
+
+     -->
+
+    <h2>1️⃣ 카드 추가</h2>
+    <div class="root">
+      <div class="app">
+        <h2 class="page-title">< 카드 추가</h2>
+        <div class="card-box">
+          <div class="empty-card">
+            <div class="card-top"></div>
+            <div class="card-middle">
+              <div class="small-card__chip"></div>
+            </div>
+            <div class="card-bottom">
+              <div class="card-bottom__info">
+                <span class="card-text">NAME</span>
+                <span class="card-text">MM / YY</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="input-container">
+          <span class="input-title">카드 번호</span>
+          <div class="input-box">
+            <input class="input-basic" type="text" />
+            <input class="input-basic" type="text" />
+            <input class="input-basic" type="password" />
+            <input class="input-basic" type="password" />
+          </div>
+        </div>
+        <div class="input-container">
+          <span class="input-title">만료일</span>
+          <div class="input-box w-50">
+            <input class="input-basic" type="text" placeholder="MM" />
+            <input class="input-basic" type="text" placeholder="YY" />
+          </div>
+        </div>
+        <div class="input-container">
+          <span class="input-title">카드 소유자 이름(선택)</span>
+          <input
+            type="text"
+            class="input-basic"
+            placeholder="카드에 표시된 이름과 동일하게 입력하세요."
+          />
+        </div>
+        <div class="input-container">
+          <span class="input-title">보안코드(CVC/CVV)</span>
+          <input class="input-basic w-25" type="password" />
+        </div>
+        <div class="input-container">
+          <span class="input-title">카드 비밀번호</span>
+          <input class="input-basic w-15" type="password" />
+          <input class="input-basic w-15" type="password" />
+          <input class="input-basic w-15" type="password" />
+          <input class="input-basic w-15" type="password" />
+        </div>
+        <div class="button-box">
+          <span class="button-text">다음</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 
+
+    PAGE 02
+
+     -->
+
+    <h2>2️⃣ 카드 추가 - 카드사 선택</h2>
+    <div class="root">
+      <div class="app">
+        <h2 class="page-title">< 카드 추가</h2>
+        <div class="card-box">
+          <div class="small-card">
+            <div class="card-top">
+              <span class="card-text">클린카드</span>
+            </div>
+            <div class="card-middle">
+              <div class="small-card__chip"></div>
+            </div>
+            <div class="card-bottom">
+              <div class="card-bottom__number">
+                <span class="card-text">1111 - 2222 - oooo - oooo</span>
+              </div>
+              <div class="card-bottom__info">
+                <span class="card-text">NAME</span>
+                <span class="card-text">MM / YY</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="input-container">
+          <span class="input-title">카드 번호</span>
+          <div class="input-box">
+            <input class="input-basic" type="text" value="1111" />
+            <input class="input-basic" type="text" value="2222" />
+            <input class="input-basic" type="password" value="1111" />
+            <input class="input-basic" type="password" value="1111" />
+          </div>
+        </div>
+        <div class="input-container">
+          <span class="input-title">만료일</span>
+          <div class="input-box w-50">
+            <input class="input-basic" type="text" placeholder="MM" />
+            <input class="input-basic" type="text" placeholder="YY" />
+          </div>
+        </div>
+        <div class="input-container">
+          <span class="input-title">카드 소유자 이름(선택)</span>
+          <input
+            type="text"
+            class="input-basic"
+            placeholder="카드에 표시된 이름과 동일하게 입력하세요."
+          />
+        </div>
+        <div class="input-container">
+          <span class="input-title">보안코드(CVC/CVV)</span>
+          <input class="input-basic w-25" type="password" />
+        </div>
+        <div class="input-container">
+          <span class="input-title">카드 비밀번호</span>
+          <input class="input-basic w-15" type="password" />
+          <input class="input-basic w-15" type="password" />
+          <input class="input-basic w-15" type="password" />
+          <input class="input-basic w-15" type="password" />
+        </div>
+        <div class="button-box">
+          <span class="button-text">다음</span>
+        </div>
+      </div>
+      <div class="modal-dimmed">
+        <div class="modal">
+          <div class="flex-center">
+            <div class="modal-item-container">
+              <div class="modal-item-dot"></div>
+              <span class="modal-item-name">클린 카드</span>
+            </div>
+            <div class="modal-item-container">
+              <div class="modal-item-dot"></div>
+              <span class="modal-item-name">클린 카드</span>
+            </div>
+            <div class="modal-item-container">
+              <div class="modal-item-dot"></div>
+              <span class="modal-item-name">클린 카드</span>
+            </div>
+            <div class="modal-item-container">
+              <div class="modal-item-dot"></div>
+              <span class="modal-item-name">클린 카드</span>
+            </div>
+          </div>
+          <div class="flex-center">
+            <div class="modal-item-container">
+              <div class="modal-item-dot"></div>
+              <span class="modal-item-name">클린 카드</span>
+            </div>
+            <div class="modal-item-container">
+              <div class="modal-item-dot"></div>
+              <span class="modal-item-name">클린 카드</span>
+            </div>
+            <div class="modal-item-container">
+              <div class="modal-item-dot"></div>
+              <span class="modal-item-name">클린 카드</span>
+            </div>
+            <div class="modal-item-container">
+              <div class="modal-item-dot"></div>
+              <span class="modal-item-name">클린 카드</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 
+
+    PAGE 03
+
+     -->
+
+    <h2>3️⃣ 카드 추가 - 입력 완료</h2>
+    <div class="root">
+      <div class="app">
+        <h2 class="page-title">< 카드 추가</h2>
+        <div class="card-box">
+          <div class="small-card">
+            <div class="card-top">
+              <span class="card-text">클린카드</span>
+            </div>
+            <div class="card-middle">
+              <div class="small-card__chip"></div>
+            </div>
+            <div class="card-bottom">
+              <div class="card-bottom__number">
+                <span class="card-text">1111 - 2222 - oooo - oooo</span>
+              </div>
+              <div class="card-bottom__info">
+                <span class="card-text">YUJO</span>
+                <span class="card-text">12 / 23</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="input-container">
+          <span class="input-title">카드 번호</span>
+          <div class="input-box">
+            <input class="input-basic" type="text" value="1111" />
+            <input class="input-basic" type="text" value="2222" />
+            <input class="input-basic" type="password" value="1111" />
+            <input class="input-basic" type="password" value="1111" />
+          </div>
+        </div>
+        <div class="input-container">
+          <span class="input-title">만료일</span>
+          <div class="input-box w-50">
+            <input
+              class="input-basic"
+              type="text"
+              placeholder="MM"
+              value="12"
+            />
+            <input
+              class="input-basic"
+              type="text"
+              placeholder="YY"
+              value="23"
+            />
+          </div>
+        </div>
+        <div class="input-container">
+          <span class="input-title">카드 소유자 이름(선택)</span>
+          <input type="text" class="input-basic" value="YUJO" />
+        </div>
+        <div class="input-container">
+          <span class="input-title">보안코드(CVC/CVV)</span>
+          <input class="input-basic w-25" type="password" value="111" />
+        </div>
+        <div class="input-container">
+          <span class="input-title">카드 비밀번호</span>
+          <input class="input-basic w-15" type="password" value="1" />
+          <input class="input-basic w-15" type="password" value="1" />
+          <input class="input-basic w-15" type="password" value="1" />
+          <input class="input-basic w-15" type="password" value="1" />
+        </div>
+        <div class="button-box">
+          <span class="button-text">다음</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 
+
+    PAGE 04
+
+     -->
+
+    <h2>4️⃣ 카드 추가 완료</h2>
+    <div class="root">
+      <div class="app flex-column-center">
+        <div class="flex-center">
+          <h2 class="page-title mb-10">카드등록이 완료되었습니다.</h2>
+        </div>
+        <div class="card-box">
+          <div class="big-card">
+            <div class="card-top">
+              <span class="card-text__big">클린카드</span>
+            </div>
+            <div class="card-middle">
+              <div class="big-card__chip"></div>
+            </div>
+            <div class="card-bottom">
+              <div class="card-bottom__number">
+                <span class="card-text__big">1111 - 2222 - oooo - oooo</span>
+              </div>
+              <div class="card-bottom__info">
+                <span class="card-text__big">YUJO</span>
+                <span class="card-text__big">12 / 23</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="input-container flex-center w-100">
+          <input
+            class="input-underline w-75"
+            type="text"
+            placeholder="카드의 별칭을 입력해주세요."
+          />
+        </div>
+        <div class="button-box mt-50">
+          <span class="button-text">다음</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 
+
+    PAGE 05
+
+     -->
+
+    <h2>5️⃣ 카드 목록</h2>
+    <div class="root">
+      <div class="app flex-column-center">
+        <div class="flex-center">
+          <h2 class="page-title mb-10">보유 카드</h2>
+        </div>
+        <div class="card-box">
+          <div class="small-card">
+            <div class="card-top">
+              <span class="card-text">클린카드</span>
+            </div>
+            <div class="card-middle">
+              <div class="small-card__chip"></div>
+            </div>
+            <div class="card-bottom">
+              <div class="card-bottom__number">
+                <span class="card-text">1111 - 2222 - oooo - oooo</span>
+              </div>
+              <div class="card-bottom__info">
+                <span class="card-text">YUJO</span>
+                <span class="card-text">12 / 23</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span class="card-nickname">법인카드</span>
+        <div class="card-box">
+          <div class="empty-card">+</div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/styles/button.css b/docs/styles/button.css
similarity index 100%
rename from styles/button.css
rename to docs/styles/button.css
diff --git a/styles/card.css b/docs/styles/card.css
similarity index 100%
rename from styles/card.css
rename to docs/styles/card.css
diff --git a/styles/index.css b/docs/styles/index.css
similarity index 100%
rename from styles/index.css
rename to docs/styles/index.css
diff --git a/styles/input.css b/docs/styles/input.css
similarity index 100%
rename from styles/input.css
rename to docs/styles/input.css
diff --git a/styles/modal.css b/docs/styles/modal.css
similarity index 100%
rename from styles/modal.css
rename to docs/styles/modal.css
diff --git a/styles/utils.css b/docs/styles/utils.css
similarity index 100%
rename from styles/utils.css
rename to docs/styles/utils.css
diff --git a/index.html b/index.html
deleted file mode 100644
index 62c13d62..00000000
--- a/index.html
+++ /dev/null
@@ -1,346 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="stylesheet" href="./styles/index.css" />
-		<title>React Clean Code Payments</title>
-	</head>
-	<body>
-		<h1>React Clean Code Payments CSS example</h1>
-
-		<!-- 
-
-    PAGE 01
-
-     -->
-
-		<h2>1️⃣ 카드 추가</h2>
-		<div class="root">
-			<div class="app">
-				<h2 class="page-title">< 카드 추가</h2>
-				<div class="card-box">
-					<div class="empty-card">
-						<div class="card-top"></div>
-						<div class="card-middle">
-							<div class="small-card__chip"></div>
-						</div>
-						<div class="card-bottom">
-							<div class="card-bottom__info">
-								<span class="card-text">NAME</span>
-								<span class="card-text">MM / YY</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="input-container">
-					<span class="input-title">카드 번호</span>
-					<div class="input-box">
-						<input class="input-basic" type="text" />
-						<input class="input-basic" type="text" />
-						<input class="input-basic" type="password" />
-						<input class="input-basic" type="password" />
-					</div>
-				</div>
-				<div class="input-container">
-					<span class="input-title">만료일</span>
-					<div class="input-box w-50">
-						<input class="input-basic" type="text" placeholder="MM" />
-						<input class="input-basic" type="text" placeholder="YY" />
-					</div>
-				</div>
-				<div class="input-container">
-					<span class="input-title">카드 소유자 이름(선택)</span>
-					<input
-						type="text"
-						class="input-basic"
-						placeholder="카드에 표시된 이름과 동일하게 입력하세요."
-					/>
-				</div>
-				<div class="input-container">
-					<span class="input-title">보안코드(CVC/CVV)</span>
-					<input class="input-basic w-25" type="password" />
-				</div>
-				<div class="input-container">
-					<span class="input-title">카드 비밀번호</span>
-					<input class="input-basic w-15" type="password" />
-					<input class="input-basic w-15" type="password" />
-					<input class="input-basic w-15" type="password" />
-					<input class="input-basic w-15" type="password" />
-				</div>
-				<div class="button-box">
-					<span class="button-text">다음</span>
-				</div>
-			</div>
-		</div>
-
-		<!-- 
-
-    PAGE 02
-
-     -->
-
-		<h2>2️⃣ 카드 추가 - 카드사 선택</h2>
-		<div class="root">
-			<div class="app">
-				<h2 class="page-title">< 카드 추가</h2>
-				<div class="card-box">
-					<div class="small-card">
-						<div class="card-top">
-							<span class="card-text">클린카드</span>
-						</div>
-						<div class="card-middle">
-							<div class="small-card__chip"></div>
-						</div>
-						<div class="card-bottom">
-							<div class="card-bottom__number">
-								<span class="card-text">1111 - 2222 - oooo - oooo</span>
-							</div>
-							<div class="card-bottom__info">
-								<span class="card-text">NAME</span>
-								<span class="card-text">MM / YY</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="input-container">
-					<span class="input-title">카드 번호</span>
-					<div class="input-box">
-						<input class="input-basic" type="text" value="1111" />
-						<input class="input-basic" type="text" value="2222" />
-						<input class="input-basic" type="password" value="1111" />
-						<input class="input-basic" type="password" value="1111" />
-					</div>
-				</div>
-				<div class="input-container">
-					<span class="input-title">만료일</span>
-					<div class="input-box w-50">
-						<input class="input-basic" type="text" placeholder="MM" />
-						<input class="input-basic" type="text" placeholder="YY" />
-					</div>
-				</div>
-				<div class="input-container">
-					<span class="input-title">카드 소유자 이름(선택)</span>
-					<input
-						type="text"
-						class="input-basic"
-						placeholder="카드에 표시된 이름과 동일하게 입력하세요."
-					/>
-				</div>
-				<div class="input-container">
-					<span class="input-title">보안코드(CVC/CVV)</span>
-					<input class="input-basic w-25" type="password" />
-				</div>
-				<div class="input-container">
-					<span class="input-title">카드 비밀번호</span>
-					<input class="input-basic w-15" type="password" />
-					<input class="input-basic w-15" type="password" />
-					<input class="input-basic w-15" type="password" />
-					<input class="input-basic w-15" type="password" />
-				</div>
-				<div class="button-box">
-					<span class="button-text">다음</span>
-				</div>
-			</div>
-			<div class="modal-dimmed">
-        <div class="modal">
-          <div class="flex-center">
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-          </div>
-          <div class="flex-center">
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-          </div>
-        </div>
-      </div>
-		</div>
-
-		<!-- 
-
-    PAGE 03
-
-     -->
-
-		<h2>3️⃣ 카드 추가 - 입력 완료</h2>
-		<div class="root">
-			<div class="app">
-				<h2 class="page-title">< 카드 추가</h2>
-				<div class="card-box">
-					<div class="small-card">
-						<div class="card-top">
-							<span class="card-text">클린카드</span>
-						</div>
-						<div class="card-middle">
-							<div class="small-card__chip"></div>
-						</div>
-						<div class="card-bottom">
-							<div class="card-bottom__number">
-								<span class="card-text">1111 - 2222 - oooo - oooo</span>
-							</div>
-							<div class="card-bottom__info">
-								<span class="card-text">YUJO</span>
-								<span class="card-text">12 / 23</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="input-container">
-					<span class="input-title">카드 번호</span>
-					<div class="input-box">
-						<input class="input-basic" type="text" value="1111" />
-						<input class="input-basic" type="text" value="2222" />
-						<input class="input-basic" type="password" value="1111" />
-						<input class="input-basic" type="password" value="1111" />
-					</div>
-				</div>
-				<div class="input-container">
-					<span class="input-title">만료일</span>
-					<div class="input-box w-50">
-						<input
-							class="input-basic"
-							type="text"
-							placeholder="MM"
-							value="12"
-						/>
-						<input
-							class="input-basic"
-							type="text"
-							placeholder="YY"
-							value="23"
-						/>
-					</div>
-				</div>
-				<div class="input-container">
-					<span class="input-title">카드 소유자 이름(선택)</span>
-					<input type="text" class="input-basic" value="YUJO" />
-				</div>
-				<div class="input-container">
-					<span class="input-title">보안코드(CVC/CVV)</span>
-					<input class="input-basic w-25" type="password" value="111" />
-				</div>
-				<div class="input-container">
-					<span class="input-title">카드 비밀번호</span>
-					<input class="input-basic w-15" type="password" value="1" />
-					<input class="input-basic w-15" type="password" value="1" />
-					<input class="input-basic w-15" type="password" value="1" />
-					<input class="input-basic w-15" type="password" value="1" />
-				</div>
-				<div class="button-box">
-					<span class="button-text">다음</span>
-				</div>
-			</div>
-		</div>
-
-		<!-- 
-
-    PAGE 04
-
-     -->
-
-		<h2>4️⃣ 카드 추가 완료</h2>
-		<div class="root">
-			<div class="app flex-column-center">
-				<div class="flex-center">
-					<h2 class="page-title mb-10">카드등록이 완료되었습니다.</h2>
-				</div>
-				<div class="card-box">
-					<div class="big-card">
-						<div class="card-top">
-							<span class="card-text__big">클린카드</span>
-						</div>
-						<div class="card-middle">
-							<div class="big-card__chip"></div>
-						</div>
-						<div class="card-bottom">
-							<div class="card-bottom__number">
-								<span class="card-text__big">1111 - 2222 - oooo - oooo</span>
-							</div>
-							<div class="card-bottom__info">
-								<span class="card-text__big">YUJO</span>
-								<span class="card-text__big">12 / 23</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="input-container flex-center w-100">
-					<input
-						class="input-underline w-75"
-						type="text"
-						placeholder="카드의 별칭을 입력해주세요."
-					/>
-				</div>
-				<div class="button-box mt-50">
-					<span class="button-text">다음</span>
-				</div>
-			</div>
-		</div>
-
-		<!-- 
-
-    PAGE 05
-
-     -->
-
-		<h2>5️⃣ 카드 목록</h2>
-		<div class="root">
-			<div class="app flex-column-center">
-				<div class="flex-center">
-					<h2 class="page-title mb-10">보유 카드</h2>
-				</div>
-				<div class="card-box">
-					<div class="small-card">
-						<div class="card-top">
-							<span class="card-text">클린카드</span>
-						</div>
-						<div class="card-middle">
-							<div class="small-card__chip"></div>
-						</div>
-						<div class="card-bottom">
-							<div class="card-bottom__number">
-								<span class="card-text">1111 - 2222 - oooo - oooo</span>
-							</div>
-							<div class="card-bottom__info">
-								<span class="card-text">YUJO</span>
-								<span class="card-text">12 / 23</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<span class="card-nickname">법인카드</span>
-				<div class="card-box">
-					<div class="empty-card">+</div>
-				</div>
-			</div>
-		</div>
-	</body>
-</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..794dcf29
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,5022 @@
+{
+  "name": "react-payments",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
+      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.16.7"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz",
+      "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==",
+      "dev": true
+    },
+    "@babel/core": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.7.tgz",
+      "integrity": "sha512-aeLaqcqThRNZYmbMqtulsetOQZ/5gbR/dWruUCJcpas4Qoyy+QeagfDsPdMrqwsPRDNxJvBlRiZxxX7THO7qtA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.16.7",
+        "@babel/generator": "^7.16.7",
+        "@babel/helper-compilation-targets": "^7.16.7",
+        "@babel/helper-module-transforms": "^7.16.7",
+        "@babel/helpers": "^7.16.7",
+        "@babel/parser": "^7.16.7",
+        "@babel/template": "^7.16.7",
+        "@babel/traverse": "^7.16.7",
+        "@babel/types": "^7.16.7",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.1.2",
+        "semver": "^6.3.0",
+        "source-map": "^0.5.0"
+      }
+    },
+    "@babel/generator": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
+      "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.8",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
+      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz",
+      "integrity": "sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-explode-assignable-expression": "^7.16.7",
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz",
+      "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.16.4",
+        "@babel/helper-validator-option": "^7.16.7",
+        "browserslist": "^4.17.5",
+        "semver": "^6.3.0"
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.7.tgz",
+      "integrity": "sha512-kIFozAvVfK05DM4EVQYKK+zteWvY85BFdGBRQBytRyY3y+6PX0DkDOn/CZ3lEuczCfrCxEzwt0YtP/87YPTWSw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.16.7",
+        "@babel/helper-member-expression-to-functions": "^7.16.7",
+        "@babel/helper-optimise-call-expression": "^7.16.7",
+        "@babel/helper-replace-supers": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7"
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.16.7.tgz",
+      "integrity": "sha512-fk5A6ymfp+O5+p2yCkXAu5Kyj6v0xh0RBeNcAkYUMDvvAAoxvSKXn+Jb37t/yWFiQVDFK1ELpUTD8/aLhCPu+g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "regexpu-core": "^4.7.1"
+      }
+    },
+    "@babel/helper-define-polyfill-provider": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
+      "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.13.0",
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/traverse": "^7.13.0",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      }
+    },
+    "@babel/helper-environment-visitor": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
+      "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-explode-assignable-expression": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz",
+      "integrity": "sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz",
+      "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-get-function-arity": "^7.16.7",
+        "@babel/template": "^7.16.7",
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-get-function-arity": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz",
+      "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
+      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.7.tgz",
+      "integrity": "sha512-VtJ/65tYiU/6AbMTDwyoXGPKHgTsfRarivm+YbB5uAzKUyuPjgZSgAFeG87FCigc7KNHu2Pegh1XIT3lXjvz3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
+      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz",
+      "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/helper-simple-access": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/template": "^7.16.7",
+        "@babel/traverse": "^7.16.7",
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
+      "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
+      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
+      "dev": true
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz",
+      "integrity": "sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-wrap-function": "^7.16.8",
+        "@babel/types": "^7.16.8"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
+      "integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-member-expression-to-functions": "^7.16.7",
+        "@babel/helper-optimise-call-expression": "^7.16.7",
+        "@babel/traverse": "^7.16.7",
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz",
+      "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz",
+      "integrity": "sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.0"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
+      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
+      "dev": true
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
+      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
+      "dev": true
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz",
+      "integrity": "sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.16.7",
+        "@babel/template": "^7.16.7",
+        "@babel/traverse": "^7.16.8",
+        "@babel/types": "^7.16.8"
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz",
+      "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.16.7",
+        "@babel/traverse": "^7.16.7",
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.7.tgz",
+      "integrity": "sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.16.7",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.8.tgz",
+      "integrity": "sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==",
+      "dev": true
+    },
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz",
+      "integrity": "sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz",
+      "integrity": "sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.16.7"
+      }
+    },
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz",
+      "integrity": "sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-remap-async-to-generator": "^7.16.8",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz",
+      "integrity": "sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-proposal-class-static-block": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.16.7.tgz",
+      "integrity": "sha512-dgqJJrcZoG/4CkMopzhPJjGxsIe9A8RlkQLnL/Vhhx8AA9ZuaRwGSlscSh42hazc7WSrya/IK7mTeoF0DP9tEw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      }
+    },
+    "@babel/plugin-proposal-dynamic-import": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz",
+      "integrity": "sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz",
+      "integrity": "sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz",
+      "integrity": "sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz",
+      "integrity": "sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz",
+      "integrity": "sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz",
+      "integrity": "sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.16.7.tgz",
+      "integrity": "sha512-3O0Y4+dw94HA86qSg9IHfyPktgR7q3gpNVAeiKQd+8jBKFaU5NQS1Yatgo4wY+UFNuLjvxcSmzcsHqrhgTyBUA==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.16.4",
+        "@babel/helper-compilation-targets": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.16.7"
+      }
+    },
+    "@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz",
+      "integrity": "sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-optional-chaining": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz",
+      "integrity": "sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.7.tgz",
+      "integrity": "sha512-7twV3pzhrRxSwHeIvFE6coPgvo+exNDOiGUMg39o2LiLo1Y+4aKpfkcLGcg1UHonzorCt7SNXnoMyCnnIOA8Sw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz",
+      "integrity": "sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-create-class-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      }
+    },
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz",
+      "integrity": "sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
+      "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz",
+      "integrity": "sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz",
+      "integrity": "sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-remap-async-to-generator": "^7.16.8"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz",
+      "integrity": "sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz",
+      "integrity": "sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz",
+      "integrity": "sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.16.7",
+        "@babel/helper-optimise-call-expression": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-replace-supers": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz",
+      "integrity": "sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.16.7.tgz",
+      "integrity": "sha512-VqAwhTHBnu5xBVDCvrvqJbtLUa++qZaWC0Fgr2mqokBlulZARGyIvZDoqbPlPaKImQ9dKAcCzbv+ul//uqu70A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz",
+      "integrity": "sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz",
+      "integrity": "sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz",
+      "integrity": "sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz",
+      "integrity": "sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz",
+      "integrity": "sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.16.7",
+        "@babel/helper-function-name": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz",
+      "integrity": "sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz",
+      "integrity": "sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz",
+      "integrity": "sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.8.tgz",
+      "integrity": "sha512-oflKPvsLT2+uKQopesJt3ApiaIS2HW+hzHFcwRNtyDGieAeC/dIHZX8buJQ2J2X1rxGPy4eRcUijm3qcSPjYcA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-simple-access": "^7.16.7",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.16.7.tgz",
+      "integrity": "sha512-DuK5E3k+QQmnOqBR9UkusByy5WZWGRxfzV529s9nPra1GE7olmxfqO2FHobEOYSPIjPBTr4p66YDcjQnt8cBmw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.16.7",
+        "@babel/helper-module-transforms": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-validator-identifier": "^7.16.7",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz",
+      "integrity": "sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz",
+      "integrity": "sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz",
+      "integrity": "sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz",
+      "integrity": "sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-replace-supers": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz",
+      "integrity": "sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz",
+      "integrity": "sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-react-display-name": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz",
+      "integrity": "sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.7.tgz",
+      "integrity": "sha512-8D16ye66fxiE8m890w0BpPpngG9o9OVBBy0gH2E+2AR7qMR2ZpTYJEqLxAsoroenMId0p/wMW+Blc0meDgu0Ag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-jsx": "^7.16.7",
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-development": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz",
+      "integrity": "sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-transform-react-jsx": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz",
+      "integrity": "sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.7.tgz",
+      "integrity": "sha512-mF7jOgGYCkSJagJ6XCujSQg+6xC1M77/03K2oBmVJWoFGNUtnVJO4WHKJk3dnPC8HCcj4xBQP1Egm8DWh3Pb3Q==",
+      "dev": true,
+      "requires": {
+        "regenerator-transform": "^0.14.2"
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz",
+      "integrity": "sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz",
+      "integrity": "sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz",
+      "integrity": "sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0"
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz",
+      "integrity": "sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz",
+      "integrity": "sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz",
+      "integrity": "sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz",
+      "integrity": "sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz",
+      "integrity": "sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.16.8.tgz",
+      "integrity": "sha512-9rNKgVCdwHb3z1IlbMyft6yIXIeP3xz6vWvGaLHrJThuEIqWfHb0DNBH9VuTgnDfdbUDhkmkvMZS/YMCtP7Elg==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.16.8",
+        "@babel/helper-compilation-targets": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-validator-option": "^7.16.7",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.16.7",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.16.7",
+        "@babel/plugin-proposal-async-generator-functions": "^7.16.8",
+        "@babel/plugin-proposal-class-properties": "^7.16.7",
+        "@babel/plugin-proposal-class-static-block": "^7.16.7",
+        "@babel/plugin-proposal-dynamic-import": "^7.16.7",
+        "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
+        "@babel/plugin-proposal-json-strings": "^7.16.7",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+        "@babel/plugin-proposal-numeric-separator": "^7.16.7",
+        "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.16.7",
+        "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+        "@babel/plugin-proposal-private-methods": "^7.16.7",
+        "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.16.7",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-transform-arrow-functions": "^7.16.7",
+        "@babel/plugin-transform-async-to-generator": "^7.16.8",
+        "@babel/plugin-transform-block-scoped-functions": "^7.16.7",
+        "@babel/plugin-transform-block-scoping": "^7.16.7",
+        "@babel/plugin-transform-classes": "^7.16.7",
+        "@babel/plugin-transform-computed-properties": "^7.16.7",
+        "@babel/plugin-transform-destructuring": "^7.16.7",
+        "@babel/plugin-transform-dotall-regex": "^7.16.7",
+        "@babel/plugin-transform-duplicate-keys": "^7.16.7",
+        "@babel/plugin-transform-exponentiation-operator": "^7.16.7",
+        "@babel/plugin-transform-for-of": "^7.16.7",
+        "@babel/plugin-transform-function-name": "^7.16.7",
+        "@babel/plugin-transform-literals": "^7.16.7",
+        "@babel/plugin-transform-member-expression-literals": "^7.16.7",
+        "@babel/plugin-transform-modules-amd": "^7.16.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.16.8",
+        "@babel/plugin-transform-modules-systemjs": "^7.16.7",
+        "@babel/plugin-transform-modules-umd": "^7.16.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.16.8",
+        "@babel/plugin-transform-new-target": "^7.16.7",
+        "@babel/plugin-transform-object-super": "^7.16.7",
+        "@babel/plugin-transform-parameters": "^7.16.7",
+        "@babel/plugin-transform-property-literals": "^7.16.7",
+        "@babel/plugin-transform-regenerator": "^7.16.7",
+        "@babel/plugin-transform-reserved-words": "^7.16.7",
+        "@babel/plugin-transform-shorthand-properties": "^7.16.7",
+        "@babel/plugin-transform-spread": "^7.16.7",
+        "@babel/plugin-transform-sticky-regex": "^7.16.7",
+        "@babel/plugin-transform-template-literals": "^7.16.7",
+        "@babel/plugin-transform-typeof-symbol": "^7.16.7",
+        "@babel/plugin-transform-unicode-escapes": "^7.16.7",
+        "@babel/plugin-transform-unicode-regex": "^7.16.7",
+        "@babel/preset-modules": "^0.1.5",
+        "@babel/types": "^7.16.8",
+        "babel-plugin-polyfill-corejs2": "^0.3.0",
+        "babel-plugin-polyfill-corejs3": "^0.5.0",
+        "babel-plugin-polyfill-regenerator": "^0.3.0",
+        "core-js-compat": "^3.20.2",
+        "semver": "^6.3.0"
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+      "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
+    "@babel/preset-react": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.16.7.tgz",
+      "integrity": "sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-validator-option": "^7.16.7",
+        "@babel/plugin-transform-react-display-name": "^7.16.7",
+        "@babel/plugin-transform-react-jsx": "^7.16.7",
+        "@babel/plugin-transform-react-jsx-development": "^7.16.7",
+        "@babel/plugin-transform-react-pure-annotations": "^7.16.7"
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
+      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/template": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
+      "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.16.7",
+        "@babel/parser": "^7.16.7",
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.8.tgz",
+      "integrity": "sha512-xe+H7JlvKsDQwXRsBhSnq1/+9c+LlQcCK3Tn/l5sbx02HYns/cn7ibp9+RV1sIUqu7hKg91NWsgHurO9dowITQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.16.7",
+        "@babel/generator": "^7.16.8",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.16.7",
+        "@babel/helper-hoist-variables": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/parser": "^7.16.8",
+        "@babel/types": "^7.16.8",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
+      "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.16.7",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@discoveryjs/json-ext": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
+      "integrity": "sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==",
+      "dev": true
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dev": true,
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/eslint": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.2.2.tgz",
+      "integrity": "sha512-nQxgB8/Sg+QKhnV8e0WzPpxjIGT3tuJDDzybkDi8ItE/IgTlHo07U0shaIjzhcvQxlq9SDRE42lsJ23uvEgJ2A==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "@types/eslint-scope": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz",
+      "integrity": "sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==",
+      "dev": true,
+      "requires": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.50",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
+      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
+      "dev": true
+    },
+    "@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dev": true,
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "@types/glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==",
+      "requires": {
+        "@types/minimatch": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
+    },
+    "@types/http-proxy": {
+      "version": "1.17.8",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
+      "integrity": "sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/json-schema": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
+      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
+      "dev": true
+    },
+    "@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "dev": true
+    },
+    "@types/minimatch": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
+    },
+    "@types/node": {
+      "version": "17.0.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.10.tgz",
+      "integrity": "sha512-S/3xB4KzyFxYGCppyDt68yzBU9ysL88lSdIah4D6cptdcltc4NCPCAMc0+PCpg/lLIyC7IPvj2Z52OJWeIUkog=="
+    },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
+    "@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "dev": true
+    },
+    "@types/retry": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
+      "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
+      "dev": true
+    },
+    "@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dev": true,
+      "requires": {
+        "@types/express": "*"
+      }
+    },
+    "@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dev": true,
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/ws": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.2.2.tgz",
+      "integrity": "sha512-NOn5eIcgWLOo6qW8AcuLZ7G8PycXu0xTxxkS6Q18VWFxgPUSOwV0pBj2a/4viNZVu25i7RIB7GttdkAIUUXOOg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@webassemblyjs/ast": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
+      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/helper-numbers": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+      }
+    },
+    "@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-api-error": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-buffer": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-numbers": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
+      "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
+      "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1"
+      }
+    },
+    "@webassemblyjs/ieee754": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
+      "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+      "dev": true,
+      "requires": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "@webassemblyjs/leb128": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
+      "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+      "dev": true,
+      "requires": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/utf8": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
+      "dev": true
+    },
+    "@webassemblyjs/wasm-edit": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
+      "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-section": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-opt": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@webassemblyjs/wast-printer": "1.11.1"
+      }
+    },
+    "@webassemblyjs/wasm-gen": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
+      "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
+      }
+    },
+    "@webassemblyjs/wasm-opt": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
+      "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1"
+      }
+    },
+    "@webassemblyjs/wasm-parser": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
+      "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
+      }
+    },
+    "@webassemblyjs/wast-printer": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
+      "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webpack-cli/configtest": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz",
+      "integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==",
+      "dev": true
+    },
+    "@webpack-cli/info": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz",
+      "integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==",
+      "dev": true,
+      "requires": {
+        "envinfo": "^7.7.3"
+      }
+    },
+    "@webpack-cli/serve": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz",
+      "integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==",
+      "dev": true
+    },
+    "@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true
+    },
+    "@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "dev": true,
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "acorn": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
+      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+      "dev": true
+    },
+    "acorn-import-assertions": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "dev": true
+    },
+    "aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "requires": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      }
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "requires": {
+        "ajv": "^8.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.9.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
+          "integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        }
+      }
+    },
+    "ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true
+    },
+    "ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
+      "dev": true
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY="
+    },
+    "async": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
+      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "babel-loader": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
+      "integrity": "sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw==",
+      "dev": true,
+      "requires": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^1.4.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      }
+    },
+    "babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dev": true,
+      "requires": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "babel-plugin-polyfill-corejs2": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
+      "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.13.11",
+        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "semver": "^6.1.1"
+      }
+    },
+    "babel-plugin-polyfill-corejs3": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.1.tgz",
+      "integrity": "sha512-TihqEe4sQcb/QcPJvxe94/9RZuLQuF1+To4WqQcRvc+3J3gLCPIPgDKzGLG6zmQLfH3nn25heRuDNkS2KR4I8A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "core-js-compat": "^3.20.0"
+      }
+    },
+    "babel-plugin-polyfill-regenerator": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
+      "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.3.1"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
+      "dev": true
+    },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
+    "body-parser": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
+      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.1",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.8.1",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.9.6",
+        "raw-body": "2.4.2",
+        "type-is": "~1.6.18"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
+          "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "bonjour": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
+      "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=",
+      "dev": true,
+      "requires": {
+        "array-flatten": "^2.1.0",
+        "deep-equal": "^1.0.1",
+        "dns-equal": "^1.0.0",
+        "dns-txt": "^2.0.2",
+        "multicast-dns": "^6.0.1",
+        "multicast-dns-service-types": "^1.1.0"
+      }
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browserslist": {
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
+      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001286",
+        "electron-to-chromium": "^1.4.17",
+        "escalade": "^3.1.1",
+        "node-releases": "^2.0.1",
+        "picocolors": "^1.0.0"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
+    "buffer-indexof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
+      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
+      "dev": true
+    },
+    "bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
+      "dev": true
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "requires": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001300",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz",
+      "integrity": "sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
+    "chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true
+    },
+    "clean-css": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.2.tgz",
+      "integrity": "sha512-/eR8ru5zyxKzpBLv9YZvMXgTSSQn7AdkMItMYynsFgGwTveCRVam9IUPFloE85B4vAIj05IuKmmEoV7/AQjT0w==",
+      "requires": {
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true
+    },
+    "clean-webpack-plugin": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
+      "integrity": "sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==",
+      "requires": {
+        "del": "^4.1.1"
+      },
+      "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "del": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
+          "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
+          "requires": {
+            "@types/glob": "^7.1.1",
+            "globby": "^6.1.0",
+            "is-path-cwd": "^2.0.0",
+            "is-path-in-cwd": "^2.0.0",
+            "p-map": "^2.0.0",
+            "pify": "^4.0.1",
+            "rimraf": "^2.6.3"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "2.3.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+            }
+          }
+        },
+        "p-map": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw=="
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "colorette": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+      "dev": true
+    },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
+    },
+    "compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dev": true,
+      "requires": {
+        "mime-db": ">= 1.43.0 < 2"
+      }
+    },
+    "compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "dev": true
+    },
+    "content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.2.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        }
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "dev": true
+    },
+    "convert-source-map": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
+      "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
+      "dev": true
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
+      "dev": true
+    },
+    "core-js-compat": {
+      "version": "3.20.3",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.3.tgz",
+      "integrity": "sha512-c8M5h0IkNZ+I92QhIpuSijOxGAcj3lgpsWdkCqmUTZNwidujF4r3pi6x1DCN+Vcs5qTS2XWWMfWSuCqyupX8gw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.19.1",
+        "semver": "7.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+          "dev": true
+        }
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "css-loader": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.5.1.tgz",
+      "integrity": "sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.2.15",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "semver": "^7.3.5"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "css-select": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
+      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "css-what": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw=="
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "debug": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
+      "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "dev": true,
+      "requires": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      }
+    },
+    "default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "dev": true,
+      "requires": {
+        "execa": "^5.0.0"
+      }
+    },
+    "define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true
+    },
+    "define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "dev": true,
+      "requires": {
+        "object-keys": "^1.0.12"
+      }
+    },
+    "del": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
+      "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
+      "dev": true,
+      "requires": {
+        "globby": "^11.0.1",
+        "graceful-fs": "^4.2.4",
+        "is-glob": "^4.0.1",
+        "is-path-cwd": "^2.2.0",
+        "is-path-inside": "^3.0.2",
+        "p-map": "^4.0.0",
+        "rimraf": "^3.0.2",
+        "slash": "^3.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "dev": true
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
+      "dev": true
+    },
+    "detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "dev": true
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=",
+      "dev": true
+    },
+    "dns-packet": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
+      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
+      "dev": true,
+      "requires": {
+        "ip": "^1.1.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "dns-txt": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
+      "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=",
+      "dev": true,
+      "requires": {
+        "buffer-indexof": "^1.0.0"
+      }
+    },
+    "dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "requires": {
+        "utila": "~0.4"
+      }
+    },
+    "dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+    },
+    "domhandler": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
+      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
+      "requires": {
+        "domelementtype": "^2.2.0"
+      }
+    },
+    "domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
+      "dev": true
+    },
+    "electron-to-chromium": {
+      "version": "1.4.48",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.48.tgz",
+      "integrity": "sha512-RT3SEmpv7XUA+tKXrZGudAWLDpa7f8qmhjcLaM6OD/ERxjQ/zAojT8/Vvo0BSzbArkElFZ1WyZ9FuwAYbkdBNA==",
+      "dev": true
+    },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "dev": true
+    },
+    "enhanced-resolve": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
+      "integrity": "sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      }
+    },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+    },
+    "envinfo": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "dev": true
+    },
+    "es-module-lexer": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
+      "dev": true
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        }
+      }
+    },
+    "estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "dev": true
+    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true
+    },
+    "execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      }
+    },
+    "express": {
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.2.tgz",
+      "integrity": "sha512-oxlxJxcQlYwqPWKVJJtvQiwHgosH/LrLSPA+H4UxpyvSS6jC5aH+5MoHFM+KABgTOt0APue4w66Ha8jCUo9QGg==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.1",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.9.6",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.17.2",
+        "serve-static": "1.14.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "array-flatten": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        }
+      }
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fastest-levenshtein": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
+      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
+      "dev": true
+    },
+    "fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dev": true,
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
+    },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      }
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
+      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
+      "dev": true
+    },
+    "forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "dev": true
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "dev": true
+    },
+    "fs-monkey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true
+    },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true
+    },
+    "globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true
+    },
+    "globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
+      "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
+      "dev": true
+    },
+    "handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
+      "dev": true
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "has-symbols": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "dev": true
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+    },
+    "hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        }
+      }
+    },
+    "html-entities": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
+      "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
+      "dev": true
+    },
+    "html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+      "requires": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "8.3.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+        }
+      }
+    },
+    "html-webpack-plugin": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
+      "integrity": "sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==",
+      "requires": {
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
+      }
+    },
+    "htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=",
+      "dev": true
+    },
+    "http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "dev": true,
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      }
+    },
+    "http-parser-js": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.5.tgz",
+      "integrity": "sha512-x+JVEkO2PoM8qqpbPbOL3cqHPwerep7OwzK7Ay+sMQjKzaKCqWvjoXm5tqMP9tXWWTnTzAjIhXg+J99XYuPhPA==",
+      "dev": true
+    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.1.tgz",
+      "integrity": "sha512-cfaXRVoZxSed/BmkA7SwBVNI9Kj7HFltaE5rqYOub5kWzWZ+gofV2koVN1j2rMW7pEfSSlCHGJ31xmuyFyfLOg==",
+      "dev": true,
+      "requires": {
+        "@types/http-proxy": "^1.17.5",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      }
+    },
+    "human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true
+    },
+    "ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true
+    },
+    "import-local": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
+      "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+      "dev": true,
+      "requires": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      }
+    },
+    "indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "interpret": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
+      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
+      "dev": true
+    },
+    "ip": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
+      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
+      "dev": true
+    },
+    "ipaddr.js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
+      "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
+      "dev": true
+    },
+    "is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-core-module": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
+      "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-path-cwd": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ=="
+    },
+    "is-path-in-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
+      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
+      "requires": {
+        "is-path-inside": "^2.1.0"
+      },
+      "dependencies": {
+        "is-path-inside": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
+          "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
+          "requires": {
+            "path-is-inside": "^1.0.2"
+          }
+        }
+      }
+    },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true
+    },
+    "is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "dev": true
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true
+    },
+    "is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0"
+      }
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "dev": true
+    },
+    "jest-worker": {
+      "version": "27.4.6",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.6.tgz",
+      "integrity": "sha512-gHWJF/6Xi5CTG5QCvROr6GcmpIqNYpDJyc8A1h/DyXqH1tD6SnRCM0d3U5msV31D2LB/U+E0M+W4oyvKV44oNw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json5": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true
+    },
+    "loader-runner": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
+      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
+      "dev": true
+    },
+    "loader-utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "dev": true,
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        }
+      }
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
+      "dev": true
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "requires": {
+        "semver": "^6.0.0"
+      }
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "dev": true
+    },
+    "memfs": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.1.tgz",
+      "integrity": "sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==",
+      "dev": true,
+      "requires": {
+        "fs-monkey": "1.0.3"
+      }
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
+      "dev": true
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.2.3"
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true
+    },
+    "mime-db": {
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
+      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.34",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
+      "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.51.0"
+      }
+    },
+    "mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "multicast-dns": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
+      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
+      "dev": true,
+      "requires": {
+        "dns-packet": "^1.3.1",
+        "thunky": "^1.0.2"
+      }
+    },
+    "multicast-dns-service-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
+      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
+      "dev": true
+    },
+    "nanoid": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
+      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
+      "dev": true
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
+      "dev": true
+    },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "requires": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node-forge": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
+      "integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==",
+      "dev": true
+    },
+    "node-releases": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
+      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.0.0"
+      }
+    },
+    "nth-check": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
+    "object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
+      "dev": true
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dev": true,
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^2.1.0"
+      }
+    },
+    "open": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "dev": true,
+      "requires": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      }
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "requires": {
+        "aggregate-error": "^3.0.0"
+      }
+    },
+    "p-retry": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.1.tgz",
+      "integrity": "sha512-e2xXGNhZOZ0lfgR9kL34iGlU8N/KO0xZnQxVEwdeOvpqNDQfdnxIYizvWtK8RglUa3bGqI8g0R/BdfzLMxRkiA==",
+      "dev": true,
+      "requires": {
+        "@types/retry": "^0.12.0",
+        "retry": "^0.13.1"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true
+    },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+    },
+    "path-is-inside": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM="
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
+    "pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.0.0"
+      }
+    },
+    "portfinder": {
+      "version": "1.0.28",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
+      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.2",
+        "debug": "^3.1.1",
+        "mkdirp": "^0.5.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "postcss": {
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+      "dev": true,
+      "requires": {
+        "nanoid": "^3.1.30",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.1"
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true
+    },
+    "postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz",
+      "integrity": "sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "pretty-error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+      "requires": {
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
+      }
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dev": true,
+      "requires": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "dependencies": {
+        "ipaddr.js": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+          "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+          "dev": true
+        }
+      }
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
+      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==",
+      "dev": true
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true
+    },
+    "raw-body": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
+      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.1",
+        "http-errors": "1.8.1",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
+          "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
+          "dev": true
+        }
+      }
+    },
+    "react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-dom": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.2"
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "rechoir": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
+      "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.9.0"
+      }
+    },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "regenerate-unicode-properties": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz",
+      "integrity": "sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==",
+      "dev": true,
+      "requires": {
+        "regenerate": "^1.4.2"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "dev": true
+    },
+    "regenerator-transform": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
+      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "regexp.prototype.flags": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
+      "integrity": "sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "regexpu-core": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz",
+      "integrity": "sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==",
+      "dev": true,
+      "requires": {
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^9.0.0",
+        "regjsgen": "^0.5.2",
+        "regjsparser": "^0.7.0",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.0.0"
+      }
+    },
+    "regjsgen": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==",
+      "dev": true
+    },
+    "regjsparser": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.7.0.tgz",
+      "integrity": "sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==",
+      "dev": true,
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
+          "dev": true
+        }
+      }
+    },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
+    },
+    "renderkid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+      "requires": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz",
+      "integrity": "sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.8.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^5.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true
+    },
+    "retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "schema-utils": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
+      }
+    },
+    "select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
+      "dev": true
+    },
+    "selfsigned": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.0.tgz",
+      "integrity": "sha512-cUdFiCbKoa1mZ6osuJs2uDHrs0k0oprsKveFiiaBKCNq3SYyb5gs2HxhQyDNLCmL51ZZThqi4YNDpCK6GOP1iQ==",
+      "dev": true,
+      "requires": {
+        "node-forge": "^1.2.0"
+      }
+    },
+    "semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true
+    },
+    "send": {
+      "version": "0.17.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
+      "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "1.8.1",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+              "dev": true
+            }
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
+        }
+      }
+    },
+    "serialize-javascript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
+      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+          "dev": true,
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": ">= 1.4.0 < 2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+          "dev": true
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz",
+      "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==",
+      "dev": true,
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.2"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true
+    },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "signal-exit": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
+      "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==",
+      "dev": true
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "sockjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+      "dev": true,
+      "requires": {
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
+      }
+    },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      }
+    },
+    "spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      }
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+      "dev": true
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^6.0.1"
+      }
+    },
+    "strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true
+    },
+    "style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
+    "tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
+    },
+    "terser": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
+      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.7.2",
+        "source-map-support": "~0.5.20"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+        }
+      }
+    },
+    "terser-webpack-plugin": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.0.tgz",
+      "integrity": "sha512-LPIisi3Ol4chwAaPP8toUJ3L4qCM1G0wao7L3qNv57Drezxj6+VEyySpPw4B1HSO2Eg/hDY/MNF5XihCAoqnsQ==",
+      "dev": true,
+      "requires": {
+        "jest-worker": "^27.4.1",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.0",
+        "source-map": "^0.6.1",
+        "terser": "^5.7.2"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
+      "dev": true
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "dev": true
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true
+    },
+    "tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dev": true,
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "dev": true
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==",
+      "dev": true
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==",
+      "dev": true
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "dev": true
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "dev": true
+    },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "dev": true
+    },
+    "watchpack": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
+      "integrity": "sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==",
+      "dev": true,
+      "requires": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "dev": true,
+      "requires": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "webpack": {
+      "version": "5.66.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.66.0.tgz",
+      "integrity": "sha512-NJNtGT7IKpGzdW7Iwpn/09OXz9inIkeIQ/ibY6B+MdV1x6+uReqz/5z1L89ezWnpPDWpXF0TY5PCYKQdWVn8Vg==",
+      "dev": true,
+      "requires": {
+        "@types/eslint-scope": "^3.7.0",
+        "@types/estree": "^0.0.50",
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/wasm-edit": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "acorn": "^8.4.1",
+        "acorn-import-assertions": "^1.7.6",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.8.3",
+        "es-module-lexer": "^0.9.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-better-errors": "^1.0.2",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.1.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.1.3",
+        "watchpack": "^2.3.1",
+        "webpack-sources": "^3.2.2"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "webpack-cli": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
+      "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
+      "dev": true,
+      "requires": {
+        "@discoveryjs/json-ext": "^0.5.0",
+        "@webpack-cli/configtest": "^1.1.0",
+        "@webpack-cli/info": "^1.4.0",
+        "@webpack-cli/serve": "^1.6.0",
+        "colorette": "^2.0.14",
+        "commander": "^7.0.0",
+        "execa": "^5.0.0",
+        "fastest-levenshtein": "^1.0.12",
+        "import-local": "^3.0.2",
+        "interpret": "^2.2.0",
+        "rechoir": "^0.7.0",
+        "webpack-merge": "^5.7.3"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        }
+      }
+    },
+    "webpack-dev-middleware": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.0.tgz",
+      "integrity": "sha512-MouJz+rXAm9B1OTOYaJnn6rtD/lWZPy2ufQCH3BPs8Rloh/Du6Jze4p7AeLYHkVi0giJnYLaSGDC7S+GM9arhg==",
+      "dev": true,
+      "requires": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.2.2",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.9.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
+          "integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        }
+      }
+    },
+    "webpack-dev-server": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.3.tgz",
+      "integrity": "sha512-mlxq2AsIw2ag016nixkzUkdyOE8ST2GTy34uKSABp1c4nhjZvH90D5ZRR+UOLSsG4Z3TFahAi72a3ymRtfRm+Q==",
+      "dev": true,
+      "requires": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/serve-index": "^1.9.1",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.2.2",
+        "ansi-html-community": "^0.0.8",
+        "bonjour": "^3.5.0",
+        "chokidar": "^3.5.2",
+        "colorette": "^2.0.10",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^1.6.0",
+        "default-gateway": "^6.0.3",
+        "del": "^6.0.0",
+        "express": "^4.17.1",
+        "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
+        "http-proxy-middleware": "^2.0.0",
+        "ipaddr.js": "^2.0.1",
+        "open": "^8.0.9",
+        "p-retry": "^4.5.0",
+        "portfinder": "^1.0.28",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.0.0",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.21",
+        "spdy": "^4.0.2",
+        "strip-ansi": "^7.0.0",
+        "webpack-dev-middleware": "^5.3.0",
+        "ws": "^8.1.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.9.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
+          "integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        }
+      }
+    },
+    "webpack-merge": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
+      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "wildcard": "^2.0.0"
+      }
+    },
+    "webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true
+    },
+    "websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dev": true,
+      "requires": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "dev": true
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "wildcard": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
+      "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "ws": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.2.tgz",
+      "integrity": "sha512-Kbk4Nxyq7/ZWqr/tarI9yIt/+iNNFOjBXEWgTb4ydaNHBNGgvf2QHbS9fdfsndfjFlFwEd4Al+mw83YkaD10ZA==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..44e8b8c7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "react-payments",
+  "version": "1.0.0",
+  "description": "<p align=\"middle\" >   <img src=\"https://techcourse-storage.s3.ap-northeast-2.amazonaws.com/0fefce79602043a9b3281ee1dd8f4be6\" width=\"400\"> </p> <h2 align=\"middle\">페이먼츠</h2> <p align=\"middle\">React 모바일 페이먼츠 애플리케이션</p> </p>",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server --progress --mode development",
+    "build": "webpack --progress --mode production"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Outwater/react-payments.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Outwater/react-payments/issues"
+  },
+  "homepage": "https://github.com/Outwater/react-payments#readme",
+  "dependencies": {
+    "clean-webpack-plugin": "^4.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-react": "^7.16.7",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.5.1",
+    "file-loader": "^6.2.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.66.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
+  }
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 00000000..1fedf587
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Clean Code Payments</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 00000000..40bbd2e8
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,3 @@
+.test {
+  background-color: red;
+}
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 00000000..db5ab0c0
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import "./App.css";
+
+const App = () => {
+  return <div className="test">init test</div>;
+};
+
+export default App;
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..c24e9d80
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 00000000..ff8e48d6
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,48 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+  mode: "development",
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  devtool: "eval-cheap-source-map",
+  devServer: {
+    // 정적 파일 경로 설정
+    port: 3000,
+    // devserver 에서만 핫로딩 가능하게
+    hot: true,
+  },
+  output: {
+    filename: "bundle.js",
+    path: path.resolve(__dirname, "dist"),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: "/node_modules/",
+        loader: "babel-loader",
+        options: { presets: ["@babel/env"] },
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.jfif$/,
+        loader: "file-loader",
+        options: {
+          publicPath: "./dist/",
+          name: "[name].[ext]",
+        },
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({ template: "./public/index.html" }),
+  ],
+};

From 0e1f73ebfa4538de744e61590f02dde9058782b7 Mon Sep 17 00:00:00 2001
From: Insoo-Seo <kocon135@gmail.com>
Date: Thu, 20 Jan 2022 18:00:39 +0900
Subject: [PATCH 2/9] =?UTF-8?q?add:=20react-router=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20docs=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/TODO.md                    | 27 +++++++++++++++++++++++++++
 package-lock.json               | 29 ++++++++++++++++++++++++++---
 package.json                    |  3 ++-
 src/App.css                     |  3 ---
 src/App.jsx                     | 17 +++++++++++++++--
 src/index.js                    |  1 +
 src/pages/Add.jsx               |  7 +++++++
 src/pages/Alias.jsx             |  7 +++++++
 src/pages/List.jsx              |  7 +++++++
 {docs => src}/styles/button.css |  0
 {docs => src}/styles/card.css   |  0
 {docs => src}/styles/index.css  |  0
 {docs => src}/styles/input.css  |  0
 {docs => src}/styles/modal.css  |  0
 {docs => src}/styles/utils.css  |  0
 webpack.config.js               |  2 ++
 16 files changed, 94 insertions(+), 9 deletions(-)
 delete mode 100644 src/App.css
 create mode 100644 src/pages/Add.jsx
 create mode 100644 src/pages/Alias.jsx
 create mode 100644 src/pages/List.jsx
 rename {docs => src}/styles/button.css (100%)
 rename {docs => src}/styles/card.css (100%)
 rename {docs => src}/styles/index.css (100%)
 rename {docs => src}/styles/input.css (100%)
 rename {docs => src}/styles/modal.css (100%)
 rename {docs => src}/styles/utils.css (100%)

diff --git a/docs/TODO.md b/docs/TODO.md
index aac472ff..2b9dabb5 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -2,6 +2,33 @@
 
 ## TODO
 
+- 페이지
+
+  - [ ] List 페이지
+  - [ ] Add 페이지
+  - [ ] Alias 페이지
+
+- 컴포넌트
+
+  - [ ] Card 컴포넌트
+  - [ ] CardForm 컴포넌트
+  - [ ] Modal 컴포넌트
+
+- 그외
+  - [ ] 라우터 구현 (페이지 이동)
+
+## 작업순서
+
+- [ ] 기본 라우터 세팅(react-router-dom)
+  - [ ] 다음, 뒤로가기로 페이지 이동
+    - Add -> (modal) -> Alias -> List <-> Add
+- [ ] Add 페이지
+  - [ ] Card 컴포넌트
+  - [ ] CadrForm 컴포넌트
+  - [ ] Modal 컴포넌트
+- [ ] Alias 페이지
+- [ ] List 페이지
+
 ## 요구사항 리스트
 
 #### 카드 추가
diff --git a/package-lock.json b/package-lock.json
index 794dcf29..3fb8eb5c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1105,7 +1105,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
       "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -2912,6 +2911,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -4020,6 +4027,23 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -4067,8 +4091,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
diff --git a/package.json b/package.json
index 44e8b8c7..7fe032b1 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "clean-webpack-plugin": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 40bbd2e8..00000000
--- a/src/App.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.test {
-  background-color: red;
-}
diff --git a/src/App.jsx b/src/App.jsx
index db5ab0c0..5eb8ee0c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,21 @@
 import React from "react";
-import "./App.css";
+import AddPage from "./pages/Add";
+import AliasPage from "./pages/Alias";
+import ListPage from "./pages/List";
+
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 const App = () => {
-  return <div className="test">init test</div>;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<AddPage />} />
+        <Route path="add" element={<AddPage />} />
+        <Route path="alias" element={<AliasPage />} />
+        <Route path="list" element={<ListPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
 };
 
 export default App;
diff --git a/src/index.js b/src/index.js
index c24e9d80..1ccdf637 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+
 import App from "./App";
 
 ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/src/pages/Add.jsx b/src/pages/Add.jsx
new file mode 100644
index 00000000..1feb7acf
--- /dev/null
+++ b/src/pages/Add.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Add = () => {
+  return <div>AddPage</div>;
+};
+
+export default Add;
diff --git a/src/pages/Alias.jsx b/src/pages/Alias.jsx
new file mode 100644
index 00000000..2e5c3455
--- /dev/null
+++ b/src/pages/Alias.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Alias = () => {
+  return <div>AliasPage</div>;
+};
+
+export default Alias;
diff --git a/src/pages/List.jsx b/src/pages/List.jsx
new file mode 100644
index 00000000..f56b780e
--- /dev/null
+++ b/src/pages/List.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const List = () => {
+  return <div>ListPage</div>;
+};
+
+export default List;
diff --git a/docs/styles/button.css b/src/styles/button.css
similarity index 100%
rename from docs/styles/button.css
rename to src/styles/button.css
diff --git a/docs/styles/card.css b/src/styles/card.css
similarity index 100%
rename from docs/styles/card.css
rename to src/styles/card.css
diff --git a/docs/styles/index.css b/src/styles/index.css
similarity index 100%
rename from docs/styles/index.css
rename to src/styles/index.css
diff --git a/docs/styles/input.css b/src/styles/input.css
similarity index 100%
rename from docs/styles/input.css
rename to src/styles/input.css
diff --git a/docs/styles/modal.css b/src/styles/modal.css
similarity index 100%
rename from docs/styles/modal.css
rename to src/styles/modal.css
diff --git a/docs/styles/utils.css b/src/styles/utils.css
similarity index 100%
rename from docs/styles/utils.css
rename to src/styles/utils.css
diff --git a/webpack.config.js b/webpack.config.js
index ff8e48d6..fbe1f247 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,10 +14,12 @@ module.exports = {
     port: 3000,
     // devserver 에서만 핫로딩 가능하게
     hot: true,
+    historyApiFallback: true,
   },
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "dist"),
+    publicPath: "/",
   },
   module: {
     rules: [

From f7b859414f2bcbccdb756ddfbddeaac309112d0d Mon Sep 17 00:00:00 2001
From: Insoo-Seo <kocon135@gmail.com>
Date: Fri, 21 Jan 2022 10:53:11 +0900
Subject: [PATCH 3/9] =?UTF-8?q?style:=20root=20style=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/index.html      | 2 +-
 src/index.js         | 2 +-
 src/styles/index.css | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 339cc147..c72a5cb4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="./styles/index.css" />
+    <link rel="stylesheet" href="../src/styles/index.css" />
     <title>React Clean Code Payments</title>
   </head>
   <body>
diff --git a/src/index.js b/src/index.js
index 1ccdf637..aa499d5f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-
+import "./styles/index.css";
 import App from "./App";
 
 ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/src/styles/index.css b/src/styles/index.css
index 783a2e38..5bafed42 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -17,7 +17,10 @@ input {
   font-size: 16px;
 }
 
-.root {
+#root {
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
   background-color: #fff;
   width: 375px;
   min-width: 375px;

From 5e9832f8bea9182d3064e463ea2eb47894848ddd Mon Sep 17 00:00:00 2001
From: Insoo-Seo <kocon135@gmail.com>
Date: Fri, 21 Jan 2022 10:53:54 +0900
Subject: [PATCH 4/9] =?UTF-8?q?feat:=20router=EB=A1=9C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/TODO.md        |  5 +++--
 src/pages/Add.jsx   | 26 +++++++++++++++++++++++++-
 src/pages/Alias.jsx | 24 +++++++++++++++++++++++-
 src/pages/List.jsx  | 16 +++++++++++++++-
 4 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/docs/TODO.md b/docs/TODO.md
index 2b9dabb5..9534c81a 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -19,8 +19,9 @@
 
 ## 작업순서
 
-- [ ] 기본 라우터 세팅(react-router-dom)
-  - [ ] 다음, 뒤로가기로 페이지 이동
+- [ ] eslint, prettier 적용하기
+- [x] 기본 라우터 세팅(react-router-dom)
+  - [x] 다음, 뒤로가기로 페이지 이동
     - Add -> (modal) -> Alias -> List <-> Add
 - [ ] Add 페이지
   - [ ] Card 컴포넌트
diff --git a/src/pages/Add.jsx b/src/pages/Add.jsx
index 1feb7acf..068dfd1d 100644
--- a/src/pages/Add.jsx
+++ b/src/pages/Add.jsx
@@ -1,7 +1,31 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 const Add = () => {
-  return <div>AddPage</div>;
+  return (
+    <div className="app">
+      <div className="page-title">
+        <Link to="/list" style={{ color: "inherit", textDecoration: "none" }}>
+          &lt;
+        </Link>
+        카드 추가
+      </div>
+      <div className="card-box">card</div>
+      {/* <Card />
+      <CardForm /> */}
+
+      <div class="button-box">
+        <span class="button-text">
+          <Link
+            to="/alias"
+            style={{ color: "inherit", textDecoration: "none" }}
+          >
+            다음
+          </Link>
+        </span>
+      </div>
+    </div>
+  );
 };
 
 export default Add;
diff --git a/src/pages/Alias.jsx b/src/pages/Alias.jsx
index 2e5c3455..4a06ea4d 100644
--- a/src/pages/Alias.jsx
+++ b/src/pages/Alias.jsx
@@ -1,7 +1,29 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 const Alias = () => {
-  return <div>AliasPage</div>;
+  return (
+    <div class="app flex-column-center">
+      <div class="flex-center">
+        <h2 class="page-title mb-10">카드등록이 완료되었습니다.</h2>
+      </div>
+      <div className="card-box">Card</div>
+      <div class="input-container flex-center w-100">
+        <input
+          class="input-underline w-75"
+          type="text"
+          placeholder="카드의 별칭을 입력해주세요."
+        />
+      </div>
+      <div class="button-box mt-50">
+        <span class="button-text">
+          <Link to="/list" style={{ color: "inherit", textDecoration: "none" }}>
+            다음
+          </Link>
+        </span>
+      </div>
+    </div>
+  );
 };
 
 export default Alias;
diff --git a/src/pages/List.jsx b/src/pages/List.jsx
index f56b780e..3e1dd361 100644
--- a/src/pages/List.jsx
+++ b/src/pages/List.jsx
@@ -1,7 +1,21 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 const List = () => {
-  return <div>ListPage</div>;
+  return (
+    <div class="app flex-column-center">
+      <div class="flex-center">
+        <div className="page-title mb-10">보유 카드</div>
+      </div>
+      <div class="card-box">
+        <div class="empty-card">
+          <Link style={{ color: "inherit", textDecoration: "none" }} to="/add">
+            +
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default List;

From b746e1bb813ef77560b6b322a5b6b2df08b6a6ea Mon Sep 17 00:00:00 2001
From: Insoo-Seo <kocon135@gmail.com>
Date: Fri, 21 Jan 2022 13:21:56 +0900
Subject: [PATCH 5/9] =?UTF-8?q?feat:=20Card=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20UI=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/TODO.md            |  64 +++++++++--------
 src/components/Card.jsx |  29 ++++++++
 src/pages/Add.jsx       | 154 ++++++++++++++++++++++++++++++++++++++--
 3 files changed, 213 insertions(+), 34 deletions(-)
 create mode 100644 src/components/Card.jsx

diff --git a/docs/TODO.md b/docs/TODO.md
index 9534c81a..f2c8b8d8 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -2,74 +2,82 @@
 
 ## TODO
 
-- 페이지
+- [ ] Card 컴포넌트
+  - CardForm으로 부터 데이터를 입력받아 UI에 반영한다.
+    - [x] 카드 번호 4자리마다 `-`가 삽입된다.
+    - [x] 카드 번호는 실시간으로 카드 UI에 반영된다.
+    - [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
+    - [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
+- [ ] CardForm 컴포넌트 (input with 카드번호)
 
-  - [ ] List 페이지
-  - [ ] Add 페이지
-  - [ ] Alias 페이지
+  - input 컴포넌트 설계
 
-- 컴포넌트
+  - input onChange로 값 변경하기
 
-  - [ ] Card 컴포넌트
-  - [ ] CardForm 컴포넌트
-  - [ ] Modal 컴포넌트
-
-- 그외
-  - [ ] 라우터 구현 (페이지 이동)
+  - input 입력 완료시 focus 기능 추가
+    - [ ] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
+  - input onChage시 validation 기능 추가
+    - [ ] 카드 번호는 숫자만 입력가능하다.
+    - [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
+    - [ ] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 
 ## 작업순서
 
 - [ ] eslint, prettier 적용하기
 - [x] 기본 라우터 세팅(react-router-dom)
   - [x] 다음, 뒤로가기로 페이지 이동
-    - Add -> (modal) -> Alias -> List <-> Add
 - [ ] Add 페이지
-  - [ ] Card 컴포넌트
+  - [x] Card 컴포넌트
   - [ ] CadrForm 컴포넌트
+    - [ ] input 컴포넌트 설계
+    - [ ] input onChange로 값 변경하기
+    - [ ] input onChage시 validation 기능 추가
+    - [ ] input 입력 완료시 focus 기능 추가
   - [ ] Modal 컴포넌트
 - [ ] Alias 페이지
 - [ ] List 페이지
 
+- StoryBook 적용
+
+- Refactoring
+  - [ ] cardData 상위컴포넌트로 위치변경
+  - [ ] cardData들 하나의 상태(formData)로 묶기
+
 ## 요구사항 리스트
 
 #### 카드 추가
 
-- [ ] `<`(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
+- [x] `<`(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
 - [ ] 카드 번호를 입력 받을 수 있다.
-  - [ ] 카드 번호입력 폼에 라벨을 보여준다.
   - [ ] 카드 번호는 숫자만 입력가능하다.
-  - [ ] 카드 번호 4자리마다 `-`가 삽입된다.
-  - [ ] 카드 번호는 실시간으로 카드 UI에 반영된다.
-  - [ ] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
+  - [x] 카드 번호 4자리마다 `-`가 삽입된다.
+  - [x] 카드 번호는 실시간으로 카드 UI에 반영된다.
+  - [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
   - [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
   - [ ] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
   - [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
   - [ ] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 만료일을 입력 받을 수 있다.
-  - [ ] 만료일 입력 폼에 라벨을 보여준다.
-  - [ ] `MM / YY` 로 placeholder를 적용한다.
-  - [ ] 월, 년 사이에 자동으로 `/`가 삽입된다.
-  - [ ] 만료일은 실시간으로 카드 UI에 반영된다.
+  - [x] `MM / YY` 로 placeholder를 적용한다.
+  - [x] 월, 년 사이에 자동으로 `/`가 삽입된다.
+  - [x] 만료일은 실시간으로 카드 UI에 반영된다.
   - [ ] 월은 1이상 12이하 숫자여야 한다.
   - [ ] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
   - [ ] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 보안코드를 입력 받을 수 있다.
-  - [ ] 카드 보안코드 입력 폼에 라벨을 보여준다.
-  - [ ] 보안코드는 `*`으로 보여진다.
+  - [x] 보안코드는 `*`으로 보여진다.
   - [ ] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
   - [ ] 보안코드는 숫자만 입력가능하다.
   - [ ] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
-  - [ ] 카드 비밀번호 입력 폼에 라벨을 보여준다.
   - [ ] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
   - [ ] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
-  - [ ] 카드 번호 입력 시, `*`으로 보여진다.
+  - [x] 카드 번호 입력 시, `*`으로 보여진다.
   - [ ] 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 카드 소유자 이름을 입력 받을 수 있다.
-  - [ ] 카드 소유자 이름 입력 폼 라벨을 보여준다.
   - [ ] 이름은 30자리까지 입력할 수 있다.
   - [ ] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
-- [ ] 클릭 시, 카드 등록 완료 페이지로 이동한다.
+- [x] 클릭 시, 카드 등록 완료 페이지로 이동한다.
 
 ### 심화 요구사항 (선택사항)
 
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
new file mode 100644
index 00000000..8f3d1f50
--- /dev/null
+++ b/src/components/Card.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+const Card = ({ card }) => {
+  return (
+    <div className="card-box">
+      <div className="empty-card">
+        <div className="card-top">
+          <span className="card-text">{card.cardName}</span>
+        </div>
+        <div className="card-middle">
+          <div className="small-card__chip"></div>
+        </div>
+        <div className="card-bottom">
+          <div className="card-bottom__number">
+            <span className="card-text">
+              {card.number
+                ?.map((v, i) => (i >= 2 ? "o".repeat(v.length) : v))
+                .join(" - ")}
+            </span>
+          </div>
+          <div className="card-bottom__info">
+            <span className="card-text">{card.ownerName}</span>
+            <span className="card-text">{card.expire?.join(" / ")}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Card;
diff --git a/src/pages/Add.jsx b/src/pages/Add.jsx
index 068dfd1d..87af5a34 100644
--- a/src/pages/Add.jsx
+++ b/src/pages/Add.jsx
@@ -1,7 +1,57 @@
-import React from "react";
+import React, { useState } from "react";
+import Card from "../components/Card";
 import { Link } from "react-router-dom";
 
 const Add = () => {
+  const [number, setNumber] = useState(["1111", "2222", "3333", "4444"]);
+  const [expire, setExpire] = useState(["MM", "YY"]);
+  const [ownerName, setOwnerName] = useState("NAME");
+  const [securityCVC, setSecurityCVC] = useState(); // '123'
+  const [password, setPassword] = useState(["", "", "", ""]); // [[1],[2],[3],[4]]
+  const [cardName, setCardName] = useState("국민카드");
+
+  const cardData = {
+    number,
+    expire,
+    ownerName,
+    securityCVC,
+    password,
+    cardName,
+  };
+  const handleChangeCardData = ({ target }) => {
+    target.dataset.name === "owner" && setOwnerName(target.value);
+    target.dataset.name === "cvc" &&
+      setSecurityCVC(target.value) & console.log("cvc변경: ", target.value);
+  };
+
+  const handleChangeNumber = ({ target }) => {
+    const newNumber = [...number];
+    const index = target.dataset.name - 1;
+
+    newNumber.forEach((_, i) =>
+      i === index ? (newNumber[i] = target.value) : null
+    );
+    setNumber(newNumber);
+  };
+
+  const handleChangePassword = ({ target }) => {
+    const newPassword = [...password];
+    const index = target.dataset.name - 1;
+
+    newPassword.forEach((_, i) =>
+      i === index ? (newPassword[i] = target.value) : null
+    );
+    setPassword(newPassword) & console.log("password변경: ", target.value);
+  };
+  const handleChangeExpires = ({ target }) => {
+    const newExpire = [...expire];
+    if (target.dataset.name === "MM") {
+      newExpire[0] = target.value;
+    } else if (target.dataset.name === "YY") {
+      newExpire[1] = target.value;
+    }
+    setExpire(newExpire);
+  };
   return (
     <div className="app">
       <div className="page-title">
@@ -10,12 +60,104 @@ const Add = () => {
         </Link>
         카드 추가
       </div>
-      <div className="card-box">card</div>
-      {/* <Card />
-      <CardForm /> */}
+      <Card card={cardData} />
+      <div className="input-container">
+        <span className="input-title">카드 번호</span>
+        <div className="input-box">
+          <input
+            className="input-basic"
+            type="text"
+            onChange={handleChangeNumber}
+            data-name="1"
+          />
+          <input
+            className="input-basic"
+            type="text"
+            onChange={handleChangeNumber}
+            data-name="2"
+          />
+          <input
+            className="input-basic"
+            type="password"
+            onChange={handleChangeNumber}
+            data-name="3"
+          />
+          <input
+            className="input-basic"
+            type="password"
+            onChange={handleChangeNumber}
+            data-name="4"
+          />
+        </div>
+      </div>
+      <div className="input-container">
+        <span className="input-title">만료일</span>
+        <div className="input-box w-50">
+          <input
+            className="input-basic"
+            type="text"
+            placeholder="MM"
+            onChange={handleChangeExpires}
+            data-name="MM"
+          />
+          <input
+            className="input-basic"
+            type="text"
+            placeholder="YY"
+            onChange={handleChangeExpires}
+            data-name="MM"
+          />
+        </div>
+      </div>
+      <div className="input-container">
+        <span className="input-title">카드 소유자 이름(선택)</span>
 
-      <div class="button-box">
-        <span class="button-text">
+        <input
+          onChange={handleChangeCardData}
+          type="text"
+          className="input-basic"
+          placeholder="카드에 표시된 이름과 동일하게 입력하세요."
+          data-name="owner"
+        />
+      </div>
+      <div className="input-container">
+        <span className="input-title">보안코드(CVC/CVV)</span>
+        <input
+          className="input-basic w-25"
+          type="password"
+          onChange={handleChangeCardData}
+          data-name="cvc"
+        />
+      </div>
+      <div className="input-container">
+        <span className="input-title">카드 비밀번호</span>
+        <input
+          className="input-basic w-15"
+          type="password"
+          onChange={handleChangePassword}
+          data-name="1"
+        />
+        <input
+          className="input-basic w-15"
+          type="password"
+          onChange={handleChangePassword}
+          data-name="2"
+        />
+        <input
+          className="input-basic w-15"
+          type="password"
+          onChange={handleChangePassword}
+          data-name="3"
+        />
+        <input
+          className="input-basic w-15"
+          type="password"
+          onChange={handleChangePassword}
+          data-name="4"
+        />
+      </div>
+      <div className="button-box">
+        <span className="button-text">
           <Link
             to="/alias"
             style={{ color: "inherit", textDecoration: "none" }}

From 1c859a68a266ab11814163322bf5ac84985b0f46 Mon Sep 17 00:00:00 2001
From: Insoo-Seo <kocon135@gmail.com>
Date: Mon, 24 Jan 2022 18:50:57 +0900
Subject: [PATCH 6/9] =?UTF-8?q?feat:=20cardDataForm=20=EC=A0=9C=EC=96=B4?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20&=20=EA=B8=B0=EB=B3=B8=20validation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/TODO.md             |  53 ++----
 docs/index.html          |  12 +-
 src/components/Card.jsx  |  13 +-
 src/components/Input.jsx |  31 ++++
 src/pages/Add.jsx        | 384 +++++++++++++++++++++++++++------------
 5 files changed, 332 insertions(+), 161 deletions(-)
 create mode 100644 src/components/Input.jsx

diff --git a/docs/TODO.md b/docs/TODO.md
index f2c8b8d8..c6d9feb3 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -1,26 +1,3 @@
-## 📝 Requirements
-
-## TODO
-
-- [ ] Card 컴포넌트
-  - CardForm으로 부터 데이터를 입력받아 UI에 반영한다.
-    - [x] 카드 번호 4자리마다 `-`가 삽입된다.
-    - [x] 카드 번호는 실시간으로 카드 UI에 반영된다.
-    - [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
-    - [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
-- [ ] CardForm 컴포넌트 (input with 카드번호)
-
-  - input 컴포넌트 설계
-
-  - input onChange로 값 변경하기
-
-  - input 입력 완료시 focus 기능 추가
-    - [ ] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
-  - input onChage시 validation 기능 추가
-    - [ ] 카드 번호는 숫자만 입력가능하다.
-    - [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
-    - [ ] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
-
 ## 작업순서
 
 - [ ] eslint, prettier 적용하기
@@ -28,10 +5,10 @@
   - [x] 다음, 뒤로가기로 페이지 이동
 - [ ] Add 페이지
   - [x] Card 컴포넌트
-  - [ ] CadrForm 컴포넌트
-    - [ ] input 컴포넌트 설계
-    - [ ] input onChange로 값 변경하기
-    - [ ] input onChage시 validation 기능 추가
+  - [x] CadrForm 컴포넌트
+    - [x] input 컴포넌트 설계
+    - [x] input onChange로 값 변경하기
+    - [x] input onChage시 validation 기능 추가
     - [ ] input 입력 완료시 focus 기능 추가
   - [ ] Modal 컴포넌트
 - [ ] Alias 페이지
@@ -49,34 +26,34 @@
 
 - [x] `<`(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
 - [ ] 카드 번호를 입력 받을 수 있다.
-  - [ ] 카드 번호는 숫자만 입력가능하다.
+  - [x] 카드 번호는 숫자만 입력가능하다.
   - [x] 카드 번호 4자리마다 `-`가 삽입된다.
   - [x] 카드 번호는 실시간으로 카드 UI에 반영된다.
   - [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
   - [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
   - [ ] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
   - [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
-  - [ ] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+  - [x] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 만료일을 입력 받을 수 있다.
   - [x] `MM / YY` 로 placeholder를 적용한다.
   - [x] 월, 년 사이에 자동으로 `/`가 삽입된다.
   - [x] 만료일은 실시간으로 카드 UI에 반영된다.
-  - [ ] 월은 1이상 12이하 숫자여야 한다.
+  - [x] 월은 1이상 12이하 숫자여야 한다.
   - [ ] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
-  - [ ] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+  - [x] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 보안코드를 입력 받을 수 있다.
   - [x] 보안코드는 `*`으로 보여진다.
   - [ ] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
-  - [ ] 보안코드는 숫자만 입력가능하다.
-  - [ ] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+  - [x] 보안코드는 숫자만 입력가능하다.
+  - [x] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
-  - [ ] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
+  - [x] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
   - [ ] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
   - [x] 카드 번호 입력 시, `*`으로 보여진다.
-  - [ ] 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
-- [ ] 카드 소유자 이름을 입력 받을 수 있다.
-  - [ ] 이름은 30자리까지 입력할 수 있다.
-  - [ ] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
+  - [x] 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [x] 카드 소유자 이름을 입력 받을 수 있다.
+  - [x] 이름은 30자리까지 입력할 수 있다.
+  - [x] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
 - [x] 클릭 시, 카드 등록 완료 페이지로 이동한다.
 
 ### 심화 요구사항 (선택사항)
diff --git a/docs/index.html b/docs/index.html
index c72a5cb4..834c1593 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="../src/styles/index.css" />
-    <title>React Clean Code Payments</title>
+    <title>Sample</title>
   </head>
   <body>
     <h1>React Clean Code Payments CSS example</h1>
@@ -17,7 +17,7 @@ <h1>React Clean Code Payments CSS example</h1>
      -->
 
     <h2>1️⃣ 카드 추가</h2>
-    <div class="root">
+    <div id="root">
       <div class="app">
         <h2 class="page-title">< 카드 추가</h2>
         <div class="card-box">
@@ -82,7 +82,7 @@ <h2 class="page-title">< 카드 추가</h2>
      -->
 
     <h2>2️⃣ 카드 추가 - 카드사 선택</h2>
-    <div class="root">
+    <div id="root">
       <div class="app">
         <h2 class="page-title">< 카드 추가</h2>
         <div class="card-box">
@@ -192,7 +192,7 @@ <h2 class="page-title">< 카드 추가</h2>
      -->
 
     <h2>3️⃣ 카드 추가 - 입력 완료</h2>
-    <div class="root">
+    <div id="root">
       <div class="app">
         <h2 class="page-title">< 카드 추가</h2>
         <div class="card-box">
@@ -268,7 +268,7 @@ <h2 class="page-title">< 카드 추가</h2>
      -->
 
     <h2>4️⃣ 카드 추가 완료</h2>
-    <div class="root">
+    <div id="root">
       <div class="app flex-column-center">
         <div class="flex-center">
           <h2 class="page-title mb-10">카드등록이 완료되었습니다.</h2>
@@ -312,7 +312,7 @@ <h2 class="page-title mb-10">카드등록이 완료되었습니다.</h2>
      -->
 
     <h2>5️⃣ 카드 목록</h2>
-    <div class="root">
+    <div id="root">
       <div class="app flex-column-center">
         <div class="flex-center">
           <h2 class="page-title mb-10">보유 카드</h2>
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 8f3d1f50..8f448840 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -12,14 +12,19 @@ const Card = ({ card }) => {
         <div className="card-bottom">
           <div className="card-bottom__number">
             <span className="card-text">
-              {card.number
-                ?.map((v, i) => (i >= 2 ? "o".repeat(v.length) : v))
+              {Object.values(card.number)
+                .map((v, i) => (i >= 2 ? "*".repeat(v.length) : v))
+                .filter(Boolean)
                 .join(" - ")}
             </span>
           </div>
           <div className="card-bottom__info">
-            <span className="card-text">{card.ownerName}</span>
-            <span className="card-text">{card.expire?.join(" / ")}</span>
+            <span className="card-text">{card.userName}</span>
+            <span className="card-text">
+              {card.expire.MM}
+              {card.expire.MM.length === 2 && " / "}
+              {card.expire.YY}
+            </span>
           </div>
         </div>
       </div>
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
new file mode 100644
index 00000000..af4e2a40
--- /dev/null
+++ b/src/components/Input.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+const Input = ({
+  name,
+  value,
+  type,
+  placeholder,
+  onChange,
+  identifier,
+  width,
+  min,
+  max,
+  ...props
+}) => {
+  return (
+    <input
+      data-name={name}
+      value={value}
+      className={`input-basic ${width}`}
+      type={type}
+      placeholder={placeholder}
+      onChange={onChange}
+      data-identifier={identifier}
+      minLength={min}
+      maxLength={max}
+      {...props}
+    />
+  );
+};
+
+export default Input;
diff --git a/src/pages/Add.jsx b/src/pages/Add.jsx
index 87af5a34..132cb3f7 100644
--- a/src/pages/Add.jsx
+++ b/src/pages/Add.jsx
@@ -1,169 +1,327 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import Card from "../components/Card";
-import { Link } from "react-router-dom";
+import Input from "../components/Input";
 
 const Add = () => {
-  const [number, setNumber] = useState(["1111", "2222", "3333", "4444"]);
-  const [expire, setExpire] = useState(["MM", "YY"]);
-  const [ownerName, setOwnerName] = useState("NAME");
-  const [securityCVC, setSecurityCVC] = useState(); // '123'
-  const [password, setPassword] = useState(["", "", "", ""]); // [[1],[2],[3],[4]]
-  const [cardName, setCardName] = useState("국민카드");
+  const initCardData = {
+    number: {
+      first: "",
+      second: "",
+      third: "",
+      forth: "",
+    },
+    expire: {
+      MM: "",
+      YY: "",
+    },
+    userName: "",
+    CVC: "",
+    password: {
+      first: "",
+      second: "",
+    },
+    cardName: "",
+  };
+  const [cardData, setCardData] = useState(initCardData);
 
-  const cardData = {
-    number,
-    expire,
-    ownerName,
-    securityCVC,
-    password,
-    cardName,
+  const setCardNumber = ({ key, position, target }) => {
+    // cardValidation
+    const isNum = (target) => /^[0-9]+$/.test(target);
+    if (target.value && !isNum(target.value)) {
+      return setErrorMsg({ ...errorMsg, cardNumber: ERROR_MESSAGE.cardNumber });
+    }
+    // changeValue
+    setCardData({
+      ...cardData,
+      [key]: {
+        ...cardData[key],
+        [position]: target.value,
+      },
+    });
+    setErrorMsg({ ...errorMsg, cardNumber: null });
+    //focus이동
+    if (position === "forth" && target.value.length === 4) {
+      console.log("focus 이동 to expire");
+    }
   };
-  const handleChangeCardData = ({ target }) => {
-    target.dataset.name === "owner" && setOwnerName(target.value);
-    target.dataset.name === "cvc" &&
-      setSecurityCVC(target.value) & console.log("cvc변경: ", target.value);
+  const setCardExpire = ({ key, position, target }) => {
+    //Validation
+    const checkMonth = (target) => /^(0[1-9]|1[012])$/.test(target);
+    const checkYear = (target) => /^(2[2-9]|[3-9][0-9])$/.test(target);
+    if (target.value.length === 2 && position === "MM") {
+      if (!checkMonth(target.value)) {
+        setErrorMsg({ ...errorMsg, expiredMonth: ERROR_MESSAGE.expiredMonth });
+        return;
+      }
+    }
+    if (target.value.length === 2 && position === "YY") {
+      if (!checkYear(target.value)) {
+        setErrorMsg({ ...errorMsg, expiredYear: ERROR_MESSAGE.expiredYear });
+        return;
+      }
+    }
+
+    setErrorMsg({ ...errorMsg, expiredMonth: null, expiredYear: null });
+    //changeValue
+    setCardData({
+      ...cardData,
+      [key]: {
+        ...cardData[key],
+        [position]: target.value,
+      },
+    });
+    //focus이동
+    if (position === "YY" && target.value.length === 2) {
+      console.log("focus 이동 to cvc");
+    }
   };
+  const setCardPassword = ({ key, position, target }) => {
+    const isNum = (target) => /^[0-9]+$/.test(target);
+    if (target.value && !isNum(target.value)) {
+      setErrorMsg({ ...errorMsg, password: ERROR_MESSAGE.password });
+      return;
+    }
 
-  const handleChangeNumber = ({ target }) => {
-    const newNumber = [...number];
-    const index = target.dataset.name - 1;
+    setErrorMsg({ ...errorMsg, password: null });
+    setCardData({
+      ...cardData,
+      [key]: {
+        ...cardData[key],
+        [position]: target.value,
+      },
+    });
+    if (position === "first" && cardData[key][position].length === 1) {
+      console.log("focus 이동 to second");
+    }
+  };
+  const setCVC = ({ target }) => {
+    const isNum = (target) => /^[0-9]+$/.test(target);
+    if (target.value && !isNum(target.value)) {
+      setErrorMsg({ ...errorMsg, cvc: ERROR_MESSAGE.cvc });
+      return;
+    }
 
-    newNumber.forEach((_, i) =>
-      i === index ? (newNumber[i] = target.value) : null
-    );
-    setNumber(newNumber);
+    setErrorMsg({ ...errorMsg, cvc: null });
+    setCardData({
+      ...cardData,
+      CVC: target.value,
+    });
+    console.log(cardData.CVC);
+    if (target.value.length === 3) {
+      console.log("focus 이동 to second");
+    }
+  };
+  const setUserName = ({ target }) => {
+    setCardData({
+      ...cardData,
+      userName: target.value,
+    });
   };
 
-  const handleChangePassword = ({ target }) => {
-    const newPassword = [...password];
-    const index = target.dataset.name - 1;
+  const [errorMsg, setErrorMsg] = useState({
+    cardNumber: null,
+    expiredMonth: null,
+    expiredYear: null,
+    cvc: null,
+    password: null,
+  });
+  const ERROR_MESSAGE = {
+    cardNumber: "각각 0 - 9 사이의 숫자 4개를 입력해주세요.",
+    expiredMonth: "01 - 12 사이의 두자리 숫자를 입력해주세요.",
+    expiredYear: "22 이상 99 이하의 두자리 숫자를 입력해주세요.",
+    cvc: "0 - 9 사이의 숫자 3개를 입력해주세요.",
+    password: "0 - 9 사이의 숫자를 입력해주세요.",
+  };
 
-    newPassword.forEach((_, i) =>
-      i === index ? (newPassword[i] = target.value) : null
+  const renderDivider = (target, length, sign) =>
+    target.length === length && <span>{sign}</span>;
+  const renderErrorLog = (target) => {
+    return (
+      errorMsg[target] && (
+        <span style={{ color: "red" }}>{`(${errorMsg[target]})`}</span>
+      )
     );
-    setPassword(newPassword) & console.log("password변경: ", target.value);
   };
-  const handleChangeExpires = ({ target }) => {
-    const newExpire = [...expire];
-    if (target.dataset.name === "MM") {
-      newExpire[0] = target.value;
-    } else if (target.dataset.name === "YY") {
-      newExpire[1] = target.value;
-    }
-    setExpire(newExpire);
+  const navigate = useNavigate();
+  const moveListPage = () => {
+    navigate("/list");
+  };
+  const moveNextPage = () => {
+    navigate("/alias");
   };
   return (
     <div className="app">
-      <div className="page-title">
-        <Link to="/list" style={{ color: "inherit", textDecoration: "none" }}>
-          &lt;
-        </Link>
-        카드 추가
+      <div className="page-title" onClick={moveListPage}>
+        &lt; 카드 추가
       </div>
       <Card card={cardData} />
       <div className="input-container">
-        <span className="input-title">카드 번호</span>
+        <span className="input-title">
+          카드 번호 {renderErrorLog("cardNumber")}
+        </span>
         <div className="input-box">
-          <input
-            className="input-basic"
+          <Input
+            value={cardData.number.first}
             type="text"
-            onChange={handleChangeNumber}
-            data-name="1"
+            onChange={(e) =>
+              setCardNumber({
+                key: "number",
+                position: "first",
+                target: e.target,
+              })
+            }
+            min="4"
+            max="4"
           />
-          <input
-            className="input-basic"
+          {renderDivider(cardData.number.first, 4, "-")}
+          <Input
+            value={cardData.number.second}
             type="text"
-            onChange={handleChangeNumber}
-            data-name="2"
+            onChange={(e) =>
+              setCardNumber({
+                key: "number",
+                position: "second",
+                target: e.target,
+              })
+            }
+            min="4"
+            max="4"
           />
-          <input
-            className="input-basic"
+          {renderDivider(cardData.number.second, 4, "-")}
+          <Input
+            value={cardData.number.third}
             type="password"
-            onChange={handleChangeNumber}
-            data-name="3"
+            onChange={(e) =>
+              setCardNumber({
+                key: "number",
+                position: "third",
+                target: e.target,
+              })
+            }
+            min="4"
+            max="4"
           />
-          <input
-            className="input-basic"
+          {renderDivider(cardData.number.third, 4, "-")}
+          <Input
+            value={cardData.number.forth}
             type="password"
-            onChange={handleChangeNumber}
-            data-name="4"
+            onChange={(e) =>
+              setCardNumber({
+                key: "number",
+                position: "forth",
+                target: e.target,
+              })
+            }
+            min="4"
+            max="4"
           />
         </div>
       </div>
       <div className="input-container">
-        <span className="input-title">만료일</span>
+        <span className="input-title">
+          만료일 {renderErrorLog("expiredMonth")}
+          {renderErrorLog("expiredYear")}
+        </span>
         <div className="input-box w-50">
-          <input
-            className="input-basic"
-            type="text"
+          <Input
+            value={cardData.expire.MM}
             placeholder="MM"
-            onChange={handleChangeExpires}
-            data-name="MM"
-          />
-          <input
-            className="input-basic"
             type="text"
+            onChange={(e) =>
+              setCardExpire({
+                key: "expire",
+                position: "MM",
+                target: e.target,
+              })
+            }
+            min="2"
+            max="2"
+          />
+          {renderDivider(cardData.expire.MM, 2, "/")}
+          <Input
+            value={cardData.expire.YY}
             placeholder="YY"
-            onChange={handleChangeExpires}
-            data-name="MM"
+            type="text"
+            onChange={(e) =>
+              setCardExpire({
+                key: "expire",
+                position: "YY",
+                target: e.target,
+              })
+            }
+            min="2"
+            max="2"
           />
         </div>
       </div>
       <div className="input-container">
-        <span className="input-title">카드 소유자 이름(선택)</span>
-
-        <input
-          onChange={handleChangeCardData}
-          type="text"
-          className="input-basic"
+        <span className="input-title">
+          카드 소유자 이름(선택){` ${cardData.userName.length} / 30`}
+        </span>
+        <Input
+          value={cardData.userName}
           placeholder="카드에 표시된 이름과 동일하게 입력하세요."
-          data-name="owner"
+          type="text"
+          onChange={setUserName}
+          max="30"
         />
       </div>
       <div className="input-container">
-        <span className="input-title">보안코드(CVC/CVV)</span>
-        <input
-          className="input-basic w-25"
+        <span className="input-title">
+          보안코드(CVC/CVV) {renderErrorLog("cvc")}
+        </span>
+        <Input
+          value={cardData.CVC}
+          name="cvc"
           type="password"
-          onChange={handleChangeCardData}
-          data-name="cvc"
+          onChange={setCVC}
+          min="3"
+          max="3"
+          width="w-25"
         />
       </div>
       <div className="input-container">
-        <span className="input-title">카드 비밀번호</span>
-        <input
-          className="input-basic w-15"
-          type="password"
-          onChange={handleChangePassword}
-          data-name="1"
-        />
-        <input
-          className="input-basic w-15"
-          type="password"
-          onChange={handleChangePassword}
-          data-name="2"
-        />
-        <input
-          className="input-basic w-15"
+        <span className="input-title">
+          카드 비밀번호{renderErrorLog("password")}
+        </span>
+        <Input
+          value={cardData.password.first}
+          name="password"
           type="password"
-          onChange={handleChangePassword}
-          data-name="3"
+          onChange={(e) =>
+            setCardPassword({
+              key: "password",
+              position: "first",
+              target: e.target,
+            })
+          }
+          min="1"
+          max="1"
+          width="w-15"
         />
-        <input
-          className="input-basic w-15"
+        <Input
+          value={cardData.password.second}
+          name="password"
           type="password"
-          onChange={handleChangePassword}
-          data-name="4"
+          onChange={(e) =>
+            setCardPassword({
+              key: "password",
+              position: "second",
+              target: e.target,
+            })
+          }
+          min="1"
+          max="1"
+          width="w-15"
         />
+
+        <Input type="password" min="1" max="1" width="w-15" />
+        <Input type="password" min="1" max="1" width="w-15" />
       </div>
       <div className="button-box">
-        <span className="button-text">
-          <Link
-            to="/alias"
-            style={{ color: "inherit", textDecoration: "none" }}
-          >
-            다음
-          </Link>
+        <span className="button-text" onClick={moveNextPage}>
+          다음
         </span>
       </div>
     </div>

From 58d808d876e91cf1caefa9ae8d0a75b9e591e9d8 Mon Sep 17 00:00:00 2001
From: Insoo-Seo <kocon135@gmail.com>
Date: Wed, 26 Jan 2022 16:39:24 +0900
Subject: [PATCH 7/9] =?UTF-8?q?feat:=20focus=EC=9D=B4=EB=8F=99=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/TODO.md             | 22 +++++++++++++++++-----
 src/components/Input.jsx |  2 ++
 src/pages/Add.jsx        | 20 +++++++++++++++-----
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/docs/TODO.md b/docs/TODO.md
index c6d9feb3..c14f66ae 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -9,7 +9,7 @@
     - [x] input 컴포넌트 설계
     - [x] input onChange로 값 변경하기
     - [x] input onChage시 validation 기능 추가
-    - [ ] input 입력 완료시 focus 기능 추가
+    - [x] input 입력 완료시 focus 기능 추가
   - [ ] Modal 컴포넌트
 - [ ] Alias 페이지
 - [ ] List 페이지
@@ -22,6 +22,18 @@
 
 ## 요구사항 리스트
 
+Focus처리
+
+- [x] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
+- [x] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
+- [x] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
+- [x] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
+
+카드사 선택
+
+- [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
+- [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
+
 #### 카드 추가
 
 - [x] `<`(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
@@ -31,7 +43,7 @@
   - [x] 카드 번호는 실시간으로 카드 UI에 반영된다.
   - [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
   - [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
-  - [ ] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
+  - [x] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
   - [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
   - [x] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 만료일을 입력 받을 수 있다.
@@ -39,16 +51,16 @@
   - [x] 월, 년 사이에 자동으로 `/`가 삽입된다.
   - [x] 만료일은 실시간으로 카드 UI에 반영된다.
   - [x] 월은 1이상 12이하 숫자여야 한다.
-  - [ ] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
+  - [x] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
   - [x] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 보안코드를 입력 받을 수 있다.
   - [x] 보안코드는 `*`으로 보여진다.
-  - [ ] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
+  - [x] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
   - [x] 보안코드는 숫자만 입력가능하다.
   - [x] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
   - [x] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
-  - [ ] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
+  - [x] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
   - [x] 카드 번호 입력 시, `*`으로 보여진다.
   - [x] 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [x] 카드 소유자 이름을 입력 받을 수 있다.
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
index af4e2a40..7aba75bf 100644
--- a/src/components/Input.jsx
+++ b/src/components/Input.jsx
@@ -10,6 +10,7 @@ const Input = ({
   width,
   min,
   max,
+  elRef,
   ...props
 }) => {
   return (
@@ -23,6 +24,7 @@ const Input = ({
       data-identifier={identifier}
       minLength={min}
       maxLength={max}
+      ref={elRef}
       {...props}
     />
   );
diff --git a/src/pages/Add.jsx b/src/pages/Add.jsx
index 132cb3f7..a2d23efb 100644
--- a/src/pages/Add.jsx
+++ b/src/pages/Add.jsx
@@ -42,7 +42,7 @@ const Add = () => {
     setErrorMsg({ ...errorMsg, cardNumber: null });
     //focus이동
     if (position === "forth" && target.value.length === 4) {
-      console.log("focus 이동 to expire");
+      expireRef.current.focus();
     }
   };
   const setCardExpire = ({ key, position, target }) => {
@@ -73,7 +73,7 @@ const Add = () => {
     });
     //focus이동
     if (position === "YY" && target.value.length === 2) {
-      console.log("focus 이동 to cvc");
+      cvcRef.current.focus();
     }
   };
   const setCardPassword = ({ key, position, target }) => {
@@ -91,8 +91,8 @@ const Add = () => {
         [position]: target.value,
       },
     });
-    if (position === "first" && cardData[key][position].length === 1) {
-      console.log("focus 이동 to second");
+    if (position === "first" && target.value.length === 1) {
+      secondPasswordRef.current.focus();
     }
   };
   const setCVC = ({ target }) => {
@@ -109,7 +109,7 @@ const Add = () => {
     });
     console.log(cardData.CVC);
     if (target.value.length === 3) {
-      console.log("focus 이동 to second");
+      firstPasswordRef.current.focus();
     }
   };
   const setUserName = ({ target }) => {
@@ -150,6 +150,12 @@ const Add = () => {
   const moveNextPage = () => {
     navigate("/alias");
   };
+
+  const expireRef = useRef();
+  const cvcRef = useRef();
+  const firstPasswordRef = useRef();
+  const secondPasswordRef = useRef();
+
   return (
     <div className="app">
       <div className="page-title" onClick={moveListPage}>
@@ -237,6 +243,7 @@ const Add = () => {
             }
             min="2"
             max="2"
+            elRef={expireRef}
           />
           {renderDivider(cardData.expire.MM, 2, "/")}
           <Input
@@ -265,6 +272,7 @@ const Add = () => {
           type="text"
           onChange={setUserName}
           max="30"
+          elRef={cvcRef}
         />
       </div>
       <div className="input-container">
@@ -299,6 +307,7 @@ const Add = () => {
           min="1"
           max="1"
           width="w-15"
+          elRef={firstPasswordRef}
         />
         <Input
           value={cardData.password.second}
@@ -314,6 +323,7 @@ const Add = () => {
           min="1"
           max="1"
           width="w-15"
+          elRef={secondPasswordRef}
         />
 
         <Input type="password" min="1" max="1" width="w-15" />

From 0e601d096d26ff6bfc1b358757b005a2ab1093a3 Mon Sep 17 00:00:00 2001
From: Insoo-Seo <kocon135@gmail.com>
Date: Thu, 27 Jan 2022 12:00:42 +0900
Subject: [PATCH 8/9] =?UTF-8?q?refactor:=20form=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20CardForm=EC=9C=BC=EB=A1=9C=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CardForm.jsx | 330 ++++++++++++++++++++++++++++++++++++
 src/pages/Add.jsx           | 306 +--------------------------------
 2 files changed, 334 insertions(+), 302 deletions(-)
 create mode 100644 src/components/CardForm.jsx

diff --git a/src/components/CardForm.jsx b/src/components/CardForm.jsx
new file mode 100644
index 00000000..c7fd91b8
--- /dev/null
+++ b/src/components/CardForm.jsx
@@ -0,0 +1,330 @@
+import React, { useRef, useState } from "react";
+import Input from "../components/Input";
+import { useNavigate } from "react-router-dom";
+
+const CardForm = ({ cardData, setCardData }) => {
+  const navigate = useNavigate();
+  //* onChange 검증
+  const setCardNumber = ({ key, position, target }) => {
+    // cardValidation
+    const isNum = (target) => /^[0-9]+$/.test(target);
+    if (target.value && !isNum(target.value)) {
+      return setErrorMsg({ ...errorMsg, cardNumber: ERROR_MESSAGE.cardNumber });
+    }
+    setErrorMsg({ ...errorMsg, cardNumber: null });
+    // changeValue
+    setCardData({
+      ...cardData,
+      [key]: {
+        ...cardData[key],
+        [position]: target.value,
+      },
+    });
+    //focus이동
+    if (position === "forth" && target.value.length === 4) {
+      expireRef.current.focus();
+    }
+  };
+  const setCardExpire = ({ key, position, target }) => {
+    //Validation
+    const checkMonth = (target) => /^(0[1-9]|1[012])$/.test(target);
+    const checkYear = (target) => /^(2[2-9]|[3-9][0-9])$/.test(target);
+    if (target.value.length !== 2) return;
+
+    if (position === "MM" && !checkMonth(target.value)) {
+      setErrorMsg({ ...errorMsg, expiredMonth: ERROR_MESSAGE.expiredMonth });
+      return;
+    }
+
+    if (position === "YY" && !checkYear(target.value)) {
+      setErrorMsg({ ...errorMsg, expiredYear: ERROR_MESSAGE.expiredYear });
+      return;
+    }
+
+    setErrorMsg({ ...errorMsg, expiredMonth: null, expiredYear: null });
+
+    //changeValue
+    setCardData({
+      ...cardData,
+      [key]: {
+        ...cardData[key],
+        [position]: target.value,
+      },
+    });
+    //focus이동
+    if (position === "YY" && target.value.length === 2) {
+      cvcRef.current.focus();
+    }
+  };
+  const setCardPassword = ({ key, position, target }) => {
+    const isNum = (target) => /^[0-9]+$/.test(target);
+    if (target.value && !isNum(target.value)) {
+      setErrorMsg({ ...errorMsg, password: ERROR_MESSAGE.password });
+      return;
+    }
+
+    setErrorMsg({ ...errorMsg, password: null });
+    setCardData({
+      ...cardData,
+      [key]: {
+        ...cardData[key],
+        [position]: target.value,
+      },
+    });
+    if (position === "first" && target.value.length === 1) {
+      secondPasswordRef.current.focus();
+    }
+  };
+  const setCVC = ({ target }) => {
+    const isNum = (target) => /^[0-9]+$/.test(target);
+    if (target.value && !isNum(target.value)) {
+      setErrorMsg({ ...errorMsg, cvc: ERROR_MESSAGE.cvc });
+      return;
+    }
+
+    setErrorMsg({ ...errorMsg, cvc: null });
+    setCardData({
+      ...cardData,
+      CVC: target.value,
+    });
+    console.log(cardData.CVC);
+    if (target.value.length === 3) {
+      firstPasswordRef.current.focus();
+    }
+  };
+  const setUserName = ({ target }) => {
+    setCardData({
+      ...cardData,
+      userName: target.value,
+    });
+  };
+  //* focus
+  const expireRef = useRef();
+  const cvcRef = useRef();
+  const firstPasswordRef = useRef();
+  const secondPasswordRef = useRef();
+  //* Error
+  const [errorMsg, setErrorMsg] = useState({
+    cardNumber: null,
+    expiredMonth: null,
+    expiredYear: null,
+    cvc: null,
+    password: null,
+    nullCheck: null,
+  });
+  const ERROR_MESSAGE = {
+    cardNumber: "각각 0 - 9 사이의 숫자 4개를 입력해주세요.",
+    expiredMonth: "01 - 12 사이의 두자리 숫자를 입력해주세요.",
+    expiredYear: "22 이상 99 이하의 두자리 숫자를 입력해주세요.",
+    cvc: "0 - 9 사이의 숫자 3개를 입력해주세요.",
+    password: "0 - 9 사이의 숫자를 입력해주세요.",
+    nullCheck: "필수 정보를 모두 입력해주세요.",
+  };
+
+  const renderDivider = (target, length, sign) =>
+    target.length === length && <span>{sign}</span>;
+  const renderErrorLog = (target) => {
+    return (
+      errorMsg[target] && (
+        <span style={{ color: "red" }}>{`(${errorMsg[target]})`}</span>
+      )
+    );
+  };
+
+  const moveNextPage = () => {
+    let isValid = true;
+    const checkNull = (data) => data.length === 0 && (isValid = false);
+
+    Object.entries(cardData).forEach(([key, value]) => {
+      if (key === "userName") return;
+
+      typeof value === "object"
+        ? Object.values(value).forEach((v) => checkNull(v))
+        : checkNull(value);
+    });
+
+    if (!isValid) {
+      return setErrorMsg({ ...errorMsg, nullCheck: ERROR_MESSAGE.nullCheck });
+    }
+    navigate("/alias");
+  };
+  return (
+    <>
+      <div className="input-container">
+        <span className="input-title">
+          카드 번호 {renderErrorLog("cardNumber")}
+        </span>
+        <div className="input-box">
+          <Input
+            value={cardData.number.first}
+            type="text"
+            onChange={(e) =>
+              setCardNumber({
+                key: "number",
+                position: "first",
+                target: e.target,
+              })
+            }
+            min="4"
+            max="4"
+          />
+          {renderDivider(cardData.number.first, 4, "-")}
+          <Input
+            value={cardData.number.second}
+            type="text"
+            onChange={(e) =>
+              setCardNumber({
+                key: "number",
+                position: "second",
+                target: e.target,
+              })
+            }
+            min="4"
+            max="4"
+          />
+          {renderDivider(cardData.number.second, 4, "-")}
+          <Input
+            value={cardData.number.third}
+            type="password"
+            onChange={(e) =>
+              setCardNumber({
+                key: "number",
+                position: "third",
+                target: e.target,
+              })
+            }
+            min="4"
+            max="4"
+          />
+          {renderDivider(cardData.number.third, 4, "-")}
+          <Input
+            value={cardData.number.forth}
+            type="password"
+            onChange={(e) =>
+              setCardNumber({
+                key: "number",
+                position: "forth",
+                target: e.target,
+              })
+            }
+            min="4"
+            max="4"
+          />
+        </div>
+      </div>
+      <div className="input-container">
+        <span className="input-title">
+          만료일 {renderErrorLog("expiredMonth")}
+          {renderErrorLog("expiredYear")}
+        </span>
+        <div className="input-box w-50">
+          <Input
+            value={cardData.expire.MM}
+            placeholder="MM"
+            type="text"
+            onChange={(e) =>
+              setCardExpire({
+                key: "expire",
+                position: "MM",
+                target: e.target,
+              })
+            }
+            min="2"
+            max="2"
+            elRef={expireRef}
+          />
+          {renderDivider(cardData.expire.MM, 2, "/")}
+          <Input
+            value={cardData.expire.YY}
+            placeholder="YY"
+            type="text"
+            onChange={(e) =>
+              setCardExpire({
+                key: "expire",
+                position: "YY",
+                target: e.target,
+              })
+            }
+            min="2"
+            max="2"
+          />
+        </div>
+      </div>
+      <div className="input-container">
+        <span className="input-title">
+          카드 소유자 이름(선택){` ${cardData.userName.length} / 30`}
+        </span>
+        <Input
+          value={cardData.userName}
+          placeholder="카드에 표시된 이름과 동일하게 입력하세요."
+          type="text"
+          onChange={setUserName}
+          max="30"
+          elRef={cvcRef}
+        />
+      </div>
+      <div className="input-container">
+        <span className="input-title">
+          보안코드(CVC/CVV) {renderErrorLog("cvc")}
+        </span>
+        <Input
+          value={cardData.CVC}
+          name="cvc"
+          type="password"
+          onChange={setCVC}
+          min="3"
+          max="3"
+          width="w-25"
+        />
+      </div>
+      <div className="input-container">
+        <span className="input-title">
+          카드 비밀번호{renderErrorLog("password")}
+        </span>
+        <Input
+          value={cardData.password.first}
+          name="password"
+          type="password"
+          onChange={(e) =>
+            setCardPassword({
+              key: "password",
+              position: "first",
+              target: e.target,
+            })
+          }
+          min="1"
+          max="1"
+          width="w-15"
+          elRef={firstPasswordRef}
+        />
+        <Input
+          value={cardData.password.second}
+          name="password"
+          type="password"
+          onChange={(e) =>
+            setCardPassword({
+              key: "password",
+              position: "second",
+              target: e.target,
+            })
+          }
+          min="1"
+          max="1"
+          width="w-15"
+          elRef={secondPasswordRef}
+        />
+
+        <Input type="password" min="1" max="1" width="w-15" />
+        <Input type="password" min="1" max="1" width="w-15" />
+      </div>
+      <div className="button-box">
+        <span className="button-text" onClick={moveNextPage}>
+          다음
+        </span>
+      </div>
+      {renderErrorLog("nullCheck")}
+    </>
+  );
+};
+
+export default CardForm;
diff --git a/src/pages/Add.jsx b/src/pages/Add.jsx
index a2d23efb..a9c5a3a4 100644
--- a/src/pages/Add.jsx
+++ b/src/pages/Add.jsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import Card from "../components/Card";
-import Input from "../components/Input";
+import CardForm from "../components/CardForm";
 
 const Add = () => {
   const initCardData = {
@@ -24,137 +24,10 @@ const Add = () => {
     cardName: "",
   };
   const [cardData, setCardData] = useState(initCardData);
-
-  const setCardNumber = ({ key, position, target }) => {
-    // cardValidation
-    const isNum = (target) => /^[0-9]+$/.test(target);
-    if (target.value && !isNum(target.value)) {
-      return setErrorMsg({ ...errorMsg, cardNumber: ERROR_MESSAGE.cardNumber });
-    }
-    // changeValue
-    setCardData({
-      ...cardData,
-      [key]: {
-        ...cardData[key],
-        [position]: target.value,
-      },
-    });
-    setErrorMsg({ ...errorMsg, cardNumber: null });
-    //focus이동
-    if (position === "forth" && target.value.length === 4) {
-      expireRef.current.focus();
-    }
-  };
-  const setCardExpire = ({ key, position, target }) => {
-    //Validation
-    const checkMonth = (target) => /^(0[1-9]|1[012])$/.test(target);
-    const checkYear = (target) => /^(2[2-9]|[3-9][0-9])$/.test(target);
-    if (target.value.length === 2 && position === "MM") {
-      if (!checkMonth(target.value)) {
-        setErrorMsg({ ...errorMsg, expiredMonth: ERROR_MESSAGE.expiredMonth });
-        return;
-      }
-    }
-    if (target.value.length === 2 && position === "YY") {
-      if (!checkYear(target.value)) {
-        setErrorMsg({ ...errorMsg, expiredYear: ERROR_MESSAGE.expiredYear });
-        return;
-      }
-    }
-
-    setErrorMsg({ ...errorMsg, expiredMonth: null, expiredYear: null });
-    //changeValue
-    setCardData({
-      ...cardData,
-      [key]: {
-        ...cardData[key],
-        [position]: target.value,
-      },
-    });
-    //focus이동
-    if (position === "YY" && target.value.length === 2) {
-      cvcRef.current.focus();
-    }
-  };
-  const setCardPassword = ({ key, position, target }) => {
-    const isNum = (target) => /^[0-9]+$/.test(target);
-    if (target.value && !isNum(target.value)) {
-      setErrorMsg({ ...errorMsg, password: ERROR_MESSAGE.password });
-      return;
-    }
-
-    setErrorMsg({ ...errorMsg, password: null });
-    setCardData({
-      ...cardData,
-      [key]: {
-        ...cardData[key],
-        [position]: target.value,
-      },
-    });
-    if (position === "first" && target.value.length === 1) {
-      secondPasswordRef.current.focus();
-    }
-  };
-  const setCVC = ({ target }) => {
-    const isNum = (target) => /^[0-9]+$/.test(target);
-    if (target.value && !isNum(target.value)) {
-      setErrorMsg({ ...errorMsg, cvc: ERROR_MESSAGE.cvc });
-      return;
-    }
-
-    setErrorMsg({ ...errorMsg, cvc: null });
-    setCardData({
-      ...cardData,
-      CVC: target.value,
-    });
-    console.log(cardData.CVC);
-    if (target.value.length === 3) {
-      firstPasswordRef.current.focus();
-    }
-  };
-  const setUserName = ({ target }) => {
-    setCardData({
-      ...cardData,
-      userName: target.value,
-    });
-  };
-
-  const [errorMsg, setErrorMsg] = useState({
-    cardNumber: null,
-    expiredMonth: null,
-    expiredYear: null,
-    cvc: null,
-    password: null,
-  });
-  const ERROR_MESSAGE = {
-    cardNumber: "각각 0 - 9 사이의 숫자 4개를 입력해주세요.",
-    expiredMonth: "01 - 12 사이의 두자리 숫자를 입력해주세요.",
-    expiredYear: "22 이상 99 이하의 두자리 숫자를 입력해주세요.",
-    cvc: "0 - 9 사이의 숫자 3개를 입력해주세요.",
-    password: "0 - 9 사이의 숫자를 입력해주세요.",
-  };
-
-  const renderDivider = (target, length, sign) =>
-    target.length === length && <span>{sign}</span>;
-  const renderErrorLog = (target) => {
-    return (
-      errorMsg[target] && (
-        <span style={{ color: "red" }}>{`(${errorMsg[target]})`}</span>
-      )
-    );
-  };
   const navigate = useNavigate();
   const moveListPage = () => {
     navigate("/list");
   };
-  const moveNextPage = () => {
-    navigate("/alias");
-  };
-
-  const expireRef = useRef();
-  const cvcRef = useRef();
-  const firstPasswordRef = useRef();
-  const secondPasswordRef = useRef();
 
   return (
     <div className="app">
@@ -162,178 +35,7 @@ const Add = () => {
         &lt; 카드 추가
       </div>
       <Card card={cardData} />
-      <div className="input-container">
-        <span className="input-title">
-          카드 번호 {renderErrorLog("cardNumber")}
-        </span>
-        <div className="input-box">
-          <Input
-            value={cardData.number.first}
-            type="text"
-            onChange={(e) =>
-              setCardNumber({
-                key: "number",
-                position: "first",
-                target: e.target,
-              })
-            }
-            min="4"
-            max="4"
-          />
-          {renderDivider(cardData.number.first, 4, "-")}
-          <Input
-            value={cardData.number.second}
-            type="text"
-            onChange={(e) =>
-              setCardNumber({
-                key: "number",
-                position: "second",
-                target: e.target,
-              })
-            }
-            min="4"
-            max="4"
-          />
-          {renderDivider(cardData.number.second, 4, "-")}
-          <Input
-            value={cardData.number.third}
-            type="password"
-            onChange={(e) =>
-              setCardNumber({
-                key: "number",
-                position: "third",
-                target: e.target,
-              })
-            }
-            min="4"
-            max="4"
-          />
-          {renderDivider(cardData.number.third, 4, "-")}
-          <Input
-            value={cardData.number.forth}
-            type="password"
-            onChange={(e) =>
-              setCardNumber({
-                key: "number",
-                position: "forth",
-                target: e.target,
-              })
-            }
-            min="4"
-            max="4"
-          />
-        </div>
-      </div>
-      <div className="input-container">
-        <span className="input-title">
-          만료일 {renderErrorLog("expiredMonth")}
-          {renderErrorLog("expiredYear")}
-        </span>
-        <div className="input-box w-50">
-          <Input
-            value={cardData.expire.MM}
-            placeholder="MM"
-            type="text"
-            onChange={(e) =>
-              setCardExpire({
-                key: "expire",
-                position: "MM",
-                target: e.target,
-              })
-            }
-            min="2"
-            max="2"
-            elRef={expireRef}
-          />
-          {renderDivider(cardData.expire.MM, 2, "/")}
-          <Input
-            value={cardData.expire.YY}
-            placeholder="YY"
-            type="text"
-            onChange={(e) =>
-              setCardExpire({
-                key: "expire",
-                position: "YY",
-                target: e.target,
-              })
-            }
-            min="2"
-            max="2"
-          />
-        </div>
-      </div>
-      <div className="input-container">
-        <span className="input-title">
-          카드 소유자 이름(선택){` ${cardData.userName.length} / 30`}
-        </span>
-        <Input
-          value={cardData.userName}
-          placeholder="카드에 표시된 이름과 동일하게 입력하세요."
-          type="text"
-          onChange={setUserName}
-          max="30"
-          elRef={cvcRef}
-        />
-      </div>
-      <div className="input-container">
-        <span className="input-title">
-          보안코드(CVC/CVV) {renderErrorLog("cvc")}
-        </span>
-        <Input
-          value={cardData.CVC}
-          name="cvc"
-          type="password"
-          onChange={setCVC}
-          min="3"
-          max="3"
-          width="w-25"
-        />
-      </div>
-      <div className="input-container">
-        <span className="input-title">
-          카드 비밀번호{renderErrorLog("password")}
-        </span>
-        <Input
-          value={cardData.password.first}
-          name="password"
-          type="password"
-          onChange={(e) =>
-            setCardPassword({
-              key: "password",
-              position: "first",
-              target: e.target,
-            })
-          }
-          min="1"
-          max="1"
-          width="w-15"
-          elRef={firstPasswordRef}
-        />
-        <Input
-          value={cardData.password.second}
-          name="password"
-          type="password"
-          onChange={(e) =>
-            setCardPassword({
-              key: "password",
-              position: "second",
-              target: e.target,
-            })
-          }
-          min="1"
-          max="1"
-          width="w-15"
-          elRef={secondPasswordRef}
-        />
-
-        <Input type="password" min="1" max="1" width="w-15" />
-        <Input type="password" min="1" max="1" width="w-15" />
-      </div>
-      <div className="button-box">
-        <span className="button-text" onClick={moveNextPage}>
-          다음
-        </span>
-      </div>
+      <CardForm cardData={cardData} setCardData={setCardData} />
     </div>
   );
 };

From dbae12d7f47f2f7e4018f6bbefb18da9a02c7bbc Mon Sep 17 00:00:00 2001
From: Insoo-Seo <kocon135@gmail.com>
Date: Thu, 27 Jan 2022 17:41:28 +0900
Subject: [PATCH 9/9] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20?=
 =?UTF-8?q?=ED=86=B5=ED=95=9C=20=EC=B9=B4=EB=93=9C=EC=82=AC=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/TODO.md                | 26 +++++++++++-------
 src/components/Card.jsx     | 39 ++++++++++++++++++++++++++-
 src/components/CardForm.jsx | 53 ++++++++++++++++++++++++++-----------
 src/components/Modal.jsx    | 41 ++++++++++++++++++++++++++++
 src/constants/index.js      | 42 +++++++++++++++++++++++++++++
 src/styles/color.css        | 24 +++++++++++++++++
 src/styles/index.css        |  1 +
 src/styles/utils.css        |  1 +
 src/utils/index.js          | 10 +++++++
 9 files changed, 212 insertions(+), 25 deletions(-)
 create mode 100644 src/components/Modal.jsx
 create mode 100644 src/constants/index.js
 create mode 100644 src/styles/color.css
 create mode 100644 src/utils/index.js

diff --git a/docs/TODO.md b/docs/TODO.md
index c14f66ae..971f8da2 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -29,10 +29,18 @@ Focus처리
 - [x] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
 - [x] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
 
-카드사 선택
+모달(카드사 선택)
 
-- [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
-- [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
+- [x] 카드 번호 앞 8자리가 입력되기 전에는 emptyCard를 보여준다.
+
+- [x] 카드 번호가 8자리가 입력되면, 카드사 리스트 데이터와 비교하여, 일치하는 카드사를 찾아낸다.
+
+  - 일치하는 카드사가 있다면, '카드 class를 smallcard + 카드사color'로 바꾼다
+  - 일치하는 카드사가 없다면, 카드사 선택 모달이 보여진다.
+
+- [x] 모달에서 특정 카드사 클릭 시, 해당 카드사의 color를 적용한다.
+  - color를 적용하고, 모달을 닫는다.
+- [x] dimmed된 빈 공간 클릭 시 모달을 닫는다.
 
 #### 카드 추가
 
@@ -42,9 +50,9 @@ Focus처리
   - [x] 카드 번호 4자리마다 `-`가 삽입된다.
   - [x] 카드 번호는 실시간으로 카드 UI에 반영된다.
   - [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
-  - [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
+  - [x] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
   - [x] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
-  - [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
+  - [x] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
   - [x] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
 - [ ] 만료일을 입력 받을 수 있다.
   - [x] `MM / YY` 로 placeholder를 적용한다.
@@ -53,12 +61,12 @@ Focus처리
   - [x] 월은 1이상 12이하 숫자여야 한다.
   - [x] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
   - [x] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
-- [ ] 보안코드를 입력 받을 수 있다.
+- [x] 보안코드를 입력 받을 수 있다.
   - [x] 보안코드는 `*`으로 보여진다.
   - [x] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
   - [x] 보안코드는 숫자만 입력가능하다.
   - [x] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
-- [ ] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
+- [x] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
   - [x] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
   - [x] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
   - [x] 카드 번호 입력 시, `*`으로 보여진다.
@@ -73,8 +81,8 @@ Focus처리
 - [ ] `Storybook` 단위 테스트
 - [ ] 유효성 검증 실패에 대한 UI/UX 추가
 - [ ] 카드사 선택
-  - [ ] 카드사를 선택하면 모달이 닫히고, 그 테마를 카드 UI에 반영한다.
-  - [ ] 카드사를 선택하지 않아도 모달을 닫을 수 있다.
+  - [x] 카드사를 선택하면 모달이 닫히고, 그 테마를 카드 UI에 반영한다.
+  - [x] 카드사를 선택하지 않아도 모달을 닫을 수 있다.
 - [ ] 보안코드 툴팁
   - [ ] 클릭 시, 보안코드 관련 안내 메시지를 보여준다.
   - [ ] focusout 시, 툴팁이 닫힌다.
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 8f448840..4271b1ef 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,5 +1,43 @@
 import React from "react";
+import { findColor } from "../utils/index.js";
+
 const Card = ({ card }) => {
+  return card.cardName ? (
+    <div className="card-box">
+      <div className={`small-card ${findColor(card.cardName)}`}>
+        <div className="card-top">
+          <span className="card-text">{card.cardName}</span>
+        </div>
+        <div className="card-middle">
+          <div className="small-card__chip"></div>
+        </div>
+        <div className="card-bottom">
+          <div className="card-bottom__number">
+            <span className="card-text">
+              {Object.values(card.number)
+                .map((v, i) => (i >= 2 ? "*".repeat(v.length) : v))
+                .filter(Boolean)
+                .join(" - ")}
+            </span>
+          </div>
+          <div className="card-bottom__info">
+            <span className="card-text">{card.userName}</span>
+            <span className="card-text">
+              {card.expire.MM}
+              {card.expire.MM.length === 2 && " / "}
+              {card.expire.YY}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <EmptyCard card={card} />
+  );
+};
+export default Card;
+
+const EmptyCard = ({ card }) => {
   return (
     <div className="card-box">
       <div className="empty-card">
@@ -31,4 +69,3 @@ const Card = ({ card }) => {
     </div>
   );
 };
-export default Card;
diff --git a/src/components/CardForm.jsx b/src/components/CardForm.jsx
index c7fd91b8..8e4f7da8 100644
--- a/src/components/CardForm.jsx
+++ b/src/components/CardForm.jsx
@@ -1,6 +1,8 @@
-import React, { useRef, useState } from "react";
-import Input from "../components/Input";
+import React, { useRef, useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import Input from "../components/Input";
+import Modal from "../components/Modal";
+import { findCompany } from "../utils/index.js";
 
 const CardForm = ({ cardData, setCardData }) => {
   const navigate = useNavigate();
@@ -29,18 +31,18 @@ const CardForm = ({ cardData, setCardData }) => {
     //Validation
     const checkMonth = (target) => /^(0[1-9]|1[012])$/.test(target);
     const checkYear = (target) => /^(2[2-9]|[3-9][0-9])$/.test(target);
-    if (target.value.length !== 2) return;
-
-    if (position === "MM" && !checkMonth(target.value)) {
-      setErrorMsg({ ...errorMsg, expiredMonth: ERROR_MESSAGE.expiredMonth });
-      return;
+    if (target.value.length === 2 && position === "MM") {
+      if (!checkMonth(target.value)) {
+        setErrorMsg({ ...errorMsg, expiredMonth: ERROR_MESSAGE.expiredMonth });
+        return;
+      }
     }
-
-    if (position === "YY" && !checkYear(target.value)) {
-      setErrorMsg({ ...errorMsg, expiredYear: ERROR_MESSAGE.expiredYear });
-      return;
+    if (target.value.length === 2 && position === "YY") {
+      if (!checkYear(target.value)) {
+        setErrorMsg({ ...errorMsg, expiredYear: ERROR_MESSAGE.expiredYear });
+        return;
+      }
     }
-
     setErrorMsg({ ...errorMsg, expiredMonth: null, expiredYear: null });
 
     //changeValue
@@ -87,7 +89,6 @@ const CardForm = ({ cardData, setCardData }) => {
       ...cardData,
       CVC: target.value,
     });
-    console.log(cardData.CVC);
     if (target.value.length === 3) {
       firstPasswordRef.current.focus();
     }
@@ -103,6 +104,7 @@ const CardForm = ({ cardData, setCardData }) => {
   const cvcRef = useRef();
   const firstPasswordRef = useRef();
   const secondPasswordRef = useRef();
+  const secondCardNumberRef = useRef();
   //* Error
   const [errorMsg, setErrorMsg] = useState({
     cardNumber: null,
@@ -148,6 +150,19 @@ const CardForm = ({ cardData, setCardData }) => {
     }
     navigate("/alias");
   };
+
+  const [modalView, setModalView] = useState(false);
+
+  useEffect(() => {
+    const { first, second } = cardData.number;
+    if (first.length !== 4 || second.length !== 4) return;
+    if (document.activeElement !== secondCardNumberRef.current) return;
+
+    const cardCompany = findCompany(first, second);
+    cardCompany
+      ? setCardData({ ...cardData, cardName: cardCompany.name })
+      : setModalView(true);
+  }, [cardData.number]);
   return (
     <>
       <div className="input-container">
@@ -181,6 +196,7 @@ const CardForm = ({ cardData, setCardData }) => {
             }
             min="4"
             max="4"
+            elRef={secondCardNumberRef}
           />
           {renderDivider(cardData.number.second, 4, "-")}
           <Input
@@ -314,8 +330,8 @@ const CardForm = ({ cardData, setCardData }) => {
           elRef={secondPasswordRef}
         />
 
-        <Input type="password" min="1" max="1" width="w-15" />
-        <Input type="password" min="1" max="1" width="w-15" />
+        <Input value="*" type="password" width="w-15" readOnly />
+        <Input value="*" type="password" width="w-15" readOnly />
       </div>
       <div className="button-box">
         <span className="button-text" onClick={moveNextPage}>
@@ -323,6 +339,13 @@ const CardForm = ({ cardData, setCardData }) => {
         </span>
       </div>
       {renderErrorLog("nullCheck")}
+      {modalView && (
+        <Modal
+          cadrData={cardData}
+          setCardData={setCardData}
+          setModalView={setModalView}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
new file mode 100644
index 00000000..a801d118
--- /dev/null
+++ b/src/components/Modal.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { CARD_COMPANY_DATA } from "../constants/index.js";
+
+const Modal = ({ setCardData, setModalView }) => {
+  const saveCardName = (cardName) => {
+    setCardData((prev) => ({
+      ...prev,
+      cardName,
+    }));
+    setModalView(false);
+  };
+  return (
+    <div className="modal-dimmed" onClick={() => setModalView(false)}>
+      <div className="modal">
+        <div className="flex-center">
+          {CARD_COMPANY_DATA.map((card) => {
+            return (
+              <CardItem
+                key={card.name}
+                name={card.name}
+                color={card.color}
+                onClick={() => saveCardName(card.name)}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
+
+const CardItem = ({ name, color, onClick }) => {
+  return (
+    <div className="modal-item-container" onClick={onClick}>
+      <div className={`modal-item-dot ${color}`}></div>
+      <span className="modal-item-name">{name}</span>
+    </div>
+  );
+};
diff --git a/src/constants/index.js b/src/constants/index.js
new file mode 100644
index 00000000..9f414102
--- /dev/null
+++ b/src/constants/index.js
@@ -0,0 +1,42 @@
+export const CARD_COMPANY_DATA = [
+  {
+    name: "궁민카드",
+    color: "red",
+    number: "11111111",
+  },
+  {
+    name: "싱한카드",
+    color: "blue",
+    number: "22222222",
+  },
+  {
+    name: "하낭카드",
+    color: "green",
+    number: "33333333",
+  },
+  {
+    name: "롱데카드",
+    color: "purple",
+    number: "44444444",
+  },
+  {
+    name: "BS카드",
+    color: "mint",
+    number: "55555555",
+  },
+  {
+    name: "농힙카드",
+    color: "pink",
+    number: "66666666",
+  },
+  {
+    name: "상성카드",
+    color: "orange",
+    number: "77777777",
+  },
+  {
+    name: "현댕카드",
+    color: "yellow",
+    number: "88888888",
+  },
+];
diff --git a/src/styles/color.css b/src/styles/color.css
new file mode 100644
index 00000000..8a541270
--- /dev/null
+++ b/src/styles/color.css
@@ -0,0 +1,24 @@
+.red {
+  background-color: #e24141;
+}
+.blue {
+  background-color: #547ce4;
+}
+.green {
+  background-color: #73bc6d;
+}
+.purple {
+  background-color: #de59b9;
+}
+.mint {
+  background-color: #94dacd;
+}
+.pink {
+  background-color: #e76e9a;
+}
+.orange {
+  background-color: #f37d3b;
+}
+.yellow {
+  background-color: #fbcd58;
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 5bafed42..c5b33d2f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -3,6 +3,7 @@
 @import "./button.css";
 @import "./modal.css";
 @import "./utils.css";
+@import "./color.css";
 
 body {
   display: flex;
diff --git a/src/styles/utils.css b/src/styles/utils.css
index e86f525f..7f87f076 100644
--- a/src/styles/utils.css
+++ b/src/styles/utils.css
@@ -2,6 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .flex-column-center {
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 00000000..63dcab62
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,10 @@
+import { CARD_COMPANY_DATA } from "../constants/index.js";
+
+export const findCompany = (firstNumber, secondNumber) => {
+  const cardNumber = firstNumber + secondNumber;
+
+  return CARD_COMPANY_DATA.filter((el) => el.number === cardNumber)[0];
+};
+
+export const findColor = (name) =>
+  CARD_COMPANY_DATA.filter((el) => el.name === name)[0].color;