feat: migrate nextjs to rr7

2025-01-02 15:33:37 +11:00
parent 9183f668d3
commit 383b5f78f0
898 changed files with 31175 additions and 24615 deletions
--- a/packages/ui/components/animate/animate-generic-fade-in-out.tsx
+++ b/packages/ui/components/animate/animate-generic-fade-in-out.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { motion } from 'framer-motion';

 type AnimateGenericFadeInOutProps = {
--- a/packages/ui/components/call-to-action.tsx
+++ b/packages/ui/components/call-to-action.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'react-router';

 import { Button } from '../primitives/button';
 import { Card, CardContent } from '../primitives/card';
@@ -25,7 +25,7 @@ export const CallToAction = ({ className, utmSource = 'generic-cta' }: CallToAct
          size="lg"
          asChild
        >
-          <Link href={`https://app.documenso.com/signup?utm_source=${utmSource}`} target="_blank">
+          <Link to={`https://app.documenso.com/signup?utm_source=${utmSource}`} target="_blank">
            Get started
          </Link>
        </Button>
--- a/packages/ui/components/client-only.tsx
+++ b/packages/ui/components/client-only.tsx
@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export const ClientOnly = async ({ children }: { children: React.ReactNode }) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted ? children : null;
+};
--- a/packages/ui/components/common/copy-text-button.tsx
+++ b/packages/ui/components/common/copy-text-button.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';

 import { motion } from 'framer-motion';
--- a/packages/ui/components/common/language-switcher-dialog.tsx
+++ b/packages/ui/components/common/language-switcher-dialog.tsx
@@ -1,9 +1,8 @@
-import { msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { CheckIcon } from 'lucide-react';

 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
-import { switchI18NLanguage } from '@documenso/lib/server-only/i18n/switch-i18n-language';
 import { dynamicActivate } from '@documenso/lib/utils/i18n';
 import { cn } from '@documenso/ui/lib/utils';
 import {
@@ -25,8 +24,16 @@ export const LanguageSwitcherDialog = ({ open, setOpen }: LanguageSwitcherDialog
  const setLanguage = async (lang: string) => {
    setOpen(false);

-    await dynamicActivate(i18n, lang);
-    await switchI18NLanguage(lang);
+    await dynamicActivate(lang);
+
+    const formData = new FormData();
+
+    formData.append('lang', lang);
+
+    await fetch('/api/locale', {
+      method: 'post',
+      body: formData,
+    });
  };

  return (
--- a/packages/ui/components/document/document-dialog.tsx
+++ b/packages/ui/components/document/document-dialog.tsx
@@ -1,24 +1,22 @@
-'use client';
-
 import { useState } from 'react';

+import type { DocumentData } from '@prisma/client';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';

-import type { DocumentData } from '@documenso/prisma/client';
-
 import { cn } from '../../lib/utils';
-import { Dialog, DialogOverlay, DialogPortal } from '../../primitives/dialog';
+import { Dialog, DialogOverlay, DialogPortal, DialogTrigger } from '../../primitives/dialog';
 import { LazyPDFViewerNoLoader } from '../../primitives/lazy-pdf-viewer';

 export type DocumentDialogProps = {
+  trigger?: React.ReactNode;
  documentData: DocumentData;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;

 /**
 * A dialog which renders the provided document.
 */
-export default function DocumentDialog({ documentData, ...props }: DocumentDialogProps) {
+export default function DocumentDialog({ trigger, documentData, ...props }: DocumentDialogProps) {
  const [documentLoaded, setDocumentLoaded] = useState(false);

  const onDocumentLoad = () => {
@@ -30,6 +28,12 @@ export default function DocumentDialog({ documentData, ...props }: DocumentDialo
      <DialogPortal>
        <DialogOverlay className="bg-black/80" />

+        {trigger && (
+          <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+            {trigger}
+          </DialogTrigger>
+        )}
+
        <DialogPrimitive.Content
          className={cn(
            'animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 pointer-events-none fixed z-50 h-screen w-screen overflow-y-auto px-2 py-14 opacity-0 transition-opacity lg:py-32',
--- a/packages/ui/components/document/document-download-button.tsx
+++ b/packages/ui/components/document/document-download-button.tsx
@@ -1,14 +1,12 @@
-'use client';
-
 import type { HTMLAttributes } from 'react';
 import { useState } from 'react';

-import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentData } from '@prisma/client';
 import { Download } from 'lucide-react';

 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
-import type { DocumentData } from '@documenso/prisma/client';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 import { Button } from '../../primitives/button';
--- a/packages/ui/components/document/document-email-checkboxes.tsx
+++ b/packages/ui/components/document/document-email-checkboxes.tsx
@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { InfoIcon } from 'lucide-react';

 import type { TDocumentEmailSettings } from '@documenso/lib/types/document-email';
--- a/packages/ui/components/document/document-global-auth-access-select.tsx
+++ b/packages/ui/components/document/document-global-auth-access-select.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import React, { forwardRef } from 'react';

-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import type { SelectProps } from '@radix-ui/react-select';
 import { InfoIcon } from 'lucide-react';

--- a/packages/ui/components/document/document-global-auth-action-select.tsx
+++ b/packages/ui/components/document/document-global-auth-action-select.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import React, { forwardRef } from 'react';

-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import type { SelectProps } from '@radix-ui/react-select';
 import { InfoIcon } from 'lucide-react';

--- a/packages/ui/components/document/document-send-email-message-helper.tsx
+++ b/packages/ui/components/document/document-send-email-message-helper.tsx
@@ -1,8 +1,6 @@
-'use client';
-
 import React from 'react';

-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';

 export const DocumentSendEmailMessageHelper = () => {
  return (
--- a/packages/ui/components/document/document-share-button.tsx
+++ b/packages/ui/components/document/document-share-button.tsx
@@ -1,10 +1,9 @@
-'use client';
-
 import type { HTMLAttributes } from 'react';
 import React, { useState } from 'react';

-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { Copy, Sparkles } from 'lucide-react';
 import { FaXTwitter } from 'react-icons/fa6';

--- a/packages/ui/components/field/field-tooltip.tsx
+++ b/packages/ui/components/field/field-tooltip.tsx
@@ -1,3 +1,4 @@
+import type { Field } from '@prisma/client';
 import { TooltipArrow } from '@radix-ui/react-tooltip';
 import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
@@ -12,7 +13,6 @@ import {
  TooltipProvider,
  TooltipTrigger,
 } from '../..//primitives/tooltip';
-import type { Field } from '.prisma/client';

 const tooltipVariants = cva('font-semibold', {
  variants: {
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@@ -1,13 +1,11 @@
-'use client';
-
 import React, { useEffect, useMemo, useState } from 'react';

+import type { Field } from '@prisma/client';
 import { createPortal } from 'react-dom';

 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
 import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import type { Field } from '@documenso/prisma/client';

 import { cn } from '../../lib/utils';
 import { Card, CardContent } from '../../primitives/card';
--- a/packages/ui/components/recipient/recipient-action-auth-select.tsx
+++ b/packages/ui/components/recipient/recipient-action-auth-select.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import React from 'react';

-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import type { SelectProps } from '@radix-ui/react-select';
 import { InfoIcon } from 'lucide-react';

--- a/packages/ui/components/recipient/recipient-role-select.tsx
+++ b/packages/ui/components/recipient/recipient-role-select.tsx
@@ -1,12 +1,10 @@
-'use client';
-
 import React, { forwardRef } from 'react';

-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
+import { RecipientRole } from '@prisma/client';
 import type { SelectProps } from '@radix-ui/react-select';
 import { InfoIcon } from 'lucide-react';

-import { RecipientRole } from '@documenso/prisma/client';
 import { ROLE_ICONS } from '@documenso/ui/primitives/recipient-role-icons';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@documenso/ui/primitives/select';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
--- a/packages/ui/components/signing-card.tsx
+++ b/packages/ui/components/signing-card.tsx
@@ -1,15 +1,9 @@
-'use client';
-
 import { useCallback, useEffect, useRef, useState } from 'react';

-import type { StaticImageData } from 'next/image';
-import Image from 'next/image';
-
+import type { Signature } from '@prisma/client';
 import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion';
 import { P, match } from 'ts-pattern';

-import type { Signature } from '@documenso/prisma/client';
-
 import { cn } from '../lib/utils';
 import { Card, CardContent } from '../primitives/card';

@@ -17,7 +11,7 @@ export type SigningCardProps = {
  className?: string;
  name: string;
  signature?: Signature;
-  signingCelebrationImage?: StaticImageData;
+  signingCelebrationImage?: string;
 };

 /**
@@ -213,7 +207,7 @@ const SigningCardContent = ({ className, name, signature }: SigningCardContentPr
 };

 type SigningCardImageProps = {
-  signingCelebrationImage: StaticImageData;
+  signingCelebrationImage: string;
 };

 const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) => {
@@ -233,7 +227,7 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
        duration: 0.5,
      }}
    >
-      <Image
+      <img
        src={signingCelebrationImage}
        alt="background pattern"
        className="w-full dark:brightness-150 dark:contrast-[70%] dark:invert dark:sepia"
@@ -241,7 +235,6 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
          mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
          WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
        }}
-        priority
      />
    </motion.div>
  );
--- a/packages/ui/icons/verified.tsx
+++ b/packages/ui/icons/verified.tsx
@@ -17,8 +17,8 @@ export const VerifiedIcon: LucideIcon = forwardRef(
        <g id="badge, verified, award">
          <path
            id="Icon"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
            d="M10.5457 2.89094C11.5779 1.70302 13.4223 1.70302 14.4545 2.89094L15.2585 3.81628C15.3917 3.96967 15.5947 4.04354 15.7954 4.0117L17.0061 3.81965C18.5603 3.57309 19.9732 4.75869 20.0003 6.33214L20.0214 7.55778C20.0249 7.76096 20.1329 7.94799 20.3071 8.05261L21.358 8.6837C22.7071 9.49389 23.0274 11.3103 22.0368 12.5331L21.2651 13.4855C21.1372 13.6434 21.0997 13.8561 21.1659 14.0482L21.5652 15.2072C22.0779 16.695 21.1557 18.2923 19.6109 18.5922L18.4075 18.8258C18.208 18.8646 18.0426 19.0034 17.9698 19.1931L17.5308 20.3376C16.9672 21.8069 15.234 22.4378 13.8578 21.6745L12.7858 21.08C12.6081 20.9814 12.3921 20.9814 12.2144 21.08L11.1424 21.6745C9.76623 22.4378 8.033 21.8069 7.4694 20.3376L7.03038 19.1931C6.9576 19.0034 6.79216 18.8646 6.59268 18.8258L5.38932 18.5922C3.84448 18.2923 2.92224 16.695 3.43495 15.2072L3.83431 14.0482C3.90052 13.8561 3.86302 13.6434 3.7351 13.4855L2.96343 12.5331C1.97279 11.3103 2.29307 9.49389 3.64218 8.6837L4.69306 8.05261C4.86728 7.94799 4.97526 7.76096 4.97875 7.55778L4.99985 6.33214C5.02694 4.75869 6.43987 3.57309 7.99413 3.81965L9.20481 4.0117C9.40551 4.04354 9.60845 3.96967 9.74173 3.81628L10.5457 2.89094ZM15.7072 11.2071C16.0977 10.8166 16.0977 10.1834 15.7072 9.79289C15.3167 9.40237 14.6835 9.40237 14.293 9.79289L11.5001 12.5858L10.7072 11.7929C10.3167 11.4024 9.68351 11.4024 9.29298 11.7929C8.90246 12.1834 8.90246 12.8166 9.29298 13.2071L10.4394 14.3536C11.0252 14.9393 11.975 14.9393 12.5608 14.3536L15.7072 11.2071Z"
            fill={color}
          />
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -29,8 +29,8 @@
    "@documenso/lib": "*",
    "@hello-pangea/dnd": "^16.6.0",
    "@hookform/resolvers": "^3.3.0",
-    "@lingui/macro": "^4.11.3",
-    "@lingui/react": "^4.11.3",
+    "@lingui/macro": "^5.2.0",
+    "@lingui/react": "^5.2.0",
    "@radix-ui/react-accordion": "^1.1.1",
    "@radix-ui/react-alert-dialog": "^1.0.3",
    "@radix-ui/react-aspect-ratio": "^1.0.2",
@@ -65,7 +65,7 @@
    "framer-motion": "^10.12.8",
    "lucide-react": "^0.279.0",
    "luxon": "^3.4.2",
-    "next": "14.2.6",
+    "perfect-freehand": "^1.2.0",
    "pdfjs-dist": "3.11.174",
    "react": "^18",
    "react-colorful": "^5.6.1",
--- a/packages/ui/primitives/accordion.tsx
+++ b/packages/ui/primitives/accordion.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as AccordionPrimitive from '@radix-ui/react-accordion';
--- a/packages/ui/primitives/alert-dialog.tsx
+++ b/packages/ui/primitives/alert-dialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
--- a/packages/ui/primitives/aspect-ratio.tsx
+++ b/packages/ui/primitives/aspect-ratio.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';

 const AspectRatio = AspectRatioPrimitive.Root;
--- a/packages/ui/primitives/auto-sized-text.tsx
+++ b/packages/ui/primitives/auto-sized-text.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useLayoutEffect, useRef } from 'react';

 import { cn } from '../lib/utils';
--- a/packages/ui/primitives/avatar.tsx
+++ b/packages/ui/primitives/avatar.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as AvatarPrimitive from '@radix-ui/react-avatar';
--- a/packages/ui/primitives/calendar.tsx
+++ b/packages/ui/primitives/calendar.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import { ChevronLeft, ChevronRight } from 'lucide-react';
--- a/packages/ui/primitives/card.tsx
+++ b/packages/ui/primitives/card.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
--- a/packages/ui/primitives/checkbox.tsx
+++ b/packages/ui/primitives/checkbox.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
--- a/packages/ui/primitives/collapsible.tsx
+++ b/packages/ui/primitives/collapsible.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';

 const Collapsible = CollapsiblePrimitive.Root;
--- a/packages/ui/primitives/combobox.tsx
+++ b/packages/ui/primitives/combobox.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';

-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { Check, ChevronDown } from 'lucide-react';

 import { cn } from '../lib/utils';
--- a/packages/ui/primitives/command.tsx
+++ b/packages/ui/primitives/command.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import type { DialogProps } from '@radix-ui/react-dialog';
@@ -96,7 +94,7 @@ const CommandGroup = React.forwardRef<
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
-      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden border-b p-1 last:border-0 [&_[cmdk-group-heading]]:mt-2 [&_[cmdk-group-heading]]:px-0 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:opacity-50 ',
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden border-b p-1 last:border-0 [&_[cmdk-group-heading]]:mt-2 [&_[cmdk-group-heading]]:px-0 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:opacity-50',
      className,
    )}
    {...props}
--- a/packages/ui/primitives/constants.ts
+++ b/packages/ui/primitives/constants.ts
@@ -1,5 +0,0 @@
-export const THEMES_TYPE = {
-  DARK: 'dark',
-  LIGHT: 'light',
-  SYSTEM: 'system'
-};
--- a/packages/ui/primitives/context-menu.tsx
+++ b/packages/ui/primitives/context-menu.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
--- a/packages/ui/primitives/data-table-pagination.tsx
+++ b/packages/ui/primitives/data-table-pagination.tsx
@@ -1,4 +1,4 @@
-import { Plural, Trans } from '@lingui/macro';
+import { Plural, Trans } from '@lingui/react/macro';
 import type { Table } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { match } from 'ts-pattern';
--- a/packages/ui/primitives/data-table.tsx
+++ b/packages/ui/primitives/data-table.tsx
@@ -1,8 +1,6 @@
-'use client';
-
 import React, { useMemo } from 'react';

-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import type {
  ColumnDef,
  PaginationState,
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as DialogPrimitive from '@radix-ui/react-dialog';
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@@ -1,13 +1,11 @@
-'use client';
-
-import Link from 'next/link';
-
 import type { MessageDescriptor } from '@lingui/core';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { AlertTriangle, Plus } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
+import { Link } from 'react-router';

 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
@@ -101,7 +99,6 @@ export const DocumentDropzone = ({
                <div className="bg-muted-foreground/10 group-hover:bg-destructive/10 h-2 w-5/6 rounded-[2px]" />
                <div className="bg-muted-foreground/10 group-hover:bg-destructive/10 h-2 w-full rounded-[2px]" />
              </motion.div>
-
              <motion.div
                className="group-hover:bg-destructive/5 border-muted-foreground/20 group-hover:border-destructive/50 dark:bg-muted/80 z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
                variants={DocumentDropzoneDisabledCardCenterVariants}
@@ -111,7 +108,6 @@ export const DocumentDropzone = ({
                  className="text-muted-foreground/20 group-hover:text-destructive h-12 w-12"
                />
              </motion.div>
-
              <motion.div
                className="group-hover:bg-destructive/2 border-muted-foreground/20 group-hover:border-destructive/10 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
                variants={DocumentDropzoneDisabledCardRightVariants}
@@ -132,7 +128,6 @@ export const DocumentDropzone = ({
                <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
                <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
              </motion.div>
-
              <motion.div
                className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
                variants={DocumentDropzoneCardCenterVariants}
@@ -142,7 +137,6 @@ export const DocumentDropzone = ({
                  className="text-muted-foreground/20 group-hover:text-documenso h-12 w-12"
                />
              </motion.div>
-
              <motion.div
                className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
                variants={DocumentDropzoneCardRightVariants}
@@ -164,7 +158,7 @@ export const DocumentDropzone = ({

          {disabled && IS_BILLING_ENABLED() && (
            <Button className="hover:bg-warning/80 bg-warning mt-4 w-32" asChild>
-              <Link href="/settings/billing">
+              <Link to="/settings/billing">
                <Trans>Upgrade</Trans>
              </Link>
            </Button>
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -1,12 +1,11 @@
-'use client';
-
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

-import { Caveat } from 'next/font/google';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { Prisma } from '@prisma/client';
+import type { Field, Recipient } from '@prisma/client';
+import { FieldType, RecipientRole, SendStatus } from '@prisma/client';
 import {
  CalendarDays,
  Check,
@@ -41,8 +40,6 @@ import {
  canRecipientBeModified,
  canRecipientFieldsBeModified,
 } from '@documenso/lib/utils/recipients';
-import type { Field, Recipient } from '@documenso/prisma/client';
-import { FieldType, RecipientRole, SendStatus } from '@documenso/prisma/client';

 import { FieldToolTip } from '../../components/field/field-tooltip';
 import { getSignerColorStyles, useSignerColors } from '../../lib/signer-colors';
@@ -70,13 +67,6 @@ import { FieldAdvancedSettings } from './field-item-advanced-settings';
 import { MissingSignatureFieldDialog } from './missing-signature-field-dialog';
 import { type DocumentFlowStep, FRIENDLY_FIELD_TYPE } from './types';

-const fontCaveat = Caveat({
-  weight: ['500'],
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-caveat',
-});
-
 const MIN_HEIGHT_PX = 12;
 const MIN_WIDTH_PX = 36;

@@ -544,12 +534,6 @@ export const AddFieldsFormPartial = ({
      );
  }, [recipientsByRole]);

-  const isTypedSignatureEnabled = form.watch('typedSignatureEnabled');
-
-  const handleTypedSignatureChange = (value: boolean) => {
-    form.setValue('typedSignatureEnabled', value, { shouldDirty: true });
-  };
-
  const handleAdvancedSettings = () => {
    setShowAdvancedSettings((prev) => !prev);
  };
@@ -612,7 +596,7 @@ export const AddFieldsFormPartial = ({
                      '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
                      'dark:text-black/60': isFieldWithinBounds,
                    },
-                    selectedField === FieldType.SIGNATURE && fontCaveat.className,
+                    // selectedField === FieldType.SIGNATURE && fontCaveat.className,
                  )}
                  style={{
                    top: coords.y,
@@ -834,8 +818,7 @@ export const AddFieldsFormPartial = ({
                        <CardContent className="flex flex-col items-center justify-center px-6 py-4">
                          <p
                            className={cn(
-                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-lg font-normal',
-                              fontCaveat.className,
+                              'text-muted-foreground group-data-[selected]:text-foreground font-signature flex items-center justify-center gap-x-1.5 text-lg font-normal',
                            )}
                          >
                            <Trans>Signature</Trans>
--- a/packages/ui/primitives/document-flow/add-fields.types.ts
+++ b/packages/ui/primitives/document-flow/add-fields.types.ts
@@ -1,7 +1,7 @@
+import { FieldType } from '@prisma/client';
 import { z } from 'zod';

 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import { FieldType } from '@documenso/prisma/client';

 export const ZAddFieldsFormSchema = z.object({
  fields: z.array(
--- a/packages/ui/primitives/document-flow/add-settings.tsx
+++ b/packages/ui/primitives/document-flow/add-settings.tsx
@@ -1,9 +1,9 @@
-'use client';
-
 import { useEffect } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
+import { DocumentVisibility, TeamMemberRole } from '@prisma/client';
+import { DocumentStatus, type Field, type Recipient, SendStatus } from '@prisma/client';
 import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
@@ -13,8 +13,6 @@ import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { TDocument } from '@documenso/lib/types/document';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-import { DocumentVisibility, TeamMemberRole } from '@documenso/prisma/client';
-import { DocumentStatus, type Field, type Recipient, SendStatus } from '@documenso/prisma/client';
 import {
  DocumentGlobalAuthAccessSelect,
  DocumentGlobalAuthAccessTooltip,
--- a/packages/ui/primitives/document-flow/add-settings.types.ts
+++ b/packages/ui/primitives/document-flow/add-settings.types.ts
@@ -1,3 +1,4 @@
+import { DocumentVisibility } from '@prisma/client';
 import { z } from 'zod';

 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
@@ -8,7 +9,6 @@ import {
  ZDocumentActionAuthTypesSchema,
 } from '@documenso/lib/types/document-auth';
 import { isValidRedirectUrl } from '@documenso/lib/utils/is-valid-redirect-url';
-import { DocumentVisibility } from '@documenso/prisma/client';
 import {
  ZDocumentMetaDateFormatSchema,
  ZDocumentMetaTimezoneSchema,
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@@ -1,24 +1,23 @@
-'use client';
-
 import React, { useCallback, useId, useMemo, useRef, useState } from 'react';

 import type { DropResult, SensorAPI } from '@hello-pangea/dnd';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Field, Recipient } from '@prisma/client';
+import { DocumentSigningOrder, RecipientRole, SendStatus } from '@prisma/client';
 import { motion } from 'framer-motion';
 import { GripVerticalIcon, Plus, Trash } from 'lucide-react';
-import { useSession } from 'next-auth/react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { prop, sortBy } from 'remeda';

 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
 import { canRecipientBeModified as utilCanRecipientBeModified } from '@documenso/lib/utils/recipients';
-import type { Field, Recipient } from '@documenso/prisma/client';
-import { DocumentSigningOrder, RecipientRole, SendStatus } from '@documenso/prisma/client';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
@@ -65,9 +64,7 @@ export const AddSignersFormPartial = ({
  const { _ } = useLingui();
  const { toast } = useToast();
  const { remaining } = useLimits();
-  const { data: session } = useSession();
-
-  const user = session?.user;
+  const { user } = useSession();

  const initialId = useId();
  const $sensorApi = useRef<SensorAPI | null>(null);
--- a/packages/ui/primitives/document-flow/add-signers.types.ts
+++ b/packages/ui/primitives/document-flow/add-signers.types.ts
@@ -1,10 +1,10 @@
-import { msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
+import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
 import { z } from 'zod';

 import { ZRecipientActionAuthTypesSchema } from '@documenso/lib/types/document-auth';

 import { ZMapNegativeOneToUndefinedSchema } from './add-settings.types';
-import { DocumentSigningOrder, RecipientRole } from '.prisma/client';

 export const ZAddSignersFormSchema = z
  .object({
--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@@ -1,8 +1,9 @@
-'use client';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Field, Recipient } from '@prisma/client';
+import { DocumentDistributionMethod, DocumentStatus, RecipientRole } from '@prisma/client';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';

@@ -10,12 +11,6 @@ import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-
 import type { TDocument } from '@documenso/lib/types/document';
 import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
 import { formatSigningLink } from '@documenso/lib/utils/recipients';
-import type { Field, Recipient } from '@documenso/prisma/client';
-import {
-  DocumentDistributionMethod,
-  DocumentStatus,
-  RecipientRole,
-} from '@documenso/prisma/client';
 import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';

--- a/packages/ui/primitives/document-flow/add-subject.types.ts
+++ b/packages/ui/primitives/document-flow/add-subject.types.ts
@@ -1,9 +1,8 @@
+import { DocumentDistributionMethod } from '@prisma/client';
 import { z } from 'zod';

 import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';

-import { DocumentDistributionMethod } from '.prisma/client';
-
 export const ZAddSubjectFormSchema = z.object({
  meta: z.object({
    subject: z.string(),
--- a/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
+++ b/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
@@ -20,15 +20,13 @@ export const CheckboxField = ({ field }: CheckboxFieldProps) => {
  }

  if (parsedFieldMeta && (!parsedFieldMeta.values || parsedFieldMeta.values.length === 0)) {
-    return (
-      <FieldIcon fieldMeta={field.fieldMeta} type={field.type} signerEmail={field.signerEmail} />
-    );
+    return <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />;
  }

  return (
    <div className="flex flex-col gap-y-1">
      {!parsedFieldMeta?.values ? (
-        <FieldIcon fieldMeta={field.fieldMeta} type={field.type} signerEmail={field.signerEmail} />
+        <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />
      ) : (
        parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => (
          <div key={index} className="flex items-center gap-x-1.5">
--- a/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
+++ b/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
@@ -20,15 +20,13 @@ export const RadioField = ({ field }: RadioFieldProps) => {
  }

  if (parsedFieldMeta && (!parsedFieldMeta.values || parsedFieldMeta.values.length === 0)) {
-    return (
-      <FieldIcon fieldMeta={field.fieldMeta} type={field.type} signerEmail={field.signerEmail} />
-    );
+    return <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />;
  }

  return (
    <div className="flex flex-col gap-y-2">
      {!parsedFieldMeta?.values ? (
-        <FieldIcon fieldMeta={field.fieldMeta} type={field.type} signerEmail={field.signerEmail} />
+        <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />
      ) : (
        <RadioGroup className="gap-y-1">
          {parsedFieldMeta.values?.map((item, index) => (
--- a/packages/ui/primitives/document-flow/document-flow-root.tsx
+++ b/packages/ui/primitives/document-flow/document-flow-root.tsx
@@ -1,11 +1,10 @@
-'use client';
-
 import type { HTMLAttributes } from 'react';
 import React from 'react';

 import type { MessageDescriptor } from '@lingui/core';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { motion } from 'framer-motion';

 import { cn } from '../../lib/utils';
--- a/packages/ui/primitives/document-flow/field-icon.tsx
+++ b/packages/ui/primitives/document-flow/field-icon.tsx
@@ -1,4 +1,5 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
+import { FieldType } from '@prisma/client';
 import {
  CalendarDays,
  CheckSquare,
@@ -12,15 +13,12 @@ import {
 } from 'lucide-react';

 import type { TFieldMetaSchema as FieldMetaType } from '@documenso/lib/types/field-meta';
-import { FieldType } from '@documenso/prisma/client';

 import { cn } from '../../lib/utils';

 type FieldIconProps = {
  fieldMeta: FieldMetaType;
  type: FieldType;
-  signerEmail?: string;
-  fontCaveatClassName?: string;
 };

 const fieldIcons = {
@@ -35,18 +33,12 @@ const fieldIcons = {
  [FieldType.DROPDOWN]: { icon: ChevronDown, label: 'Select' },
 };

-export const FieldIcon = ({
-  fieldMeta,
-  type,
-  signerEmail,
-  fontCaveatClassName,
-}: FieldIconProps) => {
+export const FieldIcon = ({ fieldMeta, type }: FieldIconProps) => {
  if (type === 'SIGNATURE' || type === 'FREE_SIGNATURE') {
    return (
      <div
        className={cn(
-          'text-field-card-foreground flex items-center justify-center gap-x-1 text-[clamp(0.575rem,25cqw,1.2rem)]',
-          fontCaveatClassName,
+          'text-field-card-foreground font-signature flex items-center justify-center gap-x-1 text-[clamp(0.575rem,25cqw,1.2rem)]',
        )}
      >
        <Trans>Signature</Trans>
--- a/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
+++ b/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
@@ -1,10 +1,9 @@
-'use client';
-
 import { forwardRef, useEffect, useState } from 'react';

 import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { FieldType } from '@prisma/client';
 import { match } from 'ts-pattern';

 import {
@@ -21,7 +20,6 @@ import {
  type TTextFieldMeta as TextFieldMeta,
  ZFieldMetaSchema,
 } from '@documenso/lib/types/field-meta';
-import { FieldType } from '@documenso/prisma/client';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 import type { FieldFormType } from './add-fields';
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@@ -1,9 +1,5 @@
-'use client';
-
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

-import { Caveat } from 'next/font/google';
-
 import { CopyPlus, Settings2, Trash } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
@@ -22,13 +18,6 @@ import type { TDocumentFlowFormSchema } from './types';

 type Field = TDocumentFlowFormSchema['fields'][0];

-const fontCaveat = Caveat({
-  weight: ['500'],
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-caveat',
-});
-
 export type FieldItemProps = {
  field: Field;
  passive?: boolean;
@@ -254,12 +243,7 @@ export const FieldItem = ({
          .with('CHECKBOX', () => <CheckboxField field={field} />)
          .with('RADIO', () => <RadioField field={field} />)
          .otherwise(() => (
-            <FieldIcon
-              fieldMeta={field.fieldMeta}
-              type={field.type}
-              signerEmail={field.signerEmail}
-              fontCaveatClassName={fontCaveat.className}
-            />
+            <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />
          ))}

        {!hideRecipients && (
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import { useEffect, useState } from 'react';

-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { ChevronDown, ChevronUp, Trash } from 'lucide-react';

 import { validateCheckboxField } from '@documenso/lib/advanced-fields-validation/validate-checkbox';
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/date-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/date-field.tsx
@@ -1,5 +1,6 @@
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';

 import { validateFields as validateDateFields } from '@documenso/lib/advanced-fields-validation/validate-fields';
 import { type TDateFieldMeta as DateFieldMeta } from '@documenso/lib/types/field-meta';
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import { useEffect, useState } from 'react';

-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { ChevronDown, ChevronUp, Trash } from 'lucide-react';

 import { validateDropdownField } from '@documenso/lib/advanced-fields-validation/validate-dropdown';
@@ -172,7 +171,7 @@ export const DropdownFieldAdvancedSettings = ({
              />
              <button
                type="button"
-                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center  text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                onClick={() => removeValue(index)}
              >
                <Trash className="h-5 w-5" />
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/email-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/email-field.tsx
@@ -1,5 +1,6 @@
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';

 import { validateFields as validateEmailFields } from '@documenso/lib/advanced-fields-validation/validate-fields';
 import { type TEmailFieldMeta as EmailFieldMeta } from '@documenso/lib/types/field-meta';
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/initials-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/initials-field.tsx
@@ -1,5 +1,6 @@
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';

 import { validateFields as validateInitialsFields } from '@documenso/lib/advanced-fields-validation/validate-fields';
 import { type TInitialsFieldMeta as InitialsFieldMeta } from '@documenso/lib/types/field-meta';
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/name-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/name-field.tsx
@@ -1,5 +1,6 @@
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';

 import { validateFields as validateNameFields } from '@documenso/lib/advanced-fields-validation/validate-fields';
 import { type TNameFieldMeta as NameFieldMeta } from '@documenso/lib/types/field-meta';
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/number-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/number-field.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import { useState } from 'react';

-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { ChevronDown, ChevronUp } from 'lucide-react';

 import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
@@ -38,12 +37,12 @@ export const NumberFieldAdvancedSettings = ({
  const [showValidation, setShowValidation] = useState(false);

  const handleInput = (field: keyof NumberFieldMeta, value: string | boolean) => {
-    const userValue = field === 'value' ? value : fieldState.value ?? 0;
+    const userValue = field === 'value' ? value : (fieldState.value ?? 0);
    const userMinValue = field === 'minValue' ? Number(value) : Number(fieldState.minValue ?? 0);
    const userMaxValue = field === 'maxValue' ? Number(value) : Number(fieldState.maxValue ?? 0);
    const readOnly = field === 'readOnly' ? Boolean(value) : Boolean(fieldState.readOnly);
    const required = field === 'required' ? Boolean(value) : Boolean(fieldState.required);
-    const numberFormat = field === 'numberFormat' ? String(value) : fieldState.numberFormat ?? '';
+    const numberFormat = field === 'numberFormat' ? String(value) : (fieldState.numberFormat ?? '');
    const fontSize = field === 'fontSize' ? Number(value) : Number(fieldState.fontSize ?? 14);

    const valueErrors = validateNumberField(String(userValue), {
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
@@ -1,8 +1,6 @@
-'use client';
-
 import { useEffect, useState } from 'react';

-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { ChevronDown, ChevronUp, Trash } from 'lucide-react';

 import { validateRadioField } from '@documenso/lib/advanced-fields-validation/validate-radio';
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/text-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/text-field.tsx
@@ -1,5 +1,6 @@
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';

 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
 import { type TTextFieldMeta as TextFieldMeta } from '@documenso/lib/types/field-meta';
@@ -22,7 +23,7 @@ export const TextFieldAdvancedSettings = ({
  const { _ } = useLingui();

  const handleInput = (field: keyof TextFieldMeta, value: string | boolean) => {
-    const text = field === 'text' ? String(value) : fieldState.text ?? '';
+    const text = field === 'text' ? String(value) : (fieldState.text ?? '');
    const limit =
      field === 'characterLimit' ? Number(value) : Number(fieldState.characterLimit ?? 0);
    const fontSize = field === 'fontSize' ? Number(value) : Number(fieldState.fontSize ?? 14);
--- a/packages/ui/primitives/document-flow/missing-signature-field-dialog.tsx
+++ b/packages/ui/primitives/document-flow/missing-signature-field-dialog.tsx
@@ -1,6 +1,4 @@
-'use client';
-
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { DialogClose } from '@radix-ui/react-dialog';

 import { Button } from '@documenso/ui/primitives/button';
--- a/packages/ui/primitives/document-flow/send-document-action-dialog.tsx
+++ b/packages/ui/primitives/document-flow/send-document-action-dialog.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';

-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';

 import type { ButtonProps } from '../button';
--- a/packages/ui/primitives/document-flow/show-field-item.tsx
+++ b/packages/ui/primitives/document-flow/show-field-item.tsx
@@ -1,39 +1,24 @@
-'use client';
-
-import { Caveat } from 'next/font/google';
-
 import { useLingui } from '@lingui/react';
-import type { Prisma } from '@prisma/client';
+import { FieldType, type Prisma } from '@prisma/client';
 import { createPortal } from 'react-dom';

 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
 import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
-import { FieldType } from '@documenso/prisma/client';

 import { cn } from '../../lib/utils';
 import { Card, CardContent } from '../card';
 import { FRIENDLY_FIELD_TYPE } from './types';

-const fontCaveat = Caveat({
-  weight: ['500'],
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-caveat',
-});
-
 export type ShowFieldItemProps = {
  field: Prisma.FieldGetPayload<null>;
  recipients: Prisma.RecipientGetPayload<null>[];
 };

-export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
+export const ShowFieldItem = ({ field }: ShowFieldItemProps) => {
  const { _ } = useLingui();

  const coords = useFieldPageCoords(field);

-  const signerEmail =
-    recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '';
-
  return createPortal(
    <div
      className={cn('pointer-events-none absolute z-10 opacity-75')}
@@ -48,7 +33,7 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
        <CardContent
          className={cn(
            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-0 text-[clamp(0.575rem,1.8cqw,1.2rem)] leading-none',
-            field.type === FieldType.SIGNATURE && fontCaveat.className,
+            field.type === FieldType.SIGNATURE && 'font-signature',
          )}
        >
          {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
--- a/packages/ui/primitives/document-flow/types.ts
+++ b/packages/ui/primitives/document-flow/types.ts
@@ -1,9 +1,9 @@
 import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
+import { FieldType } from '@prisma/client';
 import { z } from 'zod';

 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import { FieldType } from '@documenso/prisma/client';

 export const ZDocumentFlowFormSchema = z.object({
  title: z.string().min(1),
--- a/packages/ui/primitives/document-password-dialog.tsx
+++ b/packages/ui/primitives/document-password-dialog.tsx
@@ -1,8 +1,9 @@
 import { useEffect } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';

--- a/packages/ui/primitives/dropdown-menu.tsx
+++ b/packages/ui/primitives/dropdown-menu.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
--- a/packages/ui/primitives/element-visible.tsx
+++ b/packages/ui/primitives/element-visible.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useEffect, useState } from 'react';

 export type ElementVisibleProps = {
--- a/packages/ui/primitives/hover-card.tsx
+++ b/packages/ui/primitives/hover-card.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
--- a/packages/ui/primitives/label.tsx
+++ b/packages/ui/primitives/label.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import * as React from 'react';

 import * as LabelPrimitive from '@radix-ui/react-label';
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';

 import { cn } from '../lib/utils';

--- a/packages/ui/primitives/lazy-pdf-viewer.tsx
+++ b/packages/ui/primitives/lazy-pdf-viewer.tsx
@@ -1,26 +1,31 @@
-'use client';
+// Todo: Not sure if this actually makes it client-only.
+import { Suspense, lazy } from 'react';

-import dynamic from 'next/dynamic';
-
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
+import { Await } from 'react-router';

-export const LazyPDFViewer = dynamic(async () => import('./pdf-viewer'), {
-  ssr: false,
-  loading: () => (
-    <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-      <Loader className="text-documenso h-12 w-12 animate-spin" />
+const LoadingComponent = () => (
+  <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+    <Loader className="text-documenso h-12 w-12 animate-spin" />
+    <p className="text-muted-foreground mt-4">
+      <Trans>Loading document...</Trans>
+    </p>
+  </div>
+);

-      <p className="text-muted-foreground mt-4">
-        <Trans>Loading document...</Trans>
-      </p>
-    </div>
-  ),
-});
+export const LazyPDFViewerImport = lazy(async () => import('./pdf-viewer'));

-/**
- * LazyPDFViewer variant with no loader.
- */
-export const LazyPDFViewerNoLoader = dynamic(async () => import('./pdf-viewer'), {
-  ssr: false,
-});
+export const LazyPDFViewer = (props: React.ComponentProps<typeof LazyPDFViewerImport>) => (
+  <Suspense fallback={<LoadingComponent />}>
+    <Await resolve={LazyPDFViewerImport}>
+      <LazyPDFViewerImport {...props} />
+    </Await>
+  </Suspense>
+);
+
+export const LazyPDFViewerNoLoader = (props: React.ComponentProps<typeof LazyPDFViewer>) => (
+  <Suspense fallback={null}>
+    <LazyPDFViewerImport {...props} />
+  </Suspense>
+);
--- a/packages/ui/primitives/menubar.tsx
+++ b/packages/ui/primitives/menubar.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as MenubarPrimitive from '@radix-ui/react-menubar';
--- a/packages/ui/primitives/multi-select-combobox.tsx
+++ b/packages/ui/primitives/multi-select-combobox.tsx
@@ -1,10 +1,8 @@
-'use client';
-
 import * as React from 'react';

 import type { MessageDescriptor } from '@lingui/core';
-import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { AnimatePresence } from 'framer-motion';
 import { Check, ChevronsUpDown, Loader, XIcon } from 'lucide-react';

@@ -24,7 +22,7 @@ type ComboBoxOption<T = OptionValue> = {
 };

 type MultiSelectComboboxProps<T = OptionValue> = {
-  emptySelectionPlaceholder?: React.ReactNode | string;
+  emptySelectionPlaceholder?: React.ReactElement | string;
  enableClearAllButton?: boolean;
  loading?: boolean;
  inputPlaceholder?: MessageDescriptor;
--- a/packages/ui/primitives/password-input.tsx
+++ b/packages/ui/primitives/password-input.tsx
@@ -4,7 +4,8 @@ import { Eye, EyeOff } from 'lucide-react';

 import { cn } from '../lib/utils';
 import { Button } from './button';
-import { Input, InputProps } from './input';
+import type { InputProps } from './input';
+import { Input } from './input';

 const PasswordInput = React.forwardRef<HTMLInputElement, Omit<InputProps, 'type'>>(
  ({ className, ...props }, ref) => {
--- a/packages/ui/primitives/pdf-viewer.tsx
+++ b/packages/ui/primitives/pdf-viewer.tsx
@@ -1,9 +1,9 @@
-'use client';
-
 import React, { useEffect, useMemo, useRef, useState } from 'react';

-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentData } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import { type PDFDocumentProxy, PasswordResponses } from 'pdfjs-dist';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
@@ -13,7 +13,6 @@ import { match } from 'ts-pattern';

 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
-import type { DocumentData } from '@documenso/prisma/client';

 import { cn } from '../lib/utils';
 import { PasswordDialog } from './document-password-dialog';
--- a/packages/ui/primitives/pin-input.tsx
+++ b/packages/ui/primitives/pin-input.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import { OTPInput, OTPInputContext } from 'input-otp';
--- a/packages/ui/primitives/popover.tsx
+++ b/packages/ui/primitives/popover.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as PopoverPrimitive from '@radix-ui/react-popover';
--- a/packages/ui/primitives/progress.tsx
+++ b/packages/ui/primitives/progress.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as ProgressPrimitive from '@radix-ui/react-progress';
--- a/packages/ui/primitives/radio-group.tsx
+++ b/packages/ui/primitives/radio-group.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
--- a/packages/ui/primitives/recipient-role-icons.tsx
+++ b/packages/ui/primitives/recipient-role-icons.tsx
@@ -1,7 +1,6 @@
+import type { RecipientRole } from '@prisma/client';
 import { BadgeCheck, Copy, Eye, PencilLine } from 'lucide-react';

-import type { RecipientRole } from '.prisma/client';
-
 export const ROLE_ICONS: Record<RecipientRole, JSX.Element> = {
  SIGNER: <PencilLine className="h-4 w-4" />,
  APPROVER: <BadgeCheck className="h-4 w-4" />,
--- a/packages/ui/primitives/scroll-area.tsx
+++ b/packages/ui/primitives/scroll-area.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
--- a/packages/ui/primitives/select.tsx
+++ b/packages/ui/primitives/select.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as SelectPrimitive from '@radix-ui/react-select';
--- a/packages/ui/primitives/separator.tsx
+++ b/packages/ui/primitives/separator.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as SeparatorPrimitive from '@radix-ui/react-separator';
--- a/packages/ui/primitives/sheet.tsx
+++ b/packages/ui/primitives/sheet.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as SheetPrimitive from '@radix-ui/react-dialog';
--- a/packages/ui/primitives/signature-pad/point.ts
+++ b/packages/ui/primitives/signature-pad/point.ts
@@ -1,4 +1,4 @@
-import {
+import type {
  MouseEvent as ReactMouseEvent,
  PointerEvent as ReactPointerEvent,
  TouchEvent as ReactTouchEvent,
--- a/packages/ui/primitives/signature-pad/signature-pad.tsx
+++ b/packages/ui/primitives/signature-pad/signature-pad.tsx
@@ -1,11 +1,7 @@
-'use client';
-
 import type { HTMLAttributes, MouseEvent, PointerEvent, TouchEvent } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';

-import { Caveat } from 'next/font/google';
-
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { Undo2, Upload } from 'lucide-react';
 import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
@@ -24,13 +20,6 @@ import { cn } from '../../lib/utils';
 import { getSvgPathFromStroke } from './helper';
 import { Point } from './point';

-const fontCaveat = Caveat({
-  weight: ['500'],
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-caveat',
-});
-
 const DPI = 2;

 const isBase64Image = (value: string) => value.startsWith('data:image/png;base64,');
@@ -312,7 +301,7 @@ export const SignaturePad = ({
      if (ctx) {
        const canvasWidth = $el.current.width;
        const canvasHeight = $el.current.height;
-        const fontFamily = String(fontCaveat.style.fontFamily);
+        const fontFamily = 'Caveat';

        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.textAlign = 'center';
@@ -479,6 +468,7 @@ export const SignaturePad = ({
      })}
    >
      <canvas
+        data-testid="signature-pad"
        ref={$el}
        className={cn(
          'relative block',
--- a/packages/ui/primitives/slider.tsx
+++ b/packages/ui/primitives/slider.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as SliderPrimitive from '@radix-ui/react-slider';
--- a/packages/ui/primitives/switch.tsx
+++ b/packages/ui/primitives/switch.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as SwitchPrimitives from '@radix-ui/react-switch';
--- a/packages/ui/primitives/tabs.tsx
+++ b/packages/ui/primitives/tabs.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as TabsPrimitive from '@radix-ui/react-tabs';
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@@ -1,11 +1,10 @@
-'use client';
-
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

-import { Caveat } from 'next/font/google';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Field, Recipient } from '@prisma/client';
+import { FieldType, RecipientRole } from '@prisma/client';
 import {
  CalendarDays,
  CheckSquare,
@@ -31,8 +30,6 @@ import {
 } from '@documenso/lib/types/field-meta';
 import { nanoid } from '@documenso/lib/universal/id';
 import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
-import type { Field, Recipient } from '@documenso/prisma/client';
-import { FieldType, RecipientRole } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -64,13 +61,6 @@ import { Form, FormControl, FormField, FormItem, FormLabel } from '../form/form'
 import { useStep } from '../stepper';
 import type { TAddTemplateFieldsFormSchema } from './add-template-fields.types';

-const fontCaveat = Caveat({
-  weight: ['500'],
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-caveat',
-});
-
 const MIN_HEIGHT_PX = 12;
 const MIN_WIDTH_PX = 36;

@@ -699,8 +689,7 @@ export const AddTemplateFieldsFormPartial = ({
                        <CardContent className="flex flex-col items-center justify-center px-6 py-4">
                          <p
                            className={cn(
-                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-lg font-normal',
-                              fontCaveat.className,
+                              'text-muted-foreground group-data-[selected]:text-foreground font-signature flex items-center justify-center gap-x-1.5 text-lg font-normal',
                            )}
                          >
                            <Trans>Signature</Trans>
--- a/packages/ui/primitives/template-flow/add-template-fields.types.ts
+++ b/packages/ui/primitives/template-flow/add-template-fields.types.ts
@@ -1,7 +1,7 @@
+import { FieldType } from '@prisma/client';
 import { z } from 'zod';

 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import { FieldType } from '@documenso/prisma/client';

 export const ZAddTemplateFieldsFormSchema = z.object({
  fields: z.array(
--- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
@@ -1,27 +1,21 @@
-'use client';
-
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';

 import type { DropResult, SensorAPI } from '@hello-pangea/dnd';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { TemplateDirectLink } from '@prisma/client';
+import { DocumentSigningOrder, type Field, type Recipient, RecipientRole } from '@prisma/client';
 import { motion } from 'framer-motion';
 import { GripVerticalIcon, Link2Icon, Plus, Trash } from 'lucide-react';
-import { useSession } from 'next-auth/react';
 import { useFieldArray, useForm } from 'react-hook-form';

+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
 import { generateRecipientPlaceholder } from '@documenso/lib/utils/templates';
-import type { TemplateDirectLink } from '@documenso/prisma/client';
-import {
-  DocumentSigningOrder,
-  type Field,
-  type Recipient,
-  RecipientRole,
-} from '@documenso/prisma/client';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
@@ -71,9 +65,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
  const $sensorApi = useRef<SensorAPI | null>(null);

  const { _ } = useLingui();
-  const { data: session } = useSession();
-
-  const user = session?.user;
+  const { user } = useSession();

  const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(() =>
    recipients.length > 1 ? recipients.length + 1 : 2,
@@ -174,8 +166,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
  const onAddPlaceholderSelfRecipient = () => {
    appendSigner({
      formId: nanoid(12),
-      name: user?.name ?? '',
-      email: user?.email ?? '',
+      name: user.name ?? '',
+      email: user.email ?? '',
      role: RecipientRole.SIGNER,
      signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
    });
--- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.types.ts
+++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.types.ts
@@ -1,7 +1,7 @@
+import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
 import { z } from 'zod';

 import { ZRecipientActionAuthTypesSchema } from '@documenso/lib/types/document-auth';
-import { DocumentSigningOrder, RecipientRole } from '@documenso/prisma/client';

 import { ZMapNegativeOneToUndefinedSchema } from '../document-flow/add-settings.types';

--- a/packages/ui/primitives/template-flow/add-template-settings.tsx
+++ b/packages/ui/primitives/template-flow/add-template-settings.tsx
@@ -1,10 +1,10 @@
-'use client';
-
 import { useEffect } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentVisibility, TeamMemberRole } from '@prisma/client';
+import { DocumentDistributionMethod, type Field, type Recipient } from '@prisma/client';
 import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
@@ -16,8 +16,6 @@ import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants
 import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
 import type { TTemplate } from '@documenso/lib/types/template';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-import { DocumentVisibility, TeamMemberRole } from '@documenso/prisma/client';
-import { DocumentDistributionMethod, type Field, type Recipient } from '@documenso/prisma/client';
 import type { TDocumentMetaDateFormat } from '@documenso/trpc/server/document-router/schema';
 import {
  DocumentGlobalAuthAccessSelect,
--- a/packages/ui/primitives/template-flow/add-template-settings.types.tsx
+++ b/packages/ui/primitives/template-flow/add-template-settings.types.tsx
@@ -1,3 +1,5 @@
+import { DocumentDistributionMethod } from '@prisma/client';
+import { DocumentVisibility } from '@prisma/client';
 import { z } from 'zod';

 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
@@ -9,14 +11,12 @@ import {
 } from '@documenso/lib/types/document-auth';
 import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
 import { isValidRedirectUrl } from '@documenso/lib/utils/is-valid-redirect-url';
-import { DocumentVisibility } from '@documenso/prisma/client';
 import {
  ZDocumentMetaDateFormatSchema,
  ZDocumentMetaTimezoneSchema,
 } from '@documenso/trpc/server/document-router/schema';

 import { ZMapNegativeOneToUndefinedSchema } from '../document-flow/add-settings.types';
-import { DocumentDistributionMethod } from '.prisma/client';

 export const ZAddTemplateSettingsFormSchema = z.object({
  title: z.string().trim().min(1, { message: "Title can't be empty" }),
--- a/packages/ui/primitives/theme-switcher.tsx
+++ b/packages/ui/primitives/theme-switcher.tsx
@@ -1,22 +1,20 @@
 import { motion } from 'framer-motion';
 import { Monitor, MoonStar, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
+import { Theme, useTheme } from 'remix-themes';

 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';

-import { THEMES_TYPE } from './constants';
-
 export const ThemeSwitcher = () => {
-  const { theme, setTheme } = useTheme();
+  const [theme, setTheme] = useTheme();
  const isMounted = useIsMounted();

  return (
    <div className="bg-muted flex items-center gap-x-1 rounded-full p-1">
      <button
        className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
-        onClick={() => setTheme(THEMES_TYPE.LIGHT)}
+        onClick={() => setTheme(Theme.LIGHT)}
      >
-        {isMounted && theme === THEMES_TYPE.LIGHT && (
+        {isMounted && theme === Theme.LIGHT && (
          <motion.div
            className="bg-background absolute inset-0 rounded-full mix-blend-color-burn"
            layoutId="selected-theme"
@@ -27,9 +25,9 @@ export const ThemeSwitcher = () => {

      <button
        className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
-        onClick={() => setTheme(THEMES_TYPE.DARK)}
+        onClick={() => setTheme(Theme.DARK)}
      >
-        {isMounted && theme === THEMES_TYPE.DARK && (
+        {isMounted && theme === Theme.DARK && (
          <motion.div
            className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
            layoutId="selected-theme"
@@ -41,9 +39,9 @@ export const ThemeSwitcher = () => {

      <button
        className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
-        onClick={() => setTheme(THEMES_TYPE.SYSTEM)}
+        onClick={() => setTheme(null)}
      >
-        {isMounted && theme === THEMES_TYPE.SYSTEM && (
+        {isMounted && theme === null && (
          <motion.div
            className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
            layoutId="selected-theme"
--- a/packages/ui/primitives/toaster.tsx
+++ b/packages/ui/primitives/toaster.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
  Toast,
  ToastClose,
--- a/packages/ui/primitives/toggle.tsx
+++ b/packages/ui/primitives/toggle.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as TogglePrimitive from '@radix-ui/react-toggle';
--- a/packages/ui/primitives/tooltip.tsx
+++ b/packages/ui/primitives/tooltip.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';

 import * as TooltipPrimitive from '@radix-ui/react-tooltip';