add helper text to Textarea

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@airdao/ui-library",
-  "version": "1.4.14",
+  "version": "1.4.15",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types.d.ts",

src/components/Textarea/Textarea.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextareaProps } from './Textarea.types';
+import { BottomTextProps, TextareaProps } from './Textarea.types';
 import propTypes from 'prop-types';
 import s from './textarea.module.css';
 
@@ -13,6 +13,7 @@ export function Textarea({
   onChange,
   disabled,
   error,
+  helperText,
 }: TextareaProps) {
   return (
     <div
@@ -30,13 +31,22 @@ export function Textarea({
         />
         {tailIcon || null}
       </div>
-      {typeof error === 'string' && error && (
-        <span className={s.error}>{error}</span>
-      )}
+      <span className={s.helperText}></span>
+      <BottomText helperText={helperText} error={error} />
     </div>
   );
 }
 
+function BottomText({ helperText, error }: BottomTextProps) {
+  if (error && typeof error === 'string') {
+    return <span className={`${s.helperText} ${s.errorText}`}>{error}</span>;
+  }
+  if (helperText) {
+    return <span className={s.helperText}>{helperText}</span>;
+  }
+  return null;
+}
+
 Textarea.propTypes = {
   className: propTypes.string,
   placeholder: propTypes.string,

src/components/Textarea/Textarea.types.ts

@@ -10,4 +10,10 @@ export interface TextareaProps {
   disabled?: boolean;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   error?: string | boolean;
+  helperText?: string;
+}
+
+export interface BottomTextProps {
+  helperText?: string;
+  error?: string | boolean;
 }

src/components/Textarea/textarea.module.css

@@ -75,16 +75,20 @@
     letter-spacing: -0.16px;
 }
 
-.error {
+.helperText {
     position: absolute;
-    bottom: -23px;
-    color: #FF4747;
+    bottom: -24px;
+    color: var(--alpha-black-60, rgba(14, 14, 14, 0.60));
     font-family: Inter, sans-serif;
     font-size: 14px;
     line-height: 20px; /* 142.857% */
     letter-spacing: -0.14px;
 }
 
+.errorText {
+    color: #FF4747;
+}
+
 .inputError .field {
     border: 1px solid #FFD9CD;
     color: #FF4747;