fix: reduce text size?

fix: set fixed with for signature pad and input
feat: use dancing script font locally
2026-07-12 22:15:01 +10:00 · 2024-02-15 10:05:36 +00:00 · 2024-02-05 11:18:03 +00:00 · 2024-01-28 18:19:42 +00:00 · 2024-01-28 18:05:17 +00:00 · 2024-01-28 18:03:10 +00:00
53 changed files with 444 additions and 1022 deletions
@@ -1,39 +1,35 @@
-name: 'General Improvement Request'
-description: 'Suggest a minor enhancement or improvement for this project'
-title: '[Title for your improvement suggestion]'
+name: 'General Improvement'
+description: Suggest a minor enhancement or improvement for this project
 body:
+  - type: markdown
+    attributes:
+      value: Please provide a clear and concise title for your improvement suggestion
  - type: textarea
    attributes:
-      label: 'Describe the improvement you are suggesting in detail'
-      description: 'Explain why this improvement would be beneficial. Share any context, pain points, or reasons for suggesting this change.'
-    validations:
-      required: true
+      label: Improvement Description
+      description: Describe the improvement you are suggesting in detail. Explain what specific aspect of the project it addresses or enhances.
  - type: textarea
-    id: description
    attributes:
-      label: 'Additional Information & Alternatives (optional)'
-      description: 'Are there any additional context or information that might be relevant to the improvement suggestion.'
-    validations:
-      required: false
-  - type: dropdown
-    id: assignee
+      label: Rationale
+      description: Explain why this improvement would be beneficial. Share any context, pain points, or reasons for suggesting this change.
+  - type: textarea
    attributes:
-      label: 'Do you want to work on this improvement?'
-      multiple: false
-      options:
-        - 'No'
-        - 'Yes'
-      default: 0
-    validations:
-      required: true
+      label: Proposed Solution
+      description: If you have a suggestion for how this improvement could be implemented, describe it here. Include any technical details, design suggestions, or other relevant information.
+  - type: textarea
+    attributes:
+      label: Alternatives (optional)
+      description: Are there any alternative approaches to achieve the same improvement? Describe other ways to address the issue or enhance the project.
+  - type: textarea
+    attributes:
+      label: Additional Context
+      description: Add any additional context or information that might be relevant to the improvement suggestion.
  - type: checkboxes
    attributes:
-      label: 'Please check the boxes that apply to this improvement suggestion.'
+      label: Please check the boxes that apply to this improvement suggestion.
      options:
-        - label: 'I have searched the existing issues and improvement suggestions to avoid duplication.'
-        - label: 'I have provided a clear description of the improvement being suggested.'
-        - label: 'I have explained the rationale behind this improvement.'
-        - label: 'I have included any relevant technical details or design suggestions.'
-        - label: 'I understand that this is a suggestion and that there is no guarantee of implementation.'
-    validations:
-      required: true
+        - label: I have searched the existing issues and improvement suggestions to avoid duplication.
+        - label: I have provided a clear description of the improvement being suggested.
+        - label: I have explained the rationale behind this improvement.
+        - label: I have included any relevant technical details or design suggestions.
+        - label: I understand that this is a suggestion and that there is no guarantee of implementation.
@@ -1,5 +1,3 @@
->We are nominated for a Product Hunt Gold Kitty 😺✨ and appreciate any support: https://documen.so/kitty
-
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">

 <p align="center" style="margin-top: 20px">
@@ -1,28 +0,0 @@
---
-title: Jan 10th Email Provider Security Incident
-description: On January 10th, 2022, we were notified by our email provider that they had experienced a security incident.
-authorName: 'Lucas Smith'
-authorImage: '/blog/blog-author-lucas.png'
-authorRole: 'Co-Founder'
-date: 2024-01-17
-tags:
-  - Security
---
-
-On January 10th, 2024 we were notified by our email provider that a security incident had occurred. This security incident which had started on January 7th led to a bad actor obtaining access to their database which contains ours and other customer’s data.
-
-We understand that during this security incident the following has been accessed:
-
- Email addresses.
- Metadata on emails sent excluding the email body.
-
-While the incident is unfortunate we are pleased with the remediation and the processes that our email provider has put in place to help avoid this kind of situation in the future. Since the incident, our provider has rectified the issue and has engaged a security company to conduct an exhaustive investigation and to help improve their security posture moving forward.
-
-We remain steadfast in our commitment to our current email provider, and will not be taking any further action with relation to changing providers.
-
-We are now working with our legal counsel to ensure that we provide the appropriate notice to all our customers in each jurisdiction. If you have any further questions on this incident please feel free to contact our support team at [support@documenso.com](mailto:support@documenso.com).
-
-We appreciate your ongoing support in this matter.
-
-You can read more on the incident on our providers blog post below:
-[https://resend.com/blog/incident-report-for-january-10-2024](https://resend.com/blog/incident-report-for-january-10-2024)
@@ -1,4 +1,3 @@
-const million = require('million/compiler');
 /* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require('fs');
 const path = require('path');
@@ -6,11 +5,11 @@ const { withContentlayer } = require('next-contentlayer');

 const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];

-for (file of ENV_FILES) {
+ENV_FILES.forEach((file) => {
  require('dotenv').config({
    path: path.join(__dirname, `../../${file}`),
  });
-}
+});

 // !: This is a temp hack to get caveat working without placing it back in the public directory.
 // !: By inlining this at build time we should be able to sign faster.
@@ -95,6 +94,4 @@ const config = {
  },
 };

-module.exports = million.next(
-  withContentlayer(config), { auto: { rsc: true } }
-);
+module.exports = withContentlayer(config);
@@ -24,7 +24,6 @@
    "lucide-react": "^0.279.0",
    "luxon": "^3.4.0",
    "micro": "^10.0.1",
-    "million": "^2.6.4",
    "next": "14.0.3",
    "next-auth": "4.24.5",
    "next-contentlayer": "^0.3.4",
@@ -20,7 +20,7 @@ export const generateMetadata = ({ params }: { params: { content: string } }) =>

 const mdxComponents: MDXComponents = {
  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
-    <Image width={props.width} height={props.height} src={props.src} alt={props.alt ?? ''} />
+    <Image {...props} alt={props.alt ?? ''} />
  ),
 };

@@ -25,7 +25,7 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {

 const mdxComponents: MDXComponents = {
  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
-    <Image width={props.width} height={props.height} src={props.src} alt={props.alt ?? ''} />
+    <Image {...props} alt={props.alt ?? ''} />
  ),
 };

@@ -1,6 +1,6 @@
 'use client';

-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';

 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

@@ -24,6 +24,7 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
  label,
  chartHeight = 400,
  extraInfo,
+  ...props
 }: BarMetricProps<T>) => {
  const formattedData = Object.keys(data)
    .map((key) => ({
@@ -33,7 +34,7 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
    .reverse();

  return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={cn('flex flex-col', className)} {...props}>
      <div className="flex items-center px-4">
        <h3 className="text-lg font-semibold">{title}</h3>
        <span>{extraInfo}</span>
@@ -1,7 +1,6 @@
 'use client';

-import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { HTMLAttributes, useEffect, useState } from 'react';

 import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';

@@ -42,14 +41,14 @@ const renderCustomizedLabel = ({

 export type CapTableProps = HTMLAttributes<HTMLDivElement>;

-export const CapTable = ({ className }: CapTableProps) => {
+export const CapTable = ({ className, ...props }: CapTableProps) => {
  const [isSSR, setIsSSR] = useState(true);

  useEffect(() => {
    setIsSSR(false);
  }, []);
  return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={cn('flex flex-col', className)} {...props}>
      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>

      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
@@ -77,7 +76,7 @@ export const CapTable = ({ className }: CapTableProps) => {
            />
            <Tooltip
              formatter={(percent: number, name, props) => {
-                return [`${percent}%`, name || props.name || props.payload.name];
+                return [`${percent}%`, name || props['name'] || props['payload']['name']];
              }}
            />
          </PieChart>
@@ -1,6 +1,6 @@
 'use client';

-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';

 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

@@ -11,14 +11,14 @@ export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
  data: Record<string, string | number>[];
 };

-export const FundingRaised = ({ className, data }: FundingRaisedProps) => {
+export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
  const formattedData = data.map((item) => ({
    amount: Number(item.amount),
    date: formatMonth(item.date as string),
  }));

  return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={cn('flex flex-col', className)} {...props}>
      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>

      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';

 import { cn } from '@documenso/ui/lib/utils';

@@ -7,9 +7,9 @@ export type MetricCardProps = HTMLAttributes<HTMLDivElement> & {
  value: string;
 };

-export const MetricCard = ({ className, title, value }: MetricCardProps) => {
+export const MetricCard = ({ className, title, value, ...props }: MetricCardProps) => {
  return (
-    <div className={cn('rounded-md border p-4 shadow-sm hover:shadow', className)}>
+    <div className={cn('rounded-md border p-4 shadow-sm hover:shadow', className)} {...props}>
      <h4 className="text-muted-foreground text-sm font-medium">{title}</h4>

      <p className="mb-2 mt-6 text-4xl font-bold">{value}</p>
@@ -141,12 +141,7 @@ export default async function OpenPage() {
        <p className="text-muted-foreground mt-4 max-w-[60ch] text-center text-lg leading-normal">
          All our metrics, finances, and learnings are public. We believe in transparency and want
          to share our journey with you. You can read more about why here:{' '}
-          <a
-            className="font-bold"
-            href="https://documenso.com/blog/pre-seed"
-            target="_blank"
-            rel="noreferrer"
-          >
+          <a className="font-bold" href="https://documenso.com/blog/pre-seed" target="_blank">
            Announcing Open Metrics
          </a>
        </p>
@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';

 import { cn } from '@documenso/ui/lib/utils';
 import {
@@ -14,9 +14,9 @@ import { SALARY_BANDS } from '~/app/(marketing)/open/data';

 export type SalaryBandsProps = HTMLAttributes<HTMLDivElement>;

-export const SalaryBands = ({ className }: SalaryBandsProps) => {
+export const SalaryBands = ({ className, ...props }: SalaryBandsProps) => {
  return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={cn('flex flex-col', className)} {...props}>
      <h3 className="px-4 text-lg font-semibold">Global Salary Bands</h3>

      <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">
@@ -30,7 +30,7 @@ export const SalaryBands = ({ className }: SalaryBandsProps) => {
          </TableHeader>
          <TableBody>
            {SALARY_BANDS.map((band, index) => (
-              <TableRow key={band.title + index.toString()}>
+              <TableRow key={index}>
                <TableCell className="font-medium">{band.title}</TableCell>
                <TableCell>{band.seniority}</TableCell>
                <TableCell className="text-right">
@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';

 import { cn } from '@documenso/ui/lib/utils';
 import {
@@ -14,9 +14,9 @@ import { TEAM_MEMBERS } from './data';

 export type TeamMembersProps = HTMLAttributes<HTMLDivElement>;

-export const TeamMembers = ({ className }: TeamMembersProps) => {
+export const TeamMembers = ({ className, ...props }: TeamMembersProps) => {
  return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={cn('flex flex-col', className)} {...props}>
      <h2 className="px-4 text-2xl font-semibold">Team</h2>

      <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">
@@ -34,7 +34,13 @@ export const ConfettiScreen = ({
  }

  return createPortal(
-    <Confetti className="w-full" numberOfPieces={numberOfPieces} width={width} height={height} />,
+    <Confetti
+      {...props}
+      className="w-full"
+      numberOfPieces={numberOfPieces}
+      width={width}
+      height={height}
+    />,
    document.body,
  );
 };
@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';

 import Image from 'next/image';

@@ -11,9 +11,12 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';

 export type FasterSmarterBeautifulBentoProps = HTMLAttributes<HTMLDivElement>;

-export const FasterSmarterBeautifulBento = ({ className }: FasterSmarterBeautifulBentoProps) => {
+export const FasterSmarterBeautifulBento = ({
+  className,
+  ...props
+}: FasterSmarterBeautifulBentoProps) => {
  return (
-    <div className={cn('relative', className)}>
+    <div className={cn('relative', className)} {...props}>
      <div className="absolute inset-0 -z-10 flex items-center justify-center">
        <Image
          src={backgroundPattern}
@@ -35,9 +35,9 @@ const FOOTER_LINKS = [
  { href: '/privacy', text: 'Privacy' },
 ];

-export const Footer = ({ className }: FooterProps) => {
+export const Footer = ({ className, ...props }: FooterProps) => {
  return (
-    <div className={cn('border-t py-12', className)}>
+    <div className={cn('border-t py-12', className)} {...props}>
      <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-start justify-between gap-8 px-8">
        <div className="flex-shrink-0">
          <Link href="/">
@@ -53,7 +53,7 @@ export const Footer = ({ className }: FooterProps) => {
          <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-4">
            {SOCIAL_LINKS.map((link, index) => (
              <Link
-                key={link.href + index.toString()}
+                key={index}
                href={link.href}
                target="_blank"
                className="text-muted-foreground hover:text-muted-foreground/80"
@@ -67,7 +67,7 @@ export const Footer = ({ className }: FooterProps) => {
        <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">
          {FOOTER_LINKS.map((link, index) => (
            <Link
-              key={link.href + index.toString()}
+              key={index}
              href={link.href}
              target={link.target}
              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 break-words text-sm"
@@ -15,7 +15,7 @@ import { MobileNavigation } from './mobile-navigation';

 export type HeaderProps = HTMLAttributes<HTMLElement>;

-export const Header = ({ className }: HeaderProps) => {
+export const Header = ({ className, ...props }: HeaderProps) => {
  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);

  const { getFlag } = useFeatureFlags();
@@ -23,7 +23,7 @@ export const Header = ({ className }: HeaderProps) => {
  const isSinglePlayerModeMarketingEnabled = getFlag('marketing_header_single_player_mode');

  return (
-    <header className={cn('flex items-center justify-between', className)}>
+    <header className={cn('flex items-center justify-between', className)} {...props}>
      <div className="flex items-center space-x-4">
        <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
          <Image
@@ -3,8 +3,7 @@
 import Image from 'next/image';
 import Link from 'next/link';

-import type { Variants } from 'framer-motion';
-import { motion } from 'framer-motion';
+import { Variants, motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
 import { LuGithub } from 'react-icons/lu';
 import { match } from 'ts-pattern';
@@ -50,7 +49,7 @@ const HeroTitleVariants: Variants = {
  },
 };

-export const Hero = ({ className }: HeroProps) => {
+export const Hero = ({ className, ...props }: HeroProps) => {
  const event = usePlausible();

  const { getFlag } = useFeatureFlags();
@@ -75,7 +74,7 @@ export const Hero = ({ className }: HeroProps) => {
  };

  return (
-    <motion.div className={cn('relative', className)}>
+    <motion.div className={cn('relative', className)} {...props}>
      <div className="absolute -inset-24 -z-10">
        <motion.div
          className="flex h-full w-full origin-top-right items-center justify-center"
@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';

 import Image from 'next/image';

@@ -11,9 +11,9 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';

 export type OpenBuildTemplateBentoProps = HTMLAttributes<HTMLDivElement>;

-export const OpenBuildTemplateBento = ({ className }: OpenBuildTemplateBentoProps) => {
+export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => {
  return (
-    <div className={cn('relative', className)}>
+    <div className={cn('relative', className)} {...props}>
      <div className="absolute inset-0 -z-10 flex items-center justify-center">
        <Image
          src={backgroundPattern}
@@ -15,13 +15,13 @@ export type PricingTableProps = HTMLAttributes<HTMLDivElement>;

 const SELECTED_PLAN_BAR_LAYOUT_ID = 'selected-plan-bar';

-export const PricingTable = ({ className }: PricingTableProps) => {
+export const PricingTable = ({ className, ...props }: PricingTableProps) => {
  const event = usePlausible();

  const [period, setPeriod] = useState<'MONTHLY' | 'YEARLY'>('MONTHLY');

  return (
-    <div className={cn('', className)}>
+    <div className={cn('', className)} {...props}>
      <div className="flex items-center justify-center gap-x-6">
        <AnimatePresence>
          <motion.button
@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';

 import Image from 'next/image';

@@ -12,9 +12,12 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';

 export type ShareConnectPaidWidgetBentoProps = HTMLAttributes<HTMLDivElement>;

-export const ShareConnectPaidWidgetBento = ({ className }: ShareConnectPaidWidgetBentoProps) => {
+export const ShareConnectPaidWidgetBento = ({
+  className,
+  ...props
+}: ShareConnectPaidWidgetBentoProps) => {
  return (
-    <div className={cn('relative', className)}>
+    <div className={cn('relative', className)} {...props}>
      <div className="absolute inset-0 -z-10 flex items-center justify-center">
        <Image
          src={backgroundPattern}
@@ -1,7 +1,7 @@
 'use client';

-import type { HTMLAttributes, KeyboardEvent } from 'react';
 import { useMemo, useState } from 'react';
+import type { HTMLAttributes, KeyboardEvent } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -55,7 +55,7 @@ type StepValues = (typeof STEP)[StepKeys];

 export type WidgetProps = HTMLAttributes<HTMLDivElement>;

-export const Widget = ({ className, children }: WidgetProps) => {
+export const Widget = ({ className, children, ...props }: WidgetProps) => {
  const { toast } = useToast();
  const event = usePlausible();

@@ -148,19 +148,19 @@ export const Widget = ({ className, children }: WidgetProps) => {

      const claimPlanInput = signatureDataUrl
        ? {
-          name,
-          email,
-          planId,
-          signatureDataUrl: signatureDataUrl,
-          signatureText: null,
-        }
+            name,
+            email,
+            planId,
+            signatureDataUrl: signatureDataUrl,
+            signatureText: null,
+          }
        : {
-          name,
-          email,
-          planId,
-          signatureDataUrl: null,
-          signatureText: signatureText ?? '',
-        };
+            name,
+            email,
+            planId,
+            signatureDataUrl: null,
+            signatureText: signatureText ?? '',
+          };

      const [result] = await Promise.all([claimPlan(claimPlanInput), delay]);

@@ -183,6 +183,7 @@ export const Widget = ({ className, children }: WidgetProps) => {
      <Card
        className={cn('mx-auto w-full max-w-4xl rounded-3xl before:rounded-3xl', className)}
        gradient
+        {...props}
      >
        <div className="grid grid-cols-12 gap-y-8 overflow-hidden p-2 lg:gap-x-8">
          <div className="text-muted-foreground col-span-12 flex flex-col gap-y-4 p-4 text-xs leading-relaxed lg:col-span-7">
@@ -354,6 +355,7 @@ export const Widget = ({ className, children }: WidgetProps) => {
                <div
                  className="absolute inset-x-0 bottom-0 flex cursor-auto items-center justify-between px-4 pb-2"
                  onClick={(e) => e.stopPropagation()}
+                  onKeyDown={(e) => e.stopPropagation()}
                >
                  <Input
                    id="signatureText"
@@ -391,10 +393,11 @@ export const Widget = ({ className, children }: WidgetProps) => {
          </DialogHeader>

          <DialogDescription>
-            By signing you signal your support of Documenso's mission in a <br></br>
-            <strong>non-legally binding, but heartfelt way</strong>. <br></br>
-            <br></br>You also unlock the option to purchase the early supporter plan including
-            everything we build this year for fixed price.
+            By signing you signal your support of Documenso's mission in a <br />
+            <strong>non-legally binding, but heartfelt way</strong>. <br />
+            <br />
+            You also unlock the option to purchase the early supporter plan including everything we
+            build this year for fixed price.
          </DialogDescription>

          <SignaturePad
@@ -1,4 +1,4 @@
-import type { SVGAttributes } from 'react';
+import { SVGAttributes } from 'react';

 export type BackgroundProps = Omit<SVGAttributes<SVGElement>, 'viewBox'>;

@@ -3,7 +3,7 @@
 import * as React from 'react';

 import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import type { ThemeProviderProps } from 'next-themes/dist/types';
+import { ThemeProviderProps } from 'next-themes/dist/types';

 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
@@ -17,6 +17,10 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
  path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
 );

+const FONT_DANCING_SCRIPT_BYTES = fs.readFileSync(
+  path.join(__dirname, '../../packages/assets/fonts/dancing-script.ttf'),
+);
+
 /** @type {import('next').NextConfig} */
 const config = {
  output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
@@ -40,6 +44,7 @@ const config = {
    APP_VERSION: version,
    NEXT_PUBLIC_PROJECT: 'web',
    FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
+    FONT_DANCING_SCRIPT_URI: `data:font/ttf;base64,${FONT_DANCING_SCRIPT_BYTES.toString('base64')}`,
  },
  modularizeImports: {
    'lucide-react': {
@@ -4,7 +4,7 @@ import { useState } from 'react';

 import { useRouter } from 'next/navigation';

-import type { DocumentData, DocumentMeta, Field, Recipient, User } from '@documenso/prisma/client';
+import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
@@ -29,7 +29,6 @@ export type EditDocumentFormProps = {
  user: User;
  document: DocumentWithData;
  recipients: Recipient[];
-  documentMeta: DocumentMeta | null;
  fields: Field[];
  documentData: DocumentData;
 };
@@ -42,7 +41,6 @@ export const EditDocumentForm = ({
  document,
  recipients,
  fields,
-  documentMeta,
  user: _user,
  documentData,
 }: EditDocumentFormProps) => {
@@ -58,8 +56,6 @@ export const EditDocumentForm = ({
  const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
-  const { mutateAsync: setPasswordForDocument } =
-    trpc.document.setPasswordForDocument.useMutation();

  const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
    title: {
@@ -180,13 +176,6 @@ export const EditDocumentForm = ({
    }
  };

-  const onPasswordSubmit = async (password: string) => {
-    await setPasswordForDocument({
-      documentId: document.id,
-      password,
-    });
-  };
-
  const currentDocumentFlow = documentFlow[step];

  return (
@@ -196,13 +185,7 @@ export const EditDocumentForm = ({
        gradient
      >
        <CardContent className="p-2">
-          <LazyPDFViewer
-            key={documentData.id}
-            documentData={documentData}
-            document={document}
-            password={documentMeta?.password}
-            onPasswordSubmit={onPasswordSubmit}
-          />
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
        </CardContent>
      </Card>

@@ -3,12 +3,10 @@ import { redirect } from 'next/navigation';

 import { ChevronLeft, Users2 } from 'lucide-react';

-import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
-import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';

@@ -42,24 +40,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
    redirect('/documents');
  }

-  const { documentData, documentMeta } = document;
-
-  if (documentMeta?.password) {
-    const key = DOCUMENSO_ENCRYPTION_KEY;
-
-    if (!key) {
-      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
-    }
-
-    const securePassword = Buffer.from(
-      symmetricDecrypt({
-        key,
-        data: documentMeta.password,
-      }),
-    ).toString('utf-8');
-
-    documentMeta.password = securePassword;
-  }
+  const { documentData } = document;

  const [recipients, fields] = await Promise.all([
    getRecipientsForDocument({
@@ -102,7 +83,6 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
          className="mt-8"
          document={document}
          user={user}
-          documentMeta={documentMeta}
          recipients={recipients}
          fields={fields}
          documentData={documentData}
@@ -111,12 +91,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {

      {document.status === InternalDocumentStatus.COMPLETED && (
        <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer
-            document={document}
-            key={documentData.id}
-            documentMeta={documentMeta}
-            documentData={documentData}
-          />
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
        </div>
      )}
    </div>
@@ -6,7 +6,7 @@ import { Download, Edit, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';

-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -55,14 +55,28 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
      const documentData = document?.documentData;

      if (!documentData) {
-        throw Error('No document available');
+        return;
      }

-      await downloadPDF({ documentData, fileName: row.title });
-    } catch (err) {
+      const documentBytes = await getFile(documentData);
+
+      const blob = new Blob([documentBytes], {
+        type: 'application/pdf',
+      });
+
+      const link = window.document.createElement('a');
+      const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
+
+      link.href = window.URL.createObjectURL(blob);
+      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
+
+      link.click();
+
+      window.URL.revokeObjectURL(link.href);
+    } catch (error) {
      toast({
        title: 'Something went wrong',
-        description: 'An error occurred while downloading your document.',
+        description: 'An error occurred while trying to download file.',
        variant: 'destructive',
      });
    }
@@ -17,7 +17,7 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';

-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -30,7 +30,6 @@ import {
  DropdownMenuLabel,
  DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
-import { useToast } from '@documenso/ui/primitives/use-toast';

 import { ResendDocumentActionItem } from './_action-items/resend-document';
 import { DeleteDocumentDialog } from './delete-document-dialog';
@@ -45,7 +44,6 @@ export type DataTableActionDropdownProps = {

 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
  const { data: session } = useSession();
-  const { toast } = useToast();

  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -65,33 +63,39 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
  const isDocumentDeletable = isOwner;

  const onDownloadClick = async () => {
-    try {
-      let document: DocumentWithData | null = null;
+    let document: DocumentWithData | null = null;

-      if (!recipient) {
-        document = await trpcClient.document.getDocumentById.query({
-          id: row.id,
-        });
-      } else {
-        document = await trpcClient.document.getDocumentByToken.query({
-          token: recipient.token,
-        });
-      }
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: row.title });
-    } catch (err) {
-      toast({
-        title: 'Something went wrong',
-        description: 'An error occurred while downloading your document.',
-        variant: 'destructive',
+    if (!recipient) {
+      document = await trpcClient.document.getDocumentById.query({
+        id: row.id,
+      });
+    } else {
+      document = await trpcClient.document.getDocumentByToken.query({
+        token: recipient.token,
      });
    }
+
+    const documentData = document?.documentData;
+
+    if (!documentData) {
+      return;
+    }
+
+    const documentBytes = await getFile(documentData);
+
+    const blob = new Blob([documentBytes], {
+      type: 'application/pdf',
+    });
+
+    const link = window.document.createElement('a');
+    const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
  };

  const nonSignedRecipients = row.Recipient.filter((item) => item.signingStatus !== 'SIGNED');
@@ -88,7 +88,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
                    <DocumentStatus status={value} />

                    {value !== ExtendedDocumentStatus.ALL && (
-                      <span className="ml-1 inline-block opacity-50">
+                      <span className="ml-1 hidden opacity-50 md:inline-block">
                        {Math.min(stats[value], 99)}
                        {stats[value] > 99 && '+'}
                      </span>
@@ -4,10 +4,18 @@ import { useMemo, useState } from 'react';

 import { useRouter } from 'next/navigation';

+import { zodResolver } from '@hookform/resolvers/zod';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
+import { z } from 'zod';

 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { useElementScaleSize } from '@documenso/lib/client-only/hooks/use-element-scale-size';
+import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import {
+  DEFAULT_HANDWRITING_FONT_SIZE,
+  MIN_HANDWRITING_FONT_SIZE,
+} from '@documenso/lib/constants/pdf';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { Document, Field, Recipient } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@@ -28,7 +36,27 @@ export type SigningFormProps = {
  fields: Field[];
 };

-export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
+const ZSigningpadSchema = z.union([
+  z.object({
+    signatureDataUrl: z.string().min(1),
+    signatureText: z.null().or(z.string().max(0)),
+  }),
+  z.object({
+    signatureDataUrl: z.null().or(z.string().max(0)),
+    signatureText: z.string().trim().min(1),
+  }),
+]);
+
+export type TSigningpadSchema = z.infer<typeof ZSigningpadSchema>;
+
+export const SigningForm = ({ document: _document, recipient, fields }: SigningFormProps) => {
+  const fontVariable = '--font-signature';
+  const minFontSize = MIN_HANDWRITING_FONT_SIZE;
+  const maxFontSize = DEFAULT_HANDWRITING_FONT_SIZE;
+  const fontVariableValue = getComputedStyle(document.documentElement).getPropertyValue(
+    fontVariable,
+  );
+
  const router = useRouter();
  const analytics = useAnalytics();
  const { data: session } = useSession();
@@ -41,9 +69,24 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
    trpc.recipient.completeDocumentWithToken.useMutation();

  const {
+    register,
    handleSubmit,
+    setValue,
+    watch,
    formState: { isSubmitting },
-  } = useForm();
+  } = useForm<TSigningpadSchema>({
+    mode: 'onChange',
+    defaultValues: {
+      signatureDataUrl: signature || null,
+      signatureText: '',
+    },
+    resolver: zodResolver(ZSigningpadSchema),
+  });
+
+  const { height, width } = useFieldPageCoords(fields.find((field) => field.type === 'SIGNATURE')!);
+
+  const signatureDataUrl = watch('signatureDataUrl');
+  const signatureText = watch('signatureText');

  const uninsertedFields = useMemo(() => {
    return sortFieldsByPosition(fields.filter((field) => !field.inserted));
@@ -65,18 +108,30 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =

    await completeDocumentWithToken({
      token: recipient.token,
-      documentId: document.id,
+      documentId: _document.id,
    });

    analytics.capture('App: Recipient has completed signing', {
      signerId: recipient.id,
-      documentId: document.id,
+      documentId: _document.id,
      timestamp: new Date().toISOString(),
    });

    router.push(`/sign/${recipient.token}/complete`);
  };

+  const scalingFactor = useElementScaleSize(
+    {
+      height,
+      width,
+    },
+    signatureText || '',
+    maxFontSize,
+    fontVariableValue,
+  );
+
+  const fontSize = maxFontSize * scalingFactor;
+
  return (
    <form
      className={cn(
@@ -128,15 +183,79 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
              <div>
                <Label htmlFor="Signature">Signature</Label>

-                <Card className="mt-2" gradient degrees={-120}>
-                  <CardContent className="p-0">
-                    <SignaturePad
-                      className="h-44 w-full"
-                      defaultValue={signature ?? undefined}
-                      onChange={(value) => {
-                        setSignature(value);
-                      }}
-                    />
+                <Card id="signature" className="mt-4" degrees={-120} gradient>
+                  <CardContent role="button" className="relative cursor-pointer pt-6">
+                    <div className="flex h-44 max-w-[18rem] items-center justify-center pb-6">
+                      {!signatureText && (
+                        <SignaturePad
+                          className="h-44"
+                          defaultValue={signature ?? undefined}
+                          clearSignatureClassName="absolute -bottom-6 -right-2 z-10 cursor-pointer"
+                          undoSignatureClassName="absolute -top-32 -left-4 z-10 cursor-pointer"
+                          onChange={(value) => {
+                            setSignature(value);
+                          }}
+                        />
+                      )}
+
+                      {signatureText && (
+                        <p
+                          style={{
+                            fontSize: `clamp(${minFontSize}px, ${fontSize}px, ${maxFontSize}px)`,
+                            fontFamily: `var(${fontVariable})`,
+                          }}
+                          className={cn(
+                            'text-foreground font-signature max-w-[18rem] text-4xl font-semibold',
+                          )}
+                        >
+                          {signatureText}
+                        </p>
+                      )}
+                    </div>
+
+                    <div
+                      className="absolute inset-x-0 bottom-0 flex cursor-auto items-end justify-between px-4 pb-1 pt-2"
+                      onClick={(e) => e.stopPropagation()}
+                      onKeyDown={(e) => e.stopPropagation()}
+                    >
+                      <Input
+                        id="signatureText"
+                        className="text-foreground placeholder:text-muted-foreground max-w-[15rem] border-0 border-none bg-transparent p-0 text-sm focus-visible:ring-transparent"
+                        placeholder="Draw or type your name here"
+                        disabled={isSubmitting || signature?.startsWith('data:')}
+                        {...register('signatureText', {
+                          onChange: (e) => {
+                            if (e.target.value !== '') {
+                              setValue('signatureDataUrl', null);
+                            }
+
+                            setValue('signatureText', e.target.value);
+                          },
+
+                          onBlur: (e) => {
+                            if (e.target.value === '') {
+                              return setValue('signatureText', '');
+                            }
+
+                            setSignature(e.target.value.trimStart());
+                          },
+                        })}
+                      />
+                      {signatureText && (
+                        <div className="absolute bottom-3 right-4 z-10 cursor-pointer">
+                          <button
+                            type="button"
+                            className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
+                            onClick={() => {
+                              setValue('signatureText', '');
+                              setValue('signatureDataUrl', null);
+                            }}
+                          >
+                            Clear Signature
+                          </button>
+                        </div>
+                      )}
+                    </div>
                  </CardContent>
                </Card>
              </div>
@@ -157,7 +276,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
              <SignDialog
                isSubmitting={isSubmitting}
                onSignatureComplete={handleSubmit(onFormSubmit)}
-                document={document}
+                document={_document}
                fields={fields}
                fieldsValidated={fieldsValidated}
              />
@@ -2,7 +2,6 @@ import { notFound, redirect } from 'next/navigation';

 import { match } from 'ts-pattern';

-import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
@@ -13,7 +12,6 @@ import { viewedDocument } from '@documenso/lib/server-only/document/viewed-docum
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
-import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -68,23 +66,6 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
    redirect(`/sign/${token}/complete`);
  }

-  if (documentMeta?.password) {
-    const key = DOCUMENSO_ENCRYPTION_KEY;
-
-    if (!key) {
-      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
-    }
-
-    const securePassword = Buffer.from(
-      symmetricDecrypt({
-        key,
-        data: documentMeta.password,
-      }),
-    ).toString('utf-8');
-
-    documentMeta.password = securePassword;
-  }
-
  const [recipientSignature] = await getRecipientSignatures({ recipientId: recipient.id });

  if (document.deletedAt) {
@@ -120,12 +101,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
            gradient
          >
            <CardContent className="p-2">
-              <LazyPDFViewer
-                key={documentData.id}
-                documentData={documentData}
-                document={document}
-                password={documentMeta?.password}
-              />
+              <LazyPDFViewer key={documentData.id} documentData={documentData} />
            </CardContent>
          </Card>

@@ -86,7 +86,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
        token: recipient.token,
        fieldId: field.id,
        value,
-        isBase64: true,
+        isBase64: typeof value === 'string' && value.startsWith('data:image/png;base64,'),
      });

      if (source === 'local' && !providedSignature) {
@@ -5,7 +5,6 @@ import { useCallback, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';

 import { Loader, Monitor, Moon, Sun } from 'lucide-react';
-import { useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 import { useHotkeys } from 'react-hotkeys-hook';

@@ -14,7 +13,6 @@ import {
  SETTINGS_PAGE_SHORTCUT,
  TEMPLATES_PAGE_SHORTCUT,
 } from '@documenso/lib/constants/keyboard-shortcuts';
-import type { Document, Recipient } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
  CommandDialog,
@@ -67,8 +65,6 @@ export type CommandMenuProps = {

 export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
  const { setTheme } = useTheme();
-  const { data: session } = useSession();
-
  const router = useRouter();

  const [isOpen, setIsOpen] = useState(() => open ?? false);
@@ -85,17 +81,6 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
      },
    );

-  const isOwner = useCallback(
-    (document: Document) => document.userId === session?.user.id,
-    [session?.user.id],
-  );
-
-  const getSigningLink = useCallback(
-    (recipients: Recipient[]) =>
-      `/sign/${recipients.find((r) => r.email === session?.user.email)?.token}`,
-    [session?.user.email],
-  );
-
  const searchResults = useMemo(() => {
    if (!searchDocumentsData) {
      return [];
@@ -103,10 +88,10 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {

    return searchDocumentsData.map((document) => ({
      label: document.title,
-      path: isOwner(document) ? `/documents/${document.id}` : getSigningLink(document.Recipient),
+      path: `/documents/${document.id}`,
      value: [document.id, document.title, ...document.Recipient.map((r) => r.email)].join(' '),
    }));
-  }, [searchDocumentsData, isOwner, getSigningLink]);
+  }, [searchDocumentsData]);

  const currentPage = pages[pages.length - 1];

@@ -43,7 +43,6 @@
        "lucide-react": "^0.279.0",
        "luxon": "^3.4.0",
        "micro": "^10.0.1",
-        "million": "^2.6.4",
        "next": "14.0.3",
        "next-auth": "4.24.5",
        "next-contentlayer": "^0.3.4",
@@ -246,18 +245,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
-      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
    "node_modules/@aws-crypto/crc32": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/@aws-crypto/crc32/-/crc32-3.0.0.tgz",
@@ -1076,9 +1063,9 @@
      }
    },
    "node_modules/@babel/code-frame": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.4.tgz",
+      "integrity": "sha512-r1IONyb6Ia+jYR2vvIDhdWdlTGhqbBoFqLTQidzZ4kepUFH15ejXvFHxCVbtl7BOXIudsIubf4E81xeA3h3IXA==",
      "dependencies": {
        "@babel/highlight": "^7.23.4",
        "chalk": "^2.4.2"
@@ -1151,117 +1138,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
-      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.23.7",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz",
-      "integrity": "sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==",
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.7",
-        "@babel/parser": "^7.23.6",
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.7",
-        "@babel/types": "^7.23.6",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/core/node_modules/@babel/generator": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
-      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
-      "dependencies": {
-        "@babel/types": "^7.23.6",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
-        "jsesc": "^2.5.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core/node_modules/@babel/traverse": {
-      "version": "7.23.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz",
-      "integrity": "sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==",
-      "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.6",
-        "@babel/types": "^7.23.6",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core/node_modules/@babel/types": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
-      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core/node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/@babel/core/node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
    "node_modules/@babel/generator": {
      "version": "7.17.7",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
@@ -1283,42 +1159,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
-      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
-      "dependencies": {
-        "@babel/compat-data": "^7.23.5",
-        "@babel/helper-validator-option": "^7.23.5",
-        "browserslist": "^4.22.2",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
-    },
    "node_modules/@babel/helper-environment-visitor": {
      "version": "7.22.20",
      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
@@ -1376,80 +1216,6 @@
        "node": ">=6.9.0"
      }
    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
-      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
-      "dependencies": {
-        "@babel/types": "^7.22.15"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports/node_modules/@babel/types": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
-      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
-      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
-      "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-module-imports": "^7.22.15",
-        "@babel/helper-simple-access": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/helper-validator-identifier": "^7.22.20"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-simple-access": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-      "dependencies": {
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-simple-access/node_modules/@babel/types": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
-      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
    "node_modules/@babel/helper-split-export-declaration": {
      "version": "7.22.6",
      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
@@ -1490,82 +1256,6 @@
        "node": ">=6.9.0"
      }
    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
-      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.23.8",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.8.tgz",
-      "integrity": "sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==",
-      "dependencies": {
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.7",
-        "@babel/types": "^7.23.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers/node_modules/@babel/generator": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
-      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
-      "dependencies": {
-        "@babel/types": "^7.23.6",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
-        "jsesc": "^2.5.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers/node_modules/@babel/traverse": {
-      "version": "7.23.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz",
-      "integrity": "sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==",
-      "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.6",
-        "@babel/types": "^7.23.6",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers/node_modules/@babel/types": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
-      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers/node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/@babel/highlight": {
      "version": "7.23.4",
      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
@@ -1644,9 +1334,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
-      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.4.tgz",
+      "integrity": "sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==",
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@@ -1654,34 +1344,6 @@
        "node": ">=6.0.0"
      }
    },
-    "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
-      "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz",
-      "integrity": "sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
    "node_modules/@babel/runtime": {
      "version": "7.23.4",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz",
@@ -7919,9 +7581,9 @@
      }
    },
    "node_modules/browserslist": {
-      "version": "4.22.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
-      "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
+      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
      "funding": [
        {
          "type": "opencollective",
@@ -7937,9 +7599,9 @@
        }
      ],
      "dependencies": {
-        "caniuse-lite": "^1.0.30001565",
-        "electron-to-chromium": "^1.4.601",
-        "node-releases": "^2.0.14",
+        "caniuse-lite": "^1.0.30001541",
+        "electron-to-chromium": "^1.4.535",
+        "node-releases": "^2.0.13",
        "update-browserslist-db": "^1.0.13"
      },
      "bin": {
@@ -8101,9 +7763,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001579",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz",
-      "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==",
+      "version": "1.0.30001564",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
+      "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
      "funding": [
        {
          "type": "opencollective",
@@ -8884,11 +8546,6 @@
        "node": ">=14"
      }
    },
-    "node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
-    },
    "node_modules/cookie": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -9690,9 +9347,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.637",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.637.tgz",
-      "integrity": "sha512-G7j3UCOukFtxVO1vWrPQUoDk3kL70mtvjc/DC/k2o7lE0wAdq+Vwp1ipagOow+BH0uVztFysLWbkM/RTIrbK3w=="
+      "version": "1.4.593",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.593.tgz",
+      "integrity": "sha512-c7+Hhj87zWmdpmjDONbvNKNo24tvmD4mjal1+qqTYTrlF0/sNpAcDlU0Ki84ftA/5yj3BF2QhSGEC0Rky6larg=="
    },
    "node_modules/emoji-regex": {
      "version": "9.2.2",
@@ -11399,14 +11056,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
    "node_modules/get-caller-file": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -14476,54 +14125,6 @@
        "node": ">=8.6"
      }
    },
-    "node_modules/million": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/million/-/million-2.6.4.tgz",
-      "integrity": "sha512-voUkdd/jHWrG+7NS+mX49Pat+POKdgGW78V7pYMSrTaOjUitR6ySEcAci8hn17Rsx1IMI3+5w41dkADM1J1ZEg==",
-      "dependencies": {
-        "@babel/core": "^7.21.0",
-        "@babel/generator": "^7.22.7",
-        "@babel/plugin-syntax-jsx": "^7.21.4",
-        "@babel/plugin-syntax-typescript": "^7.21.4",
-        "@babel/types": "^7.21.3",
-        "kleur": "^4.1.5",
-        "rollup": "^3.28.0",
-        "unplugin": "^1.3.1"
-      },
-      "bin": {
-        "million": "packages/cli/dist/index.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/aidenybai"
-      }
-    },
-    "node_modules/million/node_modules/@babel/generator": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
-      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
-      "dependencies": {
-        "@babel/types": "^7.23.6",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
-        "jsesc": "^2.5.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/million/node_modules/@babel/types": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
-      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
    "node_modules/mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -14970,9 +14571,9 @@
      }
    },
    "node_modules/node-releases": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
    },
    "node_modules/node-signpdf": {
      "version": "2.0.0",
@@ -17314,6 +16915,7 @@
      "version": "3.29.4",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
+      "dev": true,
      "bin": {
        "rollup": "dist/bin/rollup"
      },
@@ -19202,17 +18804,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/unplugin": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.6.0.tgz",
-      "integrity": "sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==",
-      "dependencies": {
-        "acorn": "^8.11.2",
-        "chokidar": "^3.5.3",
-        "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.6.1"
-      }
-    },
    "node_modules/unzipper": {
      "version": "0.10.14",
      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
@@ -19533,19 +19124,6 @@
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
    },
-    "node_modules/webpack-sources": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
-      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack-virtual-modules": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
-      "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
-    },
    "node_modules/whatwg-url": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -20291,8 +19869,7 @@
        "react-rnd": "^10.4.1",
        "tailwind-merge": "^1.12.0",
        "tailwindcss-animate": "^1.0.5",
-        "ts-pattern": "^5.0.5",
-        "zod": "^3.22.4"
+        "ts-pattern": "^5.0.5"
      },
      "devDependencies": {
        "@documenso/tailwind-config": "*",
@@ -1,29 +0,0 @@
-import type { DocumentData } from '@documenso/prisma/client';
-
-import { getFile } from '../universal/upload/get-file';
-
-type DownloadPDFProps = {
-  documentData: DocumentData;
-  fileName?: string;
-};
-
-export const downloadPDF = async ({ documentData, fileName }: DownloadPDFProps) => {
-  const bytes = await getFile(documentData);
-
-  const blob = new Blob([bytes], {
-    type: 'application/pdf',
-  });
-
-  const link = window.document.createElement('a');
-
-  const [baseTitle] = fileName?.includes('.pdf')
-    ? fileName.split('.pdf')
-    : [fileName ?? 'document'];
-
-  link.href = window.URL.createObjectURL(blob);
-  link.download = `${baseTitle}_signed.pdf`;
-
-  link.click();
-
-  window.URL.revokeObjectURL(link.href);
-};
@@ -1,7 +1,7 @@
 import { APP_BASE_URL } from './app';

 export const DEFAULT_STANDARD_FONT_SIZE = 15;
-export const DEFAULT_HANDWRITING_FONT_SIZE = 50;
+export const DEFAULT_HANDWRITING_FONT_SIZE = 30;

 export const MIN_STANDARD_FONT_SIZE = 8;
 export const MIN_HANDWRITING_FONT_SIZE = 20;
@@ -4,11 +4,10 @@ import { prisma } from '@documenso/prisma';

 export type CreateDocumentMetaOptions = {
  documentId: number;
-  subject?: string;
-  message?: string;
-  timezone?: string;
-  password?: string;
-  dateFormat?: string;
+  subject: string;
+  message: string;
+  timezone: string;
+  dateFormat: string;
  userId: number;
 };

@@ -19,7 +18,6 @@ export const upsertDocumentMeta = async ({
  dateFormat,
  documentId,
  userId,
-  password,
 }: CreateDocumentMetaOptions) => {
  await prisma.document.findFirstOrThrow({
    where: {
@@ -37,14 +35,12 @@ export const upsertDocumentMeta = async ({
      message,
      dateFormat,
      timezone,
-      password,
      documentId,
    },
    update: {
      subject,
      message,
      dateFormat,
-      password,
      timezone,
    },
  });
@@ -26,7 +26,6 @@ export const duplicateDocumentById = async ({ id, userId }: DuplicateDocumentByI
          message: true,
          subject: true,
          dateFormat: true,
-          password: true,
          timezone: true,
        },
      },
@@ -12,7 +12,7 @@ import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-fiel
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';

 export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignature) => {
-  const fontCaveat = await fetch(process.env.FONT_CAVEAT_URI).then(async (res) =>
+  const fontDancingScript = await fetch(process.env.FONT_DANCING_SCRIPT_URI).then(async (res) =>
    res.arrayBuffer(),
  );

@@ -40,14 +40,28 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
  const fieldX = pageWidth * (Number(field.positionX) / 100);
  const fieldY = pageHeight * (Number(field.positionY) / 100);

-  const font = await pdf.embedFont(isSignatureField ? fontCaveat : StandardFonts.Helvetica);
+  const font = await pdf.embedFont(isSignatureField ? fontDancingScript : StandardFonts.Helvetica, {
+    subset: true,
+    features: {
+      liga: false,
+    },
+  });

  if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
-    await pdf.embedFont(fontCaveat);
+    await pdf.embedFont(fontDancingScript, {
+      subset: true,
+      features: {
+        liga: false,
+      },
+    });
  }

+  const CUSTOM_TEXT = field.customText || field.Signature?.typedSignature || '';
+
  const isInsertingImage =
-    isSignatureField && typeof field.Signature?.signatureImageAsBase64 === 'string';
+    isSignatureField &&
+    typeof field.Signature?.signatureImageAsBase64 === 'string' &&
+    field.Signature?.signatureImageAsBase64.startsWith('data:image/png;base64,');

  if (isSignatureField && isInsertingImage) {
    const image = await pdf.embedPng(field.Signature?.signatureImageAsBase64 ?? '');
@@ -73,13 +87,13 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
      height: imageHeight,
    });
  } else {
-    let textWidth = font.widthOfTextAtSize(field.customText, fontSize);
+    let textWidth = font.widthOfTextAtSize(CUSTOM_TEXT, fontSize);
    const textHeight = font.heightAtSize(fontSize);

    const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);

    fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
-    textWidth = font.widthOfTextAtSize(field.customText, fontSize);
+    textWidth = font.widthOfTextAtSize(CUSTOM_TEXT, fontSize);

    const textX = fieldX + (fieldWidth - textWidth) / 2;
    let textY = fieldY + (fieldHeight - textHeight) / 2;
@@ -87,7 +101,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
    // Invert the Y axis since PDFs use a bottom-left coordinate system
    textY = pageHeight - textY - textHeight;

-    page.drawText(field.customText, {
+    page.drawText(CUSTOM_TEXT, {
      x: textX,
      y: textY,
      size: fontSize,
@@ -1,2 +0,0 @@
-- AlterTable
-ALTER TABLE "DocumentMeta" ADD COLUMN     "password" TEXT;
@@ -41,7 +41,7 @@ model User {
  twoFactorEnabled     Boolean              @default(false)
  twoFactorBackupCodes String?
  VerificationToken    VerificationToken[]
-  Template             Template[]
+  Template           Template[]

  @@index([email])
 }
@@ -161,9 +161,8 @@ model DocumentMeta {
  id         String   @id @default(cuid())
  subject    String?
  message    String?
-  timezone   String?  @default("Etc/UTC") @db.Text
-  password   String?
-  dateFormat String?  @default("yyyy-MM-dd hh:mm a") @db.Text
+  timezone   String?  @db.Text @default("Etc/UTC")
+  dateFormat String?  @db.Text @default("yyyy-MM-dd hh:mm a")
  documentId Int      @unique
  document   Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
 }
@@ -184,19 +183,19 @@ enum SigningStatus {
 }

 model Recipient {
-  id            Int           @id @default(autoincrement())
+  id            Int            @id @default(autoincrement())
  documentId    Int?
  templateId    Int?
-  email         String        @db.VarChar(255)
-  name          String        @default("") @db.VarChar(255)
+  email         String         @db.VarChar(255)
+  name          String         @default("") @db.VarChar(255)
  token         String
  expired       DateTime?
  signedAt      DateTime?
  readStatus    ReadStatus    @default(NOT_OPENED)
  signingStatus SigningStatus @default(NOT_SIGNED)
  sendStatus    SendStatus    @default(NOT_SENT)
-  Document      Document?     @relation(fields: [documentId], references: [id], onDelete: Cascade)
-  Template      Template?     @relation(fields: [templateId], references: [id], onDelete: Cascade)
+  Document      Document?      @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  Template      Template?      @relation(fields: [templateId], references: [id], onDelete: Cascade)
  Field         Field[]
  Signature     Signature[]

@@ -280,10 +279,10 @@ model Template {
  createdAt              DateTime     @default(now())
  updatedAt              DateTime     @default(now()) @updatedAt

-  templateDocumentData DocumentData @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
-  User                 User         @relation(fields: [userId], references: [id], onDelete: Cascade)
-  Recipient            Recipient[]
-  Field                Field[]
+  templateDocumentData   DocumentData @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
+  User                   User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+  Recipient              Recipient[]
+  Field                  Field[]

  @@unique([templateDocumentDataId])
 }
@@ -1,7 +1,6 @@
 import { TRPCError } from '@trpc/server';

 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
-import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
 import { createDocument } from '@documenso/lib/server-only/document/create-document';
 import { deleteDocument } from '@documenso/lib/server-only/document/delete-document';
@@ -14,7 +13,6 @@ import { sendDocument } from '@documenso/lib/server-only/document/send-document'
 import { updateTitle } from '@documenso/lib/server-only/document/update-title';
 import { setFieldsForDocument } from '@documenso/lib/server-only/field/set-fields-for-document';
 import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
-import { symmetricEncrypt } from '@documenso/lib/universal/crypto';

 import { authenticatedProcedure, procedure, router } from '../trpc';
 import {
@@ -26,7 +24,6 @@ import {
  ZSearchDocumentsMutationSchema,
  ZSendDocumentMutationSchema,
  ZSetFieldsForDocumentMutationSchema,
-  ZSetPasswordForDocumentMutationSchema,
  ZSetRecipientsForDocumentMutationSchema,
  ZSetTitleForDocumentMutationSchema,
 } from './schema';
@@ -178,38 +175,6 @@ export const documentRouter = router({
      }
    }),

-  setPasswordForDocument: authenticatedProcedure
-    .input(ZSetPasswordForDocumentMutationSchema)
-    .mutation(async ({ input, ctx }) => {
-      try {
-        const { documentId, password } = input;
-
-        const key = DOCUMENSO_ENCRYPTION_KEY;
-
-        if (!key) {
-          throw new Error('Missing encryption key');
-        }
-
-        const securePassword = symmetricEncrypt({
-          data: password,
-          key,
-        });
-
-        await upsertDocumentMeta({
-          documentId,
-          password: securePassword,
-          userId: ctx.user.id,
-        });
-      } catch (err) {
-        console.error(err);
-
-        throw new TRPCError({
-          code: 'BAD_REQUEST',
-          message: 'We were unable to set the password for this document. Please try again later.',
-        });
-      }
-    }),
-
  sendDocument: authenticatedProcedure
    .input(ZSendDocumentMutationSchema)
    .mutation(async ({ input, ctx }) => {
@@ -273,7 +238,6 @@ export const documentRouter = router({
          userId: ctx.user.id,
        });
      } catch (err) {
-        console.log(err);
        throw new TRPCError({
          code: 'BAD_REQUEST',
          message: 'We are unable to duplicate this document. Please try again later.',
@@ -73,15 +73,6 @@ export const ZSendDocumentMutationSchema = z.object({
  }),
 });

-export const ZSetPasswordForDocumentMutationSchema = z.object({
-  documentId: z.number(),
-  password: z.string(),
-});
-
-export type TSetPasswordForDocumentMutationSchema = z.infer<
-  typeof ZSetPasswordForDocumentMutationSchema
->;
-
 export const ZResendDocumentMutationSchema = z.object({
  documentId: z.number(),
  recipients: z.array(z.number()).min(1),
@@ -64,6 +64,7 @@ declare namespace NodeJS {

    DEPLOYMENT_TARGET?: 'webapp' | 'marketing';
    FONT_CAVEAT_URI: string;
+    FONT_DANCING_SCRIPT_URI: string;

    POSTGRES_URL?: string;
    DATABASE_URL?: string;
@@ -5,11 +5,11 @@ import { useState } from 'react';

 import { Download } from 'lucide-react';

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

 import { Button } from '../../primitives/button';
+import { useToast } from '../../primitives/use-toast';

 export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
  disabled?: boolean;
@@ -24,29 +24,43 @@ export const DocumentDownloadButton = ({
  disabled,
  ...props
 }: DownloadButtonProps) => {
-  const [isLoading, setIsLoading] = useState(false);
  const { toast } = useToast();

+  const [isLoading, setIsLoading] = useState(false);
+
  const onDownloadClick = async () => {
    try {
      setIsLoading(true);

      if (!documentData) {
-        setIsLoading(false);
        return;
      }

-      await downloadPDF({ documentData, fileName }).then(() => {
-        setIsLoading(false);
+      const bytes = await getFile(documentData);
+
+      const blob = new Blob([bytes], {
+        type: 'application/pdf',
      });
+
+      const link = window.document.createElement('a');
+      const baseTitle = fileName?.includes('.pdf') ? fileName.split('.pdf')[0] : fileName;
+
+      link.href = window.URL.createObjectURL(blob);
+      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
+
+      link.click();
+
+      window.URL.revokeObjectURL(link.href);
    } catch (err) {
-      setIsLoading(false);
+      console.error(err);

      toast({
-        title: 'Something went wrong',
+        title: 'Error',
        description: 'An error occurred while downloading your document.',
        variant: 'destructive',
      });
+    } finally {
+      setIsLoading(false);
    }
  };

@@ -70,7 +70,6 @@
    "react-rnd": "^10.4.1",
    "tailwind-merge": "^1.12.0",
    "tailwindcss-animate": "^1.0.5",
-    "ts-pattern": "^5.0.5",
-    "zod": "^3.22.4"
+    "ts-pattern": "^5.0.5"
  }
 }
@@ -1,96 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { Button } from './button';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';
-import { Form, FormControl, FormField, FormItem, FormMessage } from './form/form';
-import { Input } from './input';
-
-const ZPasswordDialogFormSchema = z.object({
-  password: z.string(),
-});
-
-type TPasswordDialogFormSchema = z.infer<typeof ZPasswordDialogFormSchema>;
-
-type PasswordDialogProps = {
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-  defaultPassword?: string;
-  onPasswordSubmit?: (password: string) => void;
-  isError?: boolean;
-};
-
-export const PasswordDialog = ({
-  open,
-  onOpenChange,
-  defaultPassword,
-  onPasswordSubmit,
-  isError,
-}: PasswordDialogProps) => {
-  const form = useForm<TPasswordDialogFormSchema>({
-    defaultValues: {
-      password: defaultPassword ?? '',
-    },
-    resolver: zodResolver(ZPasswordDialogFormSchema),
-  });
-
-  const onFormSubmit = ({ password }: TPasswordDialogFormSchema) => {
-    onPasswordSubmit?.(password);
-  };
-
-  useEffect(() => {
-    if (isError) {
-      form.setError('password', {
-        type: 'manual',
-        message: 'The password you have entered is incorrect. Please try again.',
-      });
-    }
-  }, [form, isError]);
-
-  return (
-    <Dialog open={open}>
-      <DialogContent className="w-full max-w-md">
-        <DialogHeader>
-          <DialogTitle>Password Required</DialogTitle>
-
-          <DialogDescription className="text-muted-foreground">
-            This document is password protected. Please enter the password to view the document.
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex flex-wrap items-start justify-between gap-4">
-              <FormField
-                name="password"
-                control={form.control}
-                render={({ field }) => (
-                  <FormItem className="relative flex-1">
-                    <FormControl>
-                      <Input
-                        type="password"
-                        className="bg-background"
-                        placeholder="Enter password"
-                        autoComplete="off"
-                        {...field}
-                      />
-                    </FormControl>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div>
-                <Button>Submit</Button>
-              </div>
-            </fieldset>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};
@@ -3,19 +3,16 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';

 import { Loader } from 'lucide-react';
-import { type PDFDocumentProxy, PasswordResponses } from 'pdfjs-dist';
+import type { PDFDocumentProxy } from 'pdfjs-dist';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
-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 type { DocumentWithData } from '@documenso/prisma/types/document-with-data';

 import { cn } from '../lib/utils';
-import { PasswordDialog } from './document-password-dialog';
 import { useToast } from './use-toast';

 export type LoadedPDFDocument = PDFDocumentProxy;
@@ -46,9 +43,6 @@ const PDFLoader = () => (
 export type PDFViewerProps = {
  className?: string;
  documentData: DocumentData;
-  document?: DocumentWithData;
-  password?: string | null;
-  onPasswordSubmit?: (password: string) => void | Promise<void>;
  onDocumentLoad?: (_doc: LoadedPDFDocument) => void;
  onPageClick?: OnPDFViewerPageClick;
  [key: string]: unknown;
@@ -57,8 +51,6 @@ export type PDFViewerProps = {
 export const PDFViewer = ({
  className,
  documentData,
-  password: defaultPassword,
-  onPasswordSubmit,
  onDocumentLoad,
  onPageClick,
  ...props
@@ -67,11 +59,7 @@ export const PDFViewer = ({

  const $el = useRef<HTMLDivElement>(null);

-  const passwordCallbackRef = useRef<((password: string | null) => void) | null>(null);
-
  const [isDocumentBytesLoading, setIsDocumentBytesLoading] = useState(false);
-  const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
-  const [isPasswordError, setIsPasswordError] = useState(false);
  const [documentBytes, setDocumentBytes] = useState<Uint8Array | null>(null);

  const [width, setWidth] = useState(0);
@@ -181,87 +169,57 @@ export const PDFViewer = ({
          <PDFLoader />
        </div>
      ) : (
-        <>
-          <PDFDocument
-            file={documentBytes.buffer}
-            className={cn('w-full overflow-hidden rounded', {
-              'h-[80vh] max-h-[60rem]': numPages === 0,
-            })}
-            onPassword={(callback, reason) => {
-              // If the document already has a password, we don't need to ask for it again.
-              if (defaultPassword && reason !== PasswordResponses.INCORRECT_PASSWORD) {
-                callback(defaultPassword);
-                return;
-              }
-
-              setIsPasswordModalOpen(true);
-
-              passwordCallbackRef.current = callback;
-
-              match(reason)
-                .with(PasswordResponses.NEED_PASSWORD, () => setIsPasswordError(false))
-                .with(PasswordResponses.INCORRECT_PASSWORD, () => setIsPasswordError(true));
-            }}
-            onLoadSuccess={(d) => onDocumentLoaded(d)}
-            // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
-            // Therefore we add some additional custom error handling.
-            onSourceError={() => {
-              setPdfError(true);
-            }}
-            externalLinkTarget="_blank"
-            loading={
-              <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-                {pdfError ? (
-                  <div className="text-muted-foreground text-center">
-                    <p>Something went wrong while loading the document.</p>
-                    <p className="mt-1 text-sm">Please try again or contact our support.</p>
-                  </div>
-                ) : (
-                  <PDFLoader />
-                )}
-              </div>
-            }
-            error={
-              <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+        <PDFDocument
+          file={documentBytes.buffer}
+          className={cn('w-full overflow-hidden rounded', {
+            'h-[80vh] max-h-[60rem]': numPages === 0,
+          })}
+          onLoadSuccess={(d) => onDocumentLoaded(d)}
+          // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
+          // Therefore we add some additional custom error handling.
+          onSourceError={() => {
+            setPdfError(true);
+          }}
+          externalLinkTarget="_blank"
+          loading={
+            <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+              {pdfError ? (
                <div className="text-muted-foreground text-center">
                  <p>Something went wrong while loading the document.</p>
                  <p className="mt-1 text-sm">Please try again or contact our support.</p>
                </div>
+              ) : (
+                <PDFLoader />
+              )}
+            </div>
+          }
+          error={
+            <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+              <div className="text-muted-foreground text-center">
+                <p>Something went wrong while loading the document.</p>
+                <p className="mt-1 text-sm">Please try again or contact our support.</p>
              </div>
-            }
-          >
-            {Array(numPages)
-              .fill(null)
-              .map((_, i) => (
-                <div
-                  key={i}
-                  className="border-border my-8 overflow-hidden rounded border will-change-transform first:mt-0 last:mb-0"
-                >
-                  <PDFPage
-                    pageNumber={i + 1}
-                    width={width}
-                    renderAnnotationLayer={false}
-                    renderTextLayer={false}
-                    loading={() => ''}
-                    onClick={(e) => onDocumentPageClick(e, i + 1)}
-                  />
-                </div>
-              ))}
-          </PDFDocument>
-
-          <PasswordDialog
-            open={isPasswordModalOpen}
-            onOpenChange={setIsPasswordModalOpen}
-            onPasswordSubmit={(password) => {
-              passwordCallbackRef.current?.(password);
-
-              setIsPasswordModalOpen(false);
-
-              void onPasswordSubmit?.(password);
-            }}
-            isError={isPasswordError}
-          />
-        </>
+            </div>
+          }
+        >
+          {Array(numPages)
+            .fill(null)
+            .map((_, i) => (
+              <div
+                key={i}
+                className="border-border my-8 overflow-hidden rounded border will-change-transform first:mt-0 last:mb-0"
+              >
+                <PDFPage
+                  pageNumber={i + 1}
+                  width={width}
+                  renderAnnotationLayer={false}
+                  renderTextLayer={false}
+                  loading={() => ''}
+                  onClick={(e) => onDocumentPageClick(e, i + 1)}
+                />
+              </div>
+            ))}
+        </PDFDocument>
      )}
    </div>
  );
@@ -16,12 +16,16 @@ const DPI = 2;
 export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
  onChange?: (_signatureDataUrl: string | null) => void;
  containerClassName?: string;
+  clearSignatureClassName?: string;
+  undoSignatureClassName?: string;
 };

 export const SignaturePad = ({
  className,
  containerClassName,
  defaultValue,
+  clearSignatureClassName,
+  undoSignatureClassName,
  onChange,
  ...props
 }: SignaturePadProps) => {
@@ -227,7 +231,7 @@ export const SignaturePad = ({
        {...props}
      />

-      <div className="absolute bottom-4 right-4 flex gap-2">
+      <div className={cn('absolute bottom-4 right-4', clearSignatureClassName)}>
        <button
          type="button"
          className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
@@ -238,7 +242,7 @@ export const SignaturePad = ({
      </div>

      {lines.length > 0 && (
-        <div className="absolute bottom-4 left-4 flex gap-2">
+        <div className={cn('absolute bottom-4 left-4 flex gap-2', undoSignatureClassName)}>
          <button
            type="button"
            title="undo"
@@ -86,6 +86,7 @@
    "VERCEL_URL",
    "DEPLOYMENT_TARGET",
    "FONT_CAVEAT_URI",
+    "FONT_DANCING_SCRIPT_URI",
    "POSTGRES_URL",
    "DATABASE_URL",
    "POSTGRES_PRISMA_URL",
Author	SHA1	Message	Date
Ephraim Atta-Duncan	536adf6e0a	fix: reduce text size?	2024-02-15 10:05:36 +00:00
Ephraim Atta-Duncan	be3ab09738	fix: set fixed with for signature pad and input	2024-02-05 11:18:03 +00:00
Ephraim Atta-Duncan	1c4a5449bb	feat: use dancing script font locally	2024-01-28 18:19:42 +00:00
Ephraim Atta-Duncan	144bd4782b	chore: remove console.logs	2024-01-28 18:05:17 +00:00
Ephraim Duncan	857e35c10a	Update apps/web/src/app/(signing)/sign/[token]/form.tsx Co-authored-by: Adithya Krishna <aadithya794@gmail.com>	2024-01-28 18:03:10 +00:00
Ephraim Atta-Duncan	e9d6c24137	chore: remove console.log	2024-01-16 23:16:37 +00:00
Ephraim Atta-Duncan	dd5f39205a	fix: position of undo signature button	2024-01-16 23:14:34 +00:00
Ephraim Atta-Duncan	f6ce7be61f	fix: disable input for only drawn signature	2024-01-16 23:10:08 +00:00
Ephraim Atta-Duncan	9979d32a56	Merge branch 'main' into feat/accept-text-signature	2024-01-16 15:26:39 +00:00
Ephraim Atta-Duncan	daa541d570	fix: disable input when there is a signature available	2024-01-16 02:52:58 +00:00
Ephraim Atta-Duncan	1d91a9e813	fix: canvas for drawing signature and clear signature position	2024-01-16 02:40:43 +00:00
Ephraim Atta-Duncan	075e15d428	feat: replace caveat font with dancing script	2024-01-16 01:54:28 +00:00
Ephraim Atta-Duncan	27e5ef0a51	Revert "INCOMPLETE: refactor signature pad and input into a single component" This reverts commit `e17e4566cd`.	2024-01-16 01:17:11 +00:00
Adithya Krishna	0b8e84b6b7	refactor: singature pad & provider stuff Signed-off-by: Adithya Krishna <adi@documenso.com>	2024-01-12 17:13:00 +05:30
Ephraim Atta-Duncan	e17e4566cd	INCOMPLETE: refactor signature pad and input into a single component	2024-01-12 11:04:22 +00:00
Ephraim Atta-Duncan	6ad3edb6c8	feat: sign document with text	2023-12-11 12:03:22 +00:00