better-svelte-email 0.2.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/components/Button.svelte +2 -4
  2. package/dist/components/Column.svelte +3 -8
  3. package/dist/components/Column.svelte.d.ts +2 -5
  4. package/dist/components/Container.svelte +5 -6
  5. package/dist/components/Container.svelte.d.ts +2 -2
  6. package/dist/components/Heading.svelte +34 -0
  7. package/dist/components/Heading.svelte.d.ts +15 -0
  8. package/dist/components/Hr.svelte +4 -4
  9. package/dist/components/Html.svelte +4 -3
  10. package/dist/components/Html.svelte.d.ts +3 -3
  11. package/dist/components/Img.svelte +27 -0
  12. package/dist/components/Img.svelte.d.ts +10 -0
  13. package/dist/components/Link.svelte +6 -10
  14. package/dist/components/Link.svelte.d.ts +2 -2
  15. package/dist/components/Preview.svelte +35 -0
  16. package/dist/{preview → components}/Preview.svelte.d.ts +3 -3
  17. package/dist/components/Row.svelte +2 -6
  18. package/dist/components/Row.svelte.d.ts +2 -3
  19. package/dist/components/Section.svelte +2 -4
  20. package/dist/components/Section.svelte.d.ts +2 -2
  21. package/dist/components/Text.svelte +4 -6
  22. package/dist/components/Text.svelte.d.ts +0 -1
  23. package/dist/components/index.d.ts +3 -0
  24. package/dist/components/index.js +3 -0
  25. package/dist/emails/apple-receipt.svelte +222 -95
  26. package/dist/emails/demo-email.svelte +1 -1
  27. package/dist/emails/test-email.svelte +4 -2
  28. package/dist/emails/vercel-invite-user.svelte +53 -50
  29. package/dist/emails/vercel-invite-user.svelte.d.ts +3 -3
  30. package/dist/index.d.ts +1 -1
  31. package/dist/index.js +1 -1
  32. package/dist/preview/EmailPreview.svelte +776 -0
  33. package/dist/preview/EmailPreview.svelte.d.ts +7 -0
  34. package/dist/preview/index.d.ts +21 -3
  35. package/dist/preview/index.js +27 -5
  36. package/dist/utils/index.d.ts +27 -0
  37. package/dist/utils/index.js +47 -0
  38. package/package.json +32 -7
  39. package/dist/components/__tests__/test-email.svelte +0 -13
  40. package/dist/components/__tests__/test-email.svelte.d.ts +0 -26
  41. package/dist/preview/Preview.svelte +0 -231
package/dist/emails/apple-receipt.svelte CHANGED
@@ -6,57 +6,66 @@
6
6
  Head,
7
7
  Hr,
8
8
  Html,
9
+ Img,
9
10
  Link,
11
+ Preview,
10
12
  Row,
11
13
  Section,
12
14
  Text
13
15
  } from '../components/index.js';
14
16
 
15
- const baseUrl = '/';
17
+ const baseUrl =
18
+ process.env.VERCEL === '1' ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/` : '/';
16
19
  </script>
17
20
 
18
21
  <Html>
19
22
  <Head />
20
-
21
- <Body style="background-color:rgb(255,255,255); font-family:'Helvetica Neue';">
22
- <!-- Preview text for email clients -->
23
- <span style="display:none;">Apple Receipt</span>
24
-
25
- <Container style="margin-left:auto;margin-right:auto; width:660px; padding-left:0px;padding-right:0px; padding-top:1.25rem;padding-bottom:1.25rem; padding-bottom:3rem;">
23
+ <Body
24
+ style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #ffffff;"
25
+ >
26
+ <Preview preview="Apple Receipt" />
27
+ <Container style="margin: 0 auto; padding: 20px 0 48px; width: 660px; max-width: 100%;">
26
28
  <Section>
27
29
  <Row>
28
30
  <Column>
29
- <img src="{baseUrl}apple-logo.png" width="42" height="42" alt="Apple Logo" />
31
+ <Img src="{baseUrl}apple-logo.png" width="42" height="42" alt="Apple Logo" />
30
32
  </Column>
31
-
32
- <Column align="right" style="display:table-cell;">
33
- <Text style="margin:0px; font-size:32px; font-weight:300; color:rgb(136,136,136);">Receipt</Text>
33
+ <Column style="display: table-cell;" align="right">
34
+ <Text style="font-size: 32px; font-weight: 300; color: #888888;">Receipt</Text>
34
35
  </Column>
35
36
  </Row>
36
37
  </Section>
37
38
 
38
39
  <Section>
39
- <Text style="margin-top:2.25rem;margin-bottom:2.25rem; text-align:center; font-size:0.875rem;line-height:1.25rem; font-weight:500; color:rgb(17,17,17);">
40
- Save 3% on all your Apple purchases with Apple Card.<sup style="font-weight:300;">1</sup>
41
- <Link href="https://www.apple.com/apple-card/" style="color:rgb(17,17,17); text-decoration-line:underline;">
42
- Apply and use in minutes
43
- </Link>
44
- <sup style="font-weight:300;">2</sup>
40
+ <Text
41
+ style="text-align: center; margin: 36px 0 40px 0; font-size: 14px; font-weight: 500; color: #111111;"
42
+ >
43
+ Save 3% on all your Apple purchases with Apple Card.
44
+ <sup style="font-weight: 300;">1</sup>
45
+ {' '}
46
+ <Link href="https://www.apple.com/apple-card/">Apply and use in minutes</Link>
47
+ <sup style="font-weight: 300;">2</sup>
45
48
  </Text>
46
49
  </Section>
47
50
 
48
51
  <Section
49
- style="border-collapse:collapse; border-spacing:0px 0px; border-radius:3px; background-color:rgb(250,250,250); font-size:0.75rem;line-height:1rem; color:rgb(51,51,51);"
52
+ style="border-collapse: collapse; border-spacing: 0px; color: rgb(51,51,51); background-color: rgb(250,250,250); border-radius: 3px; font-size: 12px;"
50
53
  >
51
- <Row style="min-height:46px;">
54
+ <Row style="min-height: 46px;">
52
55
  <Column colspan={2}>
53
56
  <Section>
54
57
  <Row>
55
- <Column style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
56
- <Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">APPLE ID</Text>
58
+ <Column
59
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
60
+ >
61
+ <Text
62
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
63
+ >
64
+ APPLE ID
65
+ </Text>
57
66
  <Link
58
- style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; color:rgb(17,85,204); text-decoration-line:underline;"
59
67
  href="mailto:alan.turing@gmail.com"
68
+ style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4; color: #15c; text-decoration: underline;"
60
69
  >
61
70
  alan.turing@gmail.com
62
71
  </Link>
@@ -64,196 +73,314 @@
64
73
  </Row>
65
74
 
66
75
  <Row>
67
- <Column style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
68
- <Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">INVOICE DATE</Text>
69
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">18 Jan 2023</Text>
76
+ <Column
77
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
78
+ >
79
+ <Text
80
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
81
+ >
82
+ INVOICE DATE
83
+ </Text>
84
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
85
+ >18 Jan 2023</Text
86
+ >
70
87
  </Column>
71
88
  </Row>
72
89
 
73
90
  <Row>
74
- <Column style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
75
- <Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">ORDER ID</Text>
91
+ <Column
92
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
93
+ >
94
+ <Text
95
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
96
+ >
97
+ ORDER ID
98
+ </Text>
76
99
  <Link
77
- style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; color:rgb(17,85,204); text-decoration-line:underline;"
78
- href="https://www.apple.com/"
100
+ href="#"
101
+ style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4; color: #15c; text-decoration: underline;"
79
102
  >
80
103
  ML4F5L8522
81
104
  </Link>
82
105
  </Column>
83
- <Column style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
84
- <Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">DOCUMENT NO.</Text>
85
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">186623754793</Text>
106
+ <Column
107
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
108
+ >
109
+ <Text
110
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
111
+ >
112
+ DOCUMENT NO.
113
+ </Text>
114
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
115
+ >186623754793</Text
116
+ >
86
117
  </Column>
87
118
  </Row>
88
119
  </Section>
89
120
  </Column>
90
- <Column colspan={2} style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
91
- <Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">BILLED TO</Text>
92
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">Visa .... 7461 (Apple Pay)</Text>
93
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">Alan Turing</Text>
94
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">2125 Chestnut St</Text>
95
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">San Francisco, CA 94123</Text>
96
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">USA</Text>
121
+ <Column
122
+ colspan={2}
123
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
124
+ >
125
+ <Text
126
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
127
+ >
128
+ BILLED TO
129
+ </Text>
130
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;">
131
+ Visa .... 7461 (Apple Pay)
132
+ </Text>
133
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
134
+ >Alan Turing</Text
135
+ >
136
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
137
+ >2125 Chestnut St</Text
138
+ >
139
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
140
+ >San Francisco, CA 94123</Text
141
+ >
142
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;">USA</Text>
97
143
  </Column>
98
144
  </Row>
99
145
  </Section>
100
146
 
101
147
  <Section
102
- style="margin-top:30px;margin-bottom:30px; min-height:24px; border-collapse:collapse; border-spacing:0px 0px; border-radius:3px; background-color:rgb(250,250,250); font-size:0.75rem;line-height:1rem; color:rgb(51,51,51);"
148
+ style="border-collapse: collapse; border-spacing: 0px; color: rgb(51,51,51); background-color: rgb(250,250,250); border-radius: 3px; font-size: 12px; margin: 30px 0 15px 0; min-height: 24px;"
103
149
  >
104
- <Text style="margin:0px; background-color:rgb(250,250,250); padding-left:0.625rem; font-size:0.875rem;line-height:1.25rem; font-weight:500;">App Store</Text>
150
+ <Text
151
+ style="background: #fafafa; padding-left: 10px; font-size: 14px; font-weight: 500; margin: 0;"
152
+ >
153
+ App Store
154
+ </Text>
105
155
  </Section>
106
156
 
107
157
  <Section>
108
158
  <Row>
109
- <Column style="width:4rem;">
110
- <img
159
+ <Column style="width: 64px;">
160
+ <Img
111
161
  src="{baseUrl}apple-hbo-max-icon.jpeg"
112
162
  width="64"
113
163
  height="64"
114
164
  alt="HBO Max"
115
- style="margin-top:0px;margin-bottom:0px; margin-right:0px; margin-left:1.25rem; border-radius:14px; border-width:1px; border-color:rgb(242,242,242);"
165
+ style="margin: 0 0 0 20px; border-radius: 14px; border: 1px solid rgb(242,242,242);"
116
166
  />
117
167
  </Column>
118
- <Column style="padding-left:22px;">
119
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; font-weight:600;">
168
+ <Column style="padding-left: 22px;">
169
+ <Text
170
+ style="font-size: 12px; font-weight: 600; margin: 0; padding: 0; line-height: 1.4;"
171
+ >
120
172
  HBO Max: Stream TV &amp; Movies
121
173
  </Text>
122
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; color:rgb(102,102,102);">
174
+ <Text
175
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; padding: 0; line-height: 1.4;"
176
+ >
123
177
  HBO Max Ad-Free (Monthly)
124
178
  </Text>
125
- <Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; color:rgb(102,102,102);">Renews Aug 20, 2023</Text>
126
- <Link href="https://www.apple.com/" style="font-size:0.75rem;line-height:1rem; color:rgb(0,112,201); text-decoration-line:none;">
179
+ <Text
180
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; padding: 0; line-height: 1.4;"
181
+ >
182
+ Renews Aug 20, 2023
183
+ </Text>
184
+ <Link
185
+ href="https://www.apple.com/"
186
+ style="font-size: 12px; color: rgb(0,112,201); text-decoration: none;"
187
+ >
127
188
  Write a Review
128
189
  </Link>
129
- <span style="margin-left:0.25rem;margin-right:0.25rem; font-weight:200; color:rgb(51,51,51);">|</span>
130
- <Link href="https://www.apple.com/" style="font-size:0.75rem;line-height:1rem; color:rgb(0,112,201); text-decoration-line:none;">
190
+ <span
191
+ style="margin-left: 4px; margin-right: 4px; color: rgb(51,51,51); font-weight: 200;"
192
+ >|</span
193
+ >
194
+ <Link
195
+ href="https://www.apple.com/"
196
+ style="font-size: 12px; color: rgb(0,112,201); text-decoration: none;"
197
+ >
131
198
  Report a Problem
132
199
  </Link>
133
200
  </Column>
134
-
135
- <Column style="display:table-cell; width:100px; padding-left:1.25rem;padding-right:1.25rem; padding-right:1.25rem; padding-left:0px; vertical-align:top;" align="right">
136
- <Text style="margin:0px; font-size:0.75rem;line-height:1rem; font-weight:600;">$14.99</Text>
201
+ <Column
202
+ align="right"
203
+ style="display: table-cell; padding: 0px 20px 0px 0px; width: 100px; vertical-align: top;"
204
+ >
205
+ <Text style="font-size: 12px; font-weight: 600; margin: 0;">$14.99</Text>
137
206
  </Column>
138
207
  </Row>
139
208
  </Section>
140
209
 
141
- <Hr style="margin-top:30px; margin-bottom:0px;" />
210
+ <Hr style="margin: 30px 0 0 0;" />
142
211
 
143
- <Section>
212
+ <Section style="text-align:right;">
144
213
  <Row>
145
- <Column style="display:table-cell;" align="right">
146
- <Text style="margin:0px; padding-right:30px; text-align:right; font-size:10px; font-weight:600; color:rgb(102,102,102);">
214
+ <Column style="display: table-cell;" align="right">
215
+ <Text
216
+ style="margin: 0; color: rgb(102,102,102); font-size: 10px; font-weight: 600; padding: 0px 30px 0px 0px; text-align: right;"
217
+ >
147
218
  TOTAL
148
219
  </Text>
149
220
  </Column>
150
- <Column style="min-height:48px; border-left-width:1px; border-color:rgb(238,238,238); padding-top:3rem;"></Column>
151
- <Column style="display:table-cell; width:90px;">
152
- <Text style="margin:0px; margin-right:1.25rem; text-align:right; font-size:1rem;line-height:1.5rem; font-weight:600; white-space:nowrap;">
221
+ <Column
222
+ style="min-height: 48px; padding-top: 48px; border-left: 1px solid; border-color: rgb(238,238,238);"
223
+ />
224
+ <Column style="display: table-cell; width: 90px;">
225
+ <Text
226
+ style="margin: 0px 20px 0px 0px; font-size: 16px; font-weight: 600; white-space: nowrap; text-align: right;"
227
+ >
153
228
  $14.99
154
229
  </Text>
155
230
  </Column>
156
231
  </Row>
157
232
  </Section>
158
233
 
159
- <Hr style="margin-top:0px;margin-bottom:0px; margin-bottom:75px;" />
234
+ <Hr style="margin: 0 0 75px 0;" />
160
235
 
161
236
  <Section>
162
237
  <Row>
163
- <Column align="center" style="display:block;">
164
- <img src="{baseUrl}apple-card-icon.png" width="60" height="17" alt="Apple Card" />
238
+ <Column align="center" style="display: block;">
239
+ <Img src="{baseUrl}apple-card-icon.png" width="60" height="17" alt="Apple Card" />
165
240
  </Column>
166
241
  </Row>
167
242
  </Section>
168
243
 
169
244
  <Section>
170
245
  <Row>
171
- <Column align="center" style="margin-top:15px; display:block;">
172
- <Text style="margin:0px; font-size:1.5rem;line-height:2rem; font-weight:500;">Save 3% on all your Apple purchases.</Text>
246
+ <Column align="center" style="display: block; margin: 15px 0 0 0;">
247
+ <Text style="font-size: 24px; font-weight: 500;">
248
+ Save 3% on all your Apple purchases.
249
+ </Text>
173
250
  </Column>
174
251
  </Row>
175
252
  </Section>
176
253
 
177
254
  <Section>
178
255
  <Row>
179
- <Column align="center" style="margin-top:0.625rem; display:table-cell;">
180
- <Link href="https://www.apple.com/" style="color:rgb(0,126,255); text-decoration-line:none;">
181
- <img
256
+ <Column align="center" style="display: table-cell; margin: 10px 0 0 0;">
257
+ <Link
258
+ href="https://www.apple.com/"
259
+ style="color: rgb(0,126,255); text-decoration: none;"
260
+ >
261
+ <Img
182
262
  src="{baseUrl}apple-wallet.png"
183
263
  width="28"
184
264
  height="28"
185
265
  alt="Apple Wallet"
186
- style="display:inline; padding-right:0.5rem; vertical-align:middle;"
266
+ style="display: inherit; padding-right: 8px; vertical-align: middle;"
187
267
  />
188
- <span style="font-size:0.875rem;line-height:1.25rem; font-weight:400; text-decoration-line:none;">Apply and use in minutes</span>
268
+ <span style="font-size: 14px; font-weight: 400; text-decoration: none;">
269
+ Apply and use in minutes
270
+ </span>
189
271
  </Link>
190
272
  </Column>
191
273
  </Row>
192
274
  </Section>
193
275
 
194
- <Hr style="margin-top:65px;margin-bottom:65px; margin-bottom:1.25rem;" />
276
+ <Hr style="margin: 65px 0 20px 0;" />
195
277
 
196
- <Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
278
+ <Text
279
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
280
+ >
197
281
  1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when
198
282
  transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily
199
283
  Cash can be applied by you as a credit on your statement balance. 3% is the total amount of
200
284
  Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more
201
285
  details on Daily Cash and qualifying transactions.
202
286
  </Text>
203
- <Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">2. Subject to credit approval.</Text>
204
- <Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
287
+
288
+ <Text
289
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
290
+ >
291
+ 2. Subject to credit approval.
292
+ </Text>
293
+
294
+ <Text
295
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
296
+ >
205
297
  To access and use all the features of Apple Card, you must add Apple Card to Wallet on an
206
298
  iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or
207
299
  iPadOS by going to Settings &gt; General &gt; Software Update. Tap Download and Install.
208
300
  </Text>
209
- <Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
301
+
302
+ <Text
303
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
304
+ >
210
305
  Available for qualifying applicants in the United States.
211
306
  </Text>
212
- <Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
307
+
308
+ <Text
309
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
310
+ >
213
311
  Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.
214
312
  </Text>
215
- <Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
313
+
314
+ <Text
315
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
316
+ >
216
317
  If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with
217
318
  questions about Apple Card.
218
319
  </Text>
219
- <Text style="margin-top:1.25rem;margin-bottom:1.25rem; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
320
+
321
+ <Text
322
+ style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
323
+ >
220
324
  Privacy: We use a
221
- <Link href="https://www.apple.com/" style="color:rgb(0,115,255);">Subscriber ID</Link>
325
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Subscriber ID</Link>
222
326
  to provide reports to developers.
223
327
  </Text>
224
- <Text style="margin-top:1.25rem;margin-bottom:1.25rem; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
328
+
329
+ <Text
330
+ style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
331
+ >
225
332
  Get help with subscriptions and purchases.
226
- <Link href="https://www.apple.com/" style="color:rgb(0,115,255);">Visit Apple Support.</Link>
333
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);"
334
+ >Visit Apple Support.</Link
335
+ >
227
336
  </Text>
228
- <Text style="margin-top:1.25rem;margin-bottom:1.25rem; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
337
+
338
+ <Text
339
+ style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
340
+ >
229
341
  Learn how to
230
- <Link href="https://www.apple.com/">manage your password preferences</Link>
342
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">
343
+ manage your password preferences
344
+ </Link>
231
345
  for iTunes, Apple Books, and App Store purchases.
232
346
  </Text>
233
347
 
234
- <Text style="margin-top:1.25rem;margin-bottom:1.25rem; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
348
+ <Text
349
+ style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
350
+ >
235
351
  You have the option to stop receiving email receipts for your subscription renewals. If you
236
352
  have opted out, you can still view your receipts in your account under Purchase History. To
237
353
  manage receipts or to opt in again, go to
238
- <Link href="https://www.apple.com/">Account Settings.</Link>
354
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Account Settings.</Link>
239
355
  </Text>
240
356
 
241
357
  <Section>
242
358
  <Row>
243
- <Column align="center" style="margin-top:2.5rem; display:block;">
244
- <img src="{baseUrl}apple-logo.png" width="26" height="26" alt="Apple Card" />
359
+ <Column align="center" style="display: block; margin: 40px 0 0 0;">
360
+ <Img src="{baseUrl}apple-logo.png" width="26" height="26" alt="Apple" />
245
361
  </Column>
246
362
  </Row>
247
363
  </Section>
248
364
 
249
- <Text style="margin-top:0.5rem;margin-bottom:0.5rem; margin-top:0px; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
250
- <Link href="https://www.apple.com/">Account Settings</Link> •
251
- <Link href="https://www.apple.com/">Terms of Sale</Link> •
252
- <Link href="https://www.apple.com/legal/privacy/">Privacy Policy</Link>
365
+ <Text
366
+ style="margin: 8px 0 0 0; text-align: center; font-size: 12px; color: rgb(102,102,102);"
367
+ >
368
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Account Settings</Link>
369
+ •
370
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Terms of Sale</Link>
371
+ •
372
+ <Link href="https://www.apple.com/legal/privacy/" style="color: rgb(0,115,255);">
373
+ Privacy Policy
374
+ </Link>
253
375
  </Text>
254
- <Text style="margin-top:25px; margin-bottom:0px; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
255
- Copyright © 2023 Apple Inc. <br />
256
- <Link href="https://www.apple.com/legal/">All rights reserved</Link>
376
+
377
+ <Text
378
+ style="margin: 25px 0 0 0; text-align: center; font-size: 12px; color: rgb(102,102,102);"
379
+ >
380
+ Copyright © 2023 Apple Inc.<br />
381
+ <Link href="https://www.apple.com/legal/" style="color: rgb(0,115,255);">
382
+ All rights reserved
383
+ </Link>
257
384
  </Text>
258
385
  </Container>
259
386
  </Body>
package/dist/emails/demo-email.svelte CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  <Container style="margin-bottom:1.5rem; border-radius:0.5rem; background-color:rgb(239,246,255); padding:1rem;">
30
30
  <Text style="margin-bottom:0.5rem; font-weight:600; color:rgb(30,58,138);">✨ Features Demonstrated:</Text>
31
- <ul style="list-style-type:disc; padding-left:1.25rem; color:rgb(30,64,175);">
31
+ <ul style="display:flex; list-style-type:disc; flex-direction:column; gap:0.25rem; padding-left:1.25rem; color:rgb(30,64,175);">
32
32
  <li>Tailwind classes converted to inline styles</li>
33
33
  <li>Responsive design with media queries</li>
34
34
  <li>Email-safe CSS transformations</li>
package/dist/emails/test-email.svelte CHANGED
@@ -1,12 +1,14 @@
1
1
  <script>
2
- import { Html, Head, Body, Text, Button, Container } from '../components/index.js';
2
+ import { Html, Head, Body, Text, Button, Container, Heading } from '../components/index.js';
3
3
  </script>
4
4
 
5
5
  <Html>
6
6
  <Head />
7
7
  <Body>
8
8
  <Container style="background-color:rgb(243,244,246);padding: 2rem;" >
9
- <Text style="font-size:1.125rem;line-height:1.75rem; font-weight:700; color:rgb(37,99,235);">Hello World</Text>
9
+ <Heading as="h1" m="10" style="color:rgb(37,99,235);font-weight: bold;">Title</Heading>
10
+ <Heading as="h2" style="font-weight:600;">Subtitle</Heading>
11
+ <Text style="font-weight: bold;">Basic text</Text>
10
12
  <Button
11
13
  style="border-radius:0.25rem; background-color:rgb(59,130,246); padding-left:1rem;padding-right:1rem; padding-top:0.5rem;padding-bottom:0.5rem; color:rgb(255,255,255);width: 33.33%"
12
14