From 25723059d387acb489548272a9ae4f1ecbd1558a Mon Sep 17 00:00:00 2001
From: toshusai <toshusai.net@gmail.com>
Date: Fri, 31 May 2024 12:35:17 +0900
Subject: [PATCH] feat: change styled to css

---
 .../__snapshots__/index.story.storyshot       |  83 +-
 .../__snapshots__/TextArea.story.storyshot    | 926 +++---------------
 .../react/src/components/TextArea/index.css   |  73 ++
 .../react/src/components/TextArea/index.tsx   | 123 +--
 4 files changed, 243 insertions(+), 962 deletions(-)
 create mode 100644 packages/react/src/components/TextArea/index.css

diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
index 53253567e..24b47a3b3 100644
--- a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -1069,73 +1069,6 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
   color: var(--charcoal-text2);
 }
 
-.c4 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c5 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c5:not([aria-disabled]):hover,
-.c5 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c5:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c6 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c6::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c6::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c6:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c6::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
@@ -1331,7 +1264,8 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
               </div>
             </div>
             <div
-              className="c4"
+              aria-disabled={false}
+              className="charcoal-text-area-root"
             >
               <div
                 className="charcoal-field-label-root"
@@ -1355,13 +1289,20 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
                 </div>
               </div>
               <div
-                className="c5"
-                rows={4}
+                aria-invalid={false}
+                className="charcoal-text-area-container"
+                style={
+                  Object {
+                    "--charcoal-text-area-rows": "4",
+                  }
+                }
               >
                 <textarea
                   aria-describedby="test-id"
                   aria-labelledby="test-id"
-                  className="c6"
+                  className="charcoal-text-area-textarea"
+                  data-no-bottom-padding={false}
+                  disabled={false}
                   id="test-id"
                   onChange={[Function]}
                   placeholder="placeholder"
diff --git a/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot b/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
index e27e7c3df..26d3bb304 100644
--- a/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
+++ b/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
@@ -1,78 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storybook Tests TextArea AssistiveText 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -105,13 +39,20 @@ exports[`Storybook Tests TextArea AssistiveText 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={4}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-describedby="test-id"
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={false}
         id="test-id"
         onChange={[Function]}
         rows={4}
@@ -129,78 +70,12 @@ exports[`Storybook Tests TextArea AssistiveText 1`] = `
 `;
 
 exports[`Storybook Tests TextArea AutoHeight 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -233,12 +108,19 @@ exports[`Storybook Tests TextArea AutoHeight 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={4}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={false}
         id="test-id"
         onChange={[Function]}
         rows={4}
@@ -249,78 +131,12 @@ exports[`Storybook Tests TextArea AutoHeight 1`] = `
 `;
 
 exports[`Storybook Tests TextArea Default 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -360,13 +176,20 @@ exports[`Storybook Tests TextArea Default 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={4}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-invalid={false}
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={false}
         id="test-id"
         onChange={[Function]}
         placeholder="Text Area"
@@ -379,79 +202,12 @@ exports[`Storybook Tests TextArea Default 1`] = `
 `;
 
 exports[`Storybook Tests TextArea Disabled 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  opacity: 0.32;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={true}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -485,12 +241,19 @@ exports[`Storybook Tests TextArea Disabled 1`] = `
     </div>
     <div
       aria-disabled="true"
-      className="c1"
-      rows={4}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={true}
         id="test-id"
         onChange={[Function]}
         rows={4}
@@ -501,79 +264,12 @@ exports[`Storybook Tests TextArea Disabled 1`] = `
 `;
 
 exports[`Storybook Tests TextArea Invalid 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -606,14 +302,21 @@ exports[`Storybook Tests TextArea Invalid 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={4}
+      aria-invalid={true}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-describedby="test-id"
         aria-invalid={true}
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={false}
         id="test-id"
         onChange={[Function]}
         rows={4}
@@ -631,78 +334,12 @@ exports[`Storybook Tests TextArea Invalid 1`] = `
 `;
 
 exports[`Storybook Tests TextArea Label 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -721,12 +358,19 @@ exports[`Storybook Tests TextArea Label 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={4}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={false}
         id="test-id"
         onChange={[Function]}
         rows={4}
@@ -737,78 +381,12 @@ exports[`Storybook Tests TextArea Label 1`] = `
 `;
 
 exports[`Storybook Tests TextArea Placeholder 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -841,12 +419,19 @@ exports[`Storybook Tests TextArea Placeholder 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={4}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={false}
         id="test-id"
         onChange={[Function]}
         placeholder="Placeholder"
@@ -858,78 +443,12 @@ exports[`Storybook Tests TextArea Placeholder 1`] = `
 `;
 
 exports[`Storybook Tests TextArea ReadOnly 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -962,12 +481,19 @@ exports[`Storybook Tests TextArea ReadOnly 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={4}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={false}
         id="test-id"
         onChange={[Function]}
         readOnly={true}
@@ -980,78 +506,12 @@ exports[`Storybook Tests TextArea ReadOnly 1`] = `
 `;
 
 exports[`Storybook Tests TextArea Required 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -1089,12 +549,19 @@ exports[`Storybook Tests TextArea Required 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={4}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={false}
         id="test-id"
         onChange={[Function]}
         rows={4}
@@ -1105,87 +572,12 @@ exports[`Storybook Tests TextArea Required 1`] = `
 `;
 
 exports[`Storybook Tests TextArea ShowCount 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 5 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875) 0;
-  height: calc(22px / 0.875 * 4 + 9px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c3 {
-  position: absolute;
-  bottom: 9px;
-  right: 8px;
-  line-height: 22px;
-  font-size: 14px;
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -1218,19 +610,26 @@ exports[`Storybook Tests TextArea ShowCount 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={5}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "5",
+        }
+      }
     >
       <textarea
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={true}
+        disabled={false}
         id="test-id"
         maxLength={100}
         onChange={[Function]}
         rows={4}
       />
       <span
-        className="c3"
+        className="charcoal-text-area-counter"
       >
         0/100
       </span>
@@ -1240,78 +639,12 @@ exports[`Storybook Tests TextArea ShowCount 1`] = `
 `;
 
 exports[`Storybook Tests TextArea SubLabel 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-}
-
-.c1 {
-  position: relative;
-  overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  height: calc(22px * 4 + 18px);
-}
-
-.c1:not([aria-disabled]):hover,
-.c1 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  -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);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * 4 + 20px);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-}
-
-.c2::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c2::placeholder {
-  color: var(--charcoal-text3);
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-area-root"
   >
     <div
       className="charcoal-field-label-root"
@@ -1336,12 +669,19 @@ exports[`Storybook Tests TextArea SubLabel 1`] = `
       </div>
     </div>
     <div
-      className="c1"
-      rows={4}
+      aria-invalid={false}
+      className="charcoal-text-area-container"
+      style={
+        Object {
+          "--charcoal-text-area-rows": "4",
+        }
+      }
     >
       <textarea
         aria-labelledby="test-id"
-        className="c2"
+        className="charcoal-text-area-textarea"
+        data-no-bottom-padding={false}
+        disabled={false}
         id="test-id"
         onChange={[Function]}
         rows={4}
diff --git a/packages/react/src/components/TextArea/index.css b/packages/react/src/components/TextArea/index.css
new file mode 100644
index 000000000..2a06a9a53
--- /dev/null
+++ b/packages/react/src/components/TextArea/index.css
@@ -0,0 +1,73 @@
+.charcoal-text-area-root {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
+}
+
+.charcoal-text-area-root[aria-disabled='true'] {
+  opacity: 0.32;
+}
+
+.charcoal-text-area-container {
+  position: relative;
+  overflow: hidden;
+
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+  height: calc(22px * var(--charcoal-text-area-rows) + 18px);
+}
+
+.charcoal-text-area-container[aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-text-area-container:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-text-area-container:not(aria-disabled='true'):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.charcoal-text-area-container[aria-invalid='true']:focus-within {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-text-area-textarea {
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  color: inherit;
+  box-sizing: border-box;
+
+  /* Prevent zooming for iOS Safari */
+  transform-origin: top left;
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding: calc(9px / 0.875) calc(8px / 0.875) 0;
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+
+  background: none;
+}
+
+.charcoal-text-area-textarea::placeholder {
+  color: var(--charcoal-text3);
+}
+
+.charcoal-text-area-counter {
+  position: absolute;
+  bottom: 9px;
+  right: 8px;
+
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
+}
diff --git a/packages/react/src/components/TextArea/index.tsx b/packages/react/src/components/TextArea/index.tsx
index 52dfb5287..c436f6664 100644
--- a/packages/react/src/components/TextArea/index.tsx
+++ b/packages/react/src/components/TextArea/index.tsx
@@ -1,11 +1,13 @@
+import './index.css'
+
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
-import styled, { css } from 'styled-components'
 import FieldLabel from '../FieldLabel'
 import { countCodePointsInString, mergeRefs } from '../../_lib'
 import { useFocusWithClick } from '../TextField/useFocusWithClick'
 import { useId } from '@react-aria/utils'
 import { AssistiveText } from '../TextField/AssistiveText'
+import { useClassNames } from '../../_lib/useClassNames'
 
 export type TextAreaProps = {
   value?: string
@@ -42,6 +44,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       maxLength,
       autoHeight = false,
       rows: initialRows = 4,
+      invalid,
       getCount = countCodePointsInString,
       ...props
     },
@@ -49,7 +52,6 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   ) {
     const { visuallyHiddenProps } = useVisuallyHidden()
     const textareaRef = useRef<HTMLTextAreaElement>(null)
-    const textAreaRef = useRef<HTMLTextAreaElement>(null)
     const [count, setCount] = useState(getCount(value ?? ''))
     const [rows, setRows] = useState(initialRows)
 
@@ -92,17 +94,19 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     const containerRef = useRef(null)
 
-    useFocusWithClick(containerRef, textAreaRef)
+    useFocusWithClick(containerRef, textareaRef)
 
     const textAreaId = useId(props.id)
     const describedbyId = useId()
     const labelledbyId = useId()
 
+    const classNames = useClassNames('charcoal-text-area-root', className)
+
     const showAssistiveText =
       assistiveText != null && assistiveText.length !== 0
 
     return (
-      <TextFieldRoot className={className} isDisabled={disabled}>
+      <div className={classNames} aria-disabled={disabled}>
         <FieldLabel
           htmlFor={textAreaId}
           id={labelledbyId}
@@ -112,121 +116,44 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           subLabel={subLabel}
           {...(!showLabel ? visuallyHiddenProps : {})}
         />
-        <StyledTextareaContainer
+        <div
+          className="charcoal-text-area-container"
           aria-disabled={disabled === true ? 'true' : undefined}
-          invalid={props.invalid === true}
+          aria-invalid={invalid === true}
           ref={containerRef}
-          rows={showCount ? rows + 1 : rows}
+          style={{
+            '--charcoal-text-area-rows': `${showCount ? rows + 1 : rows}`,
+          }}
         >
-          <StyledTextarea
+          <textarea
+            className="charcoal-text-area-textarea"
             aria-describedby={showAssistiveText ? describedbyId : undefined}
-            aria-invalid={props.invalid}
+            aria-invalid={invalid}
             aria-labelledby={labelledbyId}
             id={textAreaId}
             maxLength={maxLength}
-            noBottomPadding={showCount}
+            data-no-bottom-padding={showCount}
             onChange={handleChange}
-            ref={mergeRefs(forwardRef, textAreaRef)}
+            ref={mergeRefs(forwardRef, textareaRef)}
             rows={rows}
             value={value}
+            disabled={disabled}
             {...props}
           />
           {showCount && (
-            <MultiLineCounter>
+            <span className="charcoal-text-area-counter">
               {maxLength !== undefined ? `${count}/${maxLength}` : count}
-            </MultiLineCounter>
+            </span>
           )}
-        </StyledTextareaContainer>
+        </div>
         {showAssistiveText && (
-          <AssistiveText
-            data-invalid={props.invalid === true}
-            id={describedbyId}
-          >
+          <AssistiveText data-invalid={invalid === true} id={describedbyId}>
             {assistiveText}
           </AssistiveText>
         )}
-      </TextFieldRoot>
+      </div>
     )
   }
 )
 
 export default TextArea
-
-const TextFieldRoot = styled.div<{ isDisabled: boolean }>`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-
-  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
-`
-
-const StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`
-  position: relative;
-  overflow: hidden;
-
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  transition: 0.2s background-color, 0.2s box-shadow;
-
-  ${({ rows }) => css`
-    height: calc(22px * ${rows} + 18px);
-  `};
-
-  :not([aria-disabled]):hover,
-  [aria-disabled='false']:hover {
-    background-color: var(--charcoal-surface3-hover);
-  }
-  :focus-within {
-    outline: none;
-    box-shadow: 0 0 0 4px
-      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};
-  }
-
-  ${(p) =>
-    p.invalid &&
-    css`
-      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-    `}
-`
-
-const StyledTextarea = styled.textarea<{ noBottomPadding: boolean }>`
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-
-  /* Prevent zooming for iOS Safari */
-  transform-origin: top left;
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875)
-    ${(p) => (p.noBottomPadding ? 0 : '')};
-
-  ${({ rows = 1, noBottomPadding }) => css`
-    height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);
-  `};
-
-  /* Display box-shadow for iOS Safari */
-  appearance: none;
-
-  background: none;
-
-  &::placeholder {
-    color: var(--charcoal-text3);
-  }
-`
-
-const MultiLineCounter = styled.span`
-  position: absolute;
-  bottom: 9px;
-  right: 8px;
-
-  line-height: 22px;
-  font-size: 14px;
-  color: var(--charcoal-text3);
-`