Merge branch 'main' into feat/account-deletion

2025-11-14 00:32:43 +10:00 · 2024-02-14 14:54:26 +00:00
parent 30752815e7 f72b669f67
commit 6daaa3a6d4
268 changed files with 15575 additions and 1319 deletions
--- a/packages/ui/primitives/avatar.tsx
+++ b/packages/ui/primitives/avatar.tsx
@ -48,4 +48,37 @@ const AvatarFallback = React.forwardRef<

 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

-export { Avatar, AvatarImage, AvatarFallback };
+type AvatarWithTextProps = {
+  avatarClass?: string;
+  avatarFallback: string;
+  className?: string;
+  primaryText: React.ReactNode;
+  secondaryText?: React.ReactNode;
+  rightSideComponent?: React.ReactNode;
+};
+
+const AvatarWithText = ({
+  avatarClass,
+  avatarFallback,
+  className,
+  primaryText,
+  secondaryText,
+  rightSideComponent,
+}: AvatarWithTextProps) => (
+  <div className={cn('flex w-full max-w-xs items-center gap-2', className)}>
+    <Avatar
+      className={cn('dark:border-border h-10 w-10 border-2 border-solid border-white', avatarClass)}
+    >
+      <AvatarFallback className="text-xs text-gray-400">{avatarFallback}</AvatarFallback>
+    </Avatar>
+
+    <div className="flex flex-col text-left text-sm font-normal">
+      <span className="text-foreground truncate">{primaryText}</span>
+      <span className="text-muted-foreground truncate text-xs">{secondaryText}</span>
+    </div>
+
+    {rightSideComponent}
+  </div>
+);
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarWithText };
--- a/packages/ui/primitives/badge.tsx
+++ b/packages/ui/primitives/badge.tsx
@ -1,6 +1,7 @@
 import * as React from 'react';

-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';

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

--- a/packages/ui/primitives/button.tsx
+++ b/packages/ui/primitives/button.tsx
@ -19,6 +19,7 @@ const buttonVariants = cva(
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'underline-offset-4 hover:underline text-primary',
+        none: '',
      },
      size: {
        default: 'h-10 py-2 px-4',
--- a/packages/ui/primitives/command.tsx
+++ b/packages/ui/primitives/command.tsx
@ -92,7 +92,7 @@ const CommandGroup = React.forwardRef<
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
-      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground mx-2 overflow-hidden border-b pb-2 last:border-0 [&_[cmdk-group-heading]]:mt-2 [&_[cmdk-group-heading]]:px-0 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:opacity-50 ',
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden border-b p-1 last:border-0 [&_[cmdk-group-heading]]:mt-2 [&_[cmdk-group-heading]]:px-0 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:opacity-50 ',
      className,
    )}
    {...props}
@ -121,7 +121,7 @@ const CommandItem = React.forwardRef<
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
-      'aria-selected:bg-accent aria-selected:text-accent-foreground relative -mx-2 -my-1 flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@ -87,7 +87,10 @@ DialogHeader.displayName = 'DialogHeader';

 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    className={cn(
+      'flex flex-col-reverse space-y-2 space-y-reverse sm:flex-row sm:justify-end sm:space-x-2 sm:space-y-0',
+      className,
+    )}
    {...props}
  />
 );
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -304,6 +304,13 @@ export const AddFieldsFormPartial = ({
    return recipientsByRole;
  }, [recipients]);

+  const recipientsByRoleToDisplay = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return (Object.entries(recipientsByRole) as [RecipientRole, Recipient[]][]).filter(
+      ([role]) => role !== RecipientRole.CC && role !== RecipientRole.VIEWER,
+    );
+  }, [recipientsByRole]);
+
  return (
    <>
      <DocumentFlowFormContainerHeader
@ -382,13 +389,10 @@ export const AddFieldsFormPartial = ({
                    </span>
                  </CommandEmpty>

-                  {Object.entries(recipientsByRole).map(([role, recipients], roleIndex) => (
+                  {recipientsByRoleToDisplay.map(([role, recipients], roleIndex) => (
                    <CommandGroup key={roleIndex}>
                      <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
-                        {
-                          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                          RECIPIENT_ROLES_DESCRIPTION[role as RecipientRole].roleName
-                        }
+                        {`${RECIPIENT_ROLES_DESCRIPTION[role].roleName}s`}
                      </div>

                      {recipients.length === 0 && (
@ -403,7 +407,7 @@ export const AddFieldsFormPartial = ({
                      {recipients.map((recipient) => (
                        <CommandItem
                          key={recipient.id}
-                          className={cn('!rounded-2xl px-4 last:mb-1 [&:not(:first-child)]:mt-1', {
+                          className={cn('px-2 last:mb-1 [&:not(:first-child)]:mt-1', {
                            'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
                          })}
                          onSelect={() => {
@ -413,7 +417,7 @@ export const AddFieldsFormPartial = ({
                        >
                          <span
                            className={cn('text-foreground/70 truncate', {
-                              'text-foreground': recipient === selectedSigner,
+                              'text-foreground/80': recipient === selectedSigner,
                            })}
                          >
                            {recipient.name && (
@ -439,7 +443,7 @@ export const AddFieldsFormPartial = ({
                            ) : (
                              <Tooltip>
                                <TooltipTrigger>
-                                  <Info className="mx-2 h-4 w-4" />
+                                  <Info className="ml-2 h-4 w-4" />
                                </TooltipTrigger>

                                <TooltipContent className="text-muted-foreground max-w-xs">
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@ -105,7 +105,10 @@ export const AddSignersFormPartial = ({
    }

    return recipients.some(
-      (recipient) => recipient.id === id && recipient.sendStatus === SendStatus.SENT,
+      (recipient) =>
+        recipient.id === id &&
+        recipient.sendStatus === SendStatus.SENT &&
+        recipient.role !== RecipientRole.CC,
    );
  };

--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@ -2,6 +2,8 @@

 import { useEffect } from 'react';

+import { zodResolver } from '@hookform/resolvers/zod';
+import { Info } from 'lucide-react';
 import { Controller, useForm } from 'react-hook-form';

 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
@ -23,6 +25,7 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';

 import { Combobox } from '../combobox';
 import { FormErrorMessage } from '../form/form-error-message';
@ -30,7 +33,7 @@ import { Input } from '../input';
 import { Label } from '../label';
 import { useStep } from '../stepper';
 import { Textarea } from '../textarea';
-import type { TAddSubjectFormSchema } from './add-subject.types';
+import { type TAddSubjectFormSchema, ZAddSubjectFormSchema } from './add-subject.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
@ -69,8 +72,10 @@ export const AddSubjectFormPartial = ({
        message: document.documentMeta?.message ?? '',
        timezone: document.documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
        dateFormat: document.documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+        redirectUrl: document.documentMeta?.redirectUrl ?? '',
      },
    },
+    resolver: zodResolver(ZAddSubjectFormSchema),
  });

  const onFormSubmit = handleSubmit(onSubmit);
@ -163,64 +168,94 @@ export const AddSubjectFormPartial = ({
              </ul>
            </div>

-            {hasDateField && (
-              <Accordion type="multiple" className="mt-8 border-none">
-                <AccordionItem value="advanced-options" className="border-none">
-                  <AccordionTrigger className="mb-2 border-b text-left hover:no-underline">
-                    Advanced Options
-                  </AccordionTrigger>
+            <Accordion type="multiple" className="mt-8 border-none">
+              <AccordionItem value="advanced-options" className="border-none">
+                <AccordionTrigger className="mb-2 border-b text-left hover:no-underline">
+                  Advanced Options
+                </AccordionTrigger>

-                  <AccordionContent className="text-muted-foreground -mx-1 flex max-w-prose flex-col px-1 text-sm leading-relaxed">
-                    <div className="mt-2 flex flex-col">
-                      <Label htmlFor="date-format">
-                        Date Format <span className="text-muted-foreground">(Optional)</span>
-                      </Label>
+                <AccordionContent className="text-muted-foreground -mx-1 flex max-w-prose flex-col px-1 pt-2 text-sm leading-relaxed">
+                  {hasDateField && (
+                    <>
+                      <div className="flex flex-col">
+                        <Label htmlFor="date-format">
+                          Date Format <span className="text-muted-foreground">(Optional)</span>
+                        </Label>

-                      <Controller
-                        control={control}
-                        name={`meta.dateFormat`}
-                        disabled={documentHasBeenSent}
-                        render={({ field: { value, onChange, disabled } }) => (
-                          <Select value={value} onValueChange={onChange} disabled={disabled}>
-                            <SelectTrigger className="bg-background mt-2">
-                              <SelectValue />
-                            </SelectTrigger>
+                        <Controller
+                          control={control}
+                          name={`meta.dateFormat`}
+                          disabled={documentHasBeenSent}
+                          render={({ field: { value, onChange, disabled } }) => (
+                            <Select value={value} onValueChange={onChange} disabled={disabled}>
+                              <SelectTrigger className="bg-background mt-2">
+                                <SelectValue />
+                              </SelectTrigger>

-                            <SelectContent>
-                              {DATE_FORMATS.map((format) => (
-                                <SelectItem key={format.key} value={format.value}>
-                                  {format.label}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        )}
-                      />
+                              <SelectContent>
+                                {DATE_FORMATS.map((format) => (
+                                  <SelectItem key={format.key} value={format.value}>
+                                    {format.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          )}
+                        />
+                      </div>
+
+                      <div className="mt-4 flex flex-col">
+                        <Label htmlFor="time-zone">
+                          Time Zone <span className="text-muted-foreground">(Optional)</span>
+                        </Label>
+
+                        <Controller
+                          control={control}
+                          name={`meta.timezone`}
+                          render={({ field: { value, onChange } }) => (
+                            <Combobox
+                              className="bg-background"
+                              options={TIME_ZONES}
+                              value={value}
+                              onChange={(value) => value && onChange(value)}
+                              disabled={documentHasBeenSent}
+                            />
+                          )}
+                        />
+                      </div>
+                    </>
+                  )}
+
+                  <div className="flex flex-col">
+                    <div className="flex flex-col gap-y-4">
+                      <div>
+                        <Label htmlFor="redirectUrl" className="flex items-center">
+                          Redirect URL{' '}
+                          <Tooltip>
+                            <TooltipTrigger>
+                              <Info className="mx-2 h-4 w-4" />
+                            </TooltipTrigger>
+
+                            <TooltipContent className="text-muted-foreground max-w-xs">
+                              Add a URL to redirect the user to once the document is signed
+                            </TooltipContent>
+                          </Tooltip>
+                        </Label>
+
+                        <Input
+                          id="redirectUrl"
+                          type="url"
+                          className="bg-background my-2"
+                          {...register('meta.redirectUrl')}
+                        />
+
+                        <FormErrorMessage className="mt-2" error={errors.meta?.redirectUrl} />
+                      </div>
                    </div>
-
-                    <div className="mt-4 flex flex-col">
-                      <Label htmlFor="time-zone">
-                        Time Zone <span className="text-muted-foreground">(Optional)</span>
-                      </Label>
-
-                      <Controller
-                        control={control}
-                        name={`meta.timezone`}
-                        render={({ field: { value, onChange } }) => (
-                          <Combobox
-                            className="bg-background"
-                            options={TIME_ZONES}
-                            value={value}
-                            onChange={(value) => value && onChange(value)}
-                            disabled={documentHasBeenSent}
-                          />
-                        )}
-                      />
-                    </div>
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            )}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
          </div>
        </div>
      </DocumentFlowFormContainerContent>
--- a/packages/ui/primitives/document-flow/add-subject.types.ts
+++ b/packages/ui/primitives/document-flow/add-subject.types.ts
@ -2,6 +2,7 @@ import { z } from 'zod';

 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { URL_REGEX } from '@documenso/lib/constants/url-regex';

 export const ZAddSubjectFormSchema = z.object({
  meta: z.object({
@ -9,6 +10,12 @@ export const ZAddSubjectFormSchema = z.object({
    message: z.string(),
    timezone: z.string().optional().default(DEFAULT_DOCUMENT_TIME_ZONE),
    dateFormat: z.string().optional().default(DEFAULT_DOCUMENT_DATE_FORMAT),
+    redirectUrl: z
+      .string()
+      .optional()
+      .refine((value) => value === undefined || value === '' || URL_REGEX.test(value), {
+        message: 'Please enter a valid URL',
+      }),
  }),
 });

--- a/packages/ui/primitives/document-flow/add-title.tsx
+++ b/packages/ui/primitives/document-flow/add-title.tsx
@ -1,5 +1,6 @@
 'use client';

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

 import type { Field, Recipient } from '@documenso/prisma/client';
@ -10,6 +11,7 @@ import { Input } from '../input';
 import { Label } from '../label';
 import { useStep } from '../stepper';
 import type { TAddTitleFormSchema } from './add-title.types';
+import { ZAddTitleFormSchema } from './add-title.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
@ -40,6 +42,7 @@ export const AddTitleFormPartial = ({
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<TAddTitleFormSchema>({
+    resolver: zodResolver(ZAddTitleFormSchema),
    defaultValues: {
      title: document.title,
    },
@ -71,7 +74,7 @@ export const AddTitleFormPartial = ({
                id="title"
                className="bg-background my-2"
                disabled={isSubmitting}
-                {...register('title', { required: "Title can't be empty" })}
+                {...register('title')}
              />

              <FormErrorMessage className="mt-2" error={errors.title} />
--- a/packages/ui/primitives/document-flow/add-title.types.ts
+++ b/packages/ui/primitives/document-flow/add-title.types.ts
@ -1,7 +1,7 @@
 import { z } from 'zod';

 export const ZAddTitleFormSchema = z.object({
-  title: z.string().min(1),
+  title: z.string().trim().min(1, { message: "Title can't be empty" }),
 });

 export type TAddTitleFormSchema = z.infer<typeof ZAddTitleFormSchema>;
--- a/packages/ui/primitives/multi-select-combobox.tsx
+++ b/packages/ui/primitives/multi-select-combobox.tsx
@ -0,0 +1,165 @@
+'use client';
+
+import * as React from 'react';
+
+import { AnimatePresence } from 'framer-motion';
+import { Check, ChevronsUpDown, Loader, XIcon } from 'lucide-react';
+
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+type OptionValue = string | number | boolean | null;
+
+type ComboBoxOption<T = OptionValue> = {
+  label: string;
+  value: T;
+  disabled?: boolean;
+};
+
+type MultiSelectComboboxProps<T = OptionValue> = {
+  emptySelectionPlaceholder?: React.ReactNode | string;
+  enableClearAllButton?: boolean;
+  loading?: boolean;
+  inputPlaceholder?: string;
+  onChange: (_values: T[]) => void;
+  options: ComboBoxOption<T>[];
+  selectedValues: T[];
+};
+
+/**
+ * Multi select combo box component which supports:
+ *
+ * - Label/value pairs
+ * - Loading state
+ * - Clear all button
+ */
+export function MultiSelectCombobox<T = OptionValue>({
+  emptySelectionPlaceholder = 'Select values...',
+  enableClearAllButton,
+  inputPlaceholder,
+  loading,
+  onChange,
+  options,
+  selectedValues,
+}: MultiSelectComboboxProps<T>) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (selectedOption: T) => {
+    let newSelectedOptions = [...selectedValues, selectedOption];
+
+    if (selectedValues.includes(selectedOption)) {
+      newSelectedOptions = selectedValues.filter((v) => v !== selectedOption);
+    }
+
+    onChange(newSelectedOptions);
+
+    setOpen(false);
+  };
+
+  const selectedOptions = React.useMemo(() => {
+    return selectedValues.map((value): ComboBoxOption<T> => {
+      const foundOption = options.find((option) => option.value === value);
+
+      if (foundOption) {
+        return foundOption;
+      }
+
+      let label = '';
+
+      if (typeof value === 'string' || typeof value === 'number') {
+        label = value.toString();
+      }
+
+      return {
+        label,
+        value,
+      };
+    });
+  }, [selectedValues, options]);
+
+  const buttonLabel = React.useMemo(() => {
+    if (loading) {
+      return '';
+    }
+
+    if (selectedOptions.length === 0) {
+      return emptySelectionPlaceholder;
+    }
+
+    return selectedOptions.map((option) => option.label).join(', ');
+  }, [selectedOptions, emptySelectionPlaceholder, loading]);
+
+  const showClearButton = enableClearAllButton && selectedValues.length > 0;
+
+  return (
+    <Popover open={open && !loading} onOpenChange={setOpen}>
+      <div className="relative">
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            disabled={loading}
+            aria-expanded={open}
+            className="w-[200px] px-3"
+          >
+            <AnimatePresence>
+              {loading ? (
+                <div className="flex items-center justify-center">
+                  <Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
+                </div>
+              ) : (
+                <AnimateGenericFadeInOut className="flex w-full justify-between">
+                  <span className="truncate">{buttonLabel}</span>
+
+                  <div
+                    className={cn('ml-2 flex flex-row items-center', {
+                      'ml-6': showClearButton,
+                    })}
+                  >
+                    <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+                  </div>
+                </AnimateGenericFadeInOut>
+              )}
+            </AnimatePresence>
+          </Button>
+        </PopoverTrigger>
+
+        {/* This is placed outside the trigger since we can't have nested buttons. */}
+        {showClearButton && !loading && (
+          <div className="absolute bottom-0 right-8 top-0 flex items-center justify-center">
+            <button
+              className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-300 dark:bg-neutral-700"
+              onClick={() => onChange([])}
+            >
+              <XIcon className="text-muted-foreground h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={inputPlaceholder} />
+          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandGroup>
+            {options.map((option, i) => (
+              <CommandItem key={i} onSelect={() => handleSelect(option.value)}>
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedValues.includes(option.value) ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                {option.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/packages/ui/primitives/multiselect-combobox.tsx
+++ b/packages/ui/primitives/multiselect-combobox.tsx
@ -1,82 +0,0 @@
-import * as React from 'react';
-
-import { Check, ChevronsUpDown } from 'lucide-react';
-
-import { Role } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
-
-type ComboboxProps = {
-  listValues: string[];
-  onChange: (_values: string[]) => void;
-};
-
-const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
-  const [open, setOpen] = React.useState(false);
-  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
-  const dbRoles = Object.values(Role);
-
-  React.useEffect(() => {
-    setSelectedValues(listValues);
-  }, [listValues]);
-
-  const allRoles = [...new Set([...dbRoles, ...selectedValues])];
-
-  const handleSelect = (currentValue: string) => {
-    let newSelectedValues;
-    if (selectedValues.includes(currentValue)) {
-      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
-    } else {
-      newSelectedValues = [...selectedValues, currentValue];
-    }
-
-    setSelectedValues(newSelectedValues);
-    onChange(newSelectedValues);
-    setOpen(false);
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput placeholder={selectedValues.join(', ')} />
-          <CommandEmpty>No value found.</CommandEmpty>
-          <CommandGroup>
-            {allRoles.map((value: string, i: number) => (
-              <CommandItem key={i} onSelect={() => handleSelect(value)}>
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
-                  )}
-                />
-                {value}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export { MultiSelectCombobox };
--- a/packages/ui/primitives/sheet.tsx
+++ b/packages/ui/primitives/sheet.tsx
@ -3,7 +3,8 @@
 import * as React from 'react';

 import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import { X } from 'lucide-react';

 import { cn } from '../lib/utils';
@ -12,7 +13,7 @@ const Sheet = SheetPrimitive.Root;

 const SheetTrigger = SheetPrimitive.Trigger;

-const portalVariants = cva('fixed inset-0 z-50 flex', {
+const portalVariants = cva('fixed inset-0 z-[61] flex', {
  variants: {
    position: {
      top: 'items-start',
@ -42,7 +43,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, children: _children, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
-      'bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100',
+      'bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-[61] backdrop-blur-sm transition-all duration-100',
      className,
    )}
    {...props}
@ -53,7 +54,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

 const sheetVariants = cva(
-  'fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border',
+  'fixed z-[61] scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border',
  {
    variants: {
      position: {