4d: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"] 4e: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"] 4f:T2700,import { Mjml, MjmlBody, MjmlButton, MjmlColumn, MjmlFont, MjmlHead, MjmlPreview, MjmlSection, MjmlSpacer, MjmlText, MjmlWrapper, } from "@faire/mjml-react"; import type { EmailTheme } from "@/components/email/email-theme"; import { defaultTheme } from "@/components/email/theme-default"; interface TwoColumnPricing_PricingPlanFeature { label: string; muted?: boolean; } interface TwoColumnPricing_PricingPlan { ctaHref: string; ctaLabel: string; description: string; features: TwoColumnPricing_PricingPlanFeature[]; name: string; period: string; price: string; } interface TwoColumnPricing_TwoColumnsPricingTableProps { theme?: EmailTheme; plans?: TwoColumnPricing_PricingPlan[]; pageBackgroundColor?: string; backgroundColor?: string; cardBackgroundColor?: string; brandColor?: string; } const TwoColumnPricing_fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const TwoColumnPricing_defaultPlans: TwoColumnPricing_PricingPlan[] = [ { ctaHref: "https://example.com", ctaLabel: "Get started", description: "Everything you need to design, build, and ship emails faster.", features: [ { label: "Visual email editor" }, { label: "All email templates" }, { label: "Team collaboration (up to 3 users)", muted: true }, { label: "Version control & previews", muted: true }, ], name: "Takeoff", period: "/Month", price: "$19", }, { ctaHref: "https://example.com", ctaLabel: "Get started", description: "Everything your team needs to design, build, and ship emails faster.", features: [ { label: "Everything in Takeoff" }, { label: "Unlimited team slots" }, { label: "Advanced workflow automations" }, { label: "Analytics and performance insights" }, ], name: "Orbit", period: "/Month", price: "$29", }, ]; const TwoColumnPricing_PlanCard = ({ plan, cardBackgroundColor, brandColor, second, }: { plan: TwoColumnPricing_PricingPlan; cardBackgroundColor: string; brandColor: string; second: boolean; }) => ( {plan.name} {plan.price} {plan.period} {plan.description} {plan.features.map((feature) => ( ✓ {feature.label} ))} {plan.ctaLabel} ); const TwoColumnPricing_TwoColumnsPricingTableSection = ({ plans = TwoColumnPricing_defaultPlans, backgroundColor = "#fffffe", cardBackgroundColor = "#f9fafb", brandColor = "#4f46e5", }: Omit) => ( {plans.slice(0, 2).map((plan, index) => ( ))} ); const TwoColumnPricing_TwoColumnsPricingTable = ({ pageBackgroundColor = "#f1f5f9", theme = defaultTheme, ...props }: TwoColumnPricing_TwoColumnsPricingTableProps) => ( Pricing plans ); TwoColumnPricing_TwoColumnsPricingTable.PreviewProps = { theme: defaultTheme, } satisfies TwoColumnPricing_TwoColumnsPricingTableProps; const __TwoColumnPricing = TwoColumnPricing_TwoColumnsPricingTable; interface SinglePricing_PricingFeature { label: string; muted?: boolean; } interface SinglePricing_FullWidthSinglePricingProps { theme?: EmailTheme; name?: string; price?: string; currency?: string; period?: string; description?: string; features?: SinglePricing_PricingFeature[]; pageBackgroundColor?: string; backgroundColor?: string; cardBackgroundColor?: string; brandColor?: string; } const SinglePricing_fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const SinglePricing_defaultFeatures: SinglePricing_PricingFeature[] = [ { label: "Visual email editor" }, { label: "Transactional & marketing templates" }, { label: "Team collaboration (up to 3 users)", muted: true }, { label: "Version control & previews", muted: true }, ]; const SinglePricing_FullWidthSinglePricingSection = ({ name = "Takeoff", price = "$19", currency = "USD", period = "/Month", description = "Everything you need to design, build, and ship emails faster.", features = SinglePricing_defaultFeatures, backgroundColor = "#fffffe", cardBackgroundColor = "#f9fafb", brandColor = "#4f46e5", }: Omit) => ( {name} {price} · {currency} {period} {description} {features.map((feature) => ( ✓ {feature.label} ))} ); const SinglePricing_FullWidthSinglePricing = ({ pageBackgroundColor = "#f1f5f9", theme = defaultTheme, ...props }: SinglePricing_FullWidthSinglePricingProps) => ( Takeoff pricing ); SinglePricing_FullWidthSinglePricing.PreviewProps = { theme: defaultTheme, } satisfies SinglePricing_FullWidthSinglePricingProps; const __SinglePricing = SinglePricing_FullWidthSinglePricing; export interface SubscriptionPlan { name: string; description?: string; price: string; currency?: string; period?: string; features?: { label: string; muted?: boolean; }[]; action: { href: string; label: string; }; } export interface SubscriptionPricingProps { theme?: Parameters[0]["theme"]; plans?: SubscriptionPlan[]; columns?: 1 | 2; } export const SubscriptionPricing = ({ theme, plans, columns = 2, }: SubscriptionPricingProps) => { if (columns === 1) { const [plan] = plans ?? []; return ( <__SinglePricing currency={plan?.currency} description={plan?.description} features={plan?.features} name={plan?.name} period={plan?.period} price={plan?.price} theme={theme} /> ); } return ( <__TwoColumnPricing plans={plans?.map((plan) => ({ ctaHref: plan.action.href, ctaLabel: plan.action.label, description: plan.description ?? "", features: plan.features ?? [], name: plan.name, period: plan.period ?? "", price: plan.price, }))} theme={theme} /> ); }; SubscriptionPricing.PreviewProps = { columns: 2, } satisfies SubscriptionPricingProps; 4c:["$","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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@emailcn","registryDependencies":["https://emailcn.run/r/mjml-react/theme-default.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/bases/mjml-react/components/marketing/pricing/subscription-pricing.tsx","content":"$4f","type":"registry:component","target":"components/email/subscription-pricing.tsx"}],"className":"h-[70svh] min-h-80"}]]}]