From a7828c0ec3f6169135206137a595c265485dafba Mon Sep 17 00:00:00 2001 From: Gabriel Miranda Date: Mon, 27 Jan 2025 16:47:09 -0300 Subject: [PATCH 01/26] feat(react-email): Link checker for preview server on a toolbar (#1799) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: dependabot[bot] Co-authored-by: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Lucas de França --- .changeset/empty-rivers-laugh.md | 5 + packages/react-email/package.json | 11 +- .../actions/email-validation/check-links.ts | 88 ++ .../get-line-and-column-from-index.spec.ts | 22 + .../get-line-and-column-from-index.ts | 43 + .../actions/email-validation/quick-fetch.ts | 12 + .../src/animated-icons-data/help.json | 1082 ++++++++++++++ .../src/animated-icons-data/link.json | 1309 ++++++++++++++++ .../src/animated-icons-data/load.json | 443 ++++++ .../src/animated-icons-data/mail.json | 1320 +++++++++++++++++ packages/react-email/src/app/globals.css | 24 - packages/react-email/src/app/layout.tsx | 8 +- packages/react-email/src/app/page.tsx | 17 +- .../src/app/preview/[...slug]/page.tsx | 1 + .../src/app/preview/[...slug]/preview.tsx | 6 +- .../app/preview/[...slug]/rendering-error.tsx | 12 +- .../create-dependency-graph.spec.ts | 2 +- .../hot-reloading/get-imported-modules.ts | 2 +- .../react-email/src/components/button.tsx | 14 +- .../src/components/code-container.tsx | 12 +- .../src/components/code-snippet.tsx | 11 + packages/react-email/src/components/code.tsx | 8 +- .../src/components/icons/icon-button.tsx | 2 +- .../components/icons/icon-circle-check.tsx | 21 + .../components/icons/icon-circle-close.tsx | 17 + .../components/icons/icon-circle-warning.tsx | 17 + .../src/components/icons/icon-email.tsx | 18 + .../src/components/icons/icon-link.tsx | 14 + .../src/components/icons/icon-stamp.tsx | 14 + packages/react-email/src/components/send.tsx | 18 +- packages/react-email/src/components/shell.tsx | 66 +- ...n.tsx => file-tree-directory-children.tsx} | 33 +- ...-directory.tsx => file-tree-directory.tsx} | 19 +- .../src/components/sidebar/file-tree.tsx | 31 + .../src/components/sidebar/link-checker.tsx | 291 ++++ .../src/components/sidebar/sidebar.tsx | 318 +++- .../src/components/tooltip-content.tsx | 4 +- .../react-email/src/components/topbar.tsx | 29 +- .../src/hooks/use-icon-animation.ts | 44 + packages/react-email/tsconfig.json | 1 + pnpm-lock.yaml | 127 +- turbo.json | 8 + 42 files changed, 5369 insertions(+), 175 deletions(-) create mode 100644 .changeset/empty-rivers-laugh.md create mode 100644 packages/react-email/src/actions/email-validation/check-links.ts create mode 100644 packages/react-email/src/actions/email-validation/get-line-and-column-from-index.spec.ts create mode 100644 packages/react-email/src/actions/email-validation/get-line-and-column-from-index.ts create mode 100644 packages/react-email/src/actions/email-validation/quick-fetch.ts create mode 100644 packages/react-email/src/animated-icons-data/help.json create mode 100644 packages/react-email/src/animated-icons-data/link.json create mode 100644 packages/react-email/src/animated-icons-data/load.json create mode 100644 packages/react-email/src/animated-icons-data/mail.json create mode 100644 packages/react-email/src/components/code-snippet.tsx create mode 100644 packages/react-email/src/components/icons/icon-circle-check.tsx create mode 100644 packages/react-email/src/components/icons/icon-circle-close.tsx create mode 100644 packages/react-email/src/components/icons/icon-circle-warning.tsx create mode 100644 packages/react-email/src/components/icons/icon-email.tsx create mode 100644 packages/react-email/src/components/icons/icon-link.tsx create mode 100644 packages/react-email/src/components/icons/icon-stamp.tsx rename packages/react-email/src/components/sidebar/{sidebar-directory-children.tsx => file-tree-directory-children.tsx} (77%) rename packages/react-email/src/components/sidebar/{sidebar-directory.tsx => file-tree-directory.tsx} (78%) create mode 100644 packages/react-email/src/components/sidebar/file-tree.tsx create mode 100644 packages/react-email/src/components/sidebar/link-checker.tsx create mode 100644 packages/react-email/src/hooks/use-icon-animation.ts diff --git a/.changeset/empty-rivers-laugh.md b/.changeset/empty-rivers-laugh.md new file mode 100644 index 0000000000..ff523e6957 --- /dev/null +++ b/.changeset/empty-rivers-laugh.md @@ -0,0 +1,5 @@ +--- +"react-email": minor +--- + +Added toolbar with a link checker diff --git a/packages/react-email/package.json b/packages/react-email/package.json index c2b81a2ab2..4a1be6a745 100644 --- a/packages/react-email/package.json +++ b/packages/react-email/package.json @@ -23,8 +23,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", @@ -38,16 +38,22 @@ "ora": "5.4.1", "socket.io": "4.8.1" }, + "overrides": { + "react": "^19", + "react-dom": "^19" + }, "devDependencies": { "@radix-ui/colors": "1.0.1", "@radix-ui/react-collapsible": "1.1.0", "@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,7 +65,10 @@ "autoprefixer": "10.4.20", "clsx": "2.1.0", "framer-motion": "12.0.0-alpha.2", + "lottie-react": "^2.4.0", + "node-html-parser": "6.1.13", "postcss": "8.4.40", + "prettier-plugin-tailwindcss": "0.6.6", "prism-react-renderer": "2.1.0", "module-punycode": "npm:punycode@2.3.1", "react": "^19", 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..18fe3605ad --- /dev/null +++ b/packages/react-email/src/actions/email-validation/check-links.ts @@ -0,0 +1,88 @@ +'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 (link.startsWith('mailto:')) continue; + + const result: LinkCheckingResult = { + link, + status: 'success', + checks: [], + }; + + try { + const url = new URL(link); + + const res = await quickFetch(url); + const hasntSucceeded = + res.statusCode === undefined || + !res.statusCode.toString().startsWith('2'); + result.checks.push({ + type: 'fetch_attempt', + passed: hasntSucceeded, + metadata: { + fetchStatusCode: res.statusCode, + }, + }); + if (hasntSucceeded) { + result.status = res.statusCode?.toString().startsWith('3') + ? 'warning' + : 'error'; + } + + if (link.startsWith('https://')) { + result.checks.push({ + passed: true, + type: 'security', + }); + } else { + result.checks.push({ + passed: false, + type: 'security', + }); + result.status = 'warning'; + } + } 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/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..479407afe9 100644 --- a/packages/react-email/src/app/page.tsx +++ b/packages/react-email/src/app/page.tsx @@ -2,6 +2,7 @@ import path from 'node:path'; import Image from 'next/image'; import Link from 'next/link'; import { Button, Heading, Text } from '../components'; +import CodeSnippet from '../components/code-snippet'; import { Shell } 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.tsx b/packages/react-email/src/app/preview/[...slug]/preview.tsx index e33195ede1..fcdf05c077 100644 --- a/packages/react-email/src/app/preview/[...slug]/preview.tsx +++ b/packages/react-email/src/app/preview/[...slug]/preview.tsx @@ -93,7 +93,7 @@ const Preview = ({ <> {activeView === 'desktop' && (