From 0d6b10c9439b18b3ff775fd3d765477269a7a933 Mon Sep 17 00:00:00 2001
From: naporin0624 <naporin0624@gmail.com>
Date: Thu, 11 Jul 2024 04:37:10 +0000
Subject: [PATCH 1/3] chore(react): update snapshot

---
 .../Modal/__snapshots__/index.story.storyshot | 472 +++++++++---------
 1 file changed, 236 insertions(+), 236 deletions(-)

diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
index 445c755b1..ca8d8dcc6 100644
--- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
@@ -123,65 +123,6 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
   margin-left: auto;
 }
 
-.c27 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c27:not(:disabled):not([aria-disabled]):hover,
-.c27[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c27:not(:disabled):not([aria-disabled]):active,
-.c27[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus,
-.c27[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c27[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus-visible,
-.c27[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:disabled,
-.c27[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -377,6 +318,65 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
   opacity: 0.32;
 }
 
+.c27 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 32px;
+  height: 32px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c27:not(:disabled):not([aria-disabled]):hover,
+.c27[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
+}
+
+.c27:not(:disabled):not([aria-disabled]):active,
+.c27[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus,
+.c27[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c27[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus-visible,
+.c27[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c27:disabled,
+.c27[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -995,65 +995,6 @@ exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
   padding: 0;
 }
 
-.c19 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c19:not(:disabled):not([aria-disabled]):hover,
-.c19[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c19:not(:disabled):not([aria-disabled]):active,
-.c19[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c19:not(:disabled):not([aria-disabled]):focus,
-.c19[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c19:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c19[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c19:not(:disabled):not([aria-disabled]):focus-visible,
-.c19[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c19:disabled,
-.c19[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -1249,6 +1190,65 @@ exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
   opacity: 0.32;
 }
 
+.c19 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 32px;
+  height: 32px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c19:not(:disabled):not([aria-disabled]):hover,
+.c19[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
+}
+
+.c19:not(:disabled):not([aria-disabled]):active,
+.c19[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
+
+.c19:not(:disabled):not([aria-disabled]):focus,
+.c19[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c19:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c19[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c19:not(:disabled):not([aria-disabled]):focus-visible,
+.c19[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c19:disabled,
+.c19[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c12 {
   position: relative;
   display: -webkit-box;
@@ -1784,65 +1784,6 @@ exports[`Storybook Tests > react/Modal > Default 1`] = `
   margin-left: auto;
 }
 
-.c27 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c27:not(:disabled):not([aria-disabled]):hover,
-.c27[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c27:not(:disabled):not([aria-disabled]):active,
-.c27[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus,
-.c27[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c27[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus-visible,
-.c27[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:disabled,
-.c27[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -2038,6 +1979,65 @@ exports[`Storybook Tests > react/Modal > Default 1`] = `
   opacity: 0.32;
 }
 
+.c27 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 32px;
+  height: 32px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c27:not(:disabled):not([aria-disabled]):hover,
+.c27[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
+}
+
+.c27:not(:disabled):not([aria-disabled]):active,
+.c27[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus,
+.c27[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c27[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus-visible,
+.c27[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c27:disabled,
+.c27[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2732,65 +2732,6 @@ exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
   margin-left: auto;
 }
 
-.c22 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c22:not(:disabled):not([aria-disabled]):hover,
-.c22[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c22:not(:disabled):not([aria-disabled]):active,
-.c22[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c22:not(:disabled):not([aria-disabled]):focus,
-.c22[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c22:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c22[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c22:not(:disabled):not([aria-disabled]):focus-visible,
-.c22[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c22:disabled,
-.c22[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -2986,6 +2927,65 @@ exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
   opacity: 0.32;
 }
 
+.c22 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 32px;
+  height: 32px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c22:not(:disabled):not([aria-disabled]):hover,
+.c22[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
+}
+
+.c22:not(:disabled):not([aria-disabled]):active,
+.c22[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
+
+.c22:not(:disabled):not([aria-disabled]):focus,
+.c22[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c22:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c22[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c22:not(:disabled):not([aria-disabled]):focus-visible,
+.c22[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c22:disabled,
+.c22[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;

From 086344b914c3f12358442ac5bb4fd47f1b43018f Mon Sep 17 00:00:00 2001
From: naporin0624 <naporin0624@gmail.com>
Date: Thu, 11 Jul 2024 04:48:01 +0000
Subject: [PATCH 2/3] chore: remove build step

---
 .github/workflows/test.yml                    |   1 -
 .../Modal/__snapshots__/index.story.storyshot | 492 +++++++++---------
 2 files changed, 246 insertions(+), 247 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 191cd547f..d0ca60172 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -31,7 +31,6 @@ jobs:
           cache: yarn
 
       - run: yarn install --immutable --inline-builds
-      - run: yarn build
       - run: yarn test
         env:
           CI: 'true'
diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
index ca8d8dcc6..2aae28c0f 100644
--- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
@@ -39,6 +39,65 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
   padding: 0;
 }
 
+.c27 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 32px;
+  height: 32px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c27:not(:disabled):not([aria-disabled]):hover,
+.c27[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
+}
+
+.c27:not(:disabled):not([aria-disabled]):active,
+.c27[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus,
+.c27[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c27[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus-visible,
+.c27[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c27:disabled,
+.c27[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c14 {
   font-size: 14px;
   line-height: 22px;
@@ -318,65 +377,6 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
   opacity: 0.32;
 }
 
-.c27 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c27:not(:disabled):not([aria-disabled]):hover,
-.c27[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c27:not(:disabled):not([aria-disabled]):active,
-.c27[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus,
-.c27[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c27[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus-visible,
-.c27[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:disabled,
-.c27[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -995,6 +995,65 @@ exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
   padding: 0;
 }
 
+.c19 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 32px;
+  height: 32px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c19:not(:disabled):not([aria-disabled]):hover,
+.c19[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
+}
+
+.c19:not(:disabled):not([aria-disabled]):active,
+.c19[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
+
+.c19:not(:disabled):not([aria-disabled]):focus,
+.c19[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c19:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c19[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c19:not(:disabled):not([aria-disabled]):focus-visible,
+.c19[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c19:disabled,
+.c19[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -1190,63 +1249,19 @@ exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
   opacity: 0.32;
 }
 
-.c19 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c19:not(:disabled):not([aria-disabled]):hover,
-.c19[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c19:not(:disabled):not([aria-disabled]):active,
-.c19[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
+.c3 {
+  margin: auto;
+  position: relative;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  width: 440px;
+  background-color: var(--charcoal-surface1);
+  border-radius: 24px;
 }
 
-.c19:not(:disabled):not([aria-disabled]):focus,
-.c19[aria-disabled='false']:focus {
+.c3:focus {
   outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c19:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c19[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c19:not(:disabled):not([aria-disabled]):focus-visible,
-.c19[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c19:disabled,
-.c19[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
 }
 
 .c12 {
@@ -1365,21 +1380,6 @@ exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
   line-height: 20px;
 }
 
-.c3 {
-  margin: auto;
-  position: relative;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: 440px;
-  background-color: var(--charcoal-surface1);
-  border-radius: 24px;
-}
-
-.c3:focus {
-  outline: none;
-}
-
 .c2 {
   z-index: 10;
   overflow: auto;
@@ -1700,6 +1700,65 @@ exports[`Storybook Tests > react/Modal > Default 1`] = `
   padding: 0;
 }
 
+.c27 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 32px;
+  height: 32px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c27:not(:disabled):not([aria-disabled]):hover,
+.c27[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
+}
+
+.c27:not(:disabled):not([aria-disabled]):active,
+.c27[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus,
+.c27[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c27[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus-visible,
+.c27[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c27:disabled,
+.c27[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c14 {
   font-size: 14px;
   line-height: 22px;
@@ -1979,65 +2038,6 @@ exports[`Storybook Tests > react/Modal > Default 1`] = `
   opacity: 0.32;
 }
 
-.c27 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c27:not(:disabled):not([aria-disabled]):hover,
-.c27[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c27:not(:disabled):not([aria-disabled]):active,
-.c27[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus,
-.c27[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c27[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus-visible,
-.c27[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:disabled,
-.c27[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2648,6 +2648,65 @@ exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
   padding: 0;
 }
 
+.c22 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 32px;
+  height: 32px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c22:not(:disabled):not([aria-disabled]):hover,
+.c22[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
+}
+
+.c22:not(:disabled):not([aria-disabled]):active,
+.c22[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
+
+.c22:not(:disabled):not([aria-disabled]):focus,
+.c22[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c22:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c22[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c22:not(:disabled):not([aria-disabled]):focus-visible,
+.c22[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c22:disabled,
+.c22[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c14 {
   font-size: 14px;
   line-height: 22px;
@@ -2927,65 +2986,6 @@ exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
   opacity: 0.32;
 }
 
-.c22 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c22:not(:disabled):not([aria-disabled]):hover,
-.c22[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c22:not(:disabled):not([aria-disabled]):active,
-.c22[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c22:not(:disabled):not([aria-disabled]):focus,
-.c22[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c22:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c22[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c22:not(:disabled):not([aria-disabled]):focus-visible,
-.c22[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c22:disabled,
-.c22[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;

From 9e486436d1fcb6f6df3482d04ff0256874b42499 Mon Sep 17 00:00:00 2001
From: naporin0624 <naporin0624@gmail.com>
Date: Thu, 11 Jul 2024 05:14:59 +0000
Subject: [PATCH 3/3] chore: ignore modal snapshot

---
 .../Modal/__snapshots__/index.story.storyshot | 4145 -----------------
 .../src/components/Modal/index.story.tsx      |    5 +
 .../__snapshots__/index.story.storyshot       |   18 +-
 .../__snapshots__/TextArea.story.storyshot    |   88 +-
 .../__snapshots__/TextField.story.storyshot   |   98 +-
 vite.config.ts                                |   10 +
 6 files changed, 117 insertions(+), 4247 deletions(-)
 delete mode 100644 packages/react/src/components/Modal/__snapshots__/index.story.storyshot

diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
deleted file mode 100644
index 2aae28c0f..000000000
--- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
+++ /dev/null
@@ -1,4145 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c27 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c27:not(:disabled):not([aria-disabled]):hover,
-.c27[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c27:not(:disabled):not([aria-disabled]):active,
-.c27[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus,
-.c27[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c27[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus-visible,
-.c27[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:disabled,
-.c27[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c14 {
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c14::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c14::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c16 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color,0.2s box-shadow;
-  transition: 0.2s color,0.2s box-shadow;
-}
-
-.c16::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c16::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c16:not(:disabled):not([aria-disabled]):hover,
-.c16[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c16:not(:disabled):not([aria-disabled]):active,
-.c16[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c16:not(:disabled):not([aria-disabled]):active,
-.c16[aria-disabled='false']:active,
-.c16:not(:disabled):not([aria-disabled]):focus,
-.c16[aria-disabled='false']:focus,
-.c16:not(:disabled):not([aria-disabled]):focus-visible,
-.c16[aria-disabled='false']:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c12 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c12 > .c15 {
-  margin-left: auto;
-}
-
-.c1 {
-  width: -webkit-min-content;
-  width: -moz-min-content;
-  width: min-content;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c25 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c25:not(:disabled):not([aria-disabled]):focus,
-.c25[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c25:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c25[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c25:not(:disabled):not([aria-disabled]):focus-visible,
-.c25[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c25:not(:disabled):not([aria-disabled]):hover,
-.c25[aria-disabled='false']:hover {
-  color: var(--charcoal-text5-hover);
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c25:not(:disabled):not([aria-disabled]):active,
-.c25[aria-disabled='false']:active {
-  color: var(--charcoal-text5-press);
-  background-color: var(--charcoal-brand-press);
-}
-
-.c25:disabled,
-.c25[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c26 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c26:not(:disabled):not([aria-disabled]):focus,
-.c26[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c26:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c26[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c26:not(:disabled):not([aria-disabled]):focus-visible,
-.c26[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c26:not(:disabled):not([aria-disabled]):hover,
-.c26[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c26:not(:disabled):not([aria-disabled]):active,
-.c26[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c26:disabled,
-.c26[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c13 {
-  margin-bottom: 8px;
-}
-
-.c17 {
-  display: grid;
-  grid-template-columns: 1fr;
-  height: 40px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  gap: 4px;
-  padding: 0 8px;
-  line-height: 22px;
-  font-size: 14px;
-}
-
-.c17:not(:disabled):not([aria-disabled]):hover,
-.c17 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c17:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c18 {
-  border: none;
-  box-sizing: border-box;
-  outline: none;
-  font-family: inherit;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  -webkit-transform: scale(0.875);
-  -ms-transform: scale(0.875);
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  height: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding-left: 0;
-  padding-right: 0;
-  border-radius: calc(4px / 0.875);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  color: var(--charcoal-text2);
-}
-
-.c18::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c18::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c18:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c18::placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c19 {
-  display: inline-block;
-  width: 100%;
-}
-
-.c19:disabled,
-.c19[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c20 {
-  width: 100%;
-  margin-bottom: 8px;
-}
-
-.c21 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c21:disabled,
-.c21[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c21:not(:disabled):not([aria-disabled]):focus,
-.c21[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c21:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c21[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c21:not(:disabled):not([aria-disabled]):focus-visible,
-.c21[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c21:not(:disabled):not([aria-disabled]):hover,
-.c21[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c21:not(:disabled):not([aria-disabled]):active,
-.c21[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c22 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c23 {
-  color: var(--charcoal-text2);
-}
-
-.c3 {
-  margin: auto;
-  position: relative;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: 440px;
-  background-color: var(--charcoal-surface1);
-  border-radius: 24px;
-}
-
-.c3:focus {
-  outline: none;
-}
-
-.c2 {
-  z-index: 10;
-  overflow: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: -webkit-fill-available;
-  width: -moz-available;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 40px 0;
-  box-sizing: border-box;
-  background-color: var(--charcoal-surface4);
-}
-
-.c28 {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-}
-
-.c28:not(:disabled):not([aria-disabled]):hover,
-.c28[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c28:not(:disabled):not([aria-disabled]):active,
-.c28[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c5 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c4 {
-  height: 64px;
-  display: grid;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c6 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c9 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c7 {
-  padding-bottom: 40px;
-}
-
-.c24 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c8 {
-  display: grid;
-  gap: 24px;
-}
-
-.c10 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c10::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c10::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-@media (max-width:743px) {
-  .c3 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-  }
-}
-
-@media (max-width:743px) {
-
-}
-
-@media (max-width:743px) {
-
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-hidden={null}
-    data-overlay-container={true}
-  >
-    <div
-      style={
-        Object {
-          "height": 1024,
-        }
-      }
-    >
-      <button
-        className="c0 c1"
-        disabled={false}
-        onClick={[Function]}
-      >
-        Open Modal
-      </button>
-    </div>
-    <div
-      className="c2"
-      onClick={[Function]}
-      onPointerDown={[Function]}
-      style={Object {}}
-    >
-      <div
-        className="c3"
-        onBlur={[Function]}
-        onKeyDown={[Function]}
-        role="dialog"
-        size="M"
-        style={Object {}}
-        tabIndex={-1}
-      >
-        <div
-          className="c4"
-        >
-          <h3
-            className="c5 c6"
-          >
-            react/Title
-          </h3>
-        </div>
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <div
-              className="c9 c10"
-            >
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
-            </div>
-            <div
-              className="c9"
-            >
-              <div
-                className="c11"
-              >
-                <div
-                  className="c12 c13"
-                >
-                  <label
-                    className="c14"
-                    htmlFor="react-aria-22"
-                    id="react-aria-23"
-                  >
-                    Name
-                  </label>
-                  <div
-                    className="c15 c16"
-                  >
-                    <span />
-                  </div>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <input
-                    aria-labelledby="react-aria-23"
-                    className="c18"
-                    disabled={false}
-                    id="react-aria-22"
-                    onChange={[Function]}
-                    placeholder="Nagisa"
-                    readOnly={false}
-                    required={false}
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="c9"
-            >
-              <div
-                className="c11"
-              >
-                <div
-                  className="c12 c13"
-                >
-                  <label
-                    className="c14"
-                    htmlFor="react-aria-26"
-                    id="react-aria-27"
-                  >
-                    Country
-                  </label>
-                  <div
-                    className="c15 c16"
-                  >
-                    <span />
-                  </div>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <input
-                    aria-labelledby="react-aria-27"
-                    autoFocus={true}
-                    className="c18"
-                    disabled={false}
-                    id="react-aria-26"
-                    onChange={[Function]}
-                    placeholder="Tokyo"
-                    readOnly={false}
-                    required={false}
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="c9"
-            >
-              <div
-                className="c19"
-              >
-                <div
-                  className="c12 c20"
-                >
-                  <label
-                    className="c14"
-                  >
-                    Fruits
-                  </label>
-                  <div
-                    className="c15 c16"
-                  >
-                    <span />
-                  </div>
-                </div>
-                <div
-                  aria-hidden="true"
-                  style={
-                    Object {
-                      "border": 0,
-                      "clip": "rect(0 0 0 0)",
-                      "clipPath": "inset(50%)",
-                      "height": "1px",
-                      "margin": "-1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "absolute",
-                      "whiteSpace": "nowrap",
-                      "width": "1px",
-                    }
-                  }
-                >
-                  <select
-                    onChange={[Function]}
-                    tabIndex={-1}
-                    value="10"
-                  >
-                    <option
-                      value="10"
-                    >
-                      10
-                    </option>
-                    <option
-                      value="20"
-                    >
-                      20
-                    </option>
-                    <option
-                      value="30"
-                    >
-                      30
-                    </option>
-                  </select>
-                </div>
-                <button
-                  className="c21"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="c22"
-                  >
-                    Apple
-                  </span>
-                  <pixiv-icon
-                    class="c23"
-                    name="16/Menu"
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            className="c24"
-          >
-            <button
-              className="c0 c25"
-              disabled={false}
-              onClick={[Function]}
-            >
-              Apply
-            </button>
-            <button
-              className="c0 c26"
-              disabled={false}
-              onClick={[Function]}
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-        <button
-          aria-label="Close"
-          className="c0 c27 c28"
-          onClick={[Function]}
-          type="button"
-        >
-          <pixiv-icon
-            aria-hidden="true"
-            name="24/Close"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c19 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c19:not(:disabled):not([aria-disabled]):hover,
-.c19[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c19:not(:disabled):not([aria-disabled]):active,
-.c19[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c19:not(:disabled):not([aria-disabled]):focus,
-.c19[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c19:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c19[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c19:not(:disabled):not([aria-disabled]):focus-visible,
-.c19[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c19:disabled,
-.c19[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c1 {
-  width: -webkit-min-content;
-  width: -moz-min-content;
-  width: min-content;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c17 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-assertive);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c17:not(:disabled):not([aria-disabled]):focus,
-.c17[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c17:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c17[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c17:not(:disabled):not([aria-disabled]):focus-visible,
-.c17[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c17:not(:disabled):not([aria-disabled]):hover,
-.c17[aria-disabled='false']:hover {
-  color: var(--charcoal-text5-hover);
-  background-color: var(--charcoal-assertive-hover);
-}
-
-.c17:not(:disabled):not([aria-disabled]):active,
-.c17[aria-disabled='false']:active {
-  color: var(--charcoal-text5-press);
-  background-color: var(--charcoal-assertive-press);
-}
-
-.c17:disabled,
-.c17[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c18 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c18:not(:disabled):not([aria-disabled]):focus,
-.c18[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c18:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c18[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c18:not(:disabled):not([aria-disabled]):focus-visible,
-.c18[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c18:not(:disabled):not([aria-disabled]):hover,
-.c18[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c18:not(:disabled):not([aria-disabled]):active,
-.c18[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c18:disabled,
-.c18[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c3 {
-  margin: auto;
-  position: relative;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: 440px;
-  background-color: var(--charcoal-surface1);
-  border-radius: 24px;
-}
-
-.c3:focus {
-  outline: none;
-}
-
-.c12 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  cursor: pointer;
-  gap: 4px;
-}
-
-.c12:has(input[readonly]) {
-  cursor: default;
-}
-
-.c12:disabled,
-.c12[aria-disabled]:not([aria-disabled='false']) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c13 {
-  position: relative;
-}
-
-.c14[type='checkbox'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  cursor: pointer;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c14[type='checkbox']:disabled {
-  cursor: default;
-}
-
-.c14[type='checkbox'][readonly] {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c14[type='checkbox']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c14[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
-.c14[type='checkbox']:checked[aria-disabled='false']:hover {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c14[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
-.c14[type='checkbox']:checked[aria-disabled='false']:active {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c14[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c14[type='checkbox'][aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c14[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c14[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c14[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c14[type='checkbox'][aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c14[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
-.c14[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c14[type='checkbox']:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--charcoal-text4);
-}
-
-.c15 {
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: var(--charcoal-text5);
-}
-
-.c16 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.c2 {
-  z-index: 10;
-  overflow: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: -webkit-fill-available;
-  width: -moz-available;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 40px 0;
-  box-sizing: border-box;
-  background-color: var(--charcoal-surface4);
-}
-
-.c20 {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-}
-
-.c20:not(:disabled):not([aria-disabled]):hover,
-.c20[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c20:not(:disabled):not([aria-disabled]):active,
-.c20[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c5 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c4 {
-  height: 64px;
-  display: grid;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c6 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c9 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c7 {
-  padding-bottom: 40px;
-}
-
-.c11 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c8 {
-  display: grid;
-  gap: 24px;
-}
-
-.c10 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c10::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c10::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-@media (max-width:743px) {
-  .c3 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-    max-width: unset;
-    width: 100%;
-    border-radius: 0;
-    margin: auto 0 0 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c2 {
-    padding: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c4 {
-    height: 48px;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-hidden={null}
-    data-overlay-container={true}
-  >
-    <button
-      className="c0 c1"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Open Modal
-    </button>
-    <div
-      className="c2"
-      onClick={[Function]}
-      onPointerDown={[Function]}
-      style={Object {}}
-    >
-      <div
-        className="c3"
-        onBlur={[Function]}
-        onKeyDown={[Function]}
-        role="dialog"
-        size="M"
-        style={Object {}}
-        tabIndex={-1}
-      >
-        <div
-          className="c4"
-        >
-          <h3
-            className="c5 c6"
-          >
-            react/Title
-          </h3>
-        </div>
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <div
-              className="c9 c10"
-            >
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
-            </div>
-          </div>
-          <div
-            className="c11"
-          >
-            <label
-              aria-disabled={false}
-              className="c12"
-            >
-              <div
-                className="c13"
-              >
-                <input
-                  checked={true}
-                  className="c14"
-                  disabled={false}
-                  onChange={[Function]}
-                  onClick={[Function]}
-                  onDragStart={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchCancel={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  type="checkbox"
-                />
-                <div
-                  aria-hidden={true}
-                  checked={true}
-                  className="c15"
-                >
-                  <pixiv-icon
-                    name="24/Check"
-                    unsafe-non-guideline-scale={0.6666666666666666}
-                  />
-                </div>
-              </div>
-              <div
-                className="c16"
-              >
-                test checkbox
-              </div>
-            </label>
-            <button
-              className="c0 c17"
-              disabled={false}
-              onClick={[Function]}
-            >
-              削除する
-            </button>
-            <button
-              className="c0 c18"
-              disabled={false}
-              onClick={[Function]}
-            >
-              キャンセル
-            </button>
-          </div>
-        </div>
-        <button
-          aria-label="Close"
-          className="c0 c19 c20"
-          onClick={[Function]}
-          type="button"
-        >
-          <pixiv-icon
-            aria-hidden="true"
-            name="24/Close"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests > react/Modal > Default 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c27 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c27:not(:disabled):not([aria-disabled]):hover,
-.c27[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c27:not(:disabled):not([aria-disabled]):active,
-.c27[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus,
-.c27[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c27[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c27:not(:disabled):not([aria-disabled]):focus-visible,
-.c27[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c27:disabled,
-.c27[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c14 {
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c14::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c14::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c16 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color,0.2s box-shadow;
-  transition: 0.2s color,0.2s box-shadow;
-}
-
-.c16::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c16::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c16:not(:disabled):not([aria-disabled]):hover,
-.c16[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c16:not(:disabled):not([aria-disabled]):active,
-.c16[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c16:not(:disabled):not([aria-disabled]):active,
-.c16[aria-disabled='false']:active,
-.c16:not(:disabled):not([aria-disabled]):focus,
-.c16[aria-disabled='false']:focus,
-.c16:not(:disabled):not([aria-disabled]):focus-visible,
-.c16[aria-disabled='false']:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c12 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c12 > .c15 {
-  margin-left: auto;
-}
-
-.c1 {
-  width: -webkit-min-content;
-  width: -moz-min-content;
-  width: min-content;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c25 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c25:not(:disabled):not([aria-disabled]):focus,
-.c25[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c25:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c25[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c25:not(:disabled):not([aria-disabled]):focus-visible,
-.c25[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c25:not(:disabled):not([aria-disabled]):hover,
-.c25[aria-disabled='false']:hover {
-  color: var(--charcoal-text5-hover);
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c25:not(:disabled):not([aria-disabled]):active,
-.c25[aria-disabled='false']:active {
-  color: var(--charcoal-text5-press);
-  background-color: var(--charcoal-brand-press);
-}
-
-.c25:disabled,
-.c25[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c26 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c26:not(:disabled):not([aria-disabled]):focus,
-.c26[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c26:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c26[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c26:not(:disabled):not([aria-disabled]):focus-visible,
-.c26[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c26:not(:disabled):not([aria-disabled]):hover,
-.c26[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c26:not(:disabled):not([aria-disabled]):active,
-.c26[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c26:disabled,
-.c26[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c13 {
-  margin-bottom: 8px;
-}
-
-.c17 {
-  display: grid;
-  grid-template-columns: 1fr;
-  height: 40px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  gap: 4px;
-  padding: 0 8px;
-  line-height: 22px;
-  font-size: 14px;
-}
-
-.c17:not(:disabled):not([aria-disabled]):hover,
-.c17 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c17:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c18 {
-  border: none;
-  box-sizing: border-box;
-  outline: none;
-  font-family: inherit;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  -webkit-transform: scale(0.875);
-  -ms-transform: scale(0.875);
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  height: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding-left: 0;
-  padding-right: 0;
-  border-radius: calc(4px / 0.875);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  color: var(--charcoal-text2);
-}
-
-.c18::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c18::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c18:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c18::placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c19 {
-  display: inline-block;
-  width: 100%;
-}
-
-.c19:disabled,
-.c19[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c20 {
-  width: 100%;
-  margin-bottom: 8px;
-}
-
-.c21 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c21:disabled,
-.c21[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c21:not(:disabled):not([aria-disabled]):focus,
-.c21[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c21:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c21[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c21:not(:disabled):not([aria-disabled]):focus-visible,
-.c21[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c21:not(:disabled):not([aria-disabled]):hover,
-.c21[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c21:not(:disabled):not([aria-disabled]):active,
-.c21[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c22 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c23 {
-  color: var(--charcoal-text2);
-}
-
-.c3 {
-  margin: auto;
-  position: relative;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: 440px;
-  background-color: var(--charcoal-surface1);
-  border-radius: 24px;
-}
-
-.c3:focus {
-  outline: none;
-}
-
-.c2 {
-  z-index: 10;
-  overflow: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: -webkit-fill-available;
-  width: -moz-available;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 40px 0;
-  box-sizing: border-box;
-  background-color: var(--charcoal-surface4);
-}
-
-.c28 {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-}
-
-.c28:not(:disabled):not([aria-disabled]):hover,
-.c28[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c28:not(:disabled):not([aria-disabled]):active,
-.c28[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c5 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c4 {
-  height: 64px;
-  display: grid;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c6 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c9 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c7 {
-  padding-bottom: 40px;
-}
-
-.c24 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c8 {
-  display: grid;
-  gap: 24px;
-}
-
-.c10 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c10::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c10::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-@media (max-width:743px) {
-  .c3 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-  }
-}
-
-@media (max-width:743px) {
-
-}
-
-@media (max-width:743px) {
-
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-hidden={null}
-    data-overlay-container={true}
-  >
-    <button
-      className="c0 c1"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Open Modal
-    </button>
-    <div
-      className="c2"
-      onClick={[Function]}
-      onPointerDown={[Function]}
-      style={Object {}}
-    >
-      <div
-        className="c3"
-        onBlur={[Function]}
-        onKeyDown={[Function]}
-        role="dialog"
-        size="M"
-        style={Object {}}
-        tabIndex={-1}
-      >
-        <div
-          className="c4"
-        >
-          <h3
-            className="c5 c6"
-          >
-            react/Title
-          </h3>
-        </div>
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <div
-              className="c9 c10"
-            >
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
-            </div>
-            <div
-              className="c9"
-            >
-              <div
-                className="c11"
-              >
-                <div
-                  className="c12 c13"
-                >
-                  <label
-                    className="c14"
-                    htmlFor="react-aria-2"
-                    id="react-aria-3"
-                  >
-                    Name
-                  </label>
-                  <div
-                    className="c15 c16"
-                  >
-                    <span />
-                  </div>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <input
-                    aria-labelledby="react-aria-3"
-                    className="c18"
-                    disabled={false}
-                    id="react-aria-2"
-                    onChange={[Function]}
-                    placeholder="Nagisa"
-                    readOnly={false}
-                    required={false}
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="c9"
-            >
-              <div
-                className="c11"
-              >
-                <div
-                  className="c12 c13"
-                >
-                  <label
-                    className="c14"
-                    htmlFor="react-aria-6"
-                    id="react-aria-7"
-                  >
-                    Country
-                  </label>
-                  <div
-                    className="c15 c16"
-                  >
-                    <span />
-                  </div>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <input
-                    aria-labelledby="react-aria-7"
-                    autoFocus={true}
-                    className="c18"
-                    disabled={false}
-                    id="react-aria-6"
-                    onChange={[Function]}
-                    placeholder="Tokyo"
-                    readOnly={false}
-                    required={false}
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="c9"
-            >
-              <div
-                className="c19"
-              >
-                <div
-                  className="c12 c20"
-                >
-                  <label
-                    className="c14"
-                  >
-                    Fruits
-                  </label>
-                  <div
-                    className="c15 c16"
-                  >
-                    <span />
-                  </div>
-                </div>
-                <div
-                  aria-hidden="true"
-                  style={
-                    Object {
-                      "border": 0,
-                      "clip": "rect(0 0 0 0)",
-                      "clipPath": "inset(50%)",
-                      "height": "1px",
-                      "margin": "-1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "absolute",
-                      "whiteSpace": "nowrap",
-                      "width": "1px",
-                    }
-                  }
-                >
-                  <select
-                    onChange={[Function]}
-                    tabIndex={-1}
-                    value="10"
-                  >
-                    <option
-                      value="10"
-                    >
-                      10
-                    </option>
-                    <option
-                      value="20"
-                    >
-                      20
-                    </option>
-                    <option
-                      value="30"
-                    >
-                      30
-                    </option>
-                  </select>
-                </div>
-                <button
-                  className="c21"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="c22"
-                  >
-                    Apple
-                  </span>
-                  <pixiv-icon
-                    class="c23"
-                    name="16/Menu"
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            className="c24"
-          >
-            <button
-              className="c0 c25"
-              disabled={false}
-              onClick={[Function]}
-            >
-              Apply
-            </button>
-            <button
-              className="c0 c26"
-              disabled={false}
-              onClick={[Function]}
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-        <button
-          aria-label="Close"
-          className="c0 c27 c28"
-          onClick={[Function]}
-          type="button"
-        >
-          <pixiv-icon
-            aria-hidden="true"
-            name="24/Close"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c22 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c22:not(:disabled):not([aria-disabled]):hover,
-.c22[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c22:not(:disabled):not([aria-disabled]):active,
-.c22[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c22:not(:disabled):not([aria-disabled]):focus,
-.c22[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c22:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c22[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c22:not(:disabled):not([aria-disabled]):focus-visible,
-.c22[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c22:disabled,
-.c22[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c14 {
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c14::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c14::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c16 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color,0.2s box-shadow;
-  transition: 0.2s color,0.2s box-shadow;
-}
-
-.c16::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c16::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c16:not(:disabled):not([aria-disabled]):hover,
-.c16[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c16:not(:disabled):not([aria-disabled]):active,
-.c16[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c16:not(:disabled):not([aria-disabled]):active,
-.c16[aria-disabled='false']:active,
-.c16:not(:disabled):not([aria-disabled]):focus,
-.c16[aria-disabled='false']:focus,
-.c16:not(:disabled):not([aria-disabled]):focus-visible,
-.c16[aria-disabled='false']:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c12 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c12 > .c15 {
-  margin-left: auto;
-}
-
-.c1 {
-  width: -webkit-min-content;
-  width: -moz-min-content;
-  width: min-content;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c20 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c20:not(:disabled):not([aria-disabled]):focus,
-.c20[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c20:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c20[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c20:not(:disabled):not([aria-disabled]):focus-visible,
-.c20[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c20:not(:disabled):not([aria-disabled]):hover,
-.c20[aria-disabled='false']:hover {
-  color: var(--charcoal-text5-hover);
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c20:not(:disabled):not([aria-disabled]):active,
-.c20[aria-disabled='false']:active {
-  color: var(--charcoal-text5-press);
-  background-color: var(--charcoal-brand-press);
-}
-
-.c20:disabled,
-.c20[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c21 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c21:not(:disabled):not([aria-disabled]):focus,
-.c21[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c21:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c21[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c21:not(:disabled):not([aria-disabled]):focus-visible,
-.c21[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c21:not(:disabled):not([aria-disabled]):hover,
-.c21[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c21:not(:disabled):not([aria-disabled]):active,
-.c21[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c21:disabled,
-.c21[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c13 {
-  margin-bottom: 8px;
-}
-
-.c17 {
-  display: grid;
-  grid-template-columns: 1fr;
-  height: 40px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  gap: 4px;
-  padding: 0 8px;
-  line-height: 22px;
-  font-size: 14px;
-}
-
-.c17:not(:disabled):not([aria-disabled]):hover,
-.c17 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c17:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c18 {
-  border: none;
-  box-sizing: border-box;
-  outline: none;
-  font-family: inherit;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  -webkit-transform: scale(0.875);
-  -ms-transform: scale(0.875);
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  height: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding-left: 0;
-  padding-right: 0;
-  border-radius: calc(4px / 0.875);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  color: var(--charcoal-text2);
-}
-
-.c18::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c18::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c18:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c18::placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c3 {
-  margin: auto;
-  position: relative;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: 440px;
-  background-color: var(--charcoal-surface1);
-  border-radius: 24px;
-}
-
-.c3:focus {
-  outline: none;
-}
-
-.c2 {
-  z-index: 10;
-  overflow: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: -webkit-fill-available;
-  width: -moz-available;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 40px 0;
-  box-sizing: border-box;
-  background-color: var(--charcoal-surface4);
-}
-
-.c23 {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-}
-
-.c23:not(:disabled):not([aria-disabled]):hover,
-.c23[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c23:not(:disabled):not([aria-disabled]):active,
-.c23[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c5 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c4 {
-  height: 64px;
-  display: grid;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c6 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c9 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c7 {
-  padding-bottom: 40px;
-}
-
-.c19 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c8 {
-  display: grid;
-  gap: 24px;
-}
-
-.c10 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c10::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c10::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-@media (max-width:743px) {
-  .c3 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-    max-width: unset;
-    width: 100%;
-    border-radius: 0;
-    margin: auto 0 0 0;
-    min-height: 100%;
-  }
-}
-
-@media (max-width:743px) {
-  .c2 {
-    padding: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c4 {
-    height: 48px;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-hidden={null}
-    data-overlay-container={true}
-  >
-    <button
-      className="c0 c1"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Open Modal
-    </button>
-    <div
-      className="c2"
-      onClick={[Function]}
-      onPointerDown={[Function]}
-      style={Object {}}
-    >
-      <div
-        className="c3"
-        onBlur={[Function]}
-        onKeyDown={[Function]}
-        role="dialog"
-        size="M"
-        style={Object {}}
-        tabIndex={-1}
-      >
-        <div
-          className="c4"
-        >
-          <h3
-            className="c5 c6"
-          >
-            react/Title
-          </h3>
-        </div>
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <div
-              className="c9 c10"
-            >
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
-            </div>
-            <div
-              className="c9"
-            >
-              <div
-                className="c11"
-              >
-                <div
-                  className="c12 c13"
-                >
-                  <label
-                    className="c14"
-                    htmlFor="react-aria-11"
-                    id="react-aria-12"
-                  >
-                    Name
-                  </label>
-                  <div
-                    className="c15 c16"
-                  >
-                    <span />
-                  </div>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <input
-                    aria-labelledby="react-aria-12"
-                    className="c18"
-                    disabled={false}
-                    id="react-aria-11"
-                    onChange={[Function]}
-                    placeholder="Nagisa"
-                    readOnly={false}
-                    required={false}
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="c9"
-            >
-              <div
-                className="c11"
-              >
-                <div
-                  className="c12 c13"
-                >
-                  <label
-                    className="c14"
-                    htmlFor="react-aria-15"
-                    id="react-aria-16"
-                  >
-                    Country
-                  </label>
-                  <div
-                    className="c15 c16"
-                  >
-                    <span />
-                  </div>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <input
-                    aria-labelledby="react-aria-16"
-                    className="c18"
-                    disabled={false}
-                    id="react-aria-15"
-                    onChange={[Function]}
-                    placeholder="Tokyo"
-                    readOnly={false}
-                    required={false}
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="c19"
-          >
-            <button
-              className="c0 c20"
-              disabled={false}
-              onClick={[Function]}
-            >
-              Apply
-            </button>
-            <button
-              className="c0 c21"
-              disabled={false}
-              onClick={[Function]}
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-        <button
-          aria-label="Close"
-          className="c0 c22 c23"
-          onClick={[Function]}
-          type="button"
-        >
-          <pixiv-icon
-            aria-hidden="true"
-            name="24/Close"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests > react/Modal > InternalScroll 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c1 {
-  width: -webkit-min-content;
-  width: -moz-min-content;
-  width: min-content;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c11 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c11:not(:disabled):not([aria-disabled]):focus,
-.c11[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c11:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c11[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c11:not(:disabled):not([aria-disabled]):focus-visible,
-.c11[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c11:not(:disabled):not([aria-disabled]):hover,
-.c11[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c11:not(:disabled):not([aria-disabled]):active,
-.c11[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c11:disabled,
-.c11[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c3 {
-  margin: auto;
-  position: relative;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: 440px;
-  background-color: var(--charcoal-surface1);
-  border-radius: 24px;
-}
-
-.c3:focus {
-  outline: none;
-}
-
-.c2 {
-  z-index: 10;
-  overflow: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: -webkit-fill-available;
-  width: -moz-available;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 40px 0;
-  box-sizing: border-box;
-  background-color: var(--charcoal-surface4);
-}
-
-.c5 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c4 {
-  height: 64px;
-  display: grid;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c6 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c7 {
-  padding-bottom: 40px;
-}
-
-.c9 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c8 {
-  overflow: auto;
-  max-height: calc( 100vh - 184px - 56px );
-}
-
-.c10 {
-  position: relative;
-}
-
-.c10::before {
-  content: '';
-  pointer-events: none;
-  border-top: 1px solid rgba(0,0,0,0.08);
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-@media (max-width:743px) {
-  .c3 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-  }
-}
-
-@media (max-width:743px) {
-
-}
-
-@media (max-width:743px) {
-
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-hidden={null}
-    data-overlay-container={true}
-  >
-    <button
-      className="c0 c1"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Open Modal
-    </button>
-    <div
-      className="c2"
-      onClick={[Function]}
-      onPointerDown={[Function]}
-      style={Object {}}
-    >
-      <div
-        className="c3"
-        onBlur={[Function]}
-        onKeyDown={[Function]}
-        role="dialog"
-        size="M"
-        style={Object {}}
-        tabIndex={-1}
-      >
-        <div
-          className="c4"
-        >
-          <h3
-            className="c5 c6"
-          >
-            react/Title
-          </h3>
-        </div>
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <div
-              style={
-                Object {
-                  "background": "linear-gradient(#e66465, #9198e5)",
-                  "height": 1000,
-                }
-              }
-            />
-          </div>
-          <div
-            className="c9 c10"
-          >
-            <button
-              className="c0 c11"
-              disabled={false}
-              onClick={[Function]}
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests > react/Modal > NotDismmissableStory 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c1 {
-  width: -webkit-min-content;
-  width: -moz-min-content;
-  width: min-content;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c12 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c12[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c12:not(:disabled):not([aria-disabled]):focus-visible,
-.c12[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c12:not(:disabled):not([aria-disabled]):hover,
-.c12[aria-disabled='false']:hover {
-  color: var(--charcoal-text5-hover);
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active {
-  color: var(--charcoal-text5-press);
-  background-color: var(--charcoal-brand-press);
-}
-
-.c12:disabled,
-.c12[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c3 {
-  margin: auto;
-  position: relative;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: 440px;
-  background-color: var(--charcoal-surface1);
-  border-radius: 24px;
-}
-
-.c3:focus {
-  outline: none;
-}
-
-.c2 {
-  z-index: 10;
-  overflow: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: -webkit-fill-available;
-  width: -moz-available;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 40px 0;
-  box-sizing: border-box;
-  background-color: var(--charcoal-surface4);
-}
-
-.c5 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c4 {
-  height: 64px;
-  display: grid;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c6 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c9 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c7 {
-  padding-bottom: 40px;
-}
-
-.c11 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c8 {
-  display: grid;
-  gap: 24px;
-}
-
-.c10 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c10::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c10::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-@media (max-width:743px) {
-  .c3 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-  }
-}
-
-@media (max-width:743px) {
-
-}
-
-@media (max-width:743px) {
-
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-hidden={null}
-    data-overlay-container={true}
-  >
-    <button
-      className="c0 c1"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Open Modal
-    </button>
-    <div
-      className="c2"
-      onClick={[Function]}
-      onPointerDown={[Function]}
-      style={Object {}}
-    >
-      <div
-        className="c3"
-        onBlur={[Function]}
-        onKeyDown={[Function]}
-        role="dialog"
-        size="M"
-        style={Object {}}
-        tabIndex={-1}
-      >
-        <div
-          className="c4"
-        >
-          <h3
-            className="c5 c6"
-          >
-            react/Title
-          </h3>
-        </div>
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <div
-              className="c9 c10"
-            >
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
-            </div>
-          </div>
-          <div
-            className="c11"
-          >
-            <button
-              className="c0 c12"
-              disabled={false}
-              onClick={[Function]}
-            >
-              OK
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/react/src/components/Modal/index.story.tsx b/packages/react/src/components/Modal/index.story.tsx
index f9a1fdee0..02de552b3 100644
--- a/packages/react/src/components/Modal/index.story.tsx
+++ b/packages/react/src/components/Modal/index.story.tsx
@@ -55,6 +55,11 @@ export default {
       </OverlayProvider>
     )
   },
+  parameters: {
+    storyshots: {
+      skip: true,
+    },
+  },
 } as Meta<typeof Modal>
 
 const M = (props: ModalProps) => {
diff --git a/packages/react/src/components/SegmentedControl/__snapshots__/index.story.storyshot b/packages/react/src/components/SegmentedControl/__snapshots__/index.story.storyshot
index 08d01aead..ab9714fad 100644
--- a/packages/react/src/components/SegmentedControl/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/SegmentedControl/__snapshots__/index.story.storyshot
@@ -95,7 +95,7 @@ exports[`Storybook Tests > react/SegmentedControl > ObjectSegments 1`] = `
     aria-label="test"
     aria-orientation="vertical"
     className="c0"
-    id="react-aria-35"
+    id="test-id"
     onBlur={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -110,7 +110,7 @@ exports[`Storybook Tests > react/SegmentedControl > ObjectSegments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -149,7 +149,7 @@ exports[`Storybook Tests > react/SegmentedControl > ObjectSegments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -188,7 +188,7 @@ exports[`Storybook Tests > react/SegmentedControl > ObjectSegments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -227,7 +227,7 @@ exports[`Storybook Tests > react/SegmentedControl > ObjectSegments 1`] = `
         checked={false}
         className="c2"
         disabled={true}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -354,7 +354,7 @@ exports[`Storybook Tests > react/SegmentedControl > StringSegments 1`] = `
     aria-label="test"
     aria-orientation="vertical"
     className="c0"
-    id="react-aria-31"
+    id="test-id"
     onBlur={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -369,7 +369,7 @@ exports[`Storybook Tests > react/SegmentedControl > StringSegments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -408,7 +408,7 @@ exports[`Storybook Tests > react/SegmentedControl > StringSegments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -447,7 +447,7 @@ exports[`Storybook Tests > react/SegmentedControl > StringSegments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
diff --git a/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot b/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
index 86a0b976d..842d93fd3 100644
--- a/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
+++ b/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
@@ -193,8 +193,8 @@ exports[`Storybook Tests > react/TextArea > AssistiveText 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-55"
-        id="react-aria-56"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -209,10 +209,10 @@ exports[`Storybook Tests > react/TextArea > AssistiveText 1`] = `
       rows={4}
     >
       <textarea
-        aria-labelledby="react-aria-56"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-55"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -414,8 +414,8 @@ exports[`Storybook Tests > react/TextArea > AutoHeight 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-79"
-        id="react-aria-80"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -430,10 +430,10 @@ exports[`Storybook Tests > react/TextArea > AutoHeight 1`] = `
       rows={4}
     >
       <textarea
-        aria-labelledby="react-aria-80"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-79"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -668,8 +668,8 @@ exports[`Storybook Tests > react/TextArea > Default 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-39"
-        id="react-aria-40"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -691,10 +691,10 @@ exports[`Storybook Tests > react/TextArea > Default 1`] = `
       rows={4}
     >
       <textarea
-        aria-labelledby="react-aria-40"
+        aria-labelledby="test-id"
         className="c8"
         disabled={false}
-        id="react-aria-39"
+        id="test-id"
         onChange={[Function]}
         placeholder="Text Area"
         readOnly={false}
@@ -893,8 +893,8 @@ exports[`Storybook Tests > react/TextArea > Disabled 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-67"
-        id="react-aria-68"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -910,10 +910,10 @@ exports[`Storybook Tests > react/TextArea > Disabled 1`] = `
       rows={4}
     >
       <textarea
-        aria-labelledby="react-aria-68"
+        aria-labelledby="test-id"
         className="c7"
         disabled={true}
-        id="react-aria-67"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -1119,8 +1119,8 @@ exports[`Storybook Tests > react/TextArea > Invalid 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-71"
-        id="react-aria-72"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -1136,10 +1136,10 @@ exports[`Storybook Tests > react/TextArea > Invalid 1`] = `
     >
       <textarea
         aria-invalid={true}
-        aria-labelledby="react-aria-72"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-71"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -1327,8 +1327,8 @@ exports[`Storybook Tests > react/TextArea > Label 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-43"
-        id="react-aria-44"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -1343,10 +1343,10 @@ exports[`Storybook Tests > react/TextArea > Label 1`] = `
       rows={4}
     >
       <textarea
-        aria-labelledby="react-aria-44"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-43"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -1543,8 +1543,8 @@ exports[`Storybook Tests > react/TextArea > Placeholder 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-47"
-        id="react-aria-48"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -1559,10 +1559,10 @@ exports[`Storybook Tests > react/TextArea > Placeholder 1`] = `
       rows={4}
     >
       <textarea
-        aria-labelledby="react-aria-48"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-47"
+        id="test-id"
         onChange={[Function]}
         placeholder="Placeholder"
         readOnly={false}
@@ -1760,8 +1760,8 @@ exports[`Storybook Tests > react/TextArea > ReadOnly 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-75"
-        id="react-aria-76"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -1776,10 +1776,10 @@ exports[`Storybook Tests > react/TextArea > ReadOnly 1`] = `
       rows={4}
     >
       <textarea
-        aria-labelledby="react-aria-76"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-75"
+        id="test-id"
         onChange={[Function]}
         readOnly={true}
         required={false}
@@ -2003,8 +2003,8 @@ exports[`Storybook Tests > react/TextArea > Required 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-51"
-        id="react-aria-52"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -2024,11 +2024,11 @@ exports[`Storybook Tests > react/TextArea > Required 1`] = `
       rows={4}
     >
       <textarea
-        aria-labelledby="react-aria-52"
+        aria-labelledby="test-id"
         aria-required={true}
         className="c9"
         disabled={false}
-        id="react-aria-51"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -2234,8 +2234,8 @@ exports[`Storybook Tests > react/TextArea > ShowCount 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-63"
-        id="react-aria-64"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -2250,10 +2250,10 @@ exports[`Storybook Tests > react/TextArea > ShowCount 1`] = `
       rows={5}
     >
       <textarea
-        aria-labelledby="react-aria-64"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-63"
+        id="test-id"
         maxLength={100}
         onChange={[Function]}
         readOnly={false}
@@ -2480,8 +2480,8 @@ exports[`Storybook Tests > react/TextArea > SubLabel 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-59"
-        id="react-aria-60"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -2502,10 +2502,10 @@ exports[`Storybook Tests > react/TextArea > SubLabel 1`] = `
       rows={4}
     >
       <textarea
-        aria-labelledby="react-aria-60"
+        aria-labelledby="test-id"
         className="c8"
         disabled={false}
-        id="react-aria-59"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
index f02d33bd6..6061b7b27 100644
--- a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
+++ b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
@@ -213,8 +213,8 @@ exports[`Storybook Tests > react/TextField > Affix 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-123"
-        id="react-aria-124"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -233,10 +233,10 @@ exports[`Storybook Tests > react/TextField > Affix 1`] = `
         /home/john/
       </div>
       <input
-        aria-labelledby="react-aria-124"
+        aria-labelledby="test-id"
         className="c8"
         disabled={false}
-        id="react-aria-123"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -451,8 +451,8 @@ exports[`Storybook Tests > react/TextField > AssistiveText 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-99"
-        id="react-aria-100"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -466,10 +466,10 @@ exports[`Storybook Tests > react/TextField > AssistiveText 1`] = `
       className="c6"
     >
       <input
-        aria-labelledby="react-aria-100"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-99"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -714,8 +714,8 @@ exports[`Storybook Tests > react/TextField > Default 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-83"
-        id="react-aria-84"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -735,10 +735,10 @@ exports[`Storybook Tests > react/TextField > Default 1`] = `
       className="c7"
     >
       <input
-        aria-labelledby="react-aria-84"
+        aria-labelledby="test-id"
         className="c8"
         disabled={false}
-        id="react-aria-83"
+        id="test-id"
         onChange={[Function]}
         placeholder="TextField"
         readOnly={false}
@@ -942,8 +942,8 @@ exports[`Storybook Tests > react/TextField > Disabled 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-111"
-        id="react-aria-112"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -958,10 +958,10 @@ exports[`Storybook Tests > react/TextField > Disabled 1`] = `
       className="c6"
     >
       <input
-        aria-labelledby="react-aria-112"
+        aria-labelledby="test-id"
         className="c7"
         disabled={true}
-        id="react-aria-111"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -1172,8 +1172,8 @@ exports[`Storybook Tests > react/TextField > Invalid 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-115"
-        id="react-aria-116"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -1188,10 +1188,10 @@ exports[`Storybook Tests > react/TextField > Invalid 1`] = `
     >
       <input
         aria-invalid={true}
-        aria-labelledby="react-aria-116"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-115"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -1384,8 +1384,8 @@ exports[`Storybook Tests > react/TextField > Label 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-87"
-        id="react-aria-88"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -1399,10 +1399,10 @@ exports[`Storybook Tests > react/TextField > Label 1`] = `
       className="c6"
     >
       <input
-        aria-labelledby="react-aria-88"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-87"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -1617,7 +1617,7 @@ exports[`Storybook Tests > react/TextField > Number 1`] = `
       <input
         className="c7"
         disabled={false}
-        id="react-aria-131"
+        id="test-id"
         onChange={[Function]}
         onWheel={[Function]}
         readOnly={false}
@@ -1820,8 +1820,8 @@ exports[`Storybook Tests > react/TextField > Placeholder 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-91"
-        id="react-aria-92"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -1835,10 +1835,10 @@ exports[`Storybook Tests > react/TextField > Placeholder 1`] = `
       className="c6"
     >
       <input
-        aria-labelledby="react-aria-92"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-91"
+        id="test-id"
         onChange={[Function]}
         placeholder="Placeholder"
         readOnly={false}
@@ -2064,8 +2064,8 @@ exports[`Storybook Tests > react/TextField > Prefix 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-127"
-        id="react-aria-128"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -2090,10 +2090,10 @@ exports[`Storybook Tests > react/TextField > Prefix 1`] = `
         </div>
       </div>
       <input
-        aria-labelledby="react-aria-128"
+        aria-labelledby="test-id"
         className="c9"
         disabled={false}
-        id="react-aria-127"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -2295,8 +2295,8 @@ exports[`Storybook Tests > react/TextField > ReadOnly 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-119"
-        id="react-aria-120"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -2310,10 +2310,10 @@ exports[`Storybook Tests > react/TextField > ReadOnly 1`] = `
       className="c6"
     >
       <input
-        aria-labelledby="react-aria-120"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-119"
+        id="test-id"
         onChange={[Function]}
         readOnly={true}
         required={false}
@@ -2528,8 +2528,8 @@ exports[`Storybook Tests > react/TextField > RequiredText 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-95"
-        id="react-aria-96"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -2548,11 +2548,11 @@ exports[`Storybook Tests > react/TextField > RequiredText 1`] = `
       className="c8"
     >
       <input
-        aria-labelledby="react-aria-96"
+        aria-labelledby="test-id"
         aria-required={true}
         className="c9"
         disabled={false}
-        id="react-aria-95"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
@@ -2772,8 +2772,8 @@ exports[`Storybook Tests > react/TextField > ShowCount 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-107"
-        id="react-aria-108"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -2787,10 +2787,10 @@ exports[`Storybook Tests > react/TextField > ShowCount 1`] = `
       className="c6"
     >
       <input
-        aria-labelledby="react-aria-108"
+        aria-labelledby="test-id"
         className="c7"
         disabled={false}
-        id="react-aria-107"
+        id="test-id"
         maxLength={100}
         onChange={[Function]}
         readOnly={false}
@@ -3040,8 +3040,8 @@ exports[`Storybook Tests > react/TextField > SubLabel 1`] = `
     >
       <label
         className="c3"
-        htmlFor="react-aria-103"
-        id="react-aria-104"
+        htmlFor="test-id"
+        id="test-id"
       >
         Label
       </label>
@@ -3061,10 +3061,10 @@ exports[`Storybook Tests > react/TextField > SubLabel 1`] = `
       className="c7"
     >
       <input
-        aria-labelledby="react-aria-104"
+        aria-labelledby="test-id"
         className="c8"
         disabled={false}
-        id="react-aria-103"
+        id="test-id"
         onChange={[Function]}
         readOnly={false}
         required={false}
diff --git a/vite.config.ts b/vite.config.ts
index faff601c2..841adc8df 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,5 +20,15 @@ export default defineConfig({
         ),
       },
     ],
+    server: {
+      deps: {
+        inline: [
+          /@react-aria\/(.*)/,
+          /@react-stately\/(.*)/,
+          /react-stately/,
+          /@charcoal-ui\/(.*)/,
+        ]
+      }
+    }
   },
 })