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:T1abe,import { Body, Head as EmailHead, Html, Preview, Link, Text, Section, Row, Column, Img, } from "jsx-email"; import { Fragment } from "react"; import { DefaultFonts } from "@/components/email/font-default"; import { EmailTailwind } from "@/components/email/email-theme"; import type { EmailTheme } from "@/components/email/email-theme"; import { emailAsset } from "@/components/email/email-assets"; import { defaultTheme } from "@/components/email/theme-default"; export type HeaderWithLogoVariant = "minimal" | "with-text"; export type HeaderWithLogoAlignment = "left" | "center" | "right"; export interface HeaderWithLogoProps { theme?: EmailTheme; logoSrc?: string; logoAlt?: string; logoHref?: string; text?: string; pageBackgroundColor?: string; backgroundColor?: string; textColor?: string; variant?: HeaderWithLogoVariant; alignment?: HeaderWithLogoAlignment; } const fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const responsiveStyles = [ "@media only screen and (max-width: 599px) {", " .header-logo-text-stack { display: block !important; width: 100% !important; }", " .header-logo-text-left-logo { padding-bottom: 24px !important; }", " .header-logo-text-right-row { display: table !important; width: 100% !important; }", " .header-logo-text-right-copy-cell { display: table-footer-group !important; width: 100% !important; }", " .header-logo-text-right-logo { display: table-header-group !important; text-align: right !important; width: 100% !important; }", " .header-logo-text-right-copy { padding-top: 24px !important; text-align: right !important; }", "}", ].join("\n"); const defaults = { backgroundColor: "#fffffe", logoAlt: "Maizzle", logoHref: "https://example.com", logoSrc: emailAsset("maizzle-insignia.png"), pageBackgroundColor: "#f1f5f9", text: "Medium, rare, but mostly well-done\nHTML email components.", textColor: "#030712", }; type SectionProps = Omit; type ResolvedProps = typeof defaults & SectionProps; const Logo = ({ props }: { props: ResolvedProps }) => ( {props.logoAlt}

); const Copy = ({ centered = false, props, }: { centered?: boolean; props: ResolvedProps; }) => ( {(() => { if (centered) { return props.text.split("\n").map((line, index) => ( {index > 0 ?
: null} {line} )); } return props.text.replaceAll("\n", " "); })()} ); const WithText = ({ alignment, props, }: { alignment: HeaderWithLogoAlignment; props: ResolvedProps; }) => { if (alignment === "center") { return (

‍

); } if (alignment === "right") { return (

); } return (

); }; export const HeaderWithLogoSection = (props: SectionProps) => { const alignment = props.alignment ?? "center"; const variant = props.variant ?? "minimal"; const resolved = { ...defaults, ...props } as ResolvedProps; return (

‍

{variant === "minimal" ? ( ) : ( )}

‍

); }; export const HeaderWithLogo = ({ alignment = "center", pageBackgroundColor = "#f1f5f9", theme = defaultTheme, variant = "minimal", ...props }: HeaderWithLogoProps) => (