wip: refresh design

apps/web/src/components/form/form-error-message.tsx

@@ -0,0 +1,35 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { FieldError } from 'react-hook-form';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type FormErrorMessageProps = {
+  className?: string;
+  error: FieldError | undefined;
+};
+
+export const FormErrorMessage = ({ error, className }: FormErrorMessageProps) => {
+  return (
+    <AnimatePresence>
+      {error && (
+        <motion.p
+          initial={{
+            opacity: 0,
+            y: -10,
+          }}
+          animate={{
+            opacity: 1,
+            y: 0,
+          }}
+          exit={{
+            opacity: 0,
+            y: 10,
+          }}
+          className={cn('text-xs text-red-500', className)}
+        >
+          {error.message}
+        </motion.p>
+      )}
+    </AnimatePresence>
+  );
+};