diff --git a/.changeset/angry-bugs-sing.md b/.changeset/angry-bugs-sing.md new file mode 100644 index 0000000000..a043c0048e --- /dev/null +++ b/.changeset/angry-bugs-sing.md @@ -0,0 +1,5 @@ +--- +"react-email": minor +--- + +Add image validation checking diff --git a/.changeset/empty-phones-relax.md b/.changeset/empty-phones-relax.md new file mode 100644 index 0000000000..2c7175651e --- /dev/null +++ b/.changeset/empty-phones-relax.md @@ -0,0 +1,5 @@ +--- +"react-email": minor +--- + +Make the width and height for the preview of the email customizable diff --git a/.changeset/empty-rivers-laugh.md b/.changeset/empty-rivers-laugh.md new file mode 100644 index 0000000000..deb4e0470c --- /dev/null +++ b/.changeset/empty-rivers-laugh.md @@ -0,0 +1,5 @@ +--- +"react-email": major +--- + +Added toolbar with a link checker diff --git a/.changeset/fast-birds-fail.md b/.changeset/fast-birds-fail.md new file mode 100644 index 0000000000..59b0db8e50 --- /dev/null +++ b/.changeset/fast-birds-fail.md @@ -0,0 +1,5 @@ +--- +"react-email-starter": patch +--- + +react-email@4.0.0-alpha.3 diff --git a/.changeset/flat-apes-sniff.md b/.changeset/flat-apes-sniff.md new file mode 100644 index 0000000000..db8ab72d93 --- /dev/null +++ b/.changeset/flat-apes-sniff.md @@ -0,0 +1,6 @@ +--- +"react-email-starter": patch +"create-email": patch +--- + +react-email@4.0.0-alpha.4 diff --git a/.changeset/loud-clouds-wink.md b/.changeset/loud-clouds-wink.md new file mode 100644 index 0000000000..ef66cbb39f --- /dev/null +++ b/.changeset/loud-clouds-wink.md @@ -0,0 +1,5 @@ +--- +"react-email": patch +--- + +Fix padding on the file tree diff --git a/.changeset/nine-masks-sort.md b/.changeset/nine-masks-sort.md new file mode 100644 index 0000000000..3c482f2b85 --- /dev/null +++ b/.changeset/nine-masks-sort.md @@ -0,0 +1,5 @@ +--- +"react-email": patch +--- + +Fix code view contrast diff --git a/.changeset/polite-apples-sit.md b/.changeset/polite-apples-sit.md new file mode 100644 index 0000000000..47527d1f0d --- /dev/null +++ b/.changeset/polite-apples-sit.md @@ -0,0 +1,5 @@ +--- +"react-email": minor +--- + +add spam checker on the sidebar diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..716a130bed --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,57 @@ +{ + "mode": "pre", + "tag": "alpha", + "initialVersions": { + "demo": "0.0.0", + "web": "0.0.0", + "@benchmarks/preview-server": "0.0.0", + "@benchmarks/tailwind-component": "0.0.0", + "react-email-with-aws-ses": "1.0.7", + "react-email-with-mailersend": "1.0.7", + "react-email-with-nodemailer": "1.0.7", + "react-email-with-plunk": "1.0.7", + "react-email-with-postmark": "1.0.7", + "react-email-with-resend": "1.0.7", + "react-email-with-next-scaleway": "1.0.7", + "react-email-with-node-scaleway": "1.0.7", + "react-email-with-sendgrid": "1.0.7", + "@react-email/body": "0.0.11", + "@react-email/button": "0.0.19", + "@react-email/code-block": "0.0.11", + "@react-email/code-inline": "0.0.5", + "@react-email/column": "0.0.13", + "@react-email/components": "0.0.33", + "@react-email/container": "0.0.15", + "create-email": "0.1.9", + "react-email-starter": "0.1.9", + "@react-email/font": "0.0.9", + "@react-email/head": "0.0.12", + "@react-email/heading": "0.0.15", + "@react-email/hr": "0.0.11", + "@react-email/html": "0.0.11", + "@react-email/img": "0.0.11", + "@react-email/link": "0.0.12", + "@react-email/markdown": "0.0.14", + "@react-email/preview": "0.0.12", + "react-email": "3.0.7", + "@react-email/render": "1.0.5", + "@react-email/row": "0.0.12", + "@react-email/section": "0.0.16", + "@react-email/tailwind": "1.0.4", + "@react-email/text": "0.0.11", + "tsconfig": "0.0.0", + "docs": "0.0.0" + }, + "changesets": [ + "angry-bugs-sing", + "empty-phones-relax", + "empty-rivers-laugh", + "fast-birds-fail", + "flat-apes-sniff", + "loud-clouds-wink", + "nine-masks-sort", + "polite-apples-sit", + "spicy-beds-explain", + "unlucky-tigers-destroy" + ] +} diff --git a/.changeset/spicy-beds-explain.md b/.changeset/spicy-beds-explain.md new file mode 100644 index 0000000000..a46e8b3d59 --- /dev/null +++ b/.changeset/spicy-beds-explain.md @@ -0,0 +1,5 @@ +--- +"react-email-starter": major +--- + +- react-eamil@4.0.0-alpha.1 diff --git a/.changeset/unlucky-tigers-destroy.md b/.changeset/unlucky-tigers-destroy.md new file mode 100644 index 0000000000..541d4c61d4 --- /dev/null +++ b/.changeset/unlucky-tigers-destroy.md @@ -0,0 +1,5 @@ +--- +"react-email-starter": patch +--- + +react-email@4.0.0-alpha.2 diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx index 850003873b..932568d69d 100644 --- a/apps/demo/emails/magic-links/aws-verify-email.tsx +++ b/apps/demo/emails/magic-links/aws-verify-email.tsx @@ -11,7 +11,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface AWSVerifyEmailProps { verificationCode?: string; diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx index 12a7a8edd2..6c6265daf6 100644 --- a/apps/demo/emails/magic-links/linear-login-code.tsx +++ b/apps/demo/emails/magic-links/linear-login-code.tsx @@ -12,7 +12,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface LinearLoginCodeEmailProps { validationCode?: string; diff --git a/apps/demo/emails/magic-links/notion-magic-link.tsx b/apps/demo/emails/magic-links/notion-magic-link.tsx index 511185ed53..1fe5774d4c 100644 --- a/apps/demo/emails/magic-links/notion-magic-link.tsx +++ b/apps/demo/emails/magic-links/notion-magic-link.tsx @@ -9,7 +9,6 @@ import { Preview, Text, } from '@react-email/components'; -import * as React from 'react'; interface NotionMagicLinkEmailProps { loginCode?: string; diff --git a/apps/demo/emails/magic-links/plaid-verify-identity.tsx b/apps/demo/emails/magic-links/plaid-verify-identity.tsx index 8f1d634f64..cd967538d3 100644 --- a/apps/demo/emails/magic-links/plaid-verify-identity.tsx +++ b/apps/demo/emails/magic-links/plaid-verify-identity.tsx @@ -9,7 +9,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface PlaidVerifyIdentityEmailProps { validationCode?: string; diff --git a/apps/demo/emails/magic-links/raycast-magic-link.tsx b/apps/demo/emails/magic-links/raycast-magic-link.tsx index 534a5058dd..5a8e7c1b4e 100644 --- a/apps/demo/emails/magic-links/raycast-magic-link.tsx +++ b/apps/demo/emails/magic-links/raycast-magic-link.tsx @@ -11,7 +11,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface RaycastMagicLinkEmailProps { magicLink?: string; diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx index 424dfcd56b..ff30eee461 100644 --- a/apps/demo/emails/magic-links/slack-confirm.tsx +++ b/apps/demo/emails/magic-links/slack-confirm.tsx @@ -12,7 +12,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface SlackConfirmEmailProps { validationCode?: string; diff --git a/apps/demo/emails/newsletters/codepen-challengers.tsx b/apps/demo/emails/newsletters/codepen-challengers.tsx index 9b8e13e190..d72e903041 100644 --- a/apps/demo/emails/newsletters/codepen-challengers.tsx +++ b/apps/demo/emails/newsletters/codepen-challengers.tsx @@ -13,7 +13,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` diff --git a/apps/demo/emails/newsletters/google-play-policy-update.tsx b/apps/demo/emails/newsletters/google-play-policy-update.tsx index 560f125915..ce670bf400 100644 --- a/apps/demo/emails/newsletters/google-play-policy-update.tsx +++ b/apps/demo/emails/newsletters/google-play-policy-update.tsx @@ -12,7 +12,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` @@ -101,7 +100,9 @@ export const GooglePlayPolicyUpdateEmail = () => (
- Connect with us + + Connect with us + ( - + + +
diff --git a/apps/demo/emails/newsletters/stack-overflow-tips.tsx b/apps/demo/emails/newsletters/stack-overflow-tips.tsx index 14ed435a33..f7819747ea 100644 --- a/apps/demo/emails/newsletters/stack-overflow-tips.tsx +++ b/apps/demo/emails/newsletters/stack-overflow-tips.tsx @@ -13,7 +13,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface StackOverflowTipsEmailProps { tips?: { id: number; description: string }[]; diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx index cd294465de..ee85b69b38 100644 --- a/apps/demo/emails/notifications/github-access-token.tsx +++ b/apps/demo/emails/notifications/github-access-token.tsx @@ -10,7 +10,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface GithubAccessTokenEmailProps { username?: string; diff --git a/apps/demo/emails/notifications/vercel-invite-user.tsx b/apps/demo/emails/notifications/vercel-invite-user.tsx index 562cfc01d2..bc52440011 100644 --- a/apps/demo/emails/notifications/vercel-invite-user.tsx +++ b/apps/demo/emails/notifications/vercel-invite-user.tsx @@ -15,7 +15,6 @@ import { Tailwind, Text, } from '@react-email/components'; -import * as React from 'react'; interface VercelInviteUserEmailProps { username?: string; diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx index 0275a412e9..ae34259961 100644 --- a/apps/demo/emails/notifications/yelp-recent-login.tsx +++ b/apps/demo/emails/notifications/yelp-recent-login.tsx @@ -12,7 +12,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface YelpRecentLoginEmailProps { userFirstName?: string; diff --git a/apps/demo/emails/receipts/apple-receipt.tsx b/apps/demo/emails/receipts/apple-receipt.tsx index b0112c1b18..958356e724 100644 --- a/apps/demo/emails/receipts/apple-receipt.tsx +++ b/apps/demo/emails/receipts/apple-receipt.tsx @@ -12,7 +12,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` diff --git a/apps/demo/emails/reset-password/dropbox-reset-password.tsx b/apps/demo/emails/reset-password/dropbox-reset-password.tsx index c98772c0ce..120207e501 100644 --- a/apps/demo/emails/reset-password/dropbox-reset-password.tsx +++ b/apps/demo/emails/reset-password/dropbox-reset-password.tsx @@ -10,7 +10,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface DropboxResetPasswordEmailProps { userFirstname?: string; diff --git a/apps/demo/emails/reset-password/twitch-reset-password.tsx b/apps/demo/emails/reset-password/twitch-reset-password.tsx index 524febe9c1..60992bfc1d 100644 --- a/apps/demo/emails/reset-password/twitch-reset-password.tsx +++ b/apps/demo/emails/reset-password/twitch-reset-password.tsx @@ -11,7 +11,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface TwitchResetPasswordEmailProps { username?: string; diff --git a/apps/demo/emails/reviews/airbnb-review.tsx b/apps/demo/emails/reviews/airbnb-review.tsx index 71d14c3189..9180aab91e 100644 --- a/apps/demo/emails/reviews/airbnb-review.tsx +++ b/apps/demo/emails/reviews/airbnb-review.tsx @@ -12,7 +12,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface AirbnbReviewEmailProps { authorName?: string; diff --git a/apps/demo/emails/reviews/amazon-review.tsx b/apps/demo/emails/reviews/amazon-review.tsx index 023fa62311..08fb4a2ffb 100644 --- a/apps/demo/emails/reviews/amazon-review.tsx +++ b/apps/demo/emails/reviews/amazon-review.tsx @@ -12,7 +12,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface AmazonReviewEmailProps { titleText?: string; diff --git a/apps/demo/emails/welcome/koala-welcome.tsx b/apps/demo/emails/welcome/koala-welcome.tsx index ebb69abc43..5ec1ebe0bc 100644 --- a/apps/demo/emails/welcome/koala-welcome.tsx +++ b/apps/demo/emails/welcome/koala-welcome.tsx @@ -10,7 +10,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface KoalaWelcomeEmailProps { userFirstname: string; diff --git a/apps/demo/emails/welcome/stripe-welcome.tsx b/apps/demo/emails/welcome/stripe-welcome.tsx index fd94f58ae8..c19d2f4543 100644 --- a/apps/demo/emails/welcome/stripe-welcome.tsx +++ b/apps/demo/emails/welcome/stripe-welcome.tsx @@ -11,7 +11,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` diff --git a/apps/web/src/app/components/page.tsx b/apps/web/src/app/components/page.tsx index 0b36755da8..63f2e7afe9 100644 --- a/apps/web/src/app/components/page.tsx +++ b/apps/web/src/app/components/page.tsx @@ -2,7 +2,6 @@ import classNames from 'classnames'; import type { Metadata } from 'next'; import dynamic from 'next/dynamic'; import Link from 'next/link'; -import React from 'react'; import { componentsStructure } from '../../../components/structure'; import PageTransition from '../../components/page-transition'; import { Spotlight } from '../../components/spotlight'; diff --git a/apps/web/src/components/logo.tsx b/apps/web/src/components/logo.tsx index ca5be2c365..8d309ad796 100644 --- a/apps/web/src/components/logo.tsx +++ b/apps/web/src/components/logo.tsx @@ -1,5 +1,3 @@ -import * as React from 'react'; - export const Logo = () => { return ( diff --git a/benchmarks/preview-server/src/local-vs-2.1.7-canary.2-on-startup.ts b/benchmarks/preview-server/src/local-vs-2.1.7-canary.2-on-startup.ts index ebbaa3d807..457a07b7e4 100644 --- a/benchmarks/preview-server/src/local-vs-2.1.7-canary.2-on-startup.ts +++ b/benchmarks/preview-server/src/local-vs-2.1.7-canary.2-on-startup.ts @@ -2,7 +2,6 @@ import { promises as fs } from 'node:fs'; import path from 'node:path'; import { Bench } from 'tinybench'; import { runServer } from './utils/run-server'; -import { runServerAndFetchPreviewPage } from './utils/run-server-and-fetch-preview-page'; const pathToCanaryCliScript = path.resolve( __dirname, diff --git a/benchmarks/preview-server/src/local-vs-2.1.7-canary.2.ts b/benchmarks/preview-server/src/local-vs-2.1.7-canary.2.ts index 815ec8b700..d79d698061 100644 --- a/benchmarks/preview-server/src/local-vs-2.1.7-canary.2.ts +++ b/benchmarks/preview-server/src/local-vs-2.1.7-canary.2.ts @@ -2,7 +2,6 @@ import { promises as fs } from 'node:fs'; import path from 'node:path'; import { Bench } from 'tinybench'; import { runServer } from './utils/run-server'; -import { runServerAndFetchPreviewPage } from './utils/run-server-and-fetch-preview-page'; const pathToCanaryCliScript = path.resolve( __dirname, diff --git a/biome.json b/biome.json index ca9e37d901..4410028d8e 100644 --- a/biome.json +++ b/biome.json @@ -22,7 +22,7 @@ "noAutofocus": "off" }, "nursery": { - "useSortedClasses": "warn" + "useSortedClasses": "off" }, "suspicious": { "noArrayIndexKey": "off", @@ -30,6 +30,7 @@ "noAssignInExpressions": "off" }, "correctness": { + "noUnusedImports": "warn", "useExhaustiveDependencies": "off", "useJsxKeyInIterable": "off", "noChildrenProp": "off" diff --git a/package.json b/package.json index ab9f87f084..9332890414 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "@types/node": "22.10.2", "@types/react": "19.0.1", "@types/react-dom": "19.0.1", - "eslint": "8.50.0", "happy-dom": "15.10.2", "prettier": "3.4.2", "prettier-plugin-tailwindcss": "0.6.6", diff --git a/packages/create-email/CHANGELOG.md b/packages/create-email/CHANGELOG.md index 62ef90d8e7..b431c00efa 100644 --- a/packages/create-email/CHANGELOG.md +++ b/packages/create-email/CHANGELOG.md @@ -1,5 +1,17 @@ # create-email +## 1.0.0-alpha.3 + +### Patch Changes + +- react-email@4.0.0-alpha.4 + +## 1.0.0-alpha.2 + +## 1.0.0-alpha.1 + +## 1.0.0-alpha.0 + ## 0.1.9 ## 0.1.9-canary.2 diff --git a/packages/create-email/package.json b/packages/create-email/package.json index a4b0ad14f1..49dd5ae38f 100644 --- a/packages/create-email/package.json +++ b/packages/create-email/package.json @@ -1,6 +1,6 @@ { "name": "create-email", - "version": "0.1.9", + "version": "1.0.0-alpha.3", "description": "The easiest way to get started with React Email", "main": "src/index.js", "type": "module", diff --git a/packages/create-email/template/CHANGELOG.md b/packages/create-email/template/CHANGELOG.md index 2c1c09427c..d5bd7f0b79 100644 --- a/packages/create-email/template/CHANGELOG.md +++ b/packages/create-email/template/CHANGELOG.md @@ -1,5 +1,29 @@ # react-email-starter +## 1.0.0-alpha.3 + +### Patch Changes + +- react-email@4.0.0-alpha.4 + +## 1.0.0-alpha.2 + +### Patch Changes + +- df0940a: react-email@4.0.0-alpha.3 + +## 1.0.0-alpha.1 + +### Patch Changes + +- react-email@4.0.0-alpha.2 + +## 1.0.0-alpha.0 + +### Major Changes + +- react-eamil@4.0.0-alpha.1 + ## 0.1.9 ### Patch Changes diff --git a/packages/create-email/template/emails/notion-magic-link.tsx b/packages/create-email/template/emails/notion-magic-link.tsx index 1e00ac2b29..3442f4f03b 100644 --- a/packages/create-email/template/emails/notion-magic-link.tsx +++ b/packages/create-email/template/emails/notion-magic-link.tsx @@ -9,7 +9,6 @@ import { Preview, Text, } from '@react-email/components'; -import * as React from 'react'; interface NotionMagicLinkEmailProps { loginCode?: string; diff --git a/packages/create-email/template/emails/plaid-verify-identity.tsx b/packages/create-email/template/emails/plaid-verify-identity.tsx index cdcd26cf72..a46f8ae786 100644 --- a/packages/create-email/template/emails/plaid-verify-identity.tsx +++ b/packages/create-email/template/emails/plaid-verify-identity.tsx @@ -9,7 +9,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; interface PlaidVerifyIdentityEmailProps { validationCode?: string; diff --git a/packages/create-email/template/emails/stripe-welcome.tsx b/packages/create-email/template/emails/stripe-welcome.tsx index cfff102d9f..6daa18362f 100644 --- a/packages/create-email/template/emails/stripe-welcome.tsx +++ b/packages/create-email/template/emails/stripe-welcome.tsx @@ -11,7 +11,6 @@ import { Section, Text, } from '@react-email/components'; -import * as React from 'react'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` diff --git a/packages/create-email/template/emails/vercel-invite-user.tsx b/packages/create-email/template/emails/vercel-invite-user.tsx index af7380f680..20e91217f9 100644 --- a/packages/create-email/template/emails/vercel-invite-user.tsx +++ b/packages/create-email/template/emails/vercel-invite-user.tsx @@ -15,7 +15,6 @@ import { Tailwind, Text, } from '@react-email/components'; -import * as React from 'react'; interface VercelInviteUserEmailProps { username?: string; diff --git a/packages/create-email/template/package.json b/packages/create-email/template/package.json index 89dbdad4ed..ca6a5fff45 100644 --- a/packages/create-email/template/package.json +++ b/packages/create-email/template/package.json @@ -1,6 +1,6 @@ { "name": "react-email-starter", - "version": "0.1.9", + "version": "1.0.0-alpha.3", "private": true, "scripts": { "build": "email build", @@ -15,6 +15,6 @@ "devDependencies": { "@types/react": "19.0.1", "@types/react-dom": "19.0.1", - "react-email": "workspace:3.0.7" + "react-email": "workspace:4.0.0-alpha.4" } } diff --git a/packages/react-email/CHANGELOG.md b/packages/react-email/CHANGELOG.md index 2c92238f52..efe01bdb1d 100644 --- a/packages/react-email/CHANGELOG.md +++ b/packages/react-email/CHANGELOG.md @@ -1,5 +1,39 @@ # react-email +## 4.0.0-alpha.4 + +### Minor Changes + +- 4d70ddd: add spam checker on the sidebar + +## 4.0.0-alpha.3 + +### Patch Changes + +- df0940a: Fix code view contrast + +## 4.0.0-alpha.2 + +### Minor Changes + +- e4eeb18: Make the width and height for the preview of the email customizable + +## 4.0.0-alpha.1 + +### Minor Changes + +- c77f635: Add image validation checking + +### Patch Changes + +- 498e816: Fix padding on the file tree + +## 4.0.0-alpha.0 + +### Major Changes + +- f7d352e: Added toolbar with a link checker + ## 3.0.7 ### Patch Changes diff --git a/packages/react-email/package.json b/packages/react-email/package.json index c2b81a2ab2..512e64555b 100644 --- a/packages/react-email/package.json +++ b/packages/react-email/package.json @@ -1,16 +1,17 @@ { "name": "react-email", - "version": "3.0.7", + "version": "4.0.0-alpha.4", "description": "A live preview of your emails right in your browser.", "bin": { "email": "./dist/cli/index.js" }, "scripts": { "build": "tsup-node && node build-preview-server.mjs", + "clean": "rm -rf dist", "dev": "tsup-node --watch", + "dev:preview": "cd ../../apps/demo && tsx ../../packages/react-email/src/cli/index.ts dev", "test": "vitest run", - "test:watch": "vitest", - "clean": "rm -rf dist" + "test:watch": "vitest" }, "license": "MIT", "repository": { @@ -23,8 +24,8 @@ "node": ">=18.0.0" }, "dependencies": { - "@babel/core": "7.24.5", "@babel/parser": "7.24.5", + "@babel/traverse": "7.25.6", "chalk": "4.1.2", "chokidar": "4.0.3", "commander": "11.1.0", @@ -33,21 +34,27 @@ "glob": "10.3.4", "log-symbols": "4.1.0", "mime-types": "2.1.35", - "next": "15.1.2", + "next": "15.1.7", "normalize-path": "3.0.0", "ora": "5.4.1", + "react": "^19", + "react-dom": "^19", "socket.io": "4.8.1" }, "devDependencies": { + "@lottiefiles/dotlottie-react": "0.12.3", "@radix-ui/colors": "1.0.1", "@radix-ui/react-collapsible": "1.1.0", + "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-popover": "1.1.1", "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-tabs": "1.1.1", "@radix-ui/react-toggle-group": "1.1.0", "@radix-ui/react-tooltip": "1.1.2", "@react-email/render": "workspace:*", "@swc/core": "1.4.15", "@types/babel__core": "7.20.5", + "@types/babel__traverse": "*", "@types/fs-extra": "11.0.1", "@types/mime-types": "2.1.4", "@types/node": "22.10.2", @@ -59,21 +66,24 @@ "autoprefixer": "10.4.20", "clsx": "2.1.0", "framer-motion": "12.0.0-alpha.2", + "node-html-parser": "6.1.13", "postcss": "8.4.40", + "prettier-plugin-tailwindcss": "0.6.6", + "pretty-bytes": "6.1.1", "prism-react-renderer": "2.1.0", "module-punycode": "npm:punycode@2.3.1", - "react": "^19", - "react-dom": "^19", "sharp": "0.33.3", "socket.io-client": "4.8.0", "sonner": "1.7.1", "source-map-js": "1.0.2", + "spamc": "0.0.5", "stacktrace-parser": "0.1.10", "tailwind-merge": "2.2.0", "tailwindcss": "3.4.0", "tsup": "7.2.0", "tsx": "4.9.0", "typescript": "5.1.6", + "use-debounce": "10.0.4", "vitest": "1.1.3" } } diff --git a/packages/react-email/src/actions/email-validation/check-images.spec.tsx b/packages/react-email/src/actions/email-validation/check-images.spec.tsx new file mode 100644 index 0000000000..f70805d8e2 --- /dev/null +++ b/packages/react-email/src/actions/email-validation/check-images.spec.tsx @@ -0,0 +1,89 @@ +import { render } from '@react-email/render'; +import { type ImageCheckingResult, checkImages } from './check-images'; + +test('checkImages()', async () => { + expect( + await checkImages( + await render( +
+ {/* biome-ignore lint/a11y/useAltText: This is intentional to test the checking for accessibility */} + , + codepen challenges + , +
, + ), + 'https://demo.react.email', + ), + ).toEqual([ + { + source: 'https://resend.com/static/brand/resend-icon-white.png', + checks: [ + { + passed: false, + type: 'accessibility', + metadata: { + alt: undefined, + }, + }, + { + passed: true, + type: 'syntax', + }, + { + passed: true, + type: 'security', + }, + { + passed: true, + type: 'fetch_attempt', + metadata: { + fetchStatusCode: 200, + }, + }, + { + passed: true, + type: 'image_size', + metadata: { + byteCount: 23_138, + }, + }, + ], + status: 'warning', + }, + { + checks: [ + { + metadata: { + alt: 'codepen challenges', + }, + passed: true, + type: 'accessibility', + }, + { + passed: true, + type: 'syntax', + }, + { + passed: true, + type: 'security', + }, + { + metadata: { + fetchStatusCode: 200, + }, + passed: true, + type: 'fetch_attempt', + }, + { + metadata: { + byteCount: 111_922, + }, + passed: true, + type: 'image_size', + }, + ], + source: '/static/codepen-challengers.png', + status: 'success', + }, + ] satisfies ImageCheckingResult[]); +}); diff --git a/packages/react-email/src/actions/email-validation/check-images.ts b/packages/react-email/src/actions/email-validation/check-images.ts new file mode 100644 index 0000000000..4c0d68b41b --- /dev/null +++ b/packages/react-email/src/actions/email-validation/check-images.ts @@ -0,0 +1,141 @@ +'use server'; + +import type { IncomingMessage } from 'node:http'; +import { parse } from 'node-html-parser'; +import { quickFetch } from './quick-fetch'; + +type Check = { passed: boolean } & ( + | { + type: 'accessibility'; + metadata: { + alt: string | undefined; + }; + } + | { + type: 'fetch_attempt'; + metadata: { + fetchStatusCode: number | undefined; + }; + } + | { + type: 'image_size'; + metadata: { + byteCount: number | undefined; + }; + } + | { + type: 'syntax'; + } + | { + type: 'security'; + } +); + +export interface ImageCheckingResult { + status: 'success' | 'warning' | 'error'; + source: string; + checks: Check[]; +} + +const getResponseSizeInBytes = async (res: IncomingMessage) => { + let totalBytes = 0; + for await (const chunk of res) { + totalBytes += chunk.byteLength; + } + return totalBytes; +}; + +export const checkImages = async (code: string, base: string) => { + const ast = parse(code); + + const imageCheckingResults: ImageCheckingResult[] = []; + + const images = ast.querySelectorAll('img'); + for await (const image of images) { + const rawSource = image.attributes.src; + if (!rawSource) continue; + if (imageCheckingResults.some((result) => result.source === rawSource)) + continue; + + const source = rawSource?.startsWith('/') + ? `${base}${rawSource}` + : rawSource; + + const result: ImageCheckingResult = { + source: rawSource, + status: 'success', + checks: [], + }; + + const alt = image.attributes.alt; + result.checks.push({ + passed: alt !== undefined, + type: 'accessibility', + metadata: { + alt, + }, + }); + if (alt === undefined) { + result.status = 'warning'; + } + + try { + const url = new URL(source); + result.checks.push({ + passed: true, + type: 'syntax', + }); + + if (source.startsWith('https://')) { + result.checks.push({ + passed: true, + type: 'security', + }); + } else { + result.checks.push({ + passed: false, + type: 'security', + }); + result.status = 'warning'; + } + + const res = await quickFetch(url); + const hasSucceeded = res.statusCode?.toString().startsWith('2') ?? false; + + result.checks.push({ + type: 'fetch_attempt', + passed: hasSucceeded, + metadata: { + fetchStatusCode: res.statusCode, + }, + }); + if (!hasSucceeded) { + result.status = res.statusCode?.toString().startsWith('3') + ? 'warning' + : 'error'; + } + + const responseSizeBytes = await getResponseSizeInBytes(res); + result.checks.push({ + type: 'image_size', + passed: responseSizeBytes < 1_048_576, // 1024 x 1024 bytes + metadata: { + byteCount: responseSizeBytes, + }, + }); + if (responseSizeBytes > 1_048_576) { + result.status = 'warning'; + } + } catch (exception) { + result.checks.push({ + passed: false, + type: 'syntax', + }); + result.status = 'error'; + } + + imageCheckingResults.push(result); + } + + return imageCheckingResults; +}; diff --git a/packages/react-email/src/actions/email-validation/check-links.spec.tsx b/packages/react-email/src/actions/email-validation/check-links.spec.tsx new file mode 100644 index 0000000000..9c5631a44b --- /dev/null +++ b/packages/react-email/src/actions/email-validation/check-links.spec.tsx @@ -0,0 +1,91 @@ +import { render } from '@react-email/render'; +import { type LinkCheckingResult, checkLinks } from './check-links'; + +test('checkLinks()', async () => { + expect( + await checkLinks( + await render( +
+ Root + Resend + Notion + Example unsafe +
, + ), + ), + ).toEqual([ + { + status: 'error', + checks: [ + { + type: 'syntax', + passed: false, + }, + ], + link: '/', + }, + { + status: 'success', + checks: [ + { + type: 'syntax', + passed: true, + }, + { + type: 'security', + passed: true, + }, + { + type: 'fetch_attempt', + passed: true, + metadata: { + fetchStatusCode: 200, + }, + }, + ], + link: 'https://resend.com', + }, + { + status: 'warning', + checks: [ + { + type: 'syntax', + passed: true, + }, + { + type: 'security', + passed: true, + }, + { + type: 'fetch_attempt', + metadata: { + fetchStatusCode: 301, + }, + passed: false, + }, + ], + link: 'https://notion.so', + }, + { + status: 'warning', + checks: [ + { + type: 'syntax', + passed: true, + }, + { + type: 'security', + passed: false, + }, + { + type: 'fetch_attempt', + metadata: { + fetchStatusCode: 200, + }, + passed: true, + }, + ], + link: 'http://example.com', + }, + ] satisfies LinkCheckingResult[]); +}); diff --git a/packages/react-email/src/actions/email-validation/check-links.ts b/packages/react-email/src/actions/email-validation/check-links.ts new file mode 100644 index 0000000000..b3589bbc28 --- /dev/null +++ b/packages/react-email/src/actions/email-validation/check-links.ts @@ -0,0 +1,91 @@ +'use server'; + +import { parse } from 'node-html-parser'; +import { quickFetch } from './quick-fetch'; + +type Check = { passed: boolean } & ( + | { + type: 'fetch_attempt'; + metadata: { + fetchStatusCode: number | undefined; + }; + } + | { + type: 'syntax'; + } + | { + type: 'security'; + } +); + +export interface LinkCheckingResult { + status: 'success' | 'warning' | 'error'; + link: string; + checks: Check[]; +} + +export const checkLinks = async (code: string) => { + const ast = parse(code); + + const linkCheckingResults: LinkCheckingResult[] = []; + + const anchors = ast.querySelectorAll('a'); + for await (const anchor of anchors) { + const link = anchor.attributes.href; + if (!link) continue; + if (linkCheckingResults.some((result) => result.link === link)) continue; + if (link.startsWith('mailto:')) continue; + + const result: LinkCheckingResult = { + link, + status: 'success', + checks: [], + }; + + try { + const url = new URL(link); + result.checks.push({ + passed: true, + type: 'syntax', + }); + + if (link.startsWith('https://')) { + result.checks.push({ + passed: true, + type: 'security', + }); + } else { + result.checks.push({ + passed: false, + type: 'security', + }); + result.status = 'warning'; + } + + const res = await quickFetch(url); + const hasSucceeded = res.statusCode?.toString().startsWith('2') ?? false; + result.checks.push({ + type: 'fetch_attempt', + passed: hasSucceeded, + metadata: { + fetchStatusCode: res.statusCode, + }, + }); + if (!hasSucceeded) { + result.status = res.statusCode?.toString().startsWith('3') + ? 'warning' + : 'error'; + } + } catch (exception) { + result.checks.push({ + passed: false, + type: 'syntax', + }); + result.status = 'error'; + } + + linkCheckingResults.push(result); + } + + return linkCheckingResults; +}; diff --git a/packages/react-email/src/actions/email-validation/get-line-and-column-from-index.spec.ts b/packages/react-email/src/actions/email-validation/get-line-and-column-from-index.spec.ts new file mode 100644 index 0000000000..2509e2d74f --- /dev/null +++ b/packages/react-email/src/actions/email-validation/get-line-and-column-from-index.spec.ts @@ -0,0 +1,22 @@ +import { getLineAndColumnFromIndex } from './get-line-and-column-from-index'; + +test('getLineAndColumnFromIndex()', () => { + const code = `import { SomethingElse } from 'somewhere'; + +const myConstant = 'what'; + +const MyComponent = () => { + return +
+ Hello World!{' '} + {myConstant} +
+ ; +}`; + const [line, column] = getLineAndColumnFromIndex( + code, + code.indexOf('Hello World!'), + ); + expect(line).toBe(8); + expect(column).toBe(10); +}); diff --git a/packages/react-email/src/actions/email-validation/get-line-and-column-from-index.ts b/packages/react-email/src/actions/email-validation/get-line-and-column-from-index.ts new file mode 100644 index 0000000000..46cb4fc80f --- /dev/null +++ b/packages/react-email/src/actions/email-validation/get-line-and-column-from-index.ts @@ -0,0 +1,43 @@ +const splitByLines = (text: string) => { + const properSplit: string[] = []; + const unevenSplit = text.split(/(?\n|\r|\r\n)/); + + for (const [i, segment] of unevenSplit.entries()) { + if (i % 2 === 0) { + let segmentToInsert = segment; + if (i + 1 < unevenSplit.length) { + segmentToInsert += unevenSplit[i + 1]; + } + properSplit.push(segmentToInsert); + } + } + + return properSplit; +}; + +export const getLineAndColumnFromIndex = ( + code: string, + index: number, +): [line: number, column: number] => { + const lines = splitByLines(code); + + let lineNumber = 1; + const line = () => { + const l = lines[lineNumber - 1]; + if (l === undefined) + throw new Error( + 'Could not find the line for a specific index in the code', + { cause: { lines, lineNumber, index } }, + ); + return l; + }; + let charactersUpToLineStart = 0; + while (charactersUpToLineStart + line().length < index) { + charactersUpToLineStart += line().length; + lineNumber++; + } + + const columnNumber = index - charactersUpToLineStart + 1; + + return [lineNumber, columnNumber]; +}; diff --git a/packages/react-email/src/actions/email-validation/quick-fetch.ts b/packages/react-email/src/actions/email-validation/quick-fetch.ts new file mode 100644 index 0000000000..f39f504419 --- /dev/null +++ b/packages/react-email/src/actions/email-validation/quick-fetch.ts @@ -0,0 +1,12 @@ +import type { IncomingMessage } from 'node:http'; +import http from 'node:http'; +import https from 'node:https'; + +export const quickFetch = (url: URL) => { + return new Promise((resolve) => { + const caller = url.protocol === 'https:' ? https : http; + caller.get(url, (res) => { + resolve(res); + }); + }); +}; diff --git a/packages/react-email/src/actions/render-email-by-path.tsx b/packages/react-email/src/actions/render-email-by-path.tsx index 95413a383e..c93b75f091 100644 --- a/packages/react-email/src/actions/render-email-by-path.tsx +++ b/packages/react-email/src/actions/render-email-by-path.tsx @@ -3,13 +3,17 @@ import fs from 'node:fs'; import path from 'node:path'; import chalk from 'chalk'; import logSymbols from 'log-symbols'; +import * as React from 'react'; import ora from 'ora'; import { getEmailComponent } from '../utils/get-email-component'; import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap'; import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping'; import type { ErrorObject } from '../utils/types/error-object'; +import { packageLocation } from '../utils/emails-directory-absolute-path'; export interface RenderedEmailMetadata { + element: React.ReactElement; + markup: string; plainText: string; reactMarkup: string; @@ -18,8 +22,8 @@ export interface RenderedEmailMetadata { export type EmailRenderingResult = | RenderedEmailMetadata | { - error: ErrorObject; - }; + error: ErrorObject; + }; const cache = new Map(); @@ -43,7 +47,10 @@ export const renderEmailByPath = async ( registerSpinnerAutostopping(spinner); } - const componentResult = await getEmailComponent(emailPath); + const componentResult = await getEmailComponent(emailPath, { + overriddenDependencies: [/^react/], + overriddenDependenciesResolveDir: packageLocation, + }); if ('error' in componentResult) { spinner?.stopAndPersist({ @@ -63,11 +70,12 @@ export const renderEmailByPath = async ( const previewProps = Email.PreviewProps || {}; const EmailComponent = Email as React.FC; try { - const markup = await render(createElement(EmailComponent, previewProps), { + const element = createElement(EmailComponent, previewProps); + const markup = await render(element, { pretty: true, }); const plainText = await render( - createElement(EmailComponent, previewProps), + React.createElement(EmailComponent, previewProps), { plainText: true, }, @@ -90,6 +98,10 @@ export const renderEmailByPath = async ( }); const renderingResult = { + // TODO: add some way to map between React 18 and 19 elements, as this currently is going to break + // with React 18 + element, + // This ensures that no null byte character ends up in the rendered // markup making users suspect of any issues. These null byte characters // only seem to happen with React 18, as it has no similar incident with React 19. diff --git a/packages/react-email/src/animated-icons-data/help.json b/packages/react-email/src/animated-icons-data/help.json new file mode 100644 index 0000000000..9bda45d03d --- /dev/null +++ b/packages/react-email/src/animated-icons-data/help.json @@ -0,0 +1,1082 @@ +{ + "v": "5.12.1", + "fr": 60, + "ip": 0, + "op": 60, + "w": 500, + "h": 500, + "nm": "system-regular-19-book", + "ddd": 0, + "assets": [ + { + "id": "comp_1", + "nm": "hover-book", + "fr": 60, + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 3, + "nm": "NULL ", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 0, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.4], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "t": 1, + "s": [0] + }, + { + "i": { "x": [0.4], "y": [1] }, + "o": { "x": [0.6], "y": [0] }, + "t": 13, + "s": [9] + }, + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.6], "y": [0] }, + "t": 29, + "s": [-11] + }, + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.167], "y": [0] }, + "t": 51, + "s": [5] + }, + { "t": 60, "s": [0] } + ], + "ix": 10 + }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.4, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 1, + "s": [143, 379, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.4, "y": 1 }, + "o": { "x": 0.6, "y": 0 }, + "t": 13, + "s": [176, 379, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.6, "y": 0 }, + "t": 29, + "s": [114, 379, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.167, "y": 0 }, + "t": 51, + "s": [157, 379, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 60, "s": [143, 379, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [50, 50, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "ip": 1, + "op": 300, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "parent": 1, + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [157.013, -63.881, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [250.013, 265.119, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [-31.641, 0], + [0, 0], + [0, 0], + [0, 0], + [11.51, 0], + [0, 0], + [0, -34.52], + [0, 0] + ], + "o": [ + [0, -31.641], + [0, 0], + [0, 0], + [0, 0], + [0, -11.51], + [0, 0], + [-34.53, 0], + [0, 0], + [0, 0] + ], + "v": [ + [-151.042, 164.074], + [-93.751, 106.782], + [151.042, 106.782], + [151.042, 106.786], + [151.042, -143.234], + [130.202, -164.074], + [-88.528, -164.074], + [-151.038, -101.564], + [-151.038, 160.816] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "tm", + "s": { "a": 0, "k": 0, "ix": 1 }, + "e": { "a": 0, "k": 100, "ix": 2 }, + "o": { "a": 0, "k": 0, "ix": 3 }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim", + "hd": false + }, + { + "ty": "tm", + "s": { "a": 0, "k": 0, "ix": 1 }, + "e": { "a": 0, "k": 100, "ix": 2 }, + "o": { "a": 0, "k": 0, "ix": 3 }, + "m": 1, + "ix": 3, + "nm": "Trim Paths 2", + "mn": "ADBE Vector Filter - Trim", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-19-book').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 31.3, "ix": 5 }, + "lc": 2, + "lj": 2, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [250.018, 221.345], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 4, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [[0, 0], [0, 0]], + "o": [[0, 0], [0, 0]], + "v": [[-67.709, 0], [67.709, 0]], + "c": false + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-19-book').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 31.3, "ix": 5 }, + "lc": 2, + "lj": 2, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [250.004, 140.566], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 2", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 2, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 1, + "op": 60, + "st": 16, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "parent": 1, + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [157.068, -23.371, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0.051, -79.791, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [0, -31.641], + [0, 0], + [-31.641, 0], + [0, 0], + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 31.641], + [0, 0], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [-151.042, 0], + [-151.042, 0.001], + [-93.75, 57.292], + [151.042, 57.292], + [151.123, -45.284], + [151.003, -56.411] + ], + "c": false + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "tm", + "s": { "a": 0, "k": 0, "ix": 1 }, + "e": { "a": 0, "k": 100, "ix": 2 }, + "o": { "a": 0, "k": 0, "ix": 3 }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-19-book').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 31.3, "ix": 5 }, + "lc": 2, + "lj": 2, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 1, + "op": 60, + "st": 16, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 4, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [250.002, 250.002, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [250, 250, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [2083, 2083, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [-1.24, 0], + [0, 0], + [0, -0.14], + [0, 0], + [0, 0], + [0.56, -0.41] + ], + "o": [ + [0, -1.24], + [0, 0], + [0.14, 0], + [0, 0], + [0, 0], + [-0.74, 0], + [0, 0] + ], + "v": [ + [-6.5, -6.25], + [-4.25, -8.5], + [6.25, -8.5], + [6.5, -8.25], + [6.5, 3], + [-4.5, 3], + [-6.5, 3.64] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ind": 1, + "ty": "sh", + "ix": 2, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [0, 0], + [0, 0], + [0, 1.1], + [-1.1, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0], + [-1.1, 0], + [0, -1.1], + [0, 0], + [0, 0] + ], + "v": [ + [6.5, 6.34], + [6.5, 8.5], + [-4.5, 8.5], + [-6.5, 6.5], + [-4.5, 4.5], + [6.5, 4.5] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 2", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ind": 2, + "ty": "sh", + "ix": 3, + "ks": { + "a": 0, + "k": { + "i": [ + [0.97, 0], + [0, 0], + [0, -2.07], + [0, 0], + [0, 0], + [0, -0.05], + [-1.93, 0], + [0, 0], + [0, 0.41], + [0, 0], + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [-2.07, 0], + [0, 0], + [0, 0], + [-0.01, 0.05], + [0, 1.93], + [0, 0], + [0.42, 0], + [0, 0], + [0, 0], + [0, 0], + [0, -0.97] + ], + "v": [ + [6.25, -10], + [-4.25, -10], + [-8, -6.25], + [-8, 6.34], + [-7.99, 6.34], + [-8, 6.5], + [-4.5, 10], + [7.25, 10], + [8, 9.25], + [8, 6.34], + [8, 3.75], + [8, -8.25] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 3", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-19-book').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [250, 250], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 4, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-0.41, 0], + [0, 0], + [0, 0.41], + [0.41, 0], + [0, 0], + [0, -0.42] + ], + "o": [ + [0, 0], + [0.41, 0], + [0, -0.41], + [0, 0], + [-0.41, 0], + [0, 0.42] + ], + "v": [ + [-3.25, 0.75], + [3.25, 0.75], + [4, 0], + [3.25, -0.75], + [-3.25, -0.75], + [-4, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-19-book').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [250, 244.75], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 2", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 2, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [250, 244.75], "ix": 2 }, + "a": { "a": 0, "k": [250, 244.75], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 1, + "st": -60, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 5, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [250.002, 250.002, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [250, 250, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [2083, 2083, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [-1.24, 0], + [0, 0], + [0, -0.14], + [0, 0], + [0, 0], + [0.56, -0.41] + ], + "o": [ + [0, -1.24], + [0, 0], + [0.14, 0], + [0, 0], + [0, 0], + [-0.74, 0], + [0, 0] + ], + "v": [ + [-6.5, -6.25], + [-4.25, -8.5], + [6.25, -8.5], + [6.5, -8.25], + [6.5, 3], + [-4.5, 3], + [-6.5, 3.64] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ind": 1, + "ty": "sh", + "ix": 2, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [0, 0], + [0, 0], + [0, 1.1], + [-1.1, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0], + [-1.1, 0], + [0, -1.1], + [0, 0], + [0, 0] + ], + "v": [ + [6.5, 6.34], + [6.5, 8.5], + [-4.5, 8.5], + [-6.5, 6.5], + [-4.5, 4.5], + [6.5, 4.5] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 2", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ind": 2, + "ty": "sh", + "ix": 3, + "ks": { + "a": 0, + "k": { + "i": [ + [0.97, 0], + [0, 0], + [0, -2.07], + [0, 0], + [0, 0], + [0, -0.05], + [-1.93, 0], + [0, 0], + [0, 0.41], + [0, 0], + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [-2.07, 0], + [0, 0], + [0, 0], + [-0.01, 0.05], + [0, 1.93], + [0, 0], + [0.42, 0], + [0, 0], + [0, 0], + [0, 0], + [0, -0.97] + ], + "v": [ + [6.25, -10], + [-4.25, -10], + [-8, -6.25], + [-8, 6.34], + [-7.99, 6.34], + [-8, 6.5], + [-4.5, 10], + [7.25, 10], + [8, 9.25], + [8, 6.34], + [8, 3.75], + [8, -8.25] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 3", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-19-book').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [250, 250], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 4, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-0.41, 0], + [0, 0], + [0, 0.41], + [0.41, 0], + [0, 0], + [0, -0.42] + ], + "o": [ + [0, 0], + [0.41, 0], + [0, -0.41], + [0, 0], + [-0.41, 0], + [0, 0.42] + ], + "v": [ + [-3.25, 0.75], + [3.25, 0.75], + [4, 0], + [3.25, -0.75], + [-3.25, -0.75], + [-4, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-19-book').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [250, 244.75], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 2", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 2, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [250, 244.75], "ix": 2 }, + "a": { "a": 0, "k": [250, 244.75], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 60, + "op": 109, + "st": 0, + "ct": 1, + "bm": 0 + } + ] + } + ], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 3, + "nm": "control", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 0, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [0, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "ef": [ + { + "ty": 5, + "nm": "primary", + "np": 3, + "mn": "ADBE Color Control", + "ix": 1, + "en": 1, + "ef": [ + { + "ty": 2, + "nm": "Color", + "mn": "ADBE Color Control-0001", + "ix": 1, + "v": { "a": 0, "k": [0.937, 0.969, 1], "ix": 1 } + } + ] + } + ], + "ip": 0, + "op": 271, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 0, + "nm": "hover-book", + "refId": "comp_1", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [250, 250, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [250, 250, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "w": 500, + "h": 500, + "ip": 0, + "op": 70, + "st": 0, + "bm": 0 + } + ], + "markers": [{ "tm": 0, "cm": "default:hover-book", "dr": 60 }], + "props": {} +} diff --git a/packages/react-email/src/animated-icons-data/link.json b/packages/react-email/src/animated-icons-data/link.json new file mode 100644 index 0000000000..a7a111223d --- /dev/null +++ b/packages/react-email/src/animated-icons-data/link.json @@ -0,0 +1,1309 @@ +{ + "v": "5.12.1", + "fr": 60, + "ip": 0, + "op": 60, + "w": 500, + "h": 500, + "nm": "system-regular-98-link", + "ddd": 0, + "assets": [ + { + "id": "comp_1", + "nm": "hover-link", + "fr": 60, + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [317.005, 213.345, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [21.347, 0], + [16.251, 16.25], + [2.275, 18.624], + [-8.579, 1.048], + [-1.049, -8.58], + [-8.302, -8.302], + [-20.296, 20.297], + [0, 0], + [0, 13.905], + [9.833, 9.833], + [13.905, 0], + [9.832, -9.833], + [0, 0], + [6.111, 6.111], + [-6.111, 6.112], + [0, 0], + [-22.266, 0], + [-15.744, -15.745], + [0, -22.266], + [15.744, -15.744], + [0, 0] + ], + "o": [ + [-21.346, 0], + [-13.292, -13.293], + [-1.049, -8.579], + [8.582, -1.051], + [1.42, 11.619], + [20.298, 20.297], + [0, 0], + [9.833, -9.833], + [0, -13.905], + [-9.832, -9.833], + [-13.905, 0], + [0, 0], + [-6.111, 6.111], + [-6.111, -6.112], + [0, 0], + [15.744, -15.744], + [22.266, 0], + [15.744, 15.744], + [0, 22.266], + [0, 0], + [-16.251, 16.25] + ], + "v": [ + [-37.079, 120.166], + [-96.022, 95.791], + [-119.818, 47.004], + [-106.182, 29.571], + [-88.749, 43.208], + [-73.889, 73.658], + [-0.268, 73.658], + [73.387, 0.003], + [88.635, -36.808], + [73.387, -73.618], + [36.577, -88.866], + [-0.234, -73.619], + [-19.569, -54.283], + [-41.702, -54.283], + [-41.702, -76.416], + [-22.367, -95.751], + [36.577, -120.166], + [95.52, -95.751], + [119.935, -36.808], + [95.52, 22.135], + [21.865, 95.791] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-98-link').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 60, + "op": 300, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [183.016, 287.958, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [22.266, 0], + [15.744, 15.745], + [-32.501, 32.501], + [0, 0], + [-32.502, -32.501], + [-2.275, -18.624], + [8.579, -1.048], + [1.049, 8.58], + [8.303, 8.303], + [20.297, -20.299], + [0, 0], + [-20.298, -20.298], + [-13.905, 0], + [-9.832, 9.833], + [0, 0], + [-6.111, -6.111], + [6.111, -6.112], + [0, 0] + ], + "o": [ + [-22.266, 0], + [-32.501, -32.501], + [0, 0], + [32.502, -32.501], + [13.293, 13.293], + [1.049, 8.579], + [-8.583, 1.05], + [-1.42, -11.618], + [-20.297, -20.297], + [0, 0], + [-20.298, 20.297], + [9.832, 9.833], + [13.905, 0], + [0, 0], + [6.111, -6.111], + [6.111, 6.112], + [0, 0], + [-15.744, 15.744] + ], + "v": [ + [-36.597, 120.166], + [-95.54, 95.751], + [-95.54, -22.135], + [-21.885, -95.791], + [96.002, -95.791], + [119.799, -47.004], + [106.163, -29.571], + [88.73, -43.208], + [73.869, -73.658], + [0.248, -73.658], + [-73.407, -0.003], + [-73.407, 73.619], + [-36.597, 88.867], + [0.214, 73.619], + [19.549, 54.284], + [41.682, 54.284], + [41.682, 76.416], + [22.347, 95.751] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-98-link').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 60, + "op": 300, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [317.005, 213.345, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [21.347, 0], + [16.251, 16.25], + [2.275, 18.624], + [-8.579, 1.048], + [-1.049, -8.58], + [-8.302, -8.302], + [-20.296, 20.297], + [0, 0], + [0, 13.905], + [9.833, 9.833], + [13.905, 0], + [9.832, -9.833], + [0, 0], + [6.111, 6.111], + [-6.111, 6.112], + [0, 0], + [-22.266, 0], + [-15.744, -15.745], + [0, -22.266], + [15.744, -15.744], + [0, 0] + ], + "o": [ + [-21.346, 0], + [-13.292, -13.293], + [-1.049, -8.579], + [8.582, -1.051], + [1.42, 11.619], + [20.298, 20.297], + [0, 0], + [9.833, -9.833], + [0, -13.905], + [-9.832, -9.833], + [-13.905, 0], + [0, 0], + [-6.111, 6.111], + [-6.111, -6.112], + [0, 0], + [15.744, -15.744], + [22.266, 0], + [15.744, 15.744], + [0, 22.266], + [0, 0], + [-16.251, 16.25] + ], + "v": [ + [-37.079, 120.166], + [-96.022, 95.791], + [-119.818, 47.004], + [-106.182, 29.571], + [-88.749, 43.208], + [-73.889, 73.658], + [-0.268, 73.658], + [73.387, 0.003], + [88.635, -36.808], + [73.387, -73.618], + [36.577, -88.866], + [-0.234, -73.619], + [-19.569, -54.283], + [-41.702, -54.283], + [-41.702, -76.416], + [-22.367, -95.751], + [36.577, -120.166], + [95.52, -95.751], + [119.935, -36.808], + [95.52, 22.135], + [21.865, 95.791] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-98-link').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 1, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 4, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [183.016, 287.958, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [22.266, 0], + [15.744, 15.745], + [-32.501, 32.501], + [0, 0], + [-32.502, -32.501], + [-2.275, -18.624], + [8.579, -1.048], + [1.049, 8.58], + [8.303, 8.303], + [20.297, -20.299], + [0, 0], + [-20.298, -20.298], + [-13.905, 0], + [-9.832, 9.833], + [0, 0], + [-6.111, -6.111], + [6.111, -6.112], + [0, 0] + ], + "o": [ + [-22.266, 0], + [-32.501, -32.501], + [0, 0], + [32.502, -32.501], + [13.293, 13.293], + [1.049, 8.579], + [-8.583, 1.05], + [-1.42, -11.618], + [-20.297, -20.297], + [0, 0], + [-20.298, 20.297], + [9.832, 9.833], + [13.905, 0], + [0, 0], + [6.111, -6.111], + [6.111, 6.112], + [0, 0], + [-15.744, 15.744] + ], + "v": [ + [-36.597, 120.166], + [-95.54, 95.751], + [-95.54, -22.135], + [-21.885, -95.791], + [96.002, -95.791], + [119.799, -47.004], + [106.163, -29.571], + [88.73, -43.208], + [73.869, -73.658], + [0.248, -73.658], + [-73.407, -0.003], + [-73.407, 73.619], + [-36.597, 88.867], + [0.214, 73.619], + [19.549, 54.284], + [41.682, 54.284], + [41.682, 76.416], + [22.347, 95.751] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-98-link').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 1, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 5, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.157, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 1, + "s": [317.006, 213.364, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 29, + "s": [337.006, 193.364, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 40, + "s": [307.006, 223.364, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 50.729, + "s": [322.257, 208.113, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 60, "s": [317.006, 213.364, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 1, + "k": [ + { + "i": { "x": 0.157, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 1, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [1.77, 14.482] + ], + "o": [ + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-11.116, -11.116], + [0, 0] + ], + "v": [ + [-30.636, -65.37], + [-11.301, -84.705], + [84.453, -84.705], + [84.453, -84.704], + [84.453, 11.049], + [10.798, 84.705], + [-84.956, 84.705], + [-84.956, 84.704], + [-104.285, 45.086] + ], + "c": false + } + ] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 29, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [1.77, 14.482] + ], + "o": [ + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-11.116, -11.116], + [0, 0] + ], + "v": [ + [-70.636, -25.37], + [-11.301, -84.705], + [84.453, -84.705], + [84.453, -84.704], + [84.453, 11.049], + [10.798, 84.705], + [-84.956, 84.705], + [-84.956, 84.704], + [-104.285, 45.086] + ], + "c": false + } + ] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 40, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [1.77, 14.482] + ], + "o": [ + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-11.116, -11.116], + [0, 0] + ], + "v": [ + [-15.636, -80.37], + [-11.301, -84.705], + [84.453, -84.705], + [84.453, -84.704], + [84.453, 11.049], + [10.798, 84.705], + [-84.956, 84.705], + [-84.956, 84.704], + [-104.285, 45.086] + ], + "c": false + } + ] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 50.729, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [1.77, 14.482] + ], + "o": [ + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-11.116, -11.116], + [0, 0] + ], + "v": [ + [-41.027, -54.978], + [-11.301, -84.705], + [84.453, -84.705], + [84.453, -84.704], + [84.453, 11.049], + [10.798, 84.705], + [-84.956, 84.705], + [-84.956, 84.704], + [-104.285, 45.086] + ], + "c": false + } + ] + }, + { + "t": 60, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [1.77, 14.482] + ], + "o": [ + [0, 0], + [26.442, -26.442], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-11.116, -11.116], + [0, 0] + ], + "v": [ + [-30.636, -65.37], + [-11.301, -84.705], + [84.453, -84.705], + [84.453, -84.704], + [84.453, 11.049], + [10.798, 84.705], + [-84.956, 84.705], + [-84.956, 84.704], + [-104.285, 45.086] + ], + "c": false + } + ] + } + ], + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-98-link').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 31.3, "ix": 5 }, + "lc": 2, + "lj": 2, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 1, + "op": 60, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 6, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.157, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 1, + "s": [182.995, 287.938, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 29, + "s": [162.995, 307.938, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 40, + "s": [192.995, 277.938, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 50.729, + "s": [177.744, 293.189, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 60, "s": [182.995, 287.938, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 1, + "k": [ + { + "i": { "x": 0.157, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 1, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [-1.77, -14.482] + ], + "o": [ + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [11.116, 11.116], + [0, 0] + ], + "v": [ + [30.636, 65.37], + [11.301, 84.705], + [-84.453, 84.705], + [-84.453, 84.704], + [-84.453, -11.049], + [-10.798, -84.705], + [84.956, -84.705], + [84.956, -84.704], + [104.285, -45.086] + ], + "c": false + } + ] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 29, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [-1.77, -14.482] + ], + "o": [ + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [11.116, 11.116], + [0, 0] + ], + "v": [ + [70.636, 25.37], + [11.301, 84.705], + [-84.453, 84.705], + [-84.453, 84.704], + [-84.453, -11.049], + [-10.798, -84.705], + [84.956, -84.705], + [84.956, -84.704], + [104.285, -45.086] + ], + "c": false + } + ] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 40, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [-1.77, -14.482] + ], + "o": [ + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [11.116, 11.116], + [0, 0] + ], + "v": [ + [18.636, 77.37], + [11.301, 84.705], + [-84.453, 84.705], + [-84.453, 84.704], + [-84.453, -11.049], + [-10.798, -84.705], + [84.956, -84.705], + [84.956, -84.704], + [104.285, -45.086] + ], + "c": false + } + ] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 50.729, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [-1.77, -14.482] + ], + "o": [ + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [11.116, 11.116], + [0, 0] + ], + "v": [ + [41.027, 54.978], + [11.301, 84.705], + [-84.453, 84.705], + [-84.453, 84.704], + [-84.453, -11.049], + [-10.798, -84.705], + [84.956, -84.705], + [84.956, -84.704], + [104.285, -45.086] + ], + "c": false + } + ] + }, + { + "t": 60, + "s": [ + { + "i": [ + [0, 0], + [0, 0], + [26.442, 26.442], + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [-1.77, -14.482] + ], + "o": [ + [0, 0], + [-26.442, 26.442], + [0, 0], + [-26.442, -26.442], + [0, 0], + [26.442, -26.442], + [0, 0], + [11.116, 11.116], + [0, 0] + ], + "v": [ + [30.636, 65.37], + [11.301, 84.705], + [-84.453, 84.705], + [-84.453, 84.704], + [-84.453, -11.049], + [-10.798, -84.705], + [84.956, -84.705], + [84.956, -84.704], + [104.285, -45.086] + ], + "c": false + } + ] + } + ], + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-98-link').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 31.3, "ix": 5 }, + "lc": 2, + "lj": 2, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 1, + "op": 60, + "st": 0, + "ct": 1, + "bm": 0 + } + ] + } + ], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 3, + "nm": "control", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 0, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [0, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "ef": [ + { + "ty": 5, + "nm": "primary", + "np": 3, + "mn": "ADBE Color Control", + "ix": 1, + "en": 1, + "ef": [ + { + "ty": 2, + "nm": "Color", + "mn": "ADBE Color Control-0001", + "ix": 1, + "v": { "a": 0, "k": [0.937, 0.969, 1], "ix": 1 } + } + ] + } + ], + "ip": 0, + "op": 131, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 0, + "nm": "hover-link", + "refId": "comp_1", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [250, 250, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [250, 250, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "w": 500, + "h": 500, + "ip": 0, + "op": 70, + "st": 0, + "bm": 0 + } + ], + "markers": [{ "tm": 0, "cm": "default:hover-link", "dr": 60 }], + "props": {} +} diff --git a/packages/react-email/src/animated-icons-data/load.json b/packages/react-email/src/animated-icons-data/load.json new file mode 100644 index 0000000000..0caa406fab --- /dev/null +++ b/packages/react-email/src/animated-icons-data/load.json @@ -0,0 +1,443 @@ +{ + "v": "5.12.1", + "fr": 60, + "ip": 0, + "op": 150, + "w": 144, + "h": 144, + "nm": "system-regular-716-spinner-three-dots", + "ddd": 0, + "assets": [ + { + "id": "comp_1", + "nm": "hover-trapdoor", + "fr": 60, + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Ellipse 31", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.085, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 46, + "s": [120, 72, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.085, "y": 0.085 }, + "o": { "x": 0.373, "y": 0.373 }, + "t": 76, + "s": [120, 23, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.631, "y": 1 }, + "o": { "x": 0.658, "y": 0 }, + "t": 83.572, + "s": [120, 23, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.352, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 104.715, + "s": [120, 87, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.58, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 128.572, + "s": [120, 67, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 150, "s": [120, 72, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [27, 27], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0, 0, 0, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-716-spinner-three-dots').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 9, "ix": 5 }, + "lc": 2, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 28", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 1800, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": "Ellipse 30", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.085, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 23, + "s": [72, 72, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.085, "y": 0.085 }, + "o": { "x": 0.373, "y": 0.373 }, + "t": 53, + "s": [72, 23, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.631, "y": 1 }, + "o": { "x": 0.658, "y": 0 }, + "t": 76, + "s": [72, 23, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.352, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 97.143, + "s": [72, 87, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.58, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 121, + "s": [72, 67, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 142.427734375, "s": [72, 72, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [27, 27], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0, 0, 0, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-716-spinner-three-dots').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 9, "ix": 5 }, + "lc": 2, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 28", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 1800, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": "Ellipse 29", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.085, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 0, + "s": [24, 72, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.085, "y": 0.085 }, + "o": { "x": 0.373, "y": 0.373 }, + "t": 30, + "s": [24, 23, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.631, "y": 1 }, + "o": { "x": 0.658, "y": 0 }, + "t": 70.572, + "s": [24, 23, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.352, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 91.715, + "s": [24, 87, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.58, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 115.572, + "s": [24, 67, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 137, "s": [24, 72, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [27, 27], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0, 0, 0, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-716-spinner-three-dots').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 9, "ix": 5 }, + "lc": 2, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 28", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 1799, + "st": -1, + "ct": 1, + "bm": 0 + } + ] + } + ], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 3, + "nm": "control", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 0, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [0, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "ef": [ + { + "ty": 5, + "nm": "primary", + "np": 3, + "mn": "ADBE Color Control", + "ix": 1, + "en": 1, + "ef": [ + { + "ty": 2, + "nm": "Color", + "mn": "ADBE Color Control-0001", + "ix": 1, + "v": { "a": 0, "k": [0, 0, 0], "ix": 1 } + } + ] + } + ], + "ip": 0, + "op": 2112, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 0, + "nm": "hover-trapdoor", + "refId": "comp_1", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [72, 72, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [72, 72, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "w": 144, + "h": 144, + "ip": 0, + "op": 160, + "st": 0, + "bm": 0 + } + ], + "markers": [{ "tm": 0, "cm": "default:hover-trapdoor", "dr": 150 }], + "props": {} +} diff --git a/packages/react-email/src/animated-icons-data/mail.json b/packages/react-email/src/animated-icons-data/mail.json new file mode 100644 index 0000000000..d7d8bc4cce --- /dev/null +++ b/packages/react-email/src/animated-icons-data/mail.json @@ -0,0 +1,1320 @@ +{ + "v": "5.12.1", + "fr": 60, + "ip": 0, + "op": 60, + "w": 500, + "h": 500, + "nm": "system-regular-191-mail-envelope-close", + "ddd": 0, + "assets": [ + { + "id": "comp_1", + "nm": "hover-mail-closed", + "fr": 60, + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [250, 250, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [0, 0], + [0, 0], + [-21.693, 0], + [-0.002, 0], + [-14.911, 15.919], + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0], + [14.91, 15.92], + [0.001, 0], + [21.692, 0], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [-177.06, 135.395], + [-177.06, -111.435], + [-56.765, 17.006], + [-0.002, 41.695], + [-0.001, 41.695], + [56.763, 17.007], + [177.058, -111.435], + [177.058, 135.395] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ind": 1, + "ty": "sh", + "ix": 2, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [0, 0], + [12.943, 0], + [8.929, 9.534], + [0, 0] + ], + "o": [ + [0, 0], + [-8.929, 9.534], + [-12.943, 0], + [0, 0], + [0, 0] + ], + "v": [ + [156.608, -135.39], + [33.917, -4.39], + [-0.002, 10.395], + [-33.919, -4.39], + [-156.61, -135.39] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 2", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ind": 2, + "ty": "sh", + "ix": 3, + "ks": { + "a": 0, + "k": { + "i": [ + [0.001, 0.083], + [0.019, 0.28], + [0.028, 0.24], + [0.041, 0.249], + [0.056, 0.256], + [0.06, 0.227], + [0.084, 0.259], + [0.084, 0.224], + [0.105, 0.241], + [0.115, 0.232], + [0.118, 0.213], + [0.142, 0.228], + [0.136, 0.197], + [0.158, 0.206], + [0.166, 0.196], + [0.163, 0.176], + [0.205, 0.198], + [0.06, 0.056], + [0.113, 0.1], + [0.225, 0.178], + [0.195, 0.141], + [0.225, 0.145], + [0.218, 0.126], + [0.228, 0.117], + [0.232, 0.105], + [0.238, 0.094], + [0.239, 0.081], + [0.249, 0.071], + [0.246, 0.057], + [0.253, 0.046], + [0.261, 0.034], + [0.246, 0.02], + [0.283, 0.008], + [0.154, 0], + [0, 0], + [0.149, -0.004], + [0.288, -0.024], + [0.237, -0.031], + [0.265, -0.048], + [0.243, -0.057], + [0.249, -0.071], + [0.239, -0.081], + [0.24, -0.095], + [0.228, -0.103], + [0.232, -0.119], + [0.217, -0.125], + [0.217, -0.14], + [0.214, -0.154], + [0.193, -0.153], + [0.214, -0.189], + [0.111, -0.104], + [0.059, -0.057], + [0.194, -0.209], + [0.154, -0.182], + [0.156, -0.204], + [0.147, -0.212], + [0.127, -0.204], + [0.129, -0.234], + [0.109, -0.22], + [0.102, -0.236], + [0.093, -0.248], + [0.073, -0.227], + [0.07, -0.265], + [0.05, -0.229], + [0.043, -0.261], + [0.029, -0.251], + [0.017, -0.243], + [0.005, -0.281], + [0, -0.084], + [0, 0], + [-8.644, 0], + [0, 0], + [0, 8.643], + [0, 0] + ], + "o": [ + [-0.005, -0.281], + [-0.017, -0.243], + [-0.029, -0.251], + [-0.043, -0.261], + [-0.05, -0.229], + [-0.07, -0.265], + [-0.073, -0.227], + [-0.093, -0.247], + [-0.102, -0.237], + [-0.109, -0.219], + [-0.13, -0.234], + [-0.127, -0.204], + [-0.147, -0.212], + [-0.156, -0.204], + [-0.154, -0.182], + [-0.194, -0.209], + [-0.059, -0.057], + [-0.111, -0.104], + [-0.215, -0.19], + [-0.19, -0.151], + [-0.217, -0.156], + [-0.213, -0.137], + [-0.221, -0.128], + [-0.228, -0.117], + [-0.232, -0.105], + [-0.235, -0.093], + [-0.244, -0.083], + [-0.243, -0.069], + [-0.249, -0.058], + [-0.259, -0.047], + [-0.242, -0.031], + [-0.282, -0.023], + [-0.153, -0.004], + [0, 0], + [-0.15, 0], + [-0.289, 0.008], + [-0.24, 0.02], + [-0.267, 0.035], + [-0.247, 0.045], + [-0.251, 0.058], + [-0.244, 0.07], + [-0.243, 0.083], + [-0.233, 0.092], + [-0.237, 0.107], + [-0.224, 0.115], + [-0.222, 0.128], + [-0.222, 0.143], + [-0.198, 0.142], + [-0.224, 0.177], + [-0.113, 0.1], + [-0.06, 0.056], + [-0.205, 0.198], + [-0.163, 0.176], + [-0.166, 0.196], + [-0.158, 0.206], + [-0.136, 0.197], + [-0.142, 0.228], + [-0.119, 0.214], + [-0.114, 0.232], + [-0.105, 0.242], + [-0.084, 0.224], + [-0.084, 0.259], + [-0.06, 0.227], + [-0.056, 0.256], + [-0.041, 0.249], + [-0.028, 0.24], + [-0.019, 0.28], + [-0.001, 0.083], + [0, 0], + [0, 8.643], + [0, 0], + [8.644, 0], + [0, 0], + [0, -0.084] + ], + "v": [ + [208.346, -151.287], + [208.303, -152.127], + [208.245, -152.854], + [208.131, -153.603], + [207.992, -154.382], + [207.817, -155.063], + [207.596, -155.853], + [207.349, -156.528], + [207.064, -157.265], + [206.728, -157.964], + [206.397, -158.618], + [205.979, -159.306], + [205.593, -159.913], + [205.128, -160.536], + [204.651, -161.141], + [204.168, -161.673], + [203.576, -162.287], + [203.406, -162.462], + [203.063, -162.752], + [202.407, -163.307], + [201.827, -163.741], + [201.167, -164.194], + [200.52, -164.587], + [199.848, -164.955], + [199.158, -165.287], + [198.454, -165.586], + [197.744, -165.846], + [197.006, -166.078], + [196.272, -166.266], + [195.521, -166.424], + [194.741, -166.543], + [194.011, -166.624], + [193.163, -166.667], + [192.708, -166.69], + [-192.71, -166.69], + [-193.155, -166.667], + [-194.02, -166.623], + [-194.733, -166.544], + [-195.531, -166.423], + [-196.266, -166.268], + [-197.015, -166.076], + [-197.738, -165.849], + [-198.463, -165.584], + [-199.153, -165.29], + [-199.856, -164.952], + [-200.516, -164.591], + [-201.174, -164.191], + [-201.825, -163.744], + [-202.411, -163.306], + [-203.064, -162.753], + [-203.408, -162.462], + [-203.578, -162.287], + [-204.17, -161.673], + [-204.653, -161.141], + [-205.13, -160.536], + [-205.595, -159.913], + [-205.981, -159.306], + [-206.399, -158.618], + [-206.73, -157.962], + [-207.066, -157.265], + [-207.352, -156.526], + [-207.598, -155.853], + [-207.819, -155.063], + [-207.994, -154.382], + [-208.133, -153.603], + [-208.247, -152.854], + [-208.305, -152.127], + [-208.348, -151.287], + [-208.36, -151.04], + [-208.36, 151.045], + [-192.71, 166.695], + [192.708, 166.695], + [208.358, 151.045], + [208.358, -151.04] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 3", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-191-mail-envelope-close').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 4, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 60, + "op": 300, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [250, 250, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [0, 0], + [0, 0], + [-21.693, 0], + [-0.002, 0], + [-14.911, 15.919], + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0], + [14.91, 15.92], + [0.001, 0], + [21.692, 0], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [-177.06, 135.395], + [-177.06, -111.435], + [-56.765, 17.006], + [-0.002, 41.695], + [-0.001, 41.695], + [56.763, 17.007], + [177.058, -111.435], + [177.058, 135.395] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ind": 1, + "ty": "sh", + "ix": 2, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [0, 0], + [12.943, 0], + [8.929, 9.534], + [0, 0] + ], + "o": [ + [0, 0], + [-8.929, 9.534], + [-12.943, 0], + [0, 0], + [0, 0] + ], + "v": [ + [156.608, -135.39], + [33.917, -4.39], + [-0.002, 10.395], + [-33.919, -4.39], + [-156.61, -135.39] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 2", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ind": 2, + "ty": "sh", + "ix": 3, + "ks": { + "a": 0, + "k": { + "i": [ + [0.001, 0.083], + [0.019, 0.28], + [0.028, 0.24], + [0.041, 0.249], + [0.056, 0.256], + [0.06, 0.227], + [0.084, 0.259], + [0.084, 0.224], + [0.105, 0.241], + [0.115, 0.232], + [0.118, 0.213], + [0.142, 0.228], + [0.136, 0.197], + [0.158, 0.206], + [0.166, 0.196], + [0.163, 0.176], + [0.205, 0.198], + [0.06, 0.056], + [0.113, 0.1], + [0.225, 0.178], + [0.195, 0.141], + [0.225, 0.145], + [0.218, 0.126], + [0.228, 0.117], + [0.232, 0.105], + [0.238, 0.094], + [0.239, 0.081], + [0.249, 0.071], + [0.246, 0.057], + [0.253, 0.046], + [0.261, 0.034], + [0.246, 0.02], + [0.283, 0.008], + [0.154, 0], + [0, 0], + [0.149, -0.004], + [0.288, -0.024], + [0.237, -0.031], + [0.265, -0.048], + [0.243, -0.057], + [0.249, -0.071], + [0.239, -0.081], + [0.24, -0.095], + [0.228, -0.103], + [0.232, -0.119], + [0.217, -0.125], + [0.217, -0.14], + [0.214, -0.154], + [0.193, -0.153], + [0.214, -0.189], + [0.111, -0.104], + [0.059, -0.057], + [0.194, -0.209], + [0.154, -0.182], + [0.156, -0.204], + [0.147, -0.212], + [0.127, -0.204], + [0.129, -0.234], + [0.109, -0.22], + [0.102, -0.236], + [0.093, -0.248], + [0.073, -0.227], + [0.07, -0.265], + [0.05, -0.229], + [0.043, -0.261], + [0.029, -0.251], + [0.017, -0.243], + [0.005, -0.281], + [0, -0.084], + [0, 0], + [-8.644, 0], + [0, 0], + [0, 8.643], + [0, 0] + ], + "o": [ + [-0.005, -0.281], + [-0.017, -0.243], + [-0.029, -0.251], + [-0.043, -0.261], + [-0.05, -0.229], + [-0.07, -0.265], + [-0.073, -0.227], + [-0.093, -0.247], + [-0.102, -0.237], + [-0.109, -0.219], + [-0.13, -0.234], + [-0.127, -0.204], + [-0.147, -0.212], + [-0.156, -0.204], + [-0.154, -0.182], + [-0.194, -0.209], + [-0.059, -0.057], + [-0.111, -0.104], + [-0.215, -0.19], + [-0.19, -0.151], + [-0.217, -0.156], + [-0.213, -0.137], + [-0.221, -0.128], + [-0.228, -0.117], + [-0.232, -0.105], + [-0.235, -0.093], + [-0.244, -0.083], + [-0.243, -0.069], + [-0.249, -0.058], + [-0.259, -0.047], + [-0.242, -0.031], + [-0.282, -0.023], + [-0.153, -0.004], + [0, 0], + [-0.15, 0], + [-0.289, 0.008], + [-0.24, 0.02], + [-0.267, 0.035], + [-0.247, 0.045], + [-0.251, 0.058], + [-0.244, 0.07], + [-0.243, 0.083], + [-0.233, 0.092], + [-0.237, 0.107], + [-0.224, 0.115], + [-0.222, 0.128], + [-0.222, 0.143], + [-0.198, 0.142], + [-0.224, 0.177], + [-0.113, 0.1], + [-0.06, 0.056], + [-0.205, 0.198], + [-0.163, 0.176], + [-0.166, 0.196], + [-0.158, 0.206], + [-0.136, 0.197], + [-0.142, 0.228], + [-0.119, 0.214], + [-0.114, 0.232], + [-0.105, 0.242], + [-0.084, 0.224], + [-0.084, 0.259], + [-0.06, 0.227], + [-0.056, 0.256], + [-0.041, 0.249], + [-0.028, 0.24], + [-0.019, 0.28], + [-0.001, 0.083], + [0, 0], + [0, 8.643], + [0, 0], + [8.644, 0], + [0, 0], + [0, -0.084] + ], + "v": [ + [208.346, -151.287], + [208.303, -152.127], + [208.245, -152.854], + [208.131, -153.603], + [207.992, -154.382], + [207.817, -155.063], + [207.596, -155.853], + [207.349, -156.528], + [207.064, -157.265], + [206.728, -157.964], + [206.397, -158.618], + [205.979, -159.306], + [205.593, -159.913], + [205.128, -160.536], + [204.651, -161.141], + [204.168, -161.673], + [203.576, -162.287], + [203.406, -162.462], + [203.063, -162.752], + [202.407, -163.307], + [201.827, -163.741], + [201.167, -164.194], + [200.52, -164.587], + [199.848, -164.955], + [199.158, -165.287], + [198.454, -165.586], + [197.744, -165.846], + [197.006, -166.078], + [196.272, -166.266], + [195.521, -166.424], + [194.741, -166.543], + [194.011, -166.624], + [193.163, -166.667], + [192.708, -166.69], + [-192.71, -166.69], + [-193.155, -166.667], + [-194.02, -166.623], + [-194.733, -166.544], + [-195.531, -166.423], + [-196.266, -166.268], + [-197.015, -166.076], + [-197.738, -165.849], + [-198.463, -165.584], + [-199.153, -165.29], + [-199.856, -164.952], + [-200.516, -164.591], + [-201.174, -164.191], + [-201.825, -163.744], + [-202.411, -163.306], + [-203.064, -162.753], + [-203.408, -162.462], + [-203.578, -162.287], + [-204.17, -161.673], + [-204.653, -161.141], + [-205.13, -160.536], + [-205.595, -159.913], + [-205.981, -159.306], + [-206.399, -158.618], + [-206.73, -157.962], + [-207.066, -157.265], + [-207.352, -156.526], + [-207.598, -155.853], + [-207.819, -155.063], + [-207.994, -154.382], + [-208.133, -153.603], + [-208.247, -152.854], + [-208.305, -152.127], + [-208.348, -151.287], + [-208.36, -151.04], + [-208.36, 151.045], + [-192.71, 166.695], + [192.708, 166.695], + [208.358, 151.045], + [208.358, -151.04] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 3", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 4, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-191-mail-envelope-close').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Fill", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 4, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 1, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "parent": 5, + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [0, -62.5, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [[0, 0], [0, 0], [0, 0]], + "o": [[0, 0], [0, 0], [0, 0]], + "v": [ + [-192.709, -88.542], + [0.494, 62.54], + [192.709, -88.542] + ], + "c": false + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "tm", + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 25, + "s": [50] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 26, + "s": [57] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 27, + "s": [100] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 39, + "s": [100] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 40, + "s": [57] + }, + { "t": 41, "s": [50] } + ], + "ix": 1 + }, + "e": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 25, + "s": [50] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 26, + "s": [43] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 27, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 39, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 40, + "s": [43] + }, + { "t": 41, "s": [50] } + ], + "ix": 2 + }, + "o": { "a": 0, "k": 0, "ix": 3 }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-191-mail-envelope-close').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 31.3, "ix": 5 }, + "lc": 2, + "lj": 2, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 1, + "op": 60, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 4, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "parent": 5, + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [0, -62.5, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 1, + "k": [ + { + "i": { "x": 0.4, "y": 1 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 23, + "s": [ + { + "i": [[0, 0], [0, 0], [24.646, 26.315], [0, 0]], + "o": [[0, 0], [-24.646, 26.315], [0, 0], [0, 0]], + "v": [ + [192.709, -88.542], + [45.341, 68.806], + [-45.341, 68.806], + [-192.709, -88.542] + ], + "c": false + } + ] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.6, "y": 0 }, + "t": 33, + "s": [ + { + "i": [[0, 0], [0, 0], [24.646, 13.474], [0, 0]], + "o": [[0, 0], [-24.646, 13.474], [0, 0], [0, 0]], + "v": [ + [192.709, -88.542], + [45.341, -7.976], + [-45.341, -7.976], + [-192.709, -88.542] + ], + "c": false + } + ] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 43, + "s": [ + { + "i": [[0, 0], [0, 0], [24.646, 26.315], [0, 0]], + "o": [[0, 0], [-24.646, 26.315], [0, 0], [0, 0]], + "v": [ + [192.709, -88.542], + [45.341, 68.806], + [-45.341, 68.806], + [-192.709, -88.542] + ], + "c": false + } + ] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.333, "y": 0 }, + "t": 52, + "s": [ + { + "i": [[0, 0], [0, 0], [24.646, 19.348], [0, 0]], + "o": [[0, 0], [-24.646, 19.348], [0, 0], [0, 0]], + "v": [ + [192.709, -88.542], + [45.341, 27.149], + [-45.341, 27.149], + [-192.709, -88.542] + ], + "c": false + } + ] + }, + { + "t": 60, + "s": [ + { + "i": [[0, 0], [0, 0], [24.646, 26.315], [0, 0]], + "o": [[0, 0], [-24.646, 26.315], [0, 0], [0, 0]], + "v": [ + [192.709, -88.542], + [45.341, 68.806], + [-45.341, 68.806], + [-192.709, -88.542] + ], + "c": false + } + ] + } + ], + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-191-mail-envelope-close').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 31.3, "ix": 5 }, + "lc": 2, + "lj": 2, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 1, + "op": 60, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 5, + "ty": 4, + "nm": ".primary.design", + "cl": "primary design", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.4], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "t": 1, + "s": [0] + }, + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.6], "y": [0] }, + "t": 12, + "s": [9] + }, + { "t": 27, "s": [0] } + ], + "ix": 10 + }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.4, "y": 1 }, + "o": { "x": 0.333, "y": 0 }, + "t": 1, + "s": [249.999, 250.003, 0], + "to": [0, 9.167, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.6, "y": 0 }, + "t": 10, + "s": [249.999, 305.003, 0], + "to": [0, 0, 0], + "ti": [0, 9.167, 0] + }, + { "t": 25, "s": [249.999, 250.003, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [[0, 0], [0, 0], [0, 0], [0, 0]], + "o": [[0, 0], [0, 0], [0, 0], [0, 0]], + "v": [ + [192.709, 151.042], + [-192.709, 151.042], + [-192.709, -151.042], + [192.709, -151.042] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.937, 0.969, 1, 1], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = comp('system-regular-191-mail-envelope-close').layer('control').effect('primary')('Color');" + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 31.3, "ix": 5 }, + "lc": 2, + "lj": 2, + "bm": 0, + "nm": ".primary", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "cl": "primary" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 1, + "op": 60, + "st": 0, + "ct": 1, + "bm": 0 + } + ] + } + ], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 3, + "nm": "control", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 0, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [0, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "ef": [ + { + "ty": 5, + "nm": "primary", + "np": 3, + "mn": "ADBE Color Control", + "ix": 1, + "en": 1, + "ef": [ + { + "ty": 2, + "nm": "Color", + "mn": "ADBE Color Control-0001", + "ix": 1, + "v": { "a": 0, "k": [0.937, 0.969, 1], "ix": 1 } + } + ] + } + ], + "ip": 0, + "op": 271, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 0, + "nm": "hover-mail-closed", + "refId": "comp_1", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [250, 250, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [250, 250, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "w": 500, + "h": 500, + "ip": 0, + "op": 70, + "st": 0, + "bm": 0 + } + ], + "markers": [{ "tm": 0, "cm": "default:hover-mail-closed", "dr": 60 }], + "props": {} +} diff --git a/packages/react-email/src/app/globals.css b/packages/react-email/src/app/globals.css index 423184ce16..9979b847f6 100644 --- a/packages/react-email/src/app/globals.css +++ b/packages/react-email/src/app/globals.css @@ -2,30 +2,6 @@ @tailwind components; @tailwind utilities; -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - .popup-open iframe { pointer-events: none; } diff --git a/packages/react-email/src/app/layout.tsx b/packages/react-email/src/app/layout.tsx index 85698609b8..d2939fb0d3 100644 --- a/packages/react-email/src/app/layout.tsx +++ b/packages/react-email/src/app/layout.tsx @@ -23,13 +23,17 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => { } return ( - - + + {children} +
); diff --git a/packages/react-email/src/app/page.tsx b/packages/react-email/src/app/page.tsx index 80d5643022..617792ef44 100644 --- a/packages/react-email/src/app/page.tsx +++ b/packages/react-email/src/app/page.tsx @@ -2,7 +2,8 @@ import path from 'node:path'; import Image from 'next/image'; import Link from 'next/link'; import { Button, Heading, Text } from '../components'; -import { Shell } from '../components/shell'; +import CodeSnippet from '../components/code-snippet'; +import { Shell, ShellContent } from '../components/shell'; import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path'; import logo from './logo.png'; @@ -11,8 +12,8 @@ const Home = () => { return ( -
-
+ +
React Email Icon { src={logo} style={{ borderRadius: 34, - boxShadow: '0px 10px 200px 20px #2B7CA080', + boxShadow: '0 .625rem 12.5rem 1.25rem #2B7CA080', }} width={141} /> Welcome to React Email - + To start developing your emails, you can create a
- .jsx or{' '} - .tsx file under your{' '} - {baseEmailsDirectoryName}{' '} + .jsx or .tsx{' '} + file under your {baseEmailsDirectoryName}{' '} folder. - -
-
+ ); }; diff --git a/packages/react-email/src/app/preview/[...slug]/page.tsx b/packages/react-email/src/app/preview/[...slug]/page.tsx index a971d20295..d4cc1a6872 100644 --- a/packages/react-email/src/app/preview/[...slug]/page.tsx +++ b/packages/react-email/src/app/preview/[...slug]/page.tsx @@ -80,6 +80,7 @@ export async function generateMetadata({ params: Promise; }) { const { slug } = await params; + return { title: `${path.basename(slug.join('/'))} — React Email` }; } diff --git a/packages/react-email/src/app/preview/[...slug]/preview-renderer.tsx b/packages/react-email/src/app/preview/[...slug]/preview-renderer.tsx new file mode 100644 index 0000000000..74effef9cd --- /dev/null +++ b/packages/react-email/src/app/preview/[...slug]/preview-renderer.tsx @@ -0,0 +1,32 @@ +import { type ComponentProps, useState } from 'react'; +import ReactDOM from 'react-dom'; +import { mergeRefs } from '../../../utils/merge-refs'; + +type PreviewRendererProps = { + children: React.ReactElement; +} & ComponentProps<'iframe'>; + +export const PreviewRenderer = ({ + children, + ...rest +}: PreviewRendererProps) => { + const [iframeDocument, setIframeDocument] = useState(); + + return ( + <> +