From f081fe01d80304de888de4985cc64cfcc9adf999 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Fri, 12 Jan 2024 18:52:36 +0900
Subject: [PATCH 01/14] =?UTF-8?q?refactor:=20=EC=9D=B4=EC=A0=84=20?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=EC=9E=94=EB=A5=98=EB=B6=80=EB=B6=84=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json             |    4 +-
 src/stories/Badge.stories.tsx |    2 +-
 yarn.lock                     | 1034 +++++++++++++++++++++++----------
 3 files changed, 723 insertions(+), 317 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 053a525..46dc96c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "concept-be-design-system",
-  "version": "0.3.6",
+  "version": "0.3.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "concept-be-design-system",
-      "version": "0.3.6",
+      "version": "0.3.9",
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
diff --git a/src/stories/Badge.stories.tsx b/src/stories/Badge.stories.tsx
index 0270d81..940b2d2 100644
--- a/src/stories/Badge.stories.tsx
+++ b/src/stories/Badge.stories.tsx
@@ -51,7 +51,7 @@ export const Sample: Story = {
     as: 'div',
     fontColor: 'b9',
     backgroundColor: 'bg1',
-    children: '개발',
+    children: '프론트엔드',
   },
   render: ({ children, backgroundColor, fontColor }) => {
     const timerId = useRef<NodeJS.Timeout | null>(null);
diff --git a/yarn.lock b/yarn.lock
index 679f859..492c95f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -40,7 +40,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz"
   integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
 
-"@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.18.9", "@babel/core@^7.20.12", "@babel/core@^7.21.3", "@babel/core@^7.22.5", "@babel/core@^7.22.9", "@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.7.5":
+"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.0.0-0 || ^8.0.0-0 <8.0.0", "@babel/core@^7.11.6", "@babel/core@^7.12.0", "@babel/core@^7.12.3", "@babel/core@^7.13.0", "@babel/core@^7.18.9", "@babel/core@^7.20.12", "@babel/core@^7.21.3", "@babel/core@^7.22.5", "@babel/core@^7.22.9", "@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.4.0 || ^8.0.0-0 <8.0.0", "@babel/core@^7.7.5", "@babel/core@^7.8.0":
   version "7.23.7"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz"
   integrity sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==
@@ -878,7 +878,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/preset-env@^7.23.2":
+"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.23.2":
   version "7.23.8"
   resolved "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.8.tgz"
   integrity sha512-lFlpmkApLkEP6woIKprO6DO60RImpatTQKtz4sUcDjVcK8M8mQ4sZsuxaTMNOZf0sqAq/ReYW1ZBHnOQwKpLWA==
@@ -1115,7 +1115,7 @@
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/react@^11.11.1":
+"@emotion/react@^11.0.0-rc.0", "@emotion/react@^11.11.1":
   version "11.11.1"
   resolved "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz"
   integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
@@ -1177,116 +1177,11 @@
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
-"@esbuild/android-arm64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.18.tgz#a52e0a1276065b1bf6b2de45b482cf36b6b945bd"
-  integrity sha512-dkAPYzRHq3dNXIzOyAknYOzsx8o3KWaNiuu56B2rP9IFPmFWMS58WQcTlUQi6iloku8ZyHHMluCe5sTWhKq/Yw==
-
-"@esbuild/android-arm@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.18.tgz#ffd591b956ced1c96e1224edfbed1001adadf2ae"
-  integrity sha512-oBymf7ZwplAawSxmiSlBCf+FMcY0f4bs5QP2jn43JKUf0M9DnrUTjqa5RvFPl1elw+sMfcpfBRPK+rb+E1q7zg==
-
-"@esbuild/android-x64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.18.tgz#6e8a7b41fc80265849e0a1de928fe162b27990c7"
-  integrity sha512-r7/pVcrUQMYkjvtE/1/n6BxhWM+/9tvLxDG1ev1ce4z3YsqoxMK9bbOM6bFcj0BowMeGQvOZWcBV182lFFKmrw==
-
 "@esbuild/darwin-arm64@0.18.18":
   version "0.18.18"
   resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.18.tgz"
   integrity sha512-MSe2iV9MAH3wfP0g+vzN9bp36rtPPuCSk+bT5E2vv/d8krvW5uB/Pi/Q5+txUZuxsG3GcO8dhygjnFq0wJU9hQ==
 
-"@esbuild/darwin-x64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.18.tgz#8aa691d0cbd3fb67f9f9083375c0c72e0463b8b2"
-  integrity sha512-ARFYISOWkaifjcr48YtO70gcDNeOf1H2RnmOj6ip3xHIj66f3dAbhcd5Nph5np6oHI7DhHIcr9MWO18RvUL1bw==
-
-"@esbuild/freebsd-arm64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.18.tgz#0aafde382df508d7863360950d5f491c07024806"
-  integrity sha512-BHnXmexzEWRU2ZySJosU0Ts0NRnJnNrMB6t4EiIaOSel73I8iLsNiTPLH0rJulAh19cYZutsB5XHK6N8fi5eMg==
-
-"@esbuild/freebsd-x64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.18.tgz#f00e54a3b65824ac3c749173bec9cd56d95fe73b"
-  integrity sha512-n823w35wm0ZOobbuE//0sJjuz1Qj619+AwjgOcAJMN2pomZhH9BONCtn+KlfrmM/NWZ+27yB/eGVFzUIWLeh3w==
-
-"@esbuild/linux-arm64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.18.tgz#e04203429670257126a1bfee79bbd56448b24f5e"
-  integrity sha512-zANxnwF0sCinDcAqoMohGoWBK9QaFJ65Vgh0ZE+RXtURaMwx+RfmfLElqtnn7X8OYNckMoIXSg7u+tZ3tqTlrA==
-
-"@esbuild/linux-arm@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.18.tgz#863236dc47df2269f860001ca5c5ff50931e9933"
-  integrity sha512-Kck3jxPLQU4VeAGwe8Q4NU+IWIx+suULYOFUI9T0C2J1+UQlOHJ08ITN+MaJJ+2youzJOmKmcphH/t3SJxQ1Tw==
-
-"@esbuild/linux-ia32@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.18.tgz#9ef6c7eeb8c86c5c1b7234a9684c6f45cbc2ed57"
-  integrity sha512-+VHz2sIRlY5u8IlaLJpdf5TL2kM76yx186pW7bpTB+vLWpzcFQVP04L842ZB2Ty13A1VXUvy3DbU1jV65P2skg==
-
-"@esbuild/linux-loong64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.18.tgz#dca8624674924ac92c9e56399af160479283f130"
-  integrity sha512-fXPEPdeGBvguo/1+Na8OIWz3667BN1cwbGtTEZWTd0qdyTsk5gGf9jVX8MblElbDb/Cpw6y5JiaQuL96YmvBwQ==
-
-"@esbuild/linux-mips64el@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.18.tgz#e6525b60ae9d8c3bdc652a773e6ebf66caa3fdd3"
-  integrity sha512-dLvRB87pIBIRnEIC32LIcgwK1JzlIuADIRjLKdUIpxauKwMuS/xMpN+cFl+0nN4RHNYOZ57DmXFFmQAcdlFOmw==
-
-"@esbuild/linux-ppc64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.18.tgz#2ea6a4e0c6b0db21770d2c3c1525623dceadfe46"
-  integrity sha512-fRChqIJZ7hLkXSKfBLYgsX9Ssb5OGCjk3dzCETF5QSS1qjTgayLv0ALUdJDB9QOh/nbWwp+qfLZU6md4XcjL7w==
-
-"@esbuild/linux-riscv64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.18.tgz#296c25d5bdeb3bab9ca79ad5279a8cc0a42fbeea"
-  integrity sha512-ALK/BT3u7Hoa/vHjow6W6+MKF0ohYcVcVA1EpskI4bkBPVuDLrUDqt2YFifg5UcZc8qup0CwQqWmFUd6VMNgaA==
-
-"@esbuild/linux-s390x@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.18.tgz#bec4e9c982e778c51deaa754e1ed3f0546705647"
-  integrity sha512-crT7jtOXd9iirY65B+mJQ6W0HWdNy8dtkZqKGWNcBnunpLcTCfne5y5bKic9bhyYzKpQEsO+C/VBPD8iF0RhRw==
-
-"@esbuild/linux-x64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.18.tgz#22c9666920d3b7ef453289516ccff1c3ecbfdddd"
-  integrity sha512-/NSgghjBOW9ELqjXDYxOCCIsvQUZpvua1/6NdnA9Vnrp9UzEydyDdFXljUjMMS9p5KxMzbMO9frjHYGVHBfCHg==
-
-"@esbuild/netbsd-x64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.18.tgz#99b6125868c5ba8f0131bacc3f2bd05918245f45"
-  integrity sha512-8Otf05Vx5sZjLLDulgr5QS5lsWXMplKZEyHMArH9/S4olLlhzmdhQBPhzhJTNwaL2FJNdWcUPNGAcoD5zDTfUA==
-
-"@esbuild/openbsd-x64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.18.tgz#c2685bdd1e5aa11be1e212db371f474812a9b158"
-  integrity sha512-tFiFF4kT5L5qhVrWJUNxEXWvvX8nK/UX9ZrB7apuTwY3f6+Xy4aFMBPwAVrBYtBd5MOUuyOVHK6HBZCAHkwUlw==
-
-"@esbuild/sunos-x64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.18.tgz#277b2f5727119fe3004e673eb9f6ead0b4ff0738"
-  integrity sha512-MPogVV8Bzh8os4OM+YDGGsSzCzmNRiyKGtHoJyZLtI4BMmd6EcxmGlcEGK1uM46h1BiOyi7Z7teUtzzQhvkC+w==
-
-"@esbuild/win32-arm64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.18.tgz#e94d9e6d058e0ccb92d858badd4a6aa74772150e"
-  integrity sha512-YKD6LF/XXY9REu+ZL5RAsusiG48n602qxsMVh/E8FFD9hp4OyTQaL9fpE1ovxwQXqFio+tT0ITUGjDSSSPN13w==
-
-"@esbuild/win32-ia32@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.18.tgz#454916b1d0b85d2f82252192ae7bd5ea65c98ea1"
-  integrity sha512-NjSBmBsyZBTsZB6ga6rA6PfG/RHnwruUz/9YEVXcm4STGauFWvhYhOMhEyw1yU5NVgYYm8CH5AltCm77TS21/Q==
-
-"@esbuild/win32-x64@0.18.18":
-  version "0.18.18"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.18.tgz#914c007ab1dbd28ca84e79ee666adeee6ccf92b4"
-  integrity sha512-eTSg/gC3p3tdjj4roDhe5xu94l1s2jMazP8u2FsYO8SEKvSpPOO71EucprDn/IuErDPvTFUhV9lTw5z5WJCRKQ==
-
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -1382,6 +1277,18 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
@@ -1488,7 +1395,7 @@
     jest-mock "^29.7.0"
     jest-util "^29.7.0"
 
-"@jest/globals@^29.7.0":
+"@jest/globals@^29.7.0", "@jest/globals@>= 28":
   version "29.7.0"
   resolved "https://registry.npmjs.org/@jest/globals/-/globals-29.7.0.tgz"
   integrity sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==
@@ -1644,12 +1551,25 @@
   resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
-"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.13":
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.5"
+  resolved "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz"
+  integrity sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.15"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@1.4.14":
   version "1.4.14"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.15":
+"@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
@@ -1734,7 +1654,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -1752,7 +1672,7 @@
   resolved "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.4.tgz"
   integrity sha512-TWFX7cZF2LXoCvdmJWY7XVPi74aSY0+FfBZNSXEXFkMpjcqsQwDSYVv5FhRFaI0V1ECnwbz4j59T/G+rXNWaIQ==
 
-"@octokit/core@^4.2.1":
+"@octokit/core@^4.2.1", "@octokit/core@>=3", "@octokit/core@>=4":
   version "4.2.4"
   resolved "https://registry.npmjs.org/@octokit/core/-/core-4.2.4.tgz"
   integrity sha512-rYKilwgzQ7/imScn3M9/pFfUf4I1AZEH3KhyJmtPdE2zfaXAn2mFfUy4FbKewzc2We5y/LlKLj36fWJLKC2SIQ==
@@ -2364,7 +2284,7 @@
   dependencies:
     memoizerific "^1.11.3"
 
-"@storybook/blocks@7.6.7", "@storybook/blocks@^7.4.5":
+"@storybook/blocks@^7.4.5", "@storybook/blocks@7.6.7":
   version "7.6.7"
   resolved "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.6.7.tgz"
   integrity sha512-+QEvGQ0he/YvFS3lsZORJWxhQIyqcCDWsxbJxJiByePd+Z4my3q8xwtPhHW0TKRL0xUgNE/GnTfMMqJfevTuSw==
@@ -2547,7 +2467,7 @@
     "@storybook/client-logger" "7.6.7"
     "@storybook/preview-api" "7.6.7"
 
-"@storybook/core-common@7.6.7", "@storybook/core-common@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0":
+"@storybook/core-common@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0", "@storybook/core-common@7.6.7":
   version "7.6.7"
   resolved "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.7.tgz"
   integrity sha512-F1fJnauVSPQtAlpicbN/O4XW38Ai8kf/IoU0Hgm9gEwurIk6MF5hiVLsaTI/5GUbrepMl9d9J+iIL4lHAT8IyA==
@@ -2638,7 +2558,7 @@
     "@storybook/csf-tools" "7.6.7"
     unplugin "^1.3.1"
 
-"@storybook/csf-tools@7.6.7", "@storybook/csf-tools@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0":
+"@storybook/csf-tools@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0", "@storybook/csf-tools@7.6.7":
   version "7.6.7"
   resolved "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.6.7.tgz"
   integrity sha512-hyRbUGa2Uxvz3U09BjcOfMNf/5IYgRum1L6XszqK2O8tK9DGte1r6hArCIAcqiEmFMC40d0kalPzqu6WMNn7sg==
@@ -2740,7 +2660,7 @@
   resolved "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.6.7.tgz"
   integrity sha512-mrpRmcwFd9FcvtHPXA9x6vOrHLVCKScZX/Xx2QPWgAvB3W6uzP8G+8QNb1u834iToxrWeuszUMB9UXZK4Qj5yg==
 
-"@storybook/preview-api@7.6.7", "@storybook/preview-api@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0":
+"@storybook/preview-api@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0", "@storybook/preview-api@7.6.7":
   version "7.6.7"
   resolved "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.7.tgz"
   integrity sha512-ja85ItrT6q2TeBQ6n0CNoRi1R6L8yF2kkis9hVeTQHpwLdZyHUTRqqR5WmhtLqqQXcofyasBPOeJV06wuOhgRQ==
@@ -2783,7 +2703,7 @@
     magic-string "^0.30.0"
     react-docgen "^7.0.0"
 
-"@storybook/react@7.6.7", "@storybook/react@^7.4.5":
+"@storybook/react@^7.4.5", "@storybook/react@7.6.7":
   version "7.6.7"
   resolved "https://registry.npmjs.org/@storybook/react/-/react-7.6.7.tgz"
   integrity sha512-uT9IBPDM1SQg6FglWqb7IemOJ1Z8kYB5rehIDEDToi0u5INihSY8rHd003TxG4Wx4REp6J+rfbDJO2aVui/gxA==
@@ -2983,52 +2903,7 @@
   resolved "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.102.tgz"
   integrity sha512-CJDxA5Wd2cUMULj3bjx4GEoiYyyiyL8oIOu4Nhrs9X+tlg8DnkCm4nI57RJGP8Mf6BaXPIJkHX8yjcefK2RlDA==
 
-"@swc/core-darwin-x64@1.3.102":
-  version "1.3.102"
-  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.102.tgz#df16d51f45771d3c9cca8554b28a3190cdb075cf"
-  integrity sha512-X5akDkHwk6oAer49oER0qZMjNMkLH3IOZaV1m98uXIasAGyjo5WH1MKPeMLY1sY6V6TrufzwiSwD4ds571ytcg==
-
-"@swc/core-linux-arm-gnueabihf@1.3.102":
-  version "1.3.102"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.102.tgz#eb71697590c56ea261fa9a4b198c45304c7ece39"
-  integrity sha512-kJH3XtZP9YQdjq/wYVBeFuiVQl4HaC4WwRrIxAHwe2OyvrwUI43dpW3LpxSggBnxXcVCXYWf36sTnv8S75o2Gw==
-
-"@swc/core-linux-arm64-gnu@1.3.102":
-  version "1.3.102"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.102.tgz#75d72d5253d56723fa7054e1a8f313bf3d17b1a2"
-  integrity sha512-flQP2WDyCgO24WmKA1wjjTx+xfCmavUete2Kp6yrM+631IHLGnr17eu7rYJ/d4EnDBId/ytMyrnWbTVkaVrpbQ==
-
-"@swc/core-linux-arm64-musl@1.3.102":
-  version "1.3.102"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.102.tgz#7db86022fec57c1e06c573d45cef5e911bcc420e"
-  integrity sha512-bQEQSnC44DyoIGLw1+fNXKVGoCHi7eJOHr8BdH0y1ooy9ArskMjwobBFae3GX4T1AfnrTaejyr0FvLYIb0Zkog==
-
-"@swc/core-linux-x64-gnu@1.3.102":
-  version "1.3.102"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.102.tgz#298a25aa854924bedc7e4b69da52da19f84fc7a8"
-  integrity sha512-dFvnhpI478svQSxqISMt00MKTDS0e4YtIr+ioZDG/uJ/q+RpcNy3QI2KMm05Fsc8Y0d4krVtvCKWgfUMsJZXAg==
-
-"@swc/core-linux-x64-musl@1.3.102":
-  version "1.3.102"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.102.tgz#1bcd911aaa88b96f3bb665b0fd84ef4d21adf886"
-  integrity sha512-+a0M3CvjeIRNA/jTCzWEDh2V+mhKGvLreHOL7J97oULZy5yg4gf7h8lQX9J8t9QLbf6fsk+0F8bVH1Ie/PbXjA==
-
-"@swc/core-win32-arm64-msvc@1.3.102":
-  version "1.3.102"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.102.tgz#59084786364d03fa4a120bdd589a557a00caedeb"
-  integrity sha512-w76JWLjkZNOfkB25nqdWUNCbt0zJ41CnWrJPZ+LxEai3zAnb2YtgB/cCIrwxDebRuMgE9EJXRj7gDDaTEAMOOQ==
-
-"@swc/core-win32-ia32-msvc@1.3.102":
-  version "1.3.102"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.102.tgz#27954889d940a63796d58ff7753f5f27ed381a1f"
-  integrity sha512-vlDb09HiGqKwz+2cxDS9T5/461ipUQBplvuhW+cCbzzGuPq8lll2xeyZU0N1E4Sz3MVdSPx1tJREuRvlQjrwNg==
-
-"@swc/core-win32-x64-msvc@1.3.102":
-  version "1.3.102"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.102.tgz#477da542e6b01b3eb64476ec9a78f497a9b87807"
-  integrity sha512-E/jfSD7sShllxBwwgDPeXp1UxvIqehj/ShSUqq1pjR/IDRXngcRSXKJK92mJkNFY7suH6BcCWwzrxZgkO7sWmw==
-
-"@swc/core@^1.3.18":
+"@swc/core@*", "@swc/core@^1.3.18":
   version "1.3.102"
   resolved "https://registry.npmjs.org/@swc/core/-/core-1.3.102.tgz"
   integrity sha512-OAjNLY/f6QWKSDzaM3bk31A+OYHu6cPa9P/rFIx8X5d24tHXUpRiiq6/PYI6SQRjUPlB72GjsjoEU8F+ALadHg==
@@ -3065,7 +2940,7 @@
   resolved "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz"
   integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
 
-"@testing-library/dom@^9.0.0":
+"@testing-library/dom@^9.0.0", "@testing-library/dom@>=7.21.4":
   version "9.3.4"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz"
   integrity sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==
@@ -3193,16 +3068,32 @@
   resolved "https://registry.npmjs.org/@types/escodegen/-/escodegen-0.0.6.tgz"
   integrity sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==
 
-"@types/estree@^0.0.51":
-  version "0.0.51"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz"
-  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+"@types/eslint-scope@^3.7.3":
+  version "3.7.7"
+  resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz"
+  integrity sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==
+  dependencies:
+    "@types/eslint" "*"
+    "@types/estree" "*"
 
-"@types/estree@^1.0.0":
+"@types/eslint@*":
+  version "8.44.9"
+  resolved "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.9.tgz"
+  integrity sha512-6yBxcvwnnYoYT1Uk2d+jvIfsuP4mb2EdIxFnrPABj5a/838qe5bGkNLFOiipX4ULQ7XVQvTxOh7jO+BTAiqsEw==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/estree@*", "@types/estree@^1.0.0":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz"
   integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
 
+"@types/estree@^0.0.51":
+  version "0.0.51"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz"
+  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+
 "@types/express-serve-static-core@^4.17.33":
   version "4.17.41"
   resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.41.tgz"
@@ -3267,7 +3158,7 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@28.1.3":
+"@types/jest@>= 28", "@types/jest@28.1.3":
   version "28.1.3"
   resolved "https://registry.npmjs.org/@types/jest/-/jest-28.1.3.tgz"
   integrity sha512-Tsbjk8Y2hkBaY/gJsataeb4q9Mubw9EOz7+4RjPkzD5KjTvHHs7cpws22InaoXxAVAhF5HfFbzJjo6oKWqSZLw==
@@ -3275,7 +3166,7 @@
     jest-matcher-utils "^28.0.0"
     pretty-format "^28.0.0"
 
-"@types/json-schema@^7.0.12":
+"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.8":
   version "7.0.12"
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
@@ -3318,7 +3209,7 @@
     "@types/node" "*"
     form-data "^4.0.0"
 
-"@types/node@*", "@types/node@^20.10.6":
+"@types/node@*", "@types/node@^20.10.6", "@types/node@>= 14":
   version "20.10.6"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.10.6.tgz"
   integrity sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==
@@ -3362,14 +3253,14 @@
   resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dom@^18.2.7":
+"@types/react-dom@*", "@types/react-dom@^18.2.7":
   version "18.2.7"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz"
   integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=16", "@types/react@^18.2.15":
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.15", "@types/react@>=16":
   version "18.2.18"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.18.tgz"
   integrity sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==
@@ -3469,7 +3360,7 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/parser@^6.0.0":
+"@typescript-eslint/parser@^6.0.0", "@typescript-eslint/parser@^6.0.0 || ^6.0.0-alpha":
   version "6.2.1"
   resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.2.1.tgz"
   integrity sha512-Ld+uL1kYFU8e6btqBFpsHkwQ35rw30IWpdQxgOqOh4NfxSDH6uCkah1ks8R/RgQqI5hHPXMaLy9fbFseIe+dIg==
@@ -3563,14 +3454,14 @@
     "@babel/plugin-transform-react-jsx-source" "^7.22.5"
     react-refresh "^0.14.0"
 
-"@volar/language-core@1.11.1", "@volar/language-core@~1.11.1":
+"@volar/language-core@~1.11.1", "@volar/language-core@1.11.1":
   version "1.11.1"
   resolved "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz"
   integrity sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==
   dependencies:
     "@volar/source-map" "1.11.1"
 
-"@volar/source-map@1.11.1", "@volar/source-map@~1.11.1":
+"@volar/source-map@~1.11.1", "@volar/source-map@1.11.1":
   version "1.11.1"
   resolved "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz"
   integrity sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==
@@ -3604,7 +3495,7 @@
     "@vue/compiler-core" "3.4.5"
     "@vue/shared" "3.4.5"
 
-"@vue/language-core@1.8.27", "@vue/language-core@^1.8.26":
+"@vue/language-core@^1.8.26", "@vue/language-core@1.8.27":
   version "1.8.27"
   resolved "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz"
   integrity sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==
@@ -3619,11 +3510,142 @@
     path-browserify "^1.0.1"
     vue-template-compiler "^2.7.14"
 
-"@vue/shared@3.4.5", "@vue/shared@^3.3.0":
+"@vue/shared@^3.3.0", "@vue/shared@3.4.5":
   version "3.4.5"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.5.tgz"
   integrity sha512-6XptuzlMvN4l4cDnDw36pdGEV+9njYkQ1ZE0Q6iZLwrKefKaOJyiFmcP3/KBDHbt72cJZGtllAc1GaHe6XGAyg==
 
+"@webassemblyjs/ast@^1.11.5", "@webassemblyjs/ast@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz"
+  integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
+
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
+
+"@webassemblyjs/helper-buffer@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz"
+  integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
+
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
+
+"@webassemblyjs/helper-wasm-section@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz"
+  integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
+
+"@webassemblyjs/wasm-edit@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz"
+  integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-opt" "1.11.6"
+    "@webassemblyjs/wasm-parser" "1.11.6"
+    "@webassemblyjs/wast-printer" "1.11.6"
+
+"@webassemblyjs/wasm-gen@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz"
+  integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wasm-opt@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz"
+  integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-parser" "1.11.6"
+
+"@webassemblyjs/wasm-parser@^1.11.5", "@webassemblyjs/wasm-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz"
+  integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wast-printer@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz"
+  integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
+
 "@yarnpkg/esbuild-plugin-pnp@^3.0.0-rc.10":
   version "3.0.0-rc.15"
   resolved "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz"
@@ -3639,7 +3661,7 @@
     "@yarnpkg/libzip" "^2.3.0"
     tslib "^1.13.0"
 
-"@yarnpkg/libzip@2.3.0", "@yarnpkg/libzip@^2.3.0":
+"@yarnpkg/libzip@^2.3.0", "@yarnpkg/libzip@2.3.0":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@yarnpkg/libzip/-/libzip-2.3.0.tgz"
   integrity sha512-6xm38yGVIa6mKm/DUCF2zFFJhERh/QWp1ufm4cNUvxsONBmfPg8uZ9pZBdOmF6qFGr/HlT6ABBkCSx/dlEtvWg==
@@ -3655,6 +3677,11 @@ accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+acorn-import-assertions@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz"
+  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
+
 acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@@ -3665,16 +3692,16 @@ acorn-walk@^7.2.0:
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8, acorn@^8.11.2, acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
+  version "8.11.3"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz"
+  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
+
 acorn@^7.4.1:
   version "7.4.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.11.2, acorn@^8.9.0:
-  version "8.11.3"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz"
-  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
-
 address@^1.0.1:
   version "1.2.2"
   resolved "https://registry.npmjs.org/address/-/address-1.2.2.tgz"
@@ -3693,7 +3720,12 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-ajv@^6.12.4, ajv@~6.12.6:
+ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.12.4, ajv@^6.12.5, ajv@^6.9.1, ajv@~6.12.6:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3746,6 +3778,11 @@ ansi-styles@^5.0.0:
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
 anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"
@@ -3771,7 +3808,7 @@ archy@^1.0.0:
   resolved "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz"
   integrity sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==
 
-argparse@^1.0.7, argparse@~1.0.9:
+argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
@@ -3783,6 +3820,13 @@ argparse@^2.0.1:
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+argparse@~1.0.9:
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
 aria-hidden@^1.1.1:
   version "1.2.3"
   resolved "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz"
@@ -3790,7 +3834,7 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^2.0.0"
 
-aria-query@5.1.3, aria-query@^5.0.0:
+aria-query@^5.0.0, aria-query@5.1.3:
   version "5.1.3"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz"
   integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
@@ -4125,7 +4169,7 @@ browserify-zlib@^0.1.4:
   dependencies:
     pako "~0.2.0"
 
-browserslist@^4.22.2:
+browserslist@^4.14.5, browserslist@^4.22.2, "browserslist@>= 4.21.0":
   version "4.22.2"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz"
   integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==
@@ -4194,7 +4238,12 @@ callsites@^3.0.0:
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase@^5.0.0, camelcase@^5.3.1:
+camelcase@^5.0.0:
+  version "5.3.1"
+  resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
@@ -4284,6 +4333,11 @@ chromatic@^10.2.0:
   resolved "https://registry.npmjs.org/chromatic/-/chromatic-10.2.0.tgz"
   integrity sha512-UDVGWa2Fx9CLCpwnyfvFHGr0vGF0ooB1TugUdgOcjC9pJXiFa67i7oaXMyTfVRIFxlt/QkqOJwdqDqqlLFffCw==
 
+chrome-trace-event@^1.0.2:
+  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==
+
 ci-info@^3.2.0:
   version "3.9.0"
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz"
@@ -4383,16 +4437,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
 colors@~1.2.1:
   version "1.2.5"
   resolved "https://registry.npmjs.org/colors/-/colors-1.2.5.tgz"
@@ -4405,6 +4459,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@^2.20.0:
+  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==
+
 commander@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz"
@@ -4420,7 +4479,12 @@ commander@^6.2.1:
   resolved "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
-commander@^9.0.0, commander@^9.4.1:
+commander@^9.0.0:
+  version "9.5.0"
+  resolved "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
+commander@^9.4.1:
   version "9.5.0"
   resolved "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz"
   integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
@@ -4590,26 +4654,33 @@ de-indent@^1.0.2:
   resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
-debug@2.6.9, debug@^2.6.9:
+debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@4:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
-debug@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+debug@2.6.9:
+  version "2.6.9"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
-    ms "^2.1.1"
+    ms "2.0.0"
 
 decamelize@^1.2.0:
   version "1.2.0"
@@ -4829,7 +4900,7 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
-domelementtype@1, domelementtype@^1.3.1:
+domelementtype@^1.3.1, domelementtype@1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
@@ -4874,6 +4945,11 @@ duplexify@^3.5.0, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
@@ -4901,6 +4977,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz"
@@ -4930,6 +5011,14 @@ enhanced-resolve@^5.12.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enhanced-resolve@^5.15.0:
+  version "5.15.0"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz"
+  integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 entities@^1.1.1:
   version "1.1.2"
   resolved "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz"
@@ -5022,6 +5111,11 @@ es-module-lexer@^0.9.3:
   resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
+es-module-lexer@^1.2.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz"
+  integrity sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==
+
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz"
@@ -5064,7 +5158,7 @@ esbuild-register@^3.5.0:
   dependencies:
     debug "^4.3.4"
 
-esbuild@^0.18.0, esbuild@^0.18.10:
+esbuild@^0.18.0, esbuild@^0.18.10, esbuild@>=0.10.0, "esbuild@>=0.12 <1":
   version "0.18.18"
   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.18.18.tgz"
   integrity sha512-UckDPWvdVJLNT0npk5AMTpVwGRQhS76rWFLmHwEtgNvWlR9sgVV1eyc/oeBtM86q9s8ABBLMmm0CwNxhVemOiw==
@@ -5174,7 +5268,7 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-import@^2.28.1:
+eslint-plugin-import@*, eslint-plugin-import@^2.28.1, eslint-plugin-import@>=1.4.0:
   version "2.28.1"
   resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz"
   integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==
@@ -5215,12 +5309,20 @@ eslint-scope@^7.2.2:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
+eslint-scope@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
 eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.2:
   version "3.4.2"
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz"
   integrity sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==
 
-eslint@^8.45.0:
+eslint@*, "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^7.0.0 || ^8.0.0", eslint@^8.45.0, eslint@>=7:
   version "8.46.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz"
   integrity sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==
@@ -5291,6 +5393,11 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
 estraverse@^5.1.0, estraverse@^5.2.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
@@ -5311,6 +5418,11 @@ etag@~1.8.1:
   resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+events@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
 execa@^5.0.0, execa@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz"
@@ -5569,7 +5681,15 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
-find-up@^4.0.0, find-up@^4.1.0:
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
@@ -5665,15 +5785,6 @@ fs-exists-sync@^0.1.0:
   resolved "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz"
   integrity sha512-cR/vflFyPZtrN6b38ZyWxpWdhlXrzZEBawlpBQMq7033xVY7/kg0GDMBK5jg8lDYQckdJ5x/YC88lM3C7VMsLg==
 
-fs-extra@11.1.1:
-  version "11.1.1"
-  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz"
-  integrity sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
 fs-extra@^11.1.0:
   version "11.2.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz"
@@ -5692,6 +5803,15 @@ fs-extra@~7.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@11.1.1:
+  version "11.1.1"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz"
+  integrity sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-minipass@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz"
@@ -5704,7 +5824,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@2.3.2, fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2, fsevents@2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -5813,7 +5933,7 @@ github-slugger@^1.0.0:
   resolved "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz"
   integrity sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==
 
-glob-parent@^5.1.2, glob-parent@~5.1.2:
+glob-parent@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -5827,6 +5947,13 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-promise@^4.2.0:
   version "4.2.2"
   resolved "https://registry.npmjs.org/glob-promise/-/glob-promise-4.2.2.tgz"
@@ -5839,7 +5966,18 @@ glob-to-regexp@^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==
 
-glob@^10.0.0, glob@^10.2.2:
+glob@^10.0.0:
+  version "10.3.10"
+  resolved "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz"
+  integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.3.5"
+    minimatch "^9.0.1"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+    path-scurry "^1.10.1"
+
+glob@^10.2.2:
   version "10.3.10"
   resolved "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz"
   integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
@@ -6144,7 +6282,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
+inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3, inherits@2, inherits@2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -6342,11 +6480,6 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-object@5.0.0, is-plain-object@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz"
-  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
-
 is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
@@ -6354,6 +6487,11 @@ is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^5.0.0, is-plain-object@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
@@ -6554,12 +6692,12 @@ istanbul-reports@^3.0.2, istanbul-reports@^3.1.3:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-jackspeak@2.1.1, jackspeak@^2.3.5:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.1.1.tgz#2a42db4cfbb7e55433c28b6f75d8b796af9669cd"
-  integrity sha512-juf9stUEwUaILepraGOWIJTLwg48bUnBmRqd2ln2Os1sW987zeoj/hzhbvRB95oMuS2ZTpjULmdwHNX4rzZIZw==
+jackspeak@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz"
+  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
   dependencies:
-    cliui "^8.0.1"
+    "@isaacs/cliui" "^8.0.2"
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
@@ -6582,7 +6720,7 @@ jest-changed-files@^29.7.0:
     jest-util "^29.7.0"
     p-limit "^3.1.0"
 
-jest-circus@^29.6.4, jest-circus@^29.7.0:
+jest-circus@^29.3.1, jest-circus@^29.6.4, jest-circus@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest-circus/-/jest-circus-29.7.0.tgz"
   integrity sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==
@@ -6691,7 +6829,7 @@ jest-each@^29.7.0:
     jest-util "^29.7.0"
     pretty-format "^29.7.0"
 
-jest-environment-node@^29.6.4, jest-environment-node@^29.7.0:
+jest-environment-node@^29.3.1, jest-environment-node@^29.6.4, jest-environment-node@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz"
   integrity sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==
@@ -6848,7 +6986,7 @@ jest-resolve-dependencies@^29.7.0:
     jest-regex-util "^29.6.3"
     jest-snapshot "^29.7.0"
 
-jest-resolve@^29.7.0:
+jest-resolve@*, jest-resolve@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.7.0.tgz"
   integrity sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==
@@ -6863,7 +7001,7 @@ jest-resolve@^29.7.0:
     resolve.exports "^2.0.0"
     slash "^3.0.0"
 
-jest-runner@^29.6.4, jest-runner@^29.7.0:
+jest-runner@^29.3.1, jest-runner@^29.6.4, jest-runner@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest-runner/-/jest-runner-29.7.0.tgz"
   integrity sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==
@@ -7002,6 +7140,15 @@ jest-watcher@^29.0.0, jest-watcher@^29.7.0:
     jest-util "^29.7.0"
     string-length "^4.0.1"
 
+jest-worker@^27.4.5:
+  version "27.5.1"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
 jest-worker@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz"
@@ -7012,7 +7159,7 @@ jest-worker@^29.7.0:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest@^29.6.4:
+"jest@^27.0.0 || ^28.0.0 || ^29.0.0", jest@^29.3.1, jest@^29.6.4, "jest@>= 28":
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz"
   integrity sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==
@@ -7094,7 +7241,7 @@ jsesc@~0.5.0:
   resolved "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
-json-parse-even-better-errors@^2.3.0:
+json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
@@ -7184,6 +7331,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+loader-runner@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz"
@@ -7385,28 +7537,28 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
+"mime-db@>= 1.43.0 < 2", mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12, mime-types@^2.1.25, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.25, mime-types@^2.1.27, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
     mime-db "1.52.0"
 
-mime@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
 mime@^2.0.3:
   version "2.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz"
   integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
 
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
@@ -7436,7 +7588,14 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@^9.0.1, minimatch@^9.0.3:
+minimatch@^9.0.1:
+  version "9.0.3"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^9.0.3:
   version "9.0.3"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz"
   integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
@@ -7455,16 +7614,16 @@ minipass@^3.0.0:
   dependencies:
     yallist "^4.0.0"
 
-minipass@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz"
-  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
-
 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
   version "7.0.4"
   resolved "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz"
   integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
 
+minipass@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz"
+  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
+
 minizlib@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz"
@@ -7485,21 +7644,26 @@ mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.6"
 
-mkdirp@^1.0.3, mkdirp@^1.0.4:
+mkdirp@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
-  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+mkdirp@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-ms@2.1.2, ms@^2.1.1:
+ms@^2.1.1, ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
 ms@2.1.3:
   version "2.1.3"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
@@ -7783,7 +7947,14 @@ os-homedir@^1.0.1:
   resolved "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz"
   integrity sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==
 
-p-limit@^2.0.0, p-limit@^2.2.0:
+p-limit@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
   integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
@@ -7978,7 +8149,14 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-dir@^4.1.0, pkg-dir@^4.2.0:
+pkg-dir@^4.1.0:
+  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==
+  dependencies:
+    find-up "^4.0.0"
+
+pkg-dir@^4.2.0:
   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==
@@ -7992,7 +8170,7 @@ pkg-dir@^5.0.0:
   dependencies:
     find-up "^5.0.0"
 
-playwright-core@1.40.1, playwright-core@>=1.2.0:
+playwright-core@>=1.2.0, playwright-core@1.40.1:
   version "1.40.1"
   resolved "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.1.tgz"
   integrity sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==
@@ -8046,7 +8224,17 @@ pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^28.0.0, pretty-format@^28.1.3:
+pretty-format@^28.0.0:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz"
+  integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+pretty-format@^28.1.3:
   version "28.1.3"
   resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz"
   integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
@@ -8173,13 +8361,6 @@ pure-rand@^6.0.0:
   resolved "https://registry.npmjs.org/pure-rand/-/pure-rand-6.0.4.tgz"
   integrity sha512-LA0Y9kxMYv47GIPJy6MI84fqTd2HmYZI83W/kM/SkKfDlajnZYfmXFTxkbY+xSBPkLJxltMa9hIkmdc29eguMA==
 
-qs@6.11.0:
-  version "6.11.0"
-  resolved "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz"
-  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
-  dependencies:
-    side-channel "^1.0.4"
-
 qs@^6.10.0:
   version "6.11.2"
   resolved "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz"
@@ -8187,6 +8368,13 @@ qs@^6.10.0:
   dependencies:
     side-channel "^1.0.4"
 
+qs@6.11.0:
+  version "6.11.0"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+  dependencies:
+    side-channel "^1.0.4"
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
@@ -8197,6 +8385,13 @@ ramda@0.29.0:
   resolved "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz"
   integrity sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==
 
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz"
@@ -8238,7 +8433,7 @@ react-docgen@^7.0.0:
     resolve "^1.22.1"
     strip-indent "^4.0.0"
 
-react-dom@^18.2.0:
+"react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0", "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@>=16.8.0, "react-dom@16.8.0 - 18":
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -8255,11 +8450,6 @@ react-element-to-jsx-string@^15.0.0:
     is-plain-object "5.0.0"
     react-is "18.1.0"
 
-react-is@18.1.0:
-  version "18.1.0"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz"
-  integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -8275,6 +8465,11 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-is@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz"
+  integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz"
@@ -8308,7 +8503,7 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react@^18.2.0:
+"react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.2.0, "react@>= 0.14.0", react@>=16, react@>=16.8.0, "react@16.8.0 - 18":
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -8334,7 +8529,20 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^2.0.0, readable-stream@^2.2.2, readable-stream@~2.3.6:
+readable-stream@^2.0.0:
+  version "2.3.8"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    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"
+
+readable-stream@^2.2.2:
   version "2.3.8"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz"
   integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
@@ -8356,6 +8564,19 @@ readable-stream@^3.1.1, readable-stream@^3.4.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@~2.3.6:
+  version "2.3.8"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    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"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
@@ -8566,7 +8787,7 @@ rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
-"rollup@^2.25.0 || ^3.3.0", rollup@^3.25.2:
+rollup@^1.20.0||^2.0.0||^3.0.0||^4.0.0, "rollup@^2.25.0 || ^3.3.0", rollup@^3.25.2:
   version "3.27.2"
   resolved "https://registry.npmjs.org/rollup/-/rollup-3.27.2.tgz"
   integrity sha512-YGwmHf7h2oUHkVBT248x0yt6vZkYQ3/rvE5iQuVBh3WO8GcJ6BNeOkpoX1yMHIiBm18EMLjBPIoUDkhgnyxGOQ==
@@ -8597,15 +8818,20 @@ safe-array-concat@^1.0.0:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@^5.1.0, safe-buffer@~5.2.0, safe-buffer@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@5.2.1, safe-buffer@~5.2.0:
-  version "5.2.1"
-  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+safe-buffer@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 safe-regex-test@^1.0.0:
   version "1.0.0"
@@ -8628,7 +8854,21 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.6.0, semver@^5.7.2:
+schema-utils@^3.1.1, schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+semver@^5.6.0:
+  version "5.7.2"
+  resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
+semver@^5.7.2:
   version "5.7.2"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
@@ -8638,13 +8878,39 @@ semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@~7.5.4:
+semver@^7.3.7:
+  version "7.5.4"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^7.5.3:
+  version "7.5.4"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@~7.5.4:
   version "7.5.4"
   resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"
 
+"semver@2 || 3 || 4 || 5":
+  version "5.7.2"
+  resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.npmjs.org/send/-/send-0.18.0.tgz"
@@ -8664,6 +8930,13 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
+serialize-javascript@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz"
+  integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
+  dependencies:
+    randombytes "^2.1.0"
+
 serve-static@1.15.0:
   version "1.15.0"
   resolved "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz"
@@ -8731,7 +9004,17 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
+signal-exit@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -8768,18 +9051,18 @@ source-map-js@^1.0.2:
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-source-map-support@0.5.13:
-  version "0.5.13"
-  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz"
-  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+source-map-support@^0.5.16, source-map-support@~0.5.20:
+  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==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@^0.5.16:
-  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==
+source-map-support@0.5.13:
+  version "0.5.13"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -8789,7 +9072,17 @@ source-map@^0.5.7:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+source-map@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -8888,6 +9181,20 @@ stream-shift@^1.0.0:
   resolved "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz"
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
 string-argv@~0.3.1:
   version "0.3.2"
   resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz"
@@ -8909,7 +9216,7 @@ string-length@^5.0.1:
     char-regex "^2.0.0"
     strip-ansi "^7.0.1"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8918,6 +9225,33 @@ string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
+string-width@^4.1.0, string-width@^4.2.0:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
 string.prototype.trim@^1.2.7:
   version "1.2.8"
   resolved "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz"
@@ -8945,19 +9279,12 @@ string.prototype.trimstart@^1.0.6:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
-    safe-buffer "~5.1.0"
+    ansi-regex "^5.0.1"
 
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
@@ -9058,7 +9385,7 @@ tapable@^0.1.8:
   resolved "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz"
   integrity sha512-jX8Et4hHg57mug1/079yitEKWGB3LCwoxByLsNim89LABq8NqgiX+6iYVOsq0vX8uJHkU+DZ5fnq95f800bEsQ==
 
-tapable@^2.2.0:
+tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
@@ -9126,6 +9453,27 @@ tempy@^1.0.1:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
+terser-webpack-plugin@^5.3.7:
+  version "5.3.9"
+  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz"
+  integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.16.8"
+
+terser@^5.16.8, terser@^5.4.0:
+  version "5.26.0"
+  resolved "https://registry.npmjs.org/terser/-/terser-5.26.0.tgz"
+  integrity sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz"
@@ -9252,12 +9600,17 @@ type-fest@^0.6.0:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz"
   integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
 
-type-fest@^0.8.0, type-fest@^0.8.1:
+type-fest@^0.8.0:
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
+type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-type-fest@^2.19.0, type-fest@~2.19:
+type-fest@^2.19.0:
   version "2.19.0"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
@@ -9267,6 +9620,11 @@ type-fest@^3.0.0:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz"
   integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
 
+type-fest@~2.19:
+  version "2.19.0"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz"
@@ -9326,7 +9684,7 @@ typedarray@^0.0.6:
   resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typescript@5.3.3, typescript@^5.0.2:
+typescript@*, typescript@^5.0.2, "typescript@>= 4.3.x", typescript@>=4.2.0, typescript@>=4.9.5, typescript@5.3.3:
   version "5.3.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz"
   integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
@@ -9423,7 +9781,7 @@ universalify@^2.0.0:
   resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz"
   integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
-unpipe@1.0.0, unpipe@~1.0.0:
+unpipe@~1.0.0, unpipe@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
@@ -9569,7 +9927,7 @@ vite-plugin-svgr@^3.2.0:
     "@svgr/core" "^7.0.0"
     "@svgr/plugin-jsx" "^7.0.0"
 
-vite@^4.4.5:
+vite@*, "vite@^2.6.0 || 3 || 4", "vite@^3.0.0 || ^4.0.0", "vite@^3.0.0 || ^4.0.0 || ^5.0.0", vite@^4.1.0-beta.0, vite@^4.2.0, vite@^4.4.5, vite@>=3:
   version "4.4.8"
   resolved "https://registry.npmjs.org/vite/-/vite-4.4.8.tgz"
   integrity sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==
@@ -9624,7 +9982,7 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-watchpack@^2.2.0:
+watchpack@^2.2.0, watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz"
   integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
@@ -9654,6 +10012,36 @@ webpack-virtual-modules@^0.6.1:
   resolved "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz"
   integrity sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==
 
+webpack@^5.1.0, webpack@>=1.11.0:
+  version "5.89.0"
+  resolved "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz"
+  integrity sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^1.0.0"
+    "@webassemblyjs/ast" "^1.11.5"
+    "@webassemblyjs/wasm-edit" "^1.11.5"
+    "@webassemblyjs/wasm-parser" "^1.11.5"
+    acorn "^8.7.1"
+    acorn-import-assertions "^1.9.0"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.15.0"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.7"
+    watchpack "^2.4.0"
+    webpack-sources "^3.2.3"
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz"
@@ -9718,6 +10106,15 @@ wordwrap@^1.0.0:
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
@@ -9736,6 +10133,15 @@ wrap-ansi@^7.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"

From fb9d7e78da5f278112b87e541164a5a1d81246a8 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Fri, 12 Jan 2024 23:48:12 +0900
Subject: [PATCH 02/14] =?UTF-8?q?refactor:=20useField=20=EB=B0=8F=20Field?=
 =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B2=80=ED=86=A0=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

스토리북도 적용한다.
---
 src/components/Field/Field.tsx         | 17 ++++++
 src/components/Field/FieldInput.tsx    | 40 ++++++--------
 src/components/Field/FieldTextarea.tsx | 40 ++++++--------
 src/hooks/useField.ts                  |  5 +-
 src/stories/Field.stories.tsx          | 72 ++++++++++----------------
 src/types/useField.ts                  |  4 +-
 6 files changed, 83 insertions(+), 95 deletions(-)

diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
index 60d4eff..0db1153 100644
--- a/src/components/Field/Field.tsx
+++ b/src/components/Field/Field.tsx
@@ -4,11 +4,17 @@ import { ReactNode, createContext } from 'react';
 import FieldInput from './FieldInput';
 import FieldTextarea from './FieldTextarea';
 import { ReactComponent as SVGTextRequired } from '../../assets/svg/text_required.svg';
+import { Config, Validate } from '../../types/useField';
 
 interface InputProps {
   children: ReactNode;
   label: string;
   value: string;
+  onChange: (
+    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+    config: Config,
+  ) => void;
+  onValidate?: () => Validate[];
   maxLength?: number;
   isRequired?: boolean;
 }
@@ -17,17 +23,26 @@ interface FieldContextProps {
   isRequired: boolean;
   inputValue: string;
   maxLength: number | undefined;
+  onChange: (
+    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+    config: Config,
+  ) => void;
+  onValidate?: () => Validate[];
 }
 
 export const FieldContext = createContext<FieldContextProps>({
   isRequired: false,
   inputValue: '',
   maxLength: undefined,
+  onChange: () => {},
+  onValidate: () => [],
 });
 
 const Field = ({
   label,
   value,
+  onChange,
+  onValidate,
   maxLength,
   isRequired = false,
   children,
@@ -39,6 +54,8 @@ const Field = ({
         isRequired,
         inputValue: value,
         maxLength,
+        onChange,
+        onValidate,
       }}
     >
       <LabelWrapper {...attributes}>
diff --git a/src/components/Field/FieldInput.tsx b/src/components/Field/FieldInput.tsx
index 535672c..7d22767 100644
--- a/src/components/Field/FieldInput.tsx
+++ b/src/components/Field/FieldInput.tsx
@@ -2,34 +2,30 @@ import styled from '@emotion/styled';
 import { useContext } from 'react';
 
 import { FieldContext } from './Field';
-import { Config, Validate } from '../../types/useField';
 
 export interface Props {
   name: string;
-  onChange: (
-    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-    config: Config,
-  ) => void;
-  onValidate?: () => Validate[];
-  isSuccess?: boolean;
   successMessage?: string;
-  errorMessage?: string;
+  errorValue?: string;
   autoFocus?: boolean;
   placeholder?: string;
 }
 
 const FieldInput = ({
   name,
-  onChange,
-  onValidate,
-  isSuccess = true,
   successMessage = '',
-  errorMessage = '',
+  errorValue = '',
   autoFocus = false,
   placeholder = '',
   ...attributes
 }: Props) => {
-  const { isRequired, inputValue: value, maxLength } = useContext(FieldContext);
+  const {
+    isRequired,
+    inputValue: value,
+    maxLength,
+    onChange,
+    onValidate,
+  } = useContext(FieldContext);
 
   return (
     <>
@@ -40,26 +36,25 @@ const FieldInput = ({
           onChange(e, {
             isRequired,
             maxLength,
+            name,
             onValidate,
           });
         }}
         placeholder={placeholder}
         autoFocus={autoFocus}
         maxLength={maxLength}
-        errorMessage={errorMessage}
+        errorValue={errorValue}
         {...attributes}
       />
 
-      {!errorMessage && isSuccess && successMessage && value && (
-        <MessageWrapper isNonError={!errorMessage && isSuccess}>
+      {!errorValue && successMessage && value && (
+        <MessageWrapper isNonError={!errorValue}>
           {successMessage}
         </MessageWrapper>
       )}
 
-      {(errorMessage || !isSuccess) && (
-        <MessageWrapper isNonError={!errorMessage && isSuccess}>
-          {errorMessage}
-        </MessageWrapper>
+      {errorValue && (
+        <MessageWrapper isNonError={!errorValue}>{errorValue}</MessageWrapper>
       )}
     </>
   );
@@ -67,7 +62,7 @@ const FieldInput = ({
 
 export default FieldInput;
 
-const Input = styled.input<{ errorMessage: string }>`
+const Input = styled.input<{ errorValue: string }>`
   box-sizing: border-box;
   width: 100%;
   height: 44px;
@@ -76,8 +71,7 @@ const Input = styled.input<{ errorMessage: string }>`
   font-size: ${({ theme }) => theme.font.suit14r.fontSize}px;
   font-weight: ${({ theme }) => theme.font.suit14r.fontWeight};
   border: 1px solid
-    ${({ errorMessage, theme }) =>
-      errorMessage ? theme.color.c3 : theme.color.l2};
+    ${({ errorValue, theme }) => (errorValue ? theme.color.c3 : theme.color.l2)};
   outline: none;
   color: ${({ theme }) => theme.color.b4};
   background: ${({ theme }) => theme.color.w1};
diff --git a/src/components/Field/FieldTextarea.tsx b/src/components/Field/FieldTextarea.tsx
index 4c9b79f..dab2db1 100644
--- a/src/components/Field/FieldTextarea.tsx
+++ b/src/components/Field/FieldTextarea.tsx
@@ -2,34 +2,30 @@ import styled from '@emotion/styled';
 import { useContext } from 'react';
 
 import { FieldContext } from './Field';
-import { Config, Validate } from '../../types/useField';
 
 export interface Props {
   name: string;
-  onChange: (
-    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-    config: Config,
-  ) => void;
-  onValidate?: () => Validate[];
-  isSuccess?: boolean;
   successMessage?: string;
-  errorMessage?: string;
+  errorValue?: string;
   autoFocus?: boolean;
   placeholder?: string;
 }
 
 const FieldTextarea = ({
   name,
-  onChange,
-  onValidate,
-  isSuccess = true,
   successMessage = '',
-  errorMessage = '',
+  errorValue = '',
   autoFocus = false,
   placeholder = '',
   ...attributes
 }: Props) => {
-  const { isRequired, inputValue: value, maxLength } = useContext(FieldContext);
+  const {
+    isRequired,
+    inputValue: value,
+    maxLength,
+    onChange,
+    onValidate,
+  } = useContext(FieldContext);
 
   return (
     <>
@@ -40,25 +36,24 @@ const FieldTextarea = ({
           onChange(e, {
             isRequired,
             maxLength,
+            name,
             onValidate,
           });
         }}
         placeholder={placeholder}
         autoFocus={autoFocus}
         maxLength={maxLength}
-        errorMessage={errorMessage}
+        errorValue={errorValue}
         {...attributes}
       />
-      {!errorMessage && isSuccess && successMessage && value && (
-        <MessageWrapper isNonError={!errorMessage && isSuccess}>
+      {!errorValue && successMessage && value && (
+        <MessageWrapper isNonError={!errorValue}>
           {successMessage}
         </MessageWrapper>
       )}
 
-      {(errorMessage || !isSuccess) && (
-        <MessageWrapper isNonError={!errorMessage && isSuccess}>
-          {errorMessage}
-        </MessageWrapper>
+      {errorValue && (
+        <MessageWrapper isNonError={!errorValue}>{errorValue}</MessageWrapper>
       )}
     </>
   );
@@ -66,7 +61,7 @@ const FieldTextarea = ({
 
 export default FieldTextarea;
 
-const TextArea = styled.textarea<{ errorMessage: string }>`
+const TextArea = styled.textarea<{ errorValue: string }>`
   box-sizing: border-box;
   width: 100%;
   height: 100px;
@@ -75,8 +70,7 @@ const TextArea = styled.textarea<{ errorMessage: string }>`
   font-size: ${({ theme }) => theme.font.suit14r.fontSize}px;
   font-weight: ${({ theme }) => theme.font.suit14r.fontWeight};
   border: 1px solid
-    ${({ errorMessage, theme }) =>
-      errorMessage ? theme.color.c3 : theme.color.l2};
+    ${({ errorValue, theme }) => (errorValue ? theme.color.c3 : theme.color.l2)};
   outline: none;
   color: ${({ theme }) => theme.color.b4};
   background: ${({ theme }) => theme.color.w1};
diff --git a/src/hooks/useField.ts b/src/hooks/useField.ts
index 7959c15..f41b142 100644
--- a/src/hooks/useField.ts
+++ b/src/hooks/useField.ts
@@ -48,7 +48,7 @@ const useField = <T extends Record<keyof T, string>>(initialValue: T) => {
 
       if (config && config.onValidate) {
         config.onValidate().forEach((validate) => {
-          if (validate.name === name && validate.regexp.test(value)) {
+          if (config.name === name && validate.validateFn(value)) {
             setFieldErrorValue((prev) => ({
               ...prev,
               [name]: validate.errorMessage,
@@ -60,8 +60,7 @@ const useField = <T extends Record<keyof T, string>>(initialValue: T) => {
           config
             .onValidate()
             .find(
-              (validate) =>
-                validate.name === name && validate.regexp.test(value),
+              (validate) => config.name === name && validate.validateFn(value),
             )
         )
           return;
diff --git a/src/stories/Field.stories.tsx b/src/stories/Field.stories.tsx
index 1f7ee3a..bfe46d8 100644
--- a/src/stories/Field.stories.tsx
+++ b/src/stories/Field.stories.tsx
@@ -14,9 +14,8 @@ interface Props {
   maxLength: number;
   isRequired: boolean;
   name: string;
-  isSuccess: boolean;
   successMessage: string;
-  errorMessage: string;
+  errorValue: string;
   placeholder: string;
   autoFocus: boolean;
 }
@@ -61,17 +60,12 @@ const meta = {
       description:
         'Field.Input, Field.Textarea 컴포넌트의 유저 타이핑 값을 정규표현식을 통해 검증할 때 사용합니다.',
     },
-    isSuccess: {
-      control: 'boolean',
-      description:
-        'Field.Input, Field.Textarea 컴포넌트의 유저 타이핑 값을 외부 로직을 통해 검증할 때 사용합니다. 기본값은 true 입니다.',
-    },
     successMessage: {
       control: 'text',
       description:
         'Field.Input, Field.Textarea 컴포넌트의 입력값이 정상적일 경우 하단에 표시할 메세지를 설정합니다.',
     },
-    errorMessage: {
+    errorValue: {
       control: 'text',
       description:
         'Field.Input, Field.Textarea 컴포넌트의 입력값이 비정상적일 경우 하단에 표시할 메세지를 설정합니다. useField 훅의 fieldErrorValue의 name 프로퍼티에 해당하는 값을 전달하면 됩니다.',
@@ -99,9 +93,8 @@ export const Input: Story = {
     maxLength: 10,
     isRequired: true,
     name: 'nickname',
-    isSuccess: true,
     successMessage: '사용 가능한 닉네임입니다.',
-    errorMessage: '사용 불가능한 닉네임입니다.',
+    errorValue: '사용 불가능한 닉네임입니다.',
     placeholder: '특수문자를 제외한 닉네임을 입력해 주세요.',
     autoFocus: false,
   },
@@ -110,9 +103,8 @@ export const Input: Story = {
     maxLength,
     isRequired,
     name,
-    isSuccess,
     successMessage,
-    errorMessage,
+    errorValue,
     placeholder,
     autoFocus,
   }: Props) => {
@@ -123,9 +115,9 @@ export const Input: Story = {
     const onValidate = () => {
       return [
         {
-          regexp: /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g,
-          name,
-          errorMessage,
+          validateFn: (value: string) =>
+            /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g.test(value),
+          errorMessage: errorValue,
         },
       ];
     };
@@ -134,16 +126,15 @@ export const Input: Story = {
       <Field
         label={label}
         value={fieldValue[name]}
+        onChange={onChangeField}
+        onValidate={onValidate}
         maxLength={maxLength}
         isRequired={isRequired}
       >
         <Field.Input
           name={name}
-          onChange={onChangeField}
-          onValidate={onValidate}
-          isSuccess={isSuccess}
+          errorValue={fieldErrorValue[name]}
           successMessage={successMessage}
-          errorMessage={fieldErrorValue[name]}
           autoFocus={autoFocus}
           placeholder={placeholder}
         />
@@ -159,9 +150,8 @@ export const Textarea: Story = {
     maxLength: 150,
     isRequired: true,
     name: 'intro',
-    isSuccess: true,
     successMessage: '사용 가능한 자기소개입니다.',
-    errorMessage: '사용 불가능한 자기소개입니다.',
+    errorValue: '사용 불가능한 자기소개입니다.',
     placeholder: '특수문자를 제외한 자기소개을 입력해 주세요.',
     autoFocus: false,
   },
@@ -170,9 +160,8 @@ export const Textarea: Story = {
     maxLength,
     isRequired,
     name,
-    isSuccess,
     successMessage,
-    errorMessage,
+    errorValue,
     placeholder,
     autoFocus,
   }: Props) => {
@@ -183,9 +172,9 @@ export const Textarea: Story = {
     const onValidate = () => {
       return [
         {
-          regexp: /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g,
-          name,
-          errorMessage,
+          validateFn: (value: string) =>
+            /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g.test(value),
+          errorMessage: errorValue,
         },
       ];
     };
@@ -194,16 +183,15 @@ export const Textarea: Story = {
       <Field
         label={label}
         value={fieldValue[name]}
+        onChange={onChangeField}
+        onValidate={onValidate}
         maxLength={maxLength}
         isRequired={isRequired}
       >
         <Field.Textarea
           name={name}
-          onChange={onChangeField}
-          onValidate={onValidate}
-          isSuccess={isSuccess}
           successMessage={successMessage}
-          errorMessage={fieldErrorValue[name]}
+          errorValue={fieldErrorValue[name]}
           autoFocus={autoFocus}
           placeholder={placeholder}
         />
@@ -219,9 +207,8 @@ export const InteractionTest: Story = {
     maxLength: 10,
     isRequired: true,
     name: 'nickname',
-    isSuccess: true,
     successMessage: '사용 가능한 닉네임입니다.',
-    errorMessage: '사용 불가능한 닉네임입니다.',
+    errorValue: '사용 불가능한 닉네임입니다.',
     placeholder: '특수문자를 제외한 닉네임을 입력해 주세요.',
     autoFocus: false,
   },
@@ -230,9 +217,8 @@ export const InteractionTest: Story = {
     maxLength,
     isRequired,
     name,
-    isSuccess,
     successMessage,
-    errorMessage,
+    errorValue,
     placeholder,
     autoFocus,
   }: Props) => {
@@ -244,9 +230,9 @@ export const InteractionTest: Story = {
     const onValidate = () => {
       return [
         {
-          regexp: /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g,
-          name,
-          errorMessage,
+          validateFn: (value: string) =>
+            /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g.test(value),
+          errorMessage: errorValue,
         },
       ];
     };
@@ -256,17 +242,16 @@ export const InteractionTest: Story = {
         <Field
           label={label}
           value={fieldValue[name]}
+          onChange={onChangeField}
+          onValidate={onValidate}
           maxLength={maxLength}
           isRequired={isRequired}
           data-testid="input-field"
         >
           <Field.Input
             name={name}
-            onChange={onChangeField}
-            onValidate={onValidate}
-            isSuccess={isSuccess}
             successMessage={successMessage}
-            errorMessage={fieldErrorValue[name]}
+            errorValue={fieldErrorValue[name]}
             autoFocus={autoFocus}
             placeholder={placeholder}
             data-testid="input"
@@ -276,16 +261,15 @@ export const InteractionTest: Story = {
         <Field
           label="자기소개"
           value={fieldValue.intro}
+          onChange={onChangeField}
           maxLength={150}
           isRequired={isRequired}
           data-testid="textarea-field"
         >
           <Field.Textarea
             name="intro"
-            onChange={onChangeField}
-            isSuccess
             successMessage="사용 가능한 자기소개입니다."
-            errorMessage={fieldErrorValue.intro}
+            errorValue={fieldErrorValue.intro}
             placeholder="자기소개를 입력해 주세요."
             data-testid="textarea"
           />
diff --git a/src/types/useField.ts b/src/types/useField.ts
index 44965ec..5177ad4 100644
--- a/src/types/useField.ts
+++ b/src/types/useField.ts
@@ -1,11 +1,11 @@
 export interface Config {
   isRequired?: boolean;
   maxLength?: number;
+  name?: string;
   onValidate?: () => Validate[];
 }
 
 export interface Validate {
-  regexp: RegExp;
-  name: string;
+  validateFn: (value: string) => boolean;
   errorMessage: string;
 }

From 66dacdd71d9832fcc8a8092a0b51955bdc11780b Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Fri, 12 Jan 2024 23:48:14 +0900
Subject: [PATCH 03/14] =?UTF-8?q?fix:=20Tag=20Storybook=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A0=80=20=EC=9D=B8=ED=92=8B=20=EC=B6=94=EA=B0=80=20=EC=95=88?=
 =?UTF-8?q?=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/Tag.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Tag.stories.tsx b/src/stories/Tag.stories.tsx
index e7088c2..5a3171a 100644
--- a/src/stories/Tag.stories.tsx
+++ b/src/stories/Tag.stories.tsx
@@ -63,7 +63,7 @@ export const InteractionTest: Story = {
       timerId.current = setTimeout(() => {
         setTags((prev) => [...prev, children]);
       }, 500);
-    }, [name]);
+    }, [children]);
 
     return (
       <div>

From 03bc42bc34e355e8782c59174b99e413fc8af552 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 03:06:16 +0900
Subject: [PATCH 04/14] =?UTF-8?q?refactor:=20useCheckbox=20=EB=B0=8F=20Che?=
 =?UTF-8?q?ckboxContainer=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20=EB=B0=8F=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CheckboxContainer/CheckboxContainer.tsx   | 92 ++++++++++++-------
 src/hooks/useCheckbox.ts                      |  8 +-
 src/stories/CheckboxContainer.stories.tsx     | 71 +++++++-------
 3 files changed, 102 insertions(+), 69 deletions(-)

diff --git a/src/components/CheckboxContainer/CheckboxContainer.tsx b/src/components/CheckboxContainer/CheckboxContainer.tsx
index cbbbbde..0c808d5 100644
--- a/src/components/CheckboxContainer/CheckboxContainer.tsx
+++ b/src/components/CheckboxContainer/CheckboxContainer.tsx
@@ -1,56 +1,80 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, Fragment } from 'react';
 
+import Flex from '../Flex/Flex';
+import Text from '../Text/Text';
+
 interface CheckboxOptions {
   id: number;
   name: string;
   checked: boolean;
 }
 
-interface Props {
-  nameKey: string;
+interface Config<T> {
+  checkboxKey: T;
+  maxCount?: number;
+}
+
+interface Props<T> {
+  label: string;
+  checkboxKey: T;
   options: CheckboxOptions[];
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (
+    e: ChangeEvent<HTMLInputElement>,
+    checkboxKey: T,
+    config?: Config<T>,
+  ) => void;
+  maxCount?: number;
+  required?: boolean;
 }
 
-const CheckboxContainer = ({
-  nameKey,
+const CheckboxContainer = <T extends string>({
+  label,
+  checkboxKey,
   options,
   onChange,
+  maxCount,
+  required,
   ...attributes
-}: Props) => {
+}: Props<T>) => {
   return (
-    <Wrapper {...attributes}>
-      {options.map((option) => (
-        <Fragment key={option.id}>
-          <CheckboxInput
-            id={`${option.id}-${option.name}`}
-            name={nameKey}
-            value={option.name}
-            type="checkbox"
-            checked={option.checked}
-            onChange={onChange}
-          />
-          <CheckboxLabel
-            htmlFor={`${option.id}-${option.name}`}
-            checked={option.checked}
-          >
-            {option.name}
-          </CheckboxLabel>
-        </Fragment>
-      ))}
-    </Wrapper>
+    <div {...attributes}>
+      <Flex alignItems="center" paddingBottom={12}>
+        <Text font="suit15m" color="b9" required={required}>
+          {label}
+        </Text>
+      </Flex>
+      <Flex wrap="wrap" gap={8}>
+        {options.map((option) => (
+          <Fragment key={option.id}>
+            <CheckboxInput
+              id={`${option.id}-${option.name}`}
+              name={checkboxKey}
+              value={option.name}
+              type="checkbox"
+              checked={option.checked}
+              onChange={(e) =>
+                onChange(e, checkboxKey, {
+                  checkboxKey,
+                  maxCount,
+                })
+              }
+            />
+            <CheckboxLabel
+              htmlFor={`${option.id}-${option.name}`}
+              checked={option.checked}
+            >
+              {option.name}
+            </CheckboxLabel>
+          </Fragment>
+        ))}
+      </Flex>
+    </div>
   );
 };
 
 export default CheckboxContainer;
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-`;
-
 const CheckboxInput = styled.input`
   display: none;
 `;
@@ -67,7 +91,7 @@ const CheckboxLabel = styled.label<{ checked: boolean }>`
   background-color: ${({ checked, theme }) =>
     checked ? theme.color.c1 : theme.color.w1};
   color: ${({ checked, theme }) => (checked ? theme.color.w1 : theme.color.b4)};
-  font-size: 14px;
-  font-weight: 500;
+  font-size: ${({ theme }) => theme.font.suit15m.fontSize}px;
+  font-weight: ${({ theme }) => theme.font.suit15m.fontWeight};
   cursor: pointer;
 `;
diff --git a/src/hooks/useCheckbox.ts b/src/hooks/useCheckbox.ts
index b6536d3..245f915 100644
--- a/src/hooks/useCheckbox.ts
+++ b/src/hooks/useCheckbox.ts
@@ -6,9 +6,9 @@ interface CheckboxItem {
   checked: boolean;
 }
 
-interface Limit<T> {
+interface Config<T> {
   checkboxKey: keyof T;
-  maxValue: number;
+  maxCount?: number;
 }
 
 const useCheckbox = <T extends Record<keyof T, CheckboxItem[]>>(
@@ -20,7 +20,7 @@ const useCheckbox = <T extends Record<keyof T, CheckboxItem[]>>(
     (
       e: ChangeEvent<HTMLInputElement>,
       checkboxKey: keyof T,
-      limit?: Limit<T>,
+      config?: Config<T>,
     ) => {
       const { value, checked } = e.target;
 
@@ -29,7 +29,7 @@ const useCheckbox = <T extends Record<keyof T, CheckboxItem[]>>(
           (checkbox) => checkbox.checked,
         ).length;
 
-        if (limit && checked && currentCheckedCount === limit.maxValue) {
+        if (config && checked && currentCheckedCount === config.maxCount) {
           return prev;
         }
 
diff --git a/src/stories/CheckboxContainer.stories.tsx b/src/stories/CheckboxContainer.stories.tsx
index 3baf0d8..1510ef9 100644
--- a/src/stories/CheckboxContainer.stories.tsx
+++ b/src/stories/CheckboxContainer.stories.tsx
@@ -10,10 +10,14 @@ const meta = {
   component: CheckboxContainer,
   tags: ['autodocs'],
   argTypes: {
-    nameKey: {
+    label: {
       control: 'text',
+      description: 'CheckboxContainer 컴포넌트의 label을 설정합니다.',
+    },
+    checkboxKey: {
+      control: false,
       description:
-        'CheckboxContainer에 적용되는 name을 설정합니다. useCheckbox훅을 통해 전달한 초기화 객체의 프로퍼티를 전달하면 됩니다. 제어 컴포넌트 방식이라 잘못된 값을 전달해도 정상 동작하나, 안정성을 위하여 만들어 놓았습니다.',
+        'CheckboxContainer 컴포넌트에 적용되는 name을 설정합니다. useCheckbox훅을 통해 전달한 초기화 객체의 프로퍼티를 전달해야 정상 동작합니다.',
     },
     options: {
       control: false,
@@ -24,6 +28,14 @@ const meta = {
       description:
         'Checkbox를 클릭하면 체크 상태로 변경해줍니다. 최대로 체크할 수 있는 최댓값을 설정할 수 있습니다.',
     },
+    maxCount: {
+      control: 'number',
+      description: '체크박스를 선택할 수 있는 최대 개수를 설정합니다.',
+    },
+    required: {
+      control: 'boolean',
+      description: 'CheckboxContainer의 필수값 여부를 지정합니다.',
+    },
   },
 } as Meta<typeof CheckboxContainer>;
 
@@ -32,24 +44,30 @@ type Story = StoryObj<typeof CheckboxContainer>;
 
 export const Default: Story = {
   args: {
-    nameKey: 'name',
+    label: '옵션',
+    checkboxKey: 'key',
     options: [
       { id: 1, name: '1번 체크박스', checked: false },
       { id: 2, name: '2번 체크박스', checked: false },
       { id: 3, name: '3번 체크박스', checked: false },
     ],
+    maxCount: 3,
+    required: false,
   },
-  render: ({ nameKey, options }) => {
+  render: ({ label, checkboxKey, options, maxCount, required }) => {
     const { checkboxValue, onChangeCheckbox } = useCheckbox({
-      [nameKey]: options,
+      [checkboxKey]: options,
     });
 
     return (
       <>
         <CheckboxContainer
-          nameKey={nameKey}
-          options={checkboxValue[nameKey]}
-          onChange={(e) => onChangeCheckbox(e, nameKey)}
+          label={label}
+          checkboxKey={checkboxKey}
+          options={checkboxValue[checkboxKey]}
+          onChange={(e) => onChangeCheckbox(e, checkboxKey)}
+          maxCount={maxCount}
+          required={required}
         />
       </>
     );
@@ -58,7 +76,8 @@ export const Default: Story = {
 
 export const InteractionTest: Story = {
   args: {
-    nameKey: 'purpose',
+    label: '가입 목적 (최대 3개)',
+    checkboxKey: 'purpose',
     options: [
       { id: 1, name: '사이드프로젝트', checked: false },
       { id: 2, name: '창업', checked: false },
@@ -66,34 +85,24 @@ export const InteractionTest: Story = {
       { id: 4, name: '공모전', checked: false },
       { id: 5, name: '스터디', checked: false },
     ],
+    maxCount: 3,
+    required: true,
   },
-  render: ({ nameKey, options }) => {
+  render: ({ label, checkboxKey, options, maxCount, required }) => {
     const { checkboxValue, onChangeCheckbox } = useCheckbox({
-      [nameKey]: options,
+      [checkboxKey]: options,
     });
 
     return (
       <>
-        <div
-          style={{
-            fontWeight: 500,
-            fontSize: '15px',
-            color: 'rgba(0, 0, 0, 0.40)',
-            marginBottom: '12px',
-          }}
-        >
-          가입 목적 (최대 3개)
-        </div>
         <CheckboxContainer
           data-testid="checkbox-container"
-          nameKey={nameKey}
-          options={checkboxValue[nameKey]}
-          onChange={(e) =>
-            onChangeCheckbox(e, nameKey, {
-              checkboxKey: nameKey,
-              maxValue: 3,
-            })
-          }
+          label={label}
+          checkboxKey={checkboxKey}
+          options={checkboxValue[checkboxKey]}
+          onChange={onChangeCheckbox}
+          maxCount={maxCount}
+          required={required}
         />
       </>
     );
@@ -102,10 +111,10 @@ export const InteractionTest: Story = {
     const canvas = within(canvasElement);
 
     const checkboxContainer = await canvas.findByTestId('checkbox-container');
-    const checkboxes = [...checkboxContainer.children].filter(
+    const checkboxes = [...checkboxContainer.children[1].children].filter(
       (_, idx) => idx % 2 === 1,
     );
-    const checkboxChecks = [...checkboxContainer.children].filter(
+    const checkboxChecks = [...checkboxContainer.children[1].children].filter(
       (_, idx) => idx % 2 !== 1,
     ) as HTMLInputElement[];
 

From 81d0eb523ae0a05afb55072f224acd4bc5adcd3e Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 03:38:32 +0900
Subject: [PATCH 05/14] =?UTF-8?q?design:=20Field=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20?=
 =?UTF-8?q?=EC=9E=AC=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/Field.tsx | 70 ++++++++++------------------------
 1 file changed, 21 insertions(+), 49 deletions(-)

diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
index 0db1153..a2e63c9 100644
--- a/src/components/Field/Field.tsx
+++ b/src/components/Field/Field.tsx
@@ -1,12 +1,12 @@
-import styled from '@emotion/styled';
 import { ReactNode, createContext } from 'react';
 
 import FieldInput from './FieldInput';
 import FieldTextarea from './FieldTextarea';
-import { ReactComponent as SVGTextRequired } from '../../assets/svg/text_required.svg';
 import { Config, Validate } from '../../types/useField';
+import Flex from '../Flex/Flex';
+import Text from '../Text/Text';
 
-interface InputProps {
+interface Props {
   children: ReactNode;
   label: string;
   value: string;
@@ -47,7 +47,7 @@ const Field = ({
   isRequired = false,
   children,
   ...attributes
-}: InputProps) => {
+}: Props) => {
   return (
     <FieldContext.Provider
       value={{
@@ -58,22 +58,26 @@ const Field = ({
         onValidate,
       }}
     >
-      <LabelWrapper {...attributes}>
-        <Label>
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        paddingBottom={12}
+        {...attributes}
+      >
+        <Text font="suit15m" color="b9" required={isRequired}>
           {label}
-          {isRequired && (
-            <SVGRequiredWrapper>
-              <SVGTextRequired />
-            </SVGRequiredWrapper>
-          )}
-        </Label>
+        </Text>
         {maxLength && (
-          <div>
-            <LabelLength>{value.length}</LabelLength>
-            <LabelLengthLimit>/{maxLength}</LabelLengthLimit>
-          </div>
+          <Flex>
+            <Text font="suit13m" color="c1">
+              {value.length}
+            </Text>
+            <Text font="suit13m" color="b9">
+              /{maxLength}
+            </Text>
+          </Flex>
         )}
-      </LabelWrapper>
+      </Flex>
       {children}
     </FieldContext.Provider>
   );
@@ -83,35 +87,3 @@ Field.Input = FieldInput;
 Field.Textarea = FieldTextarea;
 
 export default Field;
-
-const LabelWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 13px;
-  font-weight: 500;
-  padding-bottom: 12px;
-`;
-
-const Label = styled.label`
-  font-size: 15px;
-  font-weight: 500;
-  color: ${({ theme }) => theme.color.b9};
-  padding-right: 10px;
-  position: relative;
-`;
-
-const SVGRequiredWrapper = styled.div`
-  position: absolute;
-  display: flex;
-  top: 0;
-  right: 0;
-`;
-
-const LabelLength = styled.span`
-  color: ${({ theme }) => theme.color.c1};
-`;
-
-const LabelLengthLimit = styled.span`
-  color: ${({ theme }) => theme.color.b9};
-`;

From fbd9219ea8ebd4ad948dce737d390c4b8f895518 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 04:23:55 +0900
Subject: [PATCH 06/14] =?UTF-8?q?refactor:=20RadioContainer=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RadioContainer/RadioContainer.tsx         | 84 ++++++++++---------
 src/stories/RadioContainer.stories.tsx        | 46 ++++++----
 2 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/src/components/RadioContainer/RadioContainer.tsx b/src/components/RadioContainer/RadioContainer.tsx
index baac234..d5dc35f 100644
--- a/src/components/RadioContainer/RadioContainer.tsx
+++ b/src/components/RadioContainer/RadioContainer.tsx
@@ -1,6 +1,9 @@
 import styled from '@emotion/styled';
 import { ChangeEvent } from 'react';
 
+import Flex from '../Flex/Flex';
+import Text from '../Text/Text';
+
 type GapType = 'small' | 'large';
 
 interface RadioOptions {
@@ -8,59 +11,62 @@ interface RadioOptions {
   name: string;
   checked: boolean;
 }
-interface Props {
-  nameKey: string;
+interface Props<T> {
+  label: string;
+  radioKey: T;
   options: RadioOptions[];
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>, radioKey: T) => void;
+  required?: boolean;
   gap?: GapType;
 }
 
-const RadioContainer = ({
-  nameKey,
+const RadioContainer = <T extends string>({
+  label,
+  radioKey,
   options,
   onChange,
+  required,
   gap = 'small',
   ...attributes
-}: Props) => {
+}: Props<T>) => {
   return (
-    <Wrapper {...attributes}>
-      {options.map((option) => (
-        <RadioWrapper key={option.id}>
-          <RadioInput
-            type="radio"
-            id={`${option.id}-${option.name}`}
-            name={nameKey}
-            value={option.name}
-            checked={option.checked}
-            onChange={onChange}
-          />
-          {option.checked ? (
-            <CheckedLabel htmlFor={`${option.id}-${option.name}`} gap={gap}>
-              {option.name}
-            </CheckedLabel>
-          ) : (
-            <UnCheckedLabel htmlFor={`${option.id}-${option.name}`} gap={gap}>
-              {option.name}
-            </UnCheckedLabel>
-          )}
-        </RadioWrapper>
-      ))}
-    </Wrapper>
+    <div {...attributes}>
+      <Flex alignItems="center" paddingBottom={12}>
+        <Text font="suit15m" color="b9" required={required}>
+          {label}
+        </Text>
+      </Flex>
+      <Flex wrap="wrap">
+        {options.map((option) => (
+          <Flex alignItems="center" key={option.id}>
+            <RadioInput
+              type="radio"
+              id={`${option.id}-${option.name}`}
+              name={radioKey}
+              value={option.name}
+              checked={option.checked}
+              onChange={(e) => {
+                onChange(e, radioKey);
+              }}
+            />
+            {option.checked ? (
+              <CheckedLabel htmlFor={`${option.id}-${option.name}`} gap={gap}>
+                {option.name}
+              </CheckedLabel>
+            ) : (
+              <UnCheckedLabel htmlFor={`${option.id}-${option.name}`} gap={gap}>
+                {option.name}
+              </UnCheckedLabel>
+            )}
+          </Flex>
+        ))}
+      </Flex>
+    </div>
   );
 };
 
 export default RadioContainer;
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-const RadioWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
 const RadioInput = styled.input`
   display: none;
 `;
diff --git a/src/stories/RadioContainer.stories.tsx b/src/stories/RadioContainer.stories.tsx
index eae3be1..9ceb4ff 100644
--- a/src/stories/RadioContainer.stories.tsx
+++ b/src/stories/RadioContainer.stories.tsx
@@ -10,10 +10,14 @@ const meta = {
   component: RadioContainer,
   tags: ['autodocs'],
   argTypes: {
-    nameKey: {
+    label: {
       control: 'text',
+      description: 'RadioContainer 컴포넌트의 label을 설정합니다.',
+    },
+    radioKey: {
+      control: false,
       description:
-        'Radio Input에 적용되는 name을 설정합니다. useRadio를 통해 전달한 초기화 객체의 프로퍼티를 전달하면 됩니다. 제어 컴포넌트 방식이라 잘못된 값을 전달해도 정상 동작하나, 안정성을 위하여 만들어 놓았습니다.',
+        'Radio Input에 적용되는 name을 설정합니다. useRadio를 통해 전달한 초기화 객체의 프로퍼티를 전달하면 됩니다.',
     },
     options: {
       control: false,
@@ -27,6 +31,10 @@ const meta = {
       control: 'inline-radio',
       description: 'Radio간 간격을 설정합니다. 기본값은 small 입니다.',
     },
+    required: {
+      control: 'boolean',
+      description: 'RadioContainer 컴포넌트의 필수값 여부를 지정합니다.',
+    },
   },
 } as Meta<typeof RadioContainer>;
 
@@ -35,26 +43,30 @@ type Story = StoryObj<typeof RadioContainer>;
 
 export const Default: Story = {
   args: {
-    nameKey: 'name',
+    radioKey: 'name',
     options: [
       { id: 1, name: '1번 라디오', checked: false },
       { id: 2, name: '2번 라디오', checked: false },
       { id: 3, name: '3번 라디오', checked: false },
     ],
     gap: 'small',
+    label: '옵션',
+    required: false,
   },
-  render: ({ nameKey, options, gap }) => {
+  render: ({ label, radioKey, options, gap, required }) => {
     const { radioValue, onChangeRadio } = useRadio({
-      [nameKey]: options,
+      [radioKey]: options,
     });
 
     return (
       <>
         <RadioContainer
-          nameKey={nameKey}
-          options={radioValue[nameKey]}
-          onChange={(e) => onChangeRadio(e, nameKey)}
+          label={label}
+          radioKey={radioKey}
+          options={radioValue[radioKey]}
+          onChange={(e) => onChangeRadio(e, radioKey)}
           gap={gap}
+          required={required}
         />
       </>
     );
@@ -63,7 +75,7 @@ export const Default: Story = {
 
 export const InteractionTest: Story = {
   args: {
-    nameKey: 'option',
+    radioKey: 'option',
     options: [
       { id: 1, name: '상관없음', checked: true },
       { id: 2, name: '온라인', checked: false },
@@ -71,9 +83,9 @@ export const InteractionTest: Story = {
     ],
     gap: 'small',
   },
-  render: ({ nameKey, options, gap }) => {
+  render: ({ label, radioKey, options, gap, required }) => {
     const { radioValue, onChangeRadio } = useRadio({
-      [nameKey]: options,
+      [radioKey]: options,
     });
 
     return (
@@ -90,10 +102,12 @@ export const InteractionTest: Story = {
         </div>
         <RadioContainer
           data-testid="radio-container"
-          nameKey={nameKey}
-          options={radioValue[nameKey]}
-          onChange={(e) => onChangeRadio(e, nameKey)}
+          label={label}
+          radioKey={radioKey}
+          options={radioValue[radioKey]}
+          onChange={(e) => onChangeRadio(e, radioKey)}
           gap={gap}
+          required={required}
         />
       </>
     );
@@ -102,10 +116,10 @@ export const InteractionTest: Story = {
     const canvas = within(canvasElement);
 
     const radioContainer = await canvas.findByTestId('radio-container');
-    const radioInputs = [...radioContainer.children].map(
+    const radioInputs = [...radioContainer.children[1].children].map(
       (inputWrapper) => inputWrapper.children[0],
     );
-    const radioLabels = [...radioContainer.children].map(
+    const radioLabels = [...radioContainer.children[1].children].map(
       (inputWrapper) => inputWrapper.children[1],
     );
 

From 4d613bd48ce96971ccabc4d87bdddfc188cb390a Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 04:24:15 +0900
Subject: [PATCH 07/14] =?UTF-8?q?storybook:=20CheckboxContainer=20?=
 =?UTF-8?q?=EC=9E=98=EB=AA=BB=EB=90=9C=20=EC=84=A4=EB=AA=85=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/CheckboxContainer.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/CheckboxContainer.stories.tsx b/src/stories/CheckboxContainer.stories.tsx
index 1510ef9..7b0fa24 100644
--- a/src/stories/CheckboxContainer.stories.tsx
+++ b/src/stories/CheckboxContainer.stories.tsx
@@ -34,7 +34,7 @@ const meta = {
     },
     required: {
       control: 'boolean',
-      description: 'CheckboxContainer의 필수값 여부를 지정합니다.',
+      description: 'CheckboxContainer 컴포넌트의 필수값 여부를 지정합니다.',
     },
   },
 } as Meta<typeof CheckboxContainer>;

From 55fd1990672ecf22832b247ff1c4cb06c2a5060a Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 04:26:32 +0900
Subject: [PATCH 08/14] =?UTF-8?q?refactor:=20Field=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=86=8D=EC=84=B1=20isRequired=20->=20req?=
 =?UTF-8?q?uired=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/Field.tsx         | 12 ++++++------
 src/components/Field/FieldInput.tsx    |  4 ++--
 src/components/Field/FieldTextarea.tsx |  4 ++--
 src/hooks/useField.ts                  |  2 +-
 src/types/useField.ts                  |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
index a2e63c9..4b26184 100644
--- a/src/components/Field/Field.tsx
+++ b/src/components/Field/Field.tsx
@@ -16,11 +16,11 @@ interface Props {
   ) => void;
   onValidate?: () => Validate[];
   maxLength?: number;
-  isRequired?: boolean;
+  required?: boolean;
 }
 
 interface FieldContextProps {
-  isRequired: boolean;
+  required: boolean;
   inputValue: string;
   maxLength: number | undefined;
   onChange: (
@@ -31,7 +31,7 @@ interface FieldContextProps {
 }
 
 export const FieldContext = createContext<FieldContextProps>({
-  isRequired: false,
+  required: false,
   inputValue: '',
   maxLength: undefined,
   onChange: () => {},
@@ -44,14 +44,14 @@ const Field = ({
   onChange,
   onValidate,
   maxLength,
-  isRequired = false,
+  required = false,
   children,
   ...attributes
 }: Props) => {
   return (
     <FieldContext.Provider
       value={{
-        isRequired,
+        required,
         inputValue: value,
         maxLength,
         onChange,
@@ -64,7 +64,7 @@ const Field = ({
         paddingBottom={12}
         {...attributes}
       >
-        <Text font="suit15m" color="b9" required={isRequired}>
+        <Text font="suit15m" color="b9" required={required}>
           {label}
         </Text>
         {maxLength && (
diff --git a/src/components/Field/FieldInput.tsx b/src/components/Field/FieldInput.tsx
index 7d22767..5f0dab7 100644
--- a/src/components/Field/FieldInput.tsx
+++ b/src/components/Field/FieldInput.tsx
@@ -20,7 +20,7 @@ const FieldInput = ({
   ...attributes
 }: Props) => {
   const {
-    isRequired,
+    required,
     inputValue: value,
     maxLength,
     onChange,
@@ -34,7 +34,7 @@ const FieldInput = ({
         value={value}
         onChange={(e) => {
           onChange(e, {
-            isRequired,
+            required,
             maxLength,
             name,
             onValidate,
diff --git a/src/components/Field/FieldTextarea.tsx b/src/components/Field/FieldTextarea.tsx
index dab2db1..22587c9 100644
--- a/src/components/Field/FieldTextarea.tsx
+++ b/src/components/Field/FieldTextarea.tsx
@@ -20,7 +20,7 @@ const FieldTextarea = ({
   ...attributes
 }: Props) => {
   const {
-    isRequired,
+    required,
     inputValue: value,
     maxLength,
     onChange,
@@ -34,7 +34,7 @@ const FieldTextarea = ({
         value={value}
         onChange={(e) => {
           onChange(e, {
-            isRequired,
+            required,
             maxLength,
             name,
             onValidate,
diff --git a/src/hooks/useField.ts b/src/hooks/useField.ts
index f41b142..4b0b27c 100644
--- a/src/hooks/useField.ts
+++ b/src/hooks/useField.ts
@@ -38,7 +38,7 @@ const useField = <T extends Record<keyof T, string>>(initialValue: T) => {
         [name]: value,
       }));
 
-      if (config?.isRequired && value.length === 0) {
+      if (config?.required && value.length === 0) {
         setFieldErrorValue((prev) => ({
           ...prev,
           [name]: '필수 입력 값입니다.',
diff --git a/src/types/useField.ts b/src/types/useField.ts
index 5177ad4..42a3ca8 100644
--- a/src/types/useField.ts
+++ b/src/types/useField.ts
@@ -1,5 +1,5 @@
 export interface Config {
-  isRequired?: boolean;
+  required?: boolean;
   maxLength?: number;
   name?: string;
   onValidate?: () => Validate[];

From c83240e47a5b56cd85a41dc8ee87991bef963f46 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 04:39:45 +0900
Subject: [PATCH 09/14] =?UTF-8?q?storybook:=20RadioContainer=20=EC=9E=98?=
 =?UTF-8?q?=EB=AA=BB=EB=90=98=EC=96=B4=EC=9E=88=EB=8A=94=20=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/RadioContainer.stories.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/stories/RadioContainer.stories.tsx b/src/stories/RadioContainer.stories.tsx
index 9ceb4ff..05582b7 100644
--- a/src/stories/RadioContainer.stories.tsx
+++ b/src/stories/RadioContainer.stories.tsx
@@ -82,6 +82,8 @@ export const InteractionTest: Story = {
       { id: 3, name: '오프라인', checked: false },
     ],
     gap: 'small',
+    label: '협업 방식',
+    required: false,
   },
   render: ({ label, radioKey, options, gap, required }) => {
     const { radioValue, onChangeRadio } = useRadio({
@@ -90,16 +92,6 @@ export const InteractionTest: Story = {
 
     return (
       <>
-        <div
-          style={{
-            fontWeight: 500,
-            fontSize: '15px',
-            color: 'rgba(0, 0, 0, 0.40)',
-            marginBottom: '12px',
-          }}
-        >
-          선택영역
-        </div>
         <RadioContainer
           data-testid="radio-container"
           label={label}

From acaf5d58b08f1d45935b5fb2f3c653697c8764c2 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 04:40:30 +0900
Subject: [PATCH 10/14] =?UTF-8?q?storybook:=20CheckboxContainer=20?=
 =?UTF-8?q?=EC=B5=9C=EB=8C=80=20=EC=84=A0=ED=83=9D=20=EA=B0=9C=EC=88=98=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EB=B3=B4=EA=B0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/CheckboxContainer.stories.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/stories/CheckboxContainer.stories.tsx b/src/stories/CheckboxContainer.stories.tsx
index 7b0fa24..708b8a6 100644
--- a/src/stories/CheckboxContainer.stories.tsx
+++ b/src/stories/CheckboxContainer.stories.tsx
@@ -135,6 +135,9 @@ export const InteractionTest: Story = {
     await userEvent.click(checkboxes[3], {
       delay: 300,
     });
+    await userEvent.click(checkboxes[2], {
+      delay: 300,
+    });
     expect(checkboxChecks.filter((checkbox) => checkbox.checked).length).toBe(
       3,
     );

From 55d83d05da63bf3fe8da9a6a958dc68fea9f4674 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 04:52:49 +0900
Subject: [PATCH 11/14] =?UTF-8?q?chore:=200.4.0=20=EB=B0=B0=ED=8F=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

form 관련된 전반적인 훅 및 컴포넌트 리팩토링
---
 package.json  |  2 +-
 src/App.tsx   | 66 ++++++++++++++++++++++++---------------------------
 src/Child.tsx | 29 +++++++++++++---------
 3 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 40fafe1..1258017 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "concept-be-design-system",
   "description": "컨셉비 디자인 시스템",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
diff --git a/src/App.tsx b/src/App.tsx
index ab3530b..5b3696c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 
+import { Spacer } from '.';
 import Child from './Child';
 import CheckboxContainer from './components/CheckboxContainer/CheckboxContainer';
 import Dropdown from './components/Dropdown/Dropdown';
@@ -45,6 +46,14 @@ const filterSubOptions2 = [
   { id: 5, name: '스터디', checked: false },
 ];
 
+const filterSubOptions3 = [
+  { id: 111, name: '사이드프로젝트', checked: false },
+  { id: 222, name: '창업', checked: false },
+  { id: 333, name: '크라우드펀딩', checked: false },
+  { id: 444, name: '공모전', checked: false },
+  { id: 555, name: '스터디', checked: false },
+];
+
 const filterOptions = [
   { name: 'IT', id: 1, checked: false },
   { name: '게임', id: 2, checked: false },
@@ -66,10 +75,12 @@ const filterOptions2 = [
 const App = () => {
   const { checkboxValue, onChangeCheckbox } = useCheckbox<{
     goal: FilterOption[];
-    goal2: FilterOption[];
+    name: FilterOption[];
+    oneMore: FilterOption[];
   }>({
     goal: filterSubOptions,
-    goal2: filterSubOptions2,
+    name: filterSubOptions2,
+    oneMore: filterSubOptions3,
   });
   const { radioValue, onChangeRadio } = useRadio<{
     name: FilterOption[];
@@ -83,7 +94,7 @@ const App = () => {
       see: '',
       do: '',
     });
-  const [tags, setTags] = useState<string[]>(['a', 'b', 'c', 'd']);
+  const [tags, setTags] = useState<string[]>(['a', 'b', 'c']);
 
   useEffect(() => {
     if (dropdownValue.do !== '') {
@@ -100,6 +111,7 @@ const App = () => {
           {tag}
         </Tag>
       ))}
+      <Spacer size={50} />
       <Child />
       <Dropdown
         selectedValue={dropdownValue.see}
@@ -137,48 +149,32 @@ const App = () => {
         ))}
       </Dropdown>
 
-      <Dropdown
-        selectedValue={dropdownValue.do}
-        initialValue="시/도/군"
-        disabled={false}
-      >
-        {regionOptions.map(({ id, name }) => (
-          <Dropdown.Item
-            key={id}
-            value={name}
-            onClick={(value) => {
-              onClickDropdown(value, 'do');
-            }}
-          >
-            {name}
-          </Dropdown.Item>
-        ))}
-      </Dropdown>
-
       <CheckboxContainer
-        nameKey="goal"
+        label="가입 목적"
+        checkboxKey="goal"
         options={checkboxValue.goal}
-        onChange={(e) => onChangeCheckbox(e, 'goal')}
+        onChange={onChangeCheckbox}
       />
       <CheckboxContainer
-        nameKey="goal2"
-        options={checkboxValue.goal2}
-        onChange={(e) =>
-          onChangeCheckbox(e, 'goal2', {
-            checkboxKey: 'goal2',
-            maxValue: 3,
-          })
-        }
+        label="이름 선택"
+        checkboxKey="name"
+        options={checkboxValue.name}
+        onChange={onChangeCheckbox}
+        maxCount={3}
+        required
       />
       <RadioContainer
-        nameKey="name"
+        label="name"
+        radioKey="name"
         options={radioValue.name}
-        onChange={(e) => onChangeRadio(e, 'name')}
+        onChange={onChangeRadio}
+        required
       />
       <RadioContainer
-        nameKey="age"
+        label="age"
+        radioKey="age"
         options={radioValue.age}
-        onChange={(e) => onChangeRadio(e, 'age')}
+        onChange={onChangeRadio}
       />
     </>
   );
diff --git a/src/Child.tsx b/src/Child.tsx
index 01be745..9872251 100644
--- a/src/Child.tsx
+++ b/src/Child.tsx
@@ -13,11 +13,15 @@ const Child = () => {
       intro: '',
     });
 
-  const validateInput = () => {
+  const validateNickname = () => {
     return [
       {
-        regexp: /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g,
-        name: 'intro',
+        validateFn: (value: string) =>
+          /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g.test(value),
+        errorMessage: '사용 불가한 소개입니다.',
+      },
+      {
+        validateFn: () => fieldErrorValue.intro.length > 0,
         errorMessage: '사용 불가한 소개입니다.',
       },
     ];
@@ -28,26 +32,29 @@ const Child = () => {
       <Field
         label="닉네임"
         value={fieldValue.nickName}
+        onChange={onChangeField}
+        onValidate={validateNickname}
         maxLength={10}
-        isRequired
+        required
       >
         <Field.Input
           name="nickName"
-          onChange={onChangeField}
-          onValidate={validateInput}
           placeholder="닉네임을 입력해주세요"
-          errorMessage={fieldErrorValue.nickName}
+          errorValue={fieldErrorValue.nickName}
           successMessage="사용 가능한 닉네임입니다."
         />
       </Field>
 
-      <Field label="자기소개" value={fieldValue.intro} maxLength={150}>
+      <Field
+        label="자기소개"
+        value={fieldValue.intro}
+        onChange={onChangeField}
+        maxLength={150}
+      >
         <Field.Textarea
           name="intro"
-          onChange={onChangeField}
-          onValidate={validateInput}
           placeholder="자기소개를 입력해 주세요. (최대 150자)"
-          errorMessage={fieldErrorValue.intro}
+          errorValue={fieldErrorValue.intro}
         />
       </Field>
     </>

From dbb84e1f34836e67e90d4d6450d3527486514e1f Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 04:53:02 +0900
Subject: [PATCH 12/14] =?UTF-8?q?docs:=200.4.0=20=EB=B2=84=EC=A0=84=20?=
 =?UTF-8?q?=EB=A6=AC=EB=93=9C=EB=AF=B8=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 132 ++++++++++++++++++++++++++++++------------------------
 1 file changed, 73 insertions(+), 59 deletions(-)

diff --git a/README.md b/README.md
index 3cf6d64..0475570 100644
--- a/README.md
+++ b/README.md
@@ -62,25 +62,24 @@ function SomeComponent() {
 
 Field 컴포넌트와 useField 훅은 다음과 같이 사용할 수 있습니다.
 
-```jsx
+```ts
 import { Field, useField } from 'concept-be-design-system';
 
 function SomeComponent() {
-  const { fieldValue, fieldErrorValue, onChangeField } =
-    useField<{
-      nickName: string;
-      intro: string;
-    }>({
-      nickName: '',
-      intro: '',
-    });
+  const { fieldValue, fieldErrorValue, onChangeField } = useField<{
+    nickName: string;
+    intro: string;
+  }>({
+    nickName: '',
+    intro: '',
+  });
 
   const validateInput = () => {
     return [
       {
-        regexp: /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g,
-        name: 'nickName',
-        errorMessage: '사용 불가한 닉네임입니다.',
+        validateFn: (value: string) =>
+          /[~!@#$%";'^,&*()_+|</>=>`?:{[\]}]/g.test(value),
+        errorMessage: '사용 불가한 소개입니다.',
       },
     ];
   };
@@ -90,26 +89,29 @@ function SomeComponent() {
       <Field
         label="닉네임"
         value={fieldValue.nickName}
+        onChange={onChangeField}
+        onValidate={validateNickname}
         maxLength={10}
-        isRequired
+        required
       >
         <Field.Input
-          name="nickName"
-          onChange={onChangeField}
-          onValidate={validateInput}
+          name="nickname"
           placeholder="닉네임을 입력해주세요"
-          errorMessage={fieldErrorValue.nickName}
+          errorValue={fieldErrorValue.nickName}
           successMessage="사용 가능한 닉네임입니다."
         />
       </Field>
 
-      <Field label="자기소개" value={fieldValue.intro} maxLength={150}>
+      <Field
+        label="자기소개"
+        value={fieldValue.intro}
+        onChange={onChangeField}
+        maxLength={150}
+      >
         <Field.Textarea
           name="intro"
-          onChange={onChangeField}
-          onValidate={validateInput}
           placeholder="자기소개를 입력해 주세요. (최대 150자)"
-          errorMessage={fieldErrorValue.intro}
+          errorValue={fieldErrorValue.intro}
         />
       </Field>
     </form>
@@ -119,34 +121,39 @@ function SomeComponent() {
 
 CheckboxContainer 컴포넌트와 useCheckbox 훅은 다음과 같이 사용할 수 있습니다.
 
-```jsx
+```ts
 import { CheckboxContainer, useCheckbox } from 'concept-be-design-system';
 
+interface FilterOption {
+  id: number;
+  name: string;
+  checked: boolean;
+}
+
 function SomeComponent() {
   const { checkboxValue, onChangeCheckBox } = useCheckbox<{
-    name: FilterOption[];
+    goal: FilterOption[];
     skill: FilterOption[];
   }>({
-    name: nameOptions,
+    goal: goalOptions,
     skill: skillOptions,
   });
 
   return (
     <form>
       <CheckboxContainer
-        nameKey="name"
-        options={checkboxValue.name}
-        onChange={(e) => onChangeCheckBox(e, 'name')}
+        label="가입 목적"
+        checkboxKey="goal"
+        options={checkboxValue.goal}
+        onChange={onChangeCheckbox}
       />
       <CheckboxContainer
-        nameKey="skill"
+        label="스킬 선택"
+        checkboxKey="skill"
         options={checkboxValue.skill}
-        onChange={(e) =>
-          onChangeCheckBox(e, 'skill', {
-            checkboxKey: 'skill',
-            maxValue: 3,
-          })
-        }
+        onChange={onChangeCheckbox}
+        maxCount={3}
+        required
       />
     </form>
   )
@@ -155,31 +162,38 @@ function SomeComponent() {
 
 RadioContainer 컴포넌트와 useRadio 훅은 다음과 같이 사용할 수 있습니다.
 
-```jsx
+```ts
 import { RadioContainer, useRadio } from 'concept-be-design-system';
 
+interface FilterOption {
+  id: number;
+  name: string;
+  checked: boolean;
+}
+
 function SomeComponent() {
   const { radioValue, onChangeRadio } = useRadio<{
-    name: FilterOption[];
+    collaboration: FilterOption[];
     skill: FilterOption[];
   }>({
-    name: nameOptions,
-    skill: skillOptions,
+    collaboration: collaborationOptions,
+    mainSkill: mainSkillOptions,
   });
 
   return (
     <form>
       <RadioContainer
-        nameKey="name"
-        options={radioValue.name}
-        onChange={(e) => onChangeRadio(e, 'name')}
+        label="협업 방식"
+        radioKey="collaboration"
+        options={radioValue.collaboration}
+        onChange={onChangeRadio}
+        required
       />
       <RadioContainer
-        nameKey="skill"
-        options={radioValue.skill}
-        onChange={(e) =>
-          onChangeRadio(e, 'skill')
-        }
+        label="대표 스킬"
+        radioKey="mainSkill"
+        options={radioValue.mainSkill}
+        onChange={onChangeRadio}
       />
     </form>
   )
@@ -188,30 +202,30 @@ function SomeComponent() {
 
 Dropdown 컴포넌트와 useDropdown 훅은 다음과 같이 사용할 수 있습니다.
 
-```jsx
+```ts
 import { useEffect } from 'react';
 import { Dropdown, useDropdown } from 'concept-be-design-system';
 
 function SomeComponent() {
   const { dropdownValue, onResetDropdown, onClickDropdown } = useDropdown<{
-    see: string;
-    do: string;
+    region: string;
+    detail: string;
   }>({
-    see: '',
-    do: '',
+    region: '',
+    detail: '',
   });
 
   useEffect(() => {
-    if (dropdownValue.do !== '') {
-      onResetDropdown('see');
-      onResetDropdown('do');
+    if (dropdownValue.detail !== '') {
+      onResetDropdown('region');
+      onResetDropdown('detail');
     }
   }, [dropdownValue, onResetDropdown]);
 
   return (
     <form>
       <Dropdown
-        selectedValue={dropdownValue.see}
+        selectedValue={dropdownValue.region}
         initialValue="시/도/광역시"
         disabled={false}
       >
@@ -220,7 +234,7 @@ function SomeComponent() {
             key={id}
             value={name}
             onClick={(value) => {
-              onClickDropdown(value, 'see');
+              onClickDropdown(value, 'region');
             }}
           >
             {name}
@@ -229,7 +243,7 @@ function SomeComponent() {
       </Dropdown>
 
       <Dropdown
-        selectedValue={dropdownValue.do}
+        selectedValue={dropdownValue.detail}
         initialValue="시/도/광역시"
         disabled={false}
       >
@@ -238,7 +252,7 @@ function SomeComponent() {
             key={id}
             value={name}
             onClick={(value) => {
-              onClickDropdown(value, 'do');
+              onClickDropdown(value, 'detail');
             }}
           >
             {name}
@@ -250,7 +264,7 @@ function SomeComponent() {
 }
 ```
 
-## 문서
+## 링크
 
 - [스토리북](https://65a04fca8611ba47d7f8b115-jlefxghrma.chromatic.com/)
 

From 3e2555d68bc119d762d8ca7ee6b83fbd223455b9 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 05:01:54 +0900
Subject: [PATCH 13/14] =?UTF-8?q?storybook:=20test=20=EB=B6=88=ED=86=B5=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0=20(isRequired=20->=20re?=
 =?UTF-8?q?quired)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/Field.stories.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/stories/Field.stories.tsx b/src/stories/Field.stories.tsx
index bfe46d8..191f225 100644
--- a/src/stories/Field.stories.tsx
+++ b/src/stories/Field.stories.tsx
@@ -12,7 +12,7 @@ interface Props {
   label: string;
   value: string;
   maxLength: number;
-  isRequired: boolean;
+  required: boolean;
   name: string;
   successMessage: string;
   errorValue: string;
@@ -42,7 +42,7 @@ const meta = {
       control: 'number',
       description: 'Field 컴포넌트의 입력 최대값을 설정합니다.',
     },
-    isRequired: {
+    required: {
       control: 'boolean',
       description:
         'Field 컴포넌트가 필수 입력값인지에 대한 여부를 설정합니다. 기본값은 false입니다.',
@@ -91,7 +91,7 @@ export const Input: Story = {
     label: '닉네임',
     value: '',
     maxLength: 10,
-    isRequired: true,
+    required: true,
     name: 'nickname',
     successMessage: '사용 가능한 닉네임입니다.',
     errorValue: '사용 불가능한 닉네임입니다.',
@@ -101,7 +101,7 @@ export const Input: Story = {
   render: ({
     label,
     maxLength,
-    isRequired,
+    required,
     name,
     successMessage,
     errorValue,
@@ -129,7 +129,7 @@ export const Input: Story = {
         onChange={onChangeField}
         onValidate={onValidate}
         maxLength={maxLength}
-        isRequired={isRequired}
+        required={required}
       >
         <Field.Input
           name={name}
@@ -148,7 +148,7 @@ export const Textarea: Story = {
     label: '자기소개',
     value: '',
     maxLength: 150,
-    isRequired: true,
+    required: true,
     name: 'intro',
     successMessage: '사용 가능한 자기소개입니다.',
     errorValue: '사용 불가능한 자기소개입니다.',
@@ -158,7 +158,7 @@ export const Textarea: Story = {
   render: ({
     label,
     maxLength,
-    isRequired,
+    required,
     name,
     successMessage,
     errorValue,
@@ -186,7 +186,7 @@ export const Textarea: Story = {
         onChange={onChangeField}
         onValidate={onValidate}
         maxLength={maxLength}
-        isRequired={isRequired}
+        required={required}
       >
         <Field.Textarea
           name={name}
@@ -205,7 +205,7 @@ export const InteractionTest: Story = {
     label: '닉네임',
     value: '',
     maxLength: 10,
-    isRequired: true,
+    required: true,
     name: 'nickname',
     successMessage: '사용 가능한 닉네임입니다.',
     errorValue: '사용 불가능한 닉네임입니다.',
@@ -215,7 +215,7 @@ export const InteractionTest: Story = {
   render: ({
     label,
     maxLength,
-    isRequired,
+    required,
     name,
     successMessage,
     errorValue,
@@ -245,7 +245,7 @@ export const InteractionTest: Story = {
           onChange={onChangeField}
           onValidate={onValidate}
           maxLength={maxLength}
-          isRequired={isRequired}
+          required={required}
           data-testid="input-field"
         >
           <Field.Input
@@ -263,7 +263,7 @@ export const InteractionTest: Story = {
           value={fieldValue.intro}
           onChange={onChangeField}
           maxLength={150}
-          isRequired={isRequired}
+          required={required}
           data-testid="textarea-field"
         >
           <Field.Textarea

From 7f726087a1fc056d6637b6946e2808a98d016f22 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jan 2024 05:11:58 +0900
Subject: [PATCH 14/14] =?UTF-8?q?docs:=200.4.0=20Storybook=20=EB=B0=B0?=
 =?UTF-8?q?=ED=8F=AC=20=EB=A7=81=ED=81=AC=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0475570..82cf096 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ const App = ({ children }) => {
 
 ### 컴포넌트
 
-자세한 내용은 [스토리북](https://65a04fca8611ba47d7f8b115-jlefxghrma.chromatic.com/)에서 확인하세요.
+자세한 내용은 [스토리북](https://65a04fca8611ba47d7f8b115-bdybhmnomg.chromatic.com/)에서 확인하세요.
 
 Button 컴포넌트는 다음과 같이 사용할 수 있습니다.
 
@@ -266,7 +266,7 @@ function SomeComponent() {
 
 ## 링크
 
-- [스토리북](https://65a04fca8611ba47d7f8b115-jlefxghrma.chromatic.com/)
+- [스토리북](https://65a04fca8611ba47d7f8b115-bdybhmnomg.chromatic.com/)
 
 ## 기여