From 634454fc1bc22de3f1a0d6798d73a9d95eb4860f Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Thu, 14 Mar 2024 14:25:19 +0800
Subject: [PATCH] Update docs

---
 .../textarea-autosize/EmptyTextarea.js        | 61 -------------
 .../textarea-autosize/EmptyTextarea.tsx       | 61 -------------
 .../EmptyTextarea.tsx.preview                 |  1 -
 .../UnstyledTextareaIntroduction/css/index.js | 87 -------------------
 .../css/index.tsx                             | 87 -------------------
 .../css/index.tsx.preview                     |  8 --
 .../system/index.js                           | 60 -------------
 .../system/index.tsx                          | 60 -------------
 .../system/index.tsx.preview                  |  1 -
 .../tailwind/index.js                         | 23 -----
 .../tailwind/index.tsx                        | 23 -----
 .../tailwind/index.tsx.preview                |  5 --
 .../textarea-autosize/textarea-autosize.md    | 47 ----------
 .../MaxHeightTextarea.js                      |  4 +-
 .../MaxHeightTextarea.tsx                     |  4 +-
 .../MaxHeightTextarea.tsx.preview             |  0
 .../MinHeightTextarea.js                      |  4 +-
 .../MinHeightTextarea.tsx                     |  4 +-
 .../MinHeightTextarea.tsx.preview             |  0
 .../UnstyledTextarea/css/index.js             |  6 +-
 .../UnstyledTextarea/css/index.tsx            |  6 +-
 .../UnstyledTextarea/css/index.tsx.preview    |  2 +-
 .../UnstyledTextarea/system/index.js          |  4 +-
 .../UnstyledTextarea/system/index.tsx         |  4 +-
 .../UnstyledTextarea/system/index.tsx.preview |  0
 .../UnstyledTextarea/tailwind/index.js        |  6 +-
 .../UnstyledTextarea/tailwind/index.tsx       |  6 +-
 .../tailwind/index.tsx.preview                |  2 +-
 .../data/base/components/textarea/textarea.md | 27 +++++-
 docs/data/base/pagesApi.js                    |  2 +-
 docs/pages/base-ui/api/textarea-autosize.json |  2 +-
 .../[docsTab]/index.js                        | 40 ---------
 .../base-ui/react-textarea-autosize/index.js  | 13 ---
 .../base-ui/react-textarea/[docsTab]/index.js | 18 +++-
 34 files changed, 70 insertions(+), 608 deletions(-)
 delete mode 100644 docs/data/base/components/textarea-autosize/EmptyTextarea.js
 delete mode 100644 docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
 delete mode 100644 docs/data/base/components/textarea-autosize/EmptyTextarea.tsx.preview
 delete mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
 delete mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
 delete mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview
 delete mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
 delete mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
 delete mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx.preview
 delete mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
 delete mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
 delete mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
 delete mode 100644 docs/data/base/components/textarea-autosize/textarea-autosize.md
 rename docs/data/base/components/{textarea-autosize => textarea}/MaxHeightTextarea.js (92%)
 rename docs/data/base/components/{textarea-autosize => textarea}/MaxHeightTextarea.tsx (92%)
 rename docs/data/base/components/{textarea-autosize => textarea}/MaxHeightTextarea.tsx.preview (100%)
 rename docs/data/base/components/{textarea-autosize => textarea}/MinHeightTextarea.js (91%)
 rename docs/data/base/components/{textarea-autosize => textarea}/MinHeightTextarea.tsx (91%)
 rename docs/data/base/components/{textarea-autosize => textarea}/MinHeightTextarea.tsx.preview (100%)
 rename docs/data/base/components/{textarea-autosize => textarea}/UnstyledTextarea/css/index.js (92%)
 rename docs/data/base/components/{textarea-autosize => textarea}/UnstyledTextarea/css/index.tsx (92%)
 rename docs/data/base/components/{textarea-autosize => textarea}/UnstyledTextarea/css/index.tsx.preview (87%)
 rename docs/data/base/components/{textarea-autosize => textarea}/UnstyledTextarea/system/index.js (91%)
 rename docs/data/base/components/{textarea-autosize => textarea}/UnstyledTextarea/system/index.tsx (91%)
 rename docs/data/base/components/{textarea-autosize => textarea}/UnstyledTextarea/system/index.tsx.preview (100%)
 rename docs/data/base/components/{textarea-autosize => textarea}/UnstyledTextarea/tailwind/index.js (86%)
 rename docs/data/base/components/{textarea-autosize => textarea}/UnstyledTextarea/tailwind/index.tsx (86%)
 rename docs/data/base/components/{textarea-autosize => textarea}/UnstyledTextarea/tailwind/index.tsx.preview (96%)
 delete mode 100644 docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js
 delete mode 100644 docs/pages/base-ui/react-textarea-autosize/index.js

diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.js b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
deleted file mode 100644
index 6f4adc994..000000000
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
-import { styled } from '@mui/system';
-
-export default function EmptyTextarea() {
-  const blue = {
-    100: '#DAECFF',
-    200: '#b6daff',
-    400: '#3399FF',
-    500: '#007FFF',
-    600: '#0072E5',
-    900: '#003A75',
-  };
-
-  const grey = {
-    50: '#F3F6F9',
-    100: '#E5EAF2',
-    200: '#DAE2ED',
-    300: '#C7D0DD',
-    400: '#B0B8C4',
-    500: '#9DA8B7',
-    600: '#6B7A90',
-    700: '#434D5B',
-    800: '#303740',
-    900: '#1C2025',
-  };
-
-  const Textarea = styled(BaseTextareaAutosize)(
-    ({ theme }) => `
-    box-sizing: border-box;
-    width: 320px;
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
-    padding: 8px 12px;
-    border-radius: 8px;
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-    &:hover {
-      border-color: ${blue[400]};
-    }
-
-    &:focus {
-      outline: 0;
-      border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
-    }
-
-    // firefox
-    &:focus-visible {
-      outline: 0;
-    }
-  `,
-  );
-
-  return <Textarea aria-label="empty textarea" placeholder="Empty" />;
-}
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
deleted file mode 100644
index 6f4adc994..000000000
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
-import { styled } from '@mui/system';
-
-export default function EmptyTextarea() {
-  const blue = {
-    100: '#DAECFF',
-    200: '#b6daff',
-    400: '#3399FF',
-    500: '#007FFF',
-    600: '#0072E5',
-    900: '#003A75',
-  };
-
-  const grey = {
-    50: '#F3F6F9',
-    100: '#E5EAF2',
-    200: '#DAE2ED',
-    300: '#C7D0DD',
-    400: '#B0B8C4',
-    500: '#9DA8B7',
-    600: '#6B7A90',
-    700: '#434D5B',
-    800: '#303740',
-    900: '#1C2025',
-  };
-
-  const Textarea = styled(BaseTextareaAutosize)(
-    ({ theme }) => `
-    box-sizing: border-box;
-    width: 320px;
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
-    padding: 8px 12px;
-    border-radius: 8px;
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-    &:hover {
-      border-color: ${blue[400]};
-    }
-
-    &:focus {
-      outline: 0;
-      border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
-    }
-
-    // firefox
-    &:focus-visible {
-      outline: 0;
-    }
-  `,
-  );
-
-  return <Textarea aria-label="empty textarea" placeholder="Empty" />;
-}
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx.preview b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx.preview
deleted file mode 100644
index 07871f28f..000000000
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-<Textarea aria-label="empty textarea" placeholder="Empty" />
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
deleted file mode 100644
index 1759a7e92..000000000
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
-import { useTheme } from '@mui/system';
-
-export default function UnstyledTextareaIntroduction() {
-  return (
-    <React.Fragment>
-      <TextareaAutosize
-        className="CustomTextareaIntrocudtion"
-        aria-label="empty textarea"
-        placeholder="Empty"
-      />
-      <Styles />
-    </React.Fragment>
-  );
-}
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .CustomTextareaIntrocudtion {
-        box-sizing: border-box;
-        width: 320px;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 0.875rem;
-        font-weight: 400;
-        line-height: 1.5;
-        padding: 12px;
-        border-radius: 12px 12px 0 12px;
-        color: ${isDarkMode ? grey[300] : grey[900]};
-        background: ${isDarkMode ? grey[900] : '#fff'};
-        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
-      }
-
-     .CustomTextareaIntrocudtion:hover {
-        border-color: ${cyan[400]};
-      }
-
-     .CustomTextareaIntrocudtion:focus {
-        border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
-        outline: none;
-      }
-
-      // firefox
-      .CustomTextareaIntrocudtion:focus-visible {
-        outline: 0;
-      }
-    `}
-    </style>
-  );
-}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
deleted file mode 100644
index 1759a7e92..000000000
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
-import { useTheme } from '@mui/system';
-
-export default function UnstyledTextareaIntroduction() {
-  return (
-    <React.Fragment>
-      <TextareaAutosize
-        className="CustomTextareaIntrocudtion"
-        aria-label="empty textarea"
-        placeholder="Empty"
-      />
-      <Styles />
-    </React.Fragment>
-  );
-}
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .CustomTextareaIntrocudtion {
-        box-sizing: border-box;
-        width: 320px;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 0.875rem;
-        font-weight: 400;
-        line-height: 1.5;
-        padding: 12px;
-        border-radius: 12px 12px 0 12px;
-        color: ${isDarkMode ? grey[300] : grey[900]};
-        background: ${isDarkMode ? grey[900] : '#fff'};
-        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
-      }
-
-     .CustomTextareaIntrocudtion:hover {
-        border-color: ${cyan[400]};
-      }
-
-     .CustomTextareaIntrocudtion:focus {
-        border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
-        outline: none;
-      }
-
-      // firefox
-      .CustomTextareaIntrocudtion:focus-visible {
-        outline: 0;
-      }
-    `}
-    </style>
-  );
-}
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
deleted file mode 100644
index cfe1b2d8d..000000000
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-<React.Fragment>
-  <TextareaAutosize
-    className="CustomTextareaIntrocudtion"
-    aria-label="empty textarea"
-    placeholder="Empty"
-  />
-  <Styles />
-</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
deleted file mode 100644
index da4cc7817..000000000
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
-import { styled } from '@mui/system';
-
-export default function UnstyledTextareaIntroduction() {
-  return <TextareaAutosize aria-label="empty textarea" placeholder="Empty" />;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#b6daff',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const TextareaAutosize = styled(BaseTextareaAutosize)(
-  ({ theme }) => `
-  box-sizing: border-box;
-  width: 320px;
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-  &:hover {
-    border-color: ${blue[400]};
-  }
-
-  &:focus {
-    border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
-  }
-
-  // firefox
-  &:focus-visible {
-    outline: 0;
-  }
-`,
-);
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
deleted file mode 100644
index da4cc7817..000000000
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
-import { styled } from '@mui/system';
-
-export default function UnstyledTextareaIntroduction() {
-  return <TextareaAutosize aria-label="empty textarea" placeholder="Empty" />;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#b6daff',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const TextareaAutosize = styled(BaseTextareaAutosize)(
-  ({ theme }) => `
-  box-sizing: border-box;
-  width: 320px;
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-  &:hover {
-    border-color: ${blue[400]};
-  }
-
-  &:focus {
-    border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
-  }
-
-  // firefox
-  &:focus-visible {
-    outline: 0;
-  }
-`,
-);
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx.preview
deleted file mode 100644
index 5ffb10188..000000000
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-<TextareaAutosize aria-label="empty textarea" placeholder="Empty" />
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
deleted file mode 100644
index f0fc8da86..000000000
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
-import { useTheme } from '@mui/system';
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-export default function UnstyledTextareaIntroduction() {
-  // Replace this with your app logic for determining dark modes
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
-      <TextareaAutosize
-        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
-        aria-label="empty textarea"
-        placeholder="Empty"
-      />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
deleted file mode 100644
index f0fc8da86..000000000
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
-import { useTheme } from '@mui/system';
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-export default function UnstyledTextareaIntroduction() {
-  // Replace this with your app logic for determining dark modes
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
-      <TextareaAutosize
-        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
-        aria-label="empty textarea"
-        placeholder="Empty"
-      />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
deleted file mode 100644
index 94f09f2d6..000000000
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-<TextareaAutosize
-  className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
-  aria-label="empty textarea"
-  placeholder="Empty"
-/>
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md
deleted file mode 100644
index cc8f6e790..000000000
--- a/docs/data/base/components/textarea-autosize/textarea-autosize.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-productId: base-ui
-title: Textarea Autosize React component
-components: TextareaAutosize
-githubLabel: 'component: TextareaAutosize'
----
-
-# Textarea Autosize
-
-<p class="description">The Textarea Autosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.</p>
-
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
-{{"component": "modules/components/ComponentPageTabs.js"}}
-
-## Introduction
-
-Textarea Autosize is a utility component that replaces the native `<textarea>` HTML.
-
-The height of the Textarea Autosize component automatically adjusts as a response to keyboard inputs and window resizing events.
-
-{{"demo": "UnstyledTextareaIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
-
-## Component
-
-```jsx
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
-```
-
-Textarea Autosize behaves similarly to the native HTML`<textarea>`.
-By default, an empty Textarea Autosize component renders as a single row, as shown in the following demo:
-
-{{"demo": "UnstyledTextarea", "defaultCodeOpen": false}}
-
-## Customization
-
-### Minimum height
-
-Use the `minRows` prop to define the minimum height of the component:
-
-{{"demo": "MinHeightTextarea.js"}}
-
-### Maximum height
-
-Use the `maxRows` prop to define the maximum height of the component:
-
-{{"demo": "MaxHeightTextarea.js"}}
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js b/docs/data/base/components/textarea/MaxHeightTextarea.js
similarity index 92%
rename from docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
rename to docs/data/base/components/textarea/MaxHeightTextarea.js
index 94b8511fa..783efe7ef 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
+++ b/docs/data/base/components/textarea/MaxHeightTextarea.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea as BaseTextarea } from '@mui/base/Textarea';
 import { styled } from '@mui/system';
 
 export default function MaxHeightTextarea() {
@@ -25,7 +25,7 @@ export default function MaxHeightTextarea() {
     900: '#1C2025',
   };
 
-  const Textarea = styled(BaseTextareaAutosize)(
+  const Textarea = styled(BaseTextarea)(
     ({ theme }) => `
     box-sizing: border-box;
     width: 320px;
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx b/docs/data/base/components/textarea/MaxHeightTextarea.tsx
similarity index 92%
rename from docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
rename to docs/data/base/components/textarea/MaxHeightTextarea.tsx
index 94b8511fa..783efe7ef 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
+++ b/docs/data/base/components/textarea/MaxHeightTextarea.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea as BaseTextarea } from '@mui/base/Textarea';
 import { styled } from '@mui/system';
 
 export default function MaxHeightTextarea() {
@@ -25,7 +25,7 @@ export default function MaxHeightTextarea() {
     900: '#1C2025',
   };
 
-  const Textarea = styled(BaseTextareaAutosize)(
+  const Textarea = styled(BaseTextarea)(
     ({ theme }) => `
     box-sizing: border-box;
     width: 320px;
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx.preview b/docs/data/base/components/textarea/MaxHeightTextarea.tsx.preview
similarity index 100%
rename from docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx.preview
rename to docs/data/base/components/textarea/MaxHeightTextarea.tsx.preview
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js b/docs/data/base/components/textarea/MinHeightTextarea.js
similarity index 91%
rename from docs/data/base/components/textarea-autosize/MinHeightTextarea.js
rename to docs/data/base/components/textarea/MinHeightTextarea.js
index ed21fd8b4..e178927c4 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
+++ b/docs/data/base/components/textarea/MinHeightTextarea.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea as BaseTextarea } from '@mui/base/Textarea';
 import { styled } from '@mui/system';
 
 export default function MinHeightTextarea() {
@@ -25,7 +25,7 @@ export default function MinHeightTextarea() {
     900: '#1C2025',
   };
 
-  const Textarea = styled(BaseTextareaAutosize)(
+  const Textarea = styled(BaseTextarea)(
     ({ theme }) => `
     box-sizing: border-box;
     width: 320px;
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx b/docs/data/base/components/textarea/MinHeightTextarea.tsx
similarity index 91%
rename from docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
rename to docs/data/base/components/textarea/MinHeightTextarea.tsx
index ed21fd8b4..e178927c4 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
+++ b/docs/data/base/components/textarea/MinHeightTextarea.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea as BaseTextarea } from '@mui/base/Textarea';
 import { styled } from '@mui/system';
 
 export default function MinHeightTextarea() {
@@ -25,7 +25,7 @@ export default function MinHeightTextarea() {
     900: '#1C2025',
   };
 
-  const Textarea = styled(BaseTextareaAutosize)(
+  const Textarea = styled(BaseTextarea)(
     ({ theme }) => `
     box-sizing: border-box;
     width: 320px;
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx.preview b/docs/data/base/components/textarea/MinHeightTextarea.tsx.preview
similarity index 100%
rename from docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx.preview
rename to docs/data/base/components/textarea/MinHeightTextarea.tsx.preview
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js b/docs/data/base/components/textarea/UnstyledTextarea/css/index.js
similarity index 92%
rename from docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
rename to docs/data/base/components/textarea/UnstyledTextarea/css/index.js
index 440547ea2..b9cc97d27 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
+++ b/docs/data/base/components/textarea/UnstyledTextarea/css/index.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea } from '@mui/base/Textarea';
 import { useTheme } from '@mui/system';
 
-export default function UnstyledTextareaAutosize() {
+export default function UnstyledTextarea() {
   return (
     <React.Fragment>
-      <TextareaAutosize
+      <Textarea
         className="CustomTextarea"
         aria-label="empty textarea"
         placeholder="Empty"
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx b/docs/data/base/components/textarea/UnstyledTextarea/css/index.tsx
similarity index 92%
rename from docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
rename to docs/data/base/components/textarea/UnstyledTextarea/css/index.tsx
index 440547ea2..b9cc97d27 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
+++ b/docs/data/base/components/textarea/UnstyledTextarea/css/index.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea } from '@mui/base/Textarea';
 import { useTheme } from '@mui/system';
 
-export default function UnstyledTextareaAutosize() {
+export default function UnstyledTextarea() {
   return (
     <React.Fragment>
-      <TextareaAutosize
+      <Textarea
         className="CustomTextarea"
         aria-label="empty textarea"
         placeholder="Empty"
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx.preview b/docs/data/base/components/textarea/UnstyledTextarea/css/index.tsx.preview
similarity index 87%
rename from docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx.preview
rename to docs/data/base/components/textarea/UnstyledTextarea/css/index.tsx.preview
index d95c94780..18fac0ffa 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx.preview
+++ b/docs/data/base/components/textarea/UnstyledTextarea/css/index.tsx.preview
@@ -1,5 +1,5 @@
 <React.Fragment>
-  <TextareaAutosize
+  <Textarea
     className="CustomTextarea"
     aria-label="empty textarea"
     placeholder="Empty"
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js b/docs/data/base/components/textarea/UnstyledTextarea/system/index.js
similarity index 91%
rename from docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
rename to docs/data/base/components/textarea/UnstyledTextarea/system/index.js
index 770ddcce9..aad0818c9 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
+++ b/docs/data/base/components/textarea/UnstyledTextarea/system/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea as BaseTextarea } from '@mui/base/Textarea';
 import { styled } from '@mui/system';
 
 export default function EmptyTextarea() {
@@ -25,7 +25,7 @@ export default function EmptyTextarea() {
     900: '#1C2025',
   };
 
-  const Textarea = styled(BaseTextareaAutosize)(
+  const Textarea = styled(BaseTextarea)(
     ({ theme }) => `
     box-sizing: border-box;
     width: 320px;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx b/docs/data/base/components/textarea/UnstyledTextarea/system/index.tsx
similarity index 91%
rename from docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
rename to docs/data/base/components/textarea/UnstyledTextarea/system/index.tsx
index 770ddcce9..aad0818c9 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
+++ b/docs/data/base/components/textarea/UnstyledTextarea/system/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea as BaseTextarea } from '@mui/base/Textarea';
 import { styled } from '@mui/system';
 
 export default function EmptyTextarea() {
@@ -25,7 +25,7 @@ export default function EmptyTextarea() {
     900: '#1C2025',
   };
 
-  const Textarea = styled(BaseTextareaAutosize)(
+  const Textarea = styled(BaseTextarea)(
     ({ theme }) => `
     box-sizing: border-box;
     width: 320px;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx.preview b/docs/data/base/components/textarea/UnstyledTextarea/system/index.tsx.preview
similarity index 100%
rename from docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx.preview
rename to docs/data/base/components/textarea/UnstyledTextarea/system/index.tsx.preview
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js b/docs/data/base/components/textarea/UnstyledTextarea/tailwind/index.js
similarity index 86%
rename from docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
rename to docs/data/base/components/textarea/UnstyledTextarea/tailwind/index.js
index 754ff5fe7..450db6889 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
+++ b/docs/data/base/components/textarea/UnstyledTextarea/tailwind/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea } from '@mui/base/Textarea';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
@@ -7,13 +7,13 @@ function useIsDarkMode() {
   return theme.palette.mode === 'dark';
 }
 
-export default function UnstyledTextareaAutosize() {
+export default function UnstyledTextarea() {
   // Replace this with your app logic for determining dark modes
   const isDarkMode = useIsDarkMode();
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <TextareaAutosize
+      <Textarea
         className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
         aria-label="Demo input"
         placeholder="Empty"
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx b/docs/data/base/components/textarea/UnstyledTextarea/tailwind/index.tsx
similarity index 86%
rename from docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
rename to docs/data/base/components/textarea/UnstyledTextarea/tailwind/index.tsx
index 754ff5fe7..450db6889 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
+++ b/docs/data/base/components/textarea/UnstyledTextarea/tailwind/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { Textarea } from '@mui/base/Textarea';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
@@ -7,13 +7,13 @@ function useIsDarkMode() {
   return theme.palette.mode === 'dark';
 }
 
-export default function UnstyledTextareaAutosize() {
+export default function UnstyledTextarea() {
   // Replace this with your app logic for determining dark modes
   const isDarkMode = useIsDarkMode();
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <TextareaAutosize
+      <Textarea
         className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
         aria-label="Demo input"
         placeholder="Empty"
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview b/docs/data/base/components/textarea/UnstyledTextarea/tailwind/index.tsx.preview
similarity index 96%
rename from docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
rename to docs/data/base/components/textarea/UnstyledTextarea/tailwind/index.tsx.preview
index e6152d5f7..06a85d09e 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
+++ b/docs/data/base/components/textarea/UnstyledTextarea/tailwind/index.tsx.preview
@@ -1,4 +1,4 @@
-<TextareaAutosize
+<Textarea
   className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
   aria-label="Demo input"
   placeholder="Empty"
diff --git a/docs/data/base/components/textarea/textarea.md b/docs/data/base/components/textarea/textarea.md
index fed0264a5..107251bb9 100644
--- a/docs/data/base/components/textarea/textarea.md
+++ b/docs/data/base/components/textarea/textarea.md
@@ -1,7 +1,7 @@
 ---
 productId: base-ui
 title: React Textarea component
-components: Textarea
+components: Textarea, TextareaAutosize
 githubLabel: 'component: TextareaAutosize'
 ---
 
@@ -20,3 +20,28 @@ Textarea is a component that replaces the native `<textarea>` HTML.
 The height of the component automatically adjusts as a response to keyboard inputs and window resizing events.
 
 {{"demo": "TextareaIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
+
+## Component
+
+```jsx
+import { Textarea } from '@mui/base/Textarea';
+```
+
+Textarea behaves similarly to the native HTML`<textarea>`.
+By default, an empty Textarea component renders as a single row, as shown in the following demo:
+
+{{"demo": "UnstyledTextarea", "defaultCodeOpen": false}}
+
+## Customization
+
+### Minimum height
+
+Use the `minRows` prop to define the minimum height of the component:
+
+{{"demo": "MinHeightTextarea.js"}}
+
+### Maximum height
+
+Use the `maxRows` prop to define the maximum height of the component:
+
+{{"demo": "MaxHeightTextarea.js"}}
diff --git a/docs/data/base/pagesApi.js b/docs/data/base/pagesApi.js
index 0289704f8..6959de59c 100644
--- a/docs/data/base/pagesApi.js
+++ b/docs/data/base/pagesApi.js
@@ -64,7 +64,7 @@ module.exports = [
     title: 'Textarea',
   },
   {
-    pathname: '/base-ui/react-textarea-autosize/components-api/#textarea-autosize',
+    pathname: '/base-ui/react-textarea/components-api/#textarea-autosize',
     title: 'TextareaAutosize',
   },
   {
diff --git a/docs/pages/base-ui/api/textarea-autosize.json b/docs/pages/base-ui/api/textarea-autosize.json
index 3e7b0d9ea..609d3bdc1 100644
--- a/docs/pages/base-ui/api/textarea-autosize.json
+++ b/docs/pages/base-ui/api/textarea-autosize.json
@@ -17,6 +17,6 @@
   "forwardsRefTo": "HTMLTextAreaElement",
   "filename": "/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/base-ui/react-textarea-autosize/\">Textarea Autosize</a></li></ul>",
+  "demos": "<ul><li><a href=\"/base-ui/react-textarea/\">Textarea</a></li></ul>",
   "cssComponent": false
 }
diff --git a/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js b/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js
deleted file mode 100644
index 1bfce7a17..000000000
--- a/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
-import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?@mui/markdown';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import TextareaAutosizeApiJsonPageContent from '../../api/textarea-autosize.json';
-
-export default function Page(props) {
-  const { userLanguage, ...other } = props;
-  return <MarkdownDocs {...pageProps} {...other} />;
-}
-
-Page.getLayout = (page) => {
-  return <AppFrame>{page}</AppFrame>;
-};
-
-export const getStaticPaths = () => {
-  return {
-    paths: [{ params: { docsTab: 'components-api' } }, { params: { docsTab: 'hooks-api' } }],
-    fallback: false, // can also be true or 'blocking'
-  };
-};
-
-export const getStaticProps = () => {
-  const TextareaAutosizeApiReq = require.context(
-    'docs/translations/api-docs-base/textarea-autosize',
-    false,
-    /textarea-autosize.*.json$/,
-  );
-  const TextareaAutosizeApiDescriptions = mapApiPageTranslations(TextareaAutosizeApiReq);
-
-  return {
-    props: {
-      componentsApiDescriptions: { TextareaAutosize: TextareaAutosizeApiDescriptions },
-      componentsApiPageContents: { TextareaAutosize: TextareaAutosizeApiJsonPageContent },
-      hooksApiDescriptions: {},
-      hooksApiPageContents: {},
-    },
-  };
-};
diff --git a/docs/pages/base-ui/react-textarea-autosize/index.js b/docs/pages/base-ui/react-textarea-autosize/index.js
deleted file mode 100644
index 27cc912d0..000000000
--- a/docs/pages/base-ui/react-textarea-autosize/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
-import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?@mui/markdown';
-
-export default function Page(props) {
-  const { userLanguage, ...other } = props;
-  return <MarkdownDocs {...pageProps} {...other} />;
-}
-
-Page.getLayout = (page) => {
-  return <AppFrame>{page}</AppFrame>;
-};
diff --git a/docs/pages/base-ui/react-textarea/[docsTab]/index.js b/docs/pages/base-ui/react-textarea/[docsTab]/index.js
index ac6ecae71..f077d3436 100644
--- a/docs/pages/base-ui/react-textarea/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-textarea/[docsTab]/index.js
@@ -4,6 +4,7 @@ import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/base/components/textarea/textarea.md?@mui/markdown';
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
 import TextareaApiJsonPageContent from '../../api/textarea.json';
+import TextareaAutosizeApiJsonPageContent from '../../api/textarea-autosize.json';
 
 export default function Page(props) {
   const { userLanguage, ...other } = props;
@@ -29,10 +30,23 @@ export const getStaticProps = () => {
   );
   const TextareaApiDescriptions = mapApiPageTranslations(TextareaApiReq);
 
+  const TextareaAutosizeApiReq = require.context(
+    'docs/translations/api-docs-base/textarea-autosize',
+    false,
+    /textarea-autosize.*.json$/,
+  );
+  const TextareaAutosizeApiDescriptions = mapApiPageTranslations(TextareaAutosizeApiReq);
+
   return {
     props: {
-      componentsApiDescriptions: { Textarea: TextareaApiDescriptions },
-      componentsApiPageContents: { Textarea: TextareaApiJsonPageContent },
+      componentsApiDescriptions: {
+        Textarea: TextareaApiDescriptions,
+        TextareaAutosize: TextareaAutosizeApiDescriptions,
+      },
+      componentsApiPageContents: {
+        Textarea: TextareaApiJsonPageContent,
+        TextareaAutosize: TextareaAutosizeApiJsonPageContent,
+      },
       hooksApiDescriptions: {},
       hooksApiPageContents: {},
     },