Cleaned up components and their props

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

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