make textarea styles consistent with other inputs

src/shared/components/textarea/textarea.module.css

@@ -1,15 +1,20 @@
 .root {
     transition: width 0.3s ease-in-out;
-
-    &[data-disabled='true'] {
-        opacity: 0.6;
-    }
 }
 
 .input {
-    color: var(--theme-colors-surface-foreground);
+    width: 100%;
-    background: var(--theme-colors-surface);
     border: 1px solid transparent;
+
+    &[data-variant='default'] {
+        color: var(--theme-colors-surface-foreground);
+        background: var(--theme-colors-surface);
+    }
+
+    &[data-variant='filled'] {
+        color: var(--theme-colors-foreground);
+        background: var(--theme-colors-background);
+    }
 }
 
 .input:focus,
@@ -20,3 +25,7 @@
 .label {
     margin-bottom: var(--theme-spacing-sm);
 }
+
+.required {
+    color: var(--theme-colors-state-error);
+}

src/shared/components/textarea/textarea.tsx

@@ -9,7 +9,19 @@ export interface TextareaProps extends MantineTextareaProps {
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-    ({ children, classNames, maxWidth, style, width, ...props }: TextareaProps, ref) => {
+    (
+        {
+            children,
+            classNames,
+            maxWidth,
+            size = 'sm',
+            style,
+            variant = 'default',
+            width,
+            ...props
+        }: TextareaProps,
+        ref,
+    ) => {
         return (
             <MantineTextarea
                 classNames={{
@@ -21,7 +33,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                     ...classNames,
                 }}
                 ref={ref}
+                size={size}
+                spellCheck={false}
                 style={{ maxWidth, width, ...style }}
+                variant={variant}
                 {...props}
             >
                 {children}