diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
index 1759a7e92e5d75..336d5ec5d544ff 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
@@ -6,7 +6,7 @@ export default function UnstyledTextareaIntroduction() {
   return (
     <React.Fragment>
       <TextareaAutosize
-        className="CustomTextareaIntrocudtion"
+        className="CustomTextareaIntroduction"
         aria-label="empty textarea"
         placeholder="Empty"
       />
@@ -52,7 +52,7 @@ function Styles() {
   return (
     <style>
       {`
-      .CustomTextareaIntrocudtion {
+      .CustomTextareaIntroduction {
         box-sizing: border-box;
         width: 320px;
         font-family: 'IBM Plex Sans', sans-serif;
@@ -67,18 +67,18 @@ function Styles() {
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
       }
 
-     .CustomTextareaIntrocudtion:hover {
+     .CustomTextareaIntroduction:hover {
         border-color: ${cyan[400]};
       }
 
-     .CustomTextareaIntrocudtion:focus {
+     .CustomTextareaIntroduction:focus {
         border-color: ${cyan[400]};
         box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         outline: none;
       }
 
       // firefox
-      .CustomTextareaIntrocudtion:focus-visible {
+      .CustomTextareaIntroduction:focus-visible {
         outline: 0;
       }
     `}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
index 1759a7e92e5d75..336d5ec5d544ff 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
@@ -6,7 +6,7 @@ export default function UnstyledTextareaIntroduction() {
   return (
     <React.Fragment>
       <TextareaAutosize
-        className="CustomTextareaIntrocudtion"
+        className="CustomTextareaIntroduction"
         aria-label="empty textarea"
         placeholder="Empty"
       />
@@ -52,7 +52,7 @@ function Styles() {
   return (
     <style>
       {`
-      .CustomTextareaIntrocudtion {
+      .CustomTextareaIntroduction {
         box-sizing: border-box;
         width: 320px;
         font-family: 'IBM Plex Sans', sans-serif;
@@ -67,18 +67,18 @@ function Styles() {
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
       }
 
-     .CustomTextareaIntrocudtion:hover {
+     .CustomTextareaIntroduction:hover {
         border-color: ${cyan[400]};
       }
 
-     .CustomTextareaIntrocudtion:focus {
+     .CustomTextareaIntroduction:focus {
         border-color: ${cyan[400]};
         box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         outline: none;
       }
 
       // firefox
-      .CustomTextareaIntrocudtion:focus-visible {
+      .CustomTextareaIntroduction:focus-visible {
         outline: 0;
       }
     `}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview
index cfe1b2d8d5f6d1..b675736fe081d4 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview
@@ -1,6 +1,6 @@
 <React.Fragment>
   <TextareaAutosize
-    className="CustomTextareaIntrocudtion"
+    className="CustomTextareaIntroduction"
     aria-label="empty textarea"
     placeholder="Empty"
   />