diff --git a/apps/preview/dev/fixtures/airbnb-review.js b/apps/preview/dev/fixtures/airbnb-review.js index cd7fef8fd..bb1038f82 100644 --- a/apps/preview/dev/fixtures/airbnb-review.js +++ b/apps/preview/dev/fixtures/airbnb-review.js @@ -1,7 +1,7 @@ export default { "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Read Joker's review
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n \n \n \n \n \n \n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Airbnb\"
\n \n \n \n \n \n \n
\"Joker\"
\n \n \n \n \n \n \n
\n

Here's what Joker wrote

\n

\"Batsy's stay at my Airbnb Batcave was a riot! Batman surprised with a hidden sense of humor, engaging in epic banter and a prank war. His detective skills impressed, and the Batcave remained spotless. Game night and snacks were a hit, and even during downtime, he couldn't resist a Bat-signal. Hosting Batsy was chaos perfected – if you want a guest with brooding intensity and unexpected laughter, Batman's your Bat. Hahahahahahahahahaha! \"

\n

Now that the review period is over, we’ve posted Joker’s review to your Airbnb profile.

\n

While it’s too late to write a review of your own, you can send your feedback to Joker using your Airbnb message thread.

\n \n \n \n \n
\n \n \n \n \n \n \n
Send My Feedback
\n
\n
\n
\n \n \n \n \n \n \n
\n

Common questions

\n

How do reviews work?

\n

How do star ratings work?

\n

Can I leave a review after 14 days?

\n
\n

Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103

Report unsafe behavior\n \n \n \n \n
\n
\n
\n
\n
\n \n\n", "plain": "Here's what Joker wrote\n\n\"Batsy's stay at my Airbnb Batcave was a riot! Batman surprised with a hidden\nsense of humor, engaging in epic banter and a prank war. His detective skills\nimpressed, and the Batcave remained spotless. Game night and snacks were a hit,\nand even during downtime, he couldn't resist a Bat-signal. Hosting Batsy was\nchaos perfected – if you want a guest with brooding intensity and unexpected\nlaughter, Batman's your Bat. Hahahahahahahahahaha! \"\n\nNow that the review period is over, we’ve posted Joker’s review to your Airbnb\nprofile.\n\nWhile it’s too late to write a review of your own, you can send your feedback to\nJoker using your Airbnb message thread.\n\nSend My Feedback https://airbnb.com/\n\n--------------------------------------------------------------------------------\n\nCommon questions\n\nHow do reviews work? https://airbnb.com/help/article/13\n\nHow do star ratings work? https://airbnb.com/help/article/1257\n\nCan I leave a review after 14 days? https://airbnb.com/help/article/995\n\n--------------------------------------------------------------------------------\n\nAirbnb, Inc., 888 Brannan St, San Francisco, CA 94103\n\nReport unsafe behavior https://airbnb.com", - "source": "import {\n Body,\n Button,\n Container,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface AirbnbReviewEmailProps {\n authorName?: string;\n authorImage?: string;\n reviewText?: string;\n}\n\nconst baseUrl = import.meta.isJsxEmailPreview ? '/static/' : 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n authorName: 'Joker',\n authorImage: `${baseUrl}batman-twilight.jpg`,\n reviewText: `\"Batsy's stay at my Airbnb Batcave was a riot! Batman surprised with a hidden sense of humor, engaging in epic banter and a prank war. His detective skills impressed, and the Batcave remained spotless. Game night and snacks were a hit, and even during downtime, he couldn't resist a Bat-signal. Hosting Batsy was chaos perfected – if you want a guest with brooding intensity and unexpected laughter, Batman's your Bat. Hahahahahahahahahaha! \"`\n} as AirbnbReviewEmailProps;\n\nexport const templateName = 'Airbnb Review';\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '580px'\n};\n\nconst userImage = {\n margin: '0 auto',\n marginBottom: '16px',\n borderRadius: '50%'\n};\n\nconst heading = {\n fontSize: '32px',\n lineHeight: '1.3',\n fontWeight: '700',\n color: '#484848'\n};\n\nconst paragraph = {\n fontSize: '18px',\n lineHeight: '1.4',\n color: '#484848'\n};\n\nconst review = {\n ...paragraph,\n padding: '24px',\n backgroundColor: '#f2f3f3',\n borderRadius: '4px'\n};\n\nconst link = {\n ...paragraph,\n color: '#ff5a5f',\n display: 'block'\n};\n\nconst reportLink = {\n fontSize: '14px',\n color: '#9ca299',\n textDecoration: 'underline'\n};\n\nconst hr = {\n borderColor: '#cccccc',\n margin: '20px 0'\n};\n\nconst footer = {\n color: '#9ca299',\n fontSize: '14px',\n marginBottom: '10px'\n};\n\nexport const Template = ({ authorName, authorImage, reviewText }: AirbnbReviewEmailProps) => {\n const previewText = `Read ${authorName}'s review`;\n\n return (\n \n \n {previewText}\n\n \n
\n \n
\n \"Airbnb\"\n
\n
\n {authorName}\n
\n
\n \n Here's what {authorName} wrote\n {reviewText}\n \n Now that the review period is over, we’ve posted {authorName}\n ’s review to your Airbnb profile.\n \n \n While it’s too late to write a review of your own, you can send your feedback to{' '}\n {authorName} using your Airbnb message thread.\n \n \n Send My Feedback\n \n \n
\n\n
\n\n
\n \n Common questions\n \n \n How do reviews work?\n \n \n \n \n How do star ratings work?\n \n \n \n \n Can I leave a review after 14 days?\n \n \n
\n Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103\n \n Report unsafe behavior\n \n \n
\n \n
\n \n \n );\n};\n", + "source": "import {\n Body,\n Button,\n Container,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface AirbnbReviewEmailProps {\n authorName?: string;\n authorImage?: string;\n reviewText?: string;\n}\n\nconst baseUrl = import.meta.isJsxEmailPreview ? '/static/' : 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n authorName: 'Joker',\n authorImage: `${baseUrl}batman-twilight.jpg`,\n reviewText: `\"Batsy's stay at my Airbnb Batcave was a riot! Batman surprised with a hidden sense of humor, engaging in epic banter and a prank war. His detective skills impressed, and the Batcave remained spotless. Game night and snacks were a hit, and even during downtime, he couldn't resist a Bat-signal. Hosting Batsy was chaos perfected – if you want a guest with brooding intensity and unexpected laughter, Batman's your Bat. Hahahahahahahahahaha! \"`\n} as AirbnbReviewEmailProps;\n\nexport const templateName = 'Airbnb Review';\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '580px'\n};\n\nconst userImage = {\n margin: '0 auto',\n marginBottom: '16px',\n borderRadius: '50%'\n};\n\nconst heading = {\n fontSize: '32px',\n lineHeight: '1.3',\n fontWeight: '700',\n color: '#484848'\n};\n\nconst paragraph = {\n fontSize: '18px',\n lineHeight: '1.4',\n color: '#484848'\n};\n\nconst review = {\n ...paragraph,\n padding: '24px',\n backgroundColor: '#f2f3f3',\n borderRadius: '4px'\n};\n\nconst link = {\n ...paragraph,\n color: '#ff5a5f',\n display: 'block'\n};\n\nconst reportLink = {\n fontSize: '14px',\n color: '#9ca299',\n textDecoration: 'underline'\n};\n\nconst hr = {\n borderColor: '#cccccc',\n margin: '20px 0'\n};\n\nconst footer = {\n color: '#9ca299',\n fontSize: '14px',\n marginBottom: '10px'\n};\n\nexport const Template = ({ authorName, authorImage, reviewText }: AirbnbReviewEmailProps) => {\n const previewText = `Read ${authorName}'s review`;\n\n return (\n \n \n {previewText}\n\n \n
\n \n
\n \"Airbnb\"\n
\n
\n {authorName}\n
\n
\n \n Here's what {authorName} wrote\n {reviewText}\n \n Now that the review period is over, we’ve posted {authorName}\n ’s review to your Airbnb profile.\n \n \n While it’s too late to write a review of your own, you can send your feedback to{' '}\n {authorName} using your Airbnb message thread.\n \n \n Send My Feedback\n \n \n
\n\n
\n\n
\n \n Common questions\n \n \n How do reviews work?\n \n \n \n \n How do star ratings work?\n \n \n \n \n Can I leave a review after 14 days?\n \n \n
\n Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103\n \n Report unsafe behavior\n \n \n
\n \n
\n \n \n );\n};\n", "sourceFile": "emails/airbnb-review.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/airbnb-review.tsx", "templateName": "Airbnb Review" diff --git a/apps/preview/dev/fixtures/apple-receipt.js b/apps/preview/dev/fixtures/apple-receipt.js index 7782927a6..879781c05 100644 --- a/apps/preview/dev/fixtures/apple-receipt.js +++ b/apps/preview/dev/fixtures/apple-receipt.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Apple Receipt
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\"Apple\n

Receipt

\n
\n
\n \n \n \n \n \n \n
\n

Save 3% on all your Apple purchases with Apple Card.1 Apply and use in minutes2

\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n

APPLE ID

bruce@wayne.com\n
\n \n \n \n \n \n \n
\n

INVOICE DATE

\n

18 Jan 2023

\n
\n \n \n \n \n \n \n \n
\n

ORDER ID

ML4F5L8522\n 		\n

DOCUMENT NO.

\n

186623754793

\n
\n
\n 		\n

BILLED TO

\n

Visa .... 7461 (Apple Pay)

\n

Bruce Wayne

\n

2125 Chestnut St

\n

San Francisco, CA 94123

\n

USA

\n
\n
\n \n \n \n \n \n \n
\n

App Store

\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\"HBO\n

HBO Max: Stream TV & Movies

\n

HBO Max Ad-Free (Monthly)

\n

Renews Aug 20, 2023

Write a Review|Report a Problem\n 		\n

$14.99

\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n

TOTAL

\n 		\n

$14.99

\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Apple
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n

Save 3% on all your Apple purchases.

\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"AppleApply and use in minutes
\n
\n
\n

1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily Cash can be applied by you as a credit on your statement balance. 3% is the total amount of Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more details on Daily Cash and qualifying transactions.

\n

2. Subject to credit approval.

\n

To access and use all the features of Apple Card, you must add Apple Card to Wallet on an iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or iPadOS by going to Settings > General > Software Update. Tap Download and Install.

\n

Available for qualifying applicants in the United States.

\n

Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.

\n

If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with questions about Apple Card.

\n

Privacy: We use a Subscriber ID to provide reports to developers.

\n

Get help with subscriptions and purchases.Visit Apple Support.

\n

Learn how to manage your password preferences for iTunes, Apple Books, and App Store purchases.

\n

You have the option to stop receiving email receipts for your subscription renewals. If you have opted out, you can still view your receipts in your account under Purchase History. To manage receipts or to opt in again, go to Account Settings.

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Apple
\n
\n

Account Settings • Terms of Sale • Privacy Policy

\n

Copyright © 2023 Apple Inc.
All rights reserved

\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Apple Receipt
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\"Apple\n

Receipt

\n
\n
\n \n \n \n \n \n \n
\n

Save 3% on all your Apple purchases with Apple Card.1 Apply and use in minutes2

\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n

APPLE ID

bruce@wayne.com\n
\n \n \n \n \n \n \n
\n

INVOICE DATE

\n

18 Jan 2023

\n
\n \n \n \n \n \n \n \n
\n

ORDER ID

ML4F5L8522\n 		\n

DOCUMENT NO.

\n

186623754793

\n
\n
\n 		\n

BILLED TO

\n

Visa .... 7461 (Apple Pay)

\n

Bruce Wayne

\n

2125 Chestnut St

\n

San Francisco, CA 94123

\n

USA

\n
\n
\n \n \n \n \n \n \n
\n

App Store

\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\"HBO\n

HBO Max: Stream TV & Movies

\n

HBO Max Ad-Free (Monthly)

\n

Renews Aug 20, 2023

Write a Review|Report a Problem\n 		\n

$14.99

\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n

TOTAL

\n 		\n

$14.99

\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Apple
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n

Save 3% on all your Apple purchases.

\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"AppleApply and use in minutes
\n
\n
\n

1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily Cash can be applied by you as a credit on your statement balance. 3% is the total amount of Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more details on Daily Cash and qualifying transactions.

\n

2. Subject to credit approval.

\n

To access and use all the features of Apple Card, you must add Apple Card to Wallet on an iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or iPadOS by going to Settings > General > Software Update. Tap Download and Install.

\n

Available for qualifying applicants in the United States.

\n

Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.

\n

If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with questions about Apple Card.

\n

Privacy: We use a Subscriber ID to provide reports to developers.

\n

Get help with subscriptions and purchases.Visit Apple Support.

\n

Learn how to manage your password preferences for iTunes, Apple Books, and App Store purchases.

\n

You have the option to stop receiving email receipts for your subscription renewals. If you have opted out, you can still view your receipts in your account under Purchase History. To manage receipts or to opt in again, go to Account Settings.

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Apple
\n
\n

Account Settings • Terms of Sale • Privacy Policy

\n

Copyright © 2023 Apple Inc.
All rights reserved

\n
\n
\n
\n \n\n", "plain": "Receipt\n\nSave 3% on all your Apple purchases with Apple Card.1 Apply and use in minutes\nhttps://www.apple.com/apple-card2\n\nAPPLE ID\n\nbruce@wayne.com\n\nINVOICE DATE\n\n18 Jan 2023\n\nORDER ID\n\nML4F5L8522\n\nDOCUMENT NO.\n\n186623754793\n\nBILLED TO\n\nVisa .... 7461 (Apple Pay)\n\nBruce Wayne\n\n2125 Chestnut St\n\nSan Francisco, CA 94123\n\nUSA\n\nApp Store\n\nHBO Max: Stream TV & Movies\n\nHBO Max Ad-Free (Monthly)\n\nRenews Aug 20, 2023\n\nWrite a Review\nhttps://userpub.itunes.apple.com/WebObjects/MZUserPublishing.woa/wa/addUserReview?cc=us&id=1497977514&o=i&type=Subscription%20Renewal|Report\na Problem\nhttps://buy.itunes.apple.com/WebObjects/MZFinance.woa/wa/reportAProblem?a=1497977514&cc=us&d=683263808&o=i&p=29065684906671&pli=29092219632071&s=1\n\n$14.99\n\n--------------------------------------------------------------------------------\n\nTOTAL\n\n$14.99\n\n--------------------------------------------------------------------------------\n\n\n\nSave 3% on all your Apple purchases.\n\nApply and use in minutes\nhttps://wallet.apple.com/apple-card/setup/feature/ccs?referrer=cid%3Dapy-120-100003\n\n--------------------------------------------------------------------------------\n\n1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card\nwhen transactions post to your Apple Card account. If you do not have an Apple\nCash card, Daily Cash can be applied by you as a credit on your statement\nbalance. 3% is the total amount of Daily Cash earned for these purchases. See\nthe Apple Card Customer Agreement for more details on Daily Cash and qualifying\ntransactions.\n\n2. Subject to credit approval.\n\nTo access and use all the features of Apple Card, you must add Apple Card to\nWallet on an iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the\nlatest version of iOS or iPadOS by going to Settings > General > Software\nUpdate. Tap Download and Install.\n\nAvailable for qualifying applicants in the United States.\n\nApple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.\n\nIf you reside in the US territories, please call Goldman Sachs at 877-255-5923\nwith questions about Apple Card.\n\nPrivacy: We use a Subscriber ID http://support.apple.com/kb/HT207233to provide\nreports to developers.\n\nGet help with subscriptions and purchases.Visit Apple Support.\nhttps://support.apple.com/billing?cid=email_receipt\n\nLearn how to manage your password preferences\nhttps://support.apple.com/kb/HT204030?cid=email_receipt_itunes_article_HT204030\nfor iTunes, Apple Books, and App Store purchases.\n\nYou have the option to stop receiving email receipts for your subscription\nrenewals. If you have opted out, you can still view your receipts in your\naccount under Purchase History. To manage receipts or to opt in again, go to\nAccount Settings.\nhttps://finance-app.itunes.apple.com/account/subscriptions?unsupportedRedirectUrl=https://apps.apple.com/US/invoice\n\n\n\nAccount Settings\nhttps://buy.itunes.apple.com/WebObjects/MZFinance.woa/wa/accountSummary?mt=8 •\nTerms of Sale https://www.apple.com/legal/itunes/us/sales.html • Privacy Policy\nhttps://www.apple.com/legal/privacy/\n\nCopyright © 2023 Apple Inc.\nAll rights reserved https://www.apple.com/legal/", - "source": "import {\n Body,\n Container,\n Column,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nconst main = {\n fontFamily: '\"Helvetica Neue\",Helvetica,Arial,sans-serif',\n backgroundColor: '#ffffff'\n};\n\nconst resetText = {\n margin: '0',\n padding: '0',\n lineHeight: 1.4\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '660px'\n};\n\nconst tableCell = { display: 'table-cell' };\n\nconst heading = {\n fontSize: '32px',\n fontWeight: '300',\n color: '#888888'\n};\n\nconst cupomText = {\n textAlign: 'center' as const,\n margin: '36px 0 40px 0',\n fontSize: '14px',\n fontWeight: '500',\n color: '#111111'\n};\n\nconst supStyle = {\n fontWeight: '300'\n};\n\nconst informationTable = {\n borderCollapse: 'collapse' as const,\n borderSpacing: '0px',\n color: 'rgb(51,51,51)',\n backgroundColor: 'rgb(250,250,250)',\n borderRadius: '3px',\n fontSize: '12px'\n};\n\nconst informationTableRow = {\n height: '46px'\n};\n\nconst informationTableColumn = {\n paddingLeft: '20px',\n borderStyle: 'solid',\n borderColor: 'white',\n borderWidth: '0px 1px 1px 0px',\n height: '44px'\n};\n\nconst informationTableLabel = {\n ...resetText,\n color: 'rgb(102,102,102)',\n fontSize: '10px'\n};\n\nconst informationTableValue = {\n fontSize: '12px',\n margin: '0',\n padding: '0',\n lineHeight: 1.4\n};\n\nconst productTitleTable = {\n ...informationTable,\n margin: '30px 0 15px 0',\n height: '24px'\n};\n\nconst productsTitle = {\n background: '#fafafa',\n paddingLeft: '10px',\n fontSize: '14px',\n fontWeight: '500',\n margin: '0'\n};\n\nconst productIcon = {\n margin: '0 0 0 20px',\n borderRadius: '14px',\n border: '1px solid rgba(128,128,128,0.2)'\n};\n\nconst productTitle = { fontSize: '12px', fontWeight: '600', ...resetText };\n\nconst productDescription = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n ...resetText\n};\n\nconst productLink = {\n fontSize: '12px',\n color: 'rgb(0,112,201)',\n textDecoration: 'none'\n};\n\nconst divisor = {\n marginLeft: '4px',\n marginRight: '4px',\n color: 'rgb(51,51,51)',\n fontWeight: 200\n};\n\nconst productPriceTotal = {\n margin: '0',\n color: 'rgb(102,102,102)',\n fontSize: '10px',\n fontWeight: '600',\n padding: '0px 30px 0px 0px',\n textAlign: 'right' as const\n};\n\nconst productPrice = {\n fontSize: '12px',\n fontWeight: '600',\n margin: '0'\n};\n\nconst productPriceLarge = {\n margin: '0px 20px 0px 0px',\n fontSize: '16px',\n fontWeight: '600',\n whiteSpace: 'nowrap' as const,\n textAlign: 'right' as const\n};\n\nconst productPriceWrapper = {\n display: 'table-cell',\n padding: '0px 20px 0px 0px',\n width: '100px',\n verticalAlign: 'top'\n};\n\nconst productPriceLine = { margin: '30px 0 0 0' };\n\nconst productPriceVerticalLine = {\n height: '48px',\n borderLeft: '1px solid',\n borderColor: 'rgb(238,238,238)'\n};\n\nconst productPriceLargeWrapper = { display: 'table-cell', width: '90px' };\n\nconst productPriceLineBottom = { margin: '0 0 75px 0' };\n\nconst block = { display: 'block' };\n\nconst ctaTitle = {\n display: 'block',\n margin: '15px 0 0 0'\n};\n\nconst ctaText = { fontSize: '24px', fontWeight: '500' };\n\nconst walletWrapper = { display: 'table-cell', margin: '10px 0 0 0' };\n\nconst walletLink = { color: 'rgb(0,126,255)', textDecoration: 'none' };\n\nconst walletImage = {\n display: 'inherit',\n paddingRight: '8px',\n verticalAlign: 'middle'\n};\n\nconst walletBottomLine = { margin: '65px 0 20px 0' };\n\nconst footerText = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n margin: '0',\n lineHeight: 'auto',\n marginBottom: '16px'\n};\n\nconst footerTextCenter = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n margin: '20px 0',\n lineHeight: 'auto',\n textAlign: 'center' as const\n};\n\nconst footerLink = { color: 'rgb(0,115,255)' };\n\nconst footerIcon = { display: 'block', margin: '40px 0 0 0' };\n\nconst footerLinksWrapper = {\n margin: '8px 0 0 0',\n textAlign: 'center' as const,\n fontSize: '12px',\n color: 'rgb(102,102,102)'\n};\n\nconst footerCopyright = {\n margin: '25px 0 0 0',\n textAlign: 'center' as const,\n fontSize: '12px',\n color: 'rgb(102,102,102)'\n};\n\nconst walletLinkText = {\n fontSize: '14px',\n fontWeight: '400',\n textDecoration: 'none'\n};\n\nexport const templateName = 'Apple Receipt';\n\nexport const Template = () => (\n \n \n Apple Receipt\n\n \n \n
\n \n \n \"Apple\n \n\n \n Receipt\n \n \n
\n
\n \n Save 3% on all your Apple purchases with Apple Card.\n 1{' '}\n Apply and use in minutes\n 2\n \n
\n
\n \n \n
\n \n \n APPLE ID\n \n bruce@wayne.com\n \n \n \n\n \n \n INVOICE DATE\n 18 Jan 2023\n \n \n\n \n \n ORDER ID\n \n ML4F5L8522\n \n \n \n DOCUMENT NO.\n 186623754793\n \n \n
\n \n \n BILLED TO\n Visa .... 7461 (Apple Pay)\n Bruce Wayne\n 2125 Chestnut St\n San Francisco, CA 94123\n USA\n \n \n
\n
\n App Store\n
\n
\n \n \n \n \n \n HBO Max: Stream TV & Movies\n HBO Max Ad-Free (Monthly)\n Renews Aug 20, 2023\n \n Write a Review\n \n |\n \n Report a Problem\n \n \n\n \n $14.99\n \n \n
\n
\n
\n \n \n TOTAL\n \n \n \n $14.99\n \n \n
\n
\n
\n \n \n \"Apple\n \n \n
\n
\n \n \n Save 3% on all your Apple purchases.\n \n \n
\n
\n \n \n \n \n Apply and use in minutes\n \n \n \n
\n
\n \n 1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when\n transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily\n Cash can be applied by you as a credit on your statement balance. 3% is the total amount\n of Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more\n details on Daily Cash and qualifying transactions.\n \n 2. Subject to credit approval.\n \n To access and use all the features of Apple Card, you must add Apple Card to Wallet on an\n iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or\n iPadOS by going to Settings > General > Software Update. Tap Download and Install.\n \n Available for qualifying applicants in the United States.\n \n Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.\n \n \n If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with\n questions about Apple Card.\n \n \n Privacy: We use a\n \n {' '}\n Subscriber ID{' '}\n \n to provide reports to developers.\n \n \n Get help with subscriptions and purchases.\n \n Visit Apple Support.\n \n \n \n Learn how to{' '}\n \n manage your password preferences\n {' '}\n for iTunes, Apple Books, and App Store purchases.\n \n\n \n {' '}\n You have the option to stop receiving email receipts for your subscription renewals. If\n you have opted out, you can still view your receipts in your account under Purchase\n History. To manage receipts or to opt in again, go to{' '}\n \n Account Settings.\n \n \n
\n \n \n \"Apple\n \n \n
\n \n \n Account Settings\n {' '}\n • Terms of Sale •{' '}\n Privacy Policy \n \n \n Copyright © 2023 Apple Inc.
{' '}\n All rights reserved\n \n \n \n \n);\n", + "source": "import {\n Body,\n Container,\n Column,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nconst main = {\n fontFamily: '\"Helvetica Neue\",Helvetica,Arial,sans-serif',\n backgroundColor: '#ffffff'\n};\n\nconst resetText = {\n margin: '0',\n padding: '0',\n lineHeight: 1.4\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '660px'\n};\n\nconst tableCell = { display: 'table-cell' };\n\nconst heading = {\n fontSize: '32px',\n fontWeight: '300',\n color: '#888888'\n};\n\nconst cupomText = {\n textAlign: 'center' as const,\n margin: '36px 0 40px 0',\n fontSize: '14px',\n fontWeight: '500',\n color: '#111111'\n};\n\nconst supStyle = {\n fontWeight: '300'\n};\n\nconst informationTable = {\n borderCollapse: 'collapse' as const,\n borderSpacing: '0px',\n color: 'rgb(51,51,51)',\n backgroundColor: 'rgb(250,250,250)',\n borderRadius: '3px',\n fontSize: '12px'\n};\n\nconst informationTableRow = {\n height: '46px'\n};\n\nconst informationTableColumn = {\n paddingLeft: '20px',\n borderStyle: 'solid',\n borderColor: 'white',\n borderWidth: '0px 1px 1px 0px',\n height: '44px'\n};\n\nconst informationTableLabel = {\n ...resetText,\n color: 'rgb(102,102,102)',\n fontSize: '10px'\n};\n\nconst informationTableValue = {\n fontSize: '12px',\n margin: '0',\n padding: '0',\n lineHeight: 1.4\n};\n\nconst productTitleTable = {\n ...informationTable,\n margin: '30px 0 15px 0',\n height: '24px'\n};\n\nconst productsTitle = {\n background: '#fafafa',\n paddingLeft: '10px',\n fontSize: '14px',\n fontWeight: '500',\n margin: '0'\n};\n\nconst productIcon = {\n margin: '0 0 0 20px',\n borderRadius: '14px',\n border: '1px solid rgba(128,128,128,0.2)'\n};\n\nconst productTitle = { fontSize: '12px', fontWeight: '600', ...resetText };\n\nconst productDescription = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n ...resetText\n};\n\nconst productLink = {\n fontSize: '12px',\n color: 'rgb(0,112,201)',\n textDecoration: 'none'\n};\n\nconst divisor = {\n marginLeft: '4px',\n marginRight: '4px',\n color: 'rgb(51,51,51)',\n fontWeight: 200\n};\n\nconst productPriceTotal = {\n margin: '0',\n color: 'rgb(102,102,102)',\n fontSize: '10px',\n fontWeight: '600',\n padding: '0px 30px 0px 0px',\n textAlign: 'right' as const\n};\n\nconst productPrice = {\n fontSize: '12px',\n fontWeight: '600',\n margin: '0'\n};\n\nconst productPriceLarge = {\n margin: '0px 20px 0px 0px',\n fontSize: '16px',\n fontWeight: '600',\n whiteSpace: 'nowrap' as const,\n textAlign: 'right' as const\n};\n\nconst productPriceWrapper = {\n display: 'table-cell',\n padding: '0px 20px 0px 0px',\n width: '100px',\n verticalAlign: 'top'\n};\n\nconst productPriceLine = { margin: '30px 0 0 0' };\n\nconst productPriceVerticalLine = {\n height: '48px',\n borderLeft: '1px solid',\n borderColor: 'rgb(238,238,238)'\n};\n\nconst productPriceLargeWrapper = { display: 'table-cell', width: '90px' };\n\nconst productPriceLineBottom = { margin: '0 0 75px 0' };\n\nconst block = { display: 'block' };\n\nconst ctaTitle = {\n display: 'block',\n margin: '15px 0 0 0'\n};\n\nconst ctaText = { fontSize: '24px', fontWeight: '500' };\n\nconst walletWrapper = { display: 'table-cell', margin: '10px 0 0 0' };\n\nconst walletLink = { color: 'rgb(0,126,255)', textDecoration: 'none' };\n\nconst walletImage = {\n display: 'inherit',\n paddingRight: '8px',\n verticalAlign: 'middle'\n};\n\nconst walletBottomLine = { margin: '65px 0 20px 0' };\n\nconst footerText = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n margin: '0',\n lineHeight: 'auto',\n marginBottom: '16px'\n};\n\nconst footerTextCenter = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n margin: '20px 0',\n lineHeight: 'auto',\n textAlign: 'center' as const\n};\n\nconst footerLink = { color: 'rgb(0,115,255)' };\n\nconst footerIcon = { display: 'block', margin: '40px 0 0 0' };\n\nconst footerLinksWrapper = {\n margin: '8px 0 0 0',\n textAlign: 'center' as const,\n fontSize: '12px',\n color: 'rgb(102,102,102)'\n};\n\nconst footerCopyright = {\n margin: '25px 0 0 0',\n textAlign: 'center' as const,\n fontSize: '12px',\n color: 'rgb(102,102,102)'\n};\n\nconst walletLinkText = {\n fontSize: '14px',\n fontWeight: '400',\n textDecoration: 'none'\n};\n\nexport const templateName = 'Apple Receipt';\n\nexport const Template = () => (\n \n \n Apple Receipt\n\n \n \n
\n \n \n \"Apple\n \n\n \n Receipt\n \n \n
\n
\n \n Save 3% on all your Apple purchases with Apple Card.\n 1{' '}\n Apply and use in minutes\n 2\n \n
\n
\n \n \n
\n \n \n APPLE ID\n \n bruce@wayne.com\n \n \n \n\n \n \n INVOICE DATE\n 18 Jan 2023\n \n \n\n \n \n ORDER ID\n \n ML4F5L8522\n \n \n \n DOCUMENT NO.\n 186623754793\n \n \n
\n \n \n BILLED TO\n Visa .... 7461 (Apple Pay)\n Bruce Wayne\n 2125 Chestnut St\n San Francisco, CA 94123\n USA\n \n \n
\n
\n App Store\n
\n
\n \n \n \n \n \n HBO Max: Stream TV & Movies\n HBO Max Ad-Free (Monthly)\n Renews Aug 20, 2023\n \n Write a Review\n \n |\n \n Report a Problem\n \n \n\n \n $14.99\n \n \n
\n
\n
\n \n \n TOTAL\n \n \n \n $14.99\n \n \n
\n
\n
\n \n \n \"Apple\n \n \n
\n
\n \n \n Save 3% on all your Apple purchases.\n \n \n
\n
\n \n \n \n \n Apply and use in minutes\n \n \n \n
\n
\n \n 1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when\n transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily\n Cash can be applied by you as a credit on your statement balance. 3% is the total amount\n of Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more\n details on Daily Cash and qualifying transactions.\n \n 2. Subject to credit approval.\n \n To access and use all the features of Apple Card, you must add Apple Card to Wallet on an\n iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or\n iPadOS by going to Settings > General > Software Update. Tap Download and Install.\n \n Available for qualifying applicants in the United States.\n \n Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.\n \n \n If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with\n questions about Apple Card.\n \n \n Privacy: We use a\n \n {' '}\n Subscriber ID{' '}\n \n to provide reports to developers.\n \n \n Get help with subscriptions and purchases.\n \n Visit Apple Support.\n \n \n \n Learn how to{' '}\n \n manage your password preferences\n {' '}\n for iTunes, Apple Books, and App Store purchases.\n \n\n \n {' '}\n You have the option to stop receiving email receipts for your subscription renewals. If\n you have opted out, you can still view your receipts in your account under Purchase\n History. To manage receipts or to opt in again, go to{' '}\n \n Account Settings.\n \n \n
\n \n \n \"Apple\n \n \n
\n \n \n Account Settings\n {' '}\n • Terms of Sale •{' '}\n Privacy Policy \n \n \n Copyright © 2023 Apple Inc.
{' '}\n All rights reserved\n \n \n \n \n);\n", "sourceFile": "emails/apple-receipt.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/apple-receipt.tsx", "templateName": "Apple Receipt" diff --git a/apps/preview/dev/fixtures/codepen-challengers.js b/apps/preview/dev/fixtures/codepen-challengers.js index 9a38265c5..403296a0e 100644 --- a/apps/preview/dev/fixtures/codepen-challengers.js +++ b/apps/preview/dev/fixtures/codepen-challengers.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
#CodePenChallenge: Cubes
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n \n \n \n \n \n \n
\"codepen\"
\n
\n
\n \n \n \n \n \n \n
\n

View this Challenge on CodePen

\n

This week: #CodePenChallenge:

Cubes

\n

\n \n \n \n \n \n \n
\n

The Shape challenge continues!

\n

Last week, we kicked things off with round shapes. We \"rounded\" up the Pens from week one in our #CodePenChallenge: Round collection.

\n

This week, we move on to cubes 🧊

\n

Creating cubes in the browser is all about mastery of illusion. Take control of perspective and shadows and you can make the magic of 3D on a flat screen 🧙

\n

This week is a fun chance to work on your CSS shape-building skills, or dig into a 3D JavaScript library like Three.js.

\n

This week's starter template features an ice cube emoji to help inspire a \"cool\" idea for your Pen. As always, the template is just as jumping off point. Feel free to incorporate the 🧊 in your creation, add more elements, or freeze it out completely and start over from scratch!

\n

💪 Your Challenge: create a Pen that includes cube shapes.

\"codepen\"\n \n \n \n \n \n \n
\"codepen\"\n

CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level.

\n \n \n \n \n \n \n
Learn More
\n
\n
\n

To participate: Create a Pen → and tag it codepenchallenge and cpc-cubes. We'll be watching and gathering the Pens into a Collection, and sharing on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

IDEAS!

\n \n \n \n \n \n \n
🌟

This week we move from 2 dimensions to three! Maybe you could exercise your perspective in CSS to create a 3D cube. Or, you can try out creating 3D shapes in JavaScript, using WebGL or building a Three.js scene.

\n
\n \n \n \n \n \n \n
🌟

There's more to cubes than just six square sides. There are variations on the cube that could be fun to play with this week: cuboid shapes are hexahedrons with faces that aren't always squares. And if you want to really push the boundaries of shape, consider the 4 dimensional tesseract!

\n
\n \n \n \n \n \n \n
🌟

Here's a mind-bending idea that can combine the round shapes from week one with this week's cube theme: Spherical Cubes 😳 Solving longstanding mathematical mysteries is probably outside the scope of a CodePen challenge, but you could use front-end tools to explore fitting spheres into cubes, or vice-versa.

\n
\n 		\n

RESOURCES!

\n \n \n \n \n \n \n
📖

Learn all about How CSS Perspective Works and how to build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks. Or, check out stunning examples of WebGL cubes from Matthias Hurrle: Just Ice and Posing.

\n
\n \n \n \n \n \n \n
📖

Want to go beyond the square cube? Draw inspiration from EntropyReversed's Pulsating Tesseract, Josetxu's Rainbow Cuboid Loader, or Ana Tudor's Pure CSS cuboid jellyfish.

\n
\n \n \n \n \n \n \n
📖

Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's Cube Sphere, Munir Safi's 3D Sphere to Cube Animation With Virtual Trackball and Ana Tudor's Infinitely unpack prism for more mindbending cube concepts that test the boundaries of how shapes interact with each other.

\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Go to Challenge Page
\n
\n \n \n \n \n \n \n
\n

You can adjust your email preferences any time, or instantly opt out of emails of this kind. Need help with anything? Hit up support.

\n
\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
#CodePenChallenge: Cubes
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n \n \n \n \n \n \n
\"codepen\"
\n
\n
\n \n \n \n \n \n \n
\n

View this Challenge on CodePen

\n

This week: #CodePenChallenge:

Cubes

\n

\n \n \n \n \n \n \n
\n

The Shape challenge continues!

\n

Last week, we kicked things off with round shapes. We \"rounded\" up the Pens from week one in our #CodePenChallenge: Round collection.

\n

This week, we move on to cubes 🧊

\n

Creating cubes in the browser is all about mastery of illusion. Take control of perspective and shadows and you can make the magic of 3D on a flat screen 🧙

\n

This week is a fun chance to work on your CSS shape-building skills, or dig into a 3D JavaScript library like Three.js.

\n

This week's starter template features an ice cube emoji to help inspire a \"cool\" idea for your Pen. As always, the template is just as jumping off point. Feel free to incorporate the 🧊 in your creation, add more elements, or freeze it out completely and start over from scratch!

\n

💪 Your Challenge: create a Pen that includes cube shapes.

\"codepen\"\n \n \n \n \n \n \n
\"codepen\"\n

CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level.

\n \n \n \n \n \n \n
Learn More
\n
\n
\n

To participate: Create a Pen → and tag it codepenchallenge and cpc-cubes. We'll be watching and gathering the Pens into a Collection, and sharing on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

IDEAS!

\n \n \n \n \n \n \n
🌟

This week we move from 2 dimensions to three! Maybe you could exercise your perspective in CSS to create a 3D cube. Or, you can try out creating 3D shapes in JavaScript, using WebGL or building a Three.js scene.

\n
\n \n \n \n \n \n \n
🌟

There's more to cubes than just six square sides. There are variations on the cube that could be fun to play with this week: cuboid shapes are hexahedrons with faces that aren't always squares. And if you want to really push the boundaries of shape, consider the 4 dimensional tesseract!

\n
\n \n \n \n \n \n \n
🌟

Here's a mind-bending idea that can combine the round shapes from week one with this week's cube theme: Spherical Cubes 😳 Solving longstanding mathematical mysteries is probably outside the scope of a CodePen challenge, but you could use front-end tools to explore fitting spheres into cubes, or vice-versa.

\n
\n 		\n

RESOURCES!

\n \n \n \n \n \n \n
📖

Learn all about How CSS Perspective Works and how to build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks. Or, check out stunning examples of WebGL cubes from Matthias Hurrle: Just Ice and Posing.

\n
\n \n \n \n \n \n \n
📖

Want to go beyond the square cube? Draw inspiration from EntropyReversed's Pulsating Tesseract, Josetxu's Rainbow Cuboid Loader, or Ana Tudor's Pure CSS cuboid jellyfish.

\n
\n \n \n \n \n \n \n
📖

Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's Cube Sphere, Munir Safi's 3D Sphere to Cube Animation With Virtual Trackball and Ana Tudor's Infinitely unpack prism for more mindbending cube concepts that test the boundaries of how shapes interact with each other.

\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Go to Challenge Page
\n
\n \n \n \n \n \n \n
\n

You can adjust your email preferences any time, or instantly opt out of emails of this kind. Need help with anything? Hit up support.

\n
\n
\n
\n
\n \n\n", "plain": "View this Challenge on CodePen\n\n\nTHIS WEEK: #CODEPENCHALLENGE:\n\nCUBES\n\nThe Shape challenge continues!\n\nLast week, we kicked things off with round shapes. We \"rounded\" up the Pens from\nweek one in our #CodePenChallenge: Round collection.\n\nThis week, we move on to cubes 🧊\n\nCreating cubes in the browser is all about mastery of illusion. Take control of\nperspective and shadows and you can make the magic of 3D on a flat screen 🧙\n\nThis week is a fun chance to work on your CSS shape-building skills, or dig into\na 3D JavaScript library like Three.js.\n\nThis week's starter template features an ice cube emoji to help inspire a \"cool\"\nidea for your Pen. As always, the template is just as jumping off point. Feel\nfree to incorporate the 🧊 in your creation, add more elements, or freeze it out\ncompletely and start over from scratch!\n\n💪 Your Challenge: create a Pen that includes cube shapes.\n\nCodePen PRO combines a bunch of features that can help any front-end designer or\ndeveloper at any experience level.\n\nLearn More\n\nTo participate: Create a Pen → and tag it codepenchallenge and cpc-cubes. We'll\nbe watching and gathering the Pens into a Collection, and sharing on Twitter and\nInstagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).\n\nIDEAS!\n\n🌟\n\nThis week we move from 2 dimensions to three! Maybe you could exercise your\nperspective in CSS to create a 3D cube. Or, you can try out creating 3D shapes\nin JavaScript, using WebGL or building a Three.js scene.\n\n🌟\n\nThere's more to cubes than just six square sides. There are variations on the\ncube that could be fun to play with this week: cuboid shapes are hexahedrons\nwith faces that aren't always squares. And if you want to really push the\nboundaries of shape, consider the 4 dimensional tesseract!\n\n🌟\n\nHere's a mind-bending idea that can combine the round shapes from week one with\nthis week's cube theme: Spherical Cubes 😳 Solving longstanding mathematical\nmysteries is probably outside the scope of a CodePen challenge, but you could\nuse front-end tools to explore fitting spheres into cubes, or vice-versa.\n\nRESOURCES!\n\n📖\n\nLearn all about How CSS Perspective Works and how to build a 3D CSS cube from\nscratch in Amit Sheen's in-depth tutorial for CSS-Tricks. Or, check out stunning\nexamples of WebGL cubes from Matthias Hurrle: Just Ice and Posing.\n\n📖\n\nWant to go beyond the square cube? Draw inspiration from EntropyReversed's\nPulsating Tesseract, Josetxu's Rainbow Cuboid Loader, or Ana Tudor's Pure CSS\ncuboid jellyfish.\n\n📖\n\nDid that spherical cubes concept pique your interest? Explore Ryan Mulligan's\nCube Sphere, Munir Safi's 3D Sphere to Cube Animation With Virtual Trackball and\nAna Tudor's Infinitely unpack prism for more mindbending cube concepts that test\nthe boundaries of how shapes interact with each other.\n\nGo to Challenge Page\n\nYou can adjust your email preferences any time, or instantly opt out of emails\nof this kind. Need help with anything? Hit up support.", - "source": "import {\n Body,\n Button,\n Container,\n Head,\n Heading,\n Column,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text,\n Row\n} from 'jsx-email';\n\nconst main = {\n fontFamily: '\"Google Sans\",Roboto,RobotoDraft,Helvetica,Arial,sans-serif',\n backgroundColor: '#505050',\n margin: '0'\n};\n\nconst imgHeader = {\n margin: 'auto'\n};\n\nconst header = {\n width: '100%',\n backgroundColor: '#191919',\n margin: '0 auto',\n paddingBottom: '30px',\n zIndex: '999'\n};\n\nconst container = {\n paddingLeft: '12px',\n paddingRight: '12px',\n margin: '0 auto',\n width: '648px',\n maxWidth: '648px',\n position: 'relative' as const\n};\n\nconst challengeLink = {\n backgroundColor: '#505050',\n textAlign: 'center' as const,\n padding: '10px 0 25px 0',\n fontSize: '13px',\n position: 'absolute' as const,\n width: '100%',\n maxWidth: '648px',\n top: '-28px',\n margin: '0 0 16px 0'\n};\n\nconst link = {\n color: '#fff',\n cursor: 'pointer'\n};\n\nconst blueLink = {\n color: '#15c',\n cursor: 'pointer'\n};\n\nconst heading = {\n background: '#f0d361',\n padding: '30px',\n color: '#191919',\n fontWeight: '400',\n marginBottom: '0'\n};\n\nconst section = {\n margin: '0',\n background: '#fff',\n padding: '0 24px'\n};\n\nconst yellowSection = {\n background: '#f5d247',\n padding: '30px',\n fontSize: '18px',\n lineHeight: '1.5'\n};\n\nconst text = {\n fontSize: '16px'\n};\n\nconst cubeText = { fontSize: '32px', margin: '4px 0 0 0' };\n\nconst yourChallenge = {\n fontSize: '16px',\n border: '6px solid #ebd473',\n padding: '20px',\n margin: '0 0 40px 0'\n};\n\nconst sectionPro = {\n marginTop: '40px',\n marginBottom: '24px',\n textAlign: 'center' as const,\n background: '#0b112a',\n color: '#fff',\n padding: '35px 20px 30px 20px',\n border: '6px solid #2138c6'\n};\n\nconst imagePro = { margin: '0 auto 30px auto' };\n\nconst resourcesTitle = {\n fontWeight: '900',\n lineHeight: '1.1',\n marginTop: '-40px',\n fontSize: '18px'\n};\n\nconst ideasTitle = {\n fontWeight: '900',\n lineHeight: '1.1',\n fontSize: '18px'\n};\n\nconst ideas = {\n width: '50%',\n paddingRight: '10px'\n};\n\nconst resources = {\n width: '50%',\n paddingLeft: '10px'\n};\n\nconst card = {\n padding: '20px',\n margin: '0 0 20px 0',\n borderRadius: '10px',\n fontSize: '36px',\n textAlign: 'center' as const\n};\n\nconst yellowCard = {\n ...card,\n background: '#fff4c8',\n border: '1px solid #f4d247'\n};\n\nconst blueCard = {\n ...card,\n background: '#d9f6ff',\n border: '1px solid #92bfd0'\n};\n\nconst textCard = {\n fontSize: '13px',\n textAlign: 'left' as const\n};\n\nconst goToChallenge = {\n margin: '40px 0 120px 0',\n textAlign: 'center' as const\n};\n\nconst footer = {\n background: '#fff',\n color: '#505050',\n padding: '0 24px',\n marginBottom: '48px'\n};\n\nconst footerText = {\n fontSize: '13px'\n};\n\nconst footerLink = {\n textDecoration: 'underline',\n color: '#505050',\n cursor: 'pointer'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Codepen Challengers';\n\nexport const Template = () => (\n \n \n #CodePenChallenge: Cubes\n \n
\n \n
\n \n \n View this Challenge on CodePen\n \n\n \n This week: #CodePenChallenge: Cubes\n \n\n
\n The Shape challenge continues!\n\n \n Last week, we kicked things off with round shapes. We \"rounded\" up the Pens from week\n one in our #CodePenChallenge: Round collection.\n \n\n This week, we move on to cubes 🧊\n\n \n Creating cubes in the browser is all about mastery of illusion. Take control of\n perspective and shadows and you can make the magic of 3D on a flat screen 🧙\n \n\n \n This week is a fun chance to work on your CSS shape-building skills, or dig into a 3D\n JavaScript library like Three.js.\n \n\n \n This week's starter template features an ice cube emoji to help inspire a \"cool\" idea\n for your Pen. As always, the template is just as jumping off point. Feel free to\n incorporate the 🧊 in your creation, add more elements, or freeze it out completely and\n start over from scratch!\n \n\n \n 💪 Your Challenge:{' '}\n create a Pen that includes cube shapes.\n \n\n \"codepen\"\n\n
\n \"codepen\"\n\n \n CodePen PRO combines a bunch of features that can help any front-end designer or\n developer at any experience level.\n \n \n Learn More\n \n
\n
\n\n \n To participate: Create a Pen → and tag it{' '}\n \n codepenchallenge\n {' '}\n and\n \n {' '}\n cpc-cubes\n \n . We'll be watching and gathering the Pens into a Collection, and sharing on{' '}\n Twitter and Instagram (Use the\n #CodePenChallenge tag on Twitter and Instagram as well).\n \n\n
\n \n \n IDEAS!\n\n
\n 🌟\n \n This week we move from 2 dimensions to three! Maybe you could exercise your{' '}\n perspective in CSS to create a 3D cube. Or, you can\n try out creating 3D shapes in JavaScript, using{' '}\n WebGL or building a{' '}\n Three.js scene.\n \n
\n\n
\n 🌟\n \n There's more to cubes than just six square sides. There are variations on the cube\n that could be fun to play with this week:{' '}\n cuboid shapes are hexahedrons with faces that aren't\n always squares. And if you want to really push the boundaries of shape, consider\n the 4 dimensional tesseract!\n \n
\n\n
\n 🌟\n \n Here's a mind-bending idea that can combine the round shapes from week one with\n this week's cube theme: Spherical Cubes 😳 Solving\n longstanding mathematical mysteries is probably outside the scope of a CodePen\n challenge, but you could use front-end tools to explore fitting spheres into\n cubes, or vice-versa.\n \n
\n \n \n RESOURCES!\n\n
\n 📖\n \n Learn all about How CSS Perspective Works and how to\n build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks.\n Or, check out stunning examples of WebGL cubes from Matthias Hurrle:{' '}\n Just Ice and Posing.\n \n
\n\n
\n 📖\n \n Want to go beyond the square cube? Draw inspiration from EntropyReversed's{' '}\n Pulsating Tesseract, Josetxu's{' '}\n Rainbow Cuboid Loader, or Ana Tudor's{' '}\n Pure CSS cuboid jellyfish.\n \n
\n\n
\n 📖\n \n Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's{' '}\n Cube Sphere, Munir Safi's{' '}\n 3D Sphere to Cube Animation With Virtual Trackball{' '}\n and Ana Tudor's Infinitely unpack prism for more\n mindbending cube concepts that test the boundaries of how shapes interact with\n each other.\n \n
\n \n \n
\n\n
\n \n Go to Challenge Page\n \n
\n\n
\n \n You can adjust your email preferences any time, or{' '}\n instantly opt out of emails of this kind. Need help with\n anything? Hit up support.\n \n
\n \n \n \n);\n", + "source": "import {\n Body,\n Button,\n Container,\n Head,\n Heading,\n Column,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text,\n Row\n} from 'jsx-email';\n\nconst main = {\n fontFamily: '\"Google Sans\",Roboto,RobotoDraft,Helvetica,Arial,sans-serif',\n backgroundColor: '#505050',\n margin: '0'\n};\n\nconst imgHeader = {\n margin: 'auto'\n};\n\nconst header = {\n width: '100%',\n backgroundColor: '#191919',\n margin: '0 auto',\n paddingBottom: '30px',\n zIndex: '999'\n};\n\nconst container = {\n paddingLeft: '12px',\n paddingRight: '12px',\n margin: '0 auto',\n width: '648px',\n maxWidth: '648px',\n position: 'relative' as const\n};\n\nconst challengeLink = {\n backgroundColor: '#505050',\n textAlign: 'center' as const,\n padding: '10px 0 25px 0',\n fontSize: '13px',\n position: 'absolute' as const,\n width: '100%',\n maxWidth: '648px',\n top: '-28px',\n margin: '0 0 16px 0'\n};\n\nconst link = {\n color: '#fff',\n cursor: 'pointer'\n};\n\nconst blueLink = {\n color: '#15c',\n cursor: 'pointer'\n};\n\nconst heading = {\n background: '#f0d361',\n padding: '30px',\n color: '#191919',\n fontWeight: '400',\n marginBottom: '0'\n};\n\nconst section = {\n margin: '0',\n background: '#fff',\n padding: '0 24px'\n};\n\nconst yellowSection = {\n background: '#f5d247',\n padding: '30px',\n fontSize: '18px',\n lineHeight: '1.5'\n};\n\nconst text = {\n fontSize: '16px'\n};\n\nconst cubeText = { fontSize: '32px', margin: '4px 0 0 0' };\n\nconst yourChallenge = {\n fontSize: '16px',\n border: '6px solid #ebd473',\n padding: '20px',\n margin: '0 0 40px 0'\n};\n\nconst sectionPro = {\n marginTop: '40px',\n marginBottom: '24px',\n textAlign: 'center' as const,\n background: '#0b112a',\n color: '#fff',\n padding: '35px 20px 30px 20px',\n border: '6px solid #2138c6'\n};\n\nconst imagePro = { margin: '0 auto 30px auto' };\n\nconst resourcesTitle = {\n fontWeight: '900',\n lineHeight: '1.1',\n marginTop: '-40px',\n fontSize: '18px'\n};\n\nconst ideasTitle = {\n fontWeight: '900',\n lineHeight: '1.1',\n fontSize: '18px'\n};\n\nconst ideas = {\n width: '50%',\n paddingRight: '10px'\n};\n\nconst resources = {\n width: '50%',\n paddingLeft: '10px'\n};\n\nconst card = {\n padding: '20px',\n margin: '0 0 20px 0',\n borderRadius: '10px',\n fontSize: '36px',\n textAlign: 'center' as const\n};\n\nconst yellowCard = {\n ...card,\n background: '#fff4c8',\n border: '1px solid #f4d247'\n};\n\nconst blueCard = {\n ...card,\n background: '#d9f6ff',\n border: '1px solid #92bfd0'\n};\n\nconst textCard = {\n fontSize: '13px',\n textAlign: 'left' as const\n};\n\nconst goToChallenge = {\n margin: '40px 0 120px 0',\n textAlign: 'center' as const\n};\n\nconst footer = {\n background: '#fff',\n color: '#505050',\n padding: '0 24px',\n marginBottom: '48px'\n};\n\nconst footerText = {\n fontSize: '13px'\n};\n\nconst footerLink = {\n textDecoration: 'underline',\n color: '#505050',\n cursor: 'pointer'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Codepen Challengers';\n\nexport const Template = () => (\n \n \n #CodePenChallenge: Cubes\n \n
\n \n
\n \n \n View this Challenge on CodePen\n \n\n \n This week: #CodePenChallenge: Cubes\n \n\n
\n The Shape challenge continues!\n\n \n Last week, we kicked things off with round shapes. We \"rounded\" up the Pens from week\n one in our #CodePenChallenge: Round collection.\n \n\n This week, we move on to cubes 🧊\n\n \n Creating cubes in the browser is all about mastery of illusion. Take control of\n perspective and shadows and you can make the magic of 3D on a flat screen 🧙\n \n\n \n This week is a fun chance to work on your CSS shape-building skills, or dig into a 3D\n JavaScript library like Three.js.\n \n\n \n This week's starter template features an ice cube emoji to help inspire a \"cool\" idea\n for your Pen. As always, the template is just as jumping off point. Feel free to\n incorporate the 🧊 in your creation, add more elements, or freeze it out completely and\n start over from scratch!\n \n\n \n 💪 Your Challenge:{' '}\n create a Pen that includes cube shapes.\n \n\n \"codepen\"\n\n
\n \"codepen\"\n\n \n CodePen PRO combines a bunch of features that can help any front-end designer or\n developer at any experience level.\n \n \n Learn More\n \n
\n
\n\n \n To participate: Create a Pen → and tag it{' '}\n \n codepenchallenge\n {' '}\n and\n \n {' '}\n cpc-cubes\n \n . We'll be watching and gathering the Pens into a Collection, and sharing on{' '}\n Twitter and Instagram (Use the\n #CodePenChallenge tag on Twitter and Instagram as well).\n \n\n
\n \n \n IDEAS!\n\n
\n 🌟\n \n This week we move from 2 dimensions to three! Maybe you could exercise your{' '}\n perspective in CSS to create a 3D cube. Or, you can\n try out creating 3D shapes in JavaScript, using{' '}\n WebGL or building a{' '}\n Three.js scene.\n \n
\n\n
\n 🌟\n \n There's more to cubes than just six square sides. There are variations on the cube\n that could be fun to play with this week:{' '}\n cuboid shapes are hexahedrons with faces that aren't\n always squares. And if you want to really push the boundaries of shape, consider\n the 4 dimensional tesseract!\n \n
\n\n
\n 🌟\n \n Here's a mind-bending idea that can combine the round shapes from week one with\n this week's cube theme: Spherical Cubes 😳 Solving\n longstanding mathematical mysteries is probably outside the scope of a CodePen\n challenge, but you could use front-end tools to explore fitting spheres into\n cubes, or vice-versa.\n \n
\n \n \n RESOURCES!\n\n
\n 📖\n \n Learn all about How CSS Perspective Works and how to\n build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks.\n Or, check out stunning examples of WebGL cubes from Matthias Hurrle:{' '}\n Just Ice and Posing.\n \n
\n\n
\n 📖\n \n Want to go beyond the square cube? Draw inspiration from EntropyReversed's{' '}\n Pulsating Tesseract, Josetxu's{' '}\n Rainbow Cuboid Loader, or Ana Tudor's{' '}\n Pure CSS cuboid jellyfish.\n \n
\n\n
\n 📖\n \n Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's{' '}\n Cube Sphere, Munir Safi's{' '}\n 3D Sphere to Cube Animation With Virtual Trackball{' '}\n and Ana Tudor's Infinitely unpack prism for more\n mindbending cube concepts that test the boundaries of how shapes interact with\n each other.\n \n
\n \n \n
\n\n
\n \n Go to Challenge Page\n \n
\n\n
\n \n You can adjust your email preferences any time, or{' '}\n instantly opt out of emails of this kind. Need help with\n anything? Hit up support.\n \n
\n \n \n \n);\n", "sourceFile": "emails/codepen-challengers.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/codepen-challengers.tsx", "templateName": "Codepen Challengers" diff --git a/apps/preview/dev/fixtures/credential emails/dropbox-reset-password.js b/apps/preview/dev/fixtures/credential emails/dropbox-reset-password.js index a65a1c158..4318cefb1 100644 --- a/apps/preview/dev/fixtures/credential emails/dropbox-reset-password.js +++ b/apps/preview/dev/fixtures/credential emails/dropbox-reset-password.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Dropbox reset your password
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Dropbox\"\n \n \n \n \n \n \n
\n

Hi Bruce,

\n

Someone recently requested a password change for your Dropbox account. If this was you, you can set a new password here:

\n \n \n \n \n \n \n
Reset password
\n

If you don't want to change your password or didn't request this, just ignore and delete this message.

\n

To keep your account secure, please don't forward this email to anyone. See our Help Center for more security tips.

\n

Happy Dropboxing!

\n
\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Dropbox reset your password
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Dropbox\"\n \n \n \n \n \n \n
\n

Hi Bruce,

\n

Someone recently requested a password change for your Dropbox account. If this was you, you can set a new password here:

\n \n \n \n \n \n \n
Reset password
\n

If you don't want to change your password or didn't request this, just ignore and delete this message.

\n

To keep your account secure, please don't forward this email to anyone. See our Help Center for more security tips.

\n

Happy Dropboxing!

\n
\n
\n
\n
\n \n\n", "plain": "Hi Bruce,\n\nSomeone recently requested a password change for your Dropbox account. If this\nwas you, you can set a new password here:\n\nReset password https://dropbox.com\n\nIf you don't want to change your password or didn't request this, just ignore\nand delete this message.\n\nTo keep your account secure, please don't forward this email to anyone. See our\nHelp Center for more security tips. https://dropbox.com\n\nHappy Dropboxing!", - "source": "import { Body, Button, Container, Head, Html, Img, Link, Preview, Section, Text } from 'jsx-email';\n\ninterface DropboxResetPasswordEmailProps {\n userFirstname?: string;\n resetPasswordLink?: string;\n}\n\nconst main = {\n backgroundColor: '#f6f9fc',\n padding: '10px 0'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n border: '1px solid #f0f0f0',\n padding: '45px'\n};\n\nconst text = {\n fontSize: '16px',\n fontFamily:\n \"'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif\",\n fontWeight: '300',\n color: '#404040',\n lineHeight: '26px'\n};\n\nconst anchor = {\n textDecoration: 'underline'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n userFirstname: 'Bruce',\n resetPasswordLink: 'https://dropbox.com'\n} as DropboxResetPasswordEmailProps;\n\nexport const templateName = 'Dropbox Reset Password';\n\nexport const Template = ({ userFirstname, resetPasswordLink }: DropboxResetPasswordEmailProps) => {\n return (\n \n \n Dropbox reset your password\n \n \n \"Dropbox\"\n
\n Hi {userFirstname},\n \n Someone recently requested a password change for your Dropbox account. If this was\n you, you can set a new password here:\n \n \n Reset password\n \n \n If you don't want to change your password or didn't request this, just\n ignore and delete this message.\n \n \n To keep your account secure, please don't forward this email to anyone. See our\n Help Center for{' '}\n \n more security tips.\n \n \n Happy Dropboxing!\n
\n \n \n \n );\n};\n", + "source": "import { Body, Button, Container, Head, Html, Img, Link, Preview, Section, Text } from 'jsx-email';\n\ninterface DropboxResetPasswordEmailProps {\n userFirstname?: string;\n resetPasswordLink?: string;\n}\n\nconst main = {\n backgroundColor: '#f6f9fc',\n padding: '10px 0'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n border: '1px solid #f0f0f0',\n padding: '45px'\n};\n\nconst text = {\n fontSize: '16px',\n fontFamily:\n \"'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif\",\n fontWeight: '300',\n color: '#404040',\n lineHeight: '26px'\n};\n\nconst anchor = {\n textDecoration: 'underline'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n userFirstname: 'Bruce',\n resetPasswordLink: 'https://dropbox.com'\n} as DropboxResetPasswordEmailProps;\n\nexport const templateName = 'Dropbox Reset Password';\n\nexport const Template = ({ userFirstname, resetPasswordLink }: DropboxResetPasswordEmailProps) => {\n return (\n \n \n Dropbox reset your password\n \n \n \"Dropbox\"\n
\n Hi {userFirstname},\n \n Someone recently requested a password change for your Dropbox account. If this was\n you, you can set a new password here:\n \n \n Reset password\n \n \n If you don't want to change your password or didn't request this, just\n ignore and delete this message.\n \n \n To keep your account secure, please don't forward this email to anyone. See our\n Help Center for{' '}\n \n more security tips.\n \n \n Happy Dropboxing!\n
\n \n \n \n );\n};\n", "sourceFile": "emails/credential emails/dropbox-reset-password.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/credential emails/dropbox-reset-password.tsx", "templateName": "Dropbox Reset Password" diff --git a/apps/preview/dev/fixtures/credential emails/github-access-token.js b/apps/preview/dev/fixtures/credential emails/github-access-token.js index f00e7c52b..9ded33783 100644 --- a/apps/preview/dev/fixtures/credential emails/github-access-token.js +++ b/apps/preview/dev/fixtures/credential emails/github-access-token.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
A fine-grained personal access token has been added to your account
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Github\"\n

@Batman, a personal access was created on your account.

\n \n \n \n \n \n \n
\n

Hey Batman!

\n

A fine-grained personal access token (resend) was recently added to your account.

\n \n \n \n \n \n \n
View your token
\n
\n

Your security audit log ・ Contact support

\n

GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107

\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
A fine-grained personal access token has been added to your account
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Github\"\n

@Batman, a personal access was created on your account.

\n \n \n \n \n \n \n
\n

Hey Batman!

\n

A fine-grained personal access token (resend) was recently added to your account.

\n \n \n \n \n \n \n
View your token
\n
\n

Your security audit log ・ Contact support

\n

GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107

\n
\n
\n
\n \n\n", "plain": "@Batman, a personal access was created on your account.\n\nHey Batman!\n\nA fine-grained personal access token (resend) was recently added to your\naccount.\n\nView your token\n\nYour security audit log ・ Contact support\n\nGitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107", - "source": "import { Body, Button, Container, Head, Html, Img, Link, Preview, Section, Text } from 'jsx-email';\n\ninterface GithubAccessTokenEmailProps {\n username?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n color: '#24292e',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"'\n};\n\nconst container = {\n width: '480px',\n margin: '0 auto',\n padding: '20px 0 48px'\n};\n\nconst title = {\n fontSize: '24px',\n lineHeight: 1.25\n};\n\nconst section = {\n padding: '24px',\n border: 'solid 1px #dedede',\n borderRadius: '5px',\n textAlign: 'center' as const\n};\n\nconst text = {\n margin: '0 0 10px 0',\n textAlign: 'left' as const\n};\n\nconst links = {\n textAlign: 'center' as const\n};\n\nconst link = {\n color: '#0366d6',\n fontSize: '12px'\n};\n\nconst footer = {\n color: '#6a737d',\n fontSize: '12px',\n textAlign: 'center' as const,\n marginTop: '60px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n username: 'Batman'\n} as GithubAccessTokenEmailProps;\n\nexport const templateName = 'Github Access Token';\n\nexport const Template = ({ username }: GithubAccessTokenEmailProps) => (\n \n \n A fine-grained personal access token has been added to your account\n \n \n \"Github\"\n\n \n @{username}, a personal access was created on your account.\n \n\n
\n \n Hey {username}!\n \n \n A fine-grained personal access token (resend) was recently added to your\n account.\n \n\n \n View your token\n \n
\n \n Your security audit log ・{' '}\n Contact support\n \n\n \n GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107\n \n \n \n \n);\n", + "source": "import { Body, Button, Container, Head, Html, Img, Link, Preview, Section, Text } from 'jsx-email';\n\ninterface GithubAccessTokenEmailProps {\n username?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n color: '#24292e',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"'\n};\n\nconst container = {\n width: '480px',\n margin: '0 auto',\n padding: '20px 0 48px'\n};\n\nconst title = {\n fontSize: '24px',\n lineHeight: 1.25\n};\n\nconst section = {\n padding: '24px',\n border: 'solid 1px #dedede',\n borderRadius: '5px',\n textAlign: 'center' as const\n};\n\nconst text = {\n margin: '0 0 10px 0',\n textAlign: 'left' as const\n};\n\nconst links = {\n textAlign: 'center' as const\n};\n\nconst link = {\n color: '#0366d6',\n fontSize: '12px'\n};\n\nconst footer = {\n color: '#6a737d',\n fontSize: '12px',\n textAlign: 'center' as const,\n marginTop: '60px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n username: 'Batman'\n} as GithubAccessTokenEmailProps;\n\nexport const templateName = 'Github Access Token';\n\nexport const Template = ({ username }: GithubAccessTokenEmailProps) => (\n \n \n A fine-grained personal access token has been added to your account\n \n \n \"Github\"\n\n \n @{username}, a personal access was created on your account.\n \n\n
\n \n Hey {username}!\n \n \n A fine-grained personal access token (resend) was recently added to your\n account.\n \n\n \n View your token\n \n
\n \n Your security audit log ・{' '}\n Contact support\n \n\n \n GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107\n \n \n \n \n);\n", "sourceFile": "emails/credential emails/github-access-token.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/credential emails/github-access-token.tsx", "templateName": "Github Access Token" diff --git a/apps/preview/dev/fixtures/credential emails/linear-login-code.js b/apps/preview/dev/fixtures/credential emails/linear-login-code.js index c5cbac2fc..98d57ca2c 100644 --- a/apps/preview/dev/fixtures/credential emails/linear-login-code.js +++ b/apps/preview/dev/fixtures/credential emails/linear-login-code.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Your login code for Linear
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Linear\"\n

Your login code for Linear

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Login to Linear
\n
\n

This link and code will only be valid for the next 5 minutes. If the link does not work, you can use the login verification code directly:

tt226-5398x\n
Linear\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Your login code for Linear
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Linear\"\n

Your login code for Linear

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Login to Linear
\n
\n

This link and code will only be valid for the next 5 minutes. If the link does not work, you can use the login verification code directly:

tt226-5398x\n
Linear\n
\n
\n
\n \n\n", "plain": "YOUR LOGIN CODE FOR LINEAR\n\nLogin to Linear https://linear.app\n\nThis link and code will only be valid for the next 5 minutes. If the link does\nnot work, you can use the login verification code directly:\n\ntt226-5398x\n\n--------------------------------------------------------------------------------\n\nLinear https://linear.app", - "source": "import {\n Body,\n Button,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\ninterface LinearLoginCodeEmailProps {\n validationCode?: string;\n}\n\nconst logo = {\n borderRadius: 21,\n width: 42,\n height: 42\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '560px'\n};\n\nconst heading = {\n fontSize: '24px',\n letterSpacing: '-0.5px',\n lineHeight: '1.3',\n fontWeight: '400',\n color: '#484848',\n padding: '17px 0 0'\n};\n\nconst paragraph = {\n margin: '0 0 15px',\n fontSize: '15px',\n lineHeight: '1.4',\n color: '#3c4149'\n};\n\nconst buttonContainer = {\n padding: '27px 0 27px'\n};\n\nconst reportLink = {\n fontSize: '14px',\n color: '#b4becc'\n};\n\nconst hr = {\n borderColor: '#dfe1e4',\n margin: '42px 0 26px'\n};\n\nconst code = {\n fontFamily: 'monospace',\n fontWeight: '700',\n padding: '1px 4px',\n backgroundColor: '#dfe1e4',\n letterSpacing: '-0.3px',\n fontSize: '21px',\n borderRadius: '4px',\n color: '#3c4149'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n validationCode: 'tt226-5398x'\n} as LinearLoginCodeEmailProps;\n\nexport const templateName = 'Linear Login Code';\n\nexport const Template = ({ validationCode }: LinearLoginCodeEmailProps) => (\n \n \n Your login code for Linear\n \n \n \"Linear\"\n Your login code for Linear\n
\n \n Login to Linear\n \n
\n \n This link and code will only be valid for the next 5 minutes. If the link does not work,\n you can use the login verification code directly:\n \n {validationCode}\n
\n \n Linear\n \n \n \n \n);\n", + "source": "import {\n Body,\n Button,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\ninterface LinearLoginCodeEmailProps {\n validationCode?: string;\n}\n\nconst logo = {\n borderRadius: 21,\n width: 42,\n height: 42\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '560px'\n};\n\nconst heading = {\n fontSize: '24px',\n letterSpacing: '-0.5px',\n lineHeight: '1.3',\n fontWeight: '400',\n color: '#484848',\n padding: '17px 0 0'\n};\n\nconst paragraph = {\n margin: '0 0 15px',\n fontSize: '15px',\n lineHeight: '1.4',\n color: '#3c4149'\n};\n\nconst buttonContainer = {\n padding: '27px 0 27px'\n};\n\nconst reportLink = {\n fontSize: '14px',\n color: '#b4becc'\n};\n\nconst hr = {\n borderColor: '#dfe1e4',\n margin: '42px 0 26px'\n};\n\nconst code = {\n fontFamily: 'monospace',\n fontWeight: '700',\n padding: '1px 4px',\n backgroundColor: '#dfe1e4',\n letterSpacing: '-0.3px',\n fontSize: '21px',\n borderRadius: '4px',\n color: '#3c4149'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n validationCode: 'tt226-5398x'\n} as LinearLoginCodeEmailProps;\n\nexport const templateName = 'Linear Login Code';\n\nexport const Template = ({ validationCode }: LinearLoginCodeEmailProps) => (\n \n \n Your login code for Linear\n \n \n \"Linear\"\n Your login code for Linear\n
\n \n Login to Linear\n \n
\n \n This link and code will only be valid for the next 5 minutes. If the link does not work,\n you can use the login verification code directly:\n \n {validationCode}\n
\n \n Linear\n \n \n \n \n);\n", "sourceFile": "emails/credential emails/linear-login-code.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/credential emails/linear-login-code.tsx", "templateName": "Linear Login Code" diff --git a/apps/preview/dev/fixtures/credential emails/magic links/notion-magic-link.js b/apps/preview/dev/fixtures/credential emails/magic links/notion-magic-link.js index 9e26ee73f..c4cbb3846 100644 --- a/apps/preview/dev/fixtures/credential emails/magic links/notion-magic-link.js +++ b/apps/preview/dev/fixtures/credential emails/magic links/notion-magic-link.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Log in with this magic link
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n

Login

Click here to log in with this magic link\n

Or, copy and paste this temporary login code:

sparo-ndigo-amurt-secan\n

If you didn't try to login, you can safely ignore this email.

\n

Hint: You can set a permanent password in Settings & members → My account.

\"Notion's\n

Notion.so, the all-in-one-workspace
for your notes, tasks, wikis, and databases.

\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Log in with this magic link
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n

Login

Click here to log in with this magic link\n

Or, copy and paste this temporary login code:

sparo-ndigo-amurt-secan\n

If you didn't try to login, you can safely ignore this email.

\n

Hint: You can set a permanent password in Settings & members → My account.

\"Notion's\n

Notion.so, the all-in-one-workspace
for your notes, tasks, wikis, and databases.

\n
\n
\n
\n \n\n", "plain": "LOGIN\n\nClick here to log in with this magic link https://notion.so\n\nOr, copy and paste this temporary login code:\n\nsparo-ndigo-amurt-secan\n\nIf you didn't try to login, you can safely ignore this email.\n\nHint: You can set a permanent password in Settings & members → My account.\n\nNotion.so https://notion.so, the all-in-one-workspace\nfor your notes, tasks, wikis, and databases.", - "source": "import { Body, Container, Head, Heading, Html, Img, Link, Preview, Text } from 'jsx-email';\n\ninterface NotionMagicLinkEmailProps {\n loginCode?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff'\n};\n\nconst container = {\n paddingLeft: '12px',\n paddingRight: '12px',\n margin: '0 auto'\n};\n\nconst h1 = {\n color: '#333',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '24px',\n fontWeight: 'bold',\n margin: '40px 0',\n padding: '0'\n};\n\nconst link = {\n color: '#2754C5',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '14px',\n textDecoration: 'underline'\n};\n\nconst text = {\n color: '#333',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '14px',\n margin: '24px 0'\n};\n\nconst footer = {\n color: '#898989',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '12px',\n lineHeight: '22px',\n marginTop: '12px',\n marginBottom: '24px'\n};\n\nconst code = {\n display: 'inline-block',\n padding: '16px 4.5%',\n width: '90.5%',\n backgroundColor: '#f4f4f4',\n borderRadius: '5px',\n border: '1px solid #eee',\n color: '#333'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n loginCode: 'sparo-ndigo-amurt-secan'\n} as NotionMagicLinkEmailProps;\n\nexport const templateName = 'Notion Magic Link';\n\nexport const Template = ({ loginCode }: NotionMagicLinkEmailProps) => (\n \n \n Log in with this magic link\n \n \n Login\n \n Click here to log in with this magic link\n \n \n Or, copy and paste this temporary login code:\n \n {loginCode}\n \n If you didn't try to login, you can safely ignore this email.\n \n \n Hint: You can set a permanent password in Settings & members → My account.\n \n \"Notion's\n \n \n Notion.so\n \n , the all-in-one-workspace\n
\n for your notes, tasks, wikis, and databases.\n \n \n \n \n);\n", + "source": "import { Body, Container, Head, Heading, Html, Img, Link, Preview, Text } from 'jsx-email';\n\ninterface NotionMagicLinkEmailProps {\n loginCode?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff'\n};\n\nconst container = {\n paddingLeft: '12px',\n paddingRight: '12px',\n margin: '0 auto'\n};\n\nconst h1 = {\n color: '#333',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '24px',\n fontWeight: 'bold',\n margin: '40px 0',\n padding: '0'\n};\n\nconst link = {\n color: '#2754C5',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '14px',\n textDecoration: 'underline'\n};\n\nconst text = {\n color: '#333',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '14px',\n margin: '24px 0'\n};\n\nconst footer = {\n color: '#898989',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '12px',\n lineHeight: '22px',\n marginTop: '12px',\n marginBottom: '24px'\n};\n\nconst code = {\n display: 'inline-block',\n padding: '16px 4.5%',\n width: '90.5%',\n backgroundColor: '#f4f4f4',\n borderRadius: '5px',\n border: '1px solid #eee',\n color: '#333'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n loginCode: 'sparo-ndigo-amurt-secan'\n} as NotionMagicLinkEmailProps;\n\nexport const templateName = 'Notion Magic Link';\n\nexport const Template = ({ loginCode }: NotionMagicLinkEmailProps) => (\n \n \n Log in with this magic link\n \n \n Login\n \n Click here to log in with this magic link\n \n \n Or, copy and paste this temporary login code:\n \n {loginCode}\n \n If you didn't try to login, you can safely ignore this email.\n \n \n Hint: You can set a permanent password in Settings & members → My account.\n \n \"Notion's\n \n \n Notion.so\n \n , the all-in-one-workspace\n
\n for your notes, tasks, wikis, and databases.\n \n \n \n \n);\n", "sourceFile": "emails/credential emails/magic links/notion-magic-link.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/credential emails/magic links/notion-magic-link.tsx", "templateName": "Notion Magic Link" diff --git a/apps/preview/dev/fixtures/credential emails/magic links/raycast-magic-link.js b/apps/preview/dev/fixtures/credential emails/magic links/raycast-magic-link.js index fa2e936e2..6a890fa28 100644 --- a/apps/preview/dev/fixtures/credential emails/magic links/raycast-magic-link.js +++ b/apps/preview/dev/fixtures/credential emails/magic links/raycast-magic-link.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Log in with this magic link.
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Raycast\"\n

🪄 Your magic link

\n \n \n \n \n \n \n
\n

👉 Click here to sign in 👈

\n

If you didn't request this, please ignore this email.

\n
\n

Best,
- Raycast Team

\n
\n

Raycast Technologies Inc.

\n

2093 Philadelphia Pike #3222, Claymont, DE 19703

\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Log in with this magic link.
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Raycast\"\n

🪄 Your magic link

\n \n \n \n \n \n \n
\n

👉 Click here to sign in 👈

\n

If you didn't request this, please ignore this email.

\n
\n

Best,
- Raycast Team

\n
\n

Raycast Technologies Inc.

\n

2093 Philadelphia Pike #3222, Claymont, DE 19703

\n
\n
\n
\n \n\n", "plain": "🪄 YOUR MAGIC LINK\n\n👉 Click here to sign in 👈 https://raycast.com\n\nIf you didn't request this, please ignore this email.\n\nBest,\n- Raycast Team\n\n--------------------------------------------------------------------------------\n\nRaycast Technologies Inc.\n\n2093 Philadelphia Pike #3222, Claymont, DE 19703", - "source": "import {\n Body,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\ninterface RaycastMagicLinkEmailProps {\n magicLink?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 25px 48px',\n backgroundImage: 'url(\"/assets/raycast-bg.png\")',\n backgroundPosition: 'bottom',\n backgroundRepeat: 'no-repeat, no-repeat'\n};\n\nconst heading = {\n fontSize: '28px',\n fontWeight: 'bold',\n marginTop: '48px'\n};\n\nconst body = {\n margin: '24px 0'\n};\n\nconst paragraph = {\n fontSize: '16px',\n lineHeight: '26px'\n};\n\nconst link = {\n color: '#FF6363'\n};\n\nconst hr = {\n borderColor: '#dddddd',\n marginTop: '48px'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px',\n marginLeft: '4px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n magicLink: 'https://raycast.com'\n} as RaycastMagicLinkEmailProps;\n\nexport const templateName = 'Raycast Magic Link';\n\nexport const Template = ({ magicLink }: RaycastMagicLinkEmailProps) => (\n \n \n Log in with this magic link.\n \n \n \"Raycast\"\n 🪄 Your magic link\n
\n \n \n 👉 Click here to sign in 👈\n \n \n If you didn't request this, please ignore this email.\n
\n \n Best,\n
- Raycast Team\n \n
\n \n Raycast Technologies Inc.\n 2093 Philadelphia Pike #3222, Claymont, DE 19703\n \n \n \n);\n", + "source": "import {\n Body,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\ninterface RaycastMagicLinkEmailProps {\n magicLink?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 25px 48px',\n backgroundImage: 'url(\"/assets/raycast-bg.png\")',\n backgroundPosition: 'bottom',\n backgroundRepeat: 'no-repeat, no-repeat'\n};\n\nconst heading = {\n fontSize: '28px',\n fontWeight: 'bold',\n marginTop: '48px'\n};\n\nconst body = {\n margin: '24px 0'\n};\n\nconst paragraph = {\n fontSize: '16px',\n lineHeight: '26px'\n};\n\nconst link = {\n color: '#FF6363'\n};\n\nconst hr = {\n borderColor: '#dddddd',\n marginTop: '48px'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px',\n marginLeft: '4px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n magicLink: 'https://raycast.com'\n} as RaycastMagicLinkEmailProps;\n\nexport const templateName = 'Raycast Magic Link';\n\nexport const Template = ({ magicLink }: RaycastMagicLinkEmailProps) => (\n \n \n Log in with this magic link.\n \n \n \"Raycast\"\n 🪄 Your magic link\n
\n \n \n 👉 Click here to sign in 👈\n \n \n If you didn't request this, please ignore this email.\n
\n \n Best,\n
- Raycast Team\n \n
\n \n Raycast Technologies Inc.\n 2093 Philadelphia Pike #3222, Claymont, DE 19703\n \n \n \n);\n", "sourceFile": "emails/credential emails/magic links/raycast-magic-link.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/credential emails/magic links/raycast-magic-link.tsx", "templateName": "Raycast Magic Link" diff --git a/apps/preview/dev/fixtures/credential emails/twitch-reset-password.js b/apps/preview/dev/fixtures/credential emails/twitch-reset-password.js index e4bcbde58..4e8702fbf 100644 --- a/apps/preview/dev/fixtures/credential emails/twitch-reset-password.js +++ b/apps/preview/dev/fixtures/credential emails/twitch-reset-password.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
You updated the password for your Twitch account
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n

Hi Batman,

\n

You updated the password for your Twitch account on Jun 23, 2022, 12:06:00 PM. If this was you, then no further action is required.

\n

However if you did NOT perform this password change, please reset your account password immediately.

\n

Remember to use a password that is both strong and unique to your Twitch account. To learn more about how to create a strong and unique password, click here.

\n

Still have questions? Please contact Twitch Support

\n

Thanks,
Twitch Support Team

\n
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

© 2022 Twitch, All Rights Reserved
350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA

\n \n \n \n \n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
You updated the password for your Twitch account
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n

Hi Batman,

\n

You updated the password for your Twitch account on Jun 23, 2022, 12:06:00 PM. If this was you, then no further action is required.

\n

However if you did NOT perform this password change, please reset your account password immediately.

\n

Remember to use a password that is both strong and unique to your Twitch account. To learn more about how to create a strong and unique password, click here.

\n

Still have questions? Please contact Twitch Support

\n

Thanks,
Twitch Support Team

\n
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

© 2022 Twitch, All Rights Reserved
350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA

\n \n \n \n \n
\n
\n \n\n", "plain": "Hi Batman,\n\nYou updated the password for your Twitch account on Jun 23, 2022, 12:06:00 PM.\nIf this was you, then no further action is required.\n\nHowever if you did NOT perform this password change, please reset your account\npassword immediately.\n\nRemember to use a password that is both strong and unique to your Twitch\naccount. To learn more about how to create a strong and unique password, click\nhere.\n\nStill have questions? Please contact Twitch Support\n\nThanks,\nTwitch Support Team\n\n© 2022 Twitch, All Rights Reserved\n350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA", - "source": "import {\n Body,\n Container,\n Column,\n Head,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface TwitchResetPasswordEmailProps {\n username?: string;\n updatedDate?: Date;\n}\n\nconst fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif';\n\nconst main = {\n backgroundColor: '#efeef1',\n fontFamily\n};\n\nconst paragraph = {\n lineHeight: 1.5,\n fontSize: 14\n};\n\nconst container = {\n width: '580px',\n margin: '30px auto',\n backgroundColor: '#ffffff'\n};\n\nconst footer = {\n width: '580px',\n margin: '0 auto'\n};\n\nconst content = {\n padding: '5px 50px 10px 60px'\n};\n\nconst logo = {\n display: 'flex',\n justifyContent: 'center',\n alingItems: 'center',\n padding: 30\n};\n\nconst sectionsBorders = {\n width: '100%',\n display: 'flex'\n};\n\nconst sectionBorder = {\n borderBottom: '1px solid rgb(238,238,238)',\n width: '249px'\n};\n\nconst sectionCenter = {\n borderBottom: '1px solid rgb(145,71,255)',\n width: '102px'\n};\n\nconst link = {\n textDecoration: 'underline'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n username: 'Batman',\n updatedDate: new Date('June 23, 2022 4:06:00 pm UTC')\n} as TwitchResetPasswordEmailProps;\n\nexport const templateName = 'Twitch Reset Password';\n\nexport const Template = ({ username, updatedDate }: TwitchResetPasswordEmailProps) => {\n const formattedDate = new Intl.DateTimeFormat('en', {\n dateStyle: 'medium',\n timeStyle: 'medium'\n }).format(updatedDate);\n\n return (\n \n \n You updated the password for your Twitch account\n \n \n
\n \n
\n
\n \n \n \n \n \n
\n
\n Hi {username},\n \n You updated the password for your Twitch account on {formattedDate}. If this was you,\n then no further action is required.\n \n \n However if you did NOT perform this password change, please{' '}\n \n reset your account password\n {' '}\n immediately.\n \n \n Remember to use a password that is both strong and unique to your Twitch account. To\n learn more about how to create a strong and unique password,{' '}\n \n click here.\n \n \n \n Still have questions? Please contact{' '}\n \n Twitch Support\n \n \n \n Thanks,\n
\n Twitch Support Team\n \n
\n \n\n
\n \n \n \n \n \n \n \n \n \n \n © 2022 Twitch, All Rights Reserved
\n 350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA\n \n \n
\n \n \n );\n};\n", + "source": "import {\n Body,\n Container,\n Column,\n Head,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface TwitchResetPasswordEmailProps {\n username?: string;\n updatedDate?: Date;\n}\n\nconst fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif';\n\nconst main = {\n backgroundColor: '#efeef1',\n fontFamily\n};\n\nconst paragraph = {\n lineHeight: 1.5,\n fontSize: 14\n};\n\nconst container = {\n width: '580px',\n margin: '30px auto',\n backgroundColor: '#ffffff'\n};\n\nconst footer = {\n width: '580px',\n margin: '0 auto'\n};\n\nconst content = {\n padding: '5px 50px 10px 60px'\n};\n\nconst logo = {\n display: 'flex',\n justifyContent: 'center',\n alingItems: 'center',\n padding: 30\n};\n\nconst sectionsBorders = {\n width: '100%',\n display: 'flex'\n};\n\nconst sectionBorder = {\n borderBottom: '1px solid rgb(238,238,238)',\n width: '249px'\n};\n\nconst sectionCenter = {\n borderBottom: '1px solid rgb(145,71,255)',\n width: '102px'\n};\n\nconst link = {\n textDecoration: 'underline'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n username: 'Batman',\n updatedDate: new Date('June 23, 2022 4:06:00 pm UTC')\n} as TwitchResetPasswordEmailProps;\n\nexport const templateName = 'Twitch Reset Password';\n\nexport const Template = ({ username, updatedDate }: TwitchResetPasswordEmailProps) => {\n const formattedDate = new Intl.DateTimeFormat('en', {\n dateStyle: 'medium',\n timeStyle: 'medium'\n }).format(updatedDate);\n\n return (\n \n \n You updated the password for your Twitch account\n \n \n
\n \n
\n
\n \n \n \n \n \n
\n
\n Hi {username},\n \n You updated the password for your Twitch account on {formattedDate}. If this was you,\n then no further action is required.\n \n \n However if you did NOT perform this password change, please{' '}\n \n reset your account password\n {' '}\n immediately.\n \n \n Remember to use a password that is both strong and unique to your Twitch account. To\n learn more about how to create a strong and unique password,{' '}\n \n click here.\n \n \n \n Still have questions? Please contact{' '}\n \n Twitch Support\n \n \n \n Thanks,\n
\n Twitch Support Team\n \n
\n \n\n
\n \n \n \n \n \n \n \n \n \n \n © 2022 Twitch, All Rights Reserved
\n 350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA\n \n \n
\n \n \n );\n};\n", "sourceFile": "emails/credential emails/twitch-reset-password.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/credential emails/twitch-reset-password.tsx", "templateName": "Twitch Reset Password" diff --git a/apps/preview/dev/fixtures/google-play-policy-update.js b/apps/preview/dev/fixtures/google-play-policy-update.js index a6945ff26..0ab2d0ed8 100644 --- a/apps/preview/dev/fixtures/google-play-policy-update.js +++ b/apps/preview/dev/fixtures/google-play-policy-update.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Google Play developers
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Google\"Google
\n
\n \n \n \n \n \n \n
\n
\n

DEVELOPER UPDATE

\n

Hello Google Play Developer,

\n

We strive to make Google Play a safe and trusted experience for users.

\n

We've added clarifications to our Target API Level policy. Because this is a clarification, our enforcement standards and practices for this policy remain the same.

\n
\n \n \n \n \n \n \n
\n

We’re noting exceptions to the Target API Level policy, which can be found in our updated Help Center article.These exceptions include permanently private apps and apps that target automotive or wearables form factors and are bundled within the same package. Learn more

\n
\n \n \n \n \n \n \n
\n

We’re also extending the deadline to give you more time to adjust to these changes. Now, apps that target API level 29 or below will start experiencing reduced distribution starting Jan 31, 2023 instead of Nov 1, 2022. If you need more time to update your app, you can request an extension to keep your app discoverable to all users until May 1, 2023.

\n
\n
\n \n \n \n \n \n \n
\n

Thank you,

\n

The Google Play team

\n
\n \n \n \n \n \n \n
\n

Connect with us

\n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n

© 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA

\n

You have received this mandatory email service announcement to update you about important changes to your Google Play Developer account.

\n
\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Google Play developers
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Google\"Google
\n
\n \n \n \n \n \n \n
\n
\n

DEVELOPER UPDATE

\n

Hello Google Play Developer,

\n

We strive to make Google Play a safe and trusted experience for users.

\n

We've added clarifications to our Target API Level policy. Because this is a clarification, our enforcement standards and practices for this policy remain the same.

\n
\n \n \n \n \n \n \n
\n

We’re noting exceptions to the Target API Level policy, which can be found in our updated Help Center article.These exceptions include permanently private apps and apps that target automotive or wearables form factors and are bundled within the same package. Learn more

\n
\n \n \n \n \n \n \n
\n

We’re also extending the deadline to give you more time to adjust to these changes. Now, apps that target API level 29 or below will start experiencing reduced distribution starting Jan 31, 2023 instead of Nov 1, 2022. If you need more time to update your app, you can request an extension to keep your app discoverable to all users until May 1, 2023.

\n
\n
\n \n \n \n \n \n \n
\n

Thank you,

\n

The Google Play team

\n
\n \n \n \n \n \n \n
\n

Connect with us

\n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n

© 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA

\n

You have received this mandatory email service announcement to update you about important changes to your Google Play Developer account.

\n
\n
\n
\n
\n \n\n", "plain": "--------------------------------------------------------------------------------\n\nDEVELOPER UPDATE\n\nHello Google Play Developer,\n\nWe strive to make Google Play a safe and trusted experience for users.\n\nWe've added clarifications to our Target API Level policy\nhttps://notifications.google.com. Because this is a clarification, our\nenforcement standards and practices for this policy remain the same.\n\nWe’re noting exceptions to the Target API Level policy\nhttps://notifications.google.com, which can be found in our updated Help Center\narticle. https://notifications.google.comThese exceptions include permanently\nprivate apps and apps that target automotive or wearables form factors and are\nbundled within the same package. Learn more https://notifications.google.com\n\nWe’re also extending the deadline to give you more time to adjust to these\nchanges. Now, apps that target API level 29 or below will start experiencing\nreduced distribution starting Jan 31, 2023 instead of Nov 1, 2022. If you need\nmore time to update your app, you can request an extension to keep your app\ndiscoverable to all users until May 1, 2023.\n\n--------------------------------------------------------------------------------\n\nThank you,\n\nThe Google Play team\n\nConnect with us\n\nhttps://notifications.google.comhttps://notifications.google.comhttps://notifications.google.com\n\n\n\n© 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA\n\nYou have received this mandatory email service announcement to update you about\nimportant changes to your Google Play Developer account.", - "source": "import {\n Body,\n Container,\n Column,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst main = {\n backgroundColor: '#dbddde',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst sectionLogo = {\n padding: '0 40px'\n};\n\nconst headerBlue = {\n marginTop: '-1px'\n};\n\nconst container = {\n margin: '30px auto',\n width: '610px',\n backgroundColor: '#fff',\n borderRadius: 5,\n overflow: 'hidden'\n};\n\nconst containerContact = {\n backgroundColor: '#f0fcff',\n width: '90%',\n borderRadius: '5px',\n overflow: 'hidden',\n paddingLeft: '20px'\n};\n\nconst heading = {\n fontSize: '14px',\n lineHeight: '26px',\n fontWeight: '700',\n color: '#004dcf'\n};\n\nconst paragraphContent = {\n padding: '0 40px'\n};\n\nconst paragraphList = {\n paddingLeft: 40\n};\n\nconst paragraph = {\n fontSize: '14px',\n lineHeight: '22px',\n color: '#3c4043'\n};\n\nconst link = {\n ...paragraph,\n color: '#004dcf'\n};\n\nconst hr = {\n borderColor: '#e8eaed',\n margin: '20px 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Google Play Policy Update';\n\nexport const Template = () => (\n \n \n Google Play developers\n \n \n
\n \n \n \n \n \n \n
\n\n
\n
\n DEVELOPER UPDATE\n Hello Google Play Developer,\n \n We strive to make Google Play a safe and trusted experience for users.\n \n \n We've added clarifications to our{' '}\n \n Target API Level policy\n \n . Because this is a clarification, our enforcement standards and practices for this\n policy remain the same.\n \n
\n
\n \n We’re noting exceptions to the{' '}\n \n Target API Level policy\n \n , which can be found in our updated{' '}\n \n Help Center article.\n \n These exceptions include permanently private apps and apps that target automotive or\n wearables form factors and are bundled within the same package.{' '}\n \n Learn more\n \n \n
\n
\n \n We’re also extending the deadline to give you more time to adjust to these changes. Now,\n apps that target API level 29 or below will start experiencing reduced distribution\n starting Jan 31, 2023 instead of Nov 1, 2022. If you need more time to update\n your app, you can request an extension to keep your app discoverable to all users until\n May 1, 2023.\n \n
\n
\n\n
\n Thank you,\n The Google Play team\n
\n\n
\n \n Connect with us\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n © 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA\n \n \n You have received this mandatory email service announcement to update you about\n important changes to your Google Play Developer account.\n \n
\n \n \n \n);\n", + "source": "import {\n Body,\n Container,\n Column,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst main = {\n backgroundColor: '#dbddde',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst sectionLogo = {\n padding: '0 40px'\n};\n\nconst headerBlue = {\n marginTop: '-1px'\n};\n\nconst container = {\n margin: '30px auto',\n width: '610px',\n backgroundColor: '#fff',\n borderRadius: 5,\n overflow: 'hidden'\n};\n\nconst containerContact = {\n backgroundColor: '#f0fcff',\n width: '90%',\n borderRadius: '5px',\n overflow: 'hidden',\n paddingLeft: '20px'\n};\n\nconst heading = {\n fontSize: '14px',\n lineHeight: '26px',\n fontWeight: '700',\n color: '#004dcf'\n};\n\nconst paragraphContent = {\n padding: '0 40px'\n};\n\nconst paragraphList = {\n paddingLeft: 40\n};\n\nconst paragraph = {\n fontSize: '14px',\n lineHeight: '22px',\n color: '#3c4043'\n};\n\nconst link = {\n ...paragraph,\n color: '#004dcf'\n};\n\nconst hr = {\n borderColor: '#e8eaed',\n margin: '20px 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Google Play Policy Update';\n\nexport const Template = () => (\n \n \n Google Play developers\n \n \n
\n \n \n \n \n \n \n
\n\n
\n
\n DEVELOPER UPDATE\n Hello Google Play Developer,\n \n We strive to make Google Play a safe and trusted experience for users.\n \n \n We've added clarifications to our{' '}\n \n Target API Level policy\n \n . Because this is a clarification, our enforcement standards and practices for this\n policy remain the same.\n \n
\n
\n \n We’re noting exceptions to the{' '}\n \n Target API Level policy\n \n , which can be found in our updated{' '}\n \n Help Center article.\n \n These exceptions include permanently private apps and apps that target automotive or\n wearables form factors and are bundled within the same package.{' '}\n \n Learn more\n \n \n
\n
\n \n We’re also extending the deadline to give you more time to adjust to these changes. Now,\n apps that target API level 29 or below will start experiencing reduced distribution\n starting Jan 31, 2023 instead of Nov 1, 2022. If you need more time to update\n your app, you can request an extension to keep your app discoverable to all users until\n May 1, 2023.\n \n
\n
\n\n
\n Thank you,\n The Google Play team\n
\n\n
\n \n Connect with us\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n © 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA\n \n \n You have received this mandatory email service announcement to update you about\n important changes to your Google Play Developer account.\n \n
\n \n \n \n);\n", "sourceFile": "emails/google-play-policy-update.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/google-play-policy-update.tsx", "templateName": "Google Play Policy Update" diff --git a/apps/preview/dev/fixtures/nike-receipt.js b/apps/preview/dev/fixtures/nike-receipt.js index 5762966fc..542a03be9 100644 --- a/apps/preview/dev/fixtures/nike-receipt.js +++ b/apps/preview/dev/fixtures/nike-receipt.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Get your order summary, estimated delivery date and more
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

Tracking Number

\n

1ZV218970300071628

\n 		Track Package
\n
\n
\n \n \n \n \n \n \n
\"Nike\"\n

It's On Its Way.

\n

You order's is on its way. Use the link above to track its progress.

\n

We´ve also charged your payment method for the cost of your order and will be removing any authorization holds. For payment details, please visit your Orders page on Nike.com or in the Nike app.

\n
\n
\n \n \n \n \n \n \n
\n

Shipping to: Bruce Wayne

\n

2125 Chestnut St, San Francisco, CA 94123

\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\"Brazil\n

Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey

\n

Size L (12–14)

\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

Order Number

\n

C0106373851

\n 		\n

Order Date

\n

Sep 22, 2022

\n
\n \n \n \n \n \n \n
Order Status
\n
\n
\n \n \n \n \n \n \n
\n

Top Picks For You

\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\"Brazil\n

USWNT 2022/23 Stadium Home

\n

Women's Nike Dri-FIT Soccer Jersey

\n 		\"Brazil\n

Brazil 2022/23 Stadium Goalkeeper

\n

Men's Nike Dri-FIT Short-Sleeve Football Shirt

\n 		\"Brazil\n

FFF

\n

Women's Soccer Jacket

\n 		\"Brazil\n

FFF

\n

Women's Nike Pre-Match Football Top

\n
\n
\n
\n \n \n \n \n \n \n
\n

Get Help

\n \n \n \n \n
\n \n \n \n \n \n \n \n \n
Shipping StatusShipping & DeliveryReturns & Exchanges
\n \n \n \n \n \n \n \n
How to ReturnContact Options
\n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

1-800-806-6453

\n
\n 		\n

4 am - 11 pm PT

\n
\n
\n
\n \n \n \n \n \n \n
\n

Nike.com

\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
MenWomenKidsCustomize
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

Web Version

\n 		\n

Privacy Policy

\n
\n

Please contact us if you have any questions. (If you reply to this email, we won't be able to see it.)

\n \n \n \n \n
\n

© 2022 Nike, Inc. All Rights Reserved.

\n \n \n \n \n
\n

NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.

\n \n \n \n \n
\n
\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Get your order summary, estimated delivery date and more
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

Tracking Number

\n

1ZV218970300071628

\n 		Track Package
\n
\n
\n \n \n \n \n \n \n
\"Nike\"\n

It's On Its Way.

\n

You order's is on its way. Use the link above to track its progress.

\n

We´ve also charged your payment method for the cost of your order and will be removing any authorization holds. For payment details, please visit your Orders page on Nike.com or in the Nike app.

\n
\n
\n \n \n \n \n \n \n
\n

Shipping to: Bruce Wayne

\n

2125 Chestnut St, San Francisco, CA 94123

\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\"Brazil\n

Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey

\n

Size L (12–14)

\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

Order Number

\n

C0106373851

\n 		\n

Order Date

\n

Sep 22, 2022

\n
\n \n \n \n \n \n \n
Order Status
\n
\n
\n \n \n \n \n \n \n
\n

Top Picks For You

\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\"Brazil\n

USWNT 2022/23 Stadium Home

\n

Women's Nike Dri-FIT Soccer Jersey

\n 		\"Brazil\n

Brazil 2022/23 Stadium Goalkeeper

\n

Men's Nike Dri-FIT Short-Sleeve Football Shirt

\n 		\"Brazil\n

FFF

\n

Women's Soccer Jacket

\n 		\"Brazil\n

FFF

\n

Women's Nike Pre-Match Football Top

\n
\n
\n
\n \n \n \n \n \n \n
\n

Get Help

\n \n \n \n \n
\n \n \n \n \n \n \n \n \n
Shipping StatusShipping & DeliveryReturns & Exchanges
\n \n \n \n \n \n \n \n
How to ReturnContact Options
\n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

1-800-806-6453

\n
\n 		\n

4 am - 11 pm PT

\n
\n
\n
\n \n \n \n \n \n \n
\n

Nike.com

\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
MenWomenKidsCustomize
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

Web Version

\n 		\n

Privacy Policy

\n
\n

Please contact us if you have any questions. (If you reply to this email, we won't be able to see it.)

\n \n \n \n \n
\n

© 2022 Nike, Inc. All Rights Reserved.

\n \n \n \n \n
\n

NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.

\n \n \n \n \n
\n
\n
\n
\n
\n \n\n", "plain": "Tracking Number\n\n1ZV218970300071628\n\nTrack Package\n\n--------------------------------------------------------------------------------\n\n\nIT'S ON ITS WAY.\n\nYou order's is on its way. Use the link above to track its progress.\n\nWe´ve also charged your payment method for the cost of your order and will be\nremoving any authorization holds. For payment details, please visit your Orders\npage on Nike.com or in the Nike app.\n\n--------------------------------------------------------------------------------\n\nShipping to: Bruce Wayne\n\n2125 Chestnut St, San Francisco, CA 94123\n\n--------------------------------------------------------------------------------\n\nBrazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey\n\nSize L (12–14)\n\n--------------------------------------------------------------------------------\n\nOrder Number\n\nC0106373851\n\nOrder Date\n\nSep 22, 2022\n\nOrder Status\n\n--------------------------------------------------------------------------------\n\nTop Picks For You\n\nUSWNT 2022/23 Stadium Home\n\nWomen's Nike Dri-FIT Soccer Jersey\n\nBrazil 2022/23 Stadium Goalkeeper\n\nMen's Nike Dri-FIT Short-Sleeve Football Shirt\n\nFFF\n\nWomen's Soccer Jacket\n\nFFF\n\nWomen's Nike Pre-Match Football Top\n\n--------------------------------------------------------------------------------\n\nGet Help\n\nShipping Status /Shipping & Delivery /Returns & Exchanges /\n\nHow to Return /Contact Options /\n\n--------------------------------------------------------------------------------\n\n1-800-806-6453\n\n4 am - 11 pm PT\n\n--------------------------------------------------------------------------------\n\nNike.com\n\nMen /Women /Kids /Customize /\n\n--------------------------------------------------------------------------------\n\nWeb Version\n\nPrivacy Policy\n\nPlease contact us if you have any questions. (If you reply to this email, we\nwon't be able to see it.)\n\n© 2022 Nike, Inc. All Rights Reserved.\n\nNIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.", - "source": "import {\n Body,\n Container,\n Column,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst paddingX = {\n paddingLeft: '40px',\n paddingRight: '40px'\n};\n\nconst paddingY = {\n paddingTop: '22px',\n paddingBottom: '22px'\n};\n\nconst paragraph = {\n margin: '0',\n lineHeight: '2'\n};\n\nconst global = {\n paddingX,\n paddingY,\n defaultPadding: {\n ...paddingX,\n ...paddingY\n },\n paragraphWithBold: { ...paragraph, fontWeight: 'bold' },\n heading: {\n fontSize: '32px',\n lineHeight: '1.3',\n fontWeight: '700',\n textAlign: 'center',\n letterSpacing: '-1px'\n } as React.CSSProperties,\n text: {\n ...paragraph,\n color: '#747474',\n fontWeight: '500'\n },\n button: {\n border: '1px solid #929292',\n fontSize: '16px',\n textDecoration: 'none',\n padding: '10px 0px',\n width: '220px',\n display: 'block',\n textAlign: 'center',\n fontWeight: 500,\n color: '#000'\n } as React.CSSProperties,\n hr: {\n borderColor: '#E5E5E5',\n margin: '0'\n }\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '10px auto',\n width: '600px',\n border: '1px solid #E5E5E5'\n};\n\nconst track = {\n container: {\n padding: '22px 40px',\n backgroundColor: '#F7F7F7'\n },\n number: {\n margin: '12px 0 0 0',\n fontWeight: 500,\n lineHeight: '1.4',\n color: '#6F6F6F'\n }\n};\n\nconst message = {\n padding: '40px 74px',\n textAlign: 'center'\n} as React.CSSProperties;\n\nconst adressTitle = {\n ...paragraph,\n fontSize: '15px',\n fontWeight: 'bold'\n};\n\nconst recomendationsText = {\n margin: '0',\n fontSize: '15px',\n lineHeight: '1',\n paddingLeft: '10px',\n paddingRight: '10px'\n};\n\nconst recomendations = {\n container: {\n padding: '20px 0'\n },\n product: {\n verticalAlign: 'top',\n textAlign: 'left' as const,\n paddingLeft: '2px',\n paddingRight: '2px'\n },\n title: { ...recomendationsText, paddingTop: '12px', fontWeight: '500' },\n text: {\n ...recomendationsText,\n paddingTop: '4px',\n color: '#747474'\n }\n};\n\nconst menu = {\n container: {\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '20px',\n backgroundColor: '#F7F7F7'\n },\n content: {\n ...paddingY,\n paddingLeft: '20px',\n paddingRight: '20px'\n },\n title: {\n paddingLeft: '20px',\n paddingRight: '20px',\n fontWeight: 'bold'\n },\n text: {\n fontSize: '13.5px',\n marginTop: 0,\n fontWeight: 500,\n color: '#000'\n },\n tel: {\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '32px',\n paddingBottom: '22px'\n }\n};\n\nconst categories = {\n container: {\n width: '370px',\n margin: 'auto',\n paddingTop: '12px'\n },\n text: {\n fontWeight: '500',\n color: '#000'\n }\n};\n\nconst footer = {\n policy: {\n width: '166px',\n margin: 'auto'\n },\n text: {\n margin: '0',\n color: '#AFAFAF',\n fontSize: '13px',\n textAlign: 'center'\n } as React.CSSProperties\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Nike Receipt';\n\nexport const Template = () => (\n \n \n Get your order summary, estimated delivery date and more\n \n \n
\n \n \n Tracking Number\n 1ZV218970300071628\n \n \n Track Package\n \n \n
\n
\n
\n \n It's On Its Way.\n \n You order's is on its way. Use the link above to track its progress.\n \n \n We´ve also charged your payment method for the cost of your order and will be removing\n any authorization holds. For payment details, please visit your Orders page on Nike.com\n or in the Nike app.\n \n
\n
\n
\n Shipping to: Bruce Wayne\n \n 2125 Chestnut St, San Francisco, CA 94123\n \n
\n
\n
\n \n \n \n \n \n \n Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey\n \n Size L (12–14)\n \n \n
\n
\n
\n \n \n Order Number\n C0106373851\n \n \n Order Date\n Sep 22, 2022\n \n \n \n \n Order Status\n \n \n
\n
\n
\n \n Top Picks For You\n \n \n \n \n USWNT 2022/23 Stadium Home\n Women's Nike Dri-FIT Soccer Jersey\n \n \n \n Brazil 2022/23 Stadium Goalkeeper\n \n Men's Nike Dri-FIT Short-Sleeve Football Shirt\n \n \n \n \n FFF\n Women's Soccer Jacket\n \n \n \n FFF\n Women's Nike Pre-Match Football Top\n \n \n
\n
\n
\n \n Get Help\n \n \n \n \n Shipping Status\n \n \n \n \n Shipping & Delivery\n \n \n \n \n Returns & Exchanges\n \n \n \n \n \n \n How to Return\n \n \n \n \n Contact Options\n \n \n \n
\n \n \n \n \n \n \n \n 1-800-806-6453\n \n \n \n \n \n 4 am - 11 pm PT\n \n \n \n
\n
\n
\n \n Nike.com\n \n \n \n \n Men\n \n \n \n \n Women\n \n \n \n \n Kids\n \n \n \n \n Customize\n \n \n \n
\n
\n
\n \n \n Web Version\n \n \n Privacy Policy\n \n \n \n \n Please contact us if you have any questions. (If you reply to this email, we won't be\n able to see it.)\n \n \n \n © 2022 Nike, Inc. All Rights Reserved.\n \n \n \n NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.\n \n \n
\n \n \n \n);\n", + "source": "import {\n Body,\n Container,\n Column,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst paddingX = {\n paddingLeft: '40px',\n paddingRight: '40px'\n};\n\nconst paddingY = {\n paddingTop: '22px',\n paddingBottom: '22px'\n};\n\nconst paragraph = {\n margin: '0',\n lineHeight: '2'\n};\n\nconst global = {\n paddingX,\n paddingY,\n defaultPadding: {\n ...paddingX,\n ...paddingY\n },\n paragraphWithBold: { ...paragraph, fontWeight: 'bold' },\n heading: {\n fontSize: '32px',\n lineHeight: '1.3',\n fontWeight: '700',\n textAlign: 'center',\n letterSpacing: '-1px'\n } as React.CSSProperties,\n text: {\n ...paragraph,\n color: '#747474',\n fontWeight: '500'\n },\n button: {\n border: '1px solid #929292',\n fontSize: '16px',\n textDecoration: 'none',\n padding: '10px 0px',\n width: '220px',\n display: 'block',\n textAlign: 'center',\n fontWeight: 500,\n color: '#000'\n } as React.CSSProperties,\n hr: {\n borderColor: '#E5E5E5',\n margin: '0'\n }\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '10px auto',\n width: '600px',\n border: '1px solid #E5E5E5'\n};\n\nconst track = {\n container: {\n padding: '22px 40px',\n backgroundColor: '#F7F7F7'\n },\n number: {\n margin: '12px 0 0 0',\n fontWeight: 500,\n lineHeight: '1.4',\n color: '#6F6F6F'\n }\n};\n\nconst message = {\n padding: '40px 74px',\n textAlign: 'center'\n} as React.CSSProperties;\n\nconst adressTitle = {\n ...paragraph,\n fontSize: '15px',\n fontWeight: 'bold'\n};\n\nconst recomendationsText = {\n margin: '0',\n fontSize: '15px',\n lineHeight: '1',\n paddingLeft: '10px',\n paddingRight: '10px'\n};\n\nconst recomendations = {\n container: {\n padding: '20px 0'\n },\n product: {\n verticalAlign: 'top',\n textAlign: 'left' as const,\n paddingLeft: '2px',\n paddingRight: '2px'\n },\n title: { ...recomendationsText, paddingTop: '12px', fontWeight: '500' },\n text: {\n ...recomendationsText,\n paddingTop: '4px',\n color: '#747474'\n }\n};\n\nconst menu = {\n container: {\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '20px',\n backgroundColor: '#F7F7F7'\n },\n content: {\n ...paddingY,\n paddingLeft: '20px',\n paddingRight: '20px'\n },\n title: {\n paddingLeft: '20px',\n paddingRight: '20px',\n fontWeight: 'bold'\n },\n text: {\n fontSize: '13.5px',\n marginTop: 0,\n fontWeight: 500,\n color: '#000'\n },\n tel: {\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '32px',\n paddingBottom: '22px'\n }\n};\n\nconst categories = {\n container: {\n width: '370px',\n margin: 'auto',\n paddingTop: '12px'\n },\n text: {\n fontWeight: '500',\n color: '#000'\n }\n};\n\nconst footer = {\n policy: {\n width: '166px',\n margin: 'auto'\n },\n text: {\n margin: '0',\n color: '#AFAFAF',\n fontSize: '13px',\n textAlign: 'center'\n } as React.CSSProperties\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Nike Receipt';\n\nexport const Template = () => (\n \n \n Get your order summary, estimated delivery date and more\n \n \n
\n \n \n Tracking Number\n 1ZV218970300071628\n \n \n Track Package\n \n \n
\n
\n
\n \n It's On Its Way.\n \n You order's is on its way. Use the link above to track its progress.\n \n \n We´ve also charged your payment method for the cost of your order and will be removing\n any authorization holds. For payment details, please visit your Orders page on Nike.com\n or in the Nike app.\n \n
\n
\n
\n Shipping to: Bruce Wayne\n \n 2125 Chestnut St, San Francisco, CA 94123\n \n
\n
\n
\n \n \n \n \n \n \n Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey\n \n Size L (12–14)\n \n \n
\n
\n
\n \n \n Order Number\n C0106373851\n \n \n Order Date\n Sep 22, 2022\n \n \n \n \n Order Status\n \n \n
\n
\n
\n \n Top Picks For You\n \n \n \n \n USWNT 2022/23 Stadium Home\n Women's Nike Dri-FIT Soccer Jersey\n \n \n \n Brazil 2022/23 Stadium Goalkeeper\n \n Men's Nike Dri-FIT Short-Sleeve Football Shirt\n \n \n \n \n FFF\n Women's Soccer Jacket\n \n \n \n FFF\n Women's Nike Pre-Match Football Top\n \n \n
\n
\n
\n \n Get Help\n \n \n \n \n Shipping Status\n \n \n \n \n Shipping & Delivery\n \n \n \n \n Returns & Exchanges\n \n \n \n \n \n \n How to Return\n \n \n \n \n Contact Options\n \n \n \n
\n \n \n \n \n \n \n \n 1-800-806-6453\n \n \n \n \n \n 4 am - 11 pm PT\n \n \n \n
\n
\n
\n \n Nike.com\n \n \n \n \n Men\n \n \n \n \n Women\n \n \n \n \n Kids\n \n \n \n \n Customize\n \n \n \n
\n
\n
\n \n \n Web Version\n \n \n Privacy Policy\n \n \n \n \n Please contact us if you have any questions. (If you reply to this email, we won't be\n able to see it.)\n \n \n \n © 2022 Nike, Inc. All Rights Reserved.\n \n \n \n NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.\n \n \n
\n \n \n \n);\n", "sourceFile": "emails/nike-receipt.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/nike-receipt.tsx", "templateName": "Nike Receipt" diff --git a/apps/preview/dev/fixtures/plaid-verify-identity.js b/apps/preview/dev/fixtures/plaid-verify-identity.js index 99ea07e24..c7ed86905 100644 --- a/apps/preview/dev/fixtures/plaid-verify-identity.js +++ b/apps/preview/dev/fixtures/plaid-verify-identity.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
\n
\n \n \n \n \n \n \n
\"Plaid\"\n

Verify Your Identity

\n

Enter the following code to finish linking Venmo.

\n \n \n \n \n \n \n
\n

144833

\n
\n

Not expecting this email?

\n

Contact login@plaid.com if you did not request this code.

\n
\n
\n
\n

Securely powered by Plaid.

\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
\n
\n \n \n \n \n \n \n
\"Plaid\"\n

Verify Your Identity

\n

Enter the following code to finish linking Venmo.

\n \n \n \n \n \n \n
\n

144833

\n
\n

Not expecting this email?

\n

Contact login@plaid.com if you did not request this code.

\n
\n
\n
\n

Securely powered by Plaid.

\n \n\n", "plain": "Verify Your Identity\n\n\nENTER THE FOLLOWING CODE TO FINISH LINKING VENMO.\n\n144833\n\nNot expecting this email?\n\nContact login@plaid.com login@plaid.com if you did not request this code.\n\nSecurely powered by Plaid.", - "source": "import { Body, Container, Head, Heading, Html, Img, Link, Section, Text } from 'jsx-email';\n\ninterface PlaidVerifyIdentityEmailProps {\n validationCode?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n border: '1px solid #eee',\n borderRadius: '5px',\n boxShadow: '0 5px 10px rgba(20,50,70,.2)',\n marginTop: '20px',\n width: '360px',\n margin: '0 auto',\n padding: '68px 0 130px'\n};\n\nconst logo = {\n margin: '0 auto'\n};\n\nconst tertiary = {\n color: '#0a85ea',\n fontSize: '11px',\n fontWeight: 700,\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n height: '16px',\n letterSpacing: '0',\n lineHeight: '16px',\n margin: '16px 8px 8px 8px',\n textTransform: 'uppercase' as const,\n textAlign: 'center' as const\n};\n\nconst secondary = {\n color: '#000',\n display: 'inline-block',\n fontFamily: 'HelveticaNeue-Medium,Helvetica,Arial,sans-serif',\n fontSize: '20px',\n fontWeight: 500,\n lineHeight: '24px',\n marginBottom: '0',\n marginTop: '0',\n textAlign: 'center' as const\n};\n\nconst codeContainer = {\n background: 'rgba(0,0,0,.05)',\n borderRadius: '4px',\n margin: '16px auto 14px',\n verticalAlign: 'middle',\n width: '280px'\n};\n\nconst code = {\n color: '#000',\n display: 'inline-block',\n fontFamily: 'HelveticaNeue-Bold',\n fontSize: '32px',\n fontWeight: 700,\n letterSpacing: '6px',\n lineHeight: '40px',\n paddingBottom: '8px',\n paddingTop: '8px',\n margin: '0 auto',\n width: '100%',\n textAlign: 'center' as const\n};\n\nconst paragraph = {\n color: '#444',\n fontSize: '15px',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n letterSpacing: '0',\n lineHeight: '23px',\n padding: '0 40px',\n margin: '0',\n textAlign: 'center' as const\n};\n\nconst link = {\n color: '#444',\n textDecoration: 'underline'\n};\n\nconst footer = {\n color: '#000',\n fontSize: '12px',\n fontWeight: 800,\n letterSpacing: '0',\n lineHeight: '23px',\n margin: '0',\n marginTop: '20px',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n textAlign: 'center' as const,\n textTransform: 'uppercase' as const\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n validationCode: '144833'\n} as PlaidVerifyIdentityEmailProps;\n\nexport const templateName = 'Plaid Verify Identity';\n\nexport const Template = ({ validationCode }: PlaidVerifyIdentityEmailProps) => (\n \n \n \n \n \"Plaid\"\n Verify Your Identity\n Enter the following code to finish linking Venmo.\n
\n {validationCode}\n
\n Not expecting this email?\n \n Contact{' '}\n \n login@plaid.com\n {' '}\n if you did not request this code.\n \n \n Securely powered by Plaid.\n \n \n);\n", + "source": "import { Body, Container, Head, Heading, Html, Img, Link, Section, Text } from 'jsx-email';\n\ninterface PlaidVerifyIdentityEmailProps {\n validationCode?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n border: '1px solid #eee',\n borderRadius: '5px',\n boxShadow: '0 5px 10px rgba(20,50,70,.2)',\n marginTop: '20px',\n width: '360px',\n margin: '0 auto',\n padding: '68px 0 130px'\n};\n\nconst logo = {\n margin: '0 auto'\n};\n\nconst tertiary = {\n color: '#0a85ea',\n fontSize: '11px',\n fontWeight: 700,\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n height: '16px',\n letterSpacing: '0',\n lineHeight: '16px',\n margin: '16px 8px 8px 8px',\n textTransform: 'uppercase' as const,\n textAlign: 'center' as const\n};\n\nconst secondary = {\n color: '#000',\n display: 'inline-block',\n fontFamily: 'HelveticaNeue-Medium,Helvetica,Arial,sans-serif',\n fontSize: '20px',\n fontWeight: 500,\n lineHeight: '24px',\n marginBottom: '0',\n marginTop: '0',\n textAlign: 'center' as const\n};\n\nconst codeContainer = {\n background: 'rgba(0,0,0,.05)',\n borderRadius: '4px',\n margin: '16px auto 14px',\n verticalAlign: 'middle',\n width: '280px'\n};\n\nconst code = {\n color: '#000',\n display: 'inline-block',\n fontFamily: 'HelveticaNeue-Bold',\n fontSize: '32px',\n fontWeight: 700,\n letterSpacing: '6px',\n lineHeight: '40px',\n paddingBottom: '8px',\n paddingTop: '8px',\n margin: '0 auto',\n width: '100%',\n textAlign: 'center' as const\n};\n\nconst paragraph = {\n color: '#444',\n fontSize: '15px',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n letterSpacing: '0',\n lineHeight: '23px',\n padding: '0 40px',\n margin: '0',\n textAlign: 'center' as const\n};\n\nconst link = {\n color: '#444',\n textDecoration: 'underline'\n};\n\nconst footer = {\n color: '#000',\n fontSize: '12px',\n fontWeight: 800,\n letterSpacing: '0',\n lineHeight: '23px',\n margin: '0',\n marginTop: '20px',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n textAlign: 'center' as const,\n textTransform: 'uppercase' as const\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n validationCode: '144833'\n} as PlaidVerifyIdentityEmailProps;\n\nexport const templateName = 'Plaid Verify Identity';\n\nexport const Template = ({ validationCode }: PlaidVerifyIdentityEmailProps) => (\n \n \n \n \n \"Plaid\"\n Verify Your Identity\n Enter the following code to finish linking Venmo.\n
\n {validationCode}\n
\n Not expecting this email?\n \n Contact{' '}\n \n login@plaid.com\n {' '}\n if you did not request this code.\n \n \n Securely powered by Plaid.\n \n \n);\n", "sourceFile": "emails/plaid-verify-identity.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/plaid-verify-identity.tsx", "templateName": "Plaid Verify Identity" diff --git a/apps/preview/dev/fixtures/slack-confirm.js b/apps/preview/dev/fixtures/slack-confirm.js index fac25f847..3c0f69451 100644 --- a/apps/preview/dev/fixtures/slack-confirm.js +++ b/apps/preview/dev/fixtures/slack-confirm.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Confirm your email address
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Slack\"
\n

Confirm your email address

\n

Your confirmation code is below - enter it in your open browser window and we'll help you get signed in.

\n \n \n \n \n \n \n
\n

DJZ-TLX

\n
\n

If you didn't request this email, there's nothing to worry about - you can safely ignore it.

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\"Slack\"\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\"Slack\"\"Slack\"\"Slack\"
\n
\n
\n
\n \n \n \n \n \n \n
Our blog   |   Policies   |   Help center   |   Slack Community\n

©2022 Slack Technologies, LLC, a Salesforce company.
500 Howard Street, San Francisco, CA 94105, USA

All rights reserved.

\n
\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Confirm your email address
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Slack\"
\n

Confirm your email address

\n

Your confirmation code is below - enter it in your open browser window and we'll help you get signed in.

\n \n \n \n \n \n \n
\n

DJZ-TLX

\n
\n

If you didn't request this email, there's nothing to worry about - you can safely ignore it.

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\"Slack\"\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\"Slack\"\"Slack\"\"Slack\"
\n
\n
\n
\n \n \n \n \n \n \n
Our blog   |   Policies   |   Help center   |   Slack Community\n

©2022 Slack Technologies, LLC, a Salesforce company.
500 Howard Street, San Francisco, CA 94105, USA

All rights reserved.

\n
\n
\n
\n
\n \n\n", "plain": "CONFIRM YOUR EMAIL ADDRESS\n\nYour confirmation code is below - enter it in your open browser window and we'll\nhelp you get signed in.\n\nDJZ-TLX\n\nIf you didn't request this email, there's nothing to worry about - you can\nsafely ignore it.\n\n///\n\nOur blog https://slackhq.com   |   Policies https://slack.com/legal   |   Help\ncenter https://slack.com/help   |   Slack Community https://slack.com/community\n\n©2022 Slack Technologies, LLC, a Salesforce company.\n500 Howard Street, San Francisco, CA 94105, USA\n\nAll rights reserved.", - "source": "import {\n Body,\n Container,\n Column,\n Head,\n Heading,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface SlackConfirmEmailProps {\n validationCode?: string;\n}\n\nconst footerText = {\n fontSize: '12px',\n color: '#b7b7b7',\n lineHeight: '15px',\n textAlign: 'left' as const,\n marginBottom: '50px'\n};\n\nconst footerLink = {\n color: '#b7b7b7',\n textDecoration: 'underline'\n};\n\nconst footerLogos = {\n marginBottom: '32px',\n paddingLeft: '8px',\n paddingRight: '8px',\n width: '100%'\n};\n\nconst socialMediaIcon = {\n display: 'inline',\n marginLeft: '32px'\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n margin: '0 auto',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\"\n};\n\nconst container = {\n maxWidth: '600px',\n margin: '0 auto'\n};\n\nconst logoContainer = {\n marginTop: '32px'\n};\n\nconst h1 = {\n color: '#1d1c1d',\n fontSize: '36px',\n fontWeight: '700',\n margin: '30px 0',\n padding: '0',\n lineHeight: '42px'\n};\n\nconst heroText = {\n fontSize: '20px',\n lineHeight: '28px',\n marginBottom: '30px'\n};\n\nconst codeBox = {\n background: 'rgb(245, 244, 245)',\n borderRadius: '4px',\n marginRight: '50px',\n marginBottom: '30px',\n padding: '43px 23px'\n};\n\nconst confirmationCodeText = {\n fontSize: '30px',\n textAlign: 'center' as const,\n verticalAlign: 'middle'\n};\n\nconst text = {\n color: '#000',\n fontSize: '14px',\n lineHeight: '24px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n validationCode: 'DJZ-TLX'\n} as SlackConfirmEmailProps;\n\nexport const templateName = 'Slack Confirm';\n\nexport const Template = ({ validationCode }: SlackConfirmEmailProps) => (\n \n \n Confirm your email address\n \n \n
\n \"Slack\"\n
\n Confirm your email address\n \n Your confirmation code is below - enter it in your open browser window and we'll help you\n get signed in.\n \n\n
\n {validationCode}\n
\n\n \n If you didn't request this email, there's nothing to worry about - you can safely ignore\n it.\n \n\n
\n \n \n \"Slack\"\n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n
\n\n
\n \n Our blog\n \n    |   \n \n Policies\n \n    |   \n \n Help center\n \n    |   \n \n Slack Community\n \n \n ©2022 Slack Technologies, LLC, a Salesforce company.
\n 500 Howard Street, San Francisco, CA 94105, USA
\n
\n All rights reserved.\n \n
\n \n \n \n);\n", + "source": "import {\n Body,\n Container,\n Column,\n Head,\n Heading,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface SlackConfirmEmailProps {\n validationCode?: string;\n}\n\nconst footerText = {\n fontSize: '12px',\n color: '#b7b7b7',\n lineHeight: '15px',\n textAlign: 'left' as const,\n marginBottom: '50px'\n};\n\nconst footerLink = {\n color: '#b7b7b7',\n textDecoration: 'underline'\n};\n\nconst footerLogos = {\n marginBottom: '32px',\n paddingLeft: '8px',\n paddingRight: '8px',\n width: '100%'\n};\n\nconst socialMediaIcon = {\n display: 'inline',\n marginLeft: '32px'\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n margin: '0 auto',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\"\n};\n\nconst container = {\n maxWidth: '600px',\n margin: '0 auto'\n};\n\nconst logoContainer = {\n marginTop: '32px'\n};\n\nconst h1 = {\n color: '#1d1c1d',\n fontSize: '36px',\n fontWeight: '700',\n margin: '30px 0',\n padding: '0',\n lineHeight: '42px'\n};\n\nconst heroText = {\n fontSize: '20px',\n lineHeight: '28px',\n marginBottom: '30px'\n};\n\nconst codeBox = {\n background: 'rgb(245, 244, 245)',\n borderRadius: '4px',\n marginRight: '50px',\n marginBottom: '30px',\n padding: '43px 23px'\n};\n\nconst confirmationCodeText = {\n fontSize: '30px',\n textAlign: 'center' as const,\n verticalAlign: 'middle'\n};\n\nconst text = {\n color: '#000',\n fontSize: '14px',\n lineHeight: '24px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n validationCode: 'DJZ-TLX'\n} as SlackConfirmEmailProps;\n\nexport const templateName = 'Slack Confirm';\n\nexport const Template = ({ validationCode }: SlackConfirmEmailProps) => (\n \n \n Confirm your email address\n \n \n
\n \"Slack\"\n
\n Confirm your email address\n \n Your confirmation code is below - enter it in your open browser window and we'll help you\n get signed in.\n \n\n
\n {validationCode}\n
\n\n \n If you didn't request this email, there's nothing to worry about - you can safely ignore\n it.\n \n\n
\n \n \n \"Slack\"\n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n
\n\n
\n \n Our blog\n \n    |   \n \n Policies\n \n    |   \n \n Help center\n \n    |   \n \n Slack Community\n \n \n ©2022 Slack Technologies, LLC, a Salesforce company.
\n 500 Howard Street, San Francisco, CA 94105, USA
\n
\n All rights reserved.\n \n
\n \n \n \n);\n", "sourceFile": "emails/slack-confirm.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/slack-confirm.tsx", "templateName": "Slack Confirm" diff --git a/apps/preview/dev/fixtures/stack-overflow-tips.js b/apps/preview/dev/fixtures/stack-overflow-tips.js index c2ed2fe5d..cb5e95b06 100644 --- a/apps/preview/dev/fixtures/stack-overflow-tips.js +++ b/apps/preview/dev/fixtures/stack-overflow-tips.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Stack overflow tips for searching
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

Find what you want, faster

\n

Tips and tricks for searching on Stack Overflow

\n
\n
\n \n \n \n \n \n \n
\n

Searching for solutions

\n

With more than 18 million questions, it's possible that someone has already provided a solution to the problem you're facing.

\n
\n

Use the search bar at the top of the page to find what you need

\n

Here are a few simple search tips to get you started:

\n
    \n
  • \n

    To find a specific phrase, enter it in quotes: \"local storage\"

    \n
    • \n
  • \n

    To search within specific tag(s), enter them in square brackets: [javascript]

    \n
    • \n
  • \n

    Combine them to get even more precise results - [javascript] \"local storage\" searches for the phrase “local storage” in questions that have the [javascript] tag

    \n
    • \n
\n

The more information you can put in the search bar, the more likely you will be to either find the answer you need or feel confident that no one else has asked the question before.

\n
\n

Take a break and read about the worst coder in the world

\n \n \n \n \n \n \n
I need a break
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n

You're receiving this email because your Stack Overflow activity triggered this tip or reminder.

Unsubscribe from emails like this Edit email settings Contact usPrivacy\n
\n

Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038

\n

<3

\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
Stack overflow tips for searching
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n

Find what you want, faster

\n

Tips and tricks for searching on Stack Overflow

\n
\n
\n \n \n \n \n \n \n
\n

Searching for solutions

\n

With more than 18 million questions, it's possible that someone has already provided a solution to the problem you're facing.

\n
\n

Use the search bar at the top of the page to find what you need

\n

Here are a few simple search tips to get you started:

\n
    \n
  • \n

    To find a specific phrase, enter it in quotes: \"local storage\"

    \n
    • \n
  • \n

    To search within specific tag(s), enter them in square brackets: [javascript]

    \n
    • \n
  • \n

    Combine them to get even more precise results - [javascript] \"local storage\" searches for the phrase “local storage” in questions that have the [javascript] tag

    \n
    • \n
\n

The more information you can put in the search bar, the more likely you will be to either find the answer you need or feel confident that no one else has asked the question before.

\n
\n

Take a break and read about the worst coder in the world

\n \n \n \n \n \n \n
I need a break
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n

You're receiving this email because your Stack Overflow activity triggered this tip or reminder.

Unsubscribe from emails like this Edit email settings Contact usPrivacy\n
\n

Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038

\n

<3

\n
\n \n\n", "plain": "FIND WHAT YOU WANT, FASTER\n\nTips and tricks for searching on Stack Overflow\n\n\nSEARCHING FOR SOLUTIONS\n\nWith more than 18 million questions, it's possible that someone has already\nprovided a solution to the problem you're facing.\n\n--------------------------------------------------------------------------------\n\n\nUSE THE SEARCH BAR AT THE TOP OF THE PAGE TO FIND WHAT YOU NEED\n\nHere are a few simple search tips to get you started:\n\n * To find a specific phrase, enter it in quotes: \"local storage\"\n\n * To search within specific tag(s), enter them in square brackets: [javascript]\n\n * Combine them to get even more precise results - [javascript] \"local storage\"\n searches for the phrase “local storage” in questions that have the\n [javascript] tag\n\nThe more information you can put in the search bar, the more likely you will be\nto either find the answer you need or feel confident that no one else has asked\nthe question before.\n\n--------------------------------------------------------------------------------\n\n\nTAKE A BREAK AND READ ABOUT THE WORST CODER IN THE WORLD\n\nI need a break https://stackoverflow.blog/2019/10/22/\n\nYou're receiving this email because your Stack Overflow activity triggered this\ntip or reminder.\n\nUnsubscribe from emails like this /Edit email settings /Contact us /Privacy /\n\n--------------------------------------------------------------------------------\n\nStack Overflow, 110 William Street, 28th Floor, New York, NY 10038\n\n<3", - "source": "import {\n Body,\n Column,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text,\n Row\n} from 'jsx-email';\n\ninterface StackOverflowTipsEmailProps {\n tips?: { id: number; description: string }[];\n}\n\nconst main = {\n backgroundColor: '#f3f3f5',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif'\n};\n\nconst headerContent = { padding: '20px 30px 15px' };\n\nconst headerContentTitle = {\n color: '#fff',\n fontSize: '27px',\n fontWeight: 'bold',\n lineHeight: '27px'\n};\n\nconst headerContentSubtitle = {\n color: '#fff',\n fontSize: '17px'\n};\n\nconst headerImageContainer = {\n padding: '30px 10px'\n};\n\nconst title = {\n margin: '0 0 15px',\n fontWeight: 'bold',\n fontSize: '21px',\n lineHeight: '21px',\n color: '#0c0d0e'\n};\n\nconst paragraph = {\n fontSize: '15px',\n lineHeight: '21px',\n color: '#3c3f44'\n};\n\nconst divider = {\n margin: '30px 0'\n};\n\nconst container = {\n maxWidth: '680px',\n width: '100%',\n margin: '0 auto',\n backgroundColor: '#ffffff'\n};\n\nconst footer = {\n width: '680px',\n margin: '32px auto 0 auto',\n padding: '0 30px'\n};\n\nconst content = {\n padding: '30px 30px 40px 30px'\n};\n\nconst logo = {\n display: 'flex',\n background: '#f3f3f5',\n padding: '20px 30px'\n};\n\nconst header = {\n borderRadius: '5px 5px 0 0',\n display: 'flex',\n flexDireciont: 'column',\n backgroundColor: '#2b2d6e'\n};\n\nconst buttonContainer = {\n marginTop: '24px',\n display: 'block'\n};\n\nconst button = {\n backgroundColor: '#0095ff',\n border: '1px solid #0077cc',\n fontSize: '17px',\n lineHeight: '17px',\n padding: '13px 17px',\n borderRadius: '4px',\n maxWidth: '120px',\n color: '#fff'\n};\n\nconst footerDivider = {\n ...divider,\n borderColor: '#d6d8db'\n};\n\nconst footerText = {\n fontSize: '12px',\n lineHeight: '15px',\n color: '#9199a1',\n margin: '0'\n};\n\nconst footerLink = {\n display: 'inline-block',\n color: '#9199a1',\n textDecoration: 'underline',\n fontSize: '12px',\n marginRight: '10px',\n marginBottom: '0',\n marginTop: '8px'\n};\n\nconst footerAddress = {\n margin: '4px 0',\n fontSize: '12px',\n lineHeight: '15px',\n color: '#9199a1'\n};\n\nconst footerHeart = {\n borderRadius: '1px',\n border: '1px solid #d6d9dc',\n padding: '4px 6px 3px 6px',\n fontSize: '11px',\n lineHeight: '11px',\n fontFamily: 'Consolas,monospace',\n color: '#e06c77',\n maxWidth: 'min-content',\n margin: '0 0 32px 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nconst PropDefaults: StackOverflowTipsEmailProps = {\n tips: [\n {\n id: 1,\n description: 'To find a specific phrase, enter it in quotes: \"local storage\"'\n },\n {\n id: 1,\n description: 'To search within specific tag(s), enter them in square brackets: [javascript]'\n },\n {\n id: 1,\n description:\n 'Combine them to get even more precise results - [javascript] \"local storage\" searches for the phrase “local storage” in questions that have the [javascript] tag'\n }\n ]\n};\n\nexport const previewProps = {\n tips: PropDefaults.tips\n} as StackOverflowTipsEmailProps;\n\nexport const templateName = 'StackOverflow Tips';\n\nexport const Template = ({ tips = [] }: StackOverflowTipsEmailProps) => (\n \n \n Stack overflow tips for searching\n \n \n
\n \n
\n\n
\n \n \n Find what you want, faster\n \n Tips and tricks for searching on Stack Overflow\n \n \n \n \n \n \n
\n\n
\n \n Searching for solutions\n \n \n With more than 18 million questions, it's possible that someone has already provided a\n solution to the problem you're facing.{' '}\n \n\n
\n\n \n Use the search bar at the top of the page to find what you need\n \n Here are a few simple search tips to get you started:\n \n\n \n The more information you can put in the search bar, the more likely you will be to\n either find the answer you need or feel confident that no one else has asked the\n question before.\n \n\n
\n\n \n Take a break and read about the worst coder in the world\n \n\n
\n \n I need a break\n \n
\n
\n \n\n
\n \n You're receiving this email because your Stack Overflow activity triggered this tip or\n reminder.\n \n\n \n Unsubscribe from emails like this{' '}\n \n \n Edit email settings{' '}\n \n \n Contact us\n \n \n Privacy\n \n\n
\n\n \n \n Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038\n \n {'<3'}\n
\n \n \n);\n", + "source": "import {\n Body,\n Column,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text,\n Row\n} from 'jsx-email';\n\ninterface StackOverflowTipsEmailProps {\n tips?: { id: number; description: string }[];\n}\n\nconst main = {\n backgroundColor: '#f3f3f5',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif'\n};\n\nconst headerContent = { padding: '20px 30px 15px' };\n\nconst headerContentTitle = {\n color: '#fff',\n fontSize: '27px',\n fontWeight: 'bold',\n lineHeight: '27px'\n};\n\nconst headerContentSubtitle = {\n color: '#fff',\n fontSize: '17px'\n};\n\nconst headerImageContainer = {\n padding: '30px 10px'\n};\n\nconst title = {\n margin: '0 0 15px',\n fontWeight: 'bold',\n fontSize: '21px',\n lineHeight: '21px',\n color: '#0c0d0e'\n};\n\nconst paragraph = {\n fontSize: '15px',\n lineHeight: '21px',\n color: '#3c3f44'\n};\n\nconst divider = {\n margin: '30px 0'\n};\n\nconst container = {\n maxWidth: '680px',\n width: '100%',\n margin: '0 auto',\n backgroundColor: '#ffffff'\n};\n\nconst footer = {\n width: '680px',\n margin: '32px auto 0 auto',\n padding: '0 30px'\n};\n\nconst content = {\n padding: '30px 30px 40px 30px'\n};\n\nconst logo = {\n display: 'flex',\n background: '#f3f3f5',\n padding: '20px 30px'\n};\n\nconst header = {\n borderRadius: '5px 5px 0 0',\n display: 'flex',\n flexDireciont: 'column',\n backgroundColor: '#2b2d6e'\n};\n\nconst buttonContainer = {\n marginTop: '24px',\n display: 'block'\n};\n\nconst button = {\n backgroundColor: '#0095ff',\n border: '1px solid #0077cc',\n fontSize: '17px',\n lineHeight: '17px',\n padding: '13px 17px',\n borderRadius: '4px',\n maxWidth: '120px',\n color: '#fff'\n};\n\nconst footerDivider = {\n ...divider,\n borderColor: '#d6d8db'\n};\n\nconst footerText = {\n fontSize: '12px',\n lineHeight: '15px',\n color: '#9199a1',\n margin: '0'\n};\n\nconst footerLink = {\n display: 'inline-block',\n color: '#9199a1',\n textDecoration: 'underline',\n fontSize: '12px',\n marginRight: '10px',\n marginBottom: '0',\n marginTop: '8px'\n};\n\nconst footerAddress = {\n margin: '4px 0',\n fontSize: '12px',\n lineHeight: '15px',\n color: '#9199a1'\n};\n\nconst footerHeart = {\n borderRadius: '1px',\n border: '1px solid #d6d9dc',\n padding: '4px 6px 3px 6px',\n fontSize: '11px',\n lineHeight: '11px',\n fontFamily: 'Consolas,monospace',\n color: '#e06c77',\n maxWidth: 'min-content',\n margin: '0 0 32px 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nconst PropDefaults: StackOverflowTipsEmailProps = {\n tips: [\n {\n id: 1,\n description: 'To find a specific phrase, enter it in quotes: \"local storage\"'\n },\n {\n id: 1,\n description: 'To search within specific tag(s), enter them in square brackets: [javascript]'\n },\n {\n id: 1,\n description:\n 'Combine them to get even more precise results - [javascript] \"local storage\" searches for the phrase “local storage” in questions that have the [javascript] tag'\n }\n ]\n};\n\nexport const previewProps = {\n tips: PropDefaults.tips\n} as StackOverflowTipsEmailProps;\n\nexport const templateName = 'StackOverflow Tips';\n\nexport const Template = ({ tips = [] }: StackOverflowTipsEmailProps) => (\n \n \n Stack overflow tips for searching\n \n \n
\n \n
\n\n
\n \n \n Find what you want, faster\n \n Tips and tricks for searching on Stack Overflow\n \n \n \n \n \n \n
\n\n
\n \n Searching for solutions\n \n \n With more than 18 million questions, it's possible that someone has already provided a\n solution to the problem you're facing.{' '}\n \n\n
\n\n \n Use the search bar at the top of the page to find what you need\n \n Here are a few simple search tips to get you started:\n \n\n \n The more information you can put in the search bar, the more likely you will be to\n either find the answer you need or feel confident that no one else has asked the\n question before.\n \n\n
\n\n \n Take a break and read about the worst coder in the world\n \n\n
\n \n I need a break\n \n
\n
\n \n\n
\n \n You're receiving this email because your Stack Overflow activity triggered this tip or\n reminder.\n \n\n \n Unsubscribe from emails like this{' '}\n \n \n Edit email settings{' '}\n \n \n Contact us\n \n \n Privacy\n \n\n
\n\n \n \n Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038\n \n {'<3'}\n
\n \n \n);\n", "sourceFile": "emails/stack-overflow-tips.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/stack-overflow-tips.tsx", "templateName": "StackOverflow Tips" diff --git a/apps/preview/dev/fixtures/vercel-invite-user.js b/apps/preview/dev/fixtures/vercel-invite-user.js index cda1c629a..016cb964f 100644 --- a/apps/preview/dev/fixtures/vercel-invite-user.js +++ b/apps/preview/dev/fixtures/vercel-invite-user.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n
Join joker on Vercel
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Vercel\"
\n

Join Batmobile on Vercel

\n

Hello batman,

\n

joker (joker@arkham.com) has invited you to the Batmobile team on Vercel.

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\"batman\"\"Batmobile\"
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Join the team
\n
\n

or copy and paste this URL into your browser: https://vercel.com/teams/invite/foo

\n
\n

This invitation was intended for batman .This invite was sent from 123.45.678.910 located in Gotham City. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.

\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n
Join joker on Vercel
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\"Vercel\"
\n

Join Batmobile on Vercel

\n

Hello batman,

\n

joker (joker@arkham.com) has invited you to the Batmobile team on Vercel.

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\"batman\"\"Batmobile\"
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Join the team
\n
\n

or copy and paste this URL into your browser: https://vercel.com/teams/invite/foo

\n
\n

This invitation was intended for batman .This invite was sent from 123.45.678.910 located in Gotham City. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.

\n
\n
\n
\n \n\n", "plain": "JOIN BATMOBILE ON VERCEL\n\nHello batman,\n\njoker (joker@arkham.com joker@arkham.com) has invited you to the Batmobile team\non Vercel.\n\n\n\nJoin the team https://vercel.com/teams/invite/foo\n\nor copy and paste this URL into your browser:\nhttps://vercel.com/teams/invite/foo https://vercel.com/teams/invite/foo\n\n--------------------------------------------------------------------------------\n\nThis invitation was intended for batman .This invite was sent from\n123.45.678.910 located in Gotham City. If you were not expecting this\ninvitation, you can ignore this email. If you are concerned about your account's\nsafety, please reply to this email to get in touch with us.", - "source": "import {\n Avatar,\n AvatarGroup,\n Body,\n Button,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Tailwind,\n Text\n} from 'jsx-email';\n\ninterface VercelInviteUserEmailProps {\n username?: string;\n userImage?: string;\n invitedByUsername?: string;\n invitedByEmail?: string;\n teamName?: string;\n teamImage?: string;\n inviteLink?: string;\n inviteFromIp?: string;\n inviteFromLocation?: string;\n}\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n username: 'batman',\n userImage: `${baseUrl}batman-adam.jpg`,\n invitedByUsername: 'joker',\n invitedByEmail: 'joker@arkham.com',\n teamName: 'Batmobile',\n teamImage: `${baseUrl}vercel-team.png`,\n inviteLink: 'https://vercel.com/teams/invite/foo',\n inviteFromIp: '123.45.678.910',\n inviteFromLocation: 'Gotham City'\n} as VercelInviteUserEmailProps;\n\nexport const templateName = 'Vercel Invite User';\n\nexport const Template = ({\n username,\n userImage,\n invitedByUsername,\n invitedByEmail,\n teamName,\n teamImage,\n inviteLink,\n inviteFromIp,\n inviteFromLocation\n}: VercelInviteUserEmailProps) => {\n const previewText = `Join ${invitedByUsername} on Vercel`;\n\n return (\n \n \n {previewText}\n \n \n \n
\n \n
\n \n Join {teamName} on Vercel\n \n Hello {username},\n \n {invitedByUsername} (\n \n {invitedByEmail}\n \n ) has invited you to the {teamName} team on Vercel.\n \n
\n \n \n \n \n
\n
\n \n Join the team\n \n
\n \n or copy and paste this URL into your browser:{' '}\n \n {inviteLink}\n \n \n
\n \n This invitation was intended for {username} .This\n invite was sent from {inviteFromIp} located in{' '}\n {inviteFromLocation}. If you were not expecting\n this invitation, you can ignore this email. If you are concerned about your account's\n safety, please reply to this email to get in touch with us.\n \n \n \n \n \n );\n};\n", + "source": "import {\n Avatar,\n AvatarGroup,\n Body,\n Button,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Tailwind,\n Text\n} from 'jsx-email';\n\ninterface VercelInviteUserEmailProps {\n username?: string;\n userImage?: string;\n invitedByUsername?: string;\n invitedByEmail?: string;\n teamName?: string;\n teamImage?: string;\n inviteLink?: string;\n inviteFromIp?: string;\n inviteFromLocation?: string;\n}\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n username: 'batman',\n userImage: `${baseUrl}batman-adam.jpg`,\n invitedByUsername: 'joker',\n invitedByEmail: 'joker@arkham.com',\n teamName: 'Batmobile',\n teamImage: `${baseUrl}vercel-team.png`,\n inviteLink: 'https://vercel.com/teams/invite/foo',\n inviteFromIp: '123.45.678.910',\n inviteFromLocation: 'Gotham City'\n} as VercelInviteUserEmailProps;\n\nexport const templateName = 'Vercel Invite User';\n\nexport const Template = ({\n username,\n userImage,\n invitedByUsername,\n invitedByEmail,\n teamName,\n teamImage,\n inviteLink,\n inviteFromIp,\n inviteFromLocation\n}: VercelInviteUserEmailProps) => {\n const previewText = `Join ${invitedByUsername} on Vercel`;\n\n return (\n \n \n {previewText}\n \n \n \n
\n \n
\n \n Join {teamName} on Vercel\n \n Hello {username},\n \n {invitedByUsername} (\n \n {invitedByEmail}\n \n ) has invited you to the {teamName} team on Vercel.\n \n
\n \n \n \n \n
\n
\n \n Join the team\n \n
\n \n or copy and paste this URL into your browser:{' '}\n \n {inviteLink}\n \n \n
\n \n This invitation was intended for {username} .This\n invite was sent from {inviteFromIp} located in{' '}\n {inviteFromLocation}. If you were not expecting\n this invitation, you can ignore this email. If you are concerned about your account's\n safety, please reply to this email to get in touch with us.\n \n \n \n \n \n );\n};\n", "sourceFile": "emails/vercel-invite-user.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/vercel-invite-user.tsx", "templateName": "Vercel Invite User" diff --git a/apps/preview/dev/fixtures/welcome emails/koala-welcome.js b/apps/preview/dev/fixtures/welcome emails/koala-welcome.js index f662ba66f..e6200edfd 100644 --- a/apps/preview/dev/fixtures/welcome emails/koala-welcome.js +++ b/apps/preview/dev/fixtures/welcome emails/koala-welcome.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
The sales intelligence platform that helps you uncover qualified leads.
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Koala\"\n

Hi Bruce,

\n

Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads and close deals faster.

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Get started
\n
\n

Best,
The Koala team

\n
\n

408 Warren Rd - San Mateo, CA 94402

\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
The sales intelligence platform that helps you uncover qualified leads.
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\n
\n
\n \n \n \n \n \n \n
\"Koala\"\n

Hi Bruce,

\n

Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads and close deals faster.

\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Get started
\n
\n

Best,
The Koala team

\n
\n

408 Warren Rd - San Mateo, CA 94402

\n
\n
\n
\n \n\n", "plain": "Hi Bruce,\n\nWelcome to Koala, the sales intelligence platform that helps you uncover\nqualified leads and close deals faster.\n\nGet started https://getkoala.com\n\nBest,\nThe Koala team\n\n--------------------------------------------------------------------------------\n\n408 Warren Rd - San Mateo, CA 94402", - "source": "import { Body, Button, Container, Head, Hr, Html, Img, Preview, Section, Text } from 'jsx-email';\n\ninterface KoalaWelcomeEmailProps {\n userFirstname: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px'\n};\n\nconst logo = {\n margin: '0 auto'\n};\n\nconst paragraph = {\n fontSize: '16px',\n lineHeight: '26px'\n};\n\nconst btnContainer = {\n textAlign: 'center' as const\n};\n\nconst hr = {\n borderColor: '#cccccc',\n margin: '20px 0'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n userFirstname: 'Bruce'\n} as KoalaWelcomeEmailProps;\n\nexport const templateName = 'Koala Welcome';\n\nexport const Template = ({ userFirstname }: KoalaWelcomeEmailProps) => (\n \n \n The sales intelligence platform that helps you uncover qualified leads.\n \n \n \"Koala\"\n Hi {userFirstname},\n \n Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads\n and close deals faster.\n \n
\n \n Get started\n \n
\n \n Best,\n
\n The Koala team\n \n
\n 408 Warren Rd - San Mateo, CA 94402\n \n \n \n);\n", + "source": "import { Body, Button, Container, Head, Hr, Html, Img, Preview, Section, Text } from 'jsx-email';\n\ninterface KoalaWelcomeEmailProps {\n userFirstname: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px'\n};\n\nconst logo = {\n margin: '0 auto'\n};\n\nconst paragraph = {\n fontSize: '16px',\n lineHeight: '26px'\n};\n\nconst btnContainer = {\n textAlign: 'center' as const\n};\n\nconst hr = {\n borderColor: '#cccccc',\n margin: '20px 0'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n userFirstname: 'Bruce'\n} as KoalaWelcomeEmailProps;\n\nexport const templateName = 'Koala Welcome';\n\nexport const Template = ({ userFirstname }: KoalaWelcomeEmailProps) => (\n \n \n The sales intelligence platform that helps you uncover qualified leads.\n \n \n \"Koala\"\n Hi {userFirstname},\n \n Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads\n and close deals faster.\n \n
\n \n Get started\n \n
\n \n Best,\n
\n The Koala team\n \n
\n 408 Warren Rd - San Mateo, CA 94402\n \n \n \n);\n", "sourceFile": "emails/welcome emails/koala-welcome.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/welcome emails/koala-welcome.tsx", "templateName": "Koala Welcome" diff --git a/apps/preview/dev/fixtures/welcome emails/netlify-welcome.js b/apps/preview/dev/fixtures/welcome emails/netlify-welcome.js index 7151011a4..2b55778de 100644 --- a/apps/preview/dev/fixtures/welcome emails/netlify-welcome.js +++ b/apps/preview/dev/fixtures/welcome emails/netlify-welcome.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n
Netlify Welcome
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\"Netlify\"\n
\n
\n \n \n \n \n \n \n
\n

Welcome to Netlify

\n \n \n \n \n \n \n
\n

Congratulations! You're joining over 3 million developers around the world who use Netlify to build and ship sites, stores, and apps.

\n

Here's how to get started:

\n \n \n \n \n
\n
\n
    \n
  • Deploy your first project. Connect to Git, choose a template, or manually deploy a project you've been working on locally.
    • \n
  • Check your deploy logs. Find out what's included in your build and watch for errors or failed deploys. Learn how to read your deploy logs.
    • \n
  • Choose an integration. Quickly discover, connect, and configure the right tools for your project with 150+ integrations to choose from. Explore the Integrations Hub.
    • \n
  • Set up a custom domain. You can register a new domain and buy it through Netlify or assign a domain you already own to your site. Add a custom domain.
    • \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Go to your dashboard
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
Visit the forums →Read the docs →Contact an expert →
\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
UnsubscribeManage Preferences
\n
\n

Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA

\n
\n
\n
\n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n
Netlify Welcome
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\n
\"Netlify\"\n
\n
\n \n \n \n \n \n \n
\n

Welcome to Netlify

\n \n \n \n \n \n \n
\n

Congratulations! You're joining over 3 million developers around the world who use Netlify to build and ship sites, stores, and apps.

\n

Here's how to get started:

\n \n \n \n \n
\n
\n
    \n
  • Deploy your first project. Connect to Git, choose a template, or manually deploy a project you've been working on locally.
    • \n
  • Check your deploy logs. Find out what's included in your build and watch for errors or failed deploys. Learn how to read your deploy logs.
    • \n
  • Choose an integration. Quickly discover, connect, and configure the right tools for your project with 150+ integrations to choose from. Explore the Integrations Hub.
    • \n
  • Set up a custom domain. You can register a new domain and buy it through Netlify or assign a domain you already own to your site. Add a custom domain.
    • \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
Go to your dashboard
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
Visit the forums →Read the docs →Contact an expert →
\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
UnsubscribeManage Preferences
\n
\n

Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA

\n
\n
\n
\n \n\n", "plain": "WELCOME TO NETLIFY\n\nCongratulations! You're joining over 3 million developers around the world who\nuse Netlify to build and ship sites, stores, and apps.\n\nHere's how to get started:\n\n * Deploy your first project. Connect to Git, choose a template, or manually\n deploy a project you've been working on locally.\n * Check your deploy logs. Find out what's included in your build and watch for\n errors or failed deploys. Learn how to read your deploy logs.\n * Choose an integration. Quickly discover, connect, and configure the right\n tools for your project with 150+ integrations to choose from. Explore the\n Integrations Hub.\n * Set up a custom domain. You can register a new domain and buy it through\n Netlify or assign a domain you already own to your site. Add a custom domain.\n\nGo to your dashboard\n\nVisit the forums →Read the docs →Contact an expert →\n\nUnsubscribeManage Preferences\n\nNetlify, 44 Montgomery Street, Suite 300 San Francisco, CA", - "source": "import {\n Body,\n Button,\n Column,\n Container,\n Head,\n Heading,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Tailwind,\n Text\n} from 'jsx-email';\nimport * as React from 'react';\n\ninterface NetlifyWelcomeEmailProps {\n steps?: {\n id: number;\n Description: React.ReactNode;\n }[];\n links?: string[];\n}\n\nconst PropDefaults: NetlifyWelcomeEmailProps = {\n steps: [\n {\n id: 1,\n Description: (\n
  • \n Deploy your first project. Connect to Git, choose a template\n , or manually deploy a project you've been working on locally.\n
    • \n )\n },\n {\n id: 2,\n Description: (\n
  • \n Check your deploy logs. Find out what's included in your build and watch\n for errors or failed deploys. Learn how to read your deploy logs.\n
    • \n )\n },\n {\n id: 3,\n Description: (\n
  • \n Choose an integration. Quickly discover, connect, and configure the right\n tools for your project with 150+ integrations to choose from.{' '}\n Explore the Integrations Hub.\n
    • \n )\n },\n {\n id: 4,\n Description: (\n
  • \n Set up a custom domain. You can register a new domain and buy it through\n Netlify or assign a domain you already own to your site. Add a custom domain.\n
    • \n )\n }\n ],\n links: ['Visit the forums', 'Read the docs', 'Contact an expert']\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Netlify Welcome';\n\nexport const Template = ({\n steps = PropDefaults.steps,\n links = PropDefaults.links\n}: NetlifyWelcomeEmailProps) => {\n return (\n \n \n Netlify Welcome\n \n \n \n \n Welcome to Netlify\n\n
    \n \n \n Congratulations! You're joining over 3 million developers around the world who use\n Netlify to build and ship sites, stores, and apps.\n \n\n Here's how to get started:\n \n
    \n\n
      {steps?.map(({ Description }) => Description)}
    \n\n
    \n \n Go to your dashboard\n \n
    \n\n
    \n \n {links?.map((link) => (\n \n {link}{' '}\n →\n \n ))}\n \n
    \n     \n\n \n
    \n \n \n Unsubscribe\n \n \n Manage Preferences\n \n \n
    \n \n Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA\n \n     \n \n \n \n );\n};\n", + "source": "import {\n Body,\n Button,\n Column,\n Container,\n Head,\n Heading,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Tailwind,\n Text\n} from 'jsx-email';\nimport * as React from 'react';\n\ninterface NetlifyWelcomeEmailProps {\n steps?: {\n id: number;\n Description: React.ReactNode;\n }[];\n links?: string[];\n}\n\nconst PropDefaults: NetlifyWelcomeEmailProps = {\n steps: [\n {\n id: 1,\n Description: (\n
  • \n Deploy your first project. Connect to Git, choose a template\n , or manually deploy a project you've been working on locally.\n
    • \n )\n },\n {\n id: 2,\n Description: (\n
  • \n Check your deploy logs. Find out what's included in your build and watch\n for errors or failed deploys. Learn how to read your deploy logs.\n
    • \n )\n },\n {\n id: 3,\n Description: (\n
  • \n Choose an integration. Quickly discover, connect, and configure the right\n tools for your project with 150+ integrations to choose from.{' '}\n Explore the Integrations Hub.\n
    • \n )\n },\n {\n id: 4,\n Description: (\n
  • \n Set up a custom domain. You can register a new domain and buy it through\n Netlify or assign a domain you already own to your site. Add a custom domain.\n
    • \n )\n }\n ],\n links: ['Visit the forums', 'Read the docs', 'Contact an expert']\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Netlify Welcome';\n\nexport const Template = ({\n steps = PropDefaults.steps,\n links = PropDefaults.links\n}: NetlifyWelcomeEmailProps) => {\n return (\n \n \n Netlify Welcome\n \n \n \n \n Welcome to Netlify\n\n
    \n \n \n Congratulations! You're joining over 3 million developers around the world who use\n Netlify to build and ship sites, stores, and apps.\n \n\n Here's how to get started:\n \n
    \n\n
      {steps?.map(({ Description }) => Description)}
    \n\n
    \n \n Go to your dashboard\n \n
    \n\n
    \n \n {links?.map((link) => (\n \n {link}{' '}\n →\n \n ))}\n \n
    \n     \n\n \n
    \n \n \n Unsubscribe\n \n \n Manage Preferences\n \n \n
    \n \n Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA\n \n     \n \n \n \n );\n};\n", "sourceFile": "emails/welcome emails/netlify-welcome.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/welcome emails/netlify-welcome.tsx", "templateName": "Netlify Welcome" diff --git a/apps/preview/dev/fixtures/welcome emails/stripe-welcome.js b/apps/preview/dev/fixtures/welcome emails/stripe-welcome.js index b8d8cba52..f70f02584 100644 --- a/apps/preview/dev/fixtures/welcome emails/stripe-welcome.js +++ b/apps/preview/dev/fixtures/welcome emails/stripe-welcome.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    You're now ready to make live transactions with Stripe!
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Stripe\"\n
    \n

    Thanks for submitting your account information. You're now ready to make live transactions with Stripe!

    \n

    You can view your payments and a variety of other information about your account right from your dashboard.

    \n \n \n \n \n \n \n
    View your Stripe Dashboard
    \n
    \n

    If you haven't finished your integration, you might find our docs handy.

    \n

    Once you're ready to start accepting payments, you'll just need to use your live API keys instead of your test API keys. Your account can simultaneously be used for both test and live requests, so you can continue testing while accepting live payments. Check out our tutorial about account basics.

    \n

    Finally, we've put together a quick checklist to ensure your website conforms to card network standards.

    \n

    We'll be here to help you with any step along the way. You can find answers to most questions and get in touch with us on our support site.

    \n

    — The Stripe team

    \n
    \n

    Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080

    \n
    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    You're now ready to make live transactions with Stripe!
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Stripe\"\n
    \n

    Thanks for submitting your account information. You're now ready to make live transactions with Stripe!

    \n

    You can view your payments and a variety of other information about your account right from your dashboard.

    \n \n \n \n \n \n \n
    View your Stripe Dashboard
    \n
    \n

    If you haven't finished your integration, you might find our docs handy.

    \n

    Once you're ready to start accepting payments, you'll just need to use your live API keys instead of your test API keys. Your account can simultaneously be used for both test and live requests, so you can continue testing while accepting live payments. Check out our tutorial about account basics.

    \n

    Finally, we've put together a quick checklist to ensure your website conforms to card network standards.

    \n

    We'll be here to help you with any step along the way. You can find answers to most questions and get in touch with us on our support site.

    \n

    — The Stripe team

    \n
    \n

    Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080

    \n
    \n
    \n
    \n
    \n \n\n", "plain": "--------------------------------------------------------------------------------\n\nThanks for submitting your account information. You're now ready to make live\ntransactions with Stripe!\n\nYou can view your payments and a variety of other information about your account\nright from your dashboard.\n\nView your Stripe Dashboard https://dashboard.stripe.com/login\n\n--------------------------------------------------------------------------------\n\nIf you haven't finished your integration, you might find our docs\nhttps://stripe.com/docs handy.\n\nOnce you're ready to start accepting payments, you'll just need to use your live\nAPI keys https://dashboard.stripe.com/login?redirect=%2Fapikeys instead of your\ntest API keys. Your account can simultaneously be used for both test and live\nrequests, so you can continue testing while accepting live payments. Check out\nour tutorial about account basics https://stripe.com/docs/dashboard.\n\nFinally, we've put together a quick checklist\nhttps://stripe.com/docs/checklist/website to ensure your website conforms to\ncard network standards.\n\nWe'll be here to help you with any step along the way. You can find answers to\nmost questions and get in touch with us on our support site\nhttps://support.stripe.com/.\n\n— The Stripe team\n\n--------------------------------------------------------------------------------\n\nStripe, 354 Oyster Point Blvd, South San Francisco, CA 94080", - "source": "import {\n Body,\n Button,\n Container,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\nconst main = {\n backgroundColor: '#f6f9fc',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Ubuntu,sans-serif'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n margin: '0 auto',\n padding: '20px 0 48px',\n marginBottom: '64px'\n};\n\nconst box = {\n padding: '0 48px'\n};\n\nconst hr = {\n borderColor: '#e6ebf1',\n margin: '20px 0'\n};\n\nconst paragraph = {\n color: '#525f7f',\n\n fontSize: '16px',\n lineHeight: '24px',\n textAlign: 'left' as const\n};\n\nconst anchor = {\n color: '#556cd6'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px',\n lineHeight: '16px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Stripe Welcome';\n\nexport const Template = () => (\n \n \n You're now ready to make live transactions with Stripe!\n \n \n
    \n \"Stripe\"\n
    \n \n Thanks for submitting your account information. You're now ready to make live\n transactions with Stripe!\n \n \n You can view your payments and a variety of other information about your account right\n from your dashboard.\n \n \n View your Stripe Dashboard\n \n
    \n \n If you haven't finished your integration, you might find our{' '}\n \n docs\n {' '}\n handy.\n \n \n Once you're ready to start accepting payments, you'll just need to use your live{' '}\n \n API keys\n {' '}\n instead of your test API keys. Your account can simultaneously be used for both test and\n live requests, so you can continue testing while accepting live payments. Check out our{' '}\n \n tutorial about account basics\n \n .\n \n \n Finally, we've put together a{' '}\n \n quick checklist\n {' '}\n to ensure your website conforms to card network standards.\n \n \n We'll be here to help you with any step along the way. You can find answers to most\n questions and get in touch with us on our{' '}\n \n support site\n \n .\n \n — The Stripe team\n
    \n Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080\n
    \n     \n \n \n);\n", + "source": "import {\n Body,\n Button,\n Container,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\nconst main = {\n backgroundColor: '#f6f9fc',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Ubuntu,sans-serif'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n margin: '0 auto',\n padding: '20px 0 48px',\n marginBottom: '64px'\n};\n\nconst box = {\n padding: '0 48px'\n};\n\nconst hr = {\n borderColor: '#e6ebf1',\n margin: '20px 0'\n};\n\nconst paragraph = {\n color: '#525f7f',\n\n fontSize: '16px',\n lineHeight: '24px',\n textAlign: 'left' as const\n};\n\nconst anchor = {\n color: '#556cd6'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px',\n lineHeight: '16px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Stripe Welcome';\n\nexport const Template = () => (\n \n \n You're now ready to make live transactions with Stripe!\n \n \n
    \n \"Stripe\"\n
    \n \n Thanks for submitting your account information. You're now ready to make live\n transactions with Stripe!\n \n \n You can view your payments and a variety of other information about your account right\n from your dashboard.\n \n \n View your Stripe Dashboard\n \n
    \n \n If you haven't finished your integration, you might find our{' '}\n \n docs\n {' '}\n handy.\n \n \n Once you're ready to start accepting payments, you'll just need to use your live{' '}\n \n API keys\n {' '}\n instead of your test API keys. Your account can simultaneously be used for both test and\n live requests, so you can continue testing while accepting live payments. Check out our{' '}\n \n tutorial about account basics\n \n .\n \n \n Finally, we've put together a{' '}\n \n quick checklist\n {' '}\n to ensure your website conforms to card network standards.\n \n \n We'll be here to help you with any step along the way. You can find answers to most\n questions and get in touch with us on our{' '}\n \n support site\n \n .\n \n — The Stripe team\n
    \n Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080\n
    \n     \n \n \n);\n", "sourceFile": "emails/welcome emails/stripe-welcome.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/welcome emails/stripe-welcome.tsx", "templateName": "Stripe Welcome" diff --git a/apps/preview/dev/fixtures/yelp-recent-login.js b/apps/preview/dev/fixtures/yelp-recent-login.js index b41acffd9..72231bf64 100644 --- a/apps/preview/dev/fixtures/yelp-recent-login.js +++ b/apps/preview/dev/fixtures/yelp-recent-login.js @@ -1,7 +1,7 @@ export default { - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Yelp recent login
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n

    Hi Bruce,

    \n

    We noticed a recent login to your Yelp account.

    \n

    Time: September 7, 2022 at 10:58 AM

    \n

    Device: Chrome on Mac OS X

    \n

    Location: Gotham City, United States

    \n

    *Approximate geographic location based on IP address:12.345.67.891

    \n

    If this was you, there's nothing else you need to do.

    \n

    If this wasn't you or if you have additional questions, please see our support page.

    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Learn More
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. | www.yelp.com

    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Yelp recent login
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n

    Hi Bruce,

    \n

    We noticed a recent login to your Yelp account.

    \n

    Time: September 7, 2022 at 10:58 AM

    \n

    Device: Chrome on Mac OS X

    \n

    Location: Gotham City, United States

    \n

    *Approximate geographic location based on IP address:12.345.67.891

    \n

    If this was you, there's nothing else you need to do.

    \n

    If this wasn't you or if you have additional questions, please see our support page.

    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Learn More
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. | www.yelp.com

    \n
    \n
    \n
    \n \n\n", "plain": "HI BRUCE,\n\n\nWE NOTICED A RECENT LOGIN TO YOUR YELP ACCOUNT.\n\nTime: September 7, 2022 at 10:58 AM\n\nDevice: Chrome on Mac OS X\n\nLocation: Gotham City, United States\n\n*Approximate geographic location based on IP address:12.345.67.891\n\nIf this was you, there's nothing else you need to do.\n\nIf this wasn't you or if you have additional questions, please see our support\npage.\n\nLearn More\n\n\n\n© 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. |\nwww.yelp.com", - "source": "import {\n Body,\n Button,\n Container,\n Column,\n Head,\n Heading,\n Html,\n Img,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface YelpRecentLoginEmailProps {\n userFirstName?: string;\n loginDate?: Date;\n loginDevice?: string;\n loginLocation?: string;\n loginIp?: string;\n}\n\nconst main = {\n backgroundColor: '#fff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst paragraph = {\n fontSize: 16\n};\n\nconst logo = {\n padding: '30px 20px'\n};\n\nconst containerButton = {\n display: 'flex',\n justifyContent: 'center',\n width: '100%'\n};\n\nconst content = {\n border: '1px solid rgb(0,0,0, 0.1)',\n borderRadius: '3px',\n overflow: 'hidden'\n};\n\nconst boxInfos = {\n padding: '20px 40px'\n};\n\nconst containerImageFooter = {\n padding: '45px 0 0 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n userFirstName: 'Bruce',\n loginDate: new Date('September 7, 2022, 10:58 am'),\n loginDevice: 'Chrome on Mac OS X',\n loginLocation: 'Gotham City, United States',\n loginIp: '12.345.67.891'\n} as YelpRecentLoginEmailProps;\n\nexport const templateName = 'Yelp Recent Login';\n\nexport const Template = ({\n userFirstName,\n loginDate,\n loginDevice,\n loginLocation,\n loginIp\n}: YelpRecentLoginEmailProps) => {\n const formattedDate = new Intl.DateTimeFormat('en', {\n dateStyle: 'long',\n timeStyle: 'short'\n }).format(loginDate);\n\n return (\n \n \n Yelp recent login\n \n \n
    \n \n
    \n\n
    \n \n \n \n\n \n \n \n Hi {userFirstName},\n \n \n We noticed a recent login to your Yelp account.\n \n\n \n Time: \n {formattedDate}\n \n \n Device: \n {loginDevice}\n \n \n Location: \n {loginLocation}\n \n \n *Approximate geographic location based on IP address:\n {loginIp}\n \n\n If this was you, there's nothing else you need to do.\n \n If this wasn't you or if you have additional questions, please see our support\n page.\n \n \n \n \n \n \n Learn More\n \n \n \n
    \n\n
    \n \n
    \n\n \n © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. | www.yelp.com\n \n     \n \n \n );\n};\n", + "source": "import {\n Body,\n Button,\n Container,\n Column,\n Head,\n Heading,\n Html,\n Img,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface YelpRecentLoginEmailProps {\n userFirstName?: string;\n loginDate?: Date;\n loginDevice?: string;\n loginLocation?: string;\n loginIp?: string;\n}\n\nconst main = {\n backgroundColor: '#fff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst paragraph = {\n fontSize: 16\n};\n\nconst logo = {\n padding: '30px 20px'\n};\n\nconst containerButton = {\n display: 'flex',\n justifyContent: 'center',\n width: '100%'\n};\n\nconst content = {\n border: '1px solid rgb(0,0,0, 0.1)',\n borderRadius: '3px',\n overflow: 'hidden'\n};\n\nconst boxInfos = {\n padding: '20px 40px'\n};\n\nconst containerImageFooter = {\n padding: '45px 0 0 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n userFirstName: 'Bruce',\n loginDate: new Date('September 7, 2022, 10:58 am'),\n loginDevice: 'Chrome on Mac OS X',\n loginLocation: 'Gotham City, United States',\n loginIp: '12.345.67.891'\n} as YelpRecentLoginEmailProps;\n\nexport const templateName = 'Yelp Recent Login';\n\nexport const Template = ({\n userFirstName,\n loginDate,\n loginDevice,\n loginLocation,\n loginIp\n}: YelpRecentLoginEmailProps) => {\n const formattedDate = new Intl.DateTimeFormat('en', {\n dateStyle: 'long',\n timeStyle: 'short'\n }).format(loginDate);\n\n return (\n \n \n Yelp recent login\n \n \n
    \n \n
    \n\n
    \n \n \n \n\n \n \n \n Hi {userFirstName},\n \n \n We noticed a recent login to your Yelp account.\n \n\n \n Time: \n {formattedDate}\n \n \n Device: \n {loginDevice}\n \n \n Location: \n {loginLocation}\n \n \n *Approximate geographic location based on IP address:\n {loginIp}\n \n\n If this was you, there's nothing else you need to do.\n \n If this wasn't you or if you have additional questions, please see our support\n page.\n \n \n \n \n \n \n Learn More\n \n \n \n
    \n\n
    \n \n
    \n\n \n © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. | www.yelp.com\n \n     \n \n \n );\n};\n", "sourceFile": "emails/yelp-recent-login.tsx", "sourcePath": "/Users/powella/code/jsx-email/apps/samples/emails/yelp-recent-login.tsx", "templateName": "Yelp Recent Login" diff --git a/apps/preview/dev/html/preview.html b/apps/preview/dev/html/preview.html index a9644708a..12cdc64c4 100644 --- a/apps/preview/dev/html/preview.html +++ b/apps/preview/dev/html/preview.html @@ -541,190 +541,190 @@ const templates = [ { "file": "airbnb-review.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Read Joker's review
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n \n \n \n \n \n \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Airbnb\"
    \n \n \n \n \n \n \n
    \"Joker\"
    \n \n \n \n \n \n \n
    \n

    Here's what Joker wrote

    \n

    \"Batsy's stay at my Airbnb Batcave was a riot! Batman surprised with a hidden sense of humor, engaging in epic banter and a prank war. His detective skills impressed, and the Batcave remained spotless. Game night and snacks were a hit, and even during downtime, he couldn't resist a Bat-signal. Hosting Batsy was chaos perfected – if you want a guest with brooding intensity and unexpected laughter, Batman's your Bat. Hahahahahahahahahaha! \"

    \n

    Now that the review period is over, we’ve posted Joker’s review to your Airbnb profile.

    \n

    While it’s too late to write a review of your own, you can send your feedback to Joker using your Airbnb message thread.

    \n \n \n \n \n
    \n \n \n \n \n \n \n
    Send My Feedback
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Common questions

    \n

    How do reviews work?

    \n

    How do star ratings work?

    \n

    Can I leave a review after 14 days?

    \n
    \n

    Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103

    Report unsafe behavior\n \n \n \n \n
    \n
    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Read Joker's review
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n \n \n \n \n \n \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Airbnb\"
    \n \n \n \n \n \n \n
    \"Joker\"
    \n \n \n \n \n \n \n
    \n

    Here's what Joker wrote

    \n

    \"Batsy's stay at my Airbnb Batcave was a riot! Batman surprised with a hidden sense of humor, engaging in epic banter and a prank war. His detective skills impressed, and the Batcave remained spotless. Game night and snacks were a hit, and even during downtime, he couldn't resist a Bat-signal. Hosting Batsy was chaos perfected – if you want a guest with brooding intensity and unexpected laughter, Batman's your Bat. Hahahahahahahahahaha! \"

    \n

    Now that the review period is over, we’ve posted Joker’s review to your Airbnb profile.

    \n

    While it’s too late to write a review of your own, you can send your feedback to Joker using your Airbnb message thread.

    \n \n \n \n \n
    \n \n \n \n \n \n \n
    Send My Feedback
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Common questions

    \n

    How do reviews work?

    \n

    How do star ratings work?

    \n

    Can I leave a review after 14 days?

    \n
    \n

    Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103

    Report unsafe behavior\n \n \n \n \n
    \n
    \n
    \n
    \n
    \n \n\n", "htmlFile": "airbnb-review.html", "id": "airbnb-review", - "jsx": "import {\n Body,\n Button,\n Container,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface AirbnbReviewEmailProps {\n authorName?: string;\n authorImage?: string;\n reviewText?: string;\n}\n\nconst baseUrl = import.meta.isJsxEmailPreview ? '/static/' : 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n authorName: 'Joker',\n authorImage: `${baseUrl}batman-twilight.jpg`,\n reviewText: `\"Batsy's stay at my Airbnb Batcave was a riot! Batman surprised with a hidden sense of humor, engaging in epic banter and a prank war. His detective skills impressed, and the Batcave remained spotless. Game night and snacks were a hit, and even during downtime, he couldn't resist a Bat-signal. Hosting Batsy was chaos perfected – if you want a guest with brooding intensity and unexpected laughter, Batman's your Bat. Hahahahahahahahahaha! \"`\n} as AirbnbReviewEmailProps;\n\nexport const templateName = 'Airbnb Review';\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '580px'\n};\n\nconst userImage = {\n margin: '0 auto',\n marginBottom: '16px',\n borderRadius: '50%'\n};\n\nconst heading = {\n fontSize: '32px',\n lineHeight: '1.3',\n fontWeight: '700',\n color: '#484848'\n};\n\nconst paragraph = {\n fontSize: '18px',\n lineHeight: '1.4',\n color: '#484848'\n};\n\nconst review = {\n ...paragraph,\n padding: '24px',\n backgroundColor: '#f2f3f3',\n borderRadius: '4px'\n};\n\nconst link = {\n ...paragraph,\n color: '#ff5a5f',\n display: 'block'\n};\n\nconst reportLink = {\n fontSize: '14px',\n color: '#9ca299',\n textDecoration: 'underline'\n};\n\nconst hr = {\n borderColor: '#cccccc',\n margin: '20px 0'\n};\n\nconst footer = {\n color: '#9ca299',\n fontSize: '14px',\n marginBottom: '10px'\n};\n\nexport const Template = ({ authorName, authorImage, reviewText }: AirbnbReviewEmailProps) => {\n const previewText = `Read ${authorName}'s review`;\n\n return (\n \n \n {previewText}\n\n \n
    \n \n
    \n \"Airbnb\"\n
    \n
    \n {authorName}\n
    \n
    \n \n Here's what {authorName} wrote\n {reviewText}\n \n Now that the review period is over, we’ve posted {authorName}\n ’s review to your Airbnb profile.\n \n \n While it’s too late to write a review of your own, you can send your feedback to{' '}\n {authorName} using your Airbnb message thread.\n \n \n Send My Feedback\n \n \n
    \n\n
    \n\n
    \n \n Common questions\n \n \n How do reviews work?\n \n \n \n \n How do star ratings work?\n \n \n \n \n Can I leave a review after 14 days?\n \n \n
    \n Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103\n \n Report unsafe behavior\n \n     \n
    \n     \n
    \n \n \n );\n};\n", + "jsx": "import {\n Body,\n Button,\n Container,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface AirbnbReviewEmailProps {\n authorName?: string;\n authorImage?: string;\n reviewText?: string;\n}\n\nconst baseUrl = import.meta.isJsxEmailPreview ? '/static/' : 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n authorName: 'Joker',\n authorImage: `${baseUrl}batman-twilight.jpg`,\n reviewText: `\"Batsy's stay at my Airbnb Batcave was a riot! Batman surprised with a hidden sense of humor, engaging in epic banter and a prank war. His detective skills impressed, and the Batcave remained spotless. Game night and snacks were a hit, and even during downtime, he couldn't resist a Bat-signal. Hosting Batsy was chaos perfected – if you want a guest with brooding intensity and unexpected laughter, Batman's your Bat. Hahahahahahahahahaha! \"`\n} as AirbnbReviewEmailProps;\n\nexport const templateName = 'Airbnb Review';\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '580px'\n};\n\nconst userImage = {\n margin: '0 auto',\n marginBottom: '16px',\n borderRadius: '50%'\n};\n\nconst heading = {\n fontSize: '32px',\n lineHeight: '1.3',\n fontWeight: '700',\n color: '#484848'\n};\n\nconst paragraph = {\n fontSize: '18px',\n lineHeight: '1.4',\n color: '#484848'\n};\n\nconst review = {\n ...paragraph,\n padding: '24px',\n backgroundColor: '#f2f3f3',\n borderRadius: '4px'\n};\n\nconst link = {\n ...paragraph,\n color: '#ff5a5f',\n display: 'block'\n};\n\nconst reportLink = {\n fontSize: '14px',\n color: '#9ca299',\n textDecoration: 'underline'\n};\n\nconst hr = {\n borderColor: '#cccccc',\n margin: '20px 0'\n};\n\nconst footer = {\n color: '#9ca299',\n fontSize: '14px',\n marginBottom: '10px'\n};\n\nexport const Template = ({ authorName, authorImage, reviewText }: AirbnbReviewEmailProps) => {\n const previewText = `Read ${authorName}'s review`;\n\n return (\n \n \n {previewText}\n\n \n
    \n \n
    \n \"Airbnb\"\n
    \n
    \n {authorName}\n
    \n
    \n \n Here's what {authorName} wrote\n {reviewText}\n \n Now that the review period is over, we’ve posted {authorName}\n ’s review to your Airbnb profile.\n \n \n While it’s too late to write a review of your own, you can send your feedback to{' '}\n {authorName} using your Airbnb message thread.\n \n \n Send My Feedback\n \n \n
    \n\n
    \n\n
    \n \n Common questions\n \n \n How do reviews work?\n \n \n \n \n How do star ratings work?\n \n \n \n \n Can I leave a review after 14 days?\n \n \n
    \n Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103\n \n Report unsafe behavior\n \n     \n
    \n     \n
    \n \n \n );\n};\n", "name": "Airbnb Review", "plain": "Here's what Joker wrote\n\n\"Batsy's stay at my Airbnb Batcave was a riot! Batman surprised with a hidden\nsense of humor, engaging in epic banter and a prank war. His detective skills\nimpressed, and the Batcave remained spotless. Game night and snacks were a hit,\nand even during downtime, he couldn't resist a Bat-signal. Hosting Batsy was\nchaos perfected – if you want a guest with brooding intensity and unexpected\nlaughter, Batman's your Bat. Hahahahahahahahahaha! \"\n\nNow that the review period is over, we’ve posted Joker’s review to your Airbnb\nprofile.\n\nWhile it’s too late to write a review of your own, you can send your feedback to\nJoker using your Airbnb message thread.\n\nSend My Feedback https://airbnb.com/\n\n--------------------------------------------------------------------------------\n\nCommon questions\n\nHow do reviews work? https://airbnb.com/help/article/13\n\nHow do star ratings work? https://airbnb.com/help/article/1257\n\nCan I leave a review after 14 days? https://airbnb.com/help/article/995\n\n--------------------------------------------------------------------------------\n\nAirbnb, Inc., 888 Brannan St, San Francisco, CA 94103\n\nReport unsafe behavior https://airbnb.com", "subject": "Airbnb Review" }, { "file": "apple-receipt.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Apple Receipt
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \"Apple\n

    Receipt

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Save 3% on all your Apple purchases with Apple Card.1 Apply and use in minutes2

    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n

    APPLE ID

    bruce@wayne.com\n
    \n \n \n \n \n \n \n
    \n

    INVOICE DATE

    \n

    18 Jan 2023

    \n
    \n \n \n \n \n \n \n \n
    \n

    ORDER ID

    ML4F5L8522\n     		\n

    DOCUMENT NO.

    \n

    186623754793

    \n
    \n
    \n     		\n

    BILLED TO

    \n

    Visa .... 7461 (Apple Pay)

    \n

    Bruce Wayne

    \n

    2125 Chestnut St

    \n

    San Francisco, CA 94123

    \n

    USA

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    App Store

    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \"HBO\n

    HBO Max: Stream TV & Movies

    \n

    HBO Max Ad-Free (Monthly)

    \n

    Renews Aug 20, 2023

    Write a Review|Report a Problem\n     		\n

    $14.99

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \n

    TOTAL

    \n     		\n

    $14.99

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Apple
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n

    Save 3% on all your Apple purchases.

    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"AppleApply and use in minutes
    \n
    \n
    \n

    1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily Cash can be applied by you as a credit on your statement balance. 3% is the total amount of Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more details on Daily Cash and qualifying transactions.

    \n

    2. Subject to credit approval.

    \n

    To access and use all the features of Apple Card, you must add Apple Card to Wallet on an iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or iPadOS by going to Settings > General > Software Update. Tap Download and Install.

    \n

    Available for qualifying applicants in the United States.

    \n

    Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.

    \n

    If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with questions about Apple Card.

    \n

    Privacy: We use a Subscriber ID to provide reports to developers.

    \n

    Get help with subscriptions and purchases.Visit Apple Support.

    \n

    Learn how to manage your password preferences for iTunes, Apple Books, and App Store purchases.

    \n

    You have the option to stop receiving email receipts for your subscription renewals. If you have opted out, you can still view your receipts in your account under Purchase History. To manage receipts or to opt in again, go to Account Settings.

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Apple
    \n
    \n

    Account Settings • Terms of Sale • Privacy Policy

    \n

    Copyright © 2023 Apple Inc.
    All rights reserved

    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Apple Receipt
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \"Apple\n

    Receipt

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Save 3% on all your Apple purchases with Apple Card.1 Apply and use in minutes2

    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n

    APPLE ID

    bruce@wayne.com\n
    \n \n \n \n \n \n \n
    \n

    INVOICE DATE

    \n

    18 Jan 2023

    \n
    \n \n \n \n \n \n \n \n
    \n

    ORDER ID

    ML4F5L8522\n     		\n

    DOCUMENT NO.

    \n

    186623754793

    \n
    \n
    \n     		\n

    BILLED TO

    \n

    Visa .... 7461 (Apple Pay)

    \n

    Bruce Wayne

    \n

    2125 Chestnut St

    \n

    San Francisco, CA 94123

    \n

    USA

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    App Store

    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \"HBO\n

    HBO Max: Stream TV & Movies

    \n

    HBO Max Ad-Free (Monthly)

    \n

    Renews Aug 20, 2023

    Write a Review|Report a Problem\n     		\n

    $14.99

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \n

    TOTAL

    \n     		\n

    $14.99

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Apple
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n

    Save 3% on all your Apple purchases.

    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"AppleApply and use in minutes
    \n
    \n
    \n

    1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily Cash can be applied by you as a credit on your statement balance. 3% is the total amount of Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more details on Daily Cash and qualifying transactions.

    \n

    2. Subject to credit approval.

    \n

    To access and use all the features of Apple Card, you must add Apple Card to Wallet on an iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or iPadOS by going to Settings > General > Software Update. Tap Download and Install.

    \n

    Available for qualifying applicants in the United States.

    \n

    Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.

    \n

    If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with questions about Apple Card.

    \n

    Privacy: We use a Subscriber ID to provide reports to developers.

    \n

    Get help with subscriptions and purchases.Visit Apple Support.

    \n

    Learn how to manage your password preferences for iTunes, Apple Books, and App Store purchases.

    \n

    You have the option to stop receiving email receipts for your subscription renewals. If you have opted out, you can still view your receipts in your account under Purchase History. To manage receipts or to opt in again, go to Account Settings.

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Apple
    \n
    \n

    Account Settings • Terms of Sale • Privacy Policy

    \n

    Copyright © 2023 Apple Inc.
    All rights reserved

    \n
    \n
    \n
    \n \n\n", "htmlFile": "apple-receipt.html", "id": "apple-receipt", - "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nconst main = {\n fontFamily: '\"Helvetica Neue\",Helvetica,Arial,sans-serif',\n backgroundColor: '#ffffff'\n};\n\nconst resetText = {\n margin: '0',\n padding: '0',\n lineHeight: 1.4\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '660px'\n};\n\nconst tableCell = { display: 'table-cell' };\n\nconst heading = {\n fontSize: '32px',\n fontWeight: '300',\n color: '#888888'\n};\n\nconst cupomText = {\n textAlign: 'center' as const,\n margin: '36px 0 40px 0',\n fontSize: '14px',\n fontWeight: '500',\n color: '#111111'\n};\n\nconst supStyle = {\n fontWeight: '300'\n};\n\nconst informationTable = {\n borderCollapse: 'collapse' as const,\n borderSpacing: '0px',\n color: 'rgb(51,51,51)',\n backgroundColor: 'rgb(250,250,250)',\n borderRadius: '3px',\n fontSize: '12px'\n};\n\nconst informationTableRow = {\n height: '46px'\n};\n\nconst informationTableColumn = {\n paddingLeft: '20px',\n borderStyle: 'solid',\n borderColor: 'white',\n borderWidth: '0px 1px 1px 0px',\n height: '44px'\n};\n\nconst informationTableLabel = {\n ...resetText,\n color: 'rgb(102,102,102)',\n fontSize: '10px'\n};\n\nconst informationTableValue = {\n fontSize: '12px',\n margin: '0',\n padding: '0',\n lineHeight: 1.4\n};\n\nconst productTitleTable = {\n ...informationTable,\n margin: '30px 0 15px 0',\n height: '24px'\n};\n\nconst productsTitle = {\n background: '#fafafa',\n paddingLeft: '10px',\n fontSize: '14px',\n fontWeight: '500',\n margin: '0'\n};\n\nconst productIcon = {\n margin: '0 0 0 20px',\n borderRadius: '14px',\n border: '1px solid rgba(128,128,128,0.2)'\n};\n\nconst productTitle = { fontSize: '12px', fontWeight: '600', ...resetText };\n\nconst productDescription = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n ...resetText\n};\n\nconst productLink = {\n fontSize: '12px',\n color: 'rgb(0,112,201)',\n textDecoration: 'none'\n};\n\nconst divisor = {\n marginLeft: '4px',\n marginRight: '4px',\n color: 'rgb(51,51,51)',\n fontWeight: 200\n};\n\nconst productPriceTotal = {\n margin: '0',\n color: 'rgb(102,102,102)',\n fontSize: '10px',\n fontWeight: '600',\n padding: '0px 30px 0px 0px',\n textAlign: 'right' as const\n};\n\nconst productPrice = {\n fontSize: '12px',\n fontWeight: '600',\n margin: '0'\n};\n\nconst productPriceLarge = {\n margin: '0px 20px 0px 0px',\n fontSize: '16px',\n fontWeight: '600',\n whiteSpace: 'nowrap' as const,\n textAlign: 'right' as const\n};\n\nconst productPriceWrapper = {\n display: 'table-cell',\n padding: '0px 20px 0px 0px',\n width: '100px',\n verticalAlign: 'top'\n};\n\nconst productPriceLine = { margin: '30px 0 0 0' };\n\nconst productPriceVerticalLine = {\n height: '48px',\n borderLeft: '1px solid',\n borderColor: 'rgb(238,238,238)'\n};\n\nconst productPriceLargeWrapper = { display: 'table-cell', width: '90px' };\n\nconst productPriceLineBottom = { margin: '0 0 75px 0' };\n\nconst block = { display: 'block' };\n\nconst ctaTitle = {\n display: 'block',\n margin: '15px 0 0 0'\n};\n\nconst ctaText = { fontSize: '24px', fontWeight: '500' };\n\nconst walletWrapper = { display: 'table-cell', margin: '10px 0 0 0' };\n\nconst walletLink = { color: 'rgb(0,126,255)', textDecoration: 'none' };\n\nconst walletImage = {\n display: 'inherit',\n paddingRight: '8px',\n verticalAlign: 'middle'\n};\n\nconst walletBottomLine = { margin: '65px 0 20px 0' };\n\nconst footerText = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n margin: '0',\n lineHeight: 'auto',\n marginBottom: '16px'\n};\n\nconst footerTextCenter = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n margin: '20px 0',\n lineHeight: 'auto',\n textAlign: 'center' as const\n};\n\nconst footerLink = { color: 'rgb(0,115,255)' };\n\nconst footerIcon = { display: 'block', margin: '40px 0 0 0' };\n\nconst footerLinksWrapper = {\n margin: '8px 0 0 0',\n textAlign: 'center' as const,\n fontSize: '12px',\n color: 'rgb(102,102,102)'\n};\n\nconst footerCopyright = {\n margin: '25px 0 0 0',\n textAlign: 'center' as const,\n fontSize: '12px',\n color: 'rgb(102,102,102)'\n};\n\nconst walletLinkText = {\n fontSize: '14px',\n fontWeight: '400',\n textDecoration: 'none'\n};\n\nexport const templateName = 'Apple Receipt';\n\nexport const Template = () => (\n \n \n Apple Receipt\n\n \n \n
    \n \n \n \"Apple\n \n\n \n Receipt\n \n \n
    \n
    \n \n Save 3% on all your Apple purchases with Apple Card.\n 1{' '}\n Apply and use in minutes\n 2\n \n
    \n
    \n \n \n
    \n \n \n APPLE ID\n \n bruce@wayne.com\n \n \n \n\n \n \n INVOICE DATE\n 18 Jan 2023\n \n \n\n \n \n ORDER ID\n \n ML4F5L8522\n \n \n \n DOCUMENT NO.\n 186623754793\n \n \n
    \n     \n \n BILLED TO\n Visa .... 7461 (Apple Pay)\n Bruce Wayne\n 2125 Chestnut St\n San Francisco, CA 94123\n USA\n \n     \n
    \n
    \n App Store\n
    \n
    \n \n \n \n \n \n HBO Max: Stream TV & Movies\n HBO Max Ad-Free (Monthly)\n Renews Aug 20, 2023\n \n Write a Review\n \n |\n \n Report a Problem\n \n \n\n \n $14.99\n \n \n
    \n
    \n
    \n \n \n TOTAL\n \n \n \n $14.99\n \n \n
    \n
    \n
    \n \n \n \"Apple\n \n \n
    \n
    \n \n \n Save 3% on all your Apple purchases.\n \n \n
    \n
    \n \n \n \n \n Apply and use in minutes\n \n \n \n
    \n
    \n \n 1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when\n transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily\n Cash can be applied by you as a credit on your statement balance. 3% is the total amount\n of Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more\n details on Daily Cash and qualifying transactions.\n \n 2. Subject to credit approval.\n \n To access and use all the features of Apple Card, you must add Apple Card to Wallet on an\n iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or\n iPadOS by going to Settings > General > Software Update. Tap Download and Install.\n \n Available for qualifying applicants in the United States.\n \n Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.\n \n \n If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with\n questions about Apple Card.\n \n \n Privacy: We use a\n \n {' '}\n Subscriber ID{' '}\n \n to provide reports to developers.\n \n \n Get help with subscriptions and purchases.\n \n Visit Apple Support.\n \n \n \n Learn how to{' '}\n \n manage your password preferences\n {' '}\n for iTunes, Apple Books, and App Store purchases.\n \n\n \n {' '}\n You have the option to stop receiving email receipts for your subscription renewals. If\n you have opted out, you can still view your receipts in your account under Purchase\n History. To manage receipts or to opt in again, go to{' '}\n \n Account Settings.\n \n \n
    \n \n \n \"Apple\n \n \n
    \n \n \n Account Settings\n {' '}\n • Terms of Sale •{' '}\n Privacy Policy \n \n \n Copyright © 2023 Apple Inc.
    {' '}\n All rights reserved\n     \n     \n \n \n);\n", + "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nconst main = {\n fontFamily: '\"Helvetica Neue\",Helvetica,Arial,sans-serif',\n backgroundColor: '#ffffff'\n};\n\nconst resetText = {\n margin: '0',\n padding: '0',\n lineHeight: 1.4\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '660px'\n};\n\nconst tableCell = { display: 'table-cell' };\n\nconst heading = {\n fontSize: '32px',\n fontWeight: '300',\n color: '#888888'\n};\n\nconst cupomText = {\n textAlign: 'center' as const,\n margin: '36px 0 40px 0',\n fontSize: '14px',\n fontWeight: '500',\n color: '#111111'\n};\n\nconst supStyle = {\n fontWeight: '300'\n};\n\nconst informationTable = {\n borderCollapse: 'collapse' as const,\n borderSpacing: '0px',\n color: 'rgb(51,51,51)',\n backgroundColor: 'rgb(250,250,250)',\n borderRadius: '3px',\n fontSize: '12px'\n};\n\nconst informationTableRow = {\n height: '46px'\n};\n\nconst informationTableColumn = {\n paddingLeft: '20px',\n borderStyle: 'solid',\n borderColor: 'white',\n borderWidth: '0px 1px 1px 0px',\n height: '44px'\n};\n\nconst informationTableLabel = {\n ...resetText,\n color: 'rgb(102,102,102)',\n fontSize: '10px'\n};\n\nconst informationTableValue = {\n fontSize: '12px',\n margin: '0',\n padding: '0',\n lineHeight: 1.4\n};\n\nconst productTitleTable = {\n ...informationTable,\n margin: '30px 0 15px 0',\n height: '24px'\n};\n\nconst productsTitle = {\n background: '#fafafa',\n paddingLeft: '10px',\n fontSize: '14px',\n fontWeight: '500',\n margin: '0'\n};\n\nconst productIcon = {\n margin: '0 0 0 20px',\n borderRadius: '14px',\n border: '1px solid rgba(128,128,128,0.2)'\n};\n\nconst productTitle = { fontSize: '12px', fontWeight: '600', ...resetText };\n\nconst productDescription = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n ...resetText\n};\n\nconst productLink = {\n fontSize: '12px',\n color: 'rgb(0,112,201)',\n textDecoration: 'none'\n};\n\nconst divisor = {\n marginLeft: '4px',\n marginRight: '4px',\n color: 'rgb(51,51,51)',\n fontWeight: 200\n};\n\nconst productPriceTotal = {\n margin: '0',\n color: 'rgb(102,102,102)',\n fontSize: '10px',\n fontWeight: '600',\n padding: '0px 30px 0px 0px',\n textAlign: 'right' as const\n};\n\nconst productPrice = {\n fontSize: '12px',\n fontWeight: '600',\n margin: '0'\n};\n\nconst productPriceLarge = {\n margin: '0px 20px 0px 0px',\n fontSize: '16px',\n fontWeight: '600',\n whiteSpace: 'nowrap' as const,\n textAlign: 'right' as const\n};\n\nconst productPriceWrapper = {\n display: 'table-cell',\n padding: '0px 20px 0px 0px',\n width: '100px',\n verticalAlign: 'top'\n};\n\nconst productPriceLine = { margin: '30px 0 0 0' };\n\nconst productPriceVerticalLine = {\n height: '48px',\n borderLeft: '1px solid',\n borderColor: 'rgb(238,238,238)'\n};\n\nconst productPriceLargeWrapper = { display: 'table-cell', width: '90px' };\n\nconst productPriceLineBottom = { margin: '0 0 75px 0' };\n\nconst block = { display: 'block' };\n\nconst ctaTitle = {\n display: 'block',\n margin: '15px 0 0 0'\n};\n\nconst ctaText = { fontSize: '24px', fontWeight: '500' };\n\nconst walletWrapper = { display: 'table-cell', margin: '10px 0 0 0' };\n\nconst walletLink = { color: 'rgb(0,126,255)', textDecoration: 'none' };\n\nconst walletImage = {\n display: 'inherit',\n paddingRight: '8px',\n verticalAlign: 'middle'\n};\n\nconst walletBottomLine = { margin: '65px 0 20px 0' };\n\nconst footerText = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n margin: '0',\n lineHeight: 'auto',\n marginBottom: '16px'\n};\n\nconst footerTextCenter = {\n fontSize: '12px',\n color: 'rgb(102,102,102)',\n margin: '20px 0',\n lineHeight: 'auto',\n textAlign: 'center' as const\n};\n\nconst footerLink = { color: 'rgb(0,115,255)' };\n\nconst footerIcon = { display: 'block', margin: '40px 0 0 0' };\n\nconst footerLinksWrapper = {\n margin: '8px 0 0 0',\n textAlign: 'center' as const,\n fontSize: '12px',\n color: 'rgb(102,102,102)'\n};\n\nconst footerCopyright = {\n margin: '25px 0 0 0',\n textAlign: 'center' as const,\n fontSize: '12px',\n color: 'rgb(102,102,102)'\n};\n\nconst walletLinkText = {\n fontSize: '14px',\n fontWeight: '400',\n textDecoration: 'none'\n};\n\nexport const templateName = 'Apple Receipt';\n\nexport const Template = () => (\n \n \n Apple Receipt\n\n \n \n
    \n \n \n \"Apple\n \n\n \n Receipt\n \n \n
    \n
    \n \n Save 3% on all your Apple purchases with Apple Card.\n 1{' '}\n Apply and use in minutes\n 2\n \n
    \n
    \n \n \n
    \n \n \n APPLE ID\n \n bruce@wayne.com\n \n \n \n\n \n \n INVOICE DATE\n 18 Jan 2023\n \n \n\n \n \n ORDER ID\n \n ML4F5L8522\n \n \n \n DOCUMENT NO.\n 186623754793\n \n \n
    \n     \n \n BILLED TO\n Visa .... 7461 (Apple Pay)\n Bruce Wayne\n 2125 Chestnut St\n San Francisco, CA 94123\n USA\n \n     \n
    \n
    \n App Store\n
    \n
    \n \n \n \n \n \n HBO Max: Stream TV & Movies\n HBO Max Ad-Free (Monthly)\n Renews Aug 20, 2023\n \n Write a Review\n \n |\n \n Report a Problem\n \n \n\n \n $14.99\n \n \n
    \n
    \n
    \n \n \n TOTAL\n \n \n \n $14.99\n \n \n
    \n
    \n
    \n \n \n \"Apple\n \n \n
    \n
    \n \n \n Save 3% on all your Apple purchases.\n \n \n
    \n
    \n \n \n \n \n Apply and use in minutes\n \n \n \n
    \n
    \n \n 1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when\n transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily\n Cash can be applied by you as a credit on your statement balance. 3% is the total amount\n of Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more\n details on Daily Cash and qualifying transactions.\n \n 2. Subject to credit approval.\n \n To access and use all the features of Apple Card, you must add Apple Card to Wallet on an\n iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or\n iPadOS by going to Settings > General > Software Update. Tap Download and Install.\n \n Available for qualifying applicants in the United States.\n \n Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.\n \n \n If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with\n questions about Apple Card.\n \n \n Privacy: We use a\n \n {' '}\n Subscriber ID{' '}\n \n to provide reports to developers.\n \n \n Get help with subscriptions and purchases.\n \n Visit Apple Support.\n \n \n \n Learn how to{' '}\n \n manage your password preferences\n {' '}\n for iTunes, Apple Books, and App Store purchases.\n \n\n \n {' '}\n You have the option to stop receiving email receipts for your subscription renewals. If\n you have opted out, you can still view your receipts in your account under Purchase\n History. To manage receipts or to opt in again, go to{' '}\n \n Account Settings.\n \n \n
    \n \n \n \"Apple\n \n \n
    \n \n \n Account Settings\n {' '}\n • Terms of Sale •{' '}\n Privacy Policy \n \n \n Copyright © 2023 Apple Inc.
    {' '}\n All rights reserved\n     \n     \n \n \n);\n", "name": "Apple Receipt", "plain": "Receipt\n\nSave 3% on all your Apple purchases with Apple Card.1 Apply and use in minutes\nhttps://www.apple.com/apple-card2\n\nAPPLE ID\n\nbruce@wayne.com\n\nINVOICE DATE\n\n18 Jan 2023\n\nORDER ID\n\nML4F5L8522\n\nDOCUMENT NO.\n\n186623754793\n\nBILLED TO\n\nVisa .... 7461 (Apple Pay)\n\nBruce Wayne\n\n2125 Chestnut St\n\nSan Francisco, CA 94123\n\nUSA\n\nApp Store\n\nHBO Max: Stream TV & Movies\n\nHBO Max Ad-Free (Monthly)\n\nRenews Aug 20, 2023\n\nWrite a Review\nhttps://userpub.itunes.apple.com/WebObjects/MZUserPublishing.woa/wa/addUserReview?cc=us&id=1497977514&o=i&type=Subscription%20Renewal|Report\na Problem\nhttps://buy.itunes.apple.com/WebObjects/MZFinance.woa/wa/reportAProblem?a=1497977514&cc=us&d=683263808&o=i&p=29065684906671&pli=29092219632071&s=1\n\n$14.99\n\n--------------------------------------------------------------------------------\n\nTOTAL\n\n$14.99\n\n--------------------------------------------------------------------------------\n\n\n\nSave 3% on all your Apple purchases.\n\nApply and use in minutes\nhttps://wallet.apple.com/apple-card/setup/feature/ccs?referrer=cid%3Dapy-120-100003\n\n--------------------------------------------------------------------------------\n\n1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card\nwhen transactions post to your Apple Card account. If you do not have an Apple\nCash card, Daily Cash can be applied by you as a credit on your statement\nbalance. 3% is the total amount of Daily Cash earned for these purchases. See\nthe Apple Card Customer Agreement for more details on Daily Cash and qualifying\ntransactions.\n\n2. Subject to credit approval.\n\nTo access and use all the features of Apple Card, you must add Apple Card to\nWallet on an iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the\nlatest version of iOS or iPadOS by going to Settings > General > Software\nUpdate. Tap Download and Install.\n\nAvailable for qualifying applicants in the United States.\n\nApple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.\n\nIf you reside in the US territories, please call Goldman Sachs at 877-255-5923\nwith questions about Apple Card.\n\nPrivacy: We use a Subscriber ID http://support.apple.com/kb/HT207233to provide\nreports to developers.\n\nGet help with subscriptions and purchases.Visit Apple Support.\nhttps://support.apple.com/billing?cid=email_receipt\n\nLearn how to manage your password preferences\nhttps://support.apple.com/kb/HT204030?cid=email_receipt_itunes_article_HT204030\nfor iTunes, Apple Books, and App Store purchases.\n\nYou have the option to stop receiving email receipts for your subscription\nrenewals. If you have opted out, you can still view your receipts in your\naccount under Purchase History. To manage receipts or to opt in again, go to\nAccount Settings.\nhttps://finance-app.itunes.apple.com/account/subscriptions?unsupportedRedirectUrl=https://apps.apple.com/US/invoice\n\n\n\nAccount Settings\nhttps://buy.itunes.apple.com/WebObjects/MZFinance.woa/wa/accountSummary?mt=8 •\nTerms of Sale https://www.apple.com/legal/itunes/us/sales.html • Privacy Policy\nhttps://www.apple.com/legal/privacy/\n\nCopyright © 2023 Apple Inc.\nAll rights reserved https://www.apple.com/legal/", "subject": "Apple Receipt" }, { "file": "codepen-challengers.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    #CodePenChallenge: Cubes
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n \n \n \n \n \n \n
    \"codepen\"
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    View this Challenge on CodePen

    \n

    This week: #CodePenChallenge:

    Cubes

    \n

    \n \n \n \n \n \n \n
    \n

    The Shape challenge continues!

    \n

    Last week, we kicked things off with round shapes. We \"rounded\" up the Pens from week one in our #CodePenChallenge: Round collection.

    \n

    This week, we move on to cubes 🧊

    \n

    Creating cubes in the browser is all about mastery of illusion. Take control of perspective and shadows and you can make the magic of 3D on a flat screen 🧙

    \n

    This week is a fun chance to work on your CSS shape-building skills, or dig into a 3D JavaScript library like Three.js.

    \n

    This week's starter template features an ice cube emoji to help inspire a \"cool\" idea for your Pen. As always, the template is just as jumping off point. Feel free to incorporate the 🧊 in your creation, add more elements, or freeze it out completely and start over from scratch!

    \n

    💪 Your Challenge: create a Pen that includes cube shapes.

    \"codepen\"\n \n \n \n \n \n \n
    \"codepen\"\n

    CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level.

    \n \n \n \n \n \n \n
    Learn More
    \n
    \n
    \n

    To participate: Create a Pen → and tag it codepenchallenge and cpc-cubes. We'll be watching and gathering the Pens into a Collection, and sharing on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    IDEAS!

    \n \n \n \n \n \n \n
    🌟

    This week we move from 2 dimensions to three! Maybe you could exercise your perspective in CSS to create a 3D cube. Or, you can try out creating 3D shapes in JavaScript, using WebGL or building a Three.js scene.

    \n
    \n \n \n \n \n \n \n
    🌟

    There's more to cubes than just six square sides. There are variations on the cube that could be fun to play with this week: cuboid shapes are hexahedrons with faces that aren't always squares. And if you want to really push the boundaries of shape, consider the 4 dimensional tesseract!

    \n
    \n \n \n \n \n \n \n
    🌟

    Here's a mind-bending idea that can combine the round shapes from week one with this week's cube theme: Spherical Cubes 😳 Solving longstanding mathematical mysteries is probably outside the scope of a CodePen challenge, but you could use front-end tools to explore fitting spheres into cubes, or vice-versa.

    \n
    \n     		\n

    RESOURCES!

    \n \n \n \n \n \n \n
    📖

    Learn all about How CSS Perspective Works and how to build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks. Or, check out stunning examples of WebGL cubes from Matthias Hurrle: Just Ice and Posing.

    \n
    \n \n \n \n \n \n \n
    📖

    Want to go beyond the square cube? Draw inspiration from EntropyReversed's Pulsating Tesseract, Josetxu's Rainbow Cuboid Loader, or Ana Tudor's Pure CSS cuboid jellyfish.

    \n
    \n \n \n \n \n \n \n
    📖

    Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's Cube Sphere, Munir Safi's 3D Sphere to Cube Animation With Virtual Trackball and Ana Tudor's Infinitely unpack prism for more mindbending cube concepts that test the boundaries of how shapes interact with each other.

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Go to Challenge Page
    \n
    \n \n \n \n \n \n \n
    \n

    You can adjust your email preferences any time, or instantly opt out of emails of this kind. Need help with anything? Hit up support.

    \n
    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    #CodePenChallenge: Cubes
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n \n \n \n \n \n \n
    \"codepen\"
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    View this Challenge on CodePen

    \n

    This week: #CodePenChallenge:

    Cubes

    \n

    \n \n \n \n \n \n \n
    \n

    The Shape challenge continues!

    \n

    Last week, we kicked things off with round shapes. We \"rounded\" up the Pens from week one in our #CodePenChallenge: Round collection.

    \n

    This week, we move on to cubes 🧊

    \n

    Creating cubes in the browser is all about mastery of illusion. Take control of perspective and shadows and you can make the magic of 3D on a flat screen 🧙

    \n

    This week is a fun chance to work on your CSS shape-building skills, or dig into a 3D JavaScript library like Three.js.

    \n

    This week's starter template features an ice cube emoji to help inspire a \"cool\" idea for your Pen. As always, the template is just as jumping off point. Feel free to incorporate the 🧊 in your creation, add more elements, or freeze it out completely and start over from scratch!

    \n

    💪 Your Challenge: create a Pen that includes cube shapes.

    \"codepen\"\n \n \n \n \n \n \n
    \"codepen\"\n

    CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level.

    \n \n \n \n \n \n \n
    Learn More
    \n
    \n
    \n

    To participate: Create a Pen → and tag it codepenchallenge and cpc-cubes. We'll be watching and gathering the Pens into a Collection, and sharing on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    IDEAS!

    \n \n \n \n \n \n \n
    🌟

    This week we move from 2 dimensions to three! Maybe you could exercise your perspective in CSS to create a 3D cube. Or, you can try out creating 3D shapes in JavaScript, using WebGL or building a Three.js scene.

    \n
    \n \n \n \n \n \n \n
    🌟

    There's more to cubes than just six square sides. There are variations on the cube that could be fun to play with this week: cuboid shapes are hexahedrons with faces that aren't always squares. And if you want to really push the boundaries of shape, consider the 4 dimensional tesseract!

    \n
    \n \n \n \n \n \n \n
    🌟

    Here's a mind-bending idea that can combine the round shapes from week one with this week's cube theme: Spherical Cubes 😳 Solving longstanding mathematical mysteries is probably outside the scope of a CodePen challenge, but you could use front-end tools to explore fitting spheres into cubes, or vice-versa.

    \n
    \n     		\n

    RESOURCES!

    \n \n \n \n \n \n \n
    📖

    Learn all about How CSS Perspective Works and how to build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks. Or, check out stunning examples of WebGL cubes from Matthias Hurrle: Just Ice and Posing.

    \n
    \n \n \n \n \n \n \n
    📖

    Want to go beyond the square cube? Draw inspiration from EntropyReversed's Pulsating Tesseract, Josetxu's Rainbow Cuboid Loader, or Ana Tudor's Pure CSS cuboid jellyfish.

    \n
    \n \n \n \n \n \n \n
    📖

    Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's Cube Sphere, Munir Safi's 3D Sphere to Cube Animation With Virtual Trackball and Ana Tudor's Infinitely unpack prism for more mindbending cube concepts that test the boundaries of how shapes interact with each other.

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Go to Challenge Page
    \n
    \n \n \n \n \n \n \n
    \n

    You can adjust your email preferences any time, or instantly opt out of emails of this kind. Need help with anything? Hit up support.

    \n
    \n
    \n
    \n
    \n \n\n", "htmlFile": "codepen-challengers.html", "id": "codepen-challengers", - "jsx": "import {\n Body,\n Button,\n Container,\n Head,\n Heading,\n Column,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text,\n Row\n} from 'jsx-email';\n\nconst main = {\n fontFamily: '\"Google Sans\",Roboto,RobotoDraft,Helvetica,Arial,sans-serif',\n backgroundColor: '#505050',\n margin: '0'\n};\n\nconst imgHeader = {\n margin: 'auto'\n};\n\nconst header = {\n width: '100%',\n backgroundColor: '#191919',\n margin: '0 auto',\n paddingBottom: '30px',\n zIndex: '999'\n};\n\nconst container = {\n paddingLeft: '12px',\n paddingRight: '12px',\n margin: '0 auto',\n width: '648px',\n maxWidth: '648px',\n position: 'relative' as const\n};\n\nconst challengeLink = {\n backgroundColor: '#505050',\n textAlign: 'center' as const,\n padding: '10px 0 25px 0',\n fontSize: '13px',\n position: 'absolute' as const,\n width: '100%',\n maxWidth: '648px',\n top: '-28px',\n margin: '0 0 16px 0'\n};\n\nconst link = {\n color: '#fff',\n cursor: 'pointer'\n};\n\nconst blueLink = {\n color: '#15c',\n cursor: 'pointer'\n};\n\nconst heading = {\n background: '#f0d361',\n padding: '30px',\n color: '#191919',\n fontWeight: '400',\n marginBottom: '0'\n};\n\nconst section = {\n margin: '0',\n background: '#fff',\n padding: '0 24px'\n};\n\nconst yellowSection = {\n background: '#f5d247',\n padding: '30px',\n fontSize: '18px',\n lineHeight: '1.5'\n};\n\nconst text = {\n fontSize: '16px'\n};\n\nconst cubeText = { fontSize: '32px', margin: '4px 0 0 0' };\n\nconst yourChallenge = {\n fontSize: '16px',\n border: '6px solid #ebd473',\n padding: '20px',\n margin: '0 0 40px 0'\n};\n\nconst sectionPro = {\n marginTop: '40px',\n marginBottom: '24px',\n textAlign: 'center' as const,\n background: '#0b112a',\n color: '#fff',\n padding: '35px 20px 30px 20px',\n border: '6px solid #2138c6'\n};\n\nconst imagePro = { margin: '0 auto 30px auto' };\n\nconst resourcesTitle = {\n fontWeight: '900',\n lineHeight: '1.1',\n marginTop: '-40px',\n fontSize: '18px'\n};\n\nconst ideasTitle = {\n fontWeight: '900',\n lineHeight: '1.1',\n fontSize: '18px'\n};\n\nconst ideas = {\n width: '50%',\n paddingRight: '10px'\n};\n\nconst resources = {\n width: '50%',\n paddingLeft: '10px'\n};\n\nconst card = {\n padding: '20px',\n margin: '0 0 20px 0',\n borderRadius: '10px',\n fontSize: '36px',\n textAlign: 'center' as const\n};\n\nconst yellowCard = {\n ...card,\n background: '#fff4c8',\n border: '1px solid #f4d247'\n};\n\nconst blueCard = {\n ...card,\n background: '#d9f6ff',\n border: '1px solid #92bfd0'\n};\n\nconst textCard = {\n fontSize: '13px',\n textAlign: 'left' as const\n};\n\nconst goToChallenge = {\n margin: '40px 0 120px 0',\n textAlign: 'center' as const\n};\n\nconst footer = {\n background: '#fff',\n color: '#505050',\n padding: '0 24px',\n marginBottom: '48px'\n};\n\nconst footerText = {\n fontSize: '13px'\n};\n\nconst footerLink = {\n textDecoration: 'underline',\n color: '#505050',\n cursor: 'pointer'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Codepen Challengers';\n\nexport const Template = () => (\n \n \n #CodePenChallenge: Cubes\n \n
    \n \n
    \n \n \n View this Challenge on CodePen\n \n\n \n This week: #CodePenChallenge: Cubes\n \n\n
    \n The Shape challenge continues!\n\n \n Last week, we kicked things off with round shapes. We \"rounded\" up the Pens from week\n one in our #CodePenChallenge: Round collection.\n \n\n This week, we move on to cubes 🧊\n\n \n Creating cubes in the browser is all about mastery of illusion. Take control of\n perspective and shadows and you can make the magic of 3D on a flat screen 🧙\n \n\n \n This week is a fun chance to work on your CSS shape-building skills, or dig into a 3D\n JavaScript library like Three.js.\n \n\n \n This week's starter template features an ice cube emoji to help inspire a \"cool\" idea\n for your Pen. As always, the template is just as jumping off point. Feel free to\n incorporate the 🧊 in your creation, add more elements, or freeze it out completely and\n start over from scratch!\n \n\n \n 💪 Your Challenge:{' '}\n create a Pen that includes cube shapes.\n \n\n \"codepen\"\n\n
    \n \"codepen\"\n\n \n CodePen PRO combines a bunch of features that can help any front-end designer or\n developer at any experience level.\n \n \n Learn More\n \n
    \n
    \n\n \n To participate: Create a Pen → and tag it{' '}\n \n codepenchallenge\n {' '}\n and\n \n {' '}\n cpc-cubes\n \n . We'll be watching and gathering the Pens into a Collection, and sharing on{' '}\n Twitter and Instagram (Use the\n #CodePenChallenge tag on Twitter and Instagram as well).\n \n\n
    \n \n \n IDEAS!\n\n
    \n 🌟\n \n This week we move from 2 dimensions to three! Maybe you could exercise your{' '}\n perspective in CSS to create a 3D cube. Or, you can\n try out creating 3D shapes in JavaScript, using{' '}\n WebGL or building a{' '}\n Three.js scene.\n \n
    \n\n
    \n 🌟\n \n There's more to cubes than just six square sides. There are variations on the cube\n that could be fun to play with this week:{' '}\n cuboid shapes are hexahedrons with faces that aren't\n always squares. And if you want to really push the boundaries of shape, consider\n the 4 dimensional tesseract!\n \n
    \n\n
    \n 🌟\n \n Here's a mind-bending idea that can combine the round shapes from week one with\n this week's cube theme: Spherical Cubes 😳 Solving\n longstanding mathematical mysteries is probably outside the scope of a CodePen\n challenge, but you could use front-end tools to explore fitting spheres into\n cubes, or vice-versa.\n \n
    \n     \n \n RESOURCES!\n\n
    \n 📖\n \n Learn all about How CSS Perspective Works and how to\n build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks.\n Or, check out stunning examples of WebGL cubes from Matthias Hurrle:{' '}\n Just Ice and Posing.\n \n
    \n\n
    \n 📖\n \n Want to go beyond the square cube? Draw inspiration from EntropyReversed's{' '}\n Pulsating Tesseract, Josetxu's{' '}\n Rainbow Cuboid Loader, or Ana Tudor's{' '}\n Pure CSS cuboid jellyfish.\n \n
    \n\n
    \n 📖\n \n Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's{' '}\n Cube Sphere, Munir Safi's{' '}\n 3D Sphere to Cube Animation With Virtual Trackball{' '}\n and Ana Tudor's Infinitely unpack prism for more\n mindbending cube concepts that test the boundaries of how shapes interact with\n each other.\n \n
    \n     \n     \n
    \n\n
    \n \n Go to Challenge Page\n \n
    \n\n
    \n \n You can adjust your email preferences any time, or{' '}\n instantly opt out of emails of this kind. Need help with\n anything? Hit up support.\n \n
    \n     \n \n \n);\n", + "jsx": "import {\n Body,\n Button,\n Container,\n Head,\n Heading,\n Column,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text,\n Row\n} from 'jsx-email';\n\nconst main = {\n fontFamily: '\"Google Sans\",Roboto,RobotoDraft,Helvetica,Arial,sans-serif',\n backgroundColor: '#505050',\n margin: '0'\n};\n\nconst imgHeader = {\n margin: 'auto'\n};\n\nconst header = {\n width: '100%',\n backgroundColor: '#191919',\n margin: '0 auto',\n paddingBottom: '30px',\n zIndex: '999'\n};\n\nconst container = {\n paddingLeft: '12px',\n paddingRight: '12px',\n margin: '0 auto',\n width: '648px',\n maxWidth: '648px',\n position: 'relative' as const\n};\n\nconst challengeLink = {\n backgroundColor: '#505050',\n textAlign: 'center' as const,\n padding: '10px 0 25px 0',\n fontSize: '13px',\n position: 'absolute' as const,\n width: '100%',\n maxWidth: '648px',\n top: '-28px',\n margin: '0 0 16px 0'\n};\n\nconst link = {\n color: '#fff',\n cursor: 'pointer'\n};\n\nconst blueLink = {\n color: '#15c',\n cursor: 'pointer'\n};\n\nconst heading = {\n background: '#f0d361',\n padding: '30px',\n color: '#191919',\n fontWeight: '400',\n marginBottom: '0'\n};\n\nconst section = {\n margin: '0',\n background: '#fff',\n padding: '0 24px'\n};\n\nconst yellowSection = {\n background: '#f5d247',\n padding: '30px',\n fontSize: '18px',\n lineHeight: '1.5'\n};\n\nconst text = {\n fontSize: '16px'\n};\n\nconst cubeText = { fontSize: '32px', margin: '4px 0 0 0' };\n\nconst yourChallenge = {\n fontSize: '16px',\n border: '6px solid #ebd473',\n padding: '20px',\n margin: '0 0 40px 0'\n};\n\nconst sectionPro = {\n marginTop: '40px',\n marginBottom: '24px',\n textAlign: 'center' as const,\n background: '#0b112a',\n color: '#fff',\n padding: '35px 20px 30px 20px',\n border: '6px solid #2138c6'\n};\n\nconst imagePro = { margin: '0 auto 30px auto' };\n\nconst resourcesTitle = {\n fontWeight: '900',\n lineHeight: '1.1',\n marginTop: '-40px',\n fontSize: '18px'\n};\n\nconst ideasTitle = {\n fontWeight: '900',\n lineHeight: '1.1',\n fontSize: '18px'\n};\n\nconst ideas = {\n width: '50%',\n paddingRight: '10px'\n};\n\nconst resources = {\n width: '50%',\n paddingLeft: '10px'\n};\n\nconst card = {\n padding: '20px',\n margin: '0 0 20px 0',\n borderRadius: '10px',\n fontSize: '36px',\n textAlign: 'center' as const\n};\n\nconst yellowCard = {\n ...card,\n background: '#fff4c8',\n border: '1px solid #f4d247'\n};\n\nconst blueCard = {\n ...card,\n background: '#d9f6ff',\n border: '1px solid #92bfd0'\n};\n\nconst textCard = {\n fontSize: '13px',\n textAlign: 'left' as const\n};\n\nconst goToChallenge = {\n margin: '40px 0 120px 0',\n textAlign: 'center' as const\n};\n\nconst footer = {\n background: '#fff',\n color: '#505050',\n padding: '0 24px',\n marginBottom: '48px'\n};\n\nconst footerText = {\n fontSize: '13px'\n};\n\nconst footerLink = {\n textDecoration: 'underline',\n color: '#505050',\n cursor: 'pointer'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Codepen Challengers';\n\nexport const Template = () => (\n \n \n #CodePenChallenge: Cubes\n \n
    \n \n
    \n \n \n View this Challenge on CodePen\n \n\n \n This week: #CodePenChallenge: Cubes\n \n\n
    \n The Shape challenge continues!\n\n \n Last week, we kicked things off with round shapes. We \"rounded\" up the Pens from week\n one in our #CodePenChallenge: Round collection.\n \n\n This week, we move on to cubes 🧊\n\n \n Creating cubes in the browser is all about mastery of illusion. Take control of\n perspective and shadows and you can make the magic of 3D on a flat screen 🧙\n \n\n \n This week is a fun chance to work on your CSS shape-building skills, or dig into a 3D\n JavaScript library like Three.js.\n \n\n \n This week's starter template features an ice cube emoji to help inspire a \"cool\" idea\n for your Pen. As always, the template is just as jumping off point. Feel free to\n incorporate the 🧊 in your creation, add more elements, or freeze it out completely and\n start over from scratch!\n \n\n \n 💪 Your Challenge:{' '}\n create a Pen that includes cube shapes.\n \n\n \"codepen\"\n\n
    \n \"codepen\"\n\n \n CodePen PRO combines a bunch of features that can help any front-end designer or\n developer at any experience level.\n \n \n Learn More\n \n
    \n
    \n\n \n To participate: Create a Pen → and tag it{' '}\n \n codepenchallenge\n {' '}\n and\n \n {' '}\n cpc-cubes\n \n . We'll be watching and gathering the Pens into a Collection, and sharing on{' '}\n Twitter and Instagram (Use the\n #CodePenChallenge tag on Twitter and Instagram as well).\n \n\n
    \n \n \n IDEAS!\n\n
    \n 🌟\n \n This week we move from 2 dimensions to three! Maybe you could exercise your{' '}\n perspective in CSS to create a 3D cube. Or, you can\n try out creating 3D shapes in JavaScript, using{' '}\n WebGL or building a{' '}\n Three.js scene.\n \n
    \n\n
    \n 🌟\n \n There's more to cubes than just six square sides. There are variations on the cube\n that could be fun to play with this week:{' '}\n cuboid shapes are hexahedrons with faces that aren't\n always squares. And if you want to really push the boundaries of shape, consider\n the 4 dimensional tesseract!\n \n
    \n\n
    \n 🌟\n \n Here's a mind-bending idea that can combine the round shapes from week one with\n this week's cube theme: Spherical Cubes 😳 Solving\n longstanding mathematical mysteries is probably outside the scope of a CodePen\n challenge, but you could use front-end tools to explore fitting spheres into\n cubes, or vice-versa.\n \n
    \n     \n \n RESOURCES!\n\n
    \n 📖\n \n Learn all about How CSS Perspective Works and how to\n build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks.\n Or, check out stunning examples of WebGL cubes from Matthias Hurrle:{' '}\n Just Ice and Posing.\n \n
    \n\n
    \n 📖\n \n Want to go beyond the square cube? Draw inspiration from EntropyReversed's{' '}\n Pulsating Tesseract, Josetxu's{' '}\n Rainbow Cuboid Loader, or Ana Tudor's{' '}\n Pure CSS cuboid jellyfish.\n \n
    \n\n
    \n 📖\n \n Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's{' '}\n Cube Sphere, Munir Safi's{' '}\n 3D Sphere to Cube Animation With Virtual Trackball{' '}\n and Ana Tudor's Infinitely unpack prism for more\n mindbending cube concepts that test the boundaries of how shapes interact with\n each other.\n \n
    \n     \n     \n
    \n\n
    \n \n Go to Challenge Page\n \n
    \n\n
    \n \n You can adjust your email preferences any time, or{' '}\n instantly opt out of emails of this kind. Need help with\n anything? Hit up support.\n \n
    \n     \n \n \n);\n", "name": "Codepen Challengers", "plain": "View this Challenge on CodePen\n\n\nTHIS WEEK: #CODEPENCHALLENGE:\n\nCUBES\n\nThe Shape challenge continues!\n\nLast week, we kicked things off with round shapes. We \"rounded\" up the Pens from\nweek one in our #CodePenChallenge: Round collection.\n\nThis week, we move on to cubes 🧊\n\nCreating cubes in the browser is all about mastery of illusion. Take control of\nperspective and shadows and you can make the magic of 3D on a flat screen 🧙\n\nThis week is a fun chance to work on your CSS shape-building skills, or dig into\na 3D JavaScript library like Three.js.\n\nThis week's starter template features an ice cube emoji to help inspire a \"cool\"\nidea for your Pen. As always, the template is just as jumping off point. Feel\nfree to incorporate the 🧊 in your creation, add more elements, or freeze it out\ncompletely and start over from scratch!\n\n💪 Your Challenge: create a Pen that includes cube shapes.\n\nCodePen PRO combines a bunch of features that can help any front-end designer or\ndeveloper at any experience level.\n\nLearn More\n\nTo participate: Create a Pen → and tag it codepenchallenge and cpc-cubes. We'll\nbe watching and gathering the Pens into a Collection, and sharing on Twitter and\nInstagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).\n\nIDEAS!\n\n🌟\n\nThis week we move from 2 dimensions to three! Maybe you could exercise your\nperspective in CSS to create a 3D cube. Or, you can try out creating 3D shapes\nin JavaScript, using WebGL or building a Three.js scene.\n\n🌟\n\nThere's more to cubes than just six square sides. There are variations on the\ncube that could be fun to play with this week: cuboid shapes are hexahedrons\nwith faces that aren't always squares. And if you want to really push the\nboundaries of shape, consider the 4 dimensional tesseract!\n\n🌟\n\nHere's a mind-bending idea that can combine the round shapes from week one with\nthis week's cube theme: Spherical Cubes 😳 Solving longstanding mathematical\nmysteries is probably outside the scope of a CodePen challenge, but you could\nuse front-end tools to explore fitting spheres into cubes, or vice-versa.\n\nRESOURCES!\n\n📖\n\nLearn all about How CSS Perspective Works and how to build a 3D CSS cube from\nscratch in Amit Sheen's in-depth tutorial for CSS-Tricks. Or, check out stunning\nexamples of WebGL cubes from Matthias Hurrle: Just Ice and Posing.\n\n📖\n\nWant to go beyond the square cube? Draw inspiration from EntropyReversed's\nPulsating Tesseract, Josetxu's Rainbow Cuboid Loader, or Ana Tudor's Pure CSS\ncuboid jellyfish.\n\n📖\n\nDid that spherical cubes concept pique your interest? Explore Ryan Mulligan's\nCube Sphere, Munir Safi's 3D Sphere to Cube Animation With Virtual Trackball and\nAna Tudor's Infinitely unpack prism for more mindbending cube concepts that test\nthe boundaries of how shapes interact with each other.\n\nGo to Challenge Page\n\nYou can adjust your email preferences any time, or instantly opt out of emails\nof this kind. Need help with anything? Hit up support.", "subject": "Codepen Challengers" }, { "file": "credential emails/dropbox-reset-password.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Dropbox reset your password
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Dropbox\"\n \n \n \n \n \n \n
    \n

    Hi Bruce,

    \n

    Someone recently requested a password change for your Dropbox account. If this was you, you can set a new password here:

    \n \n \n \n \n \n \n
    Reset password
    \n

    If you don't want to change your password or didn't request this, just ignore and delete this message.

    \n

    To keep your account secure, please don't forward this email to anyone. See our Help Center for more security tips.

    \n

    Happy Dropboxing!

    \n
    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Dropbox reset your password
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Dropbox\"\n \n \n \n \n \n \n
    \n

    Hi Bruce,

    \n

    Someone recently requested a password change for your Dropbox account. If this was you, you can set a new password here:

    \n \n \n \n \n \n \n
    Reset password
    \n

    If you don't want to change your password or didn't request this, just ignore and delete this message.

    \n

    To keep your account secure, please don't forward this email to anyone. See our Help Center for more security tips.

    \n

    Happy Dropboxing!

    \n
    \n
    \n
    \n
    \n \n\n", "htmlFile": "credential emails/dropbox-reset-password.html", "id": "credential emails/dropbox-reset-password", - "jsx": "import { Body, Button, Container, Head, Html, Img, Link, Preview, Section, Text } from 'jsx-email';\n\ninterface DropboxResetPasswordEmailProps {\n userFirstname?: string;\n resetPasswordLink?: string;\n}\n\nconst main = {\n backgroundColor: '#f6f9fc',\n padding: '10px 0'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n border: '1px solid #f0f0f0',\n padding: '45px'\n};\n\nconst text = {\n fontSize: '16px',\n fontFamily:\n \"'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif\",\n fontWeight: '300',\n color: '#404040',\n lineHeight: '26px'\n};\n\nconst anchor = {\n textDecoration: 'underline'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n userFirstname: 'Bruce',\n resetPasswordLink: 'https://dropbox.com'\n} as DropboxResetPasswordEmailProps;\n\nexport const templateName = 'Dropbox Reset Password';\n\nexport const Template = ({ userFirstname, resetPasswordLink }: DropboxResetPasswordEmailProps) => {\n return (\n \n \n Dropbox reset your password\n \n \n \"Dropbox\"\n
    \n Hi {userFirstname},\n \n Someone recently requested a password change for your Dropbox account. If this was\n you, you can set a new password here:\n \n \n Reset password\n \n \n If you don't want to change your password or didn't request this, just\n ignore and delete this message.\n \n \n To keep your account secure, please don't forward this email to anyone. See our\n Help Center for{' '}\n \n more security tips.\n \n \n Happy Dropboxing!\n
    \n     \n \n \n );\n};\n", + "jsx": "import { Body, Button, Container, Head, Html, Img, Link, Preview, Section, Text } from 'jsx-email';\n\ninterface DropboxResetPasswordEmailProps {\n userFirstname?: string;\n resetPasswordLink?: string;\n}\n\nconst main = {\n backgroundColor: '#f6f9fc',\n padding: '10px 0'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n border: '1px solid #f0f0f0',\n padding: '45px'\n};\n\nconst text = {\n fontSize: '16px',\n fontFamily:\n \"'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif\",\n fontWeight: '300',\n color: '#404040',\n lineHeight: '26px'\n};\n\nconst anchor = {\n textDecoration: 'underline'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n userFirstname: 'Bruce',\n resetPasswordLink: 'https://dropbox.com'\n} as DropboxResetPasswordEmailProps;\n\nexport const templateName = 'Dropbox Reset Password';\n\nexport const Template = ({ userFirstname, resetPasswordLink }: DropboxResetPasswordEmailProps) => {\n return (\n \n \n Dropbox reset your password\n \n \n \"Dropbox\"\n
    \n Hi {userFirstname},\n \n Someone recently requested a password change for your Dropbox account. If this was\n you, you can set a new password here:\n \n \n Reset password\n \n \n If you don't want to change your password or didn't request this, just\n ignore and delete this message.\n \n \n To keep your account secure, please don't forward this email to anyone. See our\n Help Center for{' '}\n \n more security tips.\n \n \n Happy Dropboxing!\n
    \n     \n \n \n );\n};\n", "name": "Dropbox Reset Password", "plain": "Hi Bruce,\n\nSomeone recently requested a password change for your Dropbox account. If this\nwas you, you can set a new password here:\n\nReset password https://dropbox.com\n\nIf you don't want to change your password or didn't request this, just ignore\nand delete this message.\n\nTo keep your account secure, please don't forward this email to anyone. See our\nHelp Center for more security tips. https://dropbox.com\n\nHappy Dropboxing!", "subject": "Dropbox Reset Password" }, { "file": "credential emails/github-access-token.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    A fine-grained personal access token has been added to your account
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Github\"\n

    @Batman, a personal access was created on your account.

    \n \n \n \n \n \n \n
    \n

    Hey Batman!

    \n

    A fine-grained personal access token (resend) was recently added to your account.

    \n \n \n \n \n \n \n
    View your token
    \n
    \n

    Your security audit log ・ Contact support

    \n

    GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107

    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    A fine-grained personal access token has been added to your account
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Github\"\n

    @Batman, a personal access was created on your account.

    \n \n \n \n \n \n \n
    \n

    Hey Batman!

    \n

    A fine-grained personal access token (resend) was recently added to your account.

    \n \n \n \n \n \n \n
    View your token
    \n
    \n

    Your security audit log ・ Contact support

    \n

    GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107

    \n
    \n
    \n
    \n \n\n", "htmlFile": "credential emails/github-access-token.html", "id": "credential emails/github-access-token", - "jsx": "import { Body, Button, Container, Head, Html, Img, Link, Preview, Section, Text } from 'jsx-email';\n\ninterface GithubAccessTokenEmailProps {\n username?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n color: '#24292e',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"'\n};\n\nconst container = {\n width: '480px',\n margin: '0 auto',\n padding: '20px 0 48px'\n};\n\nconst title = {\n fontSize: '24px',\n lineHeight: 1.25\n};\n\nconst section = {\n padding: '24px',\n border: 'solid 1px #dedede',\n borderRadius: '5px',\n textAlign: 'center' as const\n};\n\nconst text = {\n margin: '0 0 10px 0',\n textAlign: 'left' as const\n};\n\nconst links = {\n textAlign: 'center' as const\n};\n\nconst link = {\n color: '#0366d6',\n fontSize: '12px'\n};\n\nconst footer = {\n color: '#6a737d',\n fontSize: '12px',\n textAlign: 'center' as const,\n marginTop: '60px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n username: 'Batman'\n} as GithubAccessTokenEmailProps;\n\nexport const templateName = 'Github Access Token';\n\nexport const Template = ({ username }: GithubAccessTokenEmailProps) => (\n \n \n A fine-grained personal access token has been added to your account\n \n \n \"Github\"\n\n \n @{username}, a personal access was created on your account.\n \n\n
    \n \n Hey {username}!\n \n \n A fine-grained personal access token (resend) was recently added to your\n account.\n \n\n \n View your token\n \n
    \n \n Your security audit log ・{' '}\n Contact support\n \n\n \n GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107\n \n     \n \n \n);\n", + "jsx": "import { Body, Button, Container, Head, Html, Img, Link, Preview, Section, Text } from 'jsx-email';\n\ninterface GithubAccessTokenEmailProps {\n username?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n color: '#24292e',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"'\n};\n\nconst container = {\n width: '480px',\n margin: '0 auto',\n padding: '20px 0 48px'\n};\n\nconst title = {\n fontSize: '24px',\n lineHeight: 1.25\n};\n\nconst section = {\n padding: '24px',\n border: 'solid 1px #dedede',\n borderRadius: '5px',\n textAlign: 'center' as const\n};\n\nconst text = {\n margin: '0 0 10px 0',\n textAlign: 'left' as const\n};\n\nconst links = {\n textAlign: 'center' as const\n};\n\nconst link = {\n color: '#0366d6',\n fontSize: '12px'\n};\n\nconst footer = {\n color: '#6a737d',\n fontSize: '12px',\n textAlign: 'center' as const,\n marginTop: '60px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n username: 'Batman'\n} as GithubAccessTokenEmailProps;\n\nexport const templateName = 'Github Access Token';\n\nexport const Template = ({ username }: GithubAccessTokenEmailProps) => (\n \n \n A fine-grained personal access token has been added to your account\n \n \n \"Github\"\n\n \n @{username}, a personal access was created on your account.\n \n\n
    \n \n Hey {username}!\n \n \n A fine-grained personal access token (resend) was recently added to your\n account.\n \n\n \n View your token\n \n
    \n \n Your security audit log ・{' '}\n Contact support\n \n\n \n GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107\n \n     \n \n \n);\n", "name": "Github Access Token", "plain": "@Batman, a personal access was created on your account.\n\nHey Batman!\n\nA fine-grained personal access token (resend) was recently added to your\naccount.\n\nView your token\n\nYour security audit log ・ Contact support\n\nGitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107", "subject": "Github Access Token" }, { "file": "credential emails/linear-login-code.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Your login code for Linear
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Linear\"\n

    Your login code for Linear

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Login to Linear
    \n
    \n

    This link and code will only be valid for the next 5 minutes. If the link does not work, you can use the login verification code directly:

    tt226-5398x\n
    Linear\n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Your login code for Linear
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Linear\"\n

    Your login code for Linear

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Login to Linear
    \n
    \n

    This link and code will only be valid for the next 5 minutes. If the link does not work, you can use the login verification code directly:

    tt226-5398x\n
    Linear\n
    \n
    \n
    \n \n\n", "htmlFile": "credential emails/linear-login-code.html", "id": "credential emails/linear-login-code", - "jsx": "import {\n Body,\n Button,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\ninterface LinearLoginCodeEmailProps {\n validationCode?: string;\n}\n\nconst logo = {\n borderRadius: 21,\n width: 42,\n height: 42\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '560px'\n};\n\nconst heading = {\n fontSize: '24px',\n letterSpacing: '-0.5px',\n lineHeight: '1.3',\n fontWeight: '400',\n color: '#484848',\n padding: '17px 0 0'\n};\n\nconst paragraph = {\n margin: '0 0 15px',\n fontSize: '15px',\n lineHeight: '1.4',\n color: '#3c4149'\n};\n\nconst buttonContainer = {\n padding: '27px 0 27px'\n};\n\nconst reportLink = {\n fontSize: '14px',\n color: '#b4becc'\n};\n\nconst hr = {\n borderColor: '#dfe1e4',\n margin: '42px 0 26px'\n};\n\nconst code = {\n fontFamily: 'monospace',\n fontWeight: '700',\n padding: '1px 4px',\n backgroundColor: '#dfe1e4',\n letterSpacing: '-0.3px',\n fontSize: '21px',\n borderRadius: '4px',\n color: '#3c4149'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n validationCode: 'tt226-5398x'\n} as LinearLoginCodeEmailProps;\n\nexport const templateName = 'Linear Login Code';\n\nexport const Template = ({ validationCode }: LinearLoginCodeEmailProps) => (\n \n \n Your login code for Linear\n \n \n \"Linear\"\n Your login code for Linear\n
    \n \n Login to Linear\n \n
    \n \n This link and code will only be valid for the next 5 minutes. If the link does not work,\n you can use the login verification code directly:\n \n {validationCode}\n
    \n \n Linear\n \n     \n \n \n);\n", + "jsx": "import {\n Body,\n Button,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\ninterface LinearLoginCodeEmailProps {\n validationCode?: string;\n}\n\nconst logo = {\n borderRadius: 21,\n width: 42,\n height: 42\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px',\n width: '560px'\n};\n\nconst heading = {\n fontSize: '24px',\n letterSpacing: '-0.5px',\n lineHeight: '1.3',\n fontWeight: '400',\n color: '#484848',\n padding: '17px 0 0'\n};\n\nconst paragraph = {\n margin: '0 0 15px',\n fontSize: '15px',\n lineHeight: '1.4',\n color: '#3c4149'\n};\n\nconst buttonContainer = {\n padding: '27px 0 27px'\n};\n\nconst reportLink = {\n fontSize: '14px',\n color: '#b4becc'\n};\n\nconst hr = {\n borderColor: '#dfe1e4',\n margin: '42px 0 26px'\n};\n\nconst code = {\n fontFamily: 'monospace',\n fontWeight: '700',\n padding: '1px 4px',\n backgroundColor: '#dfe1e4',\n letterSpacing: '-0.3px',\n fontSize: '21px',\n borderRadius: '4px',\n color: '#3c4149'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n validationCode: 'tt226-5398x'\n} as LinearLoginCodeEmailProps;\n\nexport const templateName = 'Linear Login Code';\n\nexport const Template = ({ validationCode }: LinearLoginCodeEmailProps) => (\n \n \n Your login code for Linear\n \n \n \"Linear\"\n Your login code for Linear\n
    \n \n Login to Linear\n \n
    \n \n This link and code will only be valid for the next 5 minutes. If the link does not work,\n you can use the login verification code directly:\n \n {validationCode}\n
    \n \n Linear\n \n     \n \n \n);\n", "name": "Linear Login Code", "plain": "YOUR LOGIN CODE FOR LINEAR\n\nLogin to Linear https://linear.app\n\nThis link and code will only be valid for the next 5 minutes. If the link does\nnot work, you can use the login verification code directly:\n\ntt226-5398x\n\n--------------------------------------------------------------------------------\n\nLinear https://linear.app", "subject": "Linear Login Code" }, { "file": "credential emails/magic links/notion-magic-link.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Log in with this magic link
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Login

    Click here to log in with this magic link\n

    Or, copy and paste this temporary login code:

    sparo-ndigo-amurt-secan\n

    If you didn't try to login, you can safely ignore this email.

    \n

    Hint: You can set a permanent password in Settings & members → My account.

    \"Notion's\n

    Notion.so, the all-in-one-workspace
    for your notes, tasks, wikis, and databases.

    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Log in with this magic link
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Login

    Click here to log in with this magic link\n

    Or, copy and paste this temporary login code:

    sparo-ndigo-amurt-secan\n

    If you didn't try to login, you can safely ignore this email.

    \n

    Hint: You can set a permanent password in Settings & members → My account.

    \"Notion's\n

    Notion.so, the all-in-one-workspace
    for your notes, tasks, wikis, and databases.

    \n
    \n
    \n
    \n \n\n", "htmlFile": "credential emails/magic links/notion-magic-link.html", "id": "credential emails/magic links/notion-magic-link", - "jsx": "import { Body, Container, Head, Heading, Html, Img, Link, Preview, Text } from 'jsx-email';\n\ninterface NotionMagicLinkEmailProps {\n loginCode?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff'\n};\n\nconst container = {\n paddingLeft: '12px',\n paddingRight: '12px',\n margin: '0 auto'\n};\n\nconst h1 = {\n color: '#333',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '24px',\n fontWeight: 'bold',\n margin: '40px 0',\n padding: '0'\n};\n\nconst link = {\n color: '#2754C5',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '14px',\n textDecoration: 'underline'\n};\n\nconst text = {\n color: '#333',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '14px',\n margin: '24px 0'\n};\n\nconst footer = {\n color: '#898989',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '12px',\n lineHeight: '22px',\n marginTop: '12px',\n marginBottom: '24px'\n};\n\nconst code = {\n display: 'inline-block',\n padding: '16px 4.5%',\n width: '90.5%',\n backgroundColor: '#f4f4f4',\n borderRadius: '5px',\n border: '1px solid #eee',\n color: '#333'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n loginCode: 'sparo-ndigo-amurt-secan'\n} as NotionMagicLinkEmailProps;\n\nexport const templateName = 'Notion Magic Link';\n\nexport const Template = ({ loginCode }: NotionMagicLinkEmailProps) => (\n \n \n Log in with this magic link\n \n \n Login\n \n Click here to log in with this magic link\n \n \n Or, copy and paste this temporary login code:\n \n {loginCode}\n \n If you didn't try to login, you can safely ignore this email.\n \n \n Hint: You can set a permanent password in Settings & members → My account.\n \n \"Notion's\n \n \n Notion.so\n \n , the all-in-one-workspace\n
    \n for your notes, tasks, wikis, and databases.\n     \n     \n \n \n);\n", + "jsx": "import { Body, Container, Head, Heading, Html, Img, Link, Preview, Text } from 'jsx-email';\n\ninterface NotionMagicLinkEmailProps {\n loginCode?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff'\n};\n\nconst container = {\n paddingLeft: '12px',\n paddingRight: '12px',\n margin: '0 auto'\n};\n\nconst h1 = {\n color: '#333',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '24px',\n fontWeight: 'bold',\n margin: '40px 0',\n padding: '0'\n};\n\nconst link = {\n color: '#2754C5',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '14px',\n textDecoration: 'underline'\n};\n\nconst text = {\n color: '#333',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '14px',\n margin: '24px 0'\n};\n\nconst footer = {\n color: '#898989',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\",\n fontSize: '12px',\n lineHeight: '22px',\n marginTop: '12px',\n marginBottom: '24px'\n};\n\nconst code = {\n display: 'inline-block',\n padding: '16px 4.5%',\n width: '90.5%',\n backgroundColor: '#f4f4f4',\n borderRadius: '5px',\n border: '1px solid #eee',\n color: '#333'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n loginCode: 'sparo-ndigo-amurt-secan'\n} as NotionMagicLinkEmailProps;\n\nexport const templateName = 'Notion Magic Link';\n\nexport const Template = ({ loginCode }: NotionMagicLinkEmailProps) => (\n \n \n Log in with this magic link\n \n \n Login\n \n Click here to log in with this magic link\n \n \n Or, copy and paste this temporary login code:\n \n {loginCode}\n \n If you didn't try to login, you can safely ignore this email.\n \n \n Hint: You can set a permanent password in Settings & members → My account.\n \n \"Notion's\n \n \n Notion.so\n \n , the all-in-one-workspace\n
    \n for your notes, tasks, wikis, and databases.\n     \n     \n \n \n);\n", "name": "Notion Magic Link", "plain": "LOGIN\n\nClick here to log in with this magic link https://notion.so\n\nOr, copy and paste this temporary login code:\n\nsparo-ndigo-amurt-secan\n\nIf you didn't try to login, you can safely ignore this email.\n\nHint: You can set a permanent password in Settings & members → My account.\n\nNotion.so https://notion.so, the all-in-one-workspace\nfor your notes, tasks, wikis, and databases.", "subject": "Notion Magic Link" }, { "file": "credential emails/magic links/raycast-magic-link.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Log in with this magic link.
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Raycast\"\n

    🪄 Your magic link

    \n \n \n \n \n \n \n
    \n

    👉 Click here to sign in 👈

    \n

    If you didn't request this, please ignore this email.

    \n
    \n

    Best,
    - Raycast Team

    \n
    \n

    Raycast Technologies Inc.

    \n

    2093 Philadelphia Pike #3222, Claymont, DE 19703

    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Log in with this magic link.
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Raycast\"\n

    🪄 Your magic link

    \n \n \n \n \n \n \n
    \n

    👉 Click here to sign in 👈

    \n

    If you didn't request this, please ignore this email.

    \n
    \n

    Best,
    - Raycast Team

    \n
    \n

    Raycast Technologies Inc.

    \n

    2093 Philadelphia Pike #3222, Claymont, DE 19703

    \n
    \n
    \n
    \n \n\n", "htmlFile": "credential emails/magic links/raycast-magic-link.html", "id": "credential emails/magic links/raycast-magic-link", - "jsx": "import {\n Body,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\ninterface RaycastMagicLinkEmailProps {\n magicLink?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 25px 48px',\n backgroundImage: 'url(\"/assets/raycast-bg.png\")',\n backgroundPosition: 'bottom',\n backgroundRepeat: 'no-repeat, no-repeat'\n};\n\nconst heading = {\n fontSize: '28px',\n fontWeight: 'bold',\n marginTop: '48px'\n};\n\nconst body = {\n margin: '24px 0'\n};\n\nconst paragraph = {\n fontSize: '16px',\n lineHeight: '26px'\n};\n\nconst link = {\n color: '#FF6363'\n};\n\nconst hr = {\n borderColor: '#dddddd',\n marginTop: '48px'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px',\n marginLeft: '4px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n magicLink: 'https://raycast.com'\n} as RaycastMagicLinkEmailProps;\n\nexport const templateName = 'Raycast Magic Link';\n\nexport const Template = ({ magicLink }: RaycastMagicLinkEmailProps) => (\n \n \n Log in with this magic link.\n \n \n \"Raycast\"\n 🪄 Your magic link\n
    \n \n \n 👉 Click here to sign in 👈\n \n \n If you didn't request this, please ignore this email.\n
    \n \n Best,\n
    - Raycast Team\n     \n
    \n \n Raycast Technologies Inc.\n 2093 Philadelphia Pike #3222, Claymont, DE 19703\n     \n \n \n);\n", + "jsx": "import {\n Body,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\ninterface RaycastMagicLinkEmailProps {\n magicLink?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 25px 48px',\n backgroundImage: 'url(\"/assets/raycast-bg.png\")',\n backgroundPosition: 'bottom',\n backgroundRepeat: 'no-repeat, no-repeat'\n};\n\nconst heading = {\n fontSize: '28px',\n fontWeight: 'bold',\n marginTop: '48px'\n};\n\nconst body = {\n margin: '24px 0'\n};\n\nconst paragraph = {\n fontSize: '16px',\n lineHeight: '26px'\n};\n\nconst link = {\n color: '#FF6363'\n};\n\nconst hr = {\n borderColor: '#dddddd',\n marginTop: '48px'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px',\n marginLeft: '4px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n magicLink: 'https://raycast.com'\n} as RaycastMagicLinkEmailProps;\n\nexport const templateName = 'Raycast Magic Link';\n\nexport const Template = ({ magicLink }: RaycastMagicLinkEmailProps) => (\n \n \n Log in with this magic link.\n \n \n \"Raycast\"\n 🪄 Your magic link\n
    \n \n \n 👉 Click here to sign in 👈\n \n \n If you didn't request this, please ignore this email.\n
    \n \n Best,\n
    - Raycast Team\n     \n
    \n \n Raycast Technologies Inc.\n 2093 Philadelphia Pike #3222, Claymont, DE 19703\n     \n \n \n);\n", "name": "Raycast Magic Link", "plain": "🪄 YOUR MAGIC LINK\n\n👉 Click here to sign in 👈 https://raycast.com\n\nIf you didn't request this, please ignore this email.\n\nBest,\n- Raycast Team\n\n--------------------------------------------------------------------------------\n\nRaycast Technologies Inc.\n\n2093 Philadelphia Pike #3222, Claymont, DE 19703", "subject": "Raycast Magic Link" }, { "file": "credential emails/twitch-reset-password.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    You updated the password for your Twitch account
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    \n

    Hi Batman,

    \n

    You updated the password for your Twitch account on Jun 23, 2022, 12:06:00 PM. If this was you, then no further action is required.

    \n

    However if you did NOT perform this password change, please reset your account password immediately.

    \n

    Remember to use a password that is both strong and unique to your Twitch account. To learn more about how to create a strong and unique password, click here.

    \n

    Still have questions? Please contact Twitch Support

    \n

    Thanks,
    Twitch Support Team

    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    © 2022 Twitch, All Rights Reserved
    350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA

    \n \n \n \n \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    You updated the password for your Twitch account
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    \n

    Hi Batman,

    \n

    You updated the password for your Twitch account on Jun 23, 2022, 12:06:00 PM. If this was you, then no further action is required.

    \n

    However if you did NOT perform this password change, please reset your account password immediately.

    \n

    Remember to use a password that is both strong and unique to your Twitch account. To learn more about how to create a strong and unique password, click here.

    \n

    Still have questions? Please contact Twitch Support

    \n

    Thanks,
    Twitch Support Team

    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    © 2022 Twitch, All Rights Reserved
    350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA

    \n \n \n \n \n
    \n
    \n \n\n", "htmlFile": "credential emails/twitch-reset-password.html", "id": "credential emails/twitch-reset-password", - "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface TwitchResetPasswordEmailProps {\n username?: string;\n updatedDate?: Date;\n}\n\nconst fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif';\n\nconst main = {\n backgroundColor: '#efeef1',\n fontFamily\n};\n\nconst paragraph = {\n lineHeight: 1.5,\n fontSize: 14\n};\n\nconst container = {\n width: '580px',\n margin: '30px auto',\n backgroundColor: '#ffffff'\n};\n\nconst footer = {\n width: '580px',\n margin: '0 auto'\n};\n\nconst content = {\n padding: '5px 50px 10px 60px'\n};\n\nconst logo = {\n display: 'flex',\n justifyContent: 'center',\n alingItems: 'center',\n padding: 30\n};\n\nconst sectionsBorders = {\n width: '100%',\n display: 'flex'\n};\n\nconst sectionBorder = {\n borderBottom: '1px solid rgb(238,238,238)',\n width: '249px'\n};\n\nconst sectionCenter = {\n borderBottom: '1px solid rgb(145,71,255)',\n width: '102px'\n};\n\nconst link = {\n textDecoration: 'underline'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n username: 'Batman',\n updatedDate: new Date('June 23, 2022 4:06:00 pm UTC')\n} as TwitchResetPasswordEmailProps;\n\nexport const templateName = 'Twitch Reset Password';\n\nexport const Template = ({ username, updatedDate }: TwitchResetPasswordEmailProps) => {\n const formattedDate = new Intl.DateTimeFormat('en', {\n dateStyle: 'medium',\n timeStyle: 'medium'\n }).format(updatedDate);\n\n return (\n \n \n You updated the password for your Twitch account\n \n \n
    \n \n
    \n
    \n \n \n \n \n \n
    \n
    \n Hi {username},\n \n You updated the password for your Twitch account on {formattedDate}. If this was you,\n then no further action is required.\n \n \n However if you did NOT perform this password change, please{' '}\n \n reset your account password\n {' '}\n immediately.\n \n \n Remember to use a password that is both strong and unique to your Twitch account. To\n learn more about how to create a strong and unique password,{' '}\n \n click here.\n \n \n \n Still have questions? Please contact{' '}\n \n Twitch Support\n \n \n \n Thanks,\n
    \n Twitch Support Team\n     \n
    \n     \n\n
    \n \n \n \n \n \n \n \n \n \n \n © 2022 Twitch, All Rights Reserved
    \n 350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA\n     \n     \n
    \n \n \n );\n};\n", + "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface TwitchResetPasswordEmailProps {\n username?: string;\n updatedDate?: Date;\n}\n\nconst fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif';\n\nconst main = {\n backgroundColor: '#efeef1',\n fontFamily\n};\n\nconst paragraph = {\n lineHeight: 1.5,\n fontSize: 14\n};\n\nconst container = {\n width: '580px',\n margin: '30px auto',\n backgroundColor: '#ffffff'\n};\n\nconst footer = {\n width: '580px',\n margin: '0 auto'\n};\n\nconst content = {\n padding: '5px 50px 10px 60px'\n};\n\nconst logo = {\n display: 'flex',\n justifyContent: 'center',\n alingItems: 'center',\n padding: 30\n};\n\nconst sectionsBorders = {\n width: '100%',\n display: 'flex'\n};\n\nconst sectionBorder = {\n borderBottom: '1px solid rgb(238,238,238)',\n width: '249px'\n};\n\nconst sectionCenter = {\n borderBottom: '1px solid rgb(145,71,255)',\n width: '102px'\n};\n\nconst link = {\n textDecoration: 'underline'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n username: 'Batman',\n updatedDate: new Date('June 23, 2022 4:06:00 pm UTC')\n} as TwitchResetPasswordEmailProps;\n\nexport const templateName = 'Twitch Reset Password';\n\nexport const Template = ({ username, updatedDate }: TwitchResetPasswordEmailProps) => {\n const formattedDate = new Intl.DateTimeFormat('en', {\n dateStyle: 'medium',\n timeStyle: 'medium'\n }).format(updatedDate);\n\n return (\n \n \n You updated the password for your Twitch account\n \n \n
    \n \n
    \n
    \n \n \n \n \n \n
    \n
    \n Hi {username},\n \n You updated the password for your Twitch account on {formattedDate}. If this was you,\n then no further action is required.\n \n \n However if you did NOT perform this password change, please{' '}\n \n reset your account password\n {' '}\n immediately.\n \n \n Remember to use a password that is both strong and unique to your Twitch account. To\n learn more about how to create a strong and unique password,{' '}\n \n click here.\n \n \n \n Still have questions? Please contact{' '}\n \n Twitch Support\n \n \n \n Thanks,\n
    \n Twitch Support Team\n     \n
    \n     \n\n
    \n \n \n \n \n \n \n \n \n \n \n © 2022 Twitch, All Rights Reserved
    \n 350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA\n     \n     \n
    \n \n \n );\n};\n", "name": "Twitch Reset Password", "plain": "Hi Batman,\n\nYou updated the password for your Twitch account on Jun 23, 2022, 12:06:00 PM.\nIf this was you, then no further action is required.\n\nHowever if you did NOT perform this password change, please reset your account\npassword immediately.\n\nRemember to use a password that is both strong and unique to your Twitch\naccount. To learn more about how to create a strong and unique password, click\nhere.\n\nStill have questions? Please contact Twitch Support\n\nThanks,\nTwitch Support Team\n\n© 2022 Twitch, All Rights Reserved\n350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA", "subject": "Twitch Reset Password" }, { "file": "google-play-policy-update.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Google Play developers
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Google\"Google
    \n
    \n \n \n \n \n \n \n
    \n
    \n

    DEVELOPER UPDATE

    \n

    Hello Google Play Developer,

    \n

    We strive to make Google Play a safe and trusted experience for users.

    \n

    We've added clarifications to our Target API Level policy. Because this is a clarification, our enforcement standards and practices for this policy remain the same.

    \n
    \n \n \n \n \n \n \n
    \n

    We’re noting exceptions to the Target API Level policy, which can be found in our updated Help Center article.These exceptions include permanently private apps and apps that target automotive or wearables form factors and are bundled within the same package. Learn more

    \n
    \n \n \n \n \n \n \n
    \n

    We’re also extending the deadline to give you more time to adjust to these changes. Now, apps that target API level 29 or below will start experiencing reduced distribution starting Jan 31, 2023 instead of Nov 1, 2022. If you need more time to update your app, you can request an extension to keep your app discoverable to all users until May 1, 2023.

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Thank you,

    \n

    The Google Play team

    \n
    \n \n \n \n \n \n \n
    \n

    Connect with us

    \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    \n

    © 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA

    \n

    You have received this mandatory email service announcement to update you about important changes to your Google Play Developer account.

    \n
    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Google Play developers
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Google\"Google
    \n
    \n \n \n \n \n \n \n
    \n
    \n

    DEVELOPER UPDATE

    \n

    Hello Google Play Developer,

    \n

    We strive to make Google Play a safe and trusted experience for users.

    \n

    We've added clarifications to our Target API Level policy. Because this is a clarification, our enforcement standards and practices for this policy remain the same.

    \n
    \n \n \n \n \n \n \n
    \n

    We’re noting exceptions to the Target API Level policy, which can be found in our updated Help Center article.These exceptions include permanently private apps and apps that target automotive or wearables form factors and are bundled within the same package. Learn more

    \n
    \n \n \n \n \n \n \n
    \n

    We’re also extending the deadline to give you more time to adjust to these changes. Now, apps that target API level 29 or below will start experiencing reduced distribution starting Jan 31, 2023 instead of Nov 1, 2022. If you need more time to update your app, you can request an extension to keep your app discoverable to all users until May 1, 2023.

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Thank you,

    \n

    The Google Play team

    \n
    \n \n \n \n \n \n \n
    \n

    Connect with us

    \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    \n

    © 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA

    \n

    You have received this mandatory email service announcement to update you about important changes to your Google Play Developer account.

    \n
    \n
    \n
    \n
    \n \n\n", "htmlFile": "google-play-policy-update.html", "id": "google-play-policy-update", - "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst main = {\n backgroundColor: '#dbddde',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst sectionLogo = {\n padding: '0 40px'\n};\n\nconst headerBlue = {\n marginTop: '-1px'\n};\n\nconst container = {\n margin: '30px auto',\n width: '610px',\n backgroundColor: '#fff',\n borderRadius: 5,\n overflow: 'hidden'\n};\n\nconst containerContact = {\n backgroundColor: '#f0fcff',\n width: '90%',\n borderRadius: '5px',\n overflow: 'hidden',\n paddingLeft: '20px'\n};\n\nconst heading = {\n fontSize: '14px',\n lineHeight: '26px',\n fontWeight: '700',\n color: '#004dcf'\n};\n\nconst paragraphContent = {\n padding: '0 40px'\n};\n\nconst paragraphList = {\n paddingLeft: 40\n};\n\nconst paragraph = {\n fontSize: '14px',\n lineHeight: '22px',\n color: '#3c4043'\n};\n\nconst link = {\n ...paragraph,\n color: '#004dcf'\n};\n\nconst hr = {\n borderColor: '#e8eaed',\n margin: '20px 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Google Play Policy Update';\n\nexport const Template = () => (\n \n \n Google Play developers\n \n \n
    \n \n \n \n \n \n \n
    \n\n
    \n
    \n DEVELOPER UPDATE\n Hello Google Play Developer,\n \n We strive to make Google Play a safe and trusted experience for users.\n \n \n We've added clarifications to our{' '}\n \n Target API Level policy\n \n . Because this is a clarification, our enforcement standards and practices for this\n policy remain the same.\n \n
    \n
    \n \n We’re noting exceptions to the{' '}\n \n Target API Level policy\n \n , which can be found in our updated{' '}\n \n Help Center article.\n \n These exceptions include permanently private apps and apps that target automotive or\n wearables form factors and are bundled within the same package.{' '}\n \n Learn more\n \n \n
    \n
    \n \n We’re also extending the deadline to give you more time to adjust to these changes. Now,\n apps that target API level 29 or below will start experiencing reduced distribution\n starting Jan 31, 2023 instead of Nov 1, 2022. If you need more time to update\n your app, you can request an extension to keep your app discoverable to all users until\n May 1, 2023.\n \n
    \n
    \n\n
    \n Thank you,\n The Google Play team\n
    \n\n
    \n \n Connect with us\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n
    \n \n © 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA\n \n \n You have received this mandatory email service announcement to update you about\n important changes to your Google Play Developer account.\n \n
    \n     \n \n \n);\n", + "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst main = {\n backgroundColor: '#dbddde',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst sectionLogo = {\n padding: '0 40px'\n};\n\nconst headerBlue = {\n marginTop: '-1px'\n};\n\nconst container = {\n margin: '30px auto',\n width: '610px',\n backgroundColor: '#fff',\n borderRadius: 5,\n overflow: 'hidden'\n};\n\nconst containerContact = {\n backgroundColor: '#f0fcff',\n width: '90%',\n borderRadius: '5px',\n overflow: 'hidden',\n paddingLeft: '20px'\n};\n\nconst heading = {\n fontSize: '14px',\n lineHeight: '26px',\n fontWeight: '700',\n color: '#004dcf'\n};\n\nconst paragraphContent = {\n padding: '0 40px'\n};\n\nconst paragraphList = {\n paddingLeft: 40\n};\n\nconst paragraph = {\n fontSize: '14px',\n lineHeight: '22px',\n color: '#3c4043'\n};\n\nconst link = {\n ...paragraph,\n color: '#004dcf'\n};\n\nconst hr = {\n borderColor: '#e8eaed',\n margin: '20px 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Google Play Policy Update';\n\nexport const Template = () => (\n \n \n Google Play developers\n \n \n
    \n \n \n \n \n \n \n
    \n\n
    \n
    \n DEVELOPER UPDATE\n Hello Google Play Developer,\n \n We strive to make Google Play a safe and trusted experience for users.\n \n \n We've added clarifications to our{' '}\n \n Target API Level policy\n \n . Because this is a clarification, our enforcement standards and practices for this\n policy remain the same.\n \n
    \n
    \n \n We’re noting exceptions to the{' '}\n \n Target API Level policy\n \n , which can be found in our updated{' '}\n \n Help Center article.\n \n These exceptions include permanently private apps and apps that target automotive or\n wearables form factors and are bundled within the same package.{' '}\n \n Learn more\n \n \n
    \n
    \n \n We’re also extending the deadline to give you more time to adjust to these changes. Now,\n apps that target API level 29 or below will start experiencing reduced distribution\n starting Jan 31, 2023 instead of Nov 1, 2022. If you need more time to update\n your app, you can request an extension to keep your app discoverable to all users until\n May 1, 2023.\n \n
    \n
    \n\n
    \n Thank you,\n The Google Play team\n
    \n\n
    \n \n Connect with us\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n
    \n \n © 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA\n \n \n You have received this mandatory email service announcement to update you about\n important changes to your Google Play Developer account.\n \n
    \n     \n \n \n);\n", "name": "Google Play Policy Update", "plain": "--------------------------------------------------------------------------------\n\nDEVELOPER UPDATE\n\nHello Google Play Developer,\n\nWe strive to make Google Play a safe and trusted experience for users.\n\nWe've added clarifications to our Target API Level policy\nhttps://notifications.google.com. Because this is a clarification, our\nenforcement standards and practices for this policy remain the same.\n\nWe’re noting exceptions to the Target API Level policy\nhttps://notifications.google.com, which can be found in our updated Help Center\narticle. https://notifications.google.comThese exceptions include permanently\nprivate apps and apps that target automotive or wearables form factors and are\nbundled within the same package. Learn more https://notifications.google.com\n\nWe’re also extending the deadline to give you more time to adjust to these\nchanges. Now, apps that target API level 29 or below will start experiencing\nreduced distribution starting Jan 31, 2023 instead of Nov 1, 2022. If you need\nmore time to update your app, you can request an extension to keep your app\ndiscoverable to all users until May 1, 2023.\n\n--------------------------------------------------------------------------------\n\nThank you,\n\nThe Google Play team\n\nConnect with us\n\nhttps://notifications.google.comhttps://notifications.google.comhttps://notifications.google.com\n\n\n\n© 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA\n\nYou have received this mandatory email service announcement to update you about\nimportant changes to your Google Play Developer account.", "subject": "Google Play Policy Update" }, { "file": "nike-receipt.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Get your order summary, estimated delivery date and more
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    Tracking Number

    \n

    1ZV218970300071628

    \n     		Track Package
    \n
    \n
    \n \n \n \n \n \n \n
    \"Nike\"\n

    It's On Its Way.

    \n

    You order's is on its way. Use the link above to track its progress.

    \n

    We´ve also charged your payment method for the cost of your order and will be removing any authorization holds. For payment details, please visit your Orders page on Nike.com or in the Nike app.

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Shipping to: Bruce Wayne

    \n

    2125 Chestnut St, San Francisco, CA 94123

    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \"Brazil\n

    Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey

    \n

    Size L (12–14)

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    Order Number

    \n

    C0106373851

    \n     		\n

    Order Date

    \n

    Sep 22, 2022

    \n
    \n \n \n \n \n \n \n
    Order Status
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Top Picks For You

    \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n \n
    \"Brazil\n

    USWNT 2022/23 Stadium Home

    \n

    Women's Nike Dri-FIT Soccer Jersey

    \n     		\"Brazil\n

    Brazil 2022/23 Stadium Goalkeeper

    \n

    Men's Nike Dri-FIT Short-Sleeve Football Shirt

    \n     		\"Brazil\n

    FFF

    \n

    Women's Soccer Jacket

    \n     		\"Brazil\n

    FFF

    \n

    Women's Nike Pre-Match Football Top

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Get Help

    \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    Shipping StatusShipping & DeliveryReturns & Exchanges
    \n \n \n \n \n \n \n \n
    How to ReturnContact Options
    \n
    \n \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    1-800-806-6453

    \n
    \n     		\n

    4 am - 11 pm PT

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Nike.com

    \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n \n
    MenWomenKidsCustomize
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    Web Version

    \n     		\n

    Privacy Policy

    \n
    \n

    Please contact us if you have any questions. (If you reply to this email, we won't be able to see it.)

    \n \n \n \n \n
    \n

    © 2022 Nike, Inc. All Rights Reserved.

    \n \n \n \n \n
    \n

    NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.

    \n \n \n \n \n
    \n
    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Get your order summary, estimated delivery date and more
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    Tracking Number

    \n

    1ZV218970300071628

    \n     		Track Package
    \n
    \n
    \n \n \n \n \n \n \n
    \"Nike\"\n

    It's On Its Way.

    \n

    You order's is on its way. Use the link above to track its progress.

    \n

    We´ve also charged your payment method for the cost of your order and will be removing any authorization holds. For payment details, please visit your Orders page on Nike.com or in the Nike app.

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Shipping to: Bruce Wayne

    \n

    2125 Chestnut St, San Francisco, CA 94123

    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \"Brazil\n

    Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey

    \n

    Size L (12–14)

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    Order Number

    \n

    C0106373851

    \n     		\n

    Order Date

    \n

    Sep 22, 2022

    \n
    \n \n \n \n \n \n \n
    Order Status
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Top Picks For You

    \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n \n
    \"Brazil\n

    USWNT 2022/23 Stadium Home

    \n

    Women's Nike Dri-FIT Soccer Jersey

    \n     		\"Brazil\n

    Brazil 2022/23 Stadium Goalkeeper

    \n

    Men's Nike Dri-FIT Short-Sleeve Football Shirt

    \n     		\"Brazil\n

    FFF

    \n

    Women's Soccer Jacket

    \n     		\"Brazil\n

    FFF

    \n

    Women's Nike Pre-Match Football Top

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Get Help

    \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    Shipping StatusShipping & DeliveryReturns & Exchanges
    \n \n \n \n \n \n \n \n
    How to ReturnContact Options
    \n
    \n \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    1-800-806-6453

    \n
    \n     		\n

    4 am - 11 pm PT

    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Nike.com

    \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n \n
    MenWomenKidsCustomize
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    Web Version

    \n     		\n

    Privacy Policy

    \n
    \n

    Please contact us if you have any questions. (If you reply to this email, we won't be able to see it.)

    \n \n \n \n \n
    \n

    © 2022 Nike, Inc. All Rights Reserved.

    \n \n \n \n \n
    \n

    NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.

    \n \n \n \n \n
    \n
    \n
    \n
    \n
    \n \n\n", "htmlFile": "nike-receipt.html", "id": "nike-receipt", - "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst paddingX = {\n paddingLeft: '40px',\n paddingRight: '40px'\n};\n\nconst paddingY = {\n paddingTop: '22px',\n paddingBottom: '22px'\n};\n\nconst paragraph = {\n margin: '0',\n lineHeight: '2'\n};\n\nconst global = {\n paddingX,\n paddingY,\n defaultPadding: {\n ...paddingX,\n ...paddingY\n },\n paragraphWithBold: { ...paragraph, fontWeight: 'bold' },\n heading: {\n fontSize: '32px',\n lineHeight: '1.3',\n fontWeight: '700',\n textAlign: 'center',\n letterSpacing: '-1px'\n } as React.CSSProperties,\n text: {\n ...paragraph,\n color: '#747474',\n fontWeight: '500'\n },\n button: {\n border: '1px solid #929292',\n fontSize: '16px',\n textDecoration: 'none',\n padding: '10px 0px',\n width: '220px',\n display: 'block',\n textAlign: 'center',\n fontWeight: 500,\n color: '#000'\n } as React.CSSProperties,\n hr: {\n borderColor: '#E5E5E5',\n margin: '0'\n }\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '10px auto',\n width: '600px',\n border: '1px solid #E5E5E5'\n};\n\nconst track = {\n container: {\n padding: '22px 40px',\n backgroundColor: '#F7F7F7'\n },\n number: {\n margin: '12px 0 0 0',\n fontWeight: 500,\n lineHeight: '1.4',\n color: '#6F6F6F'\n }\n};\n\nconst message = {\n padding: '40px 74px',\n textAlign: 'center'\n} as React.CSSProperties;\n\nconst adressTitle = {\n ...paragraph,\n fontSize: '15px',\n fontWeight: 'bold'\n};\n\nconst recomendationsText = {\n margin: '0',\n fontSize: '15px',\n lineHeight: '1',\n paddingLeft: '10px',\n paddingRight: '10px'\n};\n\nconst recomendations = {\n container: {\n padding: '20px 0'\n },\n product: {\n verticalAlign: 'top',\n textAlign: 'left' as const,\n paddingLeft: '2px',\n paddingRight: '2px'\n },\n title: { ...recomendationsText, paddingTop: '12px', fontWeight: '500' },\n text: {\n ...recomendationsText,\n paddingTop: '4px',\n color: '#747474'\n }\n};\n\nconst menu = {\n container: {\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '20px',\n backgroundColor: '#F7F7F7'\n },\n content: {\n ...paddingY,\n paddingLeft: '20px',\n paddingRight: '20px'\n },\n title: {\n paddingLeft: '20px',\n paddingRight: '20px',\n fontWeight: 'bold'\n },\n text: {\n fontSize: '13.5px',\n marginTop: 0,\n fontWeight: 500,\n color: '#000'\n },\n tel: {\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '32px',\n paddingBottom: '22px'\n }\n};\n\nconst categories = {\n container: {\n width: '370px',\n margin: 'auto',\n paddingTop: '12px'\n },\n text: {\n fontWeight: '500',\n color: '#000'\n }\n};\n\nconst footer = {\n policy: {\n width: '166px',\n margin: 'auto'\n },\n text: {\n margin: '0',\n color: '#AFAFAF',\n fontSize: '13px',\n textAlign: 'center'\n } as React.CSSProperties\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Nike Receipt';\n\nexport const Template = () => (\n \n \n Get your order summary, estimated delivery date and more\n \n \n
    \n \n \n Tracking Number\n 1ZV218970300071628\n \n \n Track Package\n \n \n
    \n
    \n
    \n \n It's On Its Way.\n \n You order's is on its way. Use the link above to track its progress.\n \n \n We´ve also charged your payment method for the cost of your order and will be removing\n any authorization holds. For payment details, please visit your Orders page on Nike.com\n or in the Nike app.\n \n
    \n
    \n
    \n Shipping to: Bruce Wayne\n \n 2125 Chestnut St, San Francisco, CA 94123\n \n
    \n
    \n
    \n \n \n \n \n \n \n Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey\n \n Size L (12–14)\n \n \n
    \n
    \n
    \n \n \n Order Number\n C0106373851\n \n \n Order Date\n Sep 22, 2022\n \n \n \n \n Order Status\n \n \n
    \n
    \n
    \n \n Top Picks For You\n \n \n \n \n USWNT 2022/23 Stadium Home\n Women's Nike Dri-FIT Soccer Jersey\n \n \n \n Brazil 2022/23 Stadium Goalkeeper\n \n Men's Nike Dri-FIT Short-Sleeve Football Shirt\n \n \n \n \n FFF\n Women's Soccer Jacket\n \n \n \n FFF\n Women's Nike Pre-Match Football Top\n \n \n
    \n
    \n
    \n \n Get Help\n \n \n \n \n Shipping Status\n \n \n \n \n Shipping & Delivery\n \n \n \n \n Returns & Exchanges\n \n \n \n \n \n \n How to Return\n \n \n \n \n Contact Options\n \n \n \n
    \n \n \n \n \n \n \n \n 1-800-806-6453\n \n \n \n \n \n 4 am - 11 pm PT\n \n \n \n
    \n
    \n
    \n \n Nike.com\n \n \n \n \n Men\n \n \n \n \n Women\n \n \n \n \n Kids\n \n \n \n \n Customize\n \n \n \n
    \n
    \n
    \n \n \n Web Version\n \n \n Privacy Policy\n \n \n \n \n Please contact us if you have any questions. (If you reply to this email, we won't be\n able to see it.)\n \n \n \n © 2022 Nike, Inc. All Rights Reserved.\n \n \n \n NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.\n \n \n
    \n     \n \n \n);\n", + "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\nconst paddingX = {\n paddingLeft: '40px',\n paddingRight: '40px'\n};\n\nconst paddingY = {\n paddingTop: '22px',\n paddingBottom: '22px'\n};\n\nconst paragraph = {\n margin: '0',\n lineHeight: '2'\n};\n\nconst global = {\n paddingX,\n paddingY,\n defaultPadding: {\n ...paddingX,\n ...paddingY\n },\n paragraphWithBold: { ...paragraph, fontWeight: 'bold' },\n heading: {\n fontSize: '32px',\n lineHeight: '1.3',\n fontWeight: '700',\n textAlign: 'center',\n letterSpacing: '-1px'\n } as React.CSSProperties,\n text: {\n ...paragraph,\n color: '#747474',\n fontWeight: '500'\n },\n button: {\n border: '1px solid #929292',\n fontSize: '16px',\n textDecoration: 'none',\n padding: '10px 0px',\n width: '220px',\n display: 'block',\n textAlign: 'center',\n fontWeight: 500,\n color: '#000'\n } as React.CSSProperties,\n hr: {\n borderColor: '#E5E5E5',\n margin: '0'\n }\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '10px auto',\n width: '600px',\n border: '1px solid #E5E5E5'\n};\n\nconst track = {\n container: {\n padding: '22px 40px',\n backgroundColor: '#F7F7F7'\n },\n number: {\n margin: '12px 0 0 0',\n fontWeight: 500,\n lineHeight: '1.4',\n color: '#6F6F6F'\n }\n};\n\nconst message = {\n padding: '40px 74px',\n textAlign: 'center'\n} as React.CSSProperties;\n\nconst adressTitle = {\n ...paragraph,\n fontSize: '15px',\n fontWeight: 'bold'\n};\n\nconst recomendationsText = {\n margin: '0',\n fontSize: '15px',\n lineHeight: '1',\n paddingLeft: '10px',\n paddingRight: '10px'\n};\n\nconst recomendations = {\n container: {\n padding: '20px 0'\n },\n product: {\n verticalAlign: 'top',\n textAlign: 'left' as const,\n paddingLeft: '2px',\n paddingRight: '2px'\n },\n title: { ...recomendationsText, paddingTop: '12px', fontWeight: '500' },\n text: {\n ...recomendationsText,\n paddingTop: '4px',\n color: '#747474'\n }\n};\n\nconst menu = {\n container: {\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '20px',\n backgroundColor: '#F7F7F7'\n },\n content: {\n ...paddingY,\n paddingLeft: '20px',\n paddingRight: '20px'\n },\n title: {\n paddingLeft: '20px',\n paddingRight: '20px',\n fontWeight: 'bold'\n },\n text: {\n fontSize: '13.5px',\n marginTop: 0,\n fontWeight: 500,\n color: '#000'\n },\n tel: {\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '32px',\n paddingBottom: '22px'\n }\n};\n\nconst categories = {\n container: {\n width: '370px',\n margin: 'auto',\n paddingTop: '12px'\n },\n text: {\n fontWeight: '500',\n color: '#000'\n }\n};\n\nconst footer = {\n policy: {\n width: '166px',\n margin: 'auto'\n },\n text: {\n margin: '0',\n color: '#AFAFAF',\n fontSize: '13px',\n textAlign: 'center'\n } as React.CSSProperties\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Nike Receipt';\n\nexport const Template = () => (\n \n \n Get your order summary, estimated delivery date and more\n \n \n
    \n \n \n Tracking Number\n 1ZV218970300071628\n \n \n Track Package\n \n \n
    \n
    \n
    \n \n It's On Its Way.\n \n You order's is on its way. Use the link above to track its progress.\n \n \n We´ve also charged your payment method for the cost of your order and will be removing\n any authorization holds. For payment details, please visit your Orders page on Nike.com\n or in the Nike app.\n \n
    \n
    \n
    \n Shipping to: Bruce Wayne\n \n 2125 Chestnut St, San Francisco, CA 94123\n \n
    \n
    \n
    \n \n \n \n \n \n \n Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey\n \n Size L (12–14)\n \n \n
    \n
    \n
    \n \n \n Order Number\n C0106373851\n \n \n Order Date\n Sep 22, 2022\n \n \n \n \n Order Status\n \n \n
    \n
    \n
    \n \n Top Picks For You\n \n \n \n \n USWNT 2022/23 Stadium Home\n Women's Nike Dri-FIT Soccer Jersey\n \n \n \n Brazil 2022/23 Stadium Goalkeeper\n \n Men's Nike Dri-FIT Short-Sleeve Football Shirt\n \n \n \n \n FFF\n Women's Soccer Jacket\n \n \n \n FFF\n Women's Nike Pre-Match Football Top\n \n \n
    \n
    \n
    \n \n Get Help\n \n \n \n \n Shipping Status\n \n \n \n \n Shipping & Delivery\n \n \n \n \n Returns & Exchanges\n \n \n \n \n \n \n How to Return\n \n \n \n \n Contact Options\n \n \n \n
    \n \n \n \n \n \n \n \n 1-800-806-6453\n \n \n \n \n \n 4 am - 11 pm PT\n \n \n \n
    \n
    \n
    \n \n Nike.com\n \n \n \n \n Men\n \n \n \n \n Women\n \n \n \n \n Kids\n \n \n \n \n Customize\n \n \n \n
    \n
    \n
    \n \n \n Web Version\n \n \n Privacy Policy\n \n \n \n \n Please contact us if you have any questions. (If you reply to this email, we won't be\n able to see it.)\n \n \n \n © 2022 Nike, Inc. All Rights Reserved.\n \n \n \n NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.\n \n \n
    \n     \n \n \n);\n", "name": "Nike Receipt", "plain": "Tracking Number\n\n1ZV218970300071628\n\nTrack Package\n\n--------------------------------------------------------------------------------\n\n\nIT'S ON ITS WAY.\n\nYou order's is on its way. Use the link above to track its progress.\n\nWe´ve also charged your payment method for the cost of your order and will be\nremoving any authorization holds. For payment details, please visit your Orders\npage on Nike.com or in the Nike app.\n\n--------------------------------------------------------------------------------\n\nShipping to: Bruce Wayne\n\n2125 Chestnut St, San Francisco, CA 94123\n\n--------------------------------------------------------------------------------\n\nBrazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey\n\nSize L (12–14)\n\n--------------------------------------------------------------------------------\n\nOrder Number\n\nC0106373851\n\nOrder Date\n\nSep 22, 2022\n\nOrder Status\n\n--------------------------------------------------------------------------------\n\nTop Picks For You\n\nUSWNT 2022/23 Stadium Home\n\nWomen's Nike Dri-FIT Soccer Jersey\n\nBrazil 2022/23 Stadium Goalkeeper\n\nMen's Nike Dri-FIT Short-Sleeve Football Shirt\n\nFFF\n\nWomen's Soccer Jacket\n\nFFF\n\nWomen's Nike Pre-Match Football Top\n\n--------------------------------------------------------------------------------\n\nGet Help\n\nShipping Status /Shipping & Delivery /Returns & Exchanges /\n\nHow to Return /Contact Options /\n\n--------------------------------------------------------------------------------\n\n1-800-806-6453\n\n4 am - 11 pm PT\n\n--------------------------------------------------------------------------------\n\nNike.com\n\nMen /Women /Kids /Customize /\n\n--------------------------------------------------------------------------------\n\nWeb Version\n\nPrivacy Policy\n\nPlease contact us if you have any questions. (If you reply to this email, we\nwon't be able to see it.)\n\n© 2022 Nike, Inc. All Rights Reserved.\n\nNIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.", "subject": "Nike Receipt" }, { "file": "plaid-verify-identity.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    \n
    \n \n \n \n \n \n \n
    \"Plaid\"\n

    Verify Your Identity

    \n

    Enter the following code to finish linking Venmo.

    \n \n \n \n \n \n \n
    \n

    144833

    \n
    \n

    Not expecting this email?

    \n

    Contact login@plaid.com if you did not request this code.

    \n
    \n
    \n
    \n

    Securely powered by Plaid.

    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    \n
    \n \n \n \n \n \n \n
    \"Plaid\"\n

    Verify Your Identity

    \n

    Enter the following code to finish linking Venmo.

    \n \n \n \n \n \n \n
    \n

    144833

    \n
    \n

    Not expecting this email?

    \n

    Contact login@plaid.com if you did not request this code.

    \n
    \n
    \n
    \n

    Securely powered by Plaid.

    \n \n\n", "htmlFile": "plaid-verify-identity.html", "id": "plaid-verify-identity", - "jsx": "import { Body, Container, Head, Heading, Html, Img, Link, Section, Text } from 'jsx-email';\n\ninterface PlaidVerifyIdentityEmailProps {\n validationCode?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n border: '1px solid #eee',\n borderRadius: '5px',\n boxShadow: '0 5px 10px rgba(20,50,70,.2)',\n marginTop: '20px',\n width: '360px',\n margin: '0 auto',\n padding: '68px 0 130px'\n};\n\nconst logo = {\n margin: '0 auto'\n};\n\nconst tertiary = {\n color: '#0a85ea',\n fontSize: '11px',\n fontWeight: 700,\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n height: '16px',\n letterSpacing: '0',\n lineHeight: '16px',\n margin: '16px 8px 8px 8px',\n textTransform: 'uppercase' as const,\n textAlign: 'center' as const\n};\n\nconst secondary = {\n color: '#000',\n display: 'inline-block',\n fontFamily: 'HelveticaNeue-Medium,Helvetica,Arial,sans-serif',\n fontSize: '20px',\n fontWeight: 500,\n lineHeight: '24px',\n marginBottom: '0',\n marginTop: '0',\n textAlign: 'center' as const\n};\n\nconst codeContainer = {\n background: 'rgba(0,0,0,.05)',\n borderRadius: '4px',\n margin: '16px auto 14px',\n verticalAlign: 'middle',\n width: '280px'\n};\n\nconst code = {\n color: '#000',\n display: 'inline-block',\n fontFamily: 'HelveticaNeue-Bold',\n fontSize: '32px',\n fontWeight: 700,\n letterSpacing: '6px',\n lineHeight: '40px',\n paddingBottom: '8px',\n paddingTop: '8px',\n margin: '0 auto',\n width: '100%',\n textAlign: 'center' as const\n};\n\nconst paragraph = {\n color: '#444',\n fontSize: '15px',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n letterSpacing: '0',\n lineHeight: '23px',\n padding: '0 40px',\n margin: '0',\n textAlign: 'center' as const\n};\n\nconst link = {\n color: '#444',\n textDecoration: 'underline'\n};\n\nconst footer = {\n color: '#000',\n fontSize: '12px',\n fontWeight: 800,\n letterSpacing: '0',\n lineHeight: '23px',\n margin: '0',\n marginTop: '20px',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n textAlign: 'center' as const,\n textTransform: 'uppercase' as const\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n validationCode: '144833'\n} as PlaidVerifyIdentityEmailProps;\n\nexport const templateName = 'Plaid Verify Identity';\n\nexport const Template = ({ validationCode }: PlaidVerifyIdentityEmailProps) => (\n \n \n \n \n \"Plaid\"\n Verify Your Identity\n Enter the following code to finish linking Venmo.\n
    \n {validationCode}\n
    \n Not expecting this email?\n \n Contact{' '}\n \n login@plaid.com\n {' '}\n if you did not request this code.\n \n     \n Securely powered by Plaid.\n \n \n);\n", + "jsx": "import { Body, Container, Head, Heading, Html, Img, Link, Section, Text } from 'jsx-email';\n\ninterface PlaidVerifyIdentityEmailProps {\n validationCode?: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n border: '1px solid #eee',\n borderRadius: '5px',\n boxShadow: '0 5px 10px rgba(20,50,70,.2)',\n marginTop: '20px',\n width: '360px',\n margin: '0 auto',\n padding: '68px 0 130px'\n};\n\nconst logo = {\n margin: '0 auto'\n};\n\nconst tertiary = {\n color: '#0a85ea',\n fontSize: '11px',\n fontWeight: 700,\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n height: '16px',\n letterSpacing: '0',\n lineHeight: '16px',\n margin: '16px 8px 8px 8px',\n textTransform: 'uppercase' as const,\n textAlign: 'center' as const\n};\n\nconst secondary = {\n color: '#000',\n display: 'inline-block',\n fontFamily: 'HelveticaNeue-Medium,Helvetica,Arial,sans-serif',\n fontSize: '20px',\n fontWeight: 500,\n lineHeight: '24px',\n marginBottom: '0',\n marginTop: '0',\n textAlign: 'center' as const\n};\n\nconst codeContainer = {\n background: 'rgba(0,0,0,.05)',\n borderRadius: '4px',\n margin: '16px auto 14px',\n verticalAlign: 'middle',\n width: '280px'\n};\n\nconst code = {\n color: '#000',\n display: 'inline-block',\n fontFamily: 'HelveticaNeue-Bold',\n fontSize: '32px',\n fontWeight: 700,\n letterSpacing: '6px',\n lineHeight: '40px',\n paddingBottom: '8px',\n paddingTop: '8px',\n margin: '0 auto',\n width: '100%',\n textAlign: 'center' as const\n};\n\nconst paragraph = {\n color: '#444',\n fontSize: '15px',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n letterSpacing: '0',\n lineHeight: '23px',\n padding: '0 40px',\n margin: '0',\n textAlign: 'center' as const\n};\n\nconst link = {\n color: '#444',\n textDecoration: 'underline'\n};\n\nconst footer = {\n color: '#000',\n fontSize: '12px',\n fontWeight: 800,\n letterSpacing: '0',\n lineHeight: '23px',\n margin: '0',\n marginTop: '20px',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',\n textAlign: 'center' as const,\n textTransform: 'uppercase' as const\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n validationCode: '144833'\n} as PlaidVerifyIdentityEmailProps;\n\nexport const templateName = 'Plaid Verify Identity';\n\nexport const Template = ({ validationCode }: PlaidVerifyIdentityEmailProps) => (\n \n \n \n \n \"Plaid\"\n Verify Your Identity\n Enter the following code to finish linking Venmo.\n
    \n {validationCode}\n
    \n Not expecting this email?\n \n Contact{' '}\n \n login@plaid.com\n {' '}\n if you did not request this code.\n \n     \n Securely powered by Plaid.\n \n \n);\n", "name": "Plaid Verify Identity", "plain": "Verify Your Identity\n\n\nENTER THE FOLLOWING CODE TO FINISH LINKING VENMO.\n\n144833\n\nNot expecting this email?\n\nContact login@plaid.com login@plaid.com if you did not request this code.\n\nSecurely powered by Plaid.", "subject": "Plaid Verify Identity" }, { "file": "slack-confirm.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Confirm your email address
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Slack\"
    \n

    Confirm your email address

    \n

    Your confirmation code is below - enter it in your open browser window and we'll help you get signed in.

    \n \n \n \n \n \n \n
    \n

    DJZ-TLX

    \n
    \n

    If you didn't request this email, there's nothing to worry about - you can safely ignore it.

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \"Slack\"\n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \"Slack\"\"Slack\"\"Slack\"
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    Our blog   |   Policies   |   Help center   |   Slack Community\n

    ©2022 Slack Technologies, LLC, a Salesforce company.
    500 Howard Street, San Francisco, CA 94105, USA

    All rights reserved.

    \n
    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Confirm your email address
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Slack\"
    \n

    Confirm your email address

    \n

    Your confirmation code is below - enter it in your open browser window and we'll help you get signed in.

    \n \n \n \n \n \n \n
    \n

    DJZ-TLX

    \n
    \n

    If you didn't request this email, there's nothing to worry about - you can safely ignore it.

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \"Slack\"\n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \"Slack\"\"Slack\"\"Slack\"
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    Our blog   |   Policies   |   Help center   |   Slack Community\n

    ©2022 Slack Technologies, LLC, a Salesforce company.
    500 Howard Street, San Francisco, CA 94105, USA

    All rights reserved.

    \n
    \n
    \n
    \n
    \n \n\n", "htmlFile": "slack-confirm.html", "id": "slack-confirm", - "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Heading,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface SlackConfirmEmailProps {\n validationCode?: string;\n}\n\nconst footerText = {\n fontSize: '12px',\n color: '#b7b7b7',\n lineHeight: '15px',\n textAlign: 'left' as const,\n marginBottom: '50px'\n};\n\nconst footerLink = {\n color: '#b7b7b7',\n textDecoration: 'underline'\n};\n\nconst footerLogos = {\n marginBottom: '32px',\n paddingLeft: '8px',\n paddingRight: '8px',\n width: '100%'\n};\n\nconst socialMediaIcon = {\n display: 'inline',\n marginLeft: '32px'\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n margin: '0 auto',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\"\n};\n\nconst container = {\n maxWidth: '600px',\n margin: '0 auto'\n};\n\nconst logoContainer = {\n marginTop: '32px'\n};\n\nconst h1 = {\n color: '#1d1c1d',\n fontSize: '36px',\n fontWeight: '700',\n margin: '30px 0',\n padding: '0',\n lineHeight: '42px'\n};\n\nconst heroText = {\n fontSize: '20px',\n lineHeight: '28px',\n marginBottom: '30px'\n};\n\nconst codeBox = {\n background: 'rgb(245, 244, 245)',\n borderRadius: '4px',\n marginRight: '50px',\n marginBottom: '30px',\n padding: '43px 23px'\n};\n\nconst confirmationCodeText = {\n fontSize: '30px',\n textAlign: 'center' as const,\n verticalAlign: 'middle'\n};\n\nconst text = {\n color: '#000',\n fontSize: '14px',\n lineHeight: '24px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n validationCode: 'DJZ-TLX'\n} as SlackConfirmEmailProps;\n\nexport const templateName = 'Slack Confirm';\n\nexport const Template = ({ validationCode }: SlackConfirmEmailProps) => (\n \n \n Confirm your email address\n \n \n
    \n \"Slack\"\n
    \n Confirm your email address\n \n Your confirmation code is below - enter it in your open browser window and we'll help you\n get signed in.\n \n\n
    \n {validationCode}\n
    \n\n \n If you didn't request this email, there's nothing to worry about - you can safely ignore\n it.\n \n\n
    \n \n \n \"Slack\"\n \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n     \n     \n
    \n\n
    \n \n Our blog\n \n    |   \n \n Policies\n \n    |   \n \n Help center\n \n    |   \n \n Slack Community\n \n \n ©2022 Slack Technologies, LLC, a Salesforce company.
    \n 500 Howard Street, San Francisco, CA 94105, USA
    \n
    \n All rights reserved.\n     \n
    \n     \n \n \n);\n", + "jsx": "import {\n Body,\n Container,\n Column,\n Head,\n Heading,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface SlackConfirmEmailProps {\n validationCode?: string;\n}\n\nconst footerText = {\n fontSize: '12px',\n color: '#b7b7b7',\n lineHeight: '15px',\n textAlign: 'left' as const,\n marginBottom: '50px'\n};\n\nconst footerLink = {\n color: '#b7b7b7',\n textDecoration: 'underline'\n};\n\nconst footerLogos = {\n marginBottom: '32px',\n paddingLeft: '8px',\n paddingRight: '8px',\n width: '100%'\n};\n\nconst socialMediaIcon = {\n display: 'inline',\n marginLeft: '32px'\n};\n\nconst main = {\n backgroundColor: '#ffffff',\n margin: '0 auto',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif\"\n};\n\nconst container = {\n maxWidth: '600px',\n margin: '0 auto'\n};\n\nconst logoContainer = {\n marginTop: '32px'\n};\n\nconst h1 = {\n color: '#1d1c1d',\n fontSize: '36px',\n fontWeight: '700',\n margin: '30px 0',\n padding: '0',\n lineHeight: '42px'\n};\n\nconst heroText = {\n fontSize: '20px',\n lineHeight: '28px',\n marginBottom: '30px'\n};\n\nconst codeBox = {\n background: 'rgb(245, 244, 245)',\n borderRadius: '4px',\n marginRight: '50px',\n marginBottom: '30px',\n padding: '43px 23px'\n};\n\nconst confirmationCodeText = {\n fontSize: '30px',\n textAlign: 'center' as const,\n verticalAlign: 'middle'\n};\n\nconst text = {\n color: '#000',\n fontSize: '14px',\n lineHeight: '24px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n validationCode: 'DJZ-TLX'\n} as SlackConfirmEmailProps;\n\nexport const templateName = 'Slack Confirm';\n\nexport const Template = ({ validationCode }: SlackConfirmEmailProps) => (\n \n \n Confirm your email address\n \n \n
    \n \"Slack\"\n
    \n Confirm your email address\n \n Your confirmation code is below - enter it in your open browser window and we'll help you\n get signed in.\n \n\n
    \n {validationCode}\n
    \n\n \n If you didn't request this email, there's nothing to worry about - you can safely ignore\n it.\n \n\n
    \n \n \n \"Slack\"\n \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n     \n     \n
    \n\n
    \n \n Our blog\n \n    |   \n \n Policies\n \n    |   \n \n Help center\n \n    |   \n \n Slack Community\n \n \n ©2022 Slack Technologies, LLC, a Salesforce company.
    \n 500 Howard Street, San Francisco, CA 94105, USA
    \n
    \n All rights reserved.\n     \n
    \n     \n \n \n);\n", "name": "Slack Confirm", "plain": "CONFIRM YOUR EMAIL ADDRESS\n\nYour confirmation code is below - enter it in your open browser window and we'll\nhelp you get signed in.\n\nDJZ-TLX\n\nIf you didn't request this email, there's nothing to worry about - you can\nsafely ignore it.\n\n///\n\nOur blog https://slackhq.com   |   Policies https://slack.com/legal   |   Help\ncenter https://slack.com/help   |   Slack Community https://slack.com/community\n\n©2022 Slack Technologies, LLC, a Salesforce company.\n500 Howard Street, San Francisco, CA 94105, USA\n\nAll rights reserved.", "subject": "Slack Confirm" }, { "file": "stack-overflow-tips.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Stack overflow tips for searching
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    Find what you want, faster

    \n

    Tips and tricks for searching on Stack Overflow

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Searching for solutions

    \n

    With more than 18 million questions, it's possible that someone has already provided a solution to the problem you're facing.

    \n
    \n

    Use the search bar at the top of the page to find what you need

    \n

    Here are a few simple search tips to get you started:

    \n
      \n
    • \n

      To find a specific phrase, enter it in quotes: \"local storage\"

      \n
      • \n
    • \n

      To search within specific tag(s), enter them in square brackets: [javascript]

      \n
      • \n
    • \n

      Combine them to get even more precise results - [javascript] \"local storage\" searches for the phrase “local storage” in questions that have the [javascript] tag

      \n
      • \n
    \n

    The more information you can put in the search bar, the more likely you will be to either find the answer you need or feel confident that no one else has asked the question before.

    \n
    \n

    Take a break and read about the worst coder in the world

    \n \n \n \n \n \n \n
    I need a break
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    You're receiving this email because your Stack Overflow activity triggered this tip or reminder.

    Unsubscribe from emails like this Edit email settings Contact usPrivacy\n
    \n

    Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038

    \n

    <3

    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Stack overflow tips for searching
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    \n

    Find what you want, faster

    \n

    Tips and tricks for searching on Stack Overflow

    \n
    \n
    \n \n \n \n \n \n \n
    \n

    Searching for solutions

    \n

    With more than 18 million questions, it's possible that someone has already provided a solution to the problem you're facing.

    \n
    \n

    Use the search bar at the top of the page to find what you need

    \n

    Here are a few simple search tips to get you started:

    \n
      \n
    • \n

      To find a specific phrase, enter it in quotes: \"local storage\"

      \n
      • \n
    • \n

      To search within specific tag(s), enter them in square brackets: [javascript]

      \n
      • \n
    • \n

      Combine them to get even more precise results - [javascript] \"local storage\" searches for the phrase “local storage” in questions that have the [javascript] tag

      \n
      • \n
    \n

    The more information you can put in the search bar, the more likely you will be to either find the answer you need or feel confident that no one else has asked the question before.

    \n
    \n

    Take a break and read about the worst coder in the world

    \n \n \n \n \n \n \n
    I need a break
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    You're receiving this email because your Stack Overflow activity triggered this tip or reminder.

    Unsubscribe from emails like this Edit email settings Contact usPrivacy\n
    \n

    Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038

    \n

    <3

    \n
    \n \n\n", "htmlFile": "stack-overflow-tips.html", "id": "stack-overflow-tips", - "jsx": "import {\n Body,\n Column,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text,\n Row\n} from 'jsx-email';\n\ninterface StackOverflowTipsEmailProps {\n tips?: { id: number; description: string }[];\n}\n\nconst main = {\n backgroundColor: '#f3f3f5',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif'\n};\n\nconst headerContent = { padding: '20px 30px 15px' };\n\nconst headerContentTitle = {\n color: '#fff',\n fontSize: '27px',\n fontWeight: 'bold',\n lineHeight: '27px'\n};\n\nconst headerContentSubtitle = {\n color: '#fff',\n fontSize: '17px'\n};\n\nconst headerImageContainer = {\n padding: '30px 10px'\n};\n\nconst title = {\n margin: '0 0 15px',\n fontWeight: 'bold',\n fontSize: '21px',\n lineHeight: '21px',\n color: '#0c0d0e'\n};\n\nconst paragraph = {\n fontSize: '15px',\n lineHeight: '21px',\n color: '#3c3f44'\n};\n\nconst divider = {\n margin: '30px 0'\n};\n\nconst container = {\n maxWidth: '680px',\n width: '100%',\n margin: '0 auto',\n backgroundColor: '#ffffff'\n};\n\nconst footer = {\n width: '680px',\n margin: '32px auto 0 auto',\n padding: '0 30px'\n};\n\nconst content = {\n padding: '30px 30px 40px 30px'\n};\n\nconst logo = {\n display: 'flex',\n background: '#f3f3f5',\n padding: '20px 30px'\n};\n\nconst header = {\n borderRadius: '5px 5px 0 0',\n display: 'flex',\n flexDireciont: 'column',\n backgroundColor: '#2b2d6e'\n};\n\nconst buttonContainer = {\n marginTop: '24px',\n display: 'block'\n};\n\nconst button = {\n backgroundColor: '#0095ff',\n border: '1px solid #0077cc',\n fontSize: '17px',\n lineHeight: '17px',\n padding: '13px 17px',\n borderRadius: '4px',\n maxWidth: '120px',\n color: '#fff'\n};\n\nconst footerDivider = {\n ...divider,\n borderColor: '#d6d8db'\n};\n\nconst footerText = {\n fontSize: '12px',\n lineHeight: '15px',\n color: '#9199a1',\n margin: '0'\n};\n\nconst footerLink = {\n display: 'inline-block',\n color: '#9199a1',\n textDecoration: 'underline',\n fontSize: '12px',\n marginRight: '10px',\n marginBottom: '0',\n marginTop: '8px'\n};\n\nconst footerAddress = {\n margin: '4px 0',\n fontSize: '12px',\n lineHeight: '15px',\n color: '#9199a1'\n};\n\nconst footerHeart = {\n borderRadius: '1px',\n border: '1px solid #d6d9dc',\n padding: '4px 6px 3px 6px',\n fontSize: '11px',\n lineHeight: '11px',\n fontFamily: 'Consolas,monospace',\n color: '#e06c77',\n maxWidth: 'min-content',\n margin: '0 0 32px 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nconst PropDefaults: StackOverflowTipsEmailProps = {\n tips: [\n {\n id: 1,\n description: 'To find a specific phrase, enter it in quotes: \"local storage\"'\n },\n {\n id: 1,\n description: 'To search within specific tag(s), enter them in square brackets: [javascript]'\n },\n {\n id: 1,\n description:\n 'Combine them to get even more precise results - [javascript] \"local storage\" searches for the phrase “local storage” in questions that have the [javascript] tag'\n }\n ]\n};\n\nexport const previewProps = {\n tips: PropDefaults.tips\n} as StackOverflowTipsEmailProps;\n\nexport const templateName = 'StackOverflow Tips';\n\nexport const Template = ({ tips = [] }: StackOverflowTipsEmailProps) => (\n \n \n Stack overflow tips for searching\n \n \n
    \n \n
    \n\n
    \n \n \n Find what you want, faster\n \n Tips and tricks for searching on Stack Overflow\n \n \n \n \n \n \n
    \n\n
    \n \n Searching for solutions\n \n \n With more than 18 million questions, it's possible that someone has already provided a\n solution to the problem you're facing.{' '}\n \n\n
    \n\n \n Use the search bar at the top of the page to find what you need\n \n Here are a few simple search tips to get you started:\n
      \n {tips.map((tip) => (\n
    • \n {tip.description}\n
      • \n ))}\n
    \n\n \n The more information you can put in the search bar, the more likely you will be to\n either find the answer you need or feel confident that no one else has asked the\n question before.\n \n\n
    \n\n \n Take a break and read about the worst coder in the world\n \n\n
    \n \n I need a break\n \n
    \n
    \n     \n\n
    \n \n You're receiving this email because your Stack Overflow activity triggered this tip or\n reminder.\n \n\n \n Unsubscribe from emails like this{' '}\n \n \n Edit email settings{' '}\n \n \n Contact us\n \n \n Privacy\n \n\n
    \n\n \n \n Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038\n \n {'<3'}\n
    \n \n \n);\n", + "jsx": "import {\n Body,\n Column,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text,\n Row\n} from 'jsx-email';\n\ninterface StackOverflowTipsEmailProps {\n tips?: { id: number; description: string }[];\n}\n\nconst main = {\n backgroundColor: '#f3f3f5',\n fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif'\n};\n\nconst headerContent = { padding: '20px 30px 15px' };\n\nconst headerContentTitle = {\n color: '#fff',\n fontSize: '27px',\n fontWeight: 'bold',\n lineHeight: '27px'\n};\n\nconst headerContentSubtitle = {\n color: '#fff',\n fontSize: '17px'\n};\n\nconst headerImageContainer = {\n padding: '30px 10px'\n};\n\nconst title = {\n margin: '0 0 15px',\n fontWeight: 'bold',\n fontSize: '21px',\n lineHeight: '21px',\n color: '#0c0d0e'\n};\n\nconst paragraph = {\n fontSize: '15px',\n lineHeight: '21px',\n color: '#3c3f44'\n};\n\nconst divider = {\n margin: '30px 0'\n};\n\nconst container = {\n maxWidth: '680px',\n width: '100%',\n margin: '0 auto',\n backgroundColor: '#ffffff'\n};\n\nconst footer = {\n width: '680px',\n margin: '32px auto 0 auto',\n padding: '0 30px'\n};\n\nconst content = {\n padding: '30px 30px 40px 30px'\n};\n\nconst logo = {\n display: 'flex',\n background: '#f3f3f5',\n padding: '20px 30px'\n};\n\nconst header = {\n borderRadius: '5px 5px 0 0',\n display: 'flex',\n flexDireciont: 'column',\n backgroundColor: '#2b2d6e'\n};\n\nconst buttonContainer = {\n marginTop: '24px',\n display: 'block'\n};\n\nconst button = {\n backgroundColor: '#0095ff',\n border: '1px solid #0077cc',\n fontSize: '17px',\n lineHeight: '17px',\n padding: '13px 17px',\n borderRadius: '4px',\n maxWidth: '120px',\n color: '#fff'\n};\n\nconst footerDivider = {\n ...divider,\n borderColor: '#d6d8db'\n};\n\nconst footerText = {\n fontSize: '12px',\n lineHeight: '15px',\n color: '#9199a1',\n margin: '0'\n};\n\nconst footerLink = {\n display: 'inline-block',\n color: '#9199a1',\n textDecoration: 'underline',\n fontSize: '12px',\n marginRight: '10px',\n marginBottom: '0',\n marginTop: '8px'\n};\n\nconst footerAddress = {\n margin: '4px 0',\n fontSize: '12px',\n lineHeight: '15px',\n color: '#9199a1'\n};\n\nconst footerHeart = {\n borderRadius: '1px',\n border: '1px solid #d6d9dc',\n padding: '4px 6px 3px 6px',\n fontSize: '11px',\n lineHeight: '11px',\n fontFamily: 'Consolas,monospace',\n color: '#e06c77',\n maxWidth: 'min-content',\n margin: '0 0 32px 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nconst PropDefaults: StackOverflowTipsEmailProps = {\n tips: [\n {\n id: 1,\n description: 'To find a specific phrase, enter it in quotes: \"local storage\"'\n },\n {\n id: 1,\n description: 'To search within specific tag(s), enter them in square brackets: [javascript]'\n },\n {\n id: 1,\n description:\n 'Combine them to get even more precise results - [javascript] \"local storage\" searches for the phrase “local storage” in questions that have the [javascript] tag'\n }\n ]\n};\n\nexport const previewProps = {\n tips: PropDefaults.tips\n} as StackOverflowTipsEmailProps;\n\nexport const templateName = 'StackOverflow Tips';\n\nexport const Template = ({ tips = [] }: StackOverflowTipsEmailProps) => (\n \n \n Stack overflow tips for searching\n \n \n
    \n \n
    \n\n
    \n \n \n Find what you want, faster\n \n Tips and tricks for searching on Stack Overflow\n \n \n \n \n \n \n
    \n\n
    \n \n Searching for solutions\n \n \n With more than 18 million questions, it's possible that someone has already provided a\n solution to the problem you're facing.{' '}\n \n\n
    \n\n \n Use the search bar at the top of the page to find what you need\n \n Here are a few simple search tips to get you started:\n
      \n {tips.map((tip) => (\n
    • \n {tip.description}\n
      • \n ))}\n
    \n\n \n The more information you can put in the search bar, the more likely you will be to\n either find the answer you need or feel confident that no one else has asked the\n question before.\n \n\n
    \n\n \n Take a break and read about the worst coder in the world\n \n\n
    \n \n I need a break\n \n
    \n
    \n     \n\n
    \n \n You're receiving this email because your Stack Overflow activity triggered this tip or\n reminder.\n \n\n \n Unsubscribe from emails like this{' '}\n \n \n Edit email settings{' '}\n \n \n Contact us\n \n \n Privacy\n \n\n
    \n\n \n \n Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038\n \n {'<3'}\n
    \n \n \n);\n", "name": "StackOverflow Tips", "plain": "FIND WHAT YOU WANT, FASTER\n\nTips and tricks for searching on Stack Overflow\n\n\nSEARCHING FOR SOLUTIONS\n\nWith more than 18 million questions, it's possible that someone has already\nprovided a solution to the problem you're facing.\n\n--------------------------------------------------------------------------------\n\n\nUSE THE SEARCH BAR AT THE TOP OF THE PAGE TO FIND WHAT YOU NEED\n\nHere are a few simple search tips to get you started:\n\n * To find a specific phrase, enter it in quotes: \"local storage\"\n\n * To search within specific tag(s), enter them in square brackets: [javascript]\n\n * Combine them to get even more precise results - [javascript] \"local storage\"\n searches for the phrase “local storage” in questions that have the\n [javascript] tag\n\nThe more information you can put in the search bar, the more likely you will be\nto either find the answer you need or feel confident that no one else has asked\nthe question before.\n\n--------------------------------------------------------------------------------\n\n\nTAKE A BREAK AND READ ABOUT THE WORST CODER IN THE WORLD\n\nI need a break https://stackoverflow.blog/2019/10/22/\n\nYou're receiving this email because your Stack Overflow activity triggered this\ntip or reminder.\n\nUnsubscribe from emails like this /Edit email settings /Contact us /Privacy /\n\n--------------------------------------------------------------------------------\n\nStack Overflow, 110 William Street, 28th Floor, New York, NY 10038\n\n<3", "subject": "StackOverflow Tips" }, { "file": "vercel-invite-user.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n
    Join joker on Vercel
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Vercel\"
    \n

    Join Batmobile on Vercel

    \n

    Hello batman,

    \n

    joker (joker@arkham.com) has invited you to the Batmobile team on Vercel.

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \"invited
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Join the team
    \n
    \n

    or copy and paste this URL into your browser: https://vercel.com/teams/invite/foo

    \n
    \n

    This invitation was intended for batman .This invite was sent from 123.45.678.910 located in Gotham City. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.

    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n
    Join joker on Vercel
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Vercel\"
    \n

    Join Batmobile on Vercel

    \n

    Hello batman,

    \n

    joker (joker@arkham.com) has invited you to the Batmobile team on Vercel.

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    \"invited
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Join the team
    \n
    \n

    or copy and paste this URL into your browser: https://vercel.com/teams/invite/foo

    \n
    \n

    This invitation was intended for batman .This invite was sent from 123.45.678.910 located in Gotham City. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.

    \n
    \n
    \n
    \n \n\n", "htmlFile": "vercel-invite-user.html", "id": "vercel-invite-user", - "jsx": "import {\n Body,\n Button,\n Container,\n Column,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Tailwind,\n Text\n} from 'jsx-email';\n\ninterface VercelInviteUserEmailProps {\n username?: string;\n userImage?: string;\n invitedByUsername?: string;\n invitedByEmail?: string;\n teamName?: string;\n teamImage?: string;\n inviteLink?: string;\n inviteFromIp?: string;\n inviteFromLocation?: string;\n}\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n username: 'batman',\n userImage: `${baseUrl}batman-adam.jpg`,\n invitedByUsername: 'joker',\n invitedByEmail: 'joker@arkham.com',\n teamName: 'Batmobile',\n teamImage: `${baseUrl}vercel-team.png`,\n inviteLink: 'https://vercel.com/teams/invite/foo',\n inviteFromIp: '123.45.678.910',\n inviteFromLocation: 'Gotham City'\n} as VercelInviteUserEmailProps;\n\nexport const templateName = 'Vercel Invite User';\n\nexport const Template = ({\n username,\n userImage,\n invitedByUsername,\n invitedByEmail,\n teamName,\n teamImage,\n inviteLink,\n inviteFromIp,\n inviteFromLocation\n}: VercelInviteUserEmailProps) => {\n const previewText = `Join ${invitedByUsername} on Vercel`;\n\n return (\n \n \n {previewText}\n \n \n \n
    \n \n
    \n \n Join {teamName} on Vercel\n \n Hello {username},\n \n {invitedByUsername} (\n \n {invitedByEmail}\n \n ) has invited you to the {teamName} team on Vercel.\n \n
    \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    \n \n Join the team\n \n
    \n \n or copy and paste this URL into your browser:{' '}\n \n {inviteLink}\n \n \n
    \n \n This invitation was intended for {username} .This\n invite was sent from {inviteFromIp} located in{' '}\n {inviteFromLocation}. If you were not expecting\n this invitation, you can ignore this email. If you are concerned about your account's\n safety, please reply to this email to get in touch with us.\n \n     \n \n     \n \n );\n};\n", + "jsx": "import {\n Body,\n Button,\n Container,\n Column,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Tailwind,\n Text\n} from 'jsx-email';\n\ninterface VercelInviteUserEmailProps {\n username?: string;\n userImage?: string;\n invitedByUsername?: string;\n invitedByEmail?: string;\n teamName?: string;\n teamImage?: string;\n inviteLink?: string;\n inviteFromIp?: string;\n inviteFromLocation?: string;\n}\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n username: 'batman',\n userImage: `${baseUrl}batman-adam.jpg`,\n invitedByUsername: 'joker',\n invitedByEmail: 'joker@arkham.com',\n teamName: 'Batmobile',\n teamImage: `${baseUrl}vercel-team.png`,\n inviteLink: 'https://vercel.com/teams/invite/foo',\n inviteFromIp: '123.45.678.910',\n inviteFromLocation: 'Gotham City'\n} as VercelInviteUserEmailProps;\n\nexport const templateName = 'Vercel Invite User';\n\nexport const Template = ({\n username,\n userImage,\n invitedByUsername,\n invitedByEmail,\n teamName,\n teamImage,\n inviteLink,\n inviteFromIp,\n inviteFromLocation\n}: VercelInviteUserEmailProps) => {\n const previewText = `Join ${invitedByUsername} on Vercel`;\n\n return (\n \n \n {previewText}\n \n \n \n
    \n \n
    \n \n Join {teamName} on Vercel\n \n Hello {username},\n \n {invitedByUsername} (\n \n {invitedByEmail}\n \n ) has invited you to the {teamName} team on Vercel.\n \n
    \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    \n \n Join the team\n \n
    \n \n or copy and paste this URL into your browser:{' '}\n \n {inviteLink}\n \n \n
    \n \n This invitation was intended for {username} .This\n invite was sent from {inviteFromIp} located in{' '}\n {inviteFromLocation}. If you were not expecting\n this invitation, you can ignore this email. If you are concerned about your account's\n safety, please reply to this email to get in touch with us.\n \n     \n \n     \n \n );\n};\n", "name": "Vercel Invite User", "plain": "JOIN BATMOBILE ON VERCEL\n\nHello batman,\n\njoker (joker@arkham.com joker@arkham.com) has invited you to the Batmobile team\non Vercel.\n\n\n\nJoin the team https://vercel.com/teams/invite/foo\n\nor copy and paste this URL into your browser:\nhttps://vercel.com/teams/invite/foo https://vercel.com/teams/invite/foo\n\n--------------------------------------------------------------------------------\n\nThis invitation was intended for batman .This invite was sent from\n123.45.678.910 located in Gotham City. If you were not expecting this\ninvitation, you can ignore this email. If you are concerned about your account's\nsafety, please reply to this email to get in touch with us.", "subject": "Vercel Invite User" }, { "file": "welcome emails/koala-welcome.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    The sales intelligence platform that helps you uncover qualified leads.
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Koala\"\n

    Hi Bruce,

    \n

    Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads and close deals faster.

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Get started
    \n
    \n

    Best,
    The Koala team

    \n
    \n

    408 Warren Rd - San Mateo, CA 94402

    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    The sales intelligence platform that helps you uncover qualified leads.
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \"Koala\"\n

    Hi Bruce,

    \n

    Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads and close deals faster.

    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Get started
    \n
    \n

    Best,
    The Koala team

    \n
    \n

    408 Warren Rd - San Mateo, CA 94402

    \n
    \n
    \n
    \n \n\n", "htmlFile": "welcome emails/koala-welcome.html", "id": "welcome emails/koala-welcome", - "jsx": "import { Body, Button, Container, Head, Hr, Html, Img, Preview, Section, Text } from 'jsx-email';\n\ninterface KoalaWelcomeEmailProps {\n userFirstname: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px'\n};\n\nconst logo = {\n margin: '0 auto'\n};\n\nconst paragraph = {\n fontSize: '16px',\n lineHeight: '26px'\n};\n\nconst btnContainer = {\n textAlign: 'center' as const\n};\n\nconst hr = {\n borderColor: '#cccccc',\n margin: '20px 0'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n userFirstname: 'Bruce'\n} as KoalaWelcomeEmailProps;\n\nexport const templateName = 'Koala Welcome';\n\nexport const Template = ({ userFirstname }: KoalaWelcomeEmailProps) => (\n \n \n The sales intelligence platform that helps you uncover qualified leads.\n \n \n \"Koala\"\n Hi {userFirstname},\n \n Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads\n and close deals faster.\n \n
    \n \n Get started\n \n
    \n \n Best,\n
    \n The Koala team\n     \n
    \n 408 Warren Rd - San Mateo, CA 94402\n     \n \n \n);\n", + "jsx": "import { Body, Button, Container, Head, Hr, Html, Img, Preview, Section, Text } from 'jsx-email';\n\ninterface KoalaWelcomeEmailProps {\n userFirstname: string;\n}\n\nconst main = {\n backgroundColor: '#ffffff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst container = {\n margin: '0 auto',\n padding: '20px 0 48px'\n};\n\nconst logo = {\n margin: '0 auto'\n};\n\nconst paragraph = {\n fontSize: '16px',\n lineHeight: '26px'\n};\n\nconst btnContainer = {\n textAlign: 'center' as const\n};\n\nconst hr = {\n borderColor: '#cccccc',\n margin: '20px 0'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n userFirstname: 'Bruce'\n} as KoalaWelcomeEmailProps;\n\nexport const templateName = 'Koala Welcome';\n\nexport const Template = ({ userFirstname }: KoalaWelcomeEmailProps) => (\n \n \n The sales intelligence platform that helps you uncover qualified leads.\n \n \n \"Koala\"\n Hi {userFirstname},\n \n Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads\n and close deals faster.\n \n
    \n \n Get started\n \n
    \n \n Best,\n
    \n The Koala team\n     \n
    \n 408 Warren Rd - San Mateo, CA 94402\n     \n \n \n);\n", "name": "Koala Welcome", "plain": "Hi Bruce,\n\nWelcome to Koala, the sales intelligence platform that helps you uncover\nqualified leads and close deals faster.\n\nGet started https://getkoala.com\n\nBest,\nThe Koala team\n\n--------------------------------------------------------------------------------\n\n408 Warren Rd - San Mateo, CA 94402", "subject": "Koala Welcome" }, { "file": "welcome emails/netlify-welcome.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n
    Netlify Welcome
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \"Netlify\"\n
    \n
    \n \n \n \n \n \n \n
    \n

    Welcome to Netlify

    \n \n \n \n \n \n \n
    \n

    Congratulations! You're joining over 3 million developers around the world who use Netlify to build and ship sites, stores, and apps.

    \n

    Here's how to get started:

    \n \n \n \n \n
    \n
    \n
      \n
    • Deploy your first project. Connect to Git, choose a template, or manually deploy a project you've been working on locally.
      • \n
    • Check your deploy logs. Find out what's included in your build and watch for errors or failed deploys. Learn how to read your deploy logs.
      • \n
    • Choose an integration. Quickly discover, connect, and configure the right tools for your project with 150+ integrations to choose from. Explore the Integrations Hub.
      • \n
    • Set up a custom domain. You can register a new domain and buy it through Netlify or assign a domain you already own to your site. Add a custom domain.
      • \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Go to your dashboard
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    Visit the forums →Read the docs →Contact an expert →
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    UnsubscribeManage Preferences
    \n
    \n

    Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA

    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n
    Netlify Welcome
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \"Netlify\"\n
    \n
    \n \n \n \n \n \n \n
    \n

    Welcome to Netlify

    \n \n \n \n \n \n \n
    \n

    Congratulations! You're joining over 3 million developers around the world who use Netlify to build and ship sites, stores, and apps.

    \n

    Here's how to get started:

    \n \n \n \n \n
    \n
    \n
      \n
    • Deploy your first project. Connect to Git, choose a template, or manually deploy a project you've been working on locally.
      • \n
    • Check your deploy logs. Find out what's included in your build and watch for errors or failed deploys. Learn how to read your deploy logs.
      • \n
    • Choose an integration. Quickly discover, connect, and configure the right tools for your project with 150+ integrations to choose from. Explore the Integrations Hub.
      • \n
    • Set up a custom domain. You can register a new domain and buy it through Netlify or assign a domain you already own to your site. Add a custom domain.
      • \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Go to your dashboard
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n \n
    Visit the forums →Read the docs →Contact an expert →
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n \n
    UnsubscribeManage Preferences
    \n
    \n

    Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA

    \n
    \n
    \n
    \n \n\n", "htmlFile": "welcome emails/netlify-welcome.html", "id": "welcome emails/netlify-welcome", - "jsx": "import {\n Body,\n Button,\n Column,\n Container,\n Head,\n Heading,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Tailwind,\n Text\n} from 'jsx-email';\nimport * as React from 'react';\n\ninterface NetlifyWelcomeEmailProps {\n steps?: {\n id: number;\n Description: React.ReactNode;\n }[];\n links?: string[];\n}\n\nconst PropDefaults: NetlifyWelcomeEmailProps = {\n steps: [\n {\n id: 1,\n Description: (\n
  • \n Deploy your first project. Connect to Git, choose a template\n , or manually deploy a project you've been working on locally.\n
    • \n )\n },\n {\n id: 2,\n Description: (\n
  • \n Check your deploy logs. Find out what's included in your build and watch\n for errors or failed deploys. Learn how to read your deploy logs.\n
    • \n )\n },\n {\n id: 3,\n Description: (\n
  • \n Choose an integration. Quickly discover, connect, and configure the right\n tools for your project with 150+ integrations to choose from.{' '}\n Explore the Integrations Hub.\n
    • \n )\n },\n {\n id: 4,\n Description: (\n
  • \n Set up a custom domain. You can register a new domain and buy it through\n Netlify or assign a domain you already own to your site. Add a custom domain.\n
    • \n )\n }\n ],\n links: ['Visit the forums', 'Read the docs', 'Contact an expert']\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Netlify Welcome';\n\nexport const Template = ({\n steps = PropDefaults.steps,\n links = PropDefaults.links\n}: NetlifyWelcomeEmailProps) => {\n return (\n \n \n Netlify Welcome\n \n \n \n \n Welcome to Netlify\n\n
    \n \n \n Congratulations! You're joining over 3 million developers around the world who use\n Netlify to build and ship sites, stores, and apps.\n \n\n Here's how to get started:\n \n
    \n\n
      {steps?.map(({ Description }) => Description)}
    \n\n
    \n \n Go to your dashboard\n \n
    \n\n
    \n \n {links?.map((link) => (\n \n {link}{' '}\n →\n \n ))}\n \n
    \n     \n\n \n
    \n \n \n Unsubscribe\n \n \n Manage Preferences\n \n \n
    \n \n Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA\n \n     \n \n \n \n );\n};\n", + "jsx": "import {\n Body,\n Button,\n Column,\n Container,\n Head,\n Heading,\n Html,\n Img,\n Link,\n Preview,\n Row,\n Section,\n Tailwind,\n Text\n} from 'jsx-email';\nimport * as React from 'react';\n\ninterface NetlifyWelcomeEmailProps {\n steps?: {\n id: number;\n Description: React.ReactNode;\n }[];\n links?: string[];\n}\n\nconst PropDefaults: NetlifyWelcomeEmailProps = {\n steps: [\n {\n id: 1,\n Description: (\n
  • \n Deploy your first project. Connect to Git, choose a template\n , or manually deploy a project you've been working on locally.\n
    • \n )\n },\n {\n id: 2,\n Description: (\n
  • \n Check your deploy logs. Find out what's included in your build and watch\n for errors or failed deploys. Learn how to read your deploy logs.\n
    • \n )\n },\n {\n id: 3,\n Description: (\n
  • \n Choose an integration. Quickly discover, connect, and configure the right\n tools for your project with 150+ integrations to choose from.{' '}\n Explore the Integrations Hub.\n
    • \n )\n },\n {\n id: 4,\n Description: (\n
  • \n Set up a custom domain. You can register a new domain and buy it through\n Netlify or assign a domain you already own to your site. Add a custom domain.\n
    • \n )\n }\n ],\n links: ['Visit the forums', 'Read the docs', 'Contact an expert']\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Netlify Welcome';\n\nexport const Template = ({\n steps = PropDefaults.steps,\n links = PropDefaults.links\n}: NetlifyWelcomeEmailProps) => {\n return (\n \n \n Netlify Welcome\n \n \n \n \n Welcome to Netlify\n\n
    \n \n \n Congratulations! You're joining over 3 million developers around the world who use\n Netlify to build and ship sites, stores, and apps.\n \n\n Here's how to get started:\n \n
    \n\n
      {steps?.map(({ Description }) => Description)}
    \n\n
    \n \n Go to your dashboard\n \n
    \n\n
    \n \n {links?.map((link) => (\n \n {link}{' '}\n →\n \n ))}\n \n
    \n     \n\n \n
    \n \n \n Unsubscribe\n \n \n Manage Preferences\n \n \n
    \n \n Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA\n \n     \n \n \n \n );\n};\n", "name": "Netlify Welcome", "plain": "WELCOME TO NETLIFY\n\nCongratulations! You're joining over 3 million developers around the world who\nuse Netlify to build and ship sites, stores, and apps.\n\nHere's how to get started:\n\n * Deploy your first project. Connect to Git, choose a template, or manually\n deploy a project you've been working on locally.\n * Check your deploy logs. Find out what's included in your build and watch for\n errors or failed deploys. Learn how to read your deploy logs.\n * Choose an integration. Quickly discover, connect, and configure the right\n tools for your project with 150+ integrations to choose from. Explore the\n Integrations Hub.\n * Set up a custom domain. You can register a new domain and buy it through\n Netlify or assign a domain you already own to your site. Add a custom domain.\n\nGo to your dashboard\n\nVisit the forums →Read the docs →Contact an expert →\n\nUnsubscribeManage Preferences\n\nNetlify, 44 Montgomery Street, Suite 300 San Francisco, CA", "subject": "Netlify Welcome" }, { "file": "welcome emails/stripe-welcome.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    You're now ready to make live transactions with Stripe!
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Stripe\"\n
    \n

    Thanks for submitting your account information. You're now ready to make live transactions with Stripe!

    \n

    You can view your payments and a variety of other information about your account right from your dashboard.

    \n \n \n \n \n \n \n
    View your Stripe Dashboard
    \n
    \n

    If you haven't finished your integration, you might find our docs handy.

    \n

    Once you're ready to start accepting payments, you'll just need to use your live API keys instead of your test API keys. Your account can simultaneously be used for both test and live requests, so you can continue testing while accepting live payments. Check out our tutorial about account basics.

    \n

    Finally, we've put together a quick checklist to ensure your website conforms to card network standards.

    \n

    We'll be here to help you with any step along the way. You can find answers to most questions and get in touch with us on our support site.

    \n

    — The Stripe team

    \n
    \n

    Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080

    \n
    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    You're now ready to make live transactions with Stripe!
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \"Stripe\"\n
    \n

    Thanks for submitting your account information. You're now ready to make live transactions with Stripe!

    \n

    You can view your payments and a variety of other information about your account right from your dashboard.

    \n \n \n \n \n \n \n
    View your Stripe Dashboard
    \n
    \n

    If you haven't finished your integration, you might find our docs handy.

    \n

    Once you're ready to start accepting payments, you'll just need to use your live API keys instead of your test API keys. Your account can simultaneously be used for both test and live requests, so you can continue testing while accepting live payments. Check out our tutorial about account basics.

    \n

    Finally, we've put together a quick checklist to ensure your website conforms to card network standards.

    \n

    We'll be here to help you with any step along the way. You can find answers to most questions and get in touch with us on our support site.

    \n

    — The Stripe team

    \n
    \n

    Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080

    \n
    \n
    \n
    \n
    \n \n\n", "htmlFile": "welcome emails/stripe-welcome.html", "id": "welcome emails/stripe-welcome", - "jsx": "import {\n Body,\n Button,\n Container,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\nconst main = {\n backgroundColor: '#f6f9fc',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Ubuntu,sans-serif'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n margin: '0 auto',\n padding: '20px 0 48px',\n marginBottom: '64px'\n};\n\nconst box = {\n padding: '0 48px'\n};\n\nconst hr = {\n borderColor: '#e6ebf1',\n margin: '20px 0'\n};\n\nconst paragraph = {\n color: '#525f7f',\n\n fontSize: '16px',\n lineHeight: '24px',\n textAlign: 'left' as const\n};\n\nconst anchor = {\n color: '#556cd6'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px',\n lineHeight: '16px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const templateName = 'Stripe Welcome';\n\nexport const Template = () => (\n \n \n You're now ready to make live transactions with Stripe!\n \n \n
    \n \"Stripe\"\n
    \n \n Thanks for submitting your account information. You're now ready to make live\n transactions with Stripe!\n \n \n You can view your payments and a variety of other information about your account right\n from your dashboard.\n \n \n View your Stripe Dashboard\n \n
    \n \n If you haven't finished your integration, you might find our{' '}\n \n docs\n {' '}\n handy.\n \n \n Once you're ready to start accepting payments, you'll just need to use your live{' '}\n \n API keys\n {' '}\n instead of your test API keys. Your account can simultaneously be used for both test and\n live requests, so you can continue testing while accepting live payments. Check out our{' '}\n \n tutorial about account basics\n \n .\n \n \n Finally, we've put together a{' '}\n \n quick checklist\n {' '}\n to ensure your website conforms to card network standards.\n \n \n We'll be here to help you with any step along the way. You can find answers to most\n questions and get in touch with us on our{' '}\n \n support site\n \n .\n \n — The Stripe team\n
    \n Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080\n
    \n     \n \n \n);\n", + "jsx": "import {\n Body,\n Button,\n Container,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Text\n} from 'jsx-email';\n\nconst main = {\n backgroundColor: '#f6f9fc',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Ubuntu,sans-serif'\n};\n\nconst container = {\n backgroundColor: '#ffffff',\n margin: '0 auto',\n padding: '20px 0 48px',\n marginBottom: '64px'\n};\n\nconst box = {\n padding: '0 48px'\n};\n\nconst hr = {\n borderColor: '#e6ebf1',\n margin: '20px 0'\n};\n\nconst paragraph = {\n color: '#525f7f',\n\n fontSize: '16px',\n lineHeight: '24px',\n textAlign: 'left' as const\n};\n\nconst anchor = {\n color: '#556cd6'\n};\n\nconst footer = {\n color: '#8898aa',\n fontSize: '12px',\n lineHeight: '16px'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const templateName = 'Stripe Welcome';\n\nexport const Template = () => (\n \n \n You're now ready to make live transactions with Stripe!\n \n \n
    \n \"Stripe\"\n
    \n \n Thanks for submitting your account information. You're now ready to make live\n transactions with Stripe!\n \n \n You can view your payments and a variety of other information about your account right\n from your dashboard.\n \n \n View your Stripe Dashboard\n \n
    \n \n If you haven't finished your integration, you might find our{' '}\n \n docs\n {' '}\n handy.\n \n \n Once you're ready to start accepting payments, you'll just need to use your live{' '}\n \n API keys\n {' '}\n instead of your test API keys. Your account can simultaneously be used for both test and\n live requests, so you can continue testing while accepting live payments. Check out our{' '}\n \n tutorial about account basics\n \n .\n \n \n Finally, we've put together a{' '}\n \n quick checklist\n {' '}\n to ensure your website conforms to card network standards.\n \n \n We'll be here to help you with any step along the way. You can find answers to most\n questions and get in touch with us on our{' '}\n \n support site\n \n .\n \n — The Stripe team\n
    \n Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080\n
    \n     \n \n \n);\n", "name": "Stripe Welcome", "plain": "--------------------------------------------------------------------------------\n\nThanks for submitting your account information. You're now ready to make live\ntransactions with Stripe!\n\nYou can view your payments and a variety of other information about your account\nright from your dashboard.\n\nView your Stripe Dashboard https://dashboard.stripe.com/login\n\n--------------------------------------------------------------------------------\n\nIf you haven't finished your integration, you might find our docs\nhttps://stripe.com/docs handy.\n\nOnce you're ready to start accepting payments, you'll just need to use your live\nAPI keys https://dashboard.stripe.com/login?redirect=%2Fapikeys instead of your\ntest API keys. Your account can simultaneously be used for both test and live\nrequests, so you can continue testing while accepting live payments. Check out\nour tutorial about account basics https://stripe.com/docs/dashboard.\n\nFinally, we've put together a quick checklist\nhttps://stripe.com/docs/checklist/website to ensure your website conforms to\ncard network standards.\n\nWe'll be here to help you with any step along the way. You can find answers to\nmost questions and get in touch with us on our support site\nhttps://support.stripe.com/.\n\n— The Stripe team\n\n--------------------------------------------------------------------------------\n\nStripe, 354 Oyster Point Blvd, South San Francisco, CA 94080", "subject": "Stripe Welcome" }, { "file": "yelp-recent-login.tsx", - "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Yelp recent login
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n

    Hi Bruce,

    \n

    We noticed a recent login to your Yelp account.

    \n

    Time: September 7, 2022 at 10:58 AM

    \n

    Device: Chrome on Mac OS X

    \n

    Location: Gotham City, United States

    \n

    *Approximate geographic location based on IP address:12.345.67.891

    \n

    If this was you, there's nothing else you need to do.

    \n

    If this wasn't you or if you have additional questions, please see our support page.

    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Learn More
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. | www.yelp.com

    \n
    \n
    \n
    \n \n\n", + "html": "\n\n\n \n \n \n \n \n \n \n \n \n\n \n
    Yelp recent login
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n
    \n \n \n \n \n \n \n
    \n

    Hi Bruce,

    \n

    We noticed a recent login to your Yelp account.

    \n

    Time: September 7, 2022 at 10:58 AM

    \n

    Device: Chrome on Mac OS X

    \n

    Location: Gotham City, United States

    \n

    *Approximate geographic location based on IP address:12.345.67.891

    \n

    If this was you, there's nothing else you need to do.

    \n

    If this wasn't you or if you have additional questions, please see our support page.

    \n
    \n \n \n \n \n \n \n
    \n \n \n \n \n \n \n
    Learn More
    \n
    \n
    \n \n \n \n \n \n \n
    \n

    © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. | www.yelp.com

    \n
    \n
    \n
    \n \n\n", "htmlFile": "yelp-recent-login.html", "id": "yelp-recent-login", - "jsx": "import {\n Body,\n Button,\n Container,\n Column,\n Head,\n Heading,\n Html,\n Img,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface YelpRecentLoginEmailProps {\n userFirstName?: string;\n loginDate?: Date;\n loginDevice?: string;\n loginLocation?: string;\n loginIp?: string;\n}\n\nconst main = {\n backgroundColor: '#fff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst paragraph = {\n fontSize: 16\n};\n\nconst logo = {\n padding: '30px 20px'\n};\n\nconst containerButton = {\n display: 'flex',\n justifyContent: 'center',\n width: '100%'\n};\n\nconst content = {\n border: '1px solid rgb(0,0,0, 0.1)',\n borderRadius: '3px',\n overflow: 'hidden'\n};\n\nconst boxInfos = {\n padding: '20px 40px'\n};\n\nconst containerImageFooter = {\n padding: '45px 0 0 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/demo/';\n\nexport const previewProps = {\n userFirstName: 'Bruce',\n loginDate: new Date('September 7, 2022, 10:58 am'),\n loginDevice: 'Chrome on Mac OS X',\n loginLocation: 'Gotham City, United States',\n loginIp: '12.345.67.891'\n} as YelpRecentLoginEmailProps;\n\nexport const templateName = 'Yelp Recent Login';\n\nexport const Template = ({\n userFirstName,\n loginDate,\n loginDevice,\n loginLocation,\n loginIp\n}: YelpRecentLoginEmailProps) => {\n const formattedDate = new Intl.DateTimeFormat('en', {\n dateStyle: 'long',\n timeStyle: 'short'\n }).format(loginDate);\n\n return (\n \n \n Yelp recent login\n \n \n
    \n \n
    \n\n
    \n \n \n \n\n \n \n \n Hi {userFirstName},\n \n \n We noticed a recent login to your Yelp account.\n \n\n \n Time: \n {formattedDate}\n \n \n Device: \n {loginDevice}\n \n \n Location: \n {loginLocation}\n \n \n *Approximate geographic location based on IP address:\n {loginIp}\n \n\n If this was you, there's nothing else you need to do.\n \n If this wasn't you or if you have additional questions, please see our support\n page.\n \n \n \n \n \n \n Learn More\n \n \n \n
    \n\n
    \n \n
    \n\n \n © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. | www.yelp.com\n \n     \n \n \n );\n};\n", + "jsx": "import {\n Body,\n Button,\n Container,\n Column,\n Head,\n Heading,\n Html,\n Img,\n Preview,\n Row,\n Section,\n Text\n} from 'jsx-email';\n\ninterface YelpRecentLoginEmailProps {\n userFirstName?: string;\n loginDate?: Date;\n loginDevice?: string;\n loginLocation?: string;\n loginIp?: string;\n}\n\nconst main = {\n backgroundColor: '#fff',\n fontFamily:\n '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif'\n};\n\nconst paragraph = {\n fontSize: 16\n};\n\nconst logo = {\n padding: '30px 20px'\n};\n\nconst containerButton = {\n display: 'flex',\n justifyContent: 'center',\n width: '100%'\n};\n\nconst content = {\n border: '1px solid rgb(0,0,0, 0.1)',\n borderRadius: '3px',\n overflow: 'hidden'\n};\n\nconst boxInfos = {\n padding: '20px 40px'\n};\n\nconst containerImageFooter = {\n padding: '45px 0 0 0'\n};\n\nconst baseUrl = 'https://jsx.email/assets/samples/';\n\nexport const previewProps = {\n userFirstName: 'Bruce',\n loginDate: new Date('September 7, 2022, 10:58 am'),\n loginDevice: 'Chrome on Mac OS X',\n loginLocation: 'Gotham City, United States',\n loginIp: '12.345.67.891'\n} as YelpRecentLoginEmailProps;\n\nexport const templateName = 'Yelp Recent Login';\n\nexport const Template = ({\n userFirstName,\n loginDate,\n loginDevice,\n loginLocation,\n loginIp\n}: YelpRecentLoginEmailProps) => {\n const formattedDate = new Intl.DateTimeFormat('en', {\n dateStyle: 'long',\n timeStyle: 'short'\n }).format(loginDate);\n\n return (\n \n \n Yelp recent login\n \n \n
    \n \n
    \n\n
    \n \n \n \n\n \n \n \n Hi {userFirstName},\n \n \n We noticed a recent login to your Yelp account.\n \n\n \n Time: \n {formattedDate}\n \n \n Device: \n {loginDevice}\n \n \n Location: \n {loginLocation}\n \n \n *Approximate geographic location based on IP address:\n {loginIp}\n \n\n If this was you, there's nothing else you need to do.\n \n If this wasn't you or if you have additional questions, please see our support\n page.\n \n \n \n \n \n \n Learn More\n \n \n \n
    \n\n
    \n \n
    \n\n \n © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. | www.yelp.com\n \n     \n \n \n );\n};\n", "name": "Yelp Recent Login", "plain": "HI BRUCE,\n\n\nWE NOTICED A RECENT LOGIN TO YOUR YELP ACCOUNT.\n\nTime: September 7, 2022 at 10:58 AM\n\nDevice: Chrome on Mac OS X\n\nLocation: Gotham City, United States\n\n*Approximate geographic location based on IP address:12.345.67.891\n\nIf this was you, there's nothing else you need to do.\n\nIf this wasn't you or if you have additional questions, please see our support\npage.\n\nLearn More\n\n\n\n© 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. |\nwww.yelp.com", "subject": "Yelp Recent Login" diff --git a/apps/preview/package.json b/apps/preview/package.json index 0aabcb640..a855ff573 100644 --- a/apps/preview/package.json +++ b/apps/preview/package.json @@ -7,17 +7,17 @@ "dependencies": { "@tailwindcss/vite": "catalog:", "@vitejs/plugin-react": "catalog:", - "clsx": "^2.1.1", + "clsx": "catalog:", "iconoir-react": "catalog:", - "js-beautify": "^1.15.1", + "js-beautify": "catalog:", "react": "catalog:", "react-dom": "catalog:", "shiki": "catalog:", - "tailwind-merge": "^3.3.1", + "tailwind-merge": "catalog:", "tailwindcss": "catalog:", "tippy.js": "catalog:", "vite": "catalog:", - "zustand": "^5.0.12" + "zustand": "catalog:" }, "devDependencies": { "@types/js-beautify": "^1.14.3", diff --git a/apps/samples/emails/airbnb-review.tsx b/apps/samples/emails/airbnb-review.tsx index eacac9176..ed98d6b85 100644 --- a/apps/samples/emails/airbnb-review.tsx +++ b/apps/samples/emails/airbnb-review.tsx @@ -19,7 +19,7 @@ interface AirbnbReviewEmailProps { reviewText?: string; } -const baseUrl = import.meta.isJsxEmailPreview ? '/static/' : 'https://jsx.email/assets/demo/'; +const baseUrl = import.meta.isJsxEmailPreview ? '/static/' : 'https://jsx.email/assets/samples/'; export const previewProps = { authorName: 'Joker', diff --git a/apps/samples/emails/apple-receipt.tsx b/apps/samples/emails/apple-receipt.tsx index e934de713..51c85bb37 100644 --- a/apps/samples/emails/apple-receipt.tsx +++ b/apps/samples/emails/apple-receipt.tsx @@ -13,7 +13,7 @@ import { Text } from 'jsx-email'; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; const main = { fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif', diff --git a/apps/samples/emails/codepen-challengers.tsx b/apps/samples/emails/codepen-challengers.tsx index 59d8bd84c..93efbe695 100644 --- a/apps/samples/emails/codepen-challengers.tsx +++ b/apps/samples/emails/codepen-challengers.tsx @@ -179,7 +179,7 @@ const footerLink = { cursor: 'pointer' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const templateName = 'Codepen Challengers'; diff --git a/apps/samples/emails/credential emails/dropbox-reset-password.tsx b/apps/samples/emails/credential emails/dropbox-reset-password.tsx index 2838582f4..d905f147e 100644 --- a/apps/samples/emails/credential emails/dropbox-reset-password.tsx +++ b/apps/samples/emails/credential emails/dropbox-reset-password.tsx @@ -29,7 +29,7 @@ const anchor = { textDecoration: 'underline' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { userFirstname: 'Bruce', diff --git a/apps/samples/emails/credential emails/github-access-token.tsx b/apps/samples/emails/credential emails/github-access-token.tsx index 1ef58054c..158a94aa8 100644 --- a/apps/samples/emails/credential emails/github-access-token.tsx +++ b/apps/samples/emails/credential emails/github-access-token.tsx @@ -50,7 +50,7 @@ const footer = { marginTop: '60px' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { username: 'Batman' diff --git a/apps/samples/emails/credential emails/linear-login-code.tsx b/apps/samples/emails/credential emails/linear-login-code.tsx index 9c718d097..94fa9e230 100644 --- a/apps/samples/emails/credential emails/linear-login-code.tsx +++ b/apps/samples/emails/credential emails/linear-login-code.tsx @@ -76,7 +76,7 @@ const code = { color: '#3c4149' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { validationCode: 'tt226-5398x' diff --git a/apps/samples/emails/credential emails/magic links/notion-magic-link.tsx b/apps/samples/emails/credential emails/magic links/notion-magic-link.tsx index cf7d1de1c..6fd7ae820 100644 --- a/apps/samples/emails/credential emails/magic links/notion-magic-link.tsx +++ b/apps/samples/emails/credential emails/magic links/notion-magic-link.tsx @@ -60,7 +60,7 @@ const code = { color: '#333' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { loginCode: 'sparo-ndigo-amurt-secan' diff --git a/apps/samples/emails/credential emails/magic links/raycast-magic-link.tsx b/apps/samples/emails/credential emails/magic links/raycast-magic-link.tsx index 423543aa1..73a5c54aa 100644 --- a/apps/samples/emails/credential emails/magic links/raycast-magic-link.tsx +++ b/apps/samples/emails/credential emails/magic links/raycast-magic-link.tsx @@ -60,7 +60,7 @@ const footer = { marginLeft: '4px' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { magicLink: 'https://raycast.com' diff --git a/apps/samples/emails/credential emails/twitch-reset-password.tsx b/apps/samples/emails/credential emails/twitch-reset-password.tsx index 541a94b54..c0ea7da96 100644 --- a/apps/samples/emails/credential emails/twitch-reset-password.tsx +++ b/apps/samples/emails/credential emails/twitch-reset-password.tsx @@ -70,7 +70,7 @@ const link = { textDecoration: 'underline' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { username: 'Batman', diff --git a/apps/samples/emails/google-play-policy-update.tsx b/apps/samples/emails/google-play-policy-update.tsx index c3926d252..91c421160 100644 --- a/apps/samples/emails/google-play-policy-update.tsx +++ b/apps/samples/emails/google-play-policy-update.tsx @@ -74,7 +74,7 @@ const hr = { margin: '20px 0' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const templateName = 'Google Play Policy Update'; diff --git a/apps/samples/emails/nike-receipt.tsx b/apps/samples/emails/nike-receipt.tsx index ba1cb6140..236be5189 100644 --- a/apps/samples/emails/nike-receipt.tsx +++ b/apps/samples/emails/nike-receipt.tsx @@ -184,7 +184,7 @@ const footer = { } as React.CSSProperties }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const templateName = 'Nike Receipt'; diff --git a/apps/samples/emails/plaid-verify-identity.tsx b/apps/samples/emails/plaid-verify-identity.tsx index 6d6ba39ee..3b57c1891 100644 --- a/apps/samples/emails/plaid-verify-identity.tsx +++ b/apps/samples/emails/plaid-verify-identity.tsx @@ -101,7 +101,7 @@ const footer = { textTransform: 'uppercase' as const }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { validationCode: '144833' diff --git a/apps/samples/emails/slack-confirm.tsx b/apps/samples/emails/slack-confirm.tsx index 43f3d6d28..60d16713f 100644 --- a/apps/samples/emails/slack-confirm.tsx +++ b/apps/samples/emails/slack-confirm.tsx @@ -93,7 +93,7 @@ const text = { lineHeight: '24px' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { validationCode: 'DJZ-TLX' diff --git a/apps/samples/emails/stack-overflow-tips.tsx b/apps/samples/emails/stack-overflow-tips.tsx index 6207b7232..449653592 100644 --- a/apps/samples/emails/stack-overflow-tips.tsx +++ b/apps/samples/emails/stack-overflow-tips.tsx @@ -146,7 +146,7 @@ const footerHeart = { margin: '0 0 32px 0' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; const PropDefaults: StackOverflowTipsEmailProps = { tips: [ diff --git a/apps/samples/emails/vercel-invite-user.tsx b/apps/samples/emails/vercel-invite-user.tsx index f9a8ea159..9c1d6f8df 100644 --- a/apps/samples/emails/vercel-invite-user.tsx +++ b/apps/samples/emails/vercel-invite-user.tsx @@ -28,7 +28,7 @@ interface VercelInviteUserEmailProps { inviteFromLocation?: string; } -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { username: 'batman', diff --git a/apps/samples/emails/welcome emails/koala-welcome.tsx b/apps/samples/emails/welcome emails/koala-welcome.tsx index 82c2047a2..26e444aea 100644 --- a/apps/samples/emails/welcome emails/koala-welcome.tsx +++ b/apps/samples/emails/welcome emails/koala-welcome.tsx @@ -38,7 +38,7 @@ const footer = { fontSize: '12px' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { userFirstname: 'Bruce' diff --git a/apps/samples/emails/welcome emails/netlify-welcome.tsx b/apps/samples/emails/welcome emails/netlify-welcome.tsx index d09c43afe..92be9dbad 100644 --- a/apps/samples/emails/welcome emails/netlify-welcome.tsx +++ b/apps/samples/emails/welcome emails/netlify-welcome.tsx @@ -67,7 +67,7 @@ const PropDefaults: NetlifyWelcomeEmailProps = { links: ['Visit the forums', 'Read the docs', 'Contact an expert'] }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const templateName = 'Netlify Welcome'; diff --git a/apps/samples/emails/welcome emails/stripe-welcome.tsx b/apps/samples/emails/welcome emails/stripe-welcome.tsx index 989a50335..0b4753761 100644 --- a/apps/samples/emails/welcome emails/stripe-welcome.tsx +++ b/apps/samples/emails/welcome emails/stripe-welcome.tsx @@ -52,7 +52,7 @@ const footer = { lineHeight: '16px' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const templateName = 'Stripe Welcome'; diff --git a/apps/samples/emails/yelp-recent-login.tsx b/apps/samples/emails/yelp-recent-login.tsx index 00f3b65ee..1e6b74ead 100644 --- a/apps/samples/emails/yelp-recent-login.tsx +++ b/apps/samples/emails/yelp-recent-login.tsx @@ -55,7 +55,7 @@ const containerImageFooter = { padding: '45px 0 0 0' }; -const baseUrl = 'https://jsx.email/assets/demo/'; +const baseUrl = 'https://jsx.email/assets/samples/'; export const previewProps = { userFirstName: 'Bruce', diff --git a/packages/jsx-email/package.json b/packages/jsx-email/package.json index 131ac11d6..40c536458 100644 --- a/packages/jsx-email/package.json +++ b/packages/jsx-email/package.json @@ -77,6 +77,7 @@ "chalk": "5.4.1", "chalk-template": "catalog:", "classnames": "2.5.1", + "clsx": "catalog:", "debug": "^4.3.4", "esbuild": "^0.25.2", "find-up": "^7.0.0", @@ -84,6 +85,8 @@ "globby": "catalog:", "hash-it": "^6.0.0", "html-to-text": "9.0.5", + "iconoir-react": "catalog:", + "js-beautify": "catalog:", "lilconfig": "^3.1.2", "magic-string": "^0.30.5", "md-to-react-email": "5.0.5", @@ -102,12 +105,15 @@ "source-map-support": "^0.5.21", "std-env": "^3.6.0", "strip-ansi": "^7.1.0", + "tailwind-merge": "catalog:", "tailwindcss": "catalog:", + "tippy.js": "catalog:", "titleize": "^4.0.0", "unist-util-visit": "catalog:", "valibot": "^1.0.0", "vite": "catalog:", - "yargs-parser": "catalog:" + "yargs-parser": "catalog:", + "zustand": "catalog:" }, "devDependencies": { "@jsx-email/plugin-inline": "workspace:^", diff --git a/packages/jsx-email/test/.snapshots/debug.test.tsx.snap b/packages/jsx-email/test/.snapshots/debug.test.tsx.snap index fb89dce37..2de986405 100644 --- a/packages/jsx-email/test/.snapshots/debug.test.tsx.snap +++ b/packages/jsx-email/test/.snapshots/debug.test.tsx.snap @@ -20,7 +20,7 @@ exports[`render > renders with debug attributes 1`] = ` -
    Plaid + Plaid

    Verify Your Identity

    Enter the following code to finish linking Venmo.

    diff --git a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap index 29588d1d5..88bd0f8c7 100644 --- a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap +++ b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap @@ -338,7 +338,7 @@ exports[`render > inlining 2`] = ` `; exports[`render > renders the airbnb demo template 1`] = ` -"
    Read undefined's review
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    Airbnb

    Here's what wrote

    Now that the review period is over, we’ve posted ’s review to your Airbnb profile.

    While it’s too late to write a review of your own, you can send your feedback to using your Airbnb message thread.

    Read undefined's review
     ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
    Airbnb

    Here's what wrote

    Now that the review period is over, we’ve posted ’s review to your Airbnb profile.

    While it’s too late to write a review of your own, you can send your feedback to using your Airbnb message thread.

    Plaid

    Verify Your Identity

    Enter the following code to finish linking Venmo.

    Not expecting this email?

    Contact login@plaid.com if you did not request this code.

    Securely powered by Plaid.

    "`; +exports[`render > renders the plaid demo template 1`] = `"
    Plaid

    Verify Your Identity

    Enter the following code to finish linking Venmo.

    Not expecting this email?

    Contact login@plaid.com if you did not request this code.

    Securely powered by Plaid.

    "`; exports[`render > renders the plaid demo template 2`] = ` " @@ -475,7 +475,7 @@ exports[`render > renders the plaid demo template 2`] = ` -
    Plaid + Plaid

    Verify Your Identity

    Enter the following code to finish linking Venmo.

    @@ -787,6 +787,6 @@ exports[`render > renders the vercel demo template 2`] = ` " `; -exports[`render > renders with minifying 1`] = `"
    Plaid

    Verify Your Identity

    Enter the following code to finish linking Venmo.

    Not expecting this email?

    Contact login@plaid.com if you did not request this code.

    Securely powered by Plaid."`; +exports[`render > renders with minifying 1`] = `"

    Plaid

    Verify Your Identity

    Enter the following code to finish linking Venmo.

    Not expecting this email?

    Contact login@plaid.com if you did not request this code.

    Securely powered by Plaid."`; -exports[`render > renders without minifying 1`] = `"

    Plaid

    Verify Your Identity

    Enter the following code to finish linking Venmo.

    Not expecting this email?

    Contact login@plaid.com if you did not request this code.

    Securely powered by Plaid.

    "`; +exports[`render > renders without minifying 1`] = `"
    Plaid

    Verify Your Identity

    Enter the following code to finish linking Venmo.

    Not expecting this email?

    Contact login@plaid.com if you did not request this code.

    Securely powered by Plaid.

    "`; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 92f78661c..38773b86d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,6 +30,9 @@ catalogs: chalk-template: specifier: 1.1.2 version: 1.1.2 + clsx: + specifier: 2.1.1 + version: 2.1.1 globby: specifier: 16.2.0 version: 16.2.0 @@ -39,6 +42,9 @@ catalogs: iconoir-react: specifier: 7.11.0 version: 7.11.0 + js-beautify: + specifier: 1.15.1 + version: 1.15.1 mustache: specifier: 4.2.0 version: 4.2.0 @@ -48,6 +54,9 @@ catalogs: shiki: specifier: 4.0.2 version: 4.0.2 + tailwind-merge: + specifier: 3.3.1 + version: 3.3.1 tailwindcss: specifier: 4.2.4 version: 4.2.4 @@ -69,6 +78,9 @@ catalogs: yargs-parser: specifier: 22.0.0 version: 22.0.0 + zustand: + specifier: 5.0.12 + version: 5.0.12 overrides: '@types/react': 19.2.14 @@ -145,13 +157,13 @@ importers: specifier: 'catalog:' version: 6.0.1(vite@8.0.10(@types/node@25.6.0)(esbuild@0.27.7)(jiti@2.6.1)(sass@1.99.0)(tsx@4.19.2)(yaml@2.8.3)) clsx: - specifier: ^2.1.1 + specifier: 'catalog:' version: 2.1.1 iconoir-react: specifier: 'catalog:' version: 7.11.0(react@19.2.5) js-beautify: - specifier: ^1.15.1 + specifier: 'catalog:' version: 1.15.1 react: specifier: 19.2.5 @@ -163,7 +175,7 @@ importers: specifier: 'catalog:' version: 4.0.2 tailwind-merge: - specifier: ^3.3.1 + specifier: 'catalog:' version: 3.3.1 tailwindcss: specifier: 'catalog:' @@ -175,7 +187,7 @@ importers: specifier: 'catalog:' version: 8.0.10(@types/node@25.6.0)(esbuild@0.27.7)(jiti@2.6.1)(sass@1.99.0)(tsx@4.19.2)(yaml@2.8.3) zustand: - specifier: ^5.0.12 + specifier: 'catalog:' version: 5.0.12(@types/react@19.2.14)(react@19.2.5)(use-sync-external-store@1.5.0(react@19.2.5)) devDependencies: '@types/js-beautify': @@ -466,6 +478,9 @@ importers: classnames: specifier: 2.5.1 version: 2.5.1 + clsx: + specifier: 'catalog:' + version: 2.1.1 debug: specifier: ^4.3.4 version: 4.4.0 @@ -487,6 +502,12 @@ importers: html-to-text: specifier: 9.0.5 version: 9.0.5 + iconoir-react: + specifier: 'catalog:' + version: 7.11.0(react@19.2.5) + js-beautify: + specifier: 'catalog:' + version: 1.15.1 lilconfig: specifier: ^3.1.2 version: 3.1.3 @@ -547,9 +568,15 @@ importers: strip-ansi: specifier: ^7.1.0 version: 7.1.0 + tailwind-merge: + specifier: 'catalog:' + version: 3.3.1 tailwindcss: specifier: 'catalog:' version: 4.2.4 + tippy.js: + specifier: 'catalog:' + version: 6.3.7 titleize: specifier: ^4.0.0 version: 4.0.0 @@ -565,6 +592,9 @@ importers: yargs-parser: specifier: 'catalog:' version: 22.0.0 + zustand: + specifier: 'catalog:' + version: 5.0.12(@types/react@19.2.14)(react@19.2.5)(use-sync-external-store@1.5.0(react@19.2.5)) devDependencies: '@jsx-email/plugin-inline': specifier: workspace:^ diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index a40f048e4..fbcc049c6 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -15,14 +15,17 @@ catalog: '@vitejs/plugin-react': '6.0.1' 'autoprefixer': '10.5.0' 'chalk-template': '1.1.2' + 'clsx': '2.1.1' 'globby': '16.2.0' 'hast': '1.0.0' 'iconoir-react': '7.11.0' + 'js-beautify': '1.15.1' 'mustache': '4.2.0' 'postcss': '8.5.14' 'react': '19.2.5' 'react-dom': '19.2.5' 'shiki': '4.0.2' + 'tailwind-merge': '3.3.1' 'tailwindcss': '4.2.4' 'tippy.js': '6.3.7' 'typescript': '6.0.3' @@ -30,6 +33,7 @@ catalog: 'unist-util-visit': '5.1.0' 'vite': '8.0.10' 'yargs-parser': '22.0.0' + 'zustand': '5.0.12' enablePrePostScripts: true linkWorkspacePackages: false diff --git a/test/cli/create-mail.test.ts b/test/cli/create-mail.test.ts index 592dd2e02..58e9c2349 100644 --- a/test/cli/create-mail.test.ts +++ b/test/cli/create-mail.test.ts @@ -37,9 +37,9 @@ describe('create-mail', async () => { `); expect(packageJson.dependencies).toMatchInlineSnapshot(` { - "@jsx-email/plugin-inline": "^3.0.0", - "@jsx-email/plugin-minify": "^3.0.0", - "@jsx-email/plugin-pretty": "^3.0.0", + "@jsx-email/plugin-inline": "^2.0.0", + "@jsx-email/plugin-minify": "^2.0.0", + "@jsx-email/plugin-pretty": "^2.0.0", "jsx-email": "^3.0.0", } `); diff --git a/test/smoke-v2/tests/.snapshots/smoke-v2.test.ts-Local-Assets-chromium.snap b/test/smoke-v2/tests/.snapshots/smoke-v2.test.ts-Local-Assets-chromium.snap index f16c8958c..8893c9127 100644 --- a/test/smoke-v2/tests/.snapshots/smoke-v2.test.ts-Local-Assets-chromium.snap +++ b/test/smoke-v2/tests/.snapshots/smoke-v2.test.ts-Local-Assets-chromium.snap @@ -20,13 +20,13 @@ Cat /static/cat.jpeg