I fixed some issues with how we were setting up styles. should be consistent now

src/components/default/forms/status-message.tsx

@@ -1,25 +1,52 @@
+import { type ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
+
 type Message =
 | { success: string}
 | { error: string}
 | { message: string}
 
-export const StatusMessage = ({message}: {message: Message}) => {
+type StatusMessageProps = {
+  message: Message;
+  containerClassName?: ComponentProps<'div'>['className'];
+  containerProps?: Omit<ComponentProps<'div'>, 'className'>;
+  textClassName?: ComponentProps<'div'>['className'];
+  textProps?: Omit<ComponentProps<'div'>, 'className'>;
+};
+
+export const StatusMessage = ({
+  message,
+  containerClassName,
+  containerProps,
+  textClassName,
+  textProps,
+}: StatusMessageProps) => {
   return (
-    <div className='flex flex-col gap-2 w-full
-        text-sm bg-accent rounded-md p-2 px-4'
+    <div
+      className={cn(
+        'flex flex-col gap-2 w-full\
+          text-sm bg-accent rounded-md p-2 px-4',
+        containerClassName,
+      )}
+      {...containerProps}
     >
       {'success' in message && (
-        <div className='dark:text-green-500 text-green-700'>
+        <div className={cn(
+          'dark:text-green-500 text-green-700',
+          textClassName
+        )}
+          {...textProps}
+        >
           {message.success}
         </div>
       )}
       {'error' in message && (
-        <div className='text-destructive'>
+        <div className={cn('text-destructive', textClassName)}>
           {message.error}
         </div>
       )}
       {'message' in message && (
-        <div>
+        <div className={textClassName}>
           {message.message}
         </div>
       )}