Merge branch 'main' into feat/default-reset-button-document-preferences

Adds a dedicated self-hosting page documenting how to apply an
Enterprise license key, and cross-links it from the related docs.

New page: self-hosting/configuration/license.mdx — "Apply Your License
Key"
Set NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY (Docker Compose / docker run /
.env tabs)

apps/docs/content/docs/policies/enterprise-edition.mdx

@@ -76,6 +76,8 @@ The Enterprise Edition is required when you:
     4. Restart your Documenso instance
     5. Verify the license is active in the **Admin Panel** under the **Stats** section
 
+    See [Apply Your License Key](/docs/self-hosting/configuration/license) for the full walkthrough, including how to enable individual features once licensed.
+
   </Accordion>
 </Accordions>
 
@@ -197,7 +199,7 @@ See [Support](/docs/policies/support) for complete support options.
     1. Sign the Enterprise license agreement
     2. Receive license key and access credentials
     3. Deploy using [self-hosting guides](/docs/self-hosting) or access Documenso Cloud
-    4. Configure Enterprise features with support assistance
+    4. Apply the key — see [Apply Your License Key](/docs/self-hosting/configuration/license) — and configure Enterprise features with support assistance
 
   </Step>
   <Step>
@@ -238,6 +240,7 @@ See [Support](/docs/policies/support) for complete support options.
 
 ## Related
 
+- [Apply Your License Key](/docs/self-hosting/configuration/license) - Step-by-step license activation
 - [Community Edition](/docs/policies/community-edition) - AGPL-3.0 open-source license
 - [Licenses](/docs/policies/licenses) - Complete licensing overview and FAQ
 - [Support](/docs/policies/support) - Support channels and response times

apps/docs/content/docs/self-hosting/configuration/environment.mdx

@@ -443,11 +443,11 @@ Telemetry collects only: app version, installation ID, and node ID. No personal
 
 ## Enterprise Features
 
-These variables require an active [Enterprise Edition](/docs/policies/enterprise-edition) license. Obtain a license key from [license.documenso.com](https://license.documenso.com) and set it below to unlock enterprise features such as SSO, embed editor, and 21 CFR Part 11 compliance.
+These variables require an active [Enterprise Edition](/docs/policies/enterprise-edition) license. Obtain a license key from [license.documenso.com](https://license.documenso.com) and set it below to unlock enterprise features such as SSO, embed editor, and 21 CFR Part 11 compliance. See [Apply Your License Key](/docs/self-hosting/configuration/license) for step-by-step setup.
 
 | Variable                             | Description                                      |
 | ------------------------------------ | ------------------------------------------------ |
-| `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` | License key for enterprise features              |
+| `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` | License key for enterprise features — see [Apply Your License Key](/docs/self-hosting/configuration/license) for how to apply it |
 | `NEXT_PRIVATE_STRIPE_API_KEY`        | Stripe API key for billing                       |
 | `NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET` | Stripe webhook secret                            |
 | `NEXT_PRIVATE_SES_ACCESS_KEY_ID`     | AWS SES access key for email domain verification |

apps/docs/content/docs/self-hosting/configuration/license.mdx

@@ -0,0 +1,107 @@
+---
+title: Apply Your License Key
+description: Activate your Enterprise license key to unlock enterprise features on your self-hosted instance.
+---
+
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+A license key activates the Enterprise features available to your self-hosted instance, such as CSC signing, SSO, embed white-labelling, and 21 CFR Part 11 compliance.
+
+<Callout type="info">
+  The license key applies to your **whole instance**, not an individual user account. There's one
+  key per deployment.
+</Callout>
+
+## Prerequisites
+
+- An active Enterprise license key — contact [sales](https://documen.so/enterprise) to set up an
+  Enterprise subscription, then copy your key from [license.documenso.com](https://license.documenso.com).
+  See [Enterprise Edition](/docs/policies/enterprise-edition) for details.
+- A running self-hosted Documenso instance that you're able to restart
+
+## Step 1: Set the environment variable
+
+Set `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` to your license key.
+
+<Tabs items={['Docker Compose', 'docker run', '.env']}>
+<Tab value="Docker Compose">
+
+Add the variable to your `.env` file (or directly under `environment:` in `compose.yml`):
+
+```bash
+NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here
+```
+
+Then apply it:
+
+```bash
+docker compose up -d
+```
+
+</Tab>
+<Tab value="docker run">
+
+```bash
+docker run -d \
+  --name documenso \
+  -e NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here \
+  documenso/documenso:latest
+```
+
+</Tab>
+<Tab value=".env">
+
+If you're running Documenso directly (not in a container), add the variable to your `.env` file:
+
+```bash
+NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here
+```
+
+</Tab>
+</Tabs>
+
+## Step 2: Restart the instance
+
+The license key is only read once, at process startup. Setting the variable in a running container or shell has no effect until the process restarts.
+
+```bash
+# Docker Compose
+docker compose restart documenso
+
+# Docker
+docker restart documenso
+```
+
+On startup, Documenso validates the key against the Documenso license server and caches the result locally for future startups, so a brief license-server outage won't lock you out.
+
+## What the license enables
+
+A valid license doesn't turn every enterprise feature on everywhere — activation depends on the feature:
+
+- **CSC signing** activates instance-wide automatically once the license is active and CSC transport is configured. See [CSC / QES Signing](/docs/self-hosting/configuration/signing-certificate/csc-qes) for the full setup.
+- **SSO, embed white-labelling, 21 CFR Part 11, and similar** are provisioned per organisation. Follow each feature's own guide to configure it once the license is active.
+
+## Troubleshooting
+
+<Accordions type="multiple">
+  <Accordion title="Enterprise features are still unavailable after applying the key">
+    - Confirm the key is present in the environment the running process actually reads — `docker
+      exec` into the container and check `env | grep LICENSE` if unsure.
+    - Confirm the instance was fully restarted after the variable was set, not just reloaded.
+    - Re-copy the key to rule out truncation or accidental whitespace.
+  </Accordion>
+  <Accordion title="A specific feature still isn't working">
+    Instance-wide features (like CSC signing) also need their own configuration — an active license
+    alone isn't enough. Check that feature's guide to confirm the required settings are in place.
+    Per-organisation features additionally need to be provisioned for the organisation that's using
+    them.
+  </Accordion>
+</Accordions>
+
+## See Also
+
+- [Environment Variables](/docs/self-hosting/configuration/environment) - Complete configuration reference
+- [Enterprise Edition](/docs/policies/enterprise-edition) - What's included and how to purchase a license
+- [CSC / QES Signing](/docs/self-hosting/configuration/signing-certificate/csc-qes) - Enable CSC-based signing

apps/docs/content/docs/self-hosting/configuration/meta.json

@@ -2,6 +2,7 @@
   "title": "Configuration",
   "pages": [
     "environment",
+    "license",
     "database",
     "email",
     "storage",

apps/docs/content/docs/self-hosting/configuration/signing-certificate/csc-qes.mdx

@@ -49,7 +49,7 @@ The callback URL is fixed — Documenso derives it from `NEXT_PUBLIC_WEBAPP_URL`
 
 ### Enterprise Edition license
 
-CSC mode is gated by the `instanceCscSigning` license flag. Without a valid Enterprise license, the transport refuses to start (`CSC_UNLICENSED`).
+CSC mode is gated by the `instanceCscSigning` license flag. Without a valid Enterprise license, the transport refuses to start (`CSC_UNLICENSED`). See [Apply Your License Key](/docs/self-hosting/configuration/license) to activate one.
 
 </Step>
 <Step>

apps/docs/content/docs/self-hosting/index.mdx

@@ -141,7 +141,7 @@ See the [Quick Start guide](/docs/self-hosting/getting-started/quick-start) for
 
 Self-hosted Documenso includes full core functionality under the AGPL-3.0 license. If you need enterprise features such as SSO, embed editor white label, or 21 CFR Part 11 compliance, you can activate them with a license key.
 
-See [Enterprise Edition](/docs/policies/enterprise-edition) for details and [Licenses](/docs/policies/licenses) for a comparison.
+See [Enterprise Edition](/docs/policies/enterprise-edition) for details and [Licenses](/docs/policies/licenses) for a comparison. Already have a key? See [Apply Your License Key](/docs/self-hosting/configuration/license).
 
 ---
 

apps/remix/app/components/dialogs/document-preferences-reset-dialog.tsx

@@ -0,0 +1,140 @@
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+
+export type DocumentPreferencesResetDialogProps = {
+  disabled?: boolean;
+  isSubmitting: boolean;
+  onReset: () => Promise<void>;
+  showAiFeatures?: boolean;
+  showDocumentVisibility?: boolean;
+  showIncludeSenderDetails?: boolean;
+};
+
+export const DocumentPreferencesResetDialog = ({
+  disabled = false,
+  isSubmitting,
+  onReset,
+  showAiFeatures = false,
+  showDocumentVisibility = false,
+  showIncludeSenderDetails = false,
+}: DocumentPreferencesResetDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+
+  const isLoading = isSubmitting || isResetting;
+
+  const handleResetToDefaults = async () => {
+    setIsResetting(true);
+
+    try {
+      await onReset();
+      setOpen(false);
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
+      <DialogTrigger asChild>
+        <Button variant="destructive" type="button" size="sm" disabled={disabled || isLoading}>
+          <Trans>Reset to defaults</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Reset document preferences</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              This will reset all document preferences to their default values and save the changes immediately.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>Once confirmed, the following will be reset:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              {showDocumentVisibility && (
+                <li>
+                  <Trans>Default document visibility</Trans>
+                </li>
+              )}
+              <li>
+                <Trans>Default document language</Trans>
+              </li>
+              <li>
+                <Trans>Default date format</Trans>
+              </li>
+              <li>
+                <Trans>Default time zone</Trans>
+              </li>
+              <li>
+                <Trans>Default signature settings</Trans>
+              </li>
+              {showIncludeSenderDetails && (
+                <li>
+                  <Trans>Send on behalf of team</Trans>
+                </li>
+              )}
+              <li>
+                <Trans>Include the signing certificate in the document</Trans>
+              </li>
+              <li>
+                <Trans>Include the audit logs in the document</Trans>
+              </li>
+              <li>
+                <Trans>Default recipients</Trans>
+              </li>
+              <li>
+                <Trans>Delegate document ownership</Trans>
+              </li>
+              <li>
+                <Trans>Default envelope expiration</Trans>
+              </li>
+              <li>
+                <Trans>Default signing reminders</Trans>
+              </li>
+              {showAiFeatures && (
+                <li>
+                  <Trans>AI features</Trans>
+                </li>
+              )}
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isLoading}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" variant="destructive" loading={isLoading} onClick={() => void handleResetToDefaults()}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/token-create-dialog.tsx

@@ -1,241 +0,0 @@
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
-import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import type { z } from 'zod';
-
-import { useCurrentTeam } from '~/providers/team';
-
-const NEVER_EXPIRE = 'NEVER' as const;
-
-export const EXPIRATION_DATES = {
-  ONE_WEEK: msg`7 days`,
-  ONE_MONTH: msg`1 month`,
-  THREE_MONTHS: msg`3 months`,
-  SIX_MONTHS: msg`6 months`,
-  ONE_YEAR: msg`12 months`,
-  [NEVER_EXPIRE]: msg`Never`,
-} as const;
-
-const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
-  tokenName: true,
-  expirationDate: true,
-});
-
-type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
-
-export type TokenCreateDialogProps = {
-  trigger?: React.ReactNode;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-export const TokenCreateDialog = ({ trigger, ...props }: TokenCreateDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const team = useCurrentTeam();
-
-  const [open, setOpen] = useState(false);
-  const [createdToken, setCreatedToken] = useState<string | null>(null);
-
-  const form = useForm<TCreateTokenFormSchema>({
-    resolver: zodResolver(ZCreateTokenFormSchema),
-    defaultValues: {
-      tokenName: '',
-      expirationDate: 'THREE_MONTHS',
-    },
-  });
-
-  const { mutateAsync: createToken } = trpc.apiToken.create.useMutation();
-
-  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenFormSchema) => {
-    try {
-      const { token } = await createToken({
-        teamId: team.id,
-        tokenName,
-        expirationDate: expirationDate === NEVER_EXPIRE ? null : expirationDate,
-      });
-
-      setCreatedToken(token);
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      const errorMessage = match(error.code)
-        .with(AppErrorCode.UNAUTHORIZED, () => msg`You do not have permission to create a token for this team.`)
-        .otherwise(() => msg`Something went wrong. Please try again later.`);
-
-      toast({
-        title: _(msg`An error occurred`),
-        description: _(errorMessage),
-        variant: 'destructive',
-        duration: 5000,
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (open) {
-      form.reset();
-      setCreatedToken(null);
-    }
-  }, [open, form]);
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)} {...props}>
-      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
-        {trigger ?? (
-          <Button className="flex-shrink-0">
-            <Trans>Create token</Trans>
-          </Button>
-        )}
-      </DialogTrigger>
-
-      <DialogContent className="max-w-lg" position="center">
-        {createdToken ? (
-          <>
-            <DialogHeader>
-              <DialogTitle>
-                <Trans>Token created</Trans>
-              </DialogTitle>
-
-              <DialogDescription>
-                <Trans>Copy your token now. For security reasons you will not be able to see it again.</Trans>
-              </DialogDescription>
-            </DialogHeader>
-
-            <div className="relative">
-              <Input
-                className="pr-12 font-mono text-sm"
-                aria-label={_(msg`Your new API token`)}
-                name="createdToken"
-                readOnly
-                value={createdToken}
-              />
-              <div className="absolute top-0 right-2 bottom-0 flex items-center justify-center">
-                <CopyTextButton
-                  value={createdToken}
-                  onCopySuccess={() => toast({ title: _(msg`Token copied to clipboard`) })}
-                />
-              </div>
-            </div>
-
-            <DialogFooter>
-              <Button type="button" onClick={() => setOpen(false)}>
-                <Trans>Done</Trans>
-              </Button>
-            </DialogFooter>
-          </>
-        ) : (
-          <>
-            <DialogHeader>
-              <DialogTitle>
-                <Trans>Create API token</Trans>
-              </DialogTitle>
-
-              <DialogDescription>
-                <Trans>Use API tokens to authenticate with the Documenso API.</Trans>
-              </DialogDescription>
-            </DialogHeader>
-
-            <Form {...form}>
-              <form onSubmit={form.handleSubmit(onSubmit)}>
-                <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
-                  <FormField
-                    control={form.control}
-                    name="tokenName"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel required>
-                          <Trans>Name</Trans>
-                        </FormLabel>
-
-                        <FormControl>
-                          <Input className="bg-background" {...field} />
-                        </FormControl>
-
-                        <FormDescription>
-                          <Trans>A name to help you identify this token later.</Trans>
-                        </FormDescription>
-
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="expirationDate"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>
-                          <Trans>Expires in</Trans>
-                        </FormLabel>
-
-                        <FormControl>
-                          <Select value={field.value ?? NEVER_EXPIRE} onValueChange={field.onChange}>
-                            <SelectTrigger className="bg-background">
-                              <SelectValue />
-                            </SelectTrigger>
-
-                            <SelectContent>
-                              {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
-                                <SelectItem key={key} value={key}>
-                                  {_(date)}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </FormControl>
-
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <DialogFooter>
-                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                      <Trans>Cancel</Trans>
-                    </Button>
-
-                    <Button type="submit" loading={form.formState.isSubmitting}>
-                      <Trans>Create token</Trans>
-                    </Button>
-                  </DialogFooter>
-                </fieldset>
-              </form>
-            </Form>
-          </>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -105,7 +105,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            <Trans>Delete token</Trans>
+            <Trans>Are you sure you want to delete this token?</Trans>
           </DialogTitle>
 
           <DialogDescription>
@@ -139,18 +139,21 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
               />
 
               <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => setIsOpen(false)}>
-                  <Trans>Cancel</Trans>
-                </Button>
+                <div className="flex w-full flex-nowrap gap-4">
+                  <Button type="button" variant="secondary" className="flex-1" onClick={() => setIsOpen(false)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
 
-                <Button
-                  type="submit"
-                  variant="destructive"
-                  disabled={!form.formState.isValid}
-                  loading={form.formState.isSubmitting}
-                >
-                  <Trans>Delete</Trans>
-                </Button>
+                  <Button
+                    type="submit"
+                    variant="destructive"
+                    className="flex-1"
+                    disabled={!form.formState.isValid}
+                    loading={form.formState.isSubmitting}
+                  >
+                    <Trans>I'm sure! Delete it</Trans>
+                  </Button>
+                </div>
               </DialogFooter>
             </fieldset>
           </form>

apps/remix/app/components/forms/document-preferences-form.tsx

@@ -11,10 +11,10 @@ import { isValidLanguageCode, SUPPORTED_LANGUAGE_CODES, SUPPORTED_LANGUAGES } fr
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { TDefaultRecipients } from '@documenso/lib/types/default-recipients';
 import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';
-import { type TDocumentMetaDateFormat, ZDocumentMetaTimezoneSchema } from '@documenso/lib/types/document-meta';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { type TDocumentMetaDateFormat, ZDocumentMetaDateFormatSchema } from '@documenso/lib/types/document-meta';
+import { generateDefaultOrganisationSettings, isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
+import { extractTeamSignatureSettings, generateDefaultTeamSettings } from '@documenso/lib/utils/teams';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
 import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
 import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
@@ -37,11 +37,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg, t } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { TeamGlobalSettings } from '@prisma/client';
-import { DocumentVisibility, OrganisationType, type RecipientRole } from '@prisma/client';
+import { DocumentVisibility, OrganisationType, type RecipientRole, type TeamGlobalSettings } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { DocumentPreferencesResetDialog } from '~/components/dialogs/document-preferences-reset-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 import { DefaultRecipientsMultiSelectCombobox } from '../general/default-recipients-multiselect-combobox';
@@ -93,6 +93,26 @@ export type DocumentPreferencesFormProps = {
   onFormSubmit: (data: TDocumentPreferencesFormSchema) => Promise<void>;
 };
 
+const getDocumentPreferencesFormValues = (settings: SettingsSubset): TDocumentPreferencesFormSchema => {
+  const parsedDocumentDateFormat = ZDocumentMetaDateFormatSchema.safeParse(settings.documentDateFormat);
+
+  return {
+    documentVisibility: settings.documentVisibility,
+    documentLanguage: isValidLanguageCode(settings.documentLanguage) ? settings.documentLanguage : null,
+    documentTimezone: settings.documentTimezone,
+    documentDateFormat: parsedDocumentDateFormat.success ? parsedDocumentDateFormat.data : null,
+    includeSenderDetails: settings.includeSenderDetails,
+    includeSigningCertificate: settings.includeSigningCertificate,
+    includeAuditLog: settings.includeAuditLog,
+    signatureTypes: extractTeamSignatureSettings({ ...settings }),
+    defaultRecipients: settings.defaultRecipients ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients) : null,
+    delegateDocumentOwnership: settings.delegateDocumentOwnership,
+    aiFeaturesEnabled: settings.aiFeaturesEnabled,
+    envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
+    reminderSettings: settings.reminderSettings ?? null,
+  };
+};
+
 export const DocumentPreferencesForm = ({
   settings,
   onFormSubmit,
@@ -113,7 +133,7 @@ export const DocumentPreferencesForm = ({
     documentVisibility: z.nativeEnum(DocumentVisibility).nullable(),
     documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES).nullable(),
     documentTimezone: z.string().nullable(),
-    documentDateFormat: ZDocumentMetaTimezoneSchema.nullable(),
+    documentDateFormat: ZDocumentMetaDateFormatSchema.nullable(),
     includeSenderDetails: z.boolean().nullable(),
     includeSigningCertificate: z.boolean().nullable(),
     includeAuditLog: z.boolean().nullable(),
@@ -127,26 +147,27 @@ export const DocumentPreferencesForm = ({
     reminderSettings: ZEnvelopeReminderSettings.nullable(),
   });
 
+  const defaultValues = getDocumentPreferencesFormValues(settings);
+  const defaultSettings = canInherit ? generateDefaultTeamSettings() : generateDefaultOrganisationSettings();
+  const baseResetValues = getDocumentPreferencesFormValues(defaultSettings);
+  const resetValues = {
+    ...baseResetValues,
+    aiFeaturesEnabled: isAiFeaturesConfigured ? baseResetValues.aiFeaturesEnabled : defaultValues.aiFeaturesEnabled,
+  };
+
   const form = useForm<TDocumentPreferencesFormSchema>({
-    defaultValues: {
-      documentVisibility: settings.documentVisibility,
-      documentLanguage: isValidLanguageCode(settings.documentLanguage) ? settings.documentLanguage : null,
-      documentTimezone: settings.documentTimezone,
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      documentDateFormat: settings.documentDateFormat as TDocumentMetaDateFormat | null,
-      includeSenderDetails: settings.includeSenderDetails,
-      includeSigningCertificate: settings.includeSigningCertificate,
-      includeAuditLog: settings.includeAuditLog,
-      signatureTypes: extractTeamSignatureSettings({ ...settings }),
-      defaultRecipients: settings.defaultRecipients ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients) : null,
-      delegateDocumentOwnership: settings.delegateDocumentOwnership,
-      aiFeaturesEnabled: settings.aiFeaturesEnabled,
-      envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
-      reminderSettings: settings.reminderSettings ?? null,
-    },
+    defaultValues,
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
 
+  const currentValues = form.watch();
+  const isResetDisabled = !form.formState.isDirty && JSON.stringify(currentValues) === JSON.stringify(resetValues);
+
+  const handleResetToDefaults = async () => {
+    await onFormSubmit(resetValues);
+    form.reset(resetValues);
+  };
+
   const handleFormSubmit = form.handleSubmit(async (data) => {
     try {
       await onFormSubmit(data);
@@ -772,6 +793,16 @@ export const DocumentPreferencesForm = ({
             isDirty={form.formState.isDirty}
             isSubmitting={form.formState.isSubmitting}
             onReset={() => form.reset()}
+            resetToDefaults={
+              <DocumentPreferencesResetDialog
+                disabled={isResetDisabled}
+                isSubmitting={form.formState.isSubmitting}
+                onReset={handleResetToDefaults}
+                showAiFeatures={isAiFeaturesConfigured}
+                showDocumentVisibility={!isPersonalLayoutMode}
+                showIncludeSenderDetails={!isPersonalLayoutMode && !isPersonalOrganisation}
+              />
+            }
           />
         </fieldset>
       </form>

apps/remix/app/components/forms/form-sticky-save-bar.tsx

@@ -3,12 +3,17 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { AnimatePresence, motion } from 'framer-motion';
 import { AlertTriangleIcon } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 
 export type FormStickySaveBarProps = {
   isDirty: boolean;
   isSubmitting: boolean;
   onReset: () => void;
+  /**
+   * Slot for a "reset to defaults" action, rendered after the Save button. Only shown
+   * while the form is unchanged so it never competes with the Undo/unsaved-changes UI.
+   */
+  resetToDefaults?: ReactNode;
 };
 
 /**
@@ -24,7 +29,7 @@ export type FormStickySaveBarProps = {
  * shared-layout morph). A 1px sentinel below it detects the stuck state so we can toggle
  * the pill chrome.
  */
-export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset }: FormStickySaveBarProps) => {
+export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset, resetToDefaults }: FormStickySaveBarProps) => {
   const { t } = useLingui();
 
   const sentinelRef = useRef<HTMLDivElement>(null);
@@ -109,6 +114,8 @@ export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset }: FormSticky
           <Button type="submit" className="shrink-0" size="sm" loading={isSubmitting} disabled={!isDirty}>
             <Trans>Save changes</Trans>
           </Button>
+
+          {!isDirty && resetToDefaults}
         </div>
       </div>
 

apps/remix/app/components/forms/token.tsx

@@ -0,0 +1,254 @@
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { ApiToken } from '@prisma/client';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import type { z } from 'zod';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export const EXPIRATION_DATES = {
+  ONE_WEEK: msg`7 days`,
+  ONE_MONTH: msg`1 month`,
+  THREE_MONTHS: msg`3 months`,
+  SIX_MONTHS: msg`6 months`,
+  ONE_YEAR: msg`12 months`,
+} as const;
+
+const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
+  tokenName: true,
+  expirationDate: true,
+});
+
+type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
+
+type NewlyCreatedToken = {
+  id: number;
+  token: string;
+};
+
+export type ApiTokenFormProps = {
+  className?: string;
+  tokens?: Pick<ApiToken, 'id'>[];
+};
+
+export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
+  const [, copy] = useCopyToClipboard();
+
+  const team = useCurrentTeam();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [newlyCreatedToken, setNewlyCreatedToken] = useState<NewlyCreatedToken | null>();
+  const [noExpirationDate, setNoExpirationDate] = useState(false);
+
+  const { mutateAsync: createTokenMutation } = trpc.apiToken.create.useMutation({
+    onSuccess(data) {
+      setNewlyCreatedToken(data);
+    },
+  });
+
+  const form = useForm<TCreateTokenFormSchema>({
+    resolver: zodResolver(ZCreateTokenFormSchema),
+    defaultValues: {
+      tokenName: '',
+      expirationDate: '',
+    },
+  });
+
+  const copyToken = async (token: string) => {
+    try {
+      const copied = await copy(token);
+
+      if (!copied) {
+        throw new Error('Unable to copy the token');
+      }
+
+      toast({
+        title: _(msg`Token copied to clipboard`),
+        description: _(msg`The token was copied to your clipboard.`),
+      });
+    } catch (error) {
+      toast({
+        title: _(msg`Unable to copy token`),
+        description: _(msg`We were unable to copy the token to your clipboard. Please try again.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenFormSchema) => {
+    try {
+      await createTokenMutation({
+        teamId: team.id,
+        tokenName,
+        expirationDate: noExpirationDate ? null : expirationDate,
+      });
+
+      toast({
+        title: _(msg`Token created`),
+        description: _(msg`A new token was created successfully.`),
+        duration: 5000,
+      });
+
+      form.reset();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You do not have permission to create a token for this team.`)
+        .otherwise(() => msg`Something went wrong. Please try again later.`);
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  return (
+    <div className={cn(className)}>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset className="mt-6 flex w-full flex-col gap-4" disabled={form.formState.isSubmitting}>
+            <FormField
+              control={form.control}
+              name="tokenName"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel className="text-muted-foreground">
+                    <Trans>Token name</Trans>
+                  </FormLabel>
+
+                  <div className="flex items-center gap-x-4">
+                    <FormControl className="flex-1">
+                      <Input type="text" {...field} />
+                    </FormControl>
+                  </div>
+
+                  <FormDescription className="text-xs italic">
+                    <Trans>Please enter a meaningful name for your token. This will help you identify it later.</Trans>
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex flex-col gap-4 md:flex-row">
+              <FormField
+                control={form.control}
+                name="expirationDate"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel className="text-muted-foreground">
+                      <Trans>Token expiration date</Trans>
+                    </FormLabel>
+
+                    <div className="flex items-center gap-x-4">
+                      <FormControl className="flex-1">
+                        <Select onValueChange={field.onChange} disabled={noExpirationDate}>
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder={_(msg`Choose...`)} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
+                              <SelectItem key={key} value={key}>
+                                {_(date)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                    </div>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div>
+                <FormLabel className="mt-2 text-muted-foreground">
+                  <Trans>Never expire</Trans>
+                </FormLabel>
+                <div className="block md:py-1.5">
+                  <Switch
+                    className="mt-2 bg-background"
+                    checked={noExpirationDate}
+                    onCheckedChange={setNoExpirationDate}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <Button type="submit" className="hidden md:inline-flex" loading={form.formState.isSubmitting}>
+              <Trans>Create token</Trans>
+            </Button>
+
+            <div className="md:hidden">
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                <Trans>Create token</Trans>
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+
+      <AnimatePresence>
+        {newlyCreatedToken && tokens && tokens.find((token) => token.id === newlyCreatedToken.id) && (
+          <motion.div
+            className="mt-8"
+            initial={{ opacity: 0, y: -40 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 40 }}
+          >
+            <Card gradient>
+              <CardContent className="p-4">
+                <p className="mt-2 text-muted-foreground text-sm">
+                  <Trans>
+                    Your token was created successfully! Make sure to copy it because you won't be able to see it again!
+                  </Trans>
+                </p>
+
+                <p className="my-4 rounded-md bg-muted-foreground/10 px-2.5 py-1 font-mono text-sm">
+                  {newlyCreatedToken.token}
+                </p>
+
+                <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
+                  <Trans>Copy token</Trans>
+                </Button>
+              </CardContent>
+            </Card>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.document.tsx

@@ -88,7 +88,7 @@ export default function OrganisationSettingsDocumentPage() {
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
-          delegateDocumentOwnership: delegateDocumentOwnership,
+          delegateDocumentOwnership,
           aiFeaturesEnabled,
           envelopeExpirationPeriod: envelopeExpirationPeriod ?? undefined,
           reminderSettings: reminderSettings ?? undefined,

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.document.tsx

@@ -82,7 +82,7 @@ export default function TeamsSettingsPage() {
                 uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
                 drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
               }),
-          delegateDocumentOwnership: delegateDocumentOwnership,
+          delegateDocumentOwnership,
         },
       });
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.tokens.tsx

@@ -1,18 +1,14 @@
 import { trpc } from '@documenso/trpc/react';
-import type { TGetApiTokensResponse } from '@documenso/trpc/server/api-token-router/get-api-tokens.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
-import { DataTable, type DataTableColumnDef } from '@documenso/ui/primitives/data-table';
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-import { TableCell } from '@documenso/ui/primitives/table';
 import { msg } from '@lingui/core/macro';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { TeamMemberRole } from '@prisma/client';
-import { useMemo } from 'react';
+import { DateTime } from 'luxon';
 
-import { TokenCreateDialog } from '~/components/dialogs/token-create-dialog';
 import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
+import { ApiTokenForm } from '~/components/forms/token';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useOptionalCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -22,88 +18,33 @@ export function meta() {
 }
 
 export default function ApiTokensPage() {
-  const { t, i18n } = useLingui();
+  const { i18n } = useLingui();
+
+  const { data: tokens } = trpc.apiToken.getMany.useQuery();
 
   const team = useOptionalCurrentTeam();
 
-  const isUnauthorized = !!team && team.currentTeamRole !== TeamMemberRole.ADMIN;
-
-  const {
-    data: tokens,
-    isLoading,
-    isError,
-  } = trpc.apiToken.getMany.useQuery(undefined, {
-    enabled: !isUnauthorized,
-  });
-
-  const columns = useMemo(() => {
-    return [
-      {
-        header: t`Name`,
-        cell: ({ row }) => <span className="font-medium text-foreground">{row.original.name}</span>,
-      },
-      {
-        header: t`Created`,
-        cell: ({ row }) => i18n.date(row.original.createdAt),
-      },
-      {
-        header: t`Expires`,
-        cell: ({ row }) => {
-          if (!row.original.expires) {
-            return (
-              <span className="text-muted-foreground">
-                <Trans>Never</Trans>
-              </span>
-            );
-          }
-
-          if (row.original.expires < new Date()) {
-            return (
-              <Badge variant="destructive" size="small">
-                <Trans>Expired</Trans>
-              </Badge>
-            );
-          }
-
-          return i18n.date(row.original.expires);
-        },
-      },
-      {
-        header: t`Actions`,
-        cell: ({ row }) => (
-          <TokenDeleteDialog token={row.original}>
-            <Button variant="destructive">
-              <Trans>Delete</Trans>
-            </Button>
-          </TokenDeleteDialog>
-        ),
-      },
-    ] satisfies DataTableColumnDef<TGetApiTokensResponse[number]>[];
-  }, []);
-
   return (
     <div>
       <SettingsHeader
         title={<Trans>API Tokens</Trans>}
         subtitle={
           <Trans>
-            Create and manage API tokens. See our{' '}
+            On this page, you can create and manage API tokens. See our{' '}
             <a
               className="text-primary underline"
               href={'https://docs.documenso.com/developers/public-api'}
               target="_blank"
               rel="noopener"
             >
-              documentation
+              Documentation
             </a>{' '}
             for more information.
           </Trans>
         }
-      >
-        {!isUnauthorized && <TokenCreateDialog />}
-      </SettingsHeader>
+      />
 
-      {isUnauthorized ? (
+      {team && team?.currentTeamRole !== TeamMemberRole.ADMIN ? (
         <Alert className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row" variant="warning">
           <div>
             <AlertTitle>
@@ -115,43 +56,58 @@ export default function ApiTokensPage() {
           </div>
         </Alert>
       ) : (
-        <DataTable
-          columns={columns}
-          data={tokens ?? []}
-          perPage={0}
-          currentPage={0}
-          totalPages={0}
-          error={{
-            enable: isError,
-          }}
-          emptyState={
-            <div className="flex h-60 flex-col items-center justify-center gap-y-4 text-muted-foreground/60">
-              <p>
-                <Trans>You have no API tokens yet. Your tokens will be shown here once you create them.</Trans>
+        <>
+          <ApiTokenForm className="max-w-xl" tokens={tokens} />
+
+          <hr className="mt-8 mb-4" />
+
+          <h4 className="font-medium text-xl">
+            <Trans>Your existing tokens</Trans>
+          </h4>
+
+          {tokens && tokens.length === 0 && (
+            <div className="mb-4">
+              <p className="mt-2 text-muted-foreground text-sm italic">
+                <Trans>Your tokens will be shown here once you create them.</Trans>
               </p>
             </div>
-          }
-          skeleton={{
-            enable: isLoading,
-            rows: 3,
-            component: (
-              <>
-                <TableCell>
-                  <Skeleton className="h-4 w-24 rounded-full" />
-                </TableCell>
-                <TableCell>
-                  <Skeleton className="h-4 w-16 rounded-full" />
-                </TableCell>
-                <TableCell>
-                  <Skeleton className="h-4 w-16 rounded-full" />
-                </TableCell>
-                <TableCell>
-                  <Skeleton className="h-4 w-12 rounded-full" />
-                </TableCell>
-              </>
-            ),
-          }}
-        />
+          )}
+
+          {tokens && tokens.length > 0 && (
+            <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+              {tokens.map((token) => (
+                <div key={token.id} className="rounded-lg border border-border p-4">
+                  <div className="flex items-center justify-between gap-x-4">
+                    <div>
+                      <h5 className="text-base">{token.name}</h5>
+
+                      <p className="mt-2 text-muted-foreground text-xs">
+                        <Trans>Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}</Trans>
+                      </p>
+                      {token.expires ? (
+                        <p className="mt-1 text-muted-foreground text-xs">
+                          <Trans>Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}</Trans>
+                        </p>
+                      ) : (
+                        <p className="mt-1 text-muted-foreground text-xs">
+                          <Trans>Token doesn't have an expiration date</Trans>
+                        </p>
+                      )}
+                    </div>
+
+                    <div>
+                      <TokenDeleteDialog token={token}>
+                        <Button variant="destructive">
+                          <Trans>Delete</Trans>
+                        </Button>
+                      </TokenDeleteDialog>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </>
       )}
     </div>
   );

apps/remix/package.json

@@ -36,8 +36,8 @@
     "@lingui/react": "^5.6.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
-    "@react-router/node": "^7.12.0",
-    "@react-router/serve": "^7.12.0",
+    "@react-router/node": "^7.18.1",
+    "@react-router/serve": "^7.18.1",
     "@simplewebauthn/browser": "^13.2.2",
     "@simplewebauthn/server": "^13.2.2",
     "@tanstack/react-query": "5.90.10",
@@ -81,8 +81,8 @@
     "@babel/preset-typescript": "^7.28.5",
     "@lingui/babel-plugin-lingui-macro": "^5.6.0",
     "@lingui/vite-plugin": "^5.6.0",
-    "@react-router/dev": "^7.12.0",
-    "@react-router/remix-routes-option-adapter": "^7.12.0",
+    "@react-router/dev": "^7.18.1",
+    "@react-router/remix-routes-option-adapter": "^7.18.1",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-json": "^6.1.0",

packages/ui/primitives/alert-dialog.tsx

@@ -41,7 +41,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fade-in-90 slide-in-from-bottom-10 sm:zoom-in-90 sm:slide-in-from-bottom-0 fixed z-50 grid w-full max-w-lg scale-100 animate-in gap-4 border bg-background p-6 opacity-100 shadow-lg focus:outline-none sm:rounded-lg md:w-full',
+        'fade-in-90 slide-in-from-bottom-10 sm:zoom-in-90 sm:slide-in-from-bottom-0 fixed z-50 grid w-full max-w-lg scale-100 animate-in gap-4 border bg-background p-6 opacity-100 shadow-lg sm:rounded-lg md:w-full',
         className,
       )}
       {...props}

packages/ui/primitives/dialog.tsx

@@ -61,7 +61,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full animate-in gap-4 border bg-background p-6 shadow-lg focus:outline-none sm:max-w-lg sm:rounded-lg',
+        'data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full animate-in gap-4 border bg-background p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
         {
           'rounded-b-xl': position === 'start',
           'rounded-t-xl': position === 'end',

packages/ui/primitives/sheet.tsx

@@ -49,93 +49,90 @@ const SheetOverlay = React.forwardRef<
 
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
-const sheetVariants = cva(
-  'fixed z-[61] scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg focus:outline-none',
-  {
-    variants: {
-      position: {
-        top: 'animate-in slide-in-from-top w-full duration-300',
-        bottom: 'animate-in slide-in-from-bottom w-full duration-300',
-        left: 'animate-in slide-in-from-left h-full duration-300',
-        right: 'animate-in slide-in-from-right h-full duration-300',
-      },
-      size: {
-        content: '',
-        default: '',
-        sm: '',
-        lg: '',
-        xl: '',
-        full: '',
-      },
+const sheetVariants = cva('fixed z-[61] scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border', {
+  variants: {
+    position: {
+      top: 'animate-in slide-in-from-top w-full duration-300',
+      bottom: 'animate-in slide-in-from-bottom w-full duration-300',
+      left: 'animate-in slide-in-from-left h-full duration-300',
+      right: 'animate-in slide-in-from-right h-full duration-300',
     },
-    compoundVariants: [
-      {
-        position: ['top', 'bottom'],
-        size: 'content',
-        class: 'max-h-screen',
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'default',
-        class: 'h-1/3',
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'sm',
-        class: 'h-1/4',
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'lg',
-        class: 'h-1/2',
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'xl',
-        class: 'h-5/6',
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'full',
-        class: 'h-screen',
-      },
-      {
-        position: ['right', 'left'],
-        size: 'content',
-        class: 'max-w-screen',
-      },
-      {
-        position: ['right', 'left'],
-        size: 'default',
-        class: 'w-1/3',
-      },
-      {
-        position: ['right', 'left'],
-        size: 'sm',
-        class: 'w-1/4',
-      },
-      {
-        position: ['right', 'left'],
-        size: 'lg',
-        class: 'w-1/2',
-      },
-      {
-        position: ['right', 'left'],
-        size: 'xl',
-        class: 'w-5/6',
-      },
-      {
-        position: ['right', 'left'],
-        size: 'full',
-        class: 'w-screen',
-      },
-    ],
-    defaultVariants: {
-      position: 'right',
-      size: 'default',
+    size: {
+      content: '',
+      default: '',
+      sm: '',
+      lg: '',
+      xl: '',
+      full: '',
     },
   },
-);
+  compoundVariants: [
+    {
+      position: ['top', 'bottom'],
+      size: 'content',
+      class: 'max-h-screen',
+    },
+    {
+      position: ['top', 'bottom'],
+      size: 'default',
+      class: 'h-1/3',
+    },
+    {
+      position: ['top', 'bottom'],
+      size: 'sm',
+      class: 'h-1/4',
+    },
+    {
+      position: ['top', 'bottom'],
+      size: 'lg',
+      class: 'h-1/2',
+    },
+    {
+      position: ['top', 'bottom'],
+      size: 'xl',
+      class: 'h-5/6',
+    },
+    {
+      position: ['top', 'bottom'],
+      size: 'full',
+      class: 'h-screen',
+    },
+    {
+      position: ['right', 'left'],
+      size: 'content',
+      class: 'max-w-screen',
+    },
+    {
+      position: ['right', 'left'],
+      size: 'default',
+      class: 'w-1/3',
+    },
+    {
+      position: ['right', 'left'],
+      size: 'sm',
+      class: 'w-1/4',
+    },
+    {
+      position: ['right', 'left'],
+      size: 'lg',
+      class: 'w-1/2',
+    },
+    {
+      position: ['right', 'left'],
+      size: 'xl',
+      class: 'w-5/6',
+    },
+    {
+      position: ['right', 'left'],
+      size: 'full',
+      class: 'w-screen',
+    },
+  ],
+  defaultVariants: {
+    position: 'right',
+    size: 'default',
+  },
+});
 
 export interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,