feat(textarea): implement TextareaAutosize component and update imports across the application

src/components/Elements/AddModal/AddModal.jsx

@@ -1,10 +1,9 @@
 import variables from 'config/variables';
 
 import { useState, memo } from 'react';
-import { TextareaAutosize } from '@mui/material';
 import { MdAddLink, MdClose } from 'react-icons/md';
-import { Tooltip } from 'components/Elements';
-import { Button } from 'components/Elements';
+import { Tooltip, Button } from 'components/Elements';
+import { TextareaAutosize } from 'components/Form';
 
 function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
   const [name, setName] = useState(edit ? editData.name : '');

src/components/Form/Settings/TextareaAutosize/TextareaAutosize.jsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react';
+
+const TextareaAutosize = ({
+  value,
+  onChange,
+  placeholder,
+  minRows = 1,
+  maxRows = 10,
+  className = '',
+  style = {},
+  disabled = false,
+  error = false,
+  id,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedby,
+}) => {
+  const textareaRef = useRef(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const resizeTextarea = () => {
+      textarea.style.height = 'auto';
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
+      const minHeight = lineHeight * minRows;
+      const maxHeight = lineHeight * maxRows;
+      const newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight));
+      textarea.style.height = `${newHeight}px`;
+    };
+
+    resizeTextarea();
+  }, [value, minRows, maxRows]);
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      disabled={disabled}
+      id={id}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedby}
+      aria-invalid={error}
+      className={`
+        resize-none
+        overflow-hidden
+        w-full
+        bg-transparent
+        border-0 
+        border-b
+        border-gray-200
+        hover:border-gray-300
+        focus:border-blue-500
+        focus:ring-0
+        outline-none
+        transition-colors
+        text-sm
+        p-5
+        ${disabled ? 'text-gray-500 cursor-not-allowed' : 'text-gray-900'}
+        ${error ? 'border-red-500' : ''}
+        ${className}
+      `}
+      style={{
+        padding: '10px',
+        ...style,
+      }}
+    />
+  );
+};
+
+export { TextareaAutosize, TextareaAutosize as default };

src/components/Form/Settings/TextareaAutosize/index.jsx

@@ -0,0 +1 @@
+export * from './TextareaAutosize';

src/components/Form/Settings/index.jsx

@@ -6,3 +6,4 @@ export * from './Radio';
 export * from './Slider';
 export * from './Switch';
 export * from './Text';
+export * from './TextareaAutosize';

src/features/greeting/options/GreetingOptions.jsx

@@ -9,8 +9,7 @@ import {
   PreferencesWrapper,
   Section,
 } from 'components/Layout/Settings';
-import { Checkbox, Switch, Text } from 'components/Form/Settings';
-import { TextareaAutosize } from '@mui/material';
+import { Checkbox, Switch, Text, TextareaAutosize } from 'components/Form/Settings';
 import { Button } from 'components/Elements';
 import { toast } from 'react-toastify';
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';
@@ -200,6 +199,7 @@ const GreetingOptions = () => {
                   </span>
                   <TextareaAutosize
                     value={event.name}
+                    minRows={1}
                     placeholder={variables.getMessage(`${GREETING_SECTION}.event_name`)}
                     onChange={(e) => {
                       const updatedEvent = { ...event, name: e.target.value };

src/features/navbar/components/Notes.jsx

@@ -3,9 +3,9 @@ import { PureComponent, memo, useState } from 'react';
 
 import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/md';
 import { useFloating, shift } from '@floating-ui/react-dom';
-import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
 import { Tooltip } from 'components/Elements';
+import { TextareaAutosize } from 'components/Form/Settings';
 
 import { saveFile } from 'utils/saveFile';
 import EventBus from 'utils/eventbus';