{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "react-email/split-hero",
  "title": "Split Hero",
  "description": "Split Hero email component",
  "dependencies": [
    "react-email"
  ],
  "registryDependencies": [
    "https://emailcn.run/r/react-email/default-fonts.json",
    "https://emailcn.run/r/react-email/theme-default.json"
  ],
  "files": [
    {
      "path": "registry/bases/react-email/components/marketing/hero/split-hero.tsx",
      "content": "import { Fragment } from \"react\";\nimport {\n  Body,\n  Container,\n  Head as EmailHead,\n  Html,\n  Preview,\n  Tailwind,\n  Column,\n  Section,\n  Row,\n  Link,\n  Text,\n  Heading,\n  Img,\n  Button,\n} from \"react-email\";\n\nimport { DefaultFonts } from \"@/components/email/font-default\";\nimport { createEmailTailwindConfig } from \"@/components/email/email-theme\";\nimport type { EmailTheme } from \"@/components/email/email-theme\";\nimport { emailAsset } from \"@/components/email/email-assets\";\nimport { defaultTheme } from \"@/components/email/theme-default\";\n\nconst resolveDefaultProps = <Defaults extends object, Props extends object>(\n  defaults: Defaults,\n  props: Props\n) => {\n  const supplied = props as Record<string, unknown>;\n  const fallbackEntries = Object.entries(defaults).map(([key, value]) => [\n    key,\n    supplied[key] === undefined ? value : supplied[key],\n  ]);\n\n  return {\n    ...defaults,\n    ...props,\n    ...Object.fromEntries(fallbackEntries),\n  } as Defaults & Props;\n};\n\ntype OverlaySplitHero_HeroOverlayedSplitVariant =\n  | \"overlay-left\"\n  | \"overlay-right\";\n\ninterface OverlaySplitHero_HeroOverlayedSplitProps {\n  theme?: EmailTheme;\n  eyebrow?: string;\n  heading?: string;\n  subheading?: string;\n  description?: string;\n  ctaLabel?: string;\n  ctaHref?: string;\n  imageSrc?: string;\n  imageAlt?: string;\n  logoSrc?: string;\n  logoAlt?: string;\n  logoHref?: string;\n  pageBackgroundColor?: string;\n  overlayColor?: string;\n  textColor?: string;\n  buttonBackgroundColor?: string;\n  buttonTextColor?: string;\n  variant?: OverlaySplitHero_HeroOverlayedSplitVariant;\n}\n\nconst OverlaySplitHero_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\nconst OverlaySplitHero_responsiveStyles = `\n    @media only screen and (max-width: 599px) {\n      .hero-overlayed-split-content {\n        display: table-footer-group !important;\n        width: 100% !important;\n      }\n\n      .hero-overlayed-split-spacer {\n        display: table-header-group !important;\n        height: 188px !important;\n        line-height: 188px !important;\n        width: 100% !important;\n      }\n    }\n  `;\n\ntype OverlaySplitHero_SectionProps = Required<\n  Omit<OverlaySplitHero_HeroOverlayedSplitProps, \"theme\" | \"variant\">\n> & {\n  variant: OverlaySplitHero_HeroOverlayedSplitVariant;\n};\n\nconst OverlaySplitHero_HeroOverlayedSplitSection = ({\n  buttonBackgroundColor,\n  buttonTextColor,\n  ctaHref,\n  ctaLabel,\n  description,\n  eyebrow,\n  heading,\n  imageAlt,\n  imageSrc,\n  logoAlt,\n  logoHref,\n  logoSrc,\n  overlayColor,\n  subheading,\n  textColor,\n  variant,\n}: OverlaySplitHero_SectionProps) => {\n  const content = (\n    <Column\n      className=\"hero-overlayed-split-content\"\n      style={{ background: overlayColor, width: \"388px\" }}\n    >\n      <Section width=\"100%\">\n        <Fragment>\n          <Row>\n            <Column style={{ padding: \"44px 24px\", textAlign: \"left\" }}>\n              <Link href={logoHref}>\n                <Img\n                  alt={logoAlt}\n                  src={logoSrc}\n                  width=\"165\"\n                  style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n                />\n              </Link>\n              <Section style={{ height: \"144px\", lineHeight: \"144px\" }}>\n                &zwj;\n              </Section>\n              <Text\n                style={{\n                  color: textColor,\n                  fontFamily: OverlaySplitHero_fontFamily,\n                  fontSize: \"16px\",\n                  fontWeight: 200,\n                  lineHeight: \"24px\",\n                  margin: 0,\n                }}\n              >\n                {eyebrow}\n              </Text>\n              <Heading\n                style={{\n                  color: textColor,\n                  fontFamily: OverlaySplitHero_fontFamily,\n                  fontSize: \"48px\",\n                  fontWeight: 500,\n                  lineHeight: 1,\n                  margin: 0,\n                }}\n                as=\"h1\"\n              >\n                {heading}\n              </Heading>\n              <Text\n                style={{\n                  color: textColor,\n                  fontFamily: OverlaySplitHero_fontFamily,\n                  fontSize: \"18px\",\n                  lineHeight: \"28px\",\n                  margin: 0,\n                }}\n              >\n                {subheading}\n              </Text>\n              <Section style={{ height: \"44px\", lineHeight: \"44px\" }}>\n                &zwj;\n              </Section>\n              <Text\n                style={{\n                  color: textColor,\n                  fontFamily: OverlaySplitHero_fontFamily,\n                  fontSize: \"16px\",\n                  fontWeight: 300,\n                  lineHeight: \"24px\",\n                  margin: 0,\n                }}\n              >\n                {description}\n              </Text>\n              <Section style={{ height: \"28px\", lineHeight: \"28px\" }}>\n                &zwj;\n              </Section>\n              {ctaLabel && ctaHref ? (\n                <Link\n                  href={ctaHref}\n                  style={{\n                    backgroundColor: buttonBackgroundColor,\n                    borderRadius: \"8px\",\n                    color: buttonTextColor,\n                    display: \"inline-block\",\n                    fontFamily: OverlaySplitHero_fontFamily,\n                    fontSize: \"16px\",\n                    fontWeight: 500,\n                    lineHeight: 1,\n                    padding: \"14px 20px\",\n                    textDecoration: \"none\",\n                  }}\n                >\n                  <span style={{ marginRight: \"8px\" }}>{ctaLabel}</span>\n                  <Img\n                    alt=\"\"\n                    src={emailAsset(`icon-arrow-right.png`)}\n                    width=\"12\"\n                    style={{\n                      display: \"inline-block\",\n                      maxWidth: \"100%\",\n                      verticalAlign: \"baseline\",\n                    }}\n                  />\n                </Link>\n              ) : null}\n            </Column>\n          </Row>\n        </Fragment>\n      </Section>\n    </Column>\n  );\n  const spacer = (\n    <Column\n      aria-label={imageAlt || undefined}\n      className=\"hero-overlayed-split-spacer\"\n      role={imageAlt ? \"img\" : undefined}\n      style={{ fontSize: 0, lineHeight: 0, width: \"212px\" }}\n    >\n      &zwj;\n    </Column>\n  );\n  return (\n    <Section\n      style={{\n        backgroundImage: `url(${imageSrc})`,\n        backgroundPosition: \"center\",\n        backgroundRepeat: \"no-repeat\",\n        backgroundSize: \"cover\",\n        tableLayout: \"fixed\",\n      }}\n      width=\"100%\"\n    >\n      <Fragment>\n        <Row>\n          {variant === \"overlay-left\" ? (\n            <>\n              {content}\n              {spacer}\n            </>\n          ) : (\n            <>\n              {spacer}\n              {content}\n            </>\n          )}\n        </Row>\n      </Fragment>\n    </Section>\n  );\n};\n\nconst OverlaySplitHero_HeroOverlayedSplit = ({\n  buttonBackgroundColor = \"#4f46e5\",\n  buttonTextColor = \"#fffffe\",\n  ctaHref = \"https://example.com\",\n  ctaLabel = \"Discover now\",\n  description = \"From the first pour to the final sip, coffee is more than a drink — it’s a pause, a rhythm, a story in every cup. Discover how moments of calm begin with Sarina.\",\n  eyebrow = \"Brew Stories\",\n  heading = \"The Art of the Morning Ritual\",\n  imageAlt = \"Coffee morning ritual\",\n  imageSrc = emailAsset(`hero/overlayed-split-bg.jpg`),\n  logoAlt = \"emailcn\",\n  logoHref = \"https://example.com\",\n  logoSrc = emailAsset(`emailcn-logo-light.png`),\n  overlayColor = \"rgba(3, 7, 18, 0.8)\",\n  pageBackgroundColor = \"#f1f5f9\",\n  subheading = \"January 31, 2025\",\n  textColor = \"#f9fafb\",\n  theme = defaultTheme,\n  variant = \"overlay-left\",\n}: OverlaySplitHero_HeroOverlayedSplitProps) => (\n  <Html>\n    <EmailHead>\n      <DefaultFonts />\n      <style\n        dangerouslySetInnerHTML={{ __html: OverlaySplitHero_responsiveStyles }}\n      />\n    </EmailHead>\n    <Preview>{`${eyebrow} — ${heading}`}</Preview>\n    <Tailwind config={createEmailTailwindConfig(theme)}>\n      <Body\n        style={{\n          backgroundColor: pageBackgroundColor,\n          fontFamily: OverlaySplitHero_fontFamily,\n        }}\n        className=\"m-0\"\n      >\n        <Container className=\"mx-auto max-w-[600px] w-[600px]\">\n          <OverlaySplitHero_HeroOverlayedSplitSection\n            buttonBackgroundColor={buttonBackgroundColor}\n            buttonTextColor={buttonTextColor}\n            ctaHref={ctaHref}\n            ctaLabel={ctaLabel}\n            description={description}\n            eyebrow={eyebrow}\n            heading={heading}\n            imageAlt={imageAlt}\n            imageSrc={imageSrc}\n            logoAlt={logoAlt}\n            logoHref={logoHref}\n            logoSrc={logoSrc}\n            overlayColor={overlayColor}\n            pageBackgroundColor={pageBackgroundColor}\n            subheading={subheading}\n            textColor={textColor}\n            variant={variant}\n          />\n        </Container>\n      </Body>\n    </Tailwind>\n  </Html>\n);\n\nOverlaySplitHero_HeroOverlayedSplit.PreviewProps = {\n  buttonBackgroundColor: \"#4f46e5\",\n  buttonTextColor: \"#fffffe\",\n  ctaHref: \"https://example.com\",\n  ctaLabel: \"Discover now\",\n  description:\n    \"From the first pour to the final sip, coffee is more than a drink — it’s a pause, a rhythm, a story in every cup. Discover how moments of calm begin with Sarina.\",\n  eyebrow: \"Brew Stories\",\n  heading: \"The Art of the Morning Ritual\",\n  imageAlt: \"Coffee morning ritual\",\n  imageSrc: emailAsset(`hero/overlayed-split-bg.jpg`),\n  logoAlt: \"emailcn\",\n  logoHref: \"https://example.com\",\n  logoSrc: emailAsset(`emailcn-logo-light.png`),\n  overlayColor: \"rgba(3, 7, 18, 0.8)\",\n  pageBackgroundColor: \"#f1f5f9\",\n  subheading: \"January 31, 2025\",\n  textColor: \"#f9fafb\",\n  theme: defaultTheme,\n  variant: \"overlay-left\",\n} satisfies OverlaySplitHero_HeroOverlayedSplitProps;\n\nconst __OverlaySplitHero = OverlaySplitHero_HeroOverlayedSplit;\n\ntype ContainedSplitHero_HeroSplitContainedVariant =\n  | \"single-image-left\"\n  | \"single-image-right\"\n  | \"square-images-left\"\n  | \"square-images-right\"\n  | \"portrait-top-left\"\n  | \"portrait-top-right\"\n  | \"portrait-bottom-left\"\n  | \"portrait-bottom-right\";\n\ninterface ContainedSplitHero_HeroSplitContainedProps {\n  theme?: EmailTheme;\n  eyebrow?: string;\n  heading?: string;\n  subheading?: string;\n  description?: string;\n  price?: string;\n  ctaLabel?: string;\n  ctaHref?: string;\n  primaryImageSrc?: string;\n  primaryImageAlt?: string;\n  secondaryImageSrc?: string;\n  secondaryImageAlt?: string;\n  logoSrc?: string;\n  logoAlt?: string;\n  pageBackgroundColor?: string;\n  backgroundColor?: string;\n  textColor?: string;\n  mutedTextColor?: string;\n  buttonBackgroundColor?: string;\n  buttonTextColor?: string;\n  variant?: ContainedSplitHero_HeroSplitContainedVariant;\n}\n\nconst ContainedSplitHero_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\nconst ContainedSplitHero_responsiveStyles = `\n    @media only screen and (max-width: 599px) {\n      .hero-contained-column {\n        display: block !important;\n        width: 100% !important;\n      }\n\n      .hero-contained-spacer {\n        height: 44px !important;\n        line-height: 44px !important;\n      }\n\n      .hero-contained-content {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n\n      .hero-contained-stack {\n        display: flex !important;\n        width: 100% !important;\n      }\n\n      .hero-contained-stack-gap {\n        display: none !important;\n      }\n\n      .hero-contained-stack-first {\n        padding-right: 12px !important;\n      }\n\n      .hero-contained-stack-second {\n        padding-left: 12px !important;\n      }\n    }\n\n    @media only screen and (max-width: 430px) {\n      .hero-contained-stack {\n        display: block !important;\n      }\n\n      .hero-contained-stack-first,\n      .hero-contained-stack-second {\n        display: block !important;\n        padding: 0 !important;\n      }\n\n      .hero-contained-stack-image {\n        width: 100% !important;\n      }\n\n      .hero-contained-square-image {\n        aspect-ratio: 16 / 9 !important;\n        object-fit: cover !important;\n      }\n    }\n  `;\n\ninterface ContainedSplitHero_HeroPreset {\n  backgroundColor: string;\n  ctaLabel: string;\n  description: string;\n  eyebrow: string;\n  heading: string;\n  logoSrc: string;\n  mutedTextColor: string;\n  price: string;\n  primaryImageAlt: string;\n  primaryImageSrc: string;\n  secondaryImageAlt: string;\n  secondaryImageSrc: string;\n  subheading: string;\n  textColor: string;\n}\n\nconst ContainedSplitHero_presets = {\n  portraitBottom: {\n    backgroundColor: \"#030712\",\n    ctaLabel: \"Book a table now\",\n    description:\n      \"Fluffy steamed buns filled with rich, savory flavors and made fresh daily. A taste of authentic street food, crafted with passion and served with warmth, right in the heart of London.\",\n    eyebrow: \"Taiwanese Steamed Shop\",\n    heading: \"Gua Bao\",\n    logoSrc: emailAsset(`emailcn-logo-light.png`),\n    mutedTextColor: \"#d1d5db\",\n    price: \"\",\n    primaryImageAlt: \"Top image\",\n    primaryImageSrc: emailAsset(`hero/split-contained-landscape-top.jpg`),\n    secondaryImageAlt: \"Bottom image\",\n    secondaryImageSrc: emailAsset(`hero/split-contained-portrait-bottom.jpg`),\n    subheading: \"53 Lexington St. London\",\n    textColor: \"#f9fafb\",\n  },\n  portraitTop: {\n    backgroundColor: \"#fffffe\",\n    ctaLabel: \"Discover now\",\n    description:\n      \"Handcrafted blends made with care, bottled to preserve freshness and flavor. A perfect balance of tradition and quality, designed to bring a touch of refinement to your everyday rituals.\",\n    eyebrow: \"Es Kopi Susu\",\n    heading: \"Sarina\",\n    logoSrc: emailAsset(`emailcn-logo.png`),\n    mutedTextColor: \"#4b5563\",\n    price: \"\",\n    primaryImageAlt: \"Top image\",\n    primaryImageSrc: emailAsset(`hero/split-contained-portrait-top.jpg`),\n    secondaryImageAlt: \"Bottom image\",\n    secondaryImageSrc: emailAsset(`hero/split-contained-landscape-bottom.jpg`),\n    subheading: \"Americano Grape Fruit\",\n    textColor: \"#030712\",\n  },\n  single: {\n    backgroundColor: \"#fffffe\",\n    ctaLabel: \"Starts at $12.99\",\n    description:\n      \"A refreshing blend of cooling salt and soothing vanilla, this toothpaste brings a clean, calming experience to your everyday ritual. Gentle yet effective, it's designed to leave your smile brighter.\",\n    eyebrow: \"Toothpaste\",\n    heading: \"Salt.\",\n    logoSrc: emailAsset(`emailcn-logo.png`),\n    mutedTextColor: \"#4b5563\",\n    price: \"\",\n    primaryImageAlt: \"Salt toothpaste\",\n    primaryImageSrc: emailAsset(`hero/split-contained-bg.jpg`),\n    secondaryImageAlt: \"\",\n    secondaryImageSrc: \"\",\n    subheading: \"Dusk | French Vanilla\",\n    textColor: \"#030712\",\n  },\n  square: {\n    backgroundColor: \"#030712\",\n    ctaLabel: \"Discover now\",\n    description:\n      \"A targeted solution that works deep to unclog pores, reduce excess oil, and calm irritation. Lightweight and powerful, this formula supports clearer, healthier-looking skin\",\n    eyebrow: \"THE\",\n    heading: \"Ordinary.\",\n    logoSrc: emailAsset(`emailcn-logo-light.png`),\n    mutedTextColor: \"#d1d5db\",\n    price: \"From $8.99\",\n    primaryImageAlt: \"Top image\",\n    primaryImageSrc: emailAsset(`hero/split-contained-square-1.jpg`),\n    secondaryImageAlt: \"Bottom image\",\n    secondaryImageSrc: emailAsset(`hero/split-contained-square-2.jpg`),\n    subheading: \"For blemish-prone skin\",\n    textColor: \"#f9fafb\",\n  },\n} satisfies Record<string, ContainedSplitHero_HeroPreset>;\n\ntype ContainedSplitHero_ResolvedProps = Required<\n  Omit<ContainedSplitHero_HeroSplitContainedProps, \"theme\">\n>;\n\nconst ContainedSplitHero_getPreset = (\n  variant: ContainedSplitHero_HeroSplitContainedVariant\n) => {\n  if (variant.startsWith(\"single-\")) {\n    return ContainedSplitHero_presets.single;\n  }\n  if (variant.startsWith(\"square-\")) {\n    return ContainedSplitHero_presets.square;\n  }\n  if (variant.startsWith(\"portrait-bottom-\")) {\n    return ContainedSplitHero_presets.portraitBottom;\n  }\n  return ContainedSplitHero_presets.portraitTop;\n};\n\nconst ContainedSplitHero_resolveProps = (\n  props: Omit<ContainedSplitHero_HeroSplitContainedProps, \"theme\">\n): ContainedSplitHero_ResolvedProps => {\n  const {\n    backgroundColor,\n    buttonBackgroundColor,\n    buttonTextColor,\n    ctaHref,\n    ctaLabel,\n    description,\n    eyebrow,\n    heading,\n    logoAlt,\n    logoSrc,\n    mutedTextColor,\n    pageBackgroundColor,\n    price,\n    primaryImageAlt,\n    primaryImageSrc,\n    secondaryImageAlt,\n    secondaryImageSrc,\n    subheading,\n    textColor,\n    variant,\n  } = {\n    variant:\n      \"single-image-left\" as ContainedSplitHero_HeroSplitContainedVariant,\n    ...props,\n  };\n  const preset = ContainedSplitHero_getPreset(variant);\n  return {\n    backgroundColor: backgroundColor ?? preset.backgroundColor,\n    buttonBackgroundColor: buttonBackgroundColor ?? \"#4f46e5\",\n    buttonTextColor: buttonTextColor ?? \"#fffffe\",\n    ctaHref: ctaHref ?? \"https://example.com\",\n    ctaLabel: ctaLabel ?? preset.ctaLabel,\n    description: description ?? preset.description,\n    eyebrow: eyebrow ?? preset.eyebrow,\n    heading: heading ?? preset.heading,\n    logoAlt: logoAlt ?? \"emailcn\",\n    logoSrc: logoSrc ?? preset.logoSrc,\n    mutedTextColor: mutedTextColor ?? preset.mutedTextColor,\n    pageBackgroundColor: pageBackgroundColor ?? \"#f1f5f9\",\n    price: price ?? preset.price,\n    primaryImageAlt: primaryImageAlt ?? preset.primaryImageAlt,\n    primaryImageSrc: primaryImageSrc ?? preset.primaryImageSrc,\n    secondaryImageAlt: secondaryImageAlt ?? preset.secondaryImageAlt,\n    secondaryImageSrc: secondaryImageSrc ?? preset.secondaryImageSrc,\n    subheading: subheading ?? preset.subheading,\n    textColor: textColor ?? preset.textColor,\n    variant,\n  };\n};\n\nconst ContainedSplitHero_ImagePanel = ({\n  props,\n}: {\n  props: ContainedSplitHero_ResolvedProps;\n}) => {\n  const single = props.variant.startsWith(\"single-\");\n  const square = props.variant.startsWith(\"square-\");\n  if (single) {\n    return (\n      <Column\n        className=\"hero-contained-column hero-contained-single-image\"\n        style={{\n          backgroundImage: `url(${props.primaryImageSrc})`,\n          backgroundPosition: \"center\",\n          backgroundRepeat: \"no-repeat\",\n          backgroundSize: \"cover\",\n          height: \"552px\",\n          verticalAlign: \"top\",\n          width: \"196px\",\n        }}\n      >\n        <Section style={{ padding: \"44px 24px\", textAlign: \"center\" }}>\n          <Img\n            alt={props.logoAlt}\n            src={props.logoSrc}\n            width=\"165\"\n            style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n          />\n        </Section>\n      </Column>\n    );\n  }\n  return (\n    <Column\n      className=\"hero-contained-column hero-contained-image-panel\"\n      style={{ verticalAlign: \"top\", width: \"244px\" }}\n    >\n      <Section className=\"hero-contained-stack\">\n        <Section className=\"hero-contained-stack-first\">\n          <Img\n            alt={props.primaryImageAlt}\n            className={`hero-contained-stack-image${square ? \" hero-contained-square-image\" : \"\"}`}\n            src={props.primaryImageSrc}\n            width=\"244\"\n            style={{\n              borderRadius: \"4px\",\n              maxWidth: \"100%\",\n              verticalAlign: \"middle\",\n            }}\n          />\n        </Section>\n        <Section\n          className=\"hero-contained-stack-gap\"\n          style={{ height: \"24px\", lineHeight: \"24px\" }}\n        >\n          &zwj;\n        </Section>\n        <Section className=\"hero-contained-stack-second\">\n          <Img\n            alt={props.secondaryImageAlt}\n            className={`hero-contained-stack-image${square ? \" hero-contained-square-image\" : \"\"}`}\n            src={props.secondaryImageSrc}\n            width=\"244\"\n            style={{\n              borderRadius: \"4px\",\n              maxWidth: \"100%\",\n              verticalAlign: \"middle\",\n            }}\n          />\n        </Section>\n      </Section>\n    </Column>\n  );\n};\n\nconst ContainedSplitHero_ContentPanel = ({\n  props,\n}: {\n  props: ContainedSplitHero_ResolvedProps;\n}) => {\n  const single = props.variant.startsWith(\"single-\");\n  return (\n    <Column\n      className=\"hero-contained-column hero-contained-content\"\n      style={{\n        boxSizing: \"border-box\",\n        padding: single ? \"44px 24px\" : \"44px 24px\",\n        textAlign: \"left\",\n        verticalAlign: single ? \"bottom\" : \"top\",\n        width: single ? \"332px\" : \"284px\",\n      }}\n    >\n      {single ? null : (\n        <>\n          <Img\n            alt={props.logoAlt}\n            src={props.logoSrc}\n            width=\"165\"\n            style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n          />\n          <Section style={{ height: \"48px\", lineHeight: \"48px\" }}>\n            &zwj;\n          </Section>\n        </>\n      )}\n      <Text\n        style={{\n          color: props.textColor,\n          fontFamily: ContainedSplitHero_fontFamily,\n          fontSize: \"16px\",\n          fontWeight: 200,\n          lineHeight: \"24px\",\n          margin: 0,\n        }}\n      >\n        {props.eyebrow}\n      </Text>\n      <Heading\n        style={{\n          color: props.textColor,\n          fontFamily: ContainedSplitHero_fontFamily,\n          fontSize: \"48px\",\n          fontWeight: 500,\n          lineHeight: \"58px\",\n          margin: 0,\n        }}\n        as=\"h1\"\n      >\n        {props.heading}\n      </Heading>\n      <Text\n        style={{\n          color: props.textColor,\n          fontFamily: ContainedSplitHero_fontFamily,\n          fontSize: \"18px\",\n          lineHeight: \"28px\",\n          margin: 0,\n        }}\n      >\n        {props.subheading}\n      </Text>\n      <Section style={{ height: \"48px\", lineHeight: \"48px\" }}>&zwj;</Section>\n      <Text\n        style={{\n          color: props.mutedTextColor,\n          fontFamily: ContainedSplitHero_fontFamily,\n          fontSize: \"16px\",\n          fontWeight: 300,\n          lineHeight: \"24px\",\n          margin: 0,\n        }}\n      >\n        {props.description}\n        {props.price ? (\n          <>\n            <br />\n            <br />\n            <span style={{ fontWeight: 700 }}>{props.price}</span>\n          </>\n        ) : null}\n      </Text>\n      <Section style={{ height: \"24px\", lineHeight: \"24px\" }}>&zwj;</Section>\n      {props.ctaLabel && props.ctaHref ? (\n        <Link\n          href={props.ctaHref}\n          style={{\n            backgroundColor: props.buttonBackgroundColor,\n            borderRadius: \"8px\",\n            color: props.buttonTextColor,\n            display: \"inline-block\",\n            fontFamily: ContainedSplitHero_fontFamily,\n            fontSize: \"16px\",\n            fontWeight: 500,\n            lineHeight: 1,\n            padding: \"14px 20px\",\n            textDecoration: \"none\",\n          }}\n        >\n          <span style={{ marginRight: \"8px\" }}>{props.ctaLabel}</span>\n          <Img\n            alt=\"\"\n            src={emailAsset(`icon-arrow-right.png`)}\n            width=\"12\"\n            style={{\n              display: \"inline-block\",\n              maxWidth: \"100%\",\n              verticalAlign: \"baseline\",\n            }}\n          />\n        </Link>\n      ) : null}\n    </Column>\n  );\n};\n\nconst ContainedSplitHero_SpacerColumn = () => (\n  <Column\n    className=\"hero-contained-column hero-contained-spacer\"\n    style={{ fontSize: 0, lineHeight: 0, width: \"24px\" }}\n  >\n    &zwj;\n  </Column>\n);\n\nconst ContainedSplitHero_HeroSplitContainedSection = (\n  input: Omit<ContainedSplitHero_HeroSplitContainedProps, \"theme\">\n) => {\n  const props = ContainedSplitHero_resolveProps(input);\n  const imageLeft = props.variant.endsWith(\"-left\");\n  const image = <ContainedSplitHero_ImagePanel props={props} />;\n  const content = <ContainedSplitHero_ContentPanel props={props} />;\n  return (\n    <Section style={{ backgroundColor: props.backgroundColor }} width=\"100%\">\n      <Fragment>\n        <Row>\n          <Column style={{ padding: \"24px\" }}>\n            <Section style={{ tableLayout: \"fixed\" }} width=\"100%\">\n              <Fragment>\n                <Row>\n                  {imageLeft ? (\n                    <>\n                      {image}\n                      <ContainedSplitHero_SpacerColumn />\n                      {content}\n                    </>\n                  ) : (\n                    <>\n                      {content}\n                      <ContainedSplitHero_SpacerColumn />\n                      {image}\n                    </>\n                  )}\n                </Row>\n              </Fragment>\n            </Section>\n          </Column>\n        </Row>\n      </Fragment>\n    </Section>\n  );\n};\n\nconst ContainedSplitHero_HeroSplitContained = ({\n  theme = defaultTheme,\n  ...props\n}: ContainedSplitHero_HeroSplitContainedProps) => {\n  const resolved = ContainedSplitHero_resolveProps(props);\n  return (\n    <Html>\n      <EmailHead>\n        <DefaultFonts />\n        <style\n          dangerouslySetInnerHTML={{\n            __html: ContainedSplitHero_responsiveStyles,\n          }}\n        />\n      </EmailHead>\n      <Preview>{`${resolved.heading} — ${resolved.subheading}`}</Preview>\n      <Tailwind config={createEmailTailwindConfig(theme)}>\n        <Body\n          style={{\n            backgroundColor: resolved.pageBackgroundColor,\n            fontFamily: ContainedSplitHero_fontFamily,\n          }}\n          className=\"m-0\"\n        >\n          <Container className=\"mx-auto max-w-[600px] w-[600px]\">\n            <ContainedSplitHero_HeroSplitContainedSection\n              {...props}\n              variant={resolved.variant}\n            />\n          </Container>\n        </Body>\n      </Tailwind>\n    </Html>\n  );\n};\n\nContainedSplitHero_HeroSplitContained.PreviewProps = {\n  theme: defaultTheme,\n  variant: \"single-image-left\",\n} satisfies ContainedSplitHero_HeroSplitContainedProps;\n\nconst __ContainedSplitHero = ContainedSplitHero_HeroSplitContained;\n\ntype FullBleedSplitHero_HeroSplitFullBleedVariant =\n  | \"image-left\"\n  | \"image-right\";\n\ninterface FullBleedSplitHero_HeroSplitFullBleedProps {\n  theme?: EmailTheme;\n  eyebrow?: string;\n  heading?: string;\n  subheading?: string;\n  description?: string;\n  price?: string;\n  ctaLabel?: string;\n  ctaHref?: string;\n  imageSrc?: string;\n  imageAlt?: string;\n  logoSrc?: string;\n  logoAlt?: string;\n  textBackgroundColor?: string;\n  pageBackgroundColor?: string;\n  buttonBackgroundColor?: string;\n  buttonTextColor?: string;\n  variant?: FullBleedSplitHero_HeroSplitFullBleedVariant;\n}\n\nconst FullBleedSplitHero_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\n\nconst FullBleedSplitHero_responsiveStyles = `\n    @media only screen and (max-width: 599px) {\n      .hero-split-column {\n        display: block !important;\n        width: 100% !important;\n      }\n\n      .hero-split-image {\n        height: 388px !important;\n      }\n\n      .hero-split-spacer {\n        display: block !important;\n        height: 44px !important;\n        line-height: 44px !important;\n        width: 100% !important;\n      }\n\n      .hero-split-text {\n        padding-left: 24px !important;\n        padding-right: 24px !important;\n      }\n\n      .hero-split-logo {\n        margin-left: 0 !important;\n        margin-right: auto !important;\n      }\n\n      .hero-split-right .hero-split-image {\n        display: table-header-group !important;\n      }\n\n      .hero-split-right .hero-split-spacer,\n      .hero-split-right .hero-split-text {\n        display: table-footer-group !important;\n      }\n    }\n  `;\n\ntype FullBleedSplitHero_SectionProps = Required<\n  Omit<FullBleedSplitHero_HeroSplitFullBleedProps, \"theme\" | \"variant\">\n> & {\n  variant: FullBleedSplitHero_HeroSplitFullBleedVariant;\n};\n\nconst FullBleedSplitHero_HeroImageColumn = ({\n  imageAlt,\n  imageSrc,\n  logoAlt,\n  logoSrc,\n}: Pick<\n  FullBleedSplitHero_SectionProps,\n  \"imageAlt\" | \"imageSrc\" | \"logoAlt\" | \"logoSrc\"\n>) => (\n  <Column\n    aria-label={imageAlt || undefined}\n    className=\"hero-split-column hero-split-image\"\n    role={imageAlt ? \"img\" : undefined}\n    style={{\n      backgroundImage: `url(${imageSrc})`,\n      backgroundPosition: \"center\",\n      backgroundRepeat: \"no-repeat\",\n      backgroundSize: \"cover\",\n      height: \"600px\",\n      verticalAlign: \"top\",\n      width: \"256px\",\n    }}\n  >\n    <Img\n      alt={logoAlt}\n      className=\"hero-split-logo\"\n      src={logoSrc}\n      width=\"165\"\n      style={{\n        display: \"block\",\n        margin: \"44px auto 0\",\n        maxWidth: \"100%\",\n      }}\n    />\n  </Column>\n);\n\nconst FullBleedSplitHero_HeroSpacerColumn = () => (\n  <Column\n    className=\"hero-split-column hero-split-spacer\"\n    style={{ fontSize: 0, lineHeight: 0, width: \"24px\" }}\n  >\n    &zwj;\n  </Column>\n);\n\nconst FullBleedSplitHero_HeroTextColumn = ({\n  buttonBackgroundColor,\n  buttonTextColor,\n  ctaHref,\n  ctaLabel,\n  description,\n  eyebrow,\n  heading,\n  price,\n  subheading,\n  textBackgroundColor,\n}: Pick<\n  FullBleedSplitHero_SectionProps,\n  | \"buttonBackgroundColor\"\n  | \"buttonTextColor\"\n  | \"ctaHref\"\n  | \"ctaLabel\"\n  | \"description\"\n  | \"eyebrow\"\n  | \"heading\"\n  | \"price\"\n  | \"subheading\"\n  | \"textBackgroundColor\"\n>) => (\n  <Column\n    className=\"hero-split-column hero-split-text\"\n    style={{\n      backgroundColor: textBackgroundColor,\n      padding: \"0 24px\",\n      verticalAlign: \"bottom\",\n      width: \"320px\",\n    }}\n  >\n    <Text\n      style={{\n        color: \"#030712\",\n        fontFamily: FullBleedSplitHero_fontFamily,\n        fontSize: \"16px\",\n        fontWeight: 200,\n        lineHeight: \"24px\",\n        margin: 0,\n      }}\n    >\n      {eyebrow}\n    </Text>\n    <Text\n      style={{\n        color: \"#030712\",\n        fontFamily: FullBleedSplitHero_fontFamily,\n        fontSize: \"48px\",\n        fontWeight: 500,\n        lineHeight: \"58px\",\n        margin: 0,\n      }}\n    >\n      {heading}\n    </Text>\n    <Text\n      style={{\n        color: \"#030712\",\n        fontFamily: FullBleedSplitHero_fontFamily,\n        fontSize: \"18px\",\n        lineHeight: \"28px\",\n        margin: 0,\n      }}\n    >\n      {subheading}\n    </Text>\n    <Section style={{ fontSize: 0, height: \"48px\", lineHeight: \"48px\" }}>\n      &zwj;\n    </Section>\n    <Text\n      style={{\n        color: \"#4b5563\",\n        fontFamily: FullBleedSplitHero_fontFamily,\n        fontSize: \"16px\",\n        fontWeight: 300,\n        lineHeight: \"24px\",\n        margin: 0,\n      }}\n    >\n      {description}\n      {price ? (\n        <>\n          <br />\n          <br />\n          <span style={{ fontWeight: 700 }}>{price}</span>\n        </>\n      ) : null}\n    </Text>\n    <Section style={{ fontSize: 0, height: \"24px\", lineHeight: \"24px\" }}>\n      &zwj;\n    </Section>\n    {ctaLabel && ctaHref ? (\n      <Button\n        href={ctaHref}\n        style={{\n          backgroundColor: buttonBackgroundColor,\n          borderRadius: \"8px\",\n          color: buttonTextColor,\n          display: \"inline-block\",\n          fontFamily: FullBleedSplitHero_fontFamily,\n          fontSize: \"16px\",\n          fontWeight: 500,\n          lineHeight: 1,\n          padding: \"14px 20px\",\n          textDecoration: \"none\",\n        }}\n      >\n        <span style={{ marginRight: \"8px\" }}>{ctaLabel}</span>\n        <Img\n          alt=\"\"\n          src={emailAsset(\"icon-arrow-right.png\")}\n          width=\"12\"\n          style={{\n            display: \"inline-block\",\n            maxWidth: \"100%\",\n            verticalAlign: \"baseline\",\n          }}\n        />\n      </Button>\n    ) : null}\n    <Section style={{ fontSize: 0, height: \"44px\", lineHeight: \"44px\" }}>\n      &zwj;\n    </Section>\n  </Column>\n);\n\nconst FullBleedSplitHero_HeroSplitFullBleedSection = (\n  props: FullBleedSplitHero_SectionProps\n) => {\n  const image = <FullBleedSplitHero_HeroImageColumn {...props} />;\n  const spacer = <FullBleedSplitHero_HeroSpacerColumn />;\n  const text = <FullBleedSplitHero_HeroTextColumn {...props} />;\n  return (\n    <Section style={{ backgroundColor: props.textBackgroundColor, padding: 0 }}>\n      <Row\n        className={props.variant === \"image-right\" ? \"hero-split-right\" : \"\"}\n        style={{ tableLayout: \"fixed\", width: \"100%\" }}\n      >\n        {props.variant === \"image-left\" ? (\n          <>\n            {image}\n            {spacer}\n            {text}\n          </>\n        ) : (\n          <>\n            {text}\n            {spacer}\n            {image}\n          </>\n        )}\n      </Row>\n    </Section>\n  );\n};\n\nconst FullBleedSplitHero_HeroSplitFullBleed = ({\n  buttonBackgroundColor = \"#4f46e5\",\n  buttonTextColor = \"#fffffe\",\n  ctaHref = \"https://example.com\",\n  ctaLabel = \"Discover now\",\n  description = \"Handcrafted in small batches, Sarina blends the boldness of Americano with the brightness of grapefruit. A modern roast for those who crave flavor with edge and energy in every sip.\",\n  eyebrow = \"Coffee\",\n  heading = \"Sarina\",\n  imageAlt = \"Sarina coffee bottle\",\n  imageSrc = emailAsset(\"hero/split-full-bleed-bg.jpg\"),\n  logoAlt = \"emailcn\",\n  logoSrc = emailAsset(\"emailcn-logo.png\"),\n  pageBackgroundColor = \"#f1f5f9\",\n  price = \"From $14.99\",\n  subheading = \"Americano Grape Fruit\",\n  textBackgroundColor = \"#fffffe\",\n  theme = defaultTheme,\n  variant = \"image-left\",\n}: FullBleedSplitHero_HeroSplitFullBleedProps) => (\n  <Html>\n    <EmailHead>\n      <DefaultFonts />\n      <style\n        dangerouslySetInnerHTML={{\n          __html: FullBleedSplitHero_responsiveStyles,\n        }}\n      />\n    </EmailHead>\n    <Preview>{`${heading} — ${subheading}`}</Preview>\n    <Tailwind config={createEmailTailwindConfig(theme)}>\n      <Body\n        style={{\n          backgroundColor: pageBackgroundColor,\n          fontFamily: FullBleedSplitHero_fontFamily,\n        }}\n        className=\"m-0\"\n      >\n        <Container\n          style={{\n            backgroundColor: textBackgroundColor,\n          }}\n          className=\"mx-auto max-w-[600px] w-[600px]\"\n        >\n          <FullBleedSplitHero_HeroSplitFullBleedSection\n            buttonBackgroundColor={buttonBackgroundColor}\n            buttonTextColor={buttonTextColor}\n            ctaHref={ctaHref}\n            ctaLabel={ctaLabel}\n            description={description}\n            eyebrow={eyebrow}\n            heading={heading}\n            imageAlt={imageAlt}\n            imageSrc={imageSrc}\n            logoAlt={logoAlt}\n            logoSrc={logoSrc}\n            pageBackgroundColor={pageBackgroundColor}\n            price={price}\n            subheading={subheading}\n            textBackgroundColor={textBackgroundColor}\n            variant={variant}\n          />\n        </Container>\n      </Body>\n    </Tailwind>\n  </Html>\n);\n\nFullBleedSplitHero_HeroSplitFullBleed.PreviewProps = {\n  buttonBackgroundColor: \"#4f46e5\",\n  buttonTextColor: \"#fffffe\",\n  ctaHref: \"https://example.com\",\n  ctaLabel: \"Discover now\",\n  description:\n    \"Handcrafted in small batches, Sarina blends the boldness of Americano with the brightness of grapefruit. A modern roast for those who crave flavor with edge and energy in every sip.\",\n  eyebrow: \"Coffee\",\n  heading: \"Sarina\",\n  imageAlt: \"Sarina coffee bottle\",\n  imageSrc: emailAsset(\"hero/split-full-bleed-bg.jpg\"),\n  logoAlt: \"emailcn\",\n  logoSrc: emailAsset(\"emailcn-logo.png\"),\n  pageBackgroundColor: \"#f1f5f9\",\n  price: \"From $14.99\",\n  subheading: \"Americano Grape Fruit\",\n  textBackgroundColor: \"#fffffe\",\n  theme: defaultTheme,\n  variant: \"image-left\",\n} satisfies FullBleedSplitHero_HeroSplitFullBleedProps;\n\nconst __FullBleedSplitHero = FullBleedSplitHero_HeroSplitFullBleed;\n\ntype OverlayContentHeroBundle_HeroWithOverlayedContentVariant =\n  | \"default\"\n  | \"slanted-left\"\n  | \"slanted-right\";\n\ninterface OverlayContentHeroBundle_HeroWithOverlayedContentProps {\n  theme?: EmailTheme;\n  eyebrow?: string;\n  headingAccent?: string;\n  heading?: string;\n  subheading?: string;\n  description?: string;\n  ctaLabel?: string;\n  ctaHref?: string;\n  imageSrc?: string;\n  imageAlt?: string;\n  logoSrc?: string;\n  logoAlt?: string;\n  logoHref?: string;\n  pageBackgroundColor?: string;\n  slantColor?: string;\n  textColor?: string;\n  accentColor?: string;\n  buttonBackgroundColor?: string;\n  buttonTextColor?: string;\n  variant?: OverlayContentHeroBundle_HeroWithOverlayedContentVariant;\n}\n\nconst OverlayContentHeroBundle_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\nconst OverlayContentHeroBundle_responsiveStyles = `\n    @media only screen and (max-width: 599px) {\n      .hero-overlayed-content-side {\n        width: 24px !important;\n      }\n\n      .hero-overlayed-content-slant {\n        border-left-width: 100vw !important;\n      }\n    }\n  `;\n\ntype OverlayContentHeroBundle_SectionProps = Omit<\n  OverlayContentHeroBundle_HeroWithOverlayedContentProps,\n  \"theme\"\n>;\n\nconst OverlayContentHeroBundle_sectionDefaults = {\n  accentColor: \"#D34A36\",\n  buttonBackgroundColor: \"#D34A36\",\n  buttonTextColor: \"#fffffe\",\n  ctaHref: \"https://example.com\",\n  ctaLabel: \"Make an offer now\",\n  description:\n    \"Step back into the golden era of hoops style with the iconic Blazer Mid '77 Vintage. A timeless mix of crisp white leather, retro suede accents, and that bold Swoosh, this pair delivers heritage with a modern edge.\",\n  eyebrow: \"Fresh Drop\",\n  heading: \"Mid ‘77 Vintage\",\n  headingAccent: \"Blazer\",\n  imageAlt: \"Nike Blazer Mid ‘77 Vintage\",\n  imageSrc: emailAsset(`hero/overlayed/hero-overlayed-bg.jpg`),\n  logoAlt: \"emailcn\",\n  logoHref: \"https://example.com\",\n  logoSrc: emailAsset(`emailcn-insignia-mono.png`),\n  pageBackgroundColor: \"#f1f5f9\",\n  slantColor: \"#fffffe\",\n  subheading: \"Only One Pair Left\",\n  textColor: \"#030712\",\n  variant: \"default\",\n} satisfies OverlayContentHeroBundle_SectionProps;\n\nconst OverlayContentHeroBundle_HeroWithOverlayedContentSection = (\n  props: OverlayContentHeroBundle_SectionProps\n) => {\n  const {\n    accentColor,\n    buttonBackgroundColor,\n    buttonTextColor,\n    ctaHref,\n    ctaLabel,\n    description,\n    eyebrow,\n    heading,\n    headingAccent,\n    imageAlt,\n    imageSrc,\n    logoAlt,\n    logoHref,\n    logoSrc,\n    slantColor,\n    subheading,\n    textColor,\n    variant,\n  } = resolveDefaultProps(OverlayContentHeroBundle_sectionDefaults, props);\n  return (\n    <Section\n      aria-label={imageAlt || undefined}\n      style={{\n        backgroundImage: `url(${imageSrc})`,\n        backgroundPosition: \"top\",\n        backgroundRepeat: \"no-repeat\",\n        backgroundSize: \"cover\",\n      }}\n      width=\"100%\"\n    >\n      <Fragment>\n        <Row>\n          <Column colSpan={3} style={{ height: \"44px\", lineHeight: \"44px\" }}>\n            &zwj;\n          </Column>\n        </Row>\n        <Row>\n          <Column\n            className=\"hero-overlayed-content-side\"\n            style={{ width: \"48px\" }}\n          >\n            &zwj;\n          </Column>\n          <Column style={{ textAlign: \"center\" }}>\n            <Link href={logoHref}>\n              <Img\n                alt={logoAlt}\n                src={logoSrc}\n                width=\"65\"\n                style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n              />\n            </Link>\n            <Section style={{ height: \"332px\", lineHeight: \"332px\" }}>\n              &zwj;\n            </Section>\n            <Text\n              style={{\n                color: accentColor,\n                fontFamily: OverlayContentHeroBundle_fontFamily,\n                fontSize: \"16px\",\n                fontWeight: 500,\n                lineHeight: \"24px\",\n                margin: 0,\n              }}\n            >\n              {eyebrow}\n            </Text>\n            <Heading\n              style={{\n                color: textColor,\n                fontFamily: OverlayContentHeroBundle_fontFamily,\n                fontSize: \"48px\",\n                fontWeight: 300,\n                lineHeight: \"58px\",\n                margin: 0,\n              }}\n              as=\"h1\"\n            >\n              <span style={{ fontWeight: 500 }}>{headingAccent}</span> {heading}\n            </Heading>\n            <Text\n              style={{\n                color: textColor,\n                fontFamily: OverlayContentHeroBundle_fontFamily,\n                fontSize: \"18px\",\n                lineHeight: \"28px\",\n                margin: 0,\n              }}\n            >\n              {subheading}\n            </Text>\n            <Section style={{ height: \"44px\", lineHeight: \"44px\" }}>\n              &zwj;\n            </Section>\n            <Text\n              style={{\n                color: textColor,\n                fontFamily: OverlayContentHeroBundle_fontFamily,\n                fontSize: \"16px\",\n                fontWeight: 300,\n                lineHeight: \"24px\",\n                margin: 0,\n              }}\n            >\n              {description}\n            </Text>\n            <Section style={{ height: \"24px\", lineHeight: \"24px\" }}>\n              &zwj;\n            </Section>\n            {ctaLabel && ctaHref ? (\n              <Link\n                href={ctaHref}\n                style={{\n                  backgroundColor: buttonBackgroundColor,\n                  borderRadius: \"8px\",\n                  color: buttonTextColor,\n                  display: \"inline-block\",\n                  fontFamily: OverlayContentHeroBundle_fontFamily,\n                  fontSize: \"16px\",\n                  fontWeight: 500,\n                  lineHeight: 1,\n                  padding: \"14px 20px\",\n                  textDecoration: \"none\",\n                }}\n              >\n                <span style={{ marginRight: \"8px\" }}>{ctaLabel}</span>\n                <Img\n                  alt=\"\"\n                  src={emailAsset(`icon-arrow-right.png`)}\n                  width=\"12\"\n                  style={{\n                    display: \"inline-block\",\n                    maxWidth: \"100%\",\n                    verticalAlign: \"baseline\",\n                  }}\n                />\n              </Link>\n            ) : null}\n          </Column>\n          <Column\n            className=\"hero-overlayed-content-side\"\n            style={{ width: \"48px\" }}\n          >\n            &zwj;\n          </Column>\n        </Row>\n        <Row>\n          <Column colSpan={3}>\n            {(() => {\n              if (variant === \"default\") {\n                return (\n                  <Section style={{ height: \"64px\", lineHeight: \"64px\" }}>\n                    &zwj;\n                  </Section>\n                );\n              }\n              return (\n                <>\n                  <Section style={{ height: \"28px\", lineHeight: \"28px\" }}>\n                    &zwj;\n                  </Section>\n                  <Section\n                    className=\"hero-overlayed-content-slant\"\n                    style={{\n                      borderColor: `transparent transparent ${slantColor}`,\n                      borderStyle: \"solid\",\n                      borderWidth:\n                        variant === \"slanted-left\"\n                          ? \"0 0 100px 600px\"\n                          : \"0 600px 100px 0\",\n                      height: 0,\n                      width: 0,\n                    }}\n                  />\n                </>\n              );\n            })()}\n          </Column>\n        </Row>\n      </Fragment>\n    </Section>\n  );\n};\n\nconst OverlayContentHeroBundle_HeroWithOverlayedContent = (\n  props: OverlayContentHeroBundle_HeroWithOverlayedContentProps\n) => {\n  const { pageBackgroundColor, theme, ...sectionProps } = resolveDefaultProps(\n    {\n      ...OverlayContentHeroBundle_sectionDefaults,\n      theme: defaultTheme,\n    },\n    props\n  );\n  return (\n    <Html>\n      <EmailHead>\n        <DefaultFonts />\n        <style\n          dangerouslySetInnerHTML={{\n            __html: OverlayContentHeroBundle_responsiveStyles,\n          }}\n        />\n      </EmailHead>\n      <Preview>{`${sectionProps.eyebrow} — ${sectionProps.headingAccent} ${sectionProps.heading}`}</Preview>\n      <Tailwind config={createEmailTailwindConfig(theme)}>\n        <Body\n          style={{\n            backgroundColor: pageBackgroundColor,\n            fontFamily: OverlayContentHeroBundle_fontFamily,\n          }}\n          className=\"m-0\"\n        >\n          <Container className=\"mx-auto max-w-[600px] w-[600px]\">\n            <OverlayContentHeroBundle_HeroWithOverlayedContentSection\n              {...sectionProps}\n            />\n          </Container>\n        </Body>\n      </Tailwind>\n    </Html>\n  );\n};\n\nOverlayContentHeroBundle_HeroWithOverlayedContent.PreviewProps = {\n  accentColor: \"#D34A36\",\n  buttonBackgroundColor: \"#D34A36\",\n  buttonTextColor: \"#fffffe\",\n  ctaHref: \"https://example.com\",\n  ctaLabel: \"Make an offer now\",\n  description:\n    \"Step back into the golden era of hoops style with the iconic Blazer Mid '77 Vintage. A timeless mix of crisp white leather, retro suede accents, and that bold Swoosh, this pair delivers heritage with a modern edge.\",\n  eyebrow: \"Fresh Drop\",\n  heading: \"Mid ‘77 Vintage\",\n  headingAccent: \"Blazer\",\n  imageAlt: \"Nike Blazer Mid ‘77 Vintage\",\n  imageSrc: emailAsset(`hero/overlayed/hero-overlayed-bg.jpg`),\n  logoAlt: \"emailcn\",\n  logoHref: \"https://example.com\",\n  logoSrc: emailAsset(`emailcn-insignia-mono.png`),\n  pageBackgroundColor: \"#f1f5f9\",\n  slantColor: \"#fffffe\",\n  subheading: \"Only One Pair Left\",\n  textColor: \"#030712\",\n  theme: defaultTheme,\n  variant: \"default\",\n} satisfies OverlayContentHeroBundle_HeroWithOverlayedContentProps;\n\nconst __OverlayContentHeroBundle = {\n  Component: OverlayContentHeroBundle_HeroWithOverlayedContent,\n  __SplitHeroSection: OverlayContentHeroBundle_HeroWithOverlayedContentSection,\n};\n\nconst __OverlayContentHero = __OverlayContentHeroBundle.Component;\n\nconst { __SplitHeroSection } = __OverlayContentHeroBundle;\n\ntype SlantedSplitHero_HeroWithSlantedSplitVariant =\n  | \"left-slanted-down\"\n  | \"left-slanted-up\"\n  | \"right-slanted-down\"\n  | \"right-slanted-up\";\n\ninterface SlantedSplitHero_HeroWithSlantedSplitProps {\n  theme?: EmailTheme;\n  eyebrow?: string;\n  heading?: string;\n  subheading?: string;\n  description?: string;\n  ctaLabel?: string;\n  ctaHref?: string;\n  imageSrc?: string;\n  imageAlt?: string;\n  logoSrc?: string;\n  logoAlt?: string;\n  logoHref?: string;\n  pageBackgroundColor?: string;\n  imageBackgroundColor?: string;\n  contentBackgroundColor?: string;\n  textColor?: string;\n  buttonBackgroundColor?: string;\n  buttonTextColor?: string;\n  variant?: SlantedSplitHero_HeroWithSlantedSplitVariant;\n}\n\nconst SlantedSplitHero_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\nconst SlantedSplitHero_responsiveStyles = `\n    @media only screen and (max-width: 599px) {\n      .hero-slanted-split-stack-left {\n        display: block !important;\n      }\n\n      .hero-slanted-split-content-right {\n        display: table-footer-group !important;\n      }\n\n      .hero-slanted-split-image-right {\n        display: table-header-group !important;\n      }\n\n      .hero-slanted-split-image-cell {\n        width: 100% !important;\n      }\n\n      .hero-slanted-split-image-core {\n        width: 100vw !important;\n      }\n\n      .hero-slanted-split-slant-cell {\n        max-width: 100% !important;\n      }\n\n      .hero-slanted-split-triangle {\n        border-bottom-width: 388px !important;\n        border-top-width: 388px !important;\n      }\n\n      .hero-slanted-split-content-left,\n      .hero-slanted-split-content-inner-right {\n        padding: 44px 24px !important;\n      }\n    }\n\n    .hero-slanted-split-cta:hover {\n      background-color: #4338ca !important;\n    }\n  `;\n\ntype SlantedSplitHero_SectionProps = Omit<\n  SlantedSplitHero_HeroWithSlantedSplitProps,\n  \"theme\"\n>;\n\nconst SlantedSplitHero_HeroWithSlantedSplitSection = (\n  props: SlantedSplitHero_SectionProps\n) => {\n  const {\n    buttonBackgroundColor,\n    buttonTextColor,\n    contentBackgroundColor,\n    ctaHref,\n    ctaLabel,\n    description,\n    eyebrow,\n    heading,\n    imageAlt,\n    imageBackgroundColor,\n    imageSrc,\n    logoAlt,\n    logoHref,\n    logoSrc,\n    pageBackgroundColor,\n    subheading,\n    textColor,\n    variant,\n  } = resolveDefaultProps(\n    {\n      buttonBackgroundColor: \"#4f46e5\",\n      buttonTextColor: \"#fffffe\",\n      contentBackgroundColor: \"#fffffe\",\n      ctaHref: \"https://example.com\",\n      ctaLabel: \"Discover now\",\n      description:\n        \"Celebrating creativity, community, and culture in every edition. Bob Cut brings stories to life through design and narrative — a modern take on the timeless power of print.\",\n      eyebrow: \"Independent Publishing\",\n      heading: \"Bob Cut\",\n      imageAlt: \"Independent publishing photography\",\n      imageBackgroundColor: \"#030712\",\n      imageSrc: emailAsset(`hero/split-slanted-bg.jpg`),\n      logoAlt: \"emailcn\",\n      logoHref: \"https://example.com\",\n      logoSrc: emailAsset(`emailcn-logo-light.png`),\n      pageBackgroundColor: \"#f1f5f9\",\n      subheading: \"January Edition\",\n      textColor: \"#030712\",\n      variant:\n        \"left-slanted-down\" as SlantedSplitHero_HeroWithSlantedSplitVariant,\n    },\n    props\n  );\n  const isLeft = variant.startsWith(\"left-\");\n  const slantsDown = variant.endsWith(\"-down\");\n  const logo = (\n    <Section style={{ textAlign: \"center\" }}>\n      <Link href={logoHref}>\n        <Img\n          alt={logoAlt}\n          src={logoSrc}\n          style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n          width=\"165\"\n        />\n      </Link>\n    </Section>\n  );\n  const imageCore = (\n    <Section width=\"100%\">\n      <Fragment>\n        <Row>\n          <Column\n            aria-label={imageAlt || undefined}\n            role={imageAlt ? \"img\" : undefined}\n            style={{\n              backgroundColor: imageBackgroundColor,\n              backgroundImage: `url(${imageSrc})`,\n              backgroundPosition: \"center\",\n              backgroundRepeat: \"no-repeat\",\n              backgroundSize: \"cover\",\n            }}\n          >\n            <Section style={{ tableLayout: \"fixed\" }} width=\"100%\">\n              <Fragment>\n                <Row>\n                  {(() => {\n                    if (isLeft) {\n                      return (\n                        <>\n                          <Column\n                            style={{\n                              verticalAlign: slantsDown ? \"top\" : \"bottom\",\n                            }}\n                          >\n                            <Section\n                              className=\"hero-slanted-split-image-core\"\n                              style={{ width: \"256px\" }}\n                            >\n                              <Fragment>\n                                <Row>\n                                  <Column>\n                                    {slantsDown ? (\n                                      <>\n                                        <Section style={{ lineHeight: \"44px\" }}>\n                                          &zwj;\n                                        </Section>\n                                        {logo}\n                                      </>\n                                    ) : (\n                                      <>\n                                        {logo}\n                                        <Section style={{ lineHeight: \"44px\" }}>\n                                          &zwj;\n                                        </Section>\n                                      </>\n                                    )}\n                                  </Column>\n                                </Row>\n                              </Fragment>\n                            </Section>\n                          </Column>\n                          <Column\n                            className=\"hero-slanted-split-slant-cell\"\n                            style={{ position: \"relative\", width: \"120px\" }}\n                          >\n                            <Section\n                              className=\"hero-slanted-split-triangle\"\n                              style={{\n                                borderBottom: slantsDown\n                                  ? `600px solid ${contentBackgroundColor}`\n                                  : undefined,\n                                borderLeft: \"120px solid transparent\",\n                                borderTop: slantsDown\n                                  ? undefined\n                                  : `600px solid ${contentBackgroundColor}`,\n                                height: 0,\n                                width: 0,\n                              }}\n                            />\n                          </Column>\n                        </>\n                      );\n                    }\n                    return (\n                      <>\n                        <Column\n                          className=\"hero-slanted-split-slant-cell\"\n                          style={{ position: \"relative\", width: 0 }}\n                        >\n                          <Section\n                            className=\"hero-slanted-split-triangle\"\n                            style={{\n                              borderLeft: slantsDown\n                                ? `120px solid ${contentBackgroundColor}`\n                                : undefined,\n                              borderRight: slantsDown\n                                ? undefined\n                                : \"120px solid transparent\",\n                              borderTop: slantsDown\n                                ? \"600px solid transparent\"\n                                : `600px solid ${contentBackgroundColor}`,\n                              height: 0,\n                              left: \"-1px\",\n                              position: \"relative\",\n                              width: 0,\n                            }}\n                          />\n                        </Column>\n                        <Column\n                          style={{\n                            verticalAlign: slantsDown ? \"top\" : \"bottom\",\n                          }}\n                        >\n                          <Section\n                            className=\"hero-slanted-split-image-core\"\n                            style={{ width: \"256px\" }}\n                          >\n                            <Fragment>\n                              <Row>\n                                <Column>\n                                  {slantsDown ? (\n                                    <>\n                                      <Section style={{ lineHeight: \"44px\" }}>\n                                        &zwj;\n                                      </Section>\n                                      {logo}\n                                    </>\n                                  ) : (\n                                    <>\n                                      {logo}\n                                      <Section style={{ lineHeight: \"44px\" }}>\n                                        &zwj;\n                                      </Section>\n                                    </>\n                                  )}\n                                </Column>\n                              </Row>\n                            </Fragment>\n                          </Section>\n                        </Column>\n                      </>\n                    );\n                  })()}\n                </Row>\n              </Fragment>\n            </Section>\n          </Column>\n        </Row>\n      </Fragment>\n    </Section>\n  );\n  const copy = (\n    <>\n      <Text\n        style={{\n          color: textColor,\n          fontFamily: SlantedSplitHero_fontFamily,\n          fontSize: \"16px\",\n          fontWeight: 200,\n          lineHeight: \"24px\",\n          margin: 0,\n        }}\n      >\n        {eyebrow}\n      </Text>\n      <Heading\n        style={{\n          color: textColor,\n          fontFamily: SlantedSplitHero_fontFamily,\n          fontSize: \"48px\",\n          fontWeight: 500,\n          margin: 0,\n        }}\n        as=\"h1\"\n      >\n        {heading}\n      </Heading>\n      <Text\n        style={{\n          color: textColor,\n          fontFamily: SlantedSplitHero_fontFamily,\n          fontSize: \"18px\",\n          lineHeight: \"28px\",\n          margin: 0,\n        }}\n      >\n        {subheading}\n      </Text>\n      <Section style={{ lineHeight: \"44px\" }}>&zwj;</Section>\n      <Text\n        style={{\n          color: textColor,\n          fontFamily: SlantedSplitHero_fontFamily,\n          fontSize: \"16px\",\n          fontWeight: 300,\n          lineHeight: \"24px\",\n          margin: 0,\n        }}\n      >\n        {description}\n      </Text>\n      <Section style={{ lineHeight: \"24px\" }}>&zwj;</Section>\n      {ctaLabel && ctaHref ? (\n        <Link\n          className=\"hero-slanted-split-cta\"\n          href={ctaHref}\n          style={{\n            backgroundColor: buttonBackgroundColor,\n            borderRadius: \"8px\",\n            color: buttonTextColor,\n            display: \"inline-block\",\n            fontFamily: SlantedSplitHero_fontFamily,\n            fontSize: \"16px\",\n            fontWeight: 500,\n            lineHeight: 1,\n            padding: \"14px 20px\",\n            textDecoration: \"none\",\n          }}\n        >\n          <span style={{ marginRight: \"8px\" }}>{ctaLabel}</span>\n          <Img\n            alt=\"\"\n            src={emailAsset(`icon-arrow-right.png`)}\n            style={{\n              display: \"inline-block\",\n              maxWidth: \"100%\",\n              verticalAlign: \"baseline\",\n            }}\n            width=\"12\"\n          />\n        </Link>\n      ) : null}\n    </>\n  );\n  const contentCell = isLeft ? (\n    <Column\n      className=\"hero-slanted-split-stack-left hero-slanted-split-content-left\"\n      style={{\n        backgroundColor: contentBackgroundColor,\n        padding: \"44px 44px 44px 24px\",\n        textAlign: \"left\",\n      }}\n    >\n      {copy}\n    </Column>\n  ) : (\n    <Column\n      className=\"hero-slanted-split-content-right\"\n      style={{\n        backgroundColor: contentBackgroundColor,\n        padding: \"44px 24px 44px 44px\",\n        textAlign: \"left\",\n      }}\n    >\n      <Section className=\"hero-slanted-split-content-inner-right\">\n        {copy}\n      </Section>\n    </Column>\n  );\n  const imageCell = (\n    <Column\n      className={\n        isLeft\n          ? \"hero-slanted-split-stack-left hero-slanted-split-image-cell\"\n          : \"hero-slanted-split-image-right hero-slanted-split-image-cell\"\n      }\n      style={{ width: \"256px\" }}\n    >\n      {imageCore}\n    </Column>\n  );\n  return (\n    <Section style={{ backgroundColor: pageBackgroundColor }} width=\"100%\">\n      <Fragment>\n        <Row>\n          <Column>&zwj;</Column>\n          <Column style={{ maxWidth: \"100%\", width: \"600px\" }}>\n            <Section width=\"100%\">\n              <Fragment>\n                <Row>\n                  {isLeft ? (\n                    <>\n                      {imageCell}\n                      {contentCell}\n                    </>\n                  ) : (\n                    <>\n                      {contentCell}\n                      {imageCell}\n                    </>\n                  )}\n                </Row>\n              </Fragment>\n            </Section>\n          </Column>\n          <Column>&zwj;</Column>\n        </Row>\n      </Fragment>\n    </Section>\n  );\n};\n\nconst SlantedSplitHero_HeroWithSlantedSplit = ({\n  pageBackgroundColor = \"#f1f5f9\",\n  theme = defaultTheme,\n  variant = \"left-slanted-down\",\n  ...props\n}: SlantedSplitHero_HeroWithSlantedSplitProps) => (\n  <Html>\n    <EmailHead>\n      <DefaultFonts />\n      <style\n        dangerouslySetInnerHTML={{ __html: SlantedSplitHero_responsiveStyles }}\n      />\n    </EmailHead>\n    <Preview>{props.heading ?? \"Bob Cut\"}</Preview>\n    <Tailwind config={createEmailTailwindConfig(theme)}>\n      <Body\n        style={{\n          backgroundColor: pageBackgroundColor,\n          fontFamily: SlantedSplitHero_fontFamily,\n        }}\n        className=\"m-0\"\n      >\n        <Container className=\"mx-auto max-w-[600px] w-[600px]\">\n          <SlantedSplitHero_HeroWithSlantedSplitSection\n            {...props}\n            pageBackgroundColor={pageBackgroundColor}\n            variant={variant}\n          />\n        </Container>\n      </Body>\n    </Tailwind>\n  </Html>\n);\n\nSlantedSplitHero_HeroWithSlantedSplit.PreviewProps = {\n  theme: defaultTheme,\n  variant: \"left-slanted-down\",\n} satisfies SlantedSplitHero_HeroWithSlantedSplitProps;\n\nconst __SlantedSplitHero = SlantedSplitHero_HeroWithSlantedSplit;\n\nexport interface HeroContent {\n  eyebrow?: string;\n  heading?: string;\n  emphasis?: string;\n  subheading?: string;\n  description?: string;\n  price?: string;\n  actions?: {\n    href: string;\n    label: string;\n  }[];\n}\n\nexport interface HeroImage {\n  src: string;\n  alt?: string;\n}\n\nexport interface HeroBrand {\n  logo: HeroImage;\n  href?: string;\n}\n\nexport interface SplitHeroProps {\n  theme?: Parameters<typeof __ContainedSplitHero>[0][\"theme\"];\n  content?: HeroContent;\n  images?: HeroImage[];\n  brand?: HeroBrand;\n  treatment?: \"contained\" | \"full-bleed\" | \"overlay\" | \"slanted\";\n  imagePosition?: \"left\" | \"right\";\n  slant?: \"up\" | \"down\";\n  overlayContent?: boolean;\n  variant?:\n    | Parameters<typeof __OverlaySplitHero>[0][\"variant\"]\n    | Parameters<typeof __ContainedSplitHero>[0][\"variant\"]\n    | Parameters<typeof __FullBleedSplitHero>[0][\"variant\"]\n    | Parameters<typeof __OverlayContentHero>[0][\"variant\"]\n    | Parameters<typeof __SlantedSplitHero>[0][\"variant\"];\n}\n\nconst heroContentValues = (content: HeroContent | undefined) => {\n  const {\n    actions,\n    description,\n    emphasis,\n    eyebrow,\n    heading,\n    price,\n    subheading,\n  } = content ?? {};\n  const [action] = actions ?? [];\n  return {\n    ctaHref: action?.href,\n    ctaLabel: action?.label,\n    description,\n    emphasis,\n    eyebrow,\n    heading,\n    price,\n    subheading,\n  };\n};\n\nconst heroImageValues = (image: HeroImage | undefined) => ({\n  alt: image?.alt,\n  src: image?.src,\n});\n\nconst heroBrandValues = (brand: HeroBrand | undefined) => {\n  const { href, logo } = brand ?? {};\n  return {\n    logoAlt: logo?.alt,\n    logoHref: href,\n    logoSrc: logo?.src,\n  };\n};\n\nconst splitHeroImageValues = (images: HeroImage[] | undefined) => {\n  const [primaryImage, secondaryImage] = images ?? [];\n\n  return {\n    count: images?.length ?? 0,\n    primary: heroImageValues(primaryImage),\n    secondary: heroImageValues(secondaryImage),\n  };\n};\n\nconst splitHeroVariant = ({\n  imageCount,\n  imagePosition,\n  overlayContent,\n  slant,\n  treatment,\n  variant,\n}: Required<\n  Pick<\n    SplitHeroProps,\n    \"imagePosition\" | \"overlayContent\" | \"slant\" | \"treatment\"\n  >\n> & {\n  imageCount: number;\n  variant: SplitHeroProps[\"variant\"];\n}) => {\n  if (variant) {\n    return variant;\n  }\n  if (overlayContent) {\n    return treatment === \"slanted\" ? `slanted-${imagePosition}` : \"default\";\n  }\n  if (treatment === \"overlay\") {\n    return `overlay-${imagePosition}`;\n  }\n  if (treatment === \"full-bleed\") {\n    return `image-${imagePosition}`;\n  }\n  if (treatment === \"slanted\") {\n    return `${imagePosition}-slanted-${slant}`;\n  }\n  return imageCount > 1\n    ? `square-images-${imagePosition}`\n    : `single-image-${imagePosition}`;\n};\n\nexport const SplitHero = ({\n  theme,\n  content,\n  images,\n  brand,\n  treatment = \"contained\",\n  imagePosition = \"right\",\n  slant = \"down\",\n  overlayContent = false,\n  variant: variantOverride,\n}: SplitHeroProps) => {\n  const contentValues = heroContentValues(content);\n  const imageValues = splitHeroImageValues(images);\n  const brandValues = heroBrandValues(brand);\n  const variant = splitHeroVariant({\n    imageCount: imageValues.count,\n    imagePosition,\n    overlayContent,\n    slant,\n    treatment,\n    variant: variantOverride,\n  });\n  const contentProps = {\n    ctaHref: contentValues.ctaHref,\n    ctaLabel: contentValues.ctaLabel,\n    description: contentValues.description,\n    eyebrow: contentValues.eyebrow,\n    heading: contentValues.heading,\n    subheading: contentValues.subheading,\n    theme,\n  };\n  if (overlayContent) {\n    return (\n      <__OverlayContentHero\n        headingAccent={contentValues.emphasis}\n        imageAlt={imageValues.primary.alt}\n        imageSrc={imageValues.primary.src}\n        logoAlt={brandValues.logoAlt}\n        logoHref={brandValues.logoHref}\n        logoSrc={brandValues.logoSrc}\n        variant={\n          variant as Parameters<typeof __OverlayContentHero>[0][\"variant\"]\n        }\n        {...contentProps}\n      />\n    );\n  }\n  if (treatment === \"overlay\") {\n    return (\n      <__OverlaySplitHero\n        imageAlt={imageValues.primary.alt}\n        imageSrc={imageValues.primary.src}\n        logoAlt={brandValues.logoAlt}\n        logoHref={brandValues.logoHref}\n        logoSrc={brandValues.logoSrc}\n        variant={variant as Parameters<typeof __OverlaySplitHero>[0][\"variant\"]}\n        {...contentProps}\n      />\n    );\n  }\n  if (treatment === \"full-bleed\") {\n    return (\n      <__FullBleedSplitHero\n        imageAlt={imageValues.primary.alt}\n        imageSrc={imageValues.primary.src}\n        logoAlt={brandValues.logoAlt}\n        logoSrc={brandValues.logoSrc}\n        price={contentValues.price}\n        variant={\n          variant as Parameters<typeof __FullBleedSplitHero>[0][\"variant\"]\n        }\n        {...contentProps}\n      />\n    );\n  }\n  if (treatment === \"slanted\") {\n    return (\n      <__SlantedSplitHero\n        imageAlt={imageValues.primary.alt}\n        imageSrc={imageValues.primary.src}\n        logoAlt={brandValues.logoAlt}\n        logoHref={brandValues.logoHref}\n        logoSrc={brandValues.logoSrc}\n        variant={variant as Parameters<typeof __SlantedSplitHero>[0][\"variant\"]}\n        {...contentProps}\n      />\n    );\n  }\n  return (\n    <__ContainedSplitHero\n      logoAlt={brandValues.logoAlt}\n      logoSrc={brandValues.logoSrc}\n      price={contentValues.price}\n      primaryImageAlt={imageValues.primary.alt}\n      primaryImageSrc={imageValues.primary.src}\n      secondaryImageAlt={imageValues.secondary.alt}\n      secondaryImageSrc={imageValues.secondary.src}\n      variant={variant as Parameters<typeof __ContainedSplitHero>[0][\"variant\"]}\n      {...contentProps}\n    />\n  );\n};\n\nexport const SplitHeroSection = __SplitHeroSection;\n\nSplitHero.PreviewProps = {\n  imagePosition: \"right\",\n  overlayContent: false,\n  slant: \"down\",\n  treatment: \"contained\",\n} satisfies SplitHeroProps;\n",
      "type": "registry:component",
      "target": "components/email/split-hero.tsx"
    },
    {
      "path": "registry/email-assets.ts",
      "content": "const ASSET_ORIGIN = \"https://www.emailcn.run\";\nconst ICONS8_ORIGIN = \"https://img.icons8.com\";\nconst UNSPLASH_ORIGIN = \"https://images.unsplash.com\";\n\nconst portraitIds = [\n  \"photo-1500648767791-00dcc994a43e\",\n  \"photo-1507003211169-0a1dd7228f2d\",\n  \"photo-1494790108377-be9c29b29330\",\n  \"photo-1438761681033-6461ffad8d80\",\n  \"photo-1534528741775-53994a69daeb\",\n  \"photo-1506794778202-cad84cf45f1c\",\n] as const;\n\nconst productIds = [\n  \"photo-1521572163474-6864f9cf17ab\",\n  \"photo-1503341504253-dff4815485f1\",\n  \"photo-1576566588028-4147f3842f27\",\n  \"photo-1562157873-818bc0726f68\",\n] as const;\n\ntype Dimensions = readonly [width: number, height: number];\n\nconst dimensionRules = [\n  [/^bento-grids\\/1-bento-(?:1|4)\\./i, [336, 272]],\n  [/^bento-grids\\/1-bento-(?:2|3)\\./i, [720, 272]],\n  [/^bento-grids\\/2-bento-1\\./i, [336, 232]],\n  [/^bento-grids\\/2-bento-(?:2|7)\\./i, [720, 352]],\n  [/^bento-grids\\/2-bento-3\\./i, [720, 344]],\n  [/^bento-grids\\/2-bento-4\\./i, [336, 224]],\n  [/^bento-grids\\/2-bento-(?:5|6)\\./i, [336, 408]],\n  [/^bento-grids\\/3-bento-lg-\\d-pad\\./i, [304, 576]],\n  [/^bento-grids\\/3-bento-lg-\\d\\./i, [336, 576]],\n  [/^bento-grids\\/3-bento-sm-\\d\\./i, [336, 336]],\n  [/^bento-grids\\/4-bento-lg-(?:1|2)\\./i, [496, 440]],\n  [/^bento-grids\\/4-bento-lg-3\\./i, [688, 242]],\n  [/^bento-grids\\/4-bento-lg-4\\./i, [656, 242]],\n  [/^bento-grids\\/4-bento-sm-[1-4]\\./i, [456, 363]],\n  [/^bento-grids\\/4-bento-sm-5\\./i, [408, 363]],\n  [/^bento-grids\\/bento-1\\./i, [720, 376]],\n  [/^bento-grids\\/bento-[2-5]\\./i, [528, 376]],\n  [/^category-previews\\/landscape-/i, [508, 376]],\n  [/^category-previews\\/portrait-/i, [376, 377]],\n  [/^coupons\\/(?:bg-image-[1-3]|pattern)\\./i, [800, 500]],\n  [/^coupons\\/bg-image-[4-6]\\./i, [1200, 1200]],\n  [/^cta\\/cta-bg-1\\./i, [1200, 772]],\n  [/^cta\\/cta-bg-2\\./i, [1200, 760]],\n  [/^cta\\/cta-bg-3\\./i, [1104, 696]],\n  [/^cta\\/cta-bg-glow\\./i, [1200, 840]],\n  [/^cta\\/cta-collage-(?:1|4)\\./i, [248, 456]],\n  [/^cta\\/(?:cta-collage-(?:2|3)|cta-outwear-\\d)\\./i, [280, 456]],\n  [/^cta\\/cta-split-avatars-\\d\\./i, [280, 338]],\n  [/^cta\\/cta-with-image-\\d\\./i, [944, 606]],\n  [/^cta\\/strip-cut-\\d\\./i, [232, 163]],\n  [/^cta\\/strip-\\d\\./i, [232, 232]],\n  [/^feature\\/feature-1\\./i, [564, 564]],\n  [/^feature\\/feature-2-/i, [432, 432]],\n  [/^feature\\/feature-3-lg-/i, [646, 818]],\n  [/^feature\\/feature-3-sm-/i, [615, 615]],\n  [/^feature\\/stripes-bg-(?:1|2)\\./i, [1035, 1227]],\n  [/^feature\\/stripes-bg-3\\./i, [449, 1227]],\n  [/^feature\\/stripes-bg-(?:4|5)\\./i, [449, 840]],\n  [/^footers\\/bg-image-(?:1|2)\\./i, [1200, 881]],\n  [/^footers\\/bg-image-3\\./i, [1104, 881]],\n  [/^hero\\/aligned-overlay-bg-\\d\\./i, [702, 1200]],\n  [/^hero\\/block-overlay-bg\\./i, [2000, 3000]],\n  [/^hero\\/block-with-bleed-bg\\./i, [2000, 2922]],\n  [/^hero\\/mosaic-\\d\\./i, [240, 240]],\n  [/^hero\\/overlapped-content-bg-(?:1|3)\\./i, [1200, 1258]],\n  [/^hero\\/overlapped-content-bg-2\\./i, [1200, 1374]],\n  [/^hero\\/overlapped-content-bg-4\\./i, [1200, 1410]],\n  [/^hero\\/overlapped-image-\\d-bg\\./i, [2000, 3000]],\n  [/^hero\\/overlapped-image-bg\\./i, [2000, 2995]],\n  [/^hero\\/overlapped-image-2\\./i, [911, 610]],\n  [/^hero\\/overlapped-image-3\\./i, [911, 606]],\n  [/^hero\\/overlapped-image\\./i, [911, 657]],\n  [/^hero\\/(?:overlay-gradient-bg|overlayed-split-bg)\\./i, [2000, 3000]],\n  [/^hero\\/overlayed\\/hero-overlayed-bg\\./i, [1200, 1490]],\n  [/^hero\\/split-contained-bg\\./i, [488, 1104]],\n  [/^hero\\/split-contained-landscape-/i, [488, 376]],\n  [/^hero\\/split-contained-portrait-/i, [488, 680]],\n  [/^hero\\/split-contained-square-/i, [488, 550]],\n  [/^hero\\/split-full-bleed-bg\\./i, [2000, 2666]],\n  [/^hero\\/split-slanted-bg\\./i, [2002, 2534]],\n  [/^image-grids\\/2-col-landscape/i, [528, 372]],\n  [/^image-grids\\/2-col-portrait/i, [528, 792]],\n  [/^image-grids\\/2-col-square/i, [528, 528]],\n  [/^image-grids\\/3-col-masonry-stack/i, [503, 558]],\n  [/^image-grids\\/3-col-masonry/i, [720, 792]],\n  [/^image-grids\\/3-col-portrait/i, [504, 753]],\n  [/^image-grids\\/3-col-square/i, [504, 504]],\n  [/^image-grids\\/full-width\\./i, [1104, 720]],\n  [/^image-grids\\/full-width-\\d\\./i, [1104, 792]],\n  [/^product-detail\\/stacked-\\d\\./i, [508, 358]],\n  [/^product-detail\\/rating-below\\./i, [508, 508]],\n  [/^product-detail\\/single-landscape\\./i, [1104, 776]],\n  [/^product-detail\\/single-portrait\\./i, [508, 764]],\n  [/^product-detail\\/single-portrait-bleed\\./i, [532, 764]],\n  [/^product-detail\\/two-images-\\d\\./i, [528, 776]],\n  [/^product-detail\\/three-images-1\\./i, [528, 776]],\n  [/^product-detail\\/three-images-(?:2|3)\\./i, [528, 364]],\n  [/^product-detail\\/four-images-(?:1|4)\\./i, [528, 488]],\n  [/^product-detail\\/four-images-(?:2|3)\\./i, [528, 240]],\n  [/^stats\\/overlay-1\\./i, [1572, 2268]],\n  [/^stats\\/overlay-2\\./i, [1572, 2716]],\n  [/^stats\\/overlay-(?:3|4)\\./i, [1572, 3256]],\n  [/^stats\\/single-stat\\./i, [1035, 1032]],\n  [/^teams\\/hero\\./i, [1104, 776]],\n  [/^teams\\/member-\\d+-lg\\./i, [528, 376]],\n  [/^teams\\/member-\\d+-md\\./i, [328, 328]],\n  [/^teams\\/member-\\d+\\./i, [256, 256]],\n  [/^timelines\\/cards\\./i, [1072, 600]],\n  [/^testimonials\\/quote\\./i, [72, 62]],\n  [/^testimonials\\/user-\\d+\\./i, [256, 256]],\n  [/^feature\\/logo-north-face\\./i, [278, 128]],\n  [/^feature\\/logo-stripes-1\\./i, [390, 84]],\n  [/^feature\\/logo-stripes-2\\./i, [423, 72]],\n  [/^(?:reviews|testimonials)\\/logo-accentic(?:-light)?\\./i, [423, 72]],\n  [/^reviews\\/logo-amada\\./i, [411, 84]],\n  [/^(?:reviews|testimonials)\\/logo-monarch\\./i, [290, 64]],\n  [/^logos\\/logo-apple-pay\\./i, [180, 72]],\n  [/^logos\\/logo-google-pay\\./i, [177, 72]],\n  [/^logos\\/logo-klarna\\./i, [210, 48]],\n  [/^logos\\/logo-mastercard\\./i, [120, 72]],\n  [/^logos\\/logo-mock-1\\./i, [334, 72]],\n  [/^logos\\/logo-mock-2\\./i, [213, 36]],\n  [/^logos\\/logo-mock-3\\./i, [234, 48]],\n  [/^logos\\/logo-stripe\\./i, [171, 72]],\n  [/^logos\\/logo-visa\\./i, [150, 48]],\n  [/^order-summary\\/logo-fedex\\./i, [156, 48]],\n  [/^emailcn-logo(?:-light)?\\./i, [331, 48]],\n  [/^emailcn-insignia-mono(?:-light)?\\./i, [131, 96]],\n  [/^maizzle-insignia(?:-light)?-lg\\./i, [395, 289]],\n  [/^maizzle-insignia(?:-light)?\\./i, [176, 129]],\n] satisfies readonly (readonly [RegExp, Dimensions])[];\n\nconst socialIconSlugs = {\n  discord: \"discord-logo\",\n  facebook: \"facebook-new\",\n  github: \"github\",\n  instagram: \"instagram-new\",\n  linkedin: \"linkedin\",\n  slack: \"slack-new\",\n  x: \"twitterx--v1\",\n  youtube: \"youtube-play\",\n} as const;\n\nconst brandIconSlugs = [\n  [/(?:btc|bitcoin)/i, \"bitcoin--v1\"],\n  [/(?:eth|ethereum)/i, \"ethereum\"],\n] as const;\n\nconst hashString = (value: string) => {\n  let hash = 7;\n\n  for (const character of value) {\n    hash = (hash * 31 + (character.codePointAt(0) ?? 0)) % 2_147_483_647;\n  }\n\n  return hash;\n};\n\nconst getDimensions = (path: string) => {\n  const matchedRule = dimensionRules.find(([pattern]) => pattern.test(path));\n  if (matchedRule) {\n    return matchedRule[1];\n  }\n  if (/(?:avatar|user|headshot)/i.test(path)) {\n    return [160, 160] as const;\n  }\n  if (/(?:logo|insignia)/i.test(path)) {\n    return [320, 96] as const;\n  }\n  if (/(?:badge-app|badge-google)/i.test(path)) {\n    return [260, 80] as const;\n  }\n  if (/(?:icon|btc|eth)/i.test(path)) {\n    return [64, 64] as const;\n  }\n  if (/(?:portrait|member|team)/i.test(path)) {\n    return [600, 800] as const;\n  }\n  if (/(?:square|product|shopping-cart)/i.test(path)) {\n    return [700, 700] as const;\n  }\n  if (/(?:hero|footer|background|bg-|overlay|full-width)/i.test(path)) {\n    return [1200, 700] as const;\n  }\n  if (/(?:strip|landscape|bento|category-preview)/i.test(path)) {\n    return [800, 520] as const;\n  }\n\n  return [800, 600] as const;\n};\n\nconst getLabel = (path: string) => {\n  if (/insignia/i.test(path)) {\n    return \"EC\";\n  }\n  if (/(?:emailcn|maizzle)/i.test(path)) {\n    return \"emailcn\";\n  }\n\n  const fileName = path.split(\"/\").at(-1) ?? \"emailcn\";\n\n  return fileName\n    .replace(/\\.[^.]+$/, \"\")\n    .replace(/^(?:logo|badge|icon)-/, \"\")\n    .replaceAll(\"-\", \" \")\n    .replaceAll(/\\b\\w/g, (character) => character.toUpperCase());\n};\n\nconst getSeed = (path: string) =>\n  `emailcn-${path\n    .replace(/\\.[^.]+$/, \"\")\n    .replaceAll(/[^a-z0-9]+/gi, \"-\")\n    .replaceAll(/^-|-$/g, \"\")\n    .toLowerCase()}`;\n\nconst getIndexedAsset = (path: string, assets: readonly string[]) => {\n  const explicitIndex = path.match(\n    /(?:member|avatar|product-list|shopping-cart)-(\\d+)/i\n  )?.[1];\n  const index = explicitIndex\n    ? Number.parseInt(explicitIndex, 10) - 1\n    : hashString(path);\n\n  return assets[((index % assets.length) + assets.length) % assets.length];\n};\n\nconst getUnsplashAsset = (id: string, width: number, height: number) =>\n  `${UNSPLASH_ORIGIN}/${id}?auto=format&fit=crop&w=${width}&h=${height}&q=80`;\n\nconst getIcons8Asset = (\n  slug: string,\n  {\n    color,\n    style = \"ios-filled\",\n  }: {\n    color?: string;\n    style?: \"color\" | \"ios\" | \"ios-filled\";\n  } = {}\n) =>\n  color\n    ? `${ICONS8_ORIGIN}/${style}/50/${color}/${slug}.png`\n    : `${ICONS8_ORIGIN}/${style}/50/${slug}.png`;\n\nconst getStoreBadgeAsset = (path: string) => {\n  if (/badge-app-store/i.test(path)) {\n    return \"https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg\";\n  }\n  if (/badge-google-play/i.test(path)) {\n    return \"https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png\";\n  }\n};\n\nconst getSocialIconAsset = (path: string) => {\n  const isLight = /(?:-light|check-white)/i.test(path);\n  const foreground = isLight ? \"FFFFFF\" : \"111827\";\n\n  for (const [name, slug] of Object.entries(socialIconSlugs)) {\n    if (new RegExp(`(?:^|[-/])${name}(?:[-.]|$)`, \"i\").test(path)) {\n      return getIcons8Asset(slug, { color: foreground });\n    }\n  }\n};\n\nconst getUtilityIconAsset = (path: string) => {\n  const isLight = /(?:-light|check-white)/i.test(path);\n  const foreground = isLight ? \"FFFFFF\" : \"111827\";\n\n  if (/star-half/i.test(path)) {\n    return getIcons8Asset(\"star-half-empty\", { color: \"374151\" });\n  }\n  if (/star-solid/i.test(path)) {\n    return getIcons8Asset(\"star--v1\", { color: \"374151\" });\n  }\n  if (/edit/i.test(path)) {\n    return getIcons8Asset(\"edit--v1\", {\n      color: \"4F46E5\",\n      style: \"ios\",\n    });\n  }\n  if (/arrow-right/i.test(path)) {\n    const color = /(?:brand|indigo)/i.test(path) ? \"4F46E5\" : \"FFFFFF\";\n\n    return getIcons8Asset(\"long-arrow-right--v1\", {\n      color,\n      style: \"ios\",\n    });\n  }\n  if (/chevron-right/i.test(path)) {\n    return getIcons8Asset(\"chevron-right\", {\n      color: \"4F46E5\",\n      style: \"ios\",\n    });\n  }\n  if (/check/i.test(path)) {\n    return getIcons8Asset(\"checkmark--v1\", { color: foreground });\n  }\n};\n\nconst getBrandIconAsset = (path: string) => {\n  const match = brandIconSlugs.find(([pattern]) => pattern.test(path));\n\n  return match\n    ? getIcons8Asset(match[1], {\n        style: \"color\",\n      })\n    : undefined;\n};\n\nconst getWordmarkAsset = (path: string, [width, height]: Dimensions) => {\n  const isLight = /light/i.test(path);\n  const background = isLight ? \"030712\" : \"FFFFFF\";\n  const foreground = isLight ? \"FFFFFF\" : \"111827\";\n\n  return `https://placehold.co/${width}x${height}/${background}/${foreground}.png?text=${encodeURIComponent(\n    getLabel(path)\n  )}`;\n};\n\nconst getIconAsset = (path: string) =>\n  getStoreBadgeAsset(path) ??\n  getSocialIconAsset(path) ??\n  getUtilityIconAsset(path) ??\n  getBrandIconAsset(path);\n\nexport const emailAsset = (path: string) => {\n  const normalizedPath = path.replace(/^\\/+/, \"\");\n\n  if (\n    normalizedPath === \"bento-grids/trend.png\" ||\n    normalizedPath === \"bento-grids/trend-sm.png\"\n  ) {\n    return `${ASSET_ORIGIN}/email-assets/${normalizedPath}`;\n  }\n\n  const iconAsset = getIconAsset(normalizedPath);\n  if (iconAsset) {\n    return iconAsset;\n  }\n\n  const seed = getSeed(normalizedPath);\n  const [width, height] = getDimensions(normalizedPath);\n\n  if (/teams\\/hero/i.test(normalizedPath)) {\n    return getUnsplashAsset(\"photo-1521737711867-e3b97375f902\", width, height);\n  }\n\n  if (/(?:avatar|user|headshot|member|team)/i.test(normalizedPath)) {\n    return getUnsplashAsset(\n      getIndexedAsset(normalizedPath, portraitIds),\n      width,\n      height\n    );\n  }\n\n  if (/products\\/shoe/i.test(normalizedPath)) {\n    return getUnsplashAsset(\"photo-1542291026-7eec264c27ff\", width, height);\n  }\n\n  if (/products\\/phone/i.test(normalizedPath)) {\n    return getUnsplashAsset(\"photo-1511707171634-5f897ff02aa9\", width, height);\n  }\n\n  if (\n    /(?:category-previews|product-detail|product-lists|products\\/product|shopping-cart)/i.test(\n      normalizedPath\n    )\n  ) {\n    return getUnsplashAsset(\n      getIndexedAsset(normalizedPath, productIds),\n      width,\n      height\n    );\n  }\n\n  if (/(?:trend|chart)/i.test(normalizedPath)) {\n    return `${ASSET_ORIGIN}/email-assets/bento-grids/trend.png`;\n  }\n\n  if (/(?:emailcn|maizzle|logo|insignia)/i.test(normalizedPath)) {\n    return getWordmarkAsset(normalizedPath, [width, height]);\n  }\n\n  return `https://picsum.photos/seed/${encodeURIComponent(\n    seed\n  )}/${width}/${height}.jpg`;\n};\n",
      "type": "registry:file",
      "target": "components/email/email-assets.ts"
    }
  ],
  "categories": [
    "email-component"
  ],
  "type": "registry:component"
}