@charcoal-ui/react 4.0.0-beta.4 → 4.0.0-beta.6

package/src/components/Modal/__snapshots__/index.story.storyshot

@@ -1,149 +1,94 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Modal BackgroundScroll 1`] = `
-.c23 {
-  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;
-}
-
-.c23:disabled,
-.c23[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c23:focus {
-  outline: none;
-}
-
-.c23::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
+exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
+.c2 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
 }
 
-.c12 {
-  font-size: 14px;
+.c3 {
+  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-weight: bold;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c12::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c12::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c14 {
   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;
 }
 
-.c14::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
+.c3:not(:disabled):not([aria-disabled]):hover,
+.c3 [aria-disabled='false']:hover {
+  background-color: var(--charcoal-surface3-hover);
 }
 
-.c14::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
+.c3:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c14:not(:disabled):not([aria-disabled]):hover,
-.c14[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
+.c4 {
+  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);
 }
 
-.c14:not(:disabled):not([aria-disabled]):active,
-.c14[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
+.c4::-webkit-input-placeholder {
+  color: var(--charcoal-text3);
 }
 
-.c14:not(:disabled):not([aria-disabled]):active,
-.c14[aria-disabled='false']:active,
-.c14:not(:disabled):not([aria-disabled]):focus,
-.c14[aria-disabled='false']:focus,
-.c14:not(:disabled):not([aria-disabled]):focus-visible,
-.c14[aria-disabled='false']:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+.c4::-moz-placeholder {
+  color: var(--charcoal-text3);
 }
 
-.c10 {
-  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;
+.c4:-ms-input-placeholder {
+  color: var(--charcoal-text3);
 }
 
-.c10 > .c13 {
-  margin-left: auto;
+.c4::placeholder {
+  color: var(--charcoal-text3);
 }
 
-.c17 {
-  display: inline-block;
+.c5 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
   width: 100%;
 }
 
-.c17:disabled,
-.c17[aria-disabled]:not([aria-disabled=false]) {
+.c5:disabled,
+.c5[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
   opacity: 0.32;
 }
 
-.c18 {
-  width: 100%;
-  margin-bottom: 8px;
-}
-
-.c19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+.c6 {
+  display: grid;
+  grid-template-columns: 1fr auto;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
@@ -166,38 +111,38 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
-.c19:disabled,
-.c19[aria-disabled]:not([aria-disabled=false]) {
+.c6:disabled,
+.c6[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
 }
 
-.c19:not(:disabled):not([aria-disabled]):focus,
-.c19[aria-disabled='false']:focus {
+.c6:not(:disabled):not([aria-disabled]):focus,
+.c6[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) {
+.c6:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c6[aria-disabled='false']:focus:not(:focus-visible) {
   box-shadow: none;
 }
 
-.c19:not(:disabled):not([aria-disabled]):focus-visible,
-.c19[aria-disabled='false']:focus-visible {
+.c6:not(:disabled):not([aria-disabled]):focus-visible,
+.c6[aria-disabled='false']:focus-visible {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c19:not(:disabled):not([aria-disabled]):hover,
-.c19[aria-disabled='false']:hover {
+.c6:not(:disabled):not([aria-disabled]):hover,
+.c6[aria-disabled='false']:hover {
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c19:not(:disabled):not([aria-disabled]):active,
-.c19[aria-disabled='false']:active {
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active {
   background-color: var(--charcoal-surface3-press);
 }
 
-.c20 {
+.c7 {
   text-align: left;
   font-size: 14px;
   line-height: 22px;
@@ -208,278 +153,23 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
   white-space: nowrap;
 }
 
-.c21 {
+.c8 {
   color: var(--charcoal-text2);
 }
 
-.c24 {
-  -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;
-}
-
-.c24:not(:disabled):not([aria-disabled]):hover,
-.c24[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c24:not(:disabled):not([aria-disabled]):active,
-.c24[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c24:not(:disabled):not([aria-disabled]):focus,
-.c24[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c24:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c24[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c24:not(:disabled):not([aria-disabled]):focus-visible,
-.c24[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c24:disabled,
-.c24[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c1 {
-  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;
-}
-
-.c1:focus {
-  outline: none;
-}
-
 .c0 {
-  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);
-}
-
-.c25 {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-}
-
-.c25:not(:disabled):not([aria-disabled]):hover,
-.c25[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c25:not(:disabled):not([aria-disabled]):active,
-.c25[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c3 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c2 {
-  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;
-}
-
-.c4 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c7 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c5 {
-  padding-bottom: 40px;
-}
-
-.c22 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c11 {
-  margin-bottom: 8px;
-}
-
-.c15 {
-  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;
-}
-
-.c15:not(:disabled):not([aria-disabled]):hover,
-.c15 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c15:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c16 {
-  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);
-}
-
-.c16::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c16::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c16:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c16::placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c6 {
   display: grid;
   gap: 24px;
 }
 
-.c8 {
+.c1 {
   color: var(--charcoal-text2);
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
 }
 
-.c8::before {
+.c1::before {
   display: block;
   width: 0;
   height: 0;
@@ -487,7 +177,7 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
   margin-top: -4px;
 }
 
-.c8::after {
+.c1::after {
   display: block;
   width: 0;
   height: 0;
@@ -495,21 +185,6 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
   margin-bottom: -4px;
 }
 
-@media (max-width:743px) {
-  .c1 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-  }
-}
-
-@media (max-width:743px) {
-
-}
-
-@media (max-width:743px) {
-
-}
-
 <div
   data-dark={false}
 >
@@ -532,137 +207,134 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
       </button>
     </div>
     <div
-      className="c0"
+      className="charcoal-modal-background"
+      data-bottom-sheet={false}
       onClick={[Function]}
       onPointerDown={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "zIndex": 10,
+        }
+      }
     >
       <div
-        className="c1"
-        onBlur={[Function]}
+        className="charcoal-modal-dialog"
+        data-bottom-sheet={false}
         onKeyDown={[Function]}
         role="dialog"
-        size="M"
         style={Object {}}
         tabIndex={-1}
       >
         <div
-          className="c2"
+          className="charcoal-modal-header-root"
+          data-bottom-sheet={false}
         >
-          <h3
-            className="c3 c4"
+          <div
+            className="charcoal-modal-header-title"
           >
-            Title
-          </h3>
+            react/Title
+          </div>
         </div>
         <div
-          className="c5"
+          className="charcoal-modal-body"
         >
           <div
-            className="c6"
+            className="c0"
           >
             <div
-              className="c7 c8"
+              className="charcoal-modal-align c1"
             >
               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="c7"
+              className="charcoal-modal-align"
             >
               <div
-                className="c9"
+                className="c2"
               >
                 <div
-                  className="c10 c11"
+                  className="charcoal-field-label-root"
                 >
                   <label
-                    className="c12"
+                    className="charcoal-field-label"
                     htmlFor="test-id"
                     id="test-id"
                   >
                     Name
                   </label>
                   <div
-                    className="c13 c14"
+                    className="charcoal-field-label-sub-label"
                   >
                     <span />
                   </div>
                 </div>
                 <div
-                  className="c15"
+                  className="c3"
                 >
                   <input
                     aria-labelledby="test-id"
-                    className="c16"
-                    disabled={false}
+                    className="c4"
                     id="test-id"
                     onChange={[Function]}
                     placeholder="Nagisa"
-                    readOnly={false}
-                    required={false}
                     type="text"
-                    value=""
                   />
                 </div>
               </div>
             </div>
             <div
-              className="c7"
+              className="charcoal-modal-align"
             >
               <div
-                className="c9"
+                className="c2"
               >
                 <div
-                  className="c10 c11"
+                  className="charcoal-field-label-root"
                 >
                   <label
-                    className="c12"
+                    className="charcoal-field-label"
                     htmlFor="test-id"
                     id="test-id"
                   >
                     Country
                   </label>
                   <div
-                    className="c13 c14"
+                    className="charcoal-field-label-sub-label"
                   >
                     <span />
                   </div>
                 </div>
                 <div
-                  className="c15"
+                  className="c3"
                 >
                   <input
                     aria-labelledby="test-id"
                     autoFocus={true}
-                    className="c16"
-                    disabled={false}
+                    className="c4"
                     id="test-id"
                     onChange={[Function]}
                     placeholder="Tokyo"
-                    readOnly={false}
-                    required={false}
                     type="text"
-                    value=""
                   />
                 </div>
               </div>
             </div>
             <div
-              className="c7"
+              className="charcoal-modal-align"
             >
               <div
-                className="c17"
+                className="c5"
               >
                 <div
-                  className="c10 c18"
+                  className="charcoal-field-label-root"
                 >
                   <label
-                    className="c12"
+                    className="charcoal-field-label"
                   >
                     Fruits
                   </label>
                   <div
-                    className="c13 c14"
+                    className="charcoal-field-label-sub-label"
                   >
                     <span />
                   </div>
@@ -707,17 +379,17 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
                   </select>
                 </div>
                 <button
-                  className="c19"
+                  className="c6"
                   onClick={[Function]}
                   type="button"
                 >
                   <span
-                    className="c20"
+                    className="c7"
                   >
                     Apple
                   </span>
                   <pixiv-icon
-                    class="c21"
+                    class="c8"
                     name="16/Menu"
                   />
                 </button>
@@ -725,7 +397,7 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
             </div>
           </div>
           <div
-            className="c22"
+            className="charcoal-modal-buttons"
           >
             <button
               className="charcoal-button"
@@ -745,8 +417,13 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
           </div>
         </div>
         <button
-          className="c23 c24 c25"
+          aria-label="Close"
+          className="charcoal-icon-button charcoal-modal-close-button"
+          data-active={false}
+          data-size="S"
+          data-variant="Default"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
             name="24/Close"
@@ -758,233 +435,20 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Modal BottomSheet 1`] = `
-.c10 {
-  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;
-}
-
-.c10:disabled,
-.c10[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c10:focus {
-  outline: none;
-}
-
-.c10::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c11 {
-  -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;
-}
-
-.c11:not(:disabled):not([aria-disabled]):hover,
-.c11[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c11:not(:disabled):not([aria-disabled]):active,
-.c11[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.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:disabled,
-.c11[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c1 {
-  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;
-}
-
-.c1:focus {
-  outline: none;
-}
-
+exports[`Storybook Tests react/Modal BottomSheet 1`] = `
 .c0 {
-  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);
-}
-
-.c12 {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-}
-
-.c12:not(:disabled):not([aria-disabled]):hover,
-.c12[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c3 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c2 {
-  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;
-}
-
-.c4 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c7 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c5 {
-  padding-bottom: 40px;
-}
-
-.c9 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c6 {
   display: grid;
   gap: 24px;
 }
 
-.c8 {
+.c1 {
   color: var(--charcoal-text2);
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
 }
 
-.c8::before {
+.c1::before {
   display: block;
   width: 0;
   height: 0;
@@ -992,7 +456,7 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
   margin-top: -4px;
 }
 
-.c8::after {
+.c1::after {
   display: block;
   width: 0;
   height: 0;
@@ -1000,29 +464,6 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
   margin-bottom: -4px;
 }
 
-@media (max-width:743px) {
-  .c1 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-    max-width: unset;
-    width: 100%;
-    border-radius: 0;
-    margin: auto 0 0 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c0 {
-    padding: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c2 {
-    height: 48px;
-  }
-}
-
 <div
   data-dark={false}
 >
@@ -1037,22 +478,23 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
       Open Modal
     </button>
     <div
-      className="c0"
+      className="charcoal-modal-background"
+      data-bottom-sheet={true}
       onClick={[Function]}
       onPointerDown={[Function]}
       style={
         Object {
           "backgroundColor": "rgba(0, 0, 0, 0)",
           "overflow": "hidden",
+          "zIndex": 10,
         }
       }
     >
       <div
-        className="c1"
-        onBlur={[Function]}
+        className="charcoal-modal-dialog"
+        data-bottom-sheet={true}
         onKeyDown={[Function]}
         role="dialog"
-        size="M"
         style={
           Object {
             "transform": " translateY(100%)",
@@ -1061,28 +503,29 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
         tabIndex={-1}
       >
         <div
-          className="c2"
+          className="charcoal-modal-header-root"
+          data-bottom-sheet={true}
         >
-          <h3
-            className="c3 c4"
+          <div
+            className="charcoal-modal-header-title"
           >
-            Title
-          </h3>
+            react/Title
+          </div>
         </div>
         <div
-          className="c5"
+          className="charcoal-modal-body"
         >
           <div
-            className="c6"
+            className="c0"
           >
             <div
-              className="c7 c8"
+              className="charcoal-modal-align c1"
             >
               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="c9"
+            className="charcoal-modal-buttons"
           >
             <button
               className="charcoal-button"
@@ -1095,8 +538,13 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
           </div>
         </div>
         <button
-          className="c10 c11 c12"
+          aria-label="Close"
+          className="charcoal-icon-button charcoal-modal-close-button"
+          data-active={false}
+          data-size="S"
+          data-variant="Default"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
             name="24/Close"
@@ -1108,408 +556,14 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Modal Default 1`] = `
-.c23 {
-  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;
-}
-
-.c23:disabled,
-.c23[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c23:focus {
-  outline: none;
-}
-
-.c23::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c12 {
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c12::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c12::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c14 {
-  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;
-}
-
-.c14::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c14::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c14:not(:disabled):not([aria-disabled]):hover,
-.c14[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c14:not(:disabled):not([aria-disabled]):active,
-.c14[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c14:not(:disabled):not([aria-disabled]):active,
-.c14[aria-disabled='false']:active,
-.c14:not(:disabled):not([aria-disabled]):focus,
-.c14[aria-disabled='false']:focus,
-.c14:not(:disabled):not([aria-disabled]):focus-visible,
-.c14[aria-disabled='false']:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c10 {
-  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;
-}
-
-.c10 > .c13 {
-  margin-left: auto;
-}
-
-.c17 {
-  display: inline-block;
-  width: 100%;
-}
-
-.c17:disabled,
-.c17[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c18 {
-  width: 100%;
-  margin-bottom: 8px;
-}
-
-.c19 {
-  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;
-}
-
-.c19:disabled,
-.c19[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.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:not(:disabled):not([aria-disabled]):hover,
-.c19[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c19:not(:disabled):not([aria-disabled]):active,
-.c19[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c20 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c21 {
-  color: var(--charcoal-text2);
-}
-
-.c24 {
-  -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;
-}
-
-.c24:not(:disabled):not([aria-disabled]):hover,
-.c24[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c24:not(:disabled):not([aria-disabled]):active,
-.c24[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c24:not(:disabled):not([aria-disabled]):focus,
-.c24[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c24:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c24[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c24:not(:disabled):not([aria-disabled]):focus-visible,
-.c24[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c24:disabled,
-.c24[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c1 {
-  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;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c0 {
-  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);
-}
-
-.c25 {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  color: var(--charcoal-text3);
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-}
-
-.c25:not(:disabled):not([aria-disabled]):hover,
-.c25[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c25:not(:disabled):not([aria-disabled]):active,
-.c25[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c3 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
+exports[`Storybook Tests react/Modal Default 1`] = `
 .c2 {
-  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;
-}
-
-.c4 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c7 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c5 {
-  padding-bottom: 40px;
-}
-
-.c22 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c11 {
-  margin-bottom: 8px;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
 }
 
-.c15 {
+.c3 {
   display: grid;
   grid-template-columns: 1fr;
   height: 40px;
@@ -1524,17 +578,17 @@ exports[`Storybook Tests Modal Default 1`] = `
   font-size: 14px;
 }
 
-.c15:not(:disabled):not([aria-disabled]):hover,
-.c15 [aria-disabled='false']:hover {
+.c3:not(:disabled):not([aria-disabled]):hover,
+.c3 [aria-disabled='false']:hover {
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c15:focus-within {
+.c3:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c16 {
+.c4 {
   border: none;
   box-sizing: border-box;
   outline: none;
@@ -1559,35 +613,119 @@ exports[`Storybook Tests Modal Default 1`] = `
   color: var(--charcoal-text2);
 }
 
-.c16::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
+.c4::-webkit-input-placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c4::-moz-placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c4:-ms-input-placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c4::placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c5 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
+  width: 100%;
+}
+
+.c5:disabled,
+.c5[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.c6 {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  -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;
+}
+
+.c6:disabled,
+.c6[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
-.c16::-moz-placeholder {
-  color: var(--charcoal-text3);
+.c6:not(:disabled):not([aria-disabled]):focus,
+.c6[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c16:-ms-input-placeholder {
-  color: var(--charcoal-text3);
+.c6:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c6[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }
 
-.c16::placeholder {
-  color: var(--charcoal-text3);
+.c6:not(:disabled):not([aria-disabled]):focus-visible,
+.c6[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c6 {
+.c6:not(:disabled):not([aria-disabled]):hover,
+.c6[aria-disabled='false']:hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c7 {
+  text-align: left;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c8 {
+  color: var(--charcoal-text2);
+}
+
+.c0 {
   display: grid;
   gap: 24px;
 }
 
-.c8 {
+.c1 {
   color: var(--charcoal-text2);
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
 }
 
-.c8::before {
+.c1::before {
   display: block;
   width: 0;
   height: 0;
@@ -1595,7 +733,7 @@ exports[`Storybook Tests Modal Default 1`] = `
   margin-top: -4px;
 }
 
-.c8::after {
+.c1::after {
   display: block;
   width: 0;
   height: 0;
@@ -1603,21 +741,6 @@ exports[`Storybook Tests Modal Default 1`] = `
   margin-bottom: -4px;
 }
 
-@media (max-width:743px) {
-  .c1 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-  }
-}
-
-@media (max-width:743px) {
-
-}
-
-@media (max-width:743px) {
-
-}
-
 <div
   data-dark={false}
 >
@@ -1632,137 +755,134 @@ exports[`Storybook Tests Modal Default 1`] = `
       Open Modal
     </button>
     <div
-      className="c0"
+      className="charcoal-modal-background"
+      data-bottom-sheet={false}
       onClick={[Function]}
       onPointerDown={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "zIndex": 10,
+        }
+      }
     >
       <div
-        className="c1"
-        onBlur={[Function]}
+        className="charcoal-modal-dialog"
+        data-bottom-sheet={false}
         onKeyDown={[Function]}
         role="dialog"
-        size="M"
         style={Object {}}
         tabIndex={-1}
       >
         <div
-          className="c2"
+          className="charcoal-modal-header-root"
+          data-bottom-sheet={false}
         >
-          <h3
-            className="c3 c4"
+          <div
+            className="charcoal-modal-header-title"
           >
-            Title
-          </h3>
+            react/Title
+          </div>
         </div>
         <div
-          className="c5"
+          className="charcoal-modal-body"
         >
           <div
-            className="c6"
+            className="c0"
           >
             <div
-              className="c7 c8"
+              className="charcoal-modal-align c1"
             >
               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="c7"
+              className="charcoal-modal-align"
             >
               <div
-                className="c9"
+                className="c2"
               >
                 <div
-                  className="c10 c11"
+                  className="charcoal-field-label-root"
                 >
                   <label
-                    className="c12"
+                    className="charcoal-field-label"
                     htmlFor="test-id"
                     id="test-id"
                   >
                     Name
                   </label>
                   <div
-                    className="c13 c14"
+                    className="charcoal-field-label-sub-label"
                   >
                     <span />
                   </div>
                 </div>
                 <div
-                  className="c15"
+                  className="c3"
                 >
                   <input
                     aria-labelledby="test-id"
-                    className="c16"
-                    disabled={false}
+                    className="c4"
                     id="test-id"
                     onChange={[Function]}
                     placeholder="Nagisa"
-                    readOnly={false}
-                    required={false}
                     type="text"
-                    value=""
                   />
                 </div>
               </div>
             </div>
             <div
-              className="c7"
+              className="charcoal-modal-align"
             >
               <div
-                className="c9"
+                className="c2"
               >
                 <div
-                  className="c10 c11"
+                  className="charcoal-field-label-root"
                 >
                   <label
-                    className="c12"
+                    className="charcoal-field-label"
                     htmlFor="test-id"
                     id="test-id"
                   >
                     Country
                   </label>
                   <div
-                    className="c13 c14"
+                    className="charcoal-field-label-sub-label"
                   >
                     <span />
                   </div>
                 </div>
                 <div
-                  className="c15"
+                  className="c3"
                 >
                   <input
                     aria-labelledby="test-id"
                     autoFocus={true}
-                    className="c16"
-                    disabled={false}
+                    className="c4"
                     id="test-id"
                     onChange={[Function]}
                     placeholder="Tokyo"
-                    readOnly={false}
-                    required={false}
                     type="text"
-                    value=""
                   />
                 </div>
               </div>
             </div>
             <div
-              className="c7"
+              className="charcoal-modal-align"
             >
               <div
-                className="c17"
+                className="c5"
               >
                 <div
-                  className="c10 c18"
+                  className="charcoal-field-label-root"
                 >
                   <label
-                    className="c12"
+                    className="charcoal-field-label"
                   >
                     Fruits
                   </label>
                   <div
-                    className="c13 c14"
+                    className="charcoal-field-label-sub-label"
                   >
                     <span />
                   </div>
@@ -1770,407 +890,107 @@ exports[`Storybook Tests Modal Default 1`] = `
                 <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="c19"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="c20"
-                  >
-                    Apple
-                  </span>
-                  <pixiv-icon
-                    class="c21"
-                    name="16/Menu"
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            className="c22"
-          >
-            <button
-              className="charcoal-button"
-              data-full-width={true}
-              data-variant="Primary"
-              onClick={[Function]}
-            >
-              Apply
-            </button>
-            <button
-              className="charcoal-button"
-              data-full-width={true}
-              onClick={[Function]}
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-        <button
-          className="c23 c24 c25"
-          onClick={[Function]}
-        >
-          <pixiv-icon
-            name="24/Close"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests Modal FullBottomSheet 1`] = `
-.c18 {
-  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;
-}
-
-.c18:disabled,
-.c18[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c18:focus {
-  outline: none;
-}
-
-.c18::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c12 {
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c12::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c12::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c14 {
-  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;
-}
-
-.c14::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c14::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c14:not(:disabled):not([aria-disabled]):hover,
-.c14[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c14:not(:disabled):not([aria-disabled]):active,
-.c14[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c14:not(:disabled):not([aria-disabled]):active,
-.c14[aria-disabled='false']:active,
-.c14:not(:disabled):not([aria-disabled]):focus,
-.c14[aria-disabled='false']:focus,
-.c14:not(:disabled):not([aria-disabled]):focus-visible,
-.c14[aria-disabled='false']:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c10 {
-  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;
-}
-
-.c10 > .c13 {
-  margin-left: auto;
-}
-
-.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 {
-  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;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c0 {
-  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);
-}
-
-.c3 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
+                    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="c6"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="c7"
+                  >
+                    Apple
+                  </span>
+                  <pixiv-icon
+                    class="c8"
+                    name="16/Menu"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            className="charcoal-modal-buttons"
+          >
+            <button
+              className="charcoal-button"
+              data-full-width={true}
+              data-variant="Primary"
+              onClick={[Function]}
+            >
+              Apply
+            </button>
+            <button
+              className="charcoal-button"
+              data-full-width={true}
+              onClick={[Function]}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+        <button
+          aria-label="Close"
+          className="charcoal-icon-button charcoal-modal-close-button"
+          data-active={false}
+          data-size="S"
+          data-variant="Default"
+          onClick={[Function]}
+          type="button"
+        >
+          <pixiv-icon
+            name="24/Close"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
 
+exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
 .c2 {
-  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;
-}
-
-.c4 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c7 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c5 {
-  padding-bottom: 40px;
-}
-
-.c17 {
   display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c11 {
-  margin-bottom: 8px;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
 }
 
-.c15 {
+.c3 {
   display: grid;
   grid-template-columns: 1fr;
   height: 40px;
@@ -2185,17 +1005,17 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
   font-size: 14px;
 }
 
-.c15:not(:disabled):not([aria-disabled]):hover,
-.c15 [aria-disabled='false']:hover {
+.c3:not(:disabled):not([aria-disabled]):hover,
+.c3 [aria-disabled='false']:hover {
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c15:focus-within {
+.c3:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c16 {
+.c4 {
   border: none;
   box-sizing: border-box;
   outline: none;
@@ -2220,35 +1040,35 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
   color: var(--charcoal-text2);
 }
 
-.c16::-webkit-input-placeholder {
+.c4::-webkit-input-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c16::-moz-placeholder {
+.c4::-moz-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c16:-ms-input-placeholder {
+.c4:-ms-input-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c16::placeholder {
+.c4::placeholder {
   color: var(--charcoal-text3);
 }
 
-.c6 {
+.c0 {
   display: grid;
   gap: 24px;
 }
 
-.c8 {
+.c1 {
   color: var(--charcoal-text2);
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
 }
 
-.c8::before {
+.c1::before {
   display: block;
   width: 0;
   height: 0;
@@ -2256,7 +1076,7 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
   margin-top: -4px;
 }
 
-.c8::after {
+.c1::after {
   display: block;
   width: 0;
   height: 0;
@@ -2264,30 +1084,6 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
   margin-bottom: -4px;
 }
 
-@media (max-width:743px) {
-  .c1 {
-    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) {
-  .c0 {
-    padding: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c2 {
-    height: 48px;
-  }
-}
-
 <div
   data-dark={false}
 >
@@ -2302,22 +1098,23 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
       Open Modal
     </button>
     <div
-      className="c0"
+      className="charcoal-modal-background"
+      data-bottom-sheet="full"
       onClick={[Function]}
       onPointerDown={[Function]}
       style={
         Object {
           "backgroundColor": "rgba(0, 0, 0, 0)",
           "overflow": "hidden",
+          "zIndex": 10,
         }
       }
     >
       <div
-        className="c1"
-        onBlur={[Function]}
+        className="charcoal-modal-dialog"
+        data-bottom-sheet="full"
         onKeyDown={[Function]}
         role="dialog"
-        size="M"
         style={
           Object {
             "transform": " translateY(100%)",
@@ -2326,108 +1123,101 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
         tabIndex={-1}
       >
         <div
-          className="c2"
+          className="charcoal-modal-header-root"
+          data-bottom-sheet="full"
         >
-          <h3
-            className="c3 c4"
+          <div
+            className="charcoal-modal-header-title"
           >
-            Title
-          </h3>
+            react/Title
+          </div>
         </div>
         <div
-          className="c5"
+          className="charcoal-modal-body"
         >
           <div
-            className="c6"
+            className="c0"
           >
             <div
-              className="c7 c8"
+              className="charcoal-modal-align c1"
             >
               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="c7"
+              className="charcoal-modal-align"
             >
               <div
-                className="c9"
+                className="c2"
               >
                 <div
-                  className="c10 c11"
+                  className="charcoal-field-label-root"
                 >
                   <label
-                    className="c12"
+                    className="charcoal-field-label"
                     htmlFor="test-id"
                     id="test-id"
                   >
                     Name
                   </label>
                   <div
-                    className="c13 c14"
+                    className="charcoal-field-label-sub-label"
                   >
                     <span />
                   </div>
                 </div>
                 <div
-                  className="c15"
+                  className="c3"
                 >
                   <input
                     aria-labelledby="test-id"
-                    className="c16"
-                    disabled={false}
+                    className="c4"
                     id="test-id"
                     onChange={[Function]}
                     placeholder="Nagisa"
-                    readOnly={false}
-                    required={false}
                     type="text"
-                    value=""
                   />
                 </div>
               </div>
             </div>
             <div
-              className="c7"
+              className="charcoal-modal-align"
             >
               <div
-                className="c9"
+                className="c2"
               >
                 <div
-                  className="c10 c11"
+                  className="charcoal-field-label-root"
                 >
                   <label
-                    className="c12"
+                    className="charcoal-field-label"
                     htmlFor="test-id"
                     id="test-id"
                   >
                     Country
                   </label>
                   <div
-                    className="c13 c14"
+                    className="charcoal-field-label-sub-label"
                   >
                     <span />
                   </div>
                 </div>
                 <div
-                  className="c15"
+                  className="c3"
                 >
                   <input
                     aria-labelledby="test-id"
-                    className="c16"
-                    disabled={false}
+                    className="c4"
                     id="test-id"
                     onChange={[Function]}
                     placeholder="Tokyo"
-                    readOnly={false}
-                    required={false}
                     type="text"
-                    value=""
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c17"
+            className="charcoal-modal-buttons"
           >
             <button
               className="charcoal-button"
@@ -2447,8 +1237,13 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
           </div>
         </div>
         <button
-          className="c18 c19 c20"
+          aria-label="Close"
+          className="charcoal-icon-button charcoal-modal-close-button"
+          data-active={false}
+          data-size="S"
+          data-variant="Default"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
             name="24/Close"
@@ -2460,109 +1255,17 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Modal InternalScroll 1`] = `
-.c1 {
-  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;
-}
-
-.c1:focus {
-  outline: none;
-}
-
+exports[`Storybook Tests react/Modal InternalScroll 1`] = `
 .c0 {
-  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);
-}
-
-.c3 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c2 {
-  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;
-}
-
-.c4 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c5 {
-  padding-bottom: 40px;
-}
-
-.c7 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c6 {
   overflow: auto;
   max-height: calc( 100vh - 184px - 56px );
 }
 
-.c8 {
+.c1 {
   position: relative;
 }
 
-.c8::before {
+.c1::before {
   content: '';
   pointer-events: none;
   border-top: 1px solid rgba(0,0,0,0.08);
@@ -2573,21 +1276,6 @@ exports[`Storybook Tests Modal InternalScroll 1`] = `
   height: 100%;
 }
 
-@media (max-width:743px) {
-  .c1 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-  }
-}
-
-@media (max-width:743px) {
-
-}
-
-@media (max-width:743px) {
-
-}
-
 <div
   data-dark={false}
 >
@@ -2602,34 +1290,39 @@ exports[`Storybook Tests Modal InternalScroll 1`] = `
       Open Modal
     </button>
     <div
-      className="c0"
+      className="charcoal-modal-background"
+      data-bottom-sheet={false}
       onClick={[Function]}
       onPointerDown={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "zIndex": 10,
+        }
+      }
     >
       <div
-        className="c1"
-        onBlur={[Function]}
+        className="charcoal-modal-dialog"
+        data-bottom-sheet={false}
         onKeyDown={[Function]}
         role="dialog"
-        size="M"
         style={Object {}}
         tabIndex={-1}
       >
         <div
-          className="c2"
+          className="charcoal-modal-header-root"
+          data-bottom-sheet={false}
         >
-          <h3
-            className="c3 c4"
+          <div
+            className="charcoal-modal-header-title"
           >
-            Title
-          </h3>
+            react/Title
+          </div>
         </div>
         <div
-          className="c5"
+          className="charcoal-modal-body"
         >
           <div
-            className="c6"
+            className="c0"
           >
             <div
               style={
@@ -2641,7 +1334,7 @@ exports[`Storybook Tests Modal InternalScroll 1`] = `
             />
           </div>
           <div
-            className="c7 c8"
+            className="charcoal-modal-buttons c1"
           >
             <button
               className="charcoal-button"
@@ -2658,117 +1351,20 @@ exports[`Storybook Tests Modal InternalScroll 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Modal NotDismmissableStory 1`] = `
-.c1 {
-  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;
-}
-
-.c1:focus {
-  outline: none;
-}
-
+exports[`Storybook Tests react/Modal NotDismmissableStory 1`] = `
 .c0 {
-  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);
-}
-
-.c3 {
-  margin: 0;
-  font-weight: inherit;
-  font-size: inherit;
-}
-
-.c2 {
-  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;
-}
-
-.c4 {
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c7 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c5 {
-  padding-bottom: 40px;
-}
-
-.c9 {
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c6 {
   display: grid;
   gap: 24px;
 }
 
-.c8 {
+.c1 {
   color: var(--charcoal-text2);
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
 }
 
-.c8::before {
+.c1::before {
   display: block;
   width: 0;
   height: 0;
@@ -2776,7 +1372,7 @@ exports[`Storybook Tests Modal NotDismmissableStory 1`] = `
   margin-top: -4px;
 }
 
-.c8::after {
+.c1::after {
   display: block;
   width: 0;
   height: 0;
@@ -2784,21 +1380,6 @@ exports[`Storybook Tests Modal NotDismmissableStory 1`] = `
   margin-bottom: -4px;
 }
 
-@media (max-width:743px) {
-  .c1 {
-    max-width: 440px;
-    width: calc(100% - 48px);
-  }
-}
-
-@media (max-width:743px) {
-
-}
-
-@media (max-width:743px) {
-
-}
-
 <div
   data-dark={false}
 >
@@ -2813,43 +1394,48 @@ exports[`Storybook Tests Modal NotDismmissableStory 1`] = `
       Open Modal
     </button>
     <div
-      className="c0"
+      className="charcoal-modal-background"
+      data-bottom-sheet={false}
       onClick={[Function]}
       onPointerDown={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "zIndex": 10,
+        }
+      }
     >
       <div
-        className="c1"
-        onBlur={[Function]}
+        className="charcoal-modal-dialog"
+        data-bottom-sheet={false}
         onKeyDown={[Function]}
         role="dialog"
-        size="M"
         style={Object {}}
         tabIndex={-1}
       >
         <div
-          className="c2"
+          className="charcoal-modal-header-root"
+          data-bottom-sheet={false}
         >
-          <h3
-            className="c3 c4"
+          <div
+            className="charcoal-modal-header-title"
           >
-            Title
-          </h3>
+            react/Title
+          </div>
         </div>
         <div
-          className="c5"
+          className="charcoal-modal-body"
         >
           <div
-            className="c6"
+            className="c0"
           >
             <div
-              className="c7 c8"
+              className="charcoal-modal-align c1"
             >
               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="c9"
+            className="charcoal-modal-buttons"
           >
             <button
               className="charcoal-button"