{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "email-compose-card",
  "type": "registry:ui",
  "title": "Email Compose Card",
  "description": "An AI-powered email composition card with recipient validation, smart inputs, and beautiful styling.",
  "registryDependencies": [
    "icons"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/email-compose-card.tsx",
      "content": "\"use client\";\n\nimport {\n\tButton,\n\tChip,\n\tInput,\n\tModal,\n\tModalBody,\n\tModalContent,\n\tScrollShadow,\n\tTextarea,\n} from \"@heroui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { z } from \"zod\";\nimport {\n\tCancel01Icon,\n\tHugeiconsIcon,\n\tLoading03Icon,\n\tMail01Icon,\n\tPencilEdit01Icon,\n\tPlusSignIcon,\n\tTick02Icon,\n} from \"@/components/icons\";\nimport { cn } from \"@/lib/utils\";\n\n// Email validation schema\nconst emailComposeSchema = z.object({\n\tto: z\n\t\t.array(z.string().email(\"Invalid email address\"))\n\t\t.min(1, \"At least one recipient is required\"),\n\tsubject: z\n\t\t.string()\n\t\t.min(1, \"Subject is required\")\n\t\t.max(200, \"Subject must be under 200 characters\"),\n\tbody: z\n\t\t.string()\n\t\t.min(1, \"Email body is required\")\n\t\t.max(10000, \"Email body must be under 10,000 characters\"),\n});\n\nconst emailValidationSchema = z.string().email(\"Invalid email address\");\n\nexport interface EmailData {\n\tto: string[];\n\tsubject: string;\n\tbody: string;\n\tdraft_id?: string;\n\tthread_id?: string;\n\tbcc?: string[];\n\tcc?: string[];\n\tis_html?: boolean;\n}\n\nexport interface EmailComposeCardProps {\n\temailData: EmailData;\n\tonSend?: (data: EmailData) => void;\n\tclassName?: string;\n}\n\nfunction RecipientSelectionModal({\n\tisOpen,\n\tonClose,\n\tonConfirm,\n\tsuggestions,\n\tselectedEmails,\n\tsetSelectedEmails,\n\tcustomEmailInput,\n\tsetCustomEmailInput,\n\tcustomEmailError,\n\tsetCustomEmailError,\n\thandleAddCustomEmail,\n}: {\n\tisOpen: boolean;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tsuggestions: string[];\n\tselectedEmails: string[];\n\tsetSelectedEmails: React.Dispatch<React.SetStateAction<string[]>>;\n\tcustomEmailInput: string;\n\tsetCustomEmailInput: React.Dispatch<React.SetStateAction<string>>;\n\tcustomEmailError: string;\n\tsetCustomEmailError: React.Dispatch<React.SetStateAction<string>>;\n\thandleAddCustomEmail: () => void;\n}) {\n\tconst handleSuggestionToggle = (email: string) => {\n\t\tsetSelectedEmails((prev) => {\n\t\t\tif (prev.includes(email)) {\n\t\t\t\t// Remove from selected\n\t\t\t\treturn prev.filter((e) => e !== email);\n\t\t\t} else {\n\t\t\t\t// Add to selected\n\t\t\t\treturn [...prev, email];\n\t\t\t}\n\t\t});\n\t};\n\n\tconst handleCustomEmailKeyPress = (e: React.KeyboardEvent) => {\n\t\tif (e.key === \"Enter\") {\n\t\t\te.preventDefault();\n\t\t\thandleAddCustomEmail();\n\t\t}\n\t};\n\n\treturn (\n\t\t<Modal isOpen={isOpen} onOpenChange={onClose} size=\"sm\">\n\t\t\t<ModalContent>\n\t\t\t\t<ModalBody>\n\t\t\t\t\t<div className=\"pt-2 text-sm font-medium text-zinc-900 dark:text-zinc-100\">\n\t\t\t\t\t\tEmail Suggestions\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Suggestions */}\n\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t\t{suggestions.map((email) => (\n\t\t\t\t\t\t\t<Chip\n\t\t\t\t\t\t\t\tkey={email}\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tvariant=\"flat\"\n\t\t\t\t\t\t\t\tcolor={selectedEmails.includes(email) ? \"primary\" : \"default\"}\n\t\t\t\t\t\t\t\tclassName=\"cursor-pointer text-xs\"\n\t\t\t\t\t\t\t\tonClick={() => handleSuggestionToggle(email)}\n\t\t\t\t\t\t\t\tendContent={\n\t\t\t\t\t\t\t\t\tselectedEmails.includes(email) ? (\n\t\t\t\t\t\t\t\t\t\t<HugeiconsIcon icon={Cancel01Icon} size={12} />\n\t\t\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{email}\n\t\t\t\t\t\t\t</Chip>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<hr className=\"my-2 border-zinc-200 dark:border-zinc-700\" />\n\n\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tplaceholder=\"Add email...\"\n\t\t\t\t\t\t\tvalue={customEmailInput}\n\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\tsetCustomEmailInput(e.target.value);\n\t\t\t\t\t\t\t\tsetCustomEmailError(\"\");\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonKeyDown={handleCustomEmailKeyPress}\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tisInvalid={!!customEmailError}\n\t\t\t\t\t\t\terrorMessage={customEmailError}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t\tonPress={handleAddCustomEmail}\n\t\t\t\t\t\t\tisIconOnly\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HugeiconsIcon icon={PlusSignIcon} size={16} />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Action Buttons */}\n\t\t\t\t\t<div className=\"mt-4 flex justify-end gap-2\">\n\t\t\t\t\t\t<Button variant=\"light\" size=\"sm\" onPress={onClose}>\n\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tonPress={onConfirm}\n\t\t\t\t\t\t\tisDisabled={selectedEmails.length === 0}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tDone ({selectedEmails.length})\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</ModalBody>\n\t\t\t</ModalContent>\n\t\t</Modal>\n\t);\n}\n\nexport function EmailComposeCard({\n\temailData,\n\tonSend,\n\tclassName,\n}: EmailComposeCardProps) {\n\tconst [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false);\n\tconst [isSending, setIsSending] = useState(false);\n\n\t// Inline editing states\n\tconst [isEditingSubject, setIsEditingSubject] = useState(false);\n\tconst [isEditingBody, setIsEditingBody] = useState(false);\n\n\tconst [editData, setEditData] = useState<EmailData>(emailData);\n\n\t// Suggestions come from emailData.to - these are resolved email addresses from the agent\n\tconst [suggestions, setSuggestions] = useState<string[]>(emailData.to || []);\n\n\t// Selected emails state\n\tconst [selectedEmails, setSelectedEmails] = useState<string[]>(\n\t\temailData.to || [],\n\t);\n\n\t// Custom email input state\n\tconst [customEmailInput, setCustomEmailInput] = useState(\"\");\n\tconst [customEmailError, setCustomEmailError] = useState(\"\");\n\n\t// Input refs for auto-focus\n\tconst subjectInputRef = useRef<HTMLInputElement>(null);\n\tconst bodyInputRef = useRef<HTMLTextAreaElement>(null);\n\n\t// Initialize with empty emails array - user must select recipients\n\t// If there's only one email, select it by default\n\tuseEffect(() => {\n\t\tconst suggestions = emailData.to || [];\n\t\tsetEditData((prev) => ({ ...prev, to: [] }));\n\t\tsetSuggestions(suggestions);\n\n\t\t// If there's exactly one email suggestion, select it by default\n\t\tif (suggestions.length === 1) setSelectedEmails([suggestions[0]]);\n\t\telse setSelectedEmails([]);\n\t}, [emailData.to]);\n\n\t// Auto-focus logic\n\tuseEffect(() => {\n\t\tif (isEditingSubject && subjectInputRef.current) {\n\t\t\tsubjectInputRef.current.focus();\n\t\t}\n\t}, [isEditingSubject]);\n\n\tuseEffect(() => {\n\t\tif (isEditingBody && bodyInputRef.current) {\n\t\t\tbodyInputRef.current.focus();\n\t\t}\n\t}, [isEditingBody]);\n\n\tconst validateForm = () => {\n\t\ttry {\n\t\t\temailComposeSchema.parse({\n\t\t\t\tto: selectedEmails,\n\t\t\t\tsubject: editData.subject,\n\t\t\t\tbody: editData.body,\n\t\t\t});\n\n\t\t\treturn true;\n\t\t} catch (error) {\n\t\t\tif (error instanceof z.ZodError) {\n\t\t\t\tconst newErrors: Record<string, string> = {};\n\t\t\t\terror.errors.forEach((err) => {\n\t\t\t\t\tif (err.path[0]) {\n\t\t\t\t\t\tnewErrors[err.path[0].toString()] = err.message;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn false;\n\t\t}\n\t};\n\n\tconst validateCustomEmail = (email: string): boolean => {\n\t\ttry {\n\t\t\temailValidationSchema.parse(email);\n\t\t\tsetCustomEmailError(\"\");\n\t\t\treturn true;\n\t\t} catch (error) {\n\t\t\tif (error instanceof z.ZodError) {\n\t\t\t\tsetCustomEmailError(error.errors[0]?.message || \"Invalid email\");\n\t\t\t}\n\t\t\treturn false;\n\t\t}\n\t};\n\n\tconst handleSend = async () => {\n\t\tif (selectedEmails.length === 0) {\n\t\t\tconsole.error(\"Please select at least one recipient\");\n\t\t\treturn;\n\t\t}\n\n\t\tif (!validateForm()) {\n\t\t\tconsole.error(\"Please fix the validation errors\");\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsSending(true);\n\t\ttry {\n\t\t\tif (onSend) {\n\t\t\t\tawait onSend({ ...editData, to: selectedEmails });\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error sending email:\", error);\n\t\t} finally {\n\t\t\tsetIsSending(false);\n\t\t}\n\t};\n\n\t// Handle custom email addition\n\tconst handleAddCustomEmail = () => {\n\t\tconst trimmedEmail = customEmailInput.trim();\n\n\t\tif (!trimmedEmail) {\n\t\t\tsetCustomEmailError(\"Please enter an email address\");\n\t\t\treturn;\n\t\t}\n\n\t\tif (!validateCustomEmail(trimmedEmail)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (selectedEmails.includes(trimmedEmail)) {\n\t\t\tsetCustomEmailError(\"Email already selected\");\n\t\t\treturn;\n\t\t}\n\n\t\t// Add to selected emails\n\t\tsetSelectedEmails((prev) => [...prev, trimmedEmail]);\n\n\t\t// Add to suggestions if not already there\n\t\tif (!suggestions.includes(trimmedEmail)) {\n\t\t\tsetSuggestions((prev) => [...prev, trimmedEmail]);\n\t\t}\n\n\t\t// Clear input\n\t\tsetCustomEmailInput(\"\");\n\t\tsetCustomEmailError(\"\");\n\t};\n\n\tconst handleConfirmRecipients = () => {\n\t\tsetEditData((prev) => ({ ...prev, to: selectedEmails }));\n\t\tsetIsRecipientModalOpen(false);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{/* Main Email Card - Zinc Colors, Flat & Rounded, Light/Dark Mode */}\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"w-full max-w-xl overflow-hidden rounded-3xl\",\n\t\t\t\t\t\"bg-zinc-100 dark:bg-zinc-900\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/* Header with status chip */}\n\t\t\t\t<div className=\"flex items-center justify-between px-6 py-1\">\n\t\t\t\t\t<div className=\"flex flex-row items-center gap-2 pt-3 pb-2 text-zinc-900 dark:text-zinc-100\">\n\t\t\t\t\t\t<HugeiconsIcon icon={Mail01Icon} size={18} />\n\t\t\t\t\t\t<span className=\"text-sm font-medium\">\n\t\t\t\t\t\t\t{emailData.draft_id ? \"Email Draft\" : \"Compose Email\"}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{emailData.thread_id && (\n\t\t\t\t\t\t\t<Chip size=\"sm\" variant=\"flat\" color=\"primary\">\n\t\t\t\t\t\t\t\tReply\n\t\t\t\t\t\t\t</Chip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex flex-col gap-1 px-6\">\n\t\t\t\t\t<div className=\"flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-400\">\n\t\t\t\t\t\t<span>To:</span>\n\t\t\t\t\t\t<span className=\"flex w-full items-center justify-between font-medium text-zinc-900 dark:text-zinc-200\">\n\t\t\t\t\t\t\t{selectedEmails.join(\", \") || \"\"}\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tonPress={() => setIsRecipientModalOpen(true)}\n\t\t\t\t\t\t\t\tvariant={selectedEmails.length === 0 ? \"flat\" : \"light\"}\n\t\t\t\t\t\t\t\tisIconOnly={selectedEmails.length !== 0}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tselectedEmails.length === 0\n\t\t\t\t\t\t\t\t\t\t? \"\"\n\t\t\t\t\t\t\t\t\t\t: \"text-zinc-500 dark:text-zinc-400\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tendContent={\n\t\t\t\t\t\t\t\t\tselectedEmails.length === 0 ? (\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<HugeiconsIcon icon={PencilEdit01Icon} size={20} />\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{selectedEmails.length === 0 ? \"Add Recipients\" : ``}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"my-1.5 h-px bg-zinc-200 dark:bg-zinc-800\" />\n\t\t\t\t\t<div className=\"flex w-full items-center justify-between text-sm text-zinc-500 dark:text-zinc-400\">\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 w-full\">\n\t\t\t\t\t\t\t<span className=\"flex-shrink-0\">Subject:</span>\n\t\t\t\t\t\t\t{isEditingSubject ? (\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tref={subjectInputRef}\n\t\t\t\t\t\t\t\t\tvalue={editData.subject}\n\t\t\t\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\t\t\t\tsetEditData({ ...editData, subject: e.target.value })\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonBlur={() => setIsEditingSubject(false)}\n\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\tif (e.key === \"Enter\") setIsEditingSubject(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\t\t\t\tinput:\n\t\t\t\t\t\t\t\t\t\t\t\"text-base font-medium text-zinc-900 dark:text-zinc-200\",\n\t\t\t\t\t\t\t\t\t\tinputWrapper:\n\t\t\t\t\t\t\t\t\t\t\t\"h-7 min-h-7 bg-transparent shadow-none border-none px-0\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span className=\"font-medium text-zinc-900 dark:text-zinc-200 truncate flex-1\">\n\t\t\t\t\t\t\t\t\t{editData.subject}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"light\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tisIconOnly\n\t\t\t\t\t\t\tonPress={() => setIsEditingSubject(!isEditingSubject)}\n\t\t\t\t\t\t\tclassName=\"text-zinc-500 dark:text-zinc-400\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{isEditingSubject ? (\n\t\t\t\t\t\t\t\t<HugeiconsIcon icon={Tick02Icon} size={20} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<HugeiconsIcon icon={PencilEdit01Icon} size={20} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"my-1.5 h-px bg-zinc-200 dark:bg-zinc-800\" />\n\n\t\t\t\t\t<ScrollShadow className=\"relative z-[1] max-h-46 min-h-[150px] overflow-y-auto pb-5 text-sm leading-relaxed whitespace-pre-line text-zinc-800 dark:text-zinc-200\">\n\t\t\t\t\t\t<div className=\"absolute top-0 right-0 z-[2] flex w-full justify-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"light\"\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tisIconOnly\n\t\t\t\t\t\t\t\tonPress={() => setIsEditingBody(!isEditingBody)}\n\t\t\t\t\t\t\t\tclassName=\"text-zinc-500 dark:text-zinc-400\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{isEditingBody ? (\n\t\t\t\t\t\t\t\t\t<HugeiconsIcon icon={Tick02Icon} size={20} />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<HugeiconsIcon icon={PencilEdit01Icon} size={20} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{isEditingBody ? (\n\t\t\t\t\t\t\t<Textarea\n\t\t\t\t\t\t\t\tref={bodyInputRef}\n\t\t\t\t\t\t\t\tvalue={editData.body}\n\t\t\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\t\t\tsetEditData({ ...editData, body: e.target.value })\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonBlur={() => setIsEditingBody(false)}\n\t\t\t\t\t\t\t\tminRows={6}\n\t\t\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\t\t\tinput:\n\t\t\t\t\t\t\t\t\t\t\"text-sm text-zinc-900 dark:text-zinc-200 placeholder:text-zinc-400 dark:placeholder:text-zinc-500\",\n\t\t\t\t\t\t\t\t\tinputWrapper: \"bg-transparent shadow-none border-none p-0\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\teditData.body\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ScrollShadow>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex justify-end px-6 pb-5\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\tonPress={handleSend}\n\t\t\t\t\t\tisLoading={isSending}\n\t\t\t\t\t\tisDisabled={selectedEmails.length === 0}\n\t\t\t\t\t\tradius=\"full\"\n\t\t\t\t\t\tclassName=\"font-medium\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{isSending ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<HugeiconsIcon\n\t\t\t\t\t\t\t\t\ticon={Loading03Icon}\n\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\tclassName=\"animate-spin\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\tSending...\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : emailData.draft_id ? (\n\t\t\t\t\t\t\t\"Send Draft\"\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\"Send\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<RecipientSelectionModal\n\t\t\t\tisOpen={isRecipientModalOpen}\n\t\t\t\tonClose={() => setIsRecipientModalOpen(false)}\n\t\t\t\tonConfirm={handleConfirmRecipients}\n\t\t\t\tsuggestions={suggestions}\n\t\t\t\tselectedEmails={selectedEmails}\n\t\t\t\tsetSelectedEmails={setSelectedEmails}\n\t\t\t\tcustomEmailInput={customEmailInput}\n\t\t\t\tsetCustomEmailInput={setCustomEmailInput}\n\t\t\t\tcustomEmailError={customEmailError}\n\t\t\t\tsetCustomEmailError={setCustomEmailError}\n\t\t\t\thandleAddCustomEmail={handleAddCustomEmail}\n\t\t\t/>\n\t\t</>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}