4a:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T4d7e,import { Mjml, MjmlAll, MjmlAttributes, MjmlBody, MjmlButton, MjmlColumn, MjmlDivider, MjmlHead, MjmlImage, MjmlPreview, MjmlSection, MjmlText, MjmlWrapper, } from "@faire/mjml-react"; import type { ReactNode } from "react"; import type { EmailTheme } from "@/components/email/email-theme"; export const BlockEmail = ({ children, preview, theme, }: { children: ReactNode; preview: string; theme: EmailTheme; }) => ( {preview} {children} ); export const BlockText = ({ align = "left", children, color, fontFamily, fontSize, fontWeight, lineHeight, padding = "0", }: { align?: "center" | "left" | "right"; children: ReactNode; color: string; fontFamily: string; fontSize: string; fontWeight?: string; lineHeight: string; padding?: string; }) => ( {children} ); export const BlockHeading = ({ align = "left", children, theme, }: { align?: "center" | "left" | "right"; children: ReactNode; theme: EmailTheme; }) => ( {children} ); export const BlockParagraph = ({ align = "left", children, padding = "0 0 16px", theme, }: { align?: "center" | "left" | "right"; children: ReactNode; padding?: string; theme: EmailTheme; }) => ( {children} ); export const BlockAction = ({ align = "left", href, label, theme, }: { align?: "center" | "left" | "right"; href: string; label: string; theme: EmailTheme; }) => ( {label} ); export const BlockCode = ({ code, theme, }: { code: string; theme: EmailTheme; }) => ( {code} ); export const BlockCard = ({ children, theme, }: { children: ReactNode; theme: EmailTheme; }) => ( {children} ); export const BlockFooter = ({ children, theme, }: { children: ReactNode; theme: EmailTheme; }) => ( {children} ); export const BlockLogo = ({ alt, href = "https://example.com", src, }: { alt: string; href?: string; src?: string; }) => src ? ( ) : null; export const AuthOtpBlock = ({ expiresInMinutes, otpCode, productName, theme, }: { expiresInMinutes: number; otpCode: string; productName: string; theme: EmailTheme; }) => ( Your verification code Enter this code to sign in to your {productName} account. This code expires in {expiresInMinutes} minutes. If you didn’t request this, you can safely ignore this email. ); export const PasswordResetBlock = ({ expiresInMinutes, productName, resetHref, theme, }: { expiresInMinutes: number; productName: string; resetHref: string; theme: EmailTheme; }) => ( Reset your password Click the button below to reset your {productName} password. This link expires in {expiresInMinutes} minutes. If you didn’t request this, you can safely ignore this email. ); export const InviteBlock = ({ ctaHref, expiresInHours, inviterAvatarUrl, inviterName, teamName, theme, }: { ctaHref: string; expiresInHours: number; inviterAvatarUrl?: string; inviterName: string; teamName: string; theme: EmailTheme; }) => ( {inviterAvatarUrl ? ( ) : null} {inviterName} invited you to join {teamName} Click the button below to accept this invitation and join the team. This invitation expires in {expiresInHours} hours. If you didn’t expect this invitation, you can ignore this email. ); export interface NewsletterArticle { title: string; summary: string; href: string; imageUrl?: string; } export const NewsletterBlock = ({ articles, issueNumber, preheader, productName, theme, }: { articles: NewsletterArticle[]; issueNumber: string; preheader: string; productName: string; theme: EmailTheme; }) => ( Issue #{issueNumber} {productName} Featured articles {articles.map((article) => ( {article.imageUrl ? ( ) : null} {article.title} {article.summary} Read article ))} View this email online · Unsubscribe ); export const NotificationBlock = ({ action, actorAvatarUrl, actorName, body, ctaHref, ctaLabel, heading, issueNumber, preview = "New notification", targetName, theme, }: { action?: string; actorAvatarUrl?: string; actorName?: string; body?: string; ctaHref: string; ctaLabel: string; heading: string; issueNumber?: string; preview?: string; targetName?: string; theme: EmailTheme; }) => ( {actorAvatarUrl ? ( ) : null} {actorName ? ( {actorName} ) : null} {action ? ( {action} ) : null} {issueNumber ? `#${issueNumber} · ` : ""} {heading} {targetName ? ( {targetName} ) : null} {body ? {body} : null} {ctaHref && ctaLabel ? ( ) : null} ); export const OnboardingBlock = ({ ctaHref, firstName, productName, senderName, theme, }: { ctaHref: string; firstName: string; productName: string; senderName: string; theme: EmailTheme; }) => ( {productName} Welcome, {firstName} We’re excited to have you on board at {productName}. Let’s get you set up for success. {[ "Create your profile", "Explore your workspace", "Invite your team", ].map((step, index) => ( 0{index + 1} {step} ))} Sent by {senderName} ); export interface NativeReceiptItem { name: string; imageUrl?: string; price: string; quantity?: number; } const ReceiptTotalRow = ({ bold = false, label, theme, value, }: { bold?: boolean; label: string; theme: EmailTheme; value: string; }) => ( <> {label} {value} ); export const ReceiptBlock = ({ customerName, items, label = "Receipt", orderNumber, subtotal, supportHref, supportLabel = "Contact support", tax, theme, total, }: { customerName: string; items: NativeReceiptItem[]; label?: string; orderNumber: string; subtotal: string; supportHref: string; supportLabel?: string; tax: string; theme: EmailTheme; total: string; }) => ( {label} {label === "Receipt" ? "Order " : ""} {orderNumber} · {customerName} {items.map((item, index) => ( {item.imageUrl ? ( ) : null} {item.name} Quantity: {item.quantity ?? 1} {item.price} ))} Need help? {supportLabel} ); 49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@faire/mjml-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40faire%2Fmjml-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@faire/mjml-react"}]]}]}],["$","li","mjml",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/mjml","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"mjml"}]]}]}]]}],["$","$L4a",null,{"namespace":"@emailcn","registryDependencies":["https://emailcn.run/r/mjml-react/theme-default.json"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"registry/bases/mjml-react/blocks/block-shared.tsx","content":"$4c","type":"registry:component","target":"components/email/block-shared.tsx"}],"className":"h-[70svh] min-h-80"}]]}]