4e: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"] 4f: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"] 50:T1c00,import { Body, Head as EmailHead, Html, Preview, Link, 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 HeaderWithLogoAndBadgeAlignment = "left" | "center" | "right"; export interface HeaderWithLogoAndBadgeProps { theme?: EmailTheme; logoSrc?: string; logoAlt?: string; logoHref?: string; badgeLabel?: string; message?: string; alignment?: HeaderWithLogoAndBadgeAlignment; pageBackgroundColor?: string; backgroundColor?: string; badgeBackgroundColor?: string; badgeBorderColor?: string; badgeColor?: string; badgeTextColor?: string; } const fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const responsiveStyles = [ "@media only screen and (max-width: 599px) {", " .header-badge-stack { display: block !important; width: 100% !important; }", " .header-badge-after { padding-top: 24px !important; }", " .header-badge-before { padding-bottom: 24px !important; }", " .header-badge-mobile-table { float: none !important; margin-left: 0 !important; }", " .header-badge-mobile-logo { text-align: left !important; }", "}", ].join("\n"); const defaults = { backgroundColor: "#fffffe", badgeBackgroundColor: "#eff6ff", badgeBorderColor: "#dbeafe", badgeColor: "#2563eb", badgeLabel: "FREE SHIPPING", badgeTextColor: "#4b5563", logoAlt: "Maizzle", logoHref: "https://example.com", logoSrc: emailAsset("maizzle-insignia.png"), message: "On orders over $65", pageBackgroundColor: "#f1f5f9", }; type SectionProps = Omit; type ResolvedProps = typeof defaults & SectionProps; const Logo = ({ props }: { props: ResolvedProps }) => ( {props.logoAlt}

); const Badge = ({ align, props, }: { align?: "center" | "right"; props: ResolvedProps; }) => { let tableStyle: | { marginLeft: string; marginRight?: string; } | undefined; if (align === "center") { tableStyle = { marginLeft: "auto", marginRight: "auto" }; } else if (align === "right") { tableStyle = { marginLeft: "auto" }; } return (

{props.badgeLabel} {" "} {props.message}

); }; export const HeaderWithLogoAndBadgeSection = (props: SectionProps) => { const alignment = props.alignment ?? "left"; const resolved = { ...defaults, ...props } as ResolvedProps; let content; if (alignment === "center") { content = (

‍

); } else if (alignment === "right") { content = (

); } else { content = (

); } return (

‍

{content}

‍

); }; export const HeaderWithLogoAndBadge = ({ alignment = "left", pageBackgroundColor = "#f1f5f9", theme = defaultTheme, ...props }: HeaderWithLogoAndBadgeProps) => (