{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "react-email/navigation-footer",
  "title": "Navigation Footer",
  "description": "Navigation Footer 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/footers/navigation-footer.tsx",
      "content": "import { Fragment } from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n  Body,\n  Head as EmailHead,\n  Html,\n  Preview,\n  Section,\n  Row,\n  Column,\n  Link,\n  Text,\n  Img,\n  Tailwind,\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\ninterface CenteredFooter_CenteredFooterLink {\n  href: string;\n  label: string;\n}\n\ninterface CenteredFooter_CenteredFooterSocial extends CenteredFooter_CenteredFooterLink {\n  iconSrc: string;\n}\n\ninterface CenteredFooter_FooterCenteredWithMenuAndSocialsProps {\n  theme?: EmailTheme;\n  logoSrc?: string;\n  logoAlt?: string;\n  logoHref?: string;\n  links?: CenteredFooter_CenteredFooterLink[];\n  socials?: CenteredFooter_CenteredFooterSocial[];\n  unsubscribeHref?: string;\n  pageBackgroundColor?: string;\n  backgroundColor?: string;\n  textColor?: string;\n  mutedTextColor?: string;\n}\n\nconst CenteredFooter_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\n\nconst CenteredFooter_responsiveStyles =\n  \"@media only screen and (max-width: 599px) { .footer-centered-menu-break { display: none !important; } }\";\n\nconst CenteredFooter_defaults = {\n  backgroundColor: \"#fffffe\",\n  links: [\n    { href: \"https://example.com/about\", label: \"About us\" },\n    { href: \"https://example.com/shop\", label: \"Shop\" },\n    { href: \"https://example.com/faq\", label: \"FAQs\" },\n    { href: \"https://example.com/contact\", label: \"Contact us\" },\n  ],\n  logoAlt: \"Maizzle\",\n  logoHref: \"https://example.com\",\n  logoSrc: emailAsset(\"maizzle-insignia.png\"),\n  mutedTextColor: \"#d1d5db\",\n  pageBackgroundColor: \"#f1f5f9\",\n  socials: [\n    {\n      href: \"https://facebook.com\",\n      iconSrc: emailAsset(\"icon-facebook.png\"),\n      label: \"Facebook\",\n    },\n    {\n      href: \"https://github.com\",\n      iconSrc: emailAsset(\"icon-github.png\"),\n      label: \"GitHub\",\n    },\n    {\n      href: \"https://linkedin.com\",\n      iconSrc: emailAsset(\"icon-linkedin.png\"),\n      label: \"LinkedIn\",\n    },\n    {\n      href: \"https://youtube.com\",\n      iconSrc: emailAsset(\"icon-youtube.png\"),\n      label: \"YouTube\",\n    },\n    {\n      href: \"https://x.com\",\n      iconSrc: emailAsset(\"icon-x.png\"),\n      label: \"X\",\n    },\n  ],\n  textColor: \"#9ca3af\",\n  unsubscribeHref: \"https://example.com/unsub\",\n};\n\ntype CenteredFooter_SectionProps = Omit<\n  CenteredFooter_FooterCenteredWithMenuAndSocialsProps,\n  \"theme\"\n>;\n\ntype CenteredFooter_ResolvedProps = typeof CenteredFooter_defaults &\n  CenteredFooter_SectionProps;\n\nconst CenteredFooter_CenteredRow = ({ children }: { children: ReactNode }) => (\n  <Section align=\"center\" style={{ marginLeft: \"auto\", marginRight: \"auto\" }}>\n    <Fragment>\n      <Row>{children}</Row>\n    </Fragment>\n  </Section>\n);\n\nconst CenteredFooter_FooterCenteredWithMenuAndSocialsSection = (\n  props: CenteredFooter_SectionProps\n) => {\n  const resolved = resolveDefaultProps(\n    CenteredFooter_defaults,\n    props\n  ) as CenteredFooter_ResolvedProps;\n  return (\n    <Section\n      style={{ backgroundColor: resolved.pageBackgroundColor }}\n      width=\"100%\"\n    >\n      <Fragment>\n        <Row>\n          <Column>&zwj;</Column>\n          <Column\n            style={{\n              backgroundColor: resolved.backgroundColor,\n              maxWidth: \"100%\",\n              padding: \"44px 0 24px\",\n              width: \"600px\",\n            }}\n          >\n            <Section style={{ textAlign: \"center\" }}>\n              <Link href={resolved.logoHref}>\n                <Img\n                  alt={resolved.logoAlt}\n                  src={resolved.logoSrc}\n                  style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n                  width={55}\n                />\n              </Link>\n            </Section>\n            <Section style={{ lineHeight: \"64px\" }}>&zwj;</Section>\n            <CenteredFooter_CenteredRow>\n              {resolved.links.map((link, index) => (\n                <Column\n                  key={link.href}\n                  style={\n                    index === resolved.links.length - 1\n                      ? undefined\n                      : { paddingRight: \"24px\" }\n                  }\n                >\n                  <Link\n                    href={link.href}\n                    style={{\n                      color: resolved.textColor,\n                      fontFamily: CenteredFooter_fontFamily,\n                      fontSize: \"14px\",\n                      lineHeight: \"20px\",\n                      textDecoration: \"none\",\n                    }}\n                  >\n                    {link.label}\n                  </Link>\n                </Column>\n              ))}\n            </CenteredFooter_CenteredRow>\n            <Section style={{ lineHeight: \"36px\" }}>&zwj;</Section>\n            <CenteredFooter_CenteredRow>\n              {resolved.socials.map((social, index) => (\n                <Column\n                  key={social.href}\n                  style={\n                    index === resolved.socials.length - 1\n                      ? undefined\n                      : { paddingRight: \"24px\" }\n                  }\n                >\n                  <Link href={social.href}>\n                    <Img\n                      alt={social.label}\n                      src={social.iconSrc}\n                      style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n                      width={20}\n                    />\n                  </Link>\n                </Column>\n              ))}\n            </CenteredFooter_CenteredRow>\n            <Section style={{ lineHeight: \"64px\" }}>&zwj;</Section>\n            <Section width=\"100%\">\n              <Fragment>\n                <Row>\n                  <Column style={{ padding: \"0 24px\", textAlign: \"center\" }}>\n                    <Text\n                      style={{\n                        color: resolved.textColor,\n                        fontFamily: CenteredFooter_fontFamily,\n                        fontSize: \"16px\",\n                        lineHeight: \"24px\",\n                        margin: 0,\n                      }}\n                    >\n                      © 2026 emailcn\n                      <br /> emailcn&nbsp; | &nbsp;155 Bdv Saint Germain&nbsp; |\n                      &nbsp;75505 Paris\n                    </Text>\n                    <Section style={{ lineHeight: \"24px\" }}>&zwj;</Section>\n                    <Text\n                      style={{\n                        color: resolved.mutedTextColor,\n                        fontFamily: CenteredFooter_fontFamily,\n                        fontSize: \"16px\",\n                        lineHeight: \"24px\",\n                        margin: 0,\n                      }}\n                    >\n                      You're receiving this because you subscribed to updates.{\" \"}\n                      <br className=\"footer-centered-menu-break\" /> No longer\n                      want to receive emails?{\" \"}\n                      <Link\n                        href={resolved.unsubscribeHref}\n                        style={{\n                          color: resolved.mutedTextColor,\n                          textDecoration: \"underline\",\n                        }}\n                      >\n                        Unsubscribe\n                      </Link>\n                    </Text>\n                  </Column>\n                </Row>\n              </Fragment>\n            </Section>\n          </Column>\n          <Column>&zwj;</Column>\n        </Row>\n      </Fragment>\n    </Section>\n  );\n};\n\nconst CenteredFooter_FooterCenteredWithMenuAndSocials = ({\n  pageBackgroundColor = \"#f1f5f9\",\n  theme = defaultTheme,\n  ...props\n}: CenteredFooter_FooterCenteredWithMenuAndSocialsProps) => (\n  <Html>\n    <EmailHead>\n      <DefaultFonts />\n      <style\n        dangerouslySetInnerHTML={{ __html: CenteredFooter_responsiveStyles }}\n      />\n    </EmailHead>\n    <Preview>Footer centered with menu and socials</Preview>\n    <Tailwind config={createEmailTailwindConfig(theme)}>\n      <Body\n        style={{\n          backgroundColor: pageBackgroundColor,\n          fontFamily: CenteredFooter_fontFamily,\n        }}\n        className=\"m-0\"\n      >\n        <CenteredFooter_FooterCenteredWithMenuAndSocialsSection\n          {...props}\n          pageBackgroundColor={pageBackgroundColor}\n        />\n      </Body>\n    </Tailwind>\n  </Html>\n);\n\nCenteredFooter_FooterCenteredWithMenuAndSocials.PreviewProps = {\n  theme: defaultTheme,\n} satisfies CenteredFooter_FooterCenteredWithMenuAndSocialsProps;\n\nconst __CenteredFooter = CenteredFooter_FooterCenteredWithMenuAndSocials;\n\ntype DividerMenuFooter_FooterWith2ColumnMenuAndDividerVariant =\n  | \"left-logo\"\n  | \"right-logo\";\n\ninterface DividerMenuFooter_FooterWith2ColumnMenuAndDividerProps {\n  theme?: EmailTheme;\n  variant?: DividerMenuFooter_FooterWith2ColumnMenuAndDividerVariant;\n  logoSrc?: string;\n  logoAlt?: string;\n  logoHref?: string;\n  pageBackgroundColor?: string;\n  backgroundColor?: string;\n  dividerColor?: string;\n  textColor?: string;\n  headingColor?: string;\n  legalColor?: string;\n  unsubscribeHref?: string;\n}\n\nconst DividerMenuFooter_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\n\nconst DividerMenuFooter_responsiveStyles = [\n  \"@media only screen and (max-width: 599px) {\",\n  \"  .footer-divider-socials { float: none !important; margin-bottom: 44px !important; margin-left: 0 !important; }\",\n  \"  .footer-divider-legal { display: table-footer-group !important; }\",\n  \"  .footer-divider-social-cell { display: table-header-group !important; }\",\n  \"}\",\n].join(\"\\n\");\n\nconst DividerMenuFooter_quickLinks = [\n  [\"About us\", \"https://example.com/about\"],\n  [\"Shop\", \"https://example.com/shop\"],\n  [\"FAQs\", \"https://example.com/faq\"],\n  [\"Contact us\", \"https://example.com/contact\"],\n] as const;\n\nconst DividerMenuFooter_legalLinks = [\n  [\"Privacy Policy\", \"https://example.com/privacy\"],\n  [\"Terms of Service\", \"https://example.com/terms\"],\n  [\"Returns\", \"https://example.com/returns\"],\n] as const;\n\nconst DividerMenuFooter_socials = [\n  [\"Facebook\", \"https://facebook.com\", \"icon-facebook.png\"],\n  [\"GitHub\", \"https://github.com\", \"icon-github.png\"],\n  [\"LinkedIn\", \"https://linkedin.com\", \"icon-linkedin.png\"],\n  [\"YouTube\", \"https://youtube.com\", \"icon-youtube.png\"],\n  [\"X\", \"https://x.com\", \"icon-x.png\"],\n] as const;\n\nconst DividerMenuFooter_LinkColumn = ({\n  heading,\n  links,\n  headingColor,\n  textColor,\n}: {\n  heading: string;\n  links: readonly (readonly [string, string])[];\n  headingColor: string;\n  textColor: string;\n}) => (\n  <Column\n    style={{\n      paddingRight: heading === \"Quick Links\" ? \"64px\" : 0,\n      verticalAlign: \"top\",\n    }}\n  >\n    <Text\n      style={{\n        color: headingColor,\n        fontFamily: DividerMenuFooter_fontFamily,\n        fontSize: \"16px\",\n        fontWeight: 600,\n        lineHeight: \"24px\",\n        margin: \"0 0 10px\",\n      }}\n    >\n      {heading}\n    </Text>\n    {links.map(([label, href]) => (\n      <Text key={href} style={{ margin: \"0 0 8px\" }}>\n        <Link\n          href={href}\n          style={{\n            color: textColor,\n            fontFamily: DividerMenuFooter_fontFamily,\n            fontSize: \"14px\",\n            lineHeight: \"20px\",\n            textDecoration: \"none\",\n          }}\n        >\n          {label}\n        </Link>\n      </Text>\n    ))}\n  </Column>\n);\n\nconst DividerMenuFooter_FooterWith2ColumnMenuAndDividerSection = ({\n  variant = \"left-logo\",\n  logoSrc = emailAsset(\"maizzle-insignia.png\"),\n  logoAlt = \"Maizzle\",\n  logoHref = \"https://example.com\",\n  pageBackgroundColor = \"#f1f5f9\",\n  backgroundColor = \"#fffffe\",\n  dividerColor = \"#d1d5db\",\n  textColor = \"#6b7280\",\n  headingColor = \"#030712\",\n  legalColor = \"#9ca3af\",\n  unsubscribeHref = \"https://example.com/unsub\",\n}: Omit<DividerMenuFooter_FooterWith2ColumnMenuAndDividerProps, \"theme\">) => (\n  <Section style={{ backgroundColor: pageBackgroundColor }} width=\"100%\">\n    <Fragment>\n      <Row>\n        <Column>&zwj;</Column>\n        <Column\n          style={{\n            backgroundColor,\n            maxWidth: \"100%\",\n            padding: \"44px 0 24px\",\n            width: \"600px\",\n          }}\n        >\n          <Section width=\"100%\">\n            <Fragment>\n              <Row>\n                <Column style={{ padding: \"0 24px\", textAlign: \"left\" }}>\n                  <Section width=\"100%\">\n                    <Fragment>\n                      <Row>\n                        <Column style={{ verticalAlign: \"top\" }}>\n                          <Section>\n                            <Fragment>\n                              <Row>\n                                <DividerMenuFooter_LinkColumn\n                                  heading=\"Quick Links\"\n                                  headingColor={headingColor}\n                                  links={DividerMenuFooter_quickLinks}\n                                  textColor={textColor}\n                                />\n                                <DividerMenuFooter_LinkColumn\n                                  heading=\"Legal\"\n                                  headingColor={headingColor}\n                                  links={DividerMenuFooter_legalLinks}\n                                  textColor={textColor}\n                                />\n                              </Row>\n                            </Fragment>\n                          </Section>\n                        </Column>\n                      </Row>\n                      <Row>\n                        <Column>\n                          <Section\n                            style={{\n                              backgroundColor: dividerColor,\n                              height: \"1px\",\n                              lineHeight: \"1px\",\n                              margin: \"24px 0\",\n                            }}\n                          >\n                            &zwj;\n                          </Section>\n                        </Column>\n                      </Row>\n                      <Row>\n                        <Column\n                          style={{\n                            textAlign:\n                              variant === \"right-logo\" ? \"right\" : \"left\",\n                          }}\n                        >\n                          <Link href={logoHref}>\n                            <Img\n                              alt={logoAlt}\n                              src={logoSrc}\n                              style={{\n                                maxWidth: \"100%\",\n                                verticalAlign: \"middle\",\n                              }}\n                              width={64}\n                            />\n                          </Link>\n                        </Column>\n                      </Row>\n                      <Row>\n                        <Column style={{ lineHeight: \"24px\" }}>&zwj;</Column>\n                      </Row>\n                      <Row>\n                        <Column>\n                          <Section\n                            style={{ tableLayout: \"fixed\" }}\n                            width=\"100%\"\n                          >\n                            <Fragment>\n                              <Row>\n                                <Column className=\"footer-divider-legal\">\n                                  <Text\n                                    style={{\n                                      color: legalColor,\n                                      fontFamily: DividerMenuFooter_fontFamily,\n                                      fontSize: \"16px\",\n                                      lineHeight: \"24px\",\n                                      margin: 0,\n                                    }}\n                                  >\n                                    © 2026 emailcn. All rights reserved.\n                                  </Text>\n                                  <Text\n                                    style={{\n                                      color: legalColor,\n                                      fontFamily: DividerMenuFooter_fontFamily,\n                                      fontSize: \"16px\",\n                                      lineHeight: \"24px\",\n                                      margin: 0,\n                                    }}\n                                  >\n                                    No longer want to receive emails?{\" \"}\n                                    <Link\n                                      href={unsubscribeHref}\n                                      style={{\n                                        color: legalColor,\n                                        textDecoration: \"underline\",\n                                      }}\n                                    >\n                                      Unsubscribe\n                                    </Link>\n                                  </Text>\n                                </Column>\n                                <Column\n                                  className=\"footer-divider-social-cell\"\n                                  style={{\n                                    paddingLeft: \"44px\",\n                                    verticalAlign: \"top\",\n                                  }}\n                                >\n                                  <Section\n                                    align=\"right\"\n                                    className=\"footer-divider-socials\"\n                                    style={{\n                                      float: \"right\",\n                                      marginLeft: \"auto\",\n                                    }}\n                                  >\n                                    <Fragment>\n                                      <Row>\n                                        {DividerMenuFooter_socials.map(\n                                          ([label, href, icon], index) => (\n                                            <Column\n                                              key={label}\n                                              style={\n                                                index <\n                                                DividerMenuFooter_socials.length -\n                                                  1\n                                                  ? { paddingRight: \"24px\" }\n                                                  : undefined\n                                              }\n                                            >\n                                              <Link href={href}>\n                                                <Img\n                                                  alt={label}\n                                                  src={emailAsset(`${icon}`)}\n                                                  style={{\n                                                    maxWidth: \"100%\",\n                                                    verticalAlign: \"middle\",\n                                                  }}\n                                                  width={20}\n                                                />\n                                              </Link>\n                                            </Column>\n                                          )\n                                        )}\n                                      </Row>\n                                    </Fragment>\n                                  </Section>\n                                </Column>\n                              </Row>\n                            </Fragment>\n                          </Section>\n                        </Column>\n                      </Row>\n                    </Fragment>\n                  </Section>\n                </Column>\n              </Row>\n            </Fragment>\n          </Section>\n        </Column>\n        <Column>&zwj;</Column>\n      </Row>\n    </Fragment>\n  </Section>\n);\n\nconst DividerMenuFooter_FooterWith2ColumnMenuAndDivider = ({\n  theme = defaultTheme,\n  variant = \"left-logo\",\n  ...props\n}: DividerMenuFooter_FooterWith2ColumnMenuAndDividerProps) => (\n  <Html>\n    <EmailHead>\n      <DefaultFonts />\n      <style\n        dangerouslySetInnerHTML={{ __html: DividerMenuFooter_responsiveStyles }}\n      />\n    </EmailHead>\n    <Preview>Footer with two-column menu and divider</Preview>\n    <Tailwind config={createEmailTailwindConfig(theme)}>\n      <Body\n        style={{\n          backgroundColor: props.pageBackgroundColor ?? \"#f1f5f9\",\n          fontFamily: DividerMenuFooter_fontFamily,\n        }}\n        className=\"m-0\"\n      >\n        <DividerMenuFooter_FooterWith2ColumnMenuAndDividerSection\n          {...props}\n          variant={variant}\n        />\n      </Body>\n    </Tailwind>\n  </Html>\n);\n\nDividerMenuFooter_FooterWith2ColumnMenuAndDivider.PreviewProps = {\n  theme: defaultTheme,\n  variant: \"left-logo\",\n} satisfies DividerMenuFooter_FooterWith2ColumnMenuAndDividerProps;\n\nconst __DividerMenuFooter = DividerMenuFooter_FooterWith2ColumnMenuAndDivider;\n\ntype TwoColumnFooter_FooterWith2ColumnMenuVariant = \"left-logo\" | \"right-logo\";\n\ninterface TwoColumnFooter_FooterWith2ColumnMenuLink {\n  href: string;\n  label: string;\n}\n\ninterface TwoColumnFooter_FooterWith2ColumnMenuProps {\n  theme?: EmailTheme;\n  logoSrc?: string;\n  logoAlt?: string;\n  logoHref?: string;\n  quickLinks?: TwoColumnFooter_FooterWith2ColumnMenuLink[];\n  connectLinks?: TwoColumnFooter_FooterWith2ColumnMenuLink[];\n  copyright?: string;\n  unsubscribeHref?: string;\n  pageBackgroundColor?: string;\n  backgroundColor?: string;\n  headingColor?: string;\n  textColor?: string;\n  mutedTextColor?: string;\n  variant?: TwoColumnFooter_FooterWith2ColumnMenuVariant;\n}\n\nconst TwoColumnFooter_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\n\nconst TwoColumnFooter_responsiveStyles = [\n  \"@media only screen and (max-width: 599px) {\",\n  \"  .footer-two-menu-cell { display: block !important; width: 100% !important; }\",\n  \"  .footer-two-menu-logo { padding-bottom: 24px !important; text-align: left !important; }\",\n  \"  .footer-two-menu-columns { float: none !important; margin: 0 !important; text-align: left !important; }\",\n  \"}\",\n].join(\"\\n\");\n\nconst TwoColumnFooter_defaults = {\n  backgroundColor: \"#fffffe\",\n  connectLinks: [\n    { href: \"https://facebook.com\", label: \"Facebook\" },\n    { href: \"https://github.com\", label: \"GitHub\" },\n    { href: \"https://linkedin.com\", label: \"LinkedIn\" },\n    { href: \"https://youtube.com\", label: \"YouTube\" },\n    { href: \"https://instagram.com\", label: \"Instagram\" },\n  ],\n  copyright: \"© 2026 emailcn. No longer want to receive emails?\",\n  headingColor: \"#030712\",\n  logoAlt: \"Maizzle\",\n  logoHref: \"https://example.com\",\n  logoSrc: emailAsset(\"maizzle-insignia.png\"),\n  mutedTextColor: \"#9ca3af\",\n  pageBackgroundColor: \"#f1f5f9\",\n  quickLinks: [\n    { href: \"https://example.com/about\", label: \"About us\" },\n    { href: \"https://example.com/shop\", label: \"Shop\" },\n    { href: \"https://example.com/faq\", label: \"FAQs\" },\n    { href: \"https://example.com/contact\", label: \"Contact us\" },\n  ],\n  textColor: \"#6b7280\",\n  unsubscribeHref: \"https://example.com/unsub\",\n};\n\ntype TwoColumnFooter_SectionProps = Omit<\n  TwoColumnFooter_FooterWith2ColumnMenuProps,\n  \"theme\"\n>;\n\ntype TwoColumnFooter_ResolvedProps = typeof TwoColumnFooter_defaults &\n  TwoColumnFooter_SectionProps;\n\nconst TwoColumnFooter_MenuColumn = ({\n  links,\n  props,\n  title,\n}: {\n  links: TwoColumnFooter_FooterWith2ColumnMenuLink[];\n  props: TwoColumnFooter_ResolvedProps;\n  title: string;\n}) => (\n  <Column\n    style={{ padding: \"0 24px\", textAlign: \"left\", verticalAlign: \"top\" }}\n  >\n    <Text\n      style={{\n        color: props.headingColor,\n        fontFamily: TwoColumnFooter_fontFamily,\n        fontSize: \"16px\",\n        fontWeight: 600,\n        lineHeight: \"24px\",\n        margin: \"0 0 10px\",\n      }}\n    >\n      {title}\n    </Text>\n    {links.map((link) => (\n      <Text key={link.href} style={{ margin: \"0 0 8px\" }}>\n        <Link\n          href={link.href}\n          style={{\n            color: props.textColor,\n            fontFamily: TwoColumnFooter_fontFamily,\n            fontSize: \"14px\",\n            lineHeight: \"20px\",\n            textDecoration: \"none\",\n          }}\n        >\n          {link.label}\n        </Link>\n      </Text>\n    ))}\n  </Column>\n);\n\nconst TwoColumnFooter_LogoCell = ({\n  props,\n}: {\n  props: TwoColumnFooter_ResolvedProps;\n}) => (\n  <Column\n    className=\"footer-two-menu-cell footer-two-menu-logo\"\n    style={{\n      textAlign: props.variant === \"right-logo\" ? \"right\" : \"left\",\n      verticalAlign: \"top\",\n      width: \"41.666667%\",\n    }}\n  >\n    <Section width=\"100%\">\n      <Fragment>\n        <Row>\n          <Column style={{ padding: \"0 24px 24px\" }}>\n            <Link href={props.logoHref}>\n              <Img\n                alt={props.logoAlt}\n                src={props.logoSrc}\n                style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n                width={55}\n              />\n            </Link>\n          </Column>\n        </Row>\n      </Fragment>\n    </Section>\n  </Column>\n);\n\nconst TwoColumnFooter_MenusCell = ({\n  props,\n}: {\n  props: TwoColumnFooter_ResolvedProps;\n}) => (\n  <Column className=\"footer-two-menu-cell\" style={{ verticalAlign: \"top\" }}>\n    <Section\n      align={props.variant === \"left-logo\" ? \"right\" : \"left\"}\n      className=\"footer-two-menu-columns\"\n      style={\n        props.variant === \"left-logo\"\n          ? { marginLeft: \"auto\" }\n          : { marginRight: \"auto\" }\n      }\n    >\n      <Fragment>\n        <Row>\n          <TwoColumnFooter_MenuColumn\n            links={props.quickLinks}\n            props={props}\n            title=\"Quick Links\"\n          />\n          <TwoColumnFooter_MenuColumn\n            links={props.connectLinks}\n            props={props}\n            title=\"Connect\"\n          />\n        </Row>\n      </Fragment>\n    </Section>\n  </Column>\n);\n\nconst TwoColumnFooter_FooterWith2ColumnMenuSection = (\n  props: TwoColumnFooter_SectionProps\n) => {\n  const resolved = {\n    ...resolveDefaultProps(TwoColumnFooter_defaults, props),\n    variant: props.variant ?? \"left-logo\",\n  } as TwoColumnFooter_ResolvedProps;\n  const logo = <TwoColumnFooter_LogoCell props={resolved} />;\n  const menus = <TwoColumnFooter_MenusCell props={resolved} />;\n  return (\n    <Section\n      style={{ backgroundColor: resolved.pageBackgroundColor }}\n      width=\"100%\"\n    >\n      <Fragment>\n        <Row>\n          <Column>&zwj;</Column>\n          <Column\n            style={{\n              backgroundColor: resolved.backgroundColor,\n              maxWidth: \"100%\",\n              padding: \"44px 0 24px\",\n              width: \"600px\",\n            }}\n          >\n            <Section width=\"100%\">\n              <Fragment>\n                <Row>\n                  {resolved.variant === \"left-logo\" ? logo : menus}\n                  {resolved.variant === \"left-logo\" ? menus : logo}\n                </Row>\n              </Fragment>\n            </Section>\n            <Section style={{ lineHeight: \"96px\" }}>&zwj;</Section>\n            <Section width=\"100%\">\n              <Fragment>\n                <Row>\n                  <Column style={{ padding: \"0 24px\", textAlign: \"left\" }}>\n                    <Text\n                      style={{\n                        color: resolved.mutedTextColor,\n                        fontFamily: TwoColumnFooter_fontFamily,\n                        fontSize: \"16px\",\n                        lineHeight: \"24px\",\n                        margin: 0,\n                      }}\n                    >\n                      {resolved.copyright}{\" \"}\n                      <Link\n                        href={resolved.unsubscribeHref}\n                        style={{\n                          color: resolved.textColor,\n                          textDecoration: \"underline\",\n                        }}\n                      >\n                        Unsubscribe\n                      </Link>\n                    </Text>\n                  </Column>\n                </Row>\n              </Fragment>\n            </Section>\n          </Column>\n          <Column>&zwj;</Column>\n        </Row>\n      </Fragment>\n    </Section>\n  );\n};\n\nconst TwoColumnFooter_FooterWith2ColumnMenu = ({\n  pageBackgroundColor = \"#f1f5f9\",\n  theme = defaultTheme,\n  variant = \"left-logo\",\n  ...props\n}: TwoColumnFooter_FooterWith2ColumnMenuProps) => (\n  <Html>\n    <EmailHead>\n      <DefaultFonts />\n      <style\n        dangerouslySetInnerHTML={{ __html: TwoColumnFooter_responsiveStyles }}\n      />\n    </EmailHead>\n    <Preview>Footer with 2-column menu</Preview>\n    <Tailwind config={createEmailTailwindConfig(theme)}>\n      <Body\n        style={{\n          backgroundColor: pageBackgroundColor,\n          fontFamily: TwoColumnFooter_fontFamily,\n        }}\n        className=\"m-0\"\n      >\n        <TwoColumnFooter_FooterWith2ColumnMenuSection\n          {...props}\n          pageBackgroundColor={pageBackgroundColor}\n          variant={variant}\n        />\n      </Body>\n    </Tailwind>\n  </Html>\n);\n\nTwoColumnFooter_FooterWith2ColumnMenu.PreviewProps = {\n  theme: defaultTheme,\n  variant: \"left-logo\",\n} satisfies TwoColumnFooter_FooterWith2ColumnMenuProps;\n\nconst __TwoColumnFooter = TwoColumnFooter_FooterWith2ColumnMenu;\n\ntype ThreeColumnFooter_FooterWith3ColMenuVariant = \"left-logo\" | \"right-logo\";\n\ninterface ThreeColumnFooter_FooterWith3ColMenuLink {\n  href: string;\n  label: string;\n}\n\ninterface ThreeColumnFooter_FooterWith3ColMenuSocial extends ThreeColumnFooter_FooterWith3ColMenuLink {\n  iconSrc: string;\n}\n\ninterface ThreeColumnFooter_FooterWith3ColMenuProps {\n  theme?: EmailTheme;\n  logoSrc?: string;\n  logoAlt?: string;\n  logoHref?: string;\n  quickLinks?: ThreeColumnFooter_FooterWith3ColMenuLink[];\n  connectLinks?: ThreeColumnFooter_FooterWith3ColMenuLink[];\n  legalLinks?: ThreeColumnFooter_FooterWith3ColMenuLink[];\n  socials?: ThreeColumnFooter_FooterWith3ColMenuSocial[];\n  unsubscribeHref?: string;\n  pageBackgroundColor?: string;\n  backgroundColor?: string;\n  headingColor?: string;\n  textColor?: string;\n  mutedTextColor?: string;\n  variant?: ThreeColumnFooter_FooterWith3ColMenuVariant;\n}\n\nconst ThreeColumnFooter_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\n\nconst ThreeColumnFooter_responsiveStyles = [\n  \"@media only screen and (max-width: 599px) {\",\n  \"  .footer-three-menu-cell { display: block !important; width: 100% !important; }\",\n  \"  .footer-three-menu-brand { padding-bottom: 44px !important; text-align: left !important; }\",\n  \"  .footer-three-menu-break { display: none !important; }\",\n  \"  .footer-three-menu-columns { float: none !important; margin: 0 !important; text-align: left !important; }\",\n  \"  .footer-three-menu-column { padding-right: 20px !important; }\",\n  \"}\",\n].join(\"\\n\");\n\nconst ThreeColumnFooter_defaults = {\n  backgroundColor: \"#fffffe\",\n  connectLinks: [\n    { href: \"https://facebook.com\", label: \"Facebook\" },\n    { href: \"https://github.com\", label: \"GitHub\" },\n    { href: \"https://linkedin.com\", label: \"LinkedIn\" },\n    { href: \"https://youtube.com\", label: \"YouTube\" },\n    { href: \"https://instagram.com\", label: \"Instagram\" },\n  ],\n  headingColor: \"#030712\",\n  legalLinks: [\n    { href: \"https://example.com/privacy\", label: \"Privacy Policy\" },\n    { href: \"https://example.com/terms\", label: \"Terms of Service\" },\n    { href: \"https://example.com/returns\", label: \"Returns\" },\n  ],\n  logoAlt: \"Maizzle\",\n  logoHref: \"https://example.com\",\n  logoSrc: emailAsset(\"maizzle-insignia.png\"),\n  mutedTextColor: \"#9ca3af\",\n  pageBackgroundColor: \"#f1f5f9\",\n  quickLinks: [\n    { href: \"https://example.com/about\", label: \"About us\" },\n    { href: \"https://example.com/shop\", label: \"Shop\" },\n    { href: \"https://example.com/faq\", label: \"FAQs\" },\n    { href: \"https://example.com/contact\", label: \"Contact us\" },\n  ],\n  socials: [\n    {\n      href: \"https://facebook.com\",\n      iconSrc: emailAsset(\"icon-facebook.png\"),\n      label: \"Facebook\",\n    },\n    {\n      href: \"https://github.com\",\n      iconSrc: emailAsset(\"icon-github.png\"),\n      label: \"GitHub\",\n    },\n    {\n      href: \"https://linkedin.com\",\n      iconSrc: emailAsset(\"icon-linkedin.png\"),\n      label: \"LinkedIn\",\n    },\n    {\n      href: \"https://youtube.com\",\n      iconSrc: emailAsset(\"icon-youtube.png\"),\n      label: \"YouTube\",\n    },\n    {\n      href: \"https://x.com\",\n      iconSrc: emailAsset(\"icon-x.png\"),\n      label: \"X\",\n    },\n  ],\n  textColor: \"#6b7280\",\n  unsubscribeHref: \"https://example.com/unsub\",\n};\n\ntype ThreeColumnFooter_SectionProps = Omit<\n  ThreeColumnFooter_FooterWith3ColMenuProps,\n  \"theme\"\n>;\n\ntype ThreeColumnFooter_ResolvedProps = typeof ThreeColumnFooter_defaults &\n  ThreeColumnFooter_SectionProps;\n\nconst ThreeColumnFooter_MenuColumn = ({\n  last = false,\n  links,\n  props,\n  title,\n}: {\n  last?: boolean;\n  links: ThreeColumnFooter_FooterWith3ColMenuLink[];\n  props: ThreeColumnFooter_ResolvedProps;\n  title: string;\n}) => (\n  <Column\n    className={last ? undefined : \"footer-three-menu-column\"}\n    style={{\n      paddingRight: last ? undefined : \"40px\",\n      textAlign: \"left\",\n      verticalAlign: \"top\",\n    }}\n  >\n    <Text\n      style={{\n        color: props.headingColor,\n        fontFamily: ThreeColumnFooter_fontFamily,\n        fontSize: \"16px\",\n        fontWeight: 600,\n        lineHeight: \"24px\",\n        margin: \"0 0 10px\",\n      }}\n    >\n      {title}\n    </Text>\n    {links.map((link) => (\n      <Text key={link.href} style={{ margin: \"0 0 8px\" }}>\n        <Link\n          href={link.href}\n          style={{\n            color: props.textColor,\n            fontFamily: ThreeColumnFooter_fontFamily,\n            fontSize: \"14px\",\n            lineHeight: \"20px\",\n            textDecoration: \"none\",\n          }}\n        >\n          {link.label}\n        </Link>\n      </Text>\n    ))}\n  </Column>\n);\n\nconst ThreeColumnFooter_BrandCell = ({\n  props,\n}: {\n  props: ThreeColumnFooter_ResolvedProps;\n}) => (\n  <Column\n    className=\"footer-three-menu-cell footer-three-menu-brand\"\n    style={{\n      textAlign: props.variant === \"right-logo\" ? \"right\" : \"left\",\n      verticalAlign: \"top\",\n      width: \"33.333333%\",\n    }}\n  >\n    <Link href={props.logoHref}>\n      <Img\n        alt={props.logoAlt}\n        src={props.logoSrc}\n        style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n        width={55}\n      />\n    </Link>\n    <Section style={{ lineHeight: \"44px\" }}>&zwj;</Section>\n    <Text\n      style={{\n        color: props.mutedTextColor,\n        fontFamily: ThreeColumnFooter_fontFamily,\n        fontSize: \"16px\",\n        lineHeight: \"24px\",\n        margin: 0,\n      }}\n    >\n      © 2026 emailcn. <br className=\"footer-three-menu-break\" /> All rights\n      reserved.\n    </Text>\n  </Column>\n);\n\nconst ThreeColumnFooter_MenusCell = ({\n  props,\n}: {\n  props: ThreeColumnFooter_ResolvedProps;\n}) => (\n  <Column className=\"footer-three-menu-cell\" style={{ verticalAlign: \"top\" }}>\n    <Section\n      align={props.variant === \"left-logo\" ? \"right\" : \"left\"}\n      className=\"footer-three-menu-columns\"\n      style={\n        props.variant === \"left-logo\"\n          ? { marginLeft: \"auto\" }\n          : { marginRight: \"auto\" }\n      }\n    >\n      <Fragment>\n        <Row>\n          <ThreeColumnFooter_MenuColumn\n            links={props.quickLinks}\n            props={props}\n            title=\"Quick Links\"\n          />\n          <ThreeColumnFooter_MenuColumn\n            links={props.connectLinks}\n            props={props}\n            title=\"Connect\"\n          />\n          <ThreeColumnFooter_MenuColumn\n            last\n            links={props.legalLinks}\n            props={props}\n            title=\"Legal\"\n          />\n        </Row>\n      </Fragment>\n    </Section>\n  </Column>\n);\n\nconst ThreeColumnFooter_FooterWith3ColMenuSection = (\n  props: ThreeColumnFooter_SectionProps\n) => {\n  const resolved = {\n    ...resolveDefaultProps(ThreeColumnFooter_defaults, props),\n    variant: props.variant ?? \"left-logo\",\n  } as ThreeColumnFooter_ResolvedProps;\n  const brand = <ThreeColumnFooter_BrandCell props={resolved} />;\n  const menus = <ThreeColumnFooter_MenusCell props={resolved} />;\n  return (\n    <Section\n      style={{ backgroundColor: resolved.pageBackgroundColor }}\n      width=\"100%\"\n    >\n      <Fragment>\n        <Row>\n          <Column>&zwj;</Column>\n          <Column\n            style={{\n              backgroundColor: resolved.backgroundColor,\n              maxWidth: \"100%\",\n              padding: \"44px 0 24px\",\n              width: \"600px\",\n            }}\n          >\n            <Section width=\"100%\">\n              <Fragment>\n                <Row>\n                  <Column style={{ padding: \"0 24px\" }}>\n                    <Section width=\"100%\">\n                      <Fragment>\n                        <Row>\n                          {resolved.variant === \"left-logo\" ? brand : menus}\n                          {resolved.variant === \"left-logo\" ? menus : brand}\n                        </Row>\n                      </Fragment>\n                    </Section>\n                  </Column>\n                </Row>\n              </Fragment>\n            </Section>\n            <Section style={{ lineHeight: \"96px\" }}>&zwj;</Section>\n            <Section width=\"100%\">\n              <Fragment>\n                <Row>\n                  <Column style={{ padding: \"0 24px\", textAlign: \"left\" }}>\n                    <Text\n                      style={{\n                        color: resolved.mutedTextColor,\n                        fontFamily: ThreeColumnFooter_fontFamily,\n                        fontSize: \"16px\",\n                        lineHeight: \"24px\",\n                        margin: 0,\n                      }}\n                    >\n                      © 2026 emailcn. No longer want to receive emails?{\" \"}\n                      <Link\n                        href={resolved.unsubscribeHref}\n                        style={{\n                          color: resolved.textColor,\n                          textDecoration: \"underline\",\n                        }}\n                      >\n                        Unsubscribe\n                      </Link>\n                    </Text>\n                    <Section style={{ lineHeight: \"24px\" }}>&zwj;</Section>\n                    <Section>\n                      <Fragment>\n                        <Row>\n                          {resolved.socials.map((social, index) => (\n                            <Column\n                              key={social.href}\n                              style={\n                                index === resolved.socials.length - 1\n                                  ? undefined\n                                  : { paddingRight: \"24px\" }\n                              }\n                            >\n                              <Link href={social.href}>\n                                <Img\n                                  alt={social.label}\n                                  src={social.iconSrc}\n                                  style={{\n                                    maxWidth: \"100%\",\n                                    verticalAlign: \"middle\",\n                                  }}\n                                  width={20}\n                                />\n                              </Link>\n                            </Column>\n                          ))}\n                        </Row>\n                      </Fragment>\n                    </Section>\n                  </Column>\n                </Row>\n              </Fragment>\n            </Section>\n          </Column>\n          <Column>&zwj;</Column>\n        </Row>\n      </Fragment>\n    </Section>\n  );\n};\n\nconst ThreeColumnFooter_FooterWith3ColMenu = ({\n  pageBackgroundColor = \"#f1f5f9\",\n  theme = defaultTheme,\n  variant = \"left-logo\",\n  ...props\n}: ThreeColumnFooter_FooterWith3ColMenuProps) => (\n  <Html>\n    <EmailHead>\n      <DefaultFonts />\n      <style\n        dangerouslySetInnerHTML={{ __html: ThreeColumnFooter_responsiveStyles }}\n      />\n    </EmailHead>\n    <Preview>Footer with 3-column menu</Preview>\n    <Tailwind config={createEmailTailwindConfig(theme)}>\n      <Body\n        style={{\n          backgroundColor: pageBackgroundColor,\n          fontFamily: ThreeColumnFooter_fontFamily,\n        }}\n        className=\"m-0\"\n      >\n        <ThreeColumnFooter_FooterWith3ColMenuSection\n          {...props}\n          pageBackgroundColor={pageBackgroundColor}\n          variant={variant}\n        />\n      </Body>\n    </Tailwind>\n  </Html>\n);\n\nThreeColumnFooter_FooterWith3ColMenu.PreviewProps = {\n  theme: defaultTheme,\n  variant: \"left-logo\",\n} satisfies ThreeColumnFooter_FooterWith3ColMenuProps;\n\nconst __ThreeColumnFooter = ThreeColumnFooter_FooterWith3ColMenu;\n\ntype FullMenuFooter_FooterWithFullMenuVariant = \"oversized-logo\" | \"bordered\";\n\ninterface FullMenuFooter_FullMenuFooterLink {\n  href: string;\n  label: string;\n}\n\ninterface FullMenuFooter_FullMenuFooterSocial extends FullMenuFooter_FullMenuFooterLink {\n  iconSrc: string;\n}\n\ninterface FullMenuFooter_FooterWithFullMenuProps {\n  theme?: EmailTheme;\n  logoSrc?: string;\n  logoAlt?: string;\n  logoHref?: string;\n  assistanceText?: string;\n  links?: FullMenuFooter_FullMenuFooterLink[];\n  socials?: FullMenuFooter_FullMenuFooterSocial[];\n  unsubscribeHref?: string;\n  pageBackgroundColor?: string;\n  backgroundColor?: string;\n  dividerColor?: string;\n  textColor?: string;\n  mutedTextColor?: string;\n  variant?: FullMenuFooter_FooterWithFullMenuVariant;\n}\n\nconst FullMenuFooter_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\n\nconst FullMenuFooter_responsiveStyles = [\n  \"@media only screen and (max-width: 599px) {\",\n  \"  .footer-full-menu-item { display: inline-block !important; }\",\n  \"  .footer-full-menu-break { display: none !important; }\",\n  \"  .footer-full-menu-row { line-height: 32px !important; text-align: center !important; }\",\n  \"}\",\n].join(\"\\n\");\n\nconst FullMenuFooter_defaults = {\n  assistanceText:\n    \"If you have any questions or need assistance\\nplease reply to this email.\",\n  backgroundColor: \"#fffffe\",\n  dividerColor: \"#d1d5db\",\n  links: [\n    { href: \"https://example.com/about\", label: \"About us\" },\n    { href: \"https://example.com/shop\", label: \"Shop\" },\n    { href: \"https://example.com/faq\", label: \"FAQs\" },\n    { href: \"https://example.com/blog\", label: \"Blog\" },\n    { href: \"https://example.com/support\", label: \"Support\" },\n    { href: \"https://example.com/privacy\", label: \"Privacy Policy\" },\n    { href: \"https://example.com/contact\", label: \"Contact us\" },\n  ],\n  logoAlt: \"Maizzle\",\n  logoHref: \"https://example.com\",\n  mutedTextColor: \"#d1d5db\",\n  pageBackgroundColor: \"#f1f5f9\",\n  socials: [\n    {\n      href: \"https://facebook.com\",\n      iconSrc: emailAsset(\"icon-facebook.png\"),\n      label: \"Facebook\",\n    },\n    {\n      href: \"https://github.com\",\n      iconSrc: emailAsset(\"icon-github.png\"),\n      label: \"GitHub\",\n    },\n    {\n      href: \"https://linkedin.com\",\n      iconSrc: emailAsset(\"icon-linkedin.png\"),\n      label: \"LinkedIn\",\n    },\n    {\n      href: \"https://youtube.com\",\n      iconSrc: emailAsset(\"icon-youtube.png\"),\n      label: \"YouTube\",\n    },\n    {\n      href: \"https://x.com\",\n      iconSrc: emailAsset(\"icon-x.png\"),\n      label: \"X\",\n    },\n  ],\n  textColor: \"#6b7280\",\n  unsubscribeHref: \"https://example.com/unsub\",\n};\n\ntype FullMenuFooter_SectionProps = Omit<\n  FullMenuFooter_FooterWithFullMenuProps,\n  \"theme\"\n>;\n\ntype FullMenuFooter_ResolvedProps = typeof FullMenuFooter_defaults &\n  FullMenuFooter_SectionProps & {\n    logoSrc: string;\n    variant: FullMenuFooter_FooterWithFullMenuVariant;\n  };\n\nconst FullMenuFooter_Divider = ({\n  props,\n}: {\n  props: FullMenuFooter_ResolvedProps;\n}) => (\n  <Section\n    style={{\n      backgroundColor: props.dividerColor,\n      height: \"1px\",\n      lineHeight: \"1px\",\n      margin: \"24px 0\",\n    }}\n  >\n    &zwj;\n  </Section>\n);\n\nconst FullMenuFooter_Menu = ({\n  props,\n}: {\n  props: FullMenuFooter_ResolvedProps;\n}) => (\n  <Section\n    align=\"center\"\n    className=\"footer-full-menu-row\"\n    style={{ marginLeft: \"auto\", marginRight: \"auto\" }}\n  >\n    <Fragment>\n      <Row>\n        {props.links.map((link) => (\n          <Column\n            className=\"footer-full-menu-item\"\n            key={link.href}\n            style={{ padding: \"0 12px\" }}\n          >\n            <Link\n              href={link.href}\n              style={{\n                color: props.textColor,\n                fontFamily: FullMenuFooter_fontFamily,\n                fontSize: \"14px\",\n                lineHeight: \"20px\",\n                textDecoration: \"none\",\n              }}\n            >\n              {link.label}\n            </Link>\n          </Column>\n        ))}\n      </Row>\n    </Fragment>\n  </Section>\n);\n\nconst FullMenuFooter_Socials = ({\n  props,\n}: {\n  props: FullMenuFooter_ResolvedProps;\n}) => (\n  <Section align=\"center\" style={{ marginLeft: \"auto\", marginRight: \"auto\" }}>\n    <Fragment>\n      <Row>\n        {props.socials.map((social, index) => (\n          <Column\n            key={social.href}\n            style={\n              index === props.socials.length - 1\n                ? undefined\n                : { paddingRight: \"24px\" }\n            }\n          >\n            <Link href={social.href}>\n              <Img\n                alt={social.label}\n                src={social.iconSrc}\n                style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n                width={20}\n              />\n            </Link>\n          </Column>\n        ))}\n      </Row>\n    </Fragment>\n  </Section>\n);\n\nconst FullMenuFooter_Address = ({\n  props,\n}: {\n  props: FullMenuFooter_ResolvedProps;\n}) => (\n  <Section style={{ textAlign: \"center\" }}>\n    <Text\n      style={{\n        color: props.textColor,\n        fontFamily: FullMenuFooter_fontFamily,\n        fontSize: \"16px\",\n        lineHeight: \"24px\",\n        margin: 0,\n      }}\n    >\n      © 2026 emailcn\n      <br /> emailcn&nbsp; | &nbsp;155 Bdv Saint Germain&nbsp; | &nbsp;75505\n      Paris\n    </Text>\n    <Section style={{ lineHeight: \"36px\" }}>&zwj;</Section>\n    <Text\n      style={{\n        color: props.mutedTextColor,\n        fontFamily: FullMenuFooter_fontFamily,\n        fontSize: \"16px\",\n        lineHeight: \"24px\",\n        margin: 0,\n      }}\n    >\n      We're sending you this because you subscribed.{\" \"}\n      <br className=\"footer-full-menu-break\" /> No longer want to receive\n      emails?{\" \"}\n      <Link\n        href={props.unsubscribeHref}\n        style={{ color: props.mutedTextColor, textDecoration: \"underline\" }}\n      >\n        Unsubscribe\n      </Link>\n    </Text>\n  </Section>\n);\n\nconst FullMenuFooter_FooterWithFullMenuSection = (\n  props: FullMenuFooter_SectionProps\n) => {\n  const variant = props.variant ?? \"oversized-logo\";\n  const resolved = {\n    ...resolveDefaultProps(FullMenuFooter_defaults, props),\n    logoSrc:\n      props.logoSrc ??\n      (variant === \"bordered\"\n        ? emailAsset(\"maizzle-insignia.png\")\n        : emailAsset(\"maizzle-insignia-lg.png\")),\n    variant,\n  } as FullMenuFooter_ResolvedProps;\n  const bordered = variant === \"bordered\";\n  return (\n    <Section\n      style={{ backgroundColor: resolved.pageBackgroundColor }}\n      width=\"100%\"\n    >\n      <Fragment>\n        <Row>\n          <Column>&zwj;</Column>\n          <Column\n            style={{\n              backgroundColor: resolved.backgroundColor,\n              maxWidth: \"100%\",\n              padding: \"44px 0 24px\",\n              width: \"600px\",\n            }}\n          >\n            <Section width=\"100%\">\n              <Fragment>\n                <Row>\n                  <Column style={{ padding: \"0 24px\", textAlign: \"center\" }}>\n                    <Link href={resolved.logoHref}>\n                      <Img\n                        alt={resolved.logoAlt}\n                        src={resolved.logoSrc}\n                        style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n                        width={bordered ? 88 : 197}\n                      />\n                    </Link>\n                    <Section style={{ lineHeight: \"24px\" }}>&zwj;</Section>\n                    {(() => {\n                      if (bordered) {\n                        return (\n                          <>\n                            <Text\n                              style={{\n                                color: resolved.textColor,\n                                fontFamily: FullMenuFooter_fontFamily,\n                                fontSize: \"18px\",\n                                lineHeight: \"28px\",\n                                margin: 0,\n                              }}\n                            >\n                              {resolved.assistanceText\n                                .split(\"\\n\")\n                                .map((line, index) => (\n                                  <span key={line}>\n                                    {index > 0 ? (\n                                      <br className=\"footer-full-menu-break\" />\n                                    ) : null}\n                                    {line}\n                                  </span>\n                                ))}\n                            </Text>\n                            <FullMenuFooter_Divider props={resolved} />\n                            <FullMenuFooter_Menu props={resolved} />\n                            <FullMenuFooter_Divider props={resolved} />\n                            <FullMenuFooter_Socials props={resolved} />\n                            <Section style={{ lineHeight: \"24px\" }}>\n                              &zwj;\n                            </Section>\n                          </>\n                        );\n                      }\n                      return (\n                        <>\n                          <FullMenuFooter_Menu props={resolved} />\n                          <Section style={{ lineHeight: \"24px\" }}>\n                            &zwj;\n                          </Section>\n                          <FullMenuFooter_Socials props={resolved} />\n                          <FullMenuFooter_Divider props={resolved} />\n                        </>\n                      );\n                    })()}\n                    <FullMenuFooter_Address props={resolved} />\n                  </Column>\n                </Row>\n              </Fragment>\n            </Section>\n          </Column>\n          <Column>&zwj;</Column>\n        </Row>\n      </Fragment>\n    </Section>\n  );\n};\n\nconst FullMenuFooter_FooterWithFullMenu = ({\n  pageBackgroundColor = \"#f1f5f9\",\n  theme = defaultTheme,\n  variant = \"oversized-logo\",\n  ...props\n}: FullMenuFooter_FooterWithFullMenuProps) => (\n  <Html>\n    <EmailHead>\n      <DefaultFonts />\n      <style\n        dangerouslySetInnerHTML={{ __html: FullMenuFooter_responsiveStyles }}\n      />\n    </EmailHead>\n    <Preview>Footer with full menu</Preview>\n    <Tailwind config={createEmailTailwindConfig(theme)}>\n      <Body\n        style={{\n          backgroundColor: pageBackgroundColor,\n          fontFamily: FullMenuFooter_fontFamily,\n        }}\n        className=\"m-0\"\n      >\n        <FullMenuFooter_FooterWithFullMenuSection\n          {...props}\n          pageBackgroundColor={pageBackgroundColor}\n          variant={variant}\n        />\n      </Body>\n    </Tailwind>\n  </Html>\n);\n\nFullMenuFooter_FooterWithFullMenu.PreviewProps = {\n  theme: defaultTheme,\n  variant: \"oversized-logo\",\n} satisfies FullMenuFooter_FooterWithFullMenuProps;\n\nconst __FullMenuFooter = FullMenuFooter_FooterWithFullMenu;\n\ntype TextMenuFooterBundle_FooterWithTextMenuAndSocialsVariant =\n  | \"left-logo\"\n  | \"right-logo\";\n\ninterface TextMenuFooterBundle_FooterLink {\n  href: string;\n  label: string;\n}\n\ninterface TextMenuFooterBundle_FooterSocialLink extends TextMenuFooterBundle_FooterLink {\n  iconSrc: string;\n}\n\ninterface TextMenuFooterBundle_FooterWithTextMenuAndSocialsProps {\n  theme?: EmailTheme;\n  logoSrc?: string;\n  logoAlt?: string;\n  description?: string;\n  /** @deprecated Use `copyright` instead. */\n  text?: string;\n  quickLinks?: TextMenuFooterBundle_FooterLink[];\n  socials?: TextMenuFooterBundle_FooterSocialLink[];\n  copyright?: string;\n  unsubscribeHref?: string;\n  pageBackgroundColor?: string;\n  backgroundColor?: string;\n  headingColor?: string;\n  textColor?: string;\n  mutedTextColor?: string;\n  variant?: TextMenuFooterBundle_FooterWithTextMenuAndSocialsVariant;\n}\n\nconst TextMenuFooterBundle_fontFamily =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif';\n\nconst TextMenuFooterBundle_responsiveStyles = [\n  \"@media only screen and (max-width: 599px) {\",\n  \"  .footer-text-menu-cell { display: block !important; width: 100% !important; }\",\n  \"  .footer-text-menu-copy { padding-bottom: 24px !important; text-align: left !important; }\",\n  \"  .footer-text-menu-links { float: none !important; margin: 0 !important; text-align: left !important; }\",\n  \"}\",\n].join(\"\\n\");\n\nconst TextMenuFooterBundle_defaults = {\n  backgroundColor: \"#fffffe\",\n  copyright: \"© 2026 emailcn. No longer want to receive emails?\",\n  description:\n    \"Lorem ipsum dolor sit amet consectetur. Eget aenean sed sit sed in sapien. Vel auctor arcu nulla consectetur sed.\",\n  headingColor: \"#030712\",\n  logoAlt: \"Maizzle\",\n  logoSrc: emailAsset(\"maizzle-insignia.png\"),\n  mutedTextColor: \"#9ca3af\",\n  pageBackgroundColor: \"#f1f5f9\",\n  quickLinks: [\n    { href: \"https://example.com/about\", label: \"About us\" },\n    { href: \"https://example.com/shop\", label: \"Shop\" },\n    { href: \"https://example.com/faq\", label: \"FAQs\" },\n    { href: \"https://example.com/contact\", label: \"Contact us\" },\n  ],\n  socials: [\n    {\n      href: \"https://facebook.com\",\n      iconSrc: emailAsset(\"icon-facebook.png\"),\n      label: \"Facebook\",\n    },\n    {\n      href: \"https://github.com\",\n      iconSrc: emailAsset(\"icon-github.png\"),\n      label: \"GitHub\",\n    },\n    {\n      href: \"https://linkedin.com\",\n      iconSrc: emailAsset(\"icon-linkedin.png\"),\n      label: \"LinkedIn\",\n    },\n    {\n      href: \"https://youtube.com\",\n      iconSrc: emailAsset(\"icon-youtube.png\"),\n      label: \"YouTube\",\n    },\n    {\n      href: \"https://x.com\",\n      iconSrc: emailAsset(\"icon-x.png\"),\n      label: \"X\",\n    },\n  ],\n  textColor: \"#6b7280\",\n  unsubscribeHref: \"https://example.com/unsub\",\n};\n\ntype TextMenuFooterBundle_SectionProps = Omit<\n  TextMenuFooterBundle_FooterWithTextMenuAndSocialsProps,\n  \"theme\"\n>;\n\ntype TextMenuFooterBundle_ResolvedProps = typeof TextMenuFooterBundle_defaults &\n  TextMenuFooterBundle_SectionProps;\n\nconst TextMenuFooterBundle_BrandCopy = ({\n  props,\n}: {\n  props: TextMenuFooterBundle_ResolvedProps;\n}) => (\n  <Section width=\"100%\">\n    <Fragment>\n      <Row>\n        <Column\n          className=\"footer-text-menu-copy\"\n          style={{\n            padding: \"0 24px 24px\",\n            textAlign: props.variant === \"right-logo\" ? \"right\" : \"left\",\n          }}\n        >\n          <Img\n            alt={props.logoAlt}\n            src={props.logoSrc}\n            style={{ maxWidth: \"100%\", verticalAlign: \"middle\" }}\n            width={55}\n          />\n          <Section style={{ lineHeight: \"24px\" }}>&zwj;</Section>\n          <Text\n            style={{\n              color: props.textColor,\n              fontFamily: TextMenuFooterBundle_fontFamily,\n              fontSize: \"16px\",\n              lineHeight: \"24px\",\n              margin: 0,\n            }}\n          >\n            {props.description}\n          </Text>\n        </Column>\n      </Row>\n    </Fragment>\n  </Section>\n);\n\nconst TextMenuFooterBundle_QuickLinks = ({\n  props,\n}: {\n  props: TextMenuFooterBundle_ResolvedProps;\n}) => (\n  <Section\n    align={props.variant === \"left-logo\" ? \"right\" : \"left\"}\n    className=\"footer-text-menu-links\"\n    style={\n      props.variant === \"left-logo\"\n        ? { marginLeft: \"auto\" }\n        : { marginRight: \"auto\" }\n    }\n  >\n    <Fragment>\n      <Row>\n        <Column style={{ padding: \"0 24px\", textAlign: \"left\" }}>\n          <Text\n            style={{\n              color: props.headingColor,\n              fontFamily: TextMenuFooterBundle_fontFamily,\n              fontSize: \"16px\",\n              fontWeight: 600,\n              lineHeight: \"24px\",\n              margin: \"0 0 10px\",\n            }}\n          >\n            Quick Links\n          </Text>\n          {props.quickLinks.map((link) => (\n            <Text key={link.href} style={{ margin: \"0 0 8px\" }}>\n              <Link\n                href={link.href}\n                style={{\n                  color: props.textColor,\n                  display: \"block\",\n                  fontFamily: TextMenuFooterBundle_fontFamily,\n                  fontSize: \"14px\",\n                  lineHeight: \"20px\",\n                  textDecoration: \"none\",\n                }}\n              >\n                {link.label}\n              </Link>\n            </Text>\n          ))}\n        </Column>\n      </Row>\n    </Fragment>\n  </Section>\n);\n\nconst TextMenuFooterBundle_FooterWithTextMenuAndSocialsSection = (\n  props: TextMenuFooterBundle_SectionProps\n) => {\n  const resolved = {\n    ...resolveDefaultProps(TextMenuFooterBundle_defaults, props),\n    copyright:\n      props.copyright ?? props.text ?? TextMenuFooterBundle_defaults.copyright,\n    variant: props.variant ?? \"left-logo\",\n  } as TextMenuFooterBundle_ResolvedProps;\n  const brandCell = (\n    <Column\n      className=\"footer-text-menu-cell\"\n      style={{ verticalAlign: \"top\", width: \"66.666667%\" }}\n    >\n      <TextMenuFooterBundle_BrandCopy props={resolved} />\n    </Column>\n  );\n  const linksCell = (\n    <Column\n      className=\"footer-text-menu-cell\"\n      style={{ verticalAlign: \"top\", width: \"33.333333%\" }}\n    >\n      <TextMenuFooterBundle_QuickLinks props={resolved} />\n    </Column>\n  );\n  return (\n    <Section\n      style={{ backgroundColor: resolved.pageBackgroundColor }}\n      width=\"100%\"\n    >\n      <Fragment>\n        <Row>\n          <Column>&zwj;</Column>\n          <Column\n            style={{\n              backgroundColor: resolved.backgroundColor,\n              maxWidth: \"100%\",\n              padding: \"44px 0 24px\",\n              width: \"600px\",\n            }}\n          >\n            <Section width=\"100%\">\n              <Fragment>\n                <Row>\n                  {resolved.variant === \"left-logo\" ? brandCell : linksCell}\n                  {resolved.variant === \"left-logo\" ? linksCell : brandCell}\n                </Row>\n              </Fragment>\n            </Section>\n            <Section style={{ lineHeight: \"96px\" }}>&zwj;</Section>\n            <Section width=\"100%\">\n              <Fragment>\n                <Row>\n                  <Column style={{ padding: \"0 24px\", textAlign: \"left\" }}>\n                    <Text\n                      style={{\n                        color: resolved.headingColor,\n                        fontFamily: TextMenuFooterBundle_fontFamily,\n                        fontSize: \"16px\",\n                        fontWeight: 600,\n                        lineHeight: \"24px\",\n                        margin: \"0 0 12px\",\n                      }}\n                    >\n                      Follow us\n                    </Text>\n                    <Section>\n                      <Fragment>\n                        <Row>\n                          {resolved.socials.map((social, index) => (\n                            <Column\n                              key={social.href}\n                              style={\n                                index === resolved.socials.length - 1\n                                  ? undefined\n                                  : { paddingRight: \"24px\" }\n                              }\n                            >\n                              <Link href={social.href}>\n                                <Img\n                                  alt={social.label}\n                                  src={social.iconSrc}\n                                  style={{\n                                    maxWidth: \"100%\",\n                                    verticalAlign: \"middle\",\n                                  }}\n                                  width={20}\n                                />\n                              </Link>\n                            </Column>\n                          ))}\n                        </Row>\n                      </Fragment>\n                    </Section>\n                    <Section style={{ lineHeight: \"24px\" }}>&zwj;</Section>\n                    <Text\n                      style={{\n                        color: resolved.mutedTextColor,\n                        fontFamily: TextMenuFooterBundle_fontFamily,\n                        fontSize: \"16px\",\n                        lineHeight: \"24px\",\n                        margin: 0,\n                      }}\n                    >\n                      {resolved.copyright}{\" \"}\n                      <Link\n                        href={resolved.unsubscribeHref}\n                        style={{\n                          color: resolved.textColor,\n                          textDecoration: \"underline\",\n                        }}\n                      >\n                        Unsubscribe\n                      </Link>\n                    </Text>\n                  </Column>\n                </Row>\n              </Fragment>\n            </Section>\n          </Column>\n          <Column>&zwj;</Column>\n        </Row>\n      </Fragment>\n    </Section>\n  );\n};\n\nconst TextMenuFooterBundle_FooterWithTextMenuAndSocials = ({\n  pageBackgroundColor = \"#f1f5f9\",\n  theme = defaultTheme,\n  variant = \"left-logo\",\n  ...props\n}: TextMenuFooterBundle_FooterWithTextMenuAndSocialsProps) => (\n  <Html>\n    <EmailHead>\n      <DefaultFonts />\n      <style\n        dangerouslySetInnerHTML={{\n          __html: TextMenuFooterBundle_responsiveStyles,\n        }}\n      />\n    </EmailHead>\n    <Preview>Footer with text, menu and socials</Preview>\n    <Tailwind config={createEmailTailwindConfig(theme)}>\n      <Body\n        style={{\n          backgroundColor: pageBackgroundColor,\n          fontFamily: TextMenuFooterBundle_fontFamily,\n        }}\n        className=\"m-0\"\n      >\n        <TextMenuFooterBundle_FooterWithTextMenuAndSocialsSection\n          {...props}\n          pageBackgroundColor={pageBackgroundColor}\n          variant={variant}\n        />\n      </Body>\n    </Tailwind>\n  </Html>\n);\n\nTextMenuFooterBundle_FooterWithTextMenuAndSocials.PreviewProps = {\n  theme: defaultTheme,\n  variant: \"left-logo\",\n} satisfies TextMenuFooterBundle_FooterWithTextMenuAndSocialsProps;\n\nconst __TextMenuFooterBundle = {\n  Component: TextMenuFooterBundle_FooterWithTextMenuAndSocials,\n  __NavigationFooterSection:\n    TextMenuFooterBundle_FooterWithTextMenuAndSocialsSection,\n};\n\nconst __TextMenuFooter = __TextMenuFooterBundle.Component;\n\nconst { __NavigationFooterSection } = __TextMenuFooterBundle;\n\nexport interface FooterBrand {\n  logo: {\n    src: string;\n    alt?: string;\n  };\n  href?: string;\n}\n\nexport interface FooterLink {\n  label: string;\n  href: string;\n}\n\nexport interface FooterMenu {\n  heading?: string;\n  links: FooterLink[];\n}\n\nexport interface FooterSocial extends FooterLink {\n  iconSrc: string;\n}\n\nexport interface FooterLegal {\n  copyright?: string;\n  text?: string;\n  unsubscribeHref?: string;\n  preferencesHref?: string;\n}\n\nexport interface NavigationFooterProps {\n  theme?: Parameters<typeof __TwoColumnFooter>[0][\"theme\"];\n  brand?: FooterBrand;\n  description?: string;\n  menus?: FooterMenu[];\n  socials?: FooterSocial[];\n  legal?: FooterLegal;\n  columns?: 1 | 2 | 3;\n  alignment?: \"left\" | \"center\" | \"right\";\n  logoPosition?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  divider?: boolean;\n  oversizedLogo?: boolean;\n  variant?:\n    | Parameters<typeof __DividerMenuFooter>[0][\"variant\"]\n    | Parameters<typeof __TwoColumnFooter>[0][\"variant\"]\n    | Parameters<typeof __ThreeColumnFooter>[0][\"variant\"]\n    | Parameters<typeof __FullMenuFooter>[0][\"variant\"]\n    | Parameters<typeof __TextMenuFooter>[0][\"variant\"];\n}\n\nconst footerBrandValues = (brand: FooterBrand | undefined) => {\n  const { href, logo } = brand ?? {};\n  return {\n    logoAlt: logo?.alt,\n    logoHref: href,\n    logoSrc: logo?.src,\n  };\n};\n\nconst footerLegalValues = (legal: FooterLegal | undefined) => ({\n  copyright: legal?.copyright,\n  preferencesHref: legal?.preferencesHref,\n  text: legal?.text,\n  unsubscribeHref: legal?.unsubscribeHref,\n});\n\nconst footerMenuLinks = (menu: FooterMenu | undefined) => menu?.links;\n\nconst sideVariant = (\n  variant: NavigationFooterProps[\"variant\"],\n  logoPosition: NavigationFooterProps[\"logoPosition\"]\n) => variant ?? (logoPosition === \"right\" ? \"right-logo\" : \"left-logo\");\n\nexport const NavigationFooter = ({\n  theme,\n  brand,\n  description,\n  menus,\n  socials,\n  legal,\n  columns = 2,\n  alignment = \"left\",\n  logoPosition = \"left\",\n  divider = false,\n  oversizedLogo = false,\n  variant: variantOverride,\n}: NavigationFooterProps) => {\n  const footerBrand = footerBrandValues(brand);\n  const footerLegal = footerLegalValues(legal);\n  const [quickMenu, connectMenu, legalMenu] = menus ?? [];\n  const quickLinks = footerMenuLinks(quickMenu);\n  const connectLinks = footerMenuLinks(connectMenu);\n  const legalLinks = footerMenuLinks(legalMenu);\n  const baseProps = {\n    logoAlt: footerBrand.logoAlt,\n    logoHref: footerBrand.logoHref,\n    logoSrc: footerBrand.logoSrc,\n    socials,\n    theme,\n    unsubscribeHref: footerLegal.unsubscribeHref,\n  };\n  if (oversizedLogo) {\n    return (\n      <__FullMenuFooter\n        {...baseProps}\n        links={menus?.flatMap(({ links }) => links)}\n        variant={\n          (variantOverride ?? \"oversized-logo\") as Parameters<\n            typeof __FullMenuFooter\n          >[0][\"variant\"]\n        }\n      />\n    );\n  }\n  if (alignment === \"center\" && columns === 1) {\n    return (\n      <__CenteredFooter {...baseProps} links={quickLinks} socials={socials} />\n    );\n  }\n  if (description) {\n    return (\n      <__TextMenuFooter\n        {...baseProps}\n        copyright={footerLegal.copyright}\n        description={description}\n        quickLinks={quickLinks}\n        variant={\n          sideVariant(variantOverride, logoPosition) as Parameters<\n            typeof __TextMenuFooter\n          >[0][\"variant\"]\n        }\n      />\n    );\n  }\n  if (divider) {\n    return (\n      <__DividerMenuFooter\n        {...baseProps}\n        variant={\n          sideVariant(variantOverride, logoPosition) as Parameters<\n            typeof __DividerMenuFooter\n          >[0][\"variant\"]\n        }\n      />\n    );\n  }\n  if (columns === 3) {\n    return (\n      <__ThreeColumnFooter\n        {...baseProps}\n        connectLinks={connectLinks}\n        legalLinks={legalLinks}\n        quickLinks={quickLinks}\n        variant={\n          sideVariant(variantOverride, logoPosition) as Parameters<\n            typeof __ThreeColumnFooter\n          >[0][\"variant\"]\n        }\n      />\n    );\n  }\n  return (\n    <__TwoColumnFooter\n      {...baseProps}\n      connectLinks={connectLinks}\n      copyright={footerLegal.copyright}\n      quickLinks={quickLinks}\n      variant={\n        sideVariant(variantOverride, logoPosition) as Parameters<\n          typeof __TwoColumnFooter\n        >[0][\"variant\"]\n      }\n    />\n  );\n};\n\nexport const NavigationFooterSection = __NavigationFooterSection;\n\nNavigationFooter.PreviewProps = {\n  alignment: \"left\",\n  columns: 2,\n  divider: false,\n  logoPosition: \"left\",\n  oversizedLogo: false,\n} satisfies NavigationFooterProps;\n",
      "type": "registry:component",
      "target": "components/email/navigation-footer.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"
}