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:T360b,import { Fragment } from "react"; import { Body, Container, Head as EmailHead, Html, Img, Preview, Tailwind, Section, Row, Column, Heading, Text, Link, } from "react-email"; import { DefaultFonts } from "@/components/email/font-default"; import { createEmailTailwindConfig } 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"; const resolveDefaultProps = ( defaults: Defaults, props: Props ) => { const supplied = props as Record; const fallbackEntries = Object.entries(defaults).map(([key, value]) => [ key, supplied[key] === undefined ? value : supplied[key], ]); return { ...defaults, ...props, ...Object.fromEntries(fallbackEntries), } as Defaults & Props; }; type Feature_FeatureWithMultipleProductImagesVariant = | "logo-left" | "logo-right" | "images-left" | "images-right"; interface Feature_FeatureWithMultipleProductImagesProps { theme?: EmailTheme; heading?: string; body?: string; largeImageSrc?: string; largeImageAlt?: string; middleImageSrc?: string; middleImageAlt?: string; smallImageSrc?: string; smallImageAlt?: string; logoSrc?: string; logoAlt?: string; buttonLabel?: string; buttonHref?: string; arrowIconSrc?: string; pageBackgroundColor?: string; backgroundColor?: string; logoBackgroundColor?: string; headingColor?: string; textColor?: string; linkColor?: string; variant?: Feature_FeatureWithMultipleProductImagesVariant; } const Feature_fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const Feature_responsiveStyles = ` @media only screen and (max-width: 599px) { .feature-multiple-centered { margin-left: auto !important; margin-right: auto !important; } .feature-multiple-stack { display: block !important; width: 100% !important; } .feature-multiple-hide-mobile { display: none !important; } .feature-multiple-auto { width: auto !important; } .feature-multiple-gap { line-height: 44px !important; } } `; const Feature_sharedDefaults = { arrowIconSrc: emailAsset("icon-arrow-right-brand.png"), backgroundColor: "#fffffe", buttonHref: "https://example.com", buttonLabel: "Discover more", headingColor: "#030712", linkColor: "#4f46e5", logoAlt: "Visa", logoBackgroundColor: "#f3f4f6", logoSrc: emailAsset("logos/logo-visa.png"), pageBackgroundColor: "#f1f5f9", textColor: "#4b5563", }; const Feature_logoDefaults = { body: "Accepting cards should be quick, secure, and seamless. Discover our tools that simplify every transaction.", heading: "Built for the journey ahead.", largeImageAlt: "Product Image 1", largeImageSrc: emailAsset("feature/feature-2-lg.jpg"), middleImageAlt: "Product Image 2", middleImageSrc: emailAsset("feature/feature-2-sm.jpg"), smallImageAlt: "Product Image 2", smallImageSrc: emailAsset("feature/feature-2-sm.jpg"), }; const Feature_imagesDefaults = { body: "Explore durable layers that balance insulation, breathability, and all-day comfort.", heading: "Outdoor essentials redefined.", largeImageAlt: "Product Image 1", largeImageSrc: emailAsset("feature/feature-2-lg-2.jpg"), middleImageAlt: "Product Image 2", middleImageSrc: emailAsset("feature/feature-2-md.jpg"), smallImageAlt: "Product Image 3", smallImageSrc: emailAsset("feature/feature-2-sm-2.jpg"), }; type Feature_SectionProps = Omit< Feature_FeatureWithMultipleProductImagesProps, "theme" >; type Feature_ResolvedProps = typeof Feature_sharedDefaults & typeof Feature_imagesDefaults & Feature_SectionProps; const Feature_ProductImage = ({ alt, src, width, }: { alt: string; src: string; width: number; }) => ( {alt}

); const Feature_LogoArtwork = ({ props }: { props: Feature_ResolvedProps }) => (

‍

); const Feature_LogoImageGroup = ({ props, }: { props: Feature_ResolvedProps; }) => (

‍

); const Feature_ImagesArtwork = ({ props }: { props: Feature_ResolvedProps }) => (

‍

); const Feature_ImagesGroup = ({ props }: { props: Feature_ResolvedProps }) => ( ); const Feature_FeatureCopy = ({ logoVariant, props, }: { logoVariant: boolean; props: Feature_ResolvedProps; }) => ( {logoVariant && props.heading === Feature_logoDefaults.heading ? ( <> Built for the
journey ahead. ) : ( props.heading )} {props.body}

‍

{props.buttonLabel}

); const Feature_FeatureWithMultipleProductImagesSection = ( props: Feature_SectionProps ) => { const variant = props.variant ?? "logo-left"; const logoVariant = variant.startsWith("logo-"); const defaults = logoVariant ? Feature_logoDefaults : Feature_imagesDefaults; const resolved = resolveDefaultProps( { ...Feature_sharedDefaults, ...defaults, }, props ) as Feature_ResolvedProps; const artworkRight = variant.endsWith("-right"); const artwork = logoVariant ? ( ) : ( ); const copy = ( ); return (

‍

{artworkRight ? copy : artwork} ‍ {artworkRight ? artwork : copy}

‍

); }; const Feature_FeatureWithMultipleProductImages = ({ pageBackgroundColor = "#f1f5f9", theme = defaultTheme, variant = "logo-left", ...props }: Feature_FeatureWithMultipleProductImagesProps) => (