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

src/components/default/auth/buttons/client/sign-in-with-apple.tsx

@@ -1,36 +1,36 @@
 'use client';
 import { signInWithApple } from '@/lib/queries';
-import { StatusMessage, SubmitButton } from '@/components/default/forms';
+import {
+  StatusMessage,
+  SubmitButton,
+  type SubmitButtonProps,
+} from '@/components/default/forms';
 import { useAuth } from '@/lib/hooks/context';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useSupabaseClient } from '@/utils/supabase';
 import { FaApple } from 'react-icons/fa';
-import { type buttonVariants } from '@/components/ui';
 import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
 
-type SignInWithAppleProps = {
-  buttonProps?: ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
-  formProps?: ComponentProps<'form'>;
-  textProps?: ComponentProps<'p'>;
-  iconProps?: ComponentProps<'svg'>;
+export type SignInWithAppleProps = {
+  submitButtonProps?: SubmitButtonProps;
+  formClassName?: ComponentProps<'form'>['className'];
+  formProps?: Omit<ComponentProps<'form'>, 'className'>;
+  textClassName?: ComponentProps<'p'>['className'];
+  textProps?: Omit<ComponentProps<'p'>, 'className'>;
+  iconClassName?: ComponentProps<'svg'>['className'];
+  iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
 };
 
 export const SignInWithApple = ({
-  buttonProps = {
-    className: 'w-full cursor-pointer',
-    type: 'submit',
-  },
-  formProps = {
-    className: 'my-4',
-  },
-  textProps = {
-    className: 'text-[1.0rem]',
-  },
-  iconProps = {
-    className: 'size-5',
-  }
+  submitButtonProps,
+  formClassName,
+  formProps,
+  textClassName,
+  textProps,
+  iconClassName,
+  iconProps,
 } : SignInWithAppleProps) => {
   const router = useRouter();
   const { loading, refreshUser } = useAuth();
@@ -57,17 +57,24 @@ export const SignInWithApple = ({
   };
 
   return (
-    <form onSubmit={handleSignInWithApple} {...formProps}>
+    <form
+      onSubmit={handleSignInWithApple}
+      className={cn('my-4', formClassName)}
+      {...formProps}
+    >
       <SubmitButton
         disabled={isLoading || loading}
         pendingText='Signing in...'
-        {...buttonProps}
+        className={cn('w-full', submitButtonProps?.className)}
+        {...submitButtonProps}
       >
         <div className='flex items-center gap-2'>
-          <FaApple {...iconProps} />
-          <p className={textProps.className} {...textProps}>Sign In with Apple</p>
+          <FaApple className={cn('size-5', iconClassName)} {...iconProps} />
+          <p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
+            Sign In with Apple
+          </p>
         </div>
-      </SubmitButton>
+  </SubmitButton>
       {statusMessage && <StatusMessage message={{ error: statusMessage }} />}
     </form>
   );