@clay-design-system/email 0.0.0-stage → 0.2.0

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 (268) hide show
  1. package/README.md +48 -2
  2. package/dist/build/asset-scoring.d.ts +48 -0
  3. package/dist/build/asset-scoring.d.ts.map +1 -0
  4. package/dist/build/asset-scoring.js +57 -0
  5. package/dist/build/asset-scoring.js.map +1 -0
  6. package/dist/build/braze-transform.d.ts +20 -0
  7. package/dist/build/braze-transform.d.ts.map +1 -0
  8. package/dist/build/braze-transform.js +26 -0
  9. package/dist/build/braze-transform.js.map +1 -0
  10. package/dist/build/catalog.d.ts +25 -0
  11. package/dist/build/catalog.d.ts.map +1 -0
  12. package/dist/build/catalog.js +3 -0
  13. package/dist/build/catalog.js.map +1 -0
  14. package/dist/build/cloudinary-env.d.ts +15 -0
  15. package/dist/build/cloudinary-env.d.ts.map +1 -0
  16. package/dist/build/cloudinary-env.js +36 -0
  17. package/dist/build/cloudinary-env.js.map +1 -0
  18. package/dist/build/cloudinary-manifest.d.ts +33 -0
  19. package/dist/build/cloudinary-manifest.d.ts.map +1 -0
  20. package/dist/build/cloudinary-manifest.js +36 -0
  21. package/dist/build/cloudinary-manifest.js.map +1 -0
  22. package/dist/build/compile.d.ts +11 -0
  23. package/dist/build/compile.d.ts.map +1 -0
  24. package/dist/build/compile.js +234 -0
  25. package/dist/build/compile.js.map +1 -0
  26. package/dist/build/email-config.d.ts +26 -0
  27. package/dist/build/email-config.d.ts.map +1 -0
  28. package/dist/build/email-config.js +17 -0
  29. package/dist/build/email-config.js.map +1 -0
  30. package/dist/build/email-list.d.ts +6 -0
  31. package/dist/build/email-list.d.ts.map +1 -0
  32. package/dist/build/email-list.js +17 -0
  33. package/dist/build/email-list.js.map +1 -0
  34. package/dist/build/email-tree.d.ts +23 -0
  35. package/dist/build/email-tree.d.ts.map +1 -0
  36. package/dist/build/email-tree.js +46 -0
  37. package/dist/build/email-tree.js.map +1 -0
  38. package/dist/build/export-braze.d.ts +22 -0
  39. package/dist/build/export-braze.d.ts.map +1 -0
  40. package/dist/build/export-braze.js +92 -0
  41. package/dist/build/export-braze.js.map +1 -0
  42. package/dist/build/generate-stock-library-map.d.ts +13 -0
  43. package/dist/build/generate-stock-library-map.d.ts.map +1 -0
  44. package/dist/build/generate-stock-library-map.js +202 -0
  45. package/dist/build/generate-stock-library-map.js.map +1 -0
  46. package/dist/build/icon-registry-map.d.ts +34 -0
  47. package/dist/build/icon-registry-map.d.ts.map +1 -0
  48. package/dist/build/icon-registry-map.js +44 -0
  49. package/dist/build/icon-registry-map.js.map +1 -0
  50. package/dist/build/import-examples.d.ts +14 -0
  51. package/dist/build/import-examples.d.ts.map +1 -0
  52. package/dist/build/import-examples.js +65 -0
  53. package/dist/build/import-examples.js.map +1 -0
  54. package/dist/build/persona-character-map.d.ts +32 -0
  55. package/dist/build/persona-character-map.d.ts.map +1 -0
  56. package/dist/build/persona-character-map.js +90 -0
  57. package/dist/build/persona-character-map.js.map +1 -0
  58. package/dist/build/stock-library-map.d.ts +57 -0
  59. package/dist/build/stock-library-map.d.ts.map +1 -0
  60. package/dist/build/stock-library-map.js +1261 -0
  61. package/dist/build/stock-library-map.js.map +1 -0
  62. package/dist/build/upload-assets.d.ts +20 -0
  63. package/dist/build/upload-assets.d.ts.map +1 -0
  64. package/dist/build/upload-assets.js +153 -0
  65. package/dist/build/upload-assets.js.map +1 -0
  66. package/dist/build/upload-library-assets.d.ts +21 -0
  67. package/dist/build/upload-library-assets.d.ts.map +1 -0
  68. package/dist/build/upload-library-assets.js +182 -0
  69. package/dist/build/upload-library-assets.js.map +1 -0
  70. package/dist/build/visual-resolver.d.ts +70 -0
  71. package/dist/build/visual-resolver.d.ts.map +1 -0
  72. package/dist/build/visual-resolver.js +375 -0
  73. package/dist/build/visual-resolver.js.map +1 -0
  74. package/dist/catalog.json +467 -0
  75. package/dist/emails/component-buttons-icons.html +435 -0
  76. package/dist/emails/component-buttons-integration.html +256 -0
  77. package/dist/emails/component-buttons-primary.html +269 -0
  78. package/dist/emails/component-buttons-secondary.html +255 -0
  79. package/dist/emails/component-buttons-two-integrations.html +310 -0
  80. package/dist/emails/component-images-card-280h.html +281 -0
  81. package/dist/emails/component-images-card-320h.html +281 -0
  82. package/dist/emails/component-images-card.html +281 -0
  83. package/dist/emails/component-images-full-bleed-280h.html +279 -0
  84. package/dist/emails/component-images-full-bleed-400h.html +279 -0
  85. package/dist/emails/component-images-full-bleed.html +279 -0
  86. package/dist/emails/component-text-h1.html +254 -0
  87. package/dist/emails/component-text-h2.html +230 -0
  88. package/dist/emails/component-text-h3.html +255 -0
  89. package/dist/emails/component-text-h4.html +255 -0
  90. package/dist/emails/component-text-h5.html +254 -0
  91. package/dist/emails/component-text-p2.html +253 -0
  92. package/dist/emails/component-text-p3.html +254 -0
  93. package/dist/emails/component-text-p4.html +254 -0
  94. package/dist/emails/container.html +250 -0
  95. package/dist/emails/section-changelog-icon-list.html +1201 -0
  96. package/dist/emails/section-divider-line.html +340 -0
  97. package/dist/emails/section-feature-highlight-reversed.html +377 -0
  98. package/dist/emails/section-feature-highlight.html +384 -0
  99. package/dist/emails/section-feature-rows.html +328 -0
  100. package/dist/emails/section-feature-story-row-reversed.html +381 -0
  101. package/dist/emails/section-feature-story-row.html +382 -0
  102. package/dist/emails/section-footer-lifecycle.html +650 -0
  103. package/dist/emails/section-footer-two-column-minimal.html +318 -0
  104. package/dist/emails/section-footer.html +413 -0
  105. package/dist/emails/section-header.html +290 -0
  106. package/dist/emails/section-hero.html +276 -0
  107. package/dist/emails/section-icon-feature-list.html +554 -0
  108. package/dist/emails/section-image-caption-block.html +313 -0
  109. package/dist/emails/section-image-hero.html +341 -0
  110. package/dist/emails/section-lesson-card.html +628 -0
  111. package/dist/emails/section-list-action-items.html +590 -0
  112. package/dist/emails/section-list-feature-items.html +713 -0
  113. package/dist/emails/section-list-icon-items.html +701 -0
  114. package/dist/emails/section-list-numbered-items.html +733 -0
  115. package/dist/emails/section-logo-header.html +288 -0
  116. package/dist/emails/section-newsletter-hero.html +393 -0
  117. package/dist/emails/section-product-ui-hero.html +496 -0
  118. package/dist/emails/section-promo-banner.html +308 -0
  119. package/dist/emails/section-qa-block.html +440 -0
  120. package/dist/emails/section-resource-link-list.html +481 -0
  121. package/dist/emails/section-signoff.html +279 -0
  122. package/dist/emails/section-single-column-author.html +453 -0
  123. package/dist/emails/section-single-column-feature-card.html +312 -0
  124. package/dist/emails/section-single-column-product-card.html +393 -0
  125. package/dist/emails/section-single-column-promo-card.html +306 -0
  126. package/dist/emails/section-spacer-fill.html +281 -0
  127. package/dist/emails/section-testimonial-dark-card.html +363 -0
  128. package/dist/emails/section-text-h1-regular.html +254 -0
  129. package/dist/emails/section-text-h2-regular.html +254 -0
  130. package/dist/emails/section-text-h3-regular.html +254 -0
  131. package/dist/emails/section-text-h4-regular.html +254 -0
  132. package/dist/emails/section-text-h5-regular.html +254 -0
  133. package/dist/emails/section-text-mixed-heading.html +269 -0
  134. package/dist/emails/section-text-overline-heading.html +281 -0
  135. package/dist/emails/section-text-p1-bold.html +254 -0
  136. package/dist/emails/section-text-p1-regular.html +255 -0
  137. package/dist/emails/section-text-paragraph.html +358 -0
  138. package/dist/emails/section-text-quote-card.html +269 -0
  139. package/dist/emails/section-text-quote.html +313 -0
  140. package/dist/emails/section-text-small-headline.html +279 -0
  141. package/dist/emails/section-three-column-content-cards.html +499 -0
  142. package/dist/emails/section-three-column-icon-cards.html +510 -0
  143. package/dist/emails/section-three-column-image-grid.html +466 -0
  144. package/dist/emails/section-three-up-icon-benefits.html +464 -0
  145. package/dist/emails/section-two-column-feature-cards.html +708 -0
  146. package/dist/emails/section-two-column-grid.html +1131 -0
  147. package/dist/emails/section-two-column-img-text.html +331 -0
  148. package/dist/emails/section-two-column-live-tags.html +367 -0
  149. package/dist/emails/section-two-column-stacked.html +629 -0
  150. package/dist/emails/section-upsell-cta.html +597 -0
  151. package/dist/emails/section-value-bullet-list.html +313 -0
  152. package/dist/examples/manifest.d.ts +21 -0
  153. package/dist/examples/manifest.d.ts.map +1 -0
  154. package/dist/examples/manifest.js +84 -0
  155. package/dist/examples/manifest.js.map +1 -0
  156. package/dist/exports/contact-sales/Images/Contact_sales_Image_16f4175c-d08c-43f6-9d4c-a0606383271d.png +0 -0
  157. package/dist/exports/contact-sales/Images/Contact_sales_Image_659b3091-1da9-40c2-86b0-04250982e529.png +0 -0
  158. package/dist/exports/contact-sales/Images/Contact_sales_Image_79c651f4-5f0f-4a7f-8354-1f6f95ae86d9.png +0 -0
  159. package/dist/exports/contact-sales/index.braze.html +837 -0
  160. package/dist/exports/contact-sales/index.html +837 -0
  161. package/dist/exports/event-confirmation/Images/Confirmation_Image_11938de2-4161-4ae8-8969-90ea0d8b45cb.png +0 -0
  162. package/dist/exports/event-confirmation/Images/Confirmation_Image_3c52e81f-5d4f-452c-bad1-0471a27598f1.png +0 -0
  163. package/dist/exports/event-confirmation/Images/Confirmation_Image_3ec1fec8-bf46-4068-8835-633567a715f9.png +0 -0
  164. package/dist/exports/event-confirmation/Images/Confirmation_Image_c4980c01-c270-4384-a56c-0bae74814cf9.png +0 -0
  165. package/dist/exports/event-confirmation/Images/Confirmation_Image_cde93e8c-0f96-434d-acaf-1b86503c66f0.png +0 -0
  166. package/dist/exports/event-confirmation/index.braze.html +1055 -0
  167. package/dist/exports/event-confirmation/index.html +1055 -0
  168. package/dist/exports/legal-update/Images/v2_Image_07bbcc13-0ab8-46e4-ab94-98f215f85f69.png +0 -0
  169. package/dist/exports/legal-update/Images/v2_Image_34394d50-acdf-4375-b254-eef1f84aaacb.png +0 -0
  170. package/dist/exports/legal-update/Images/v2_Image_4a25f2bd-6270-439b-86c5-4a968a1b104f.png +0 -0
  171. package/dist/exports/legal-update/Images/v2_Image_7e8e814f-3112-4d8c-af5b-4f4616d84d9c.png +0 -0
  172. package/dist/exports/legal-update/Images/v2_Image_b24a04c8-4af0-42a1-be0f-cd3f66595e47.png +0 -0
  173. package/dist/exports/legal-update/Images/v2_Image_b709b9fb-836e-4c20-82e5-a9cb9d702392.png +0 -0
  174. package/dist/exports/legal-update/Images/v2_Image_ed7b924b-35e6-4536-be0c-92ddc8a34fc2.png +0 -0
  175. package/dist/exports/legal-update/index.braze.html +1731 -0
  176. package/dist/exports/legal-update/index.html +1731 -0
  177. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_09be22f6-1f30-4c58-bf33-1df0494b8fc2.png +0 -0
  178. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_2dfb595e-6fe2-4e6e-a73a-942a085b38ab.png +0 -0
  179. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_544c971b-b4b5-4c89-a25a-8f0d92644009.png +0 -0
  180. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_5b6a9576-1c33-40c5-81e3-637514fb6c78.png +0 -0
  181. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_680c6193-793a-4a24-8288-4bb4046f4f5e.png +0 -0
  182. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_75818ba9-026a-45d7-91e4-f992d4ee7690.png +0 -0
  183. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_785f18e6-816d-44d1-8efb-ecc82510b540.png +0 -0
  184. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_8bf9141d-9d63-4601-9e81-5c9d726e17f8.png +0 -0
  185. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_9097d6e0-65d0-4237-9661-963751812786.png +0 -0
  186. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_a4ef2f53-2eaf-438a-bfef-61455ac0915e.png +0 -0
  187. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_b7748f87-a7b7-4a91-981a-16567683e4b4.png +0 -0
  188. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_bc9830a4-2911-4768-808a-32cbbc39215e.png +0 -0
  189. package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_ef0e8e92-9075-43a9-991f-09a77ef6d6d4.png +0 -0
  190. package/dist/exports/newsletter/index.braze.html +125 -0
  191. package/dist/exports/newsletter/index.html +125 -0
  192. package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-blocks.png +0 -0
  193. package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-hero-mcp.png +0 -0
  194. package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-magic.png +0 -0
  195. package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-mcp.png +0 -0
  196. package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-portfolio.png +0 -0
  197. package/dist/exports/newsletter-ai-june-july/index.braze.html +1640 -0
  198. package/dist/exports/newsletter-ai-june-july/index.html +1640 -0
  199. package/dist/exports/survey/Images/EmailLove_Image_3b6f4a6f-7f5f-418b-be71-9371b25c20ce.png +0 -0
  200. package/dist/exports/survey/Images/EmailLove_Image_f659c728-2401-485d-8d90-98c962d28c0c.png +0 -0
  201. package/dist/exports/survey/index.braze.html +515 -0
  202. package/dist/exports/survey/index.html +515 -0
  203. package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Before_115ccc58-a47f-4eca-a1f2-c0d86e1e1cf4.png +0 -0
  204. package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Before_aec4d0d3-6057-4b8a-8d8f-46fbd024f182.png +0 -0
  205. package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Before_d139966a-6051-4383-bf8f-1e5138e1b030.png +0 -0
  206. package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Image_080fa361-a3f2-4593-9ac0-03cf3a7972ff.png +0 -0
  207. package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Image_5ebade34-8f1d-4c2c-9d27-5f9e843ce502.png +0 -0
  208. package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Image_aa5e4144-9ec8-4525-b01e-077d72f0bab6.png +0 -0
  209. package/dist/exports/trial-01-welcome/index.braze.html +941 -0
  210. package/dist/exports/trial-01-welcome/index.html +941 -0
  211. package/dist/exports/trial-02/Images/tp2_Image_5b0d9bc4-2e38-4252-8f20-d9f27d471c21.png +0 -0
  212. package/dist/exports/trial-02/Images/tp2_Image_b3f77c7c-cc8e-4db8-a5d9-072f4f621e72.png +0 -0
  213. package/dist/exports/trial-02/Images/tp2_Image_cafd1a17-1915-47cd-80f2-1c2d0b133cfe.png +0 -0
  214. package/dist/exports/trial-02/index.braze.html +923 -0
  215. package/dist/exports/trial-02/index.html +923 -0
  216. package/dist/exports/trial-03/Images/tp3_Image_1b96630c-fc4d-4aec-91fb-3c1d4d8544b3.png +0 -0
  217. package/dist/exports/trial-03/Images/tp3_Image_58f3a342-2193-4b5c-b30a-96f7f3338dd8.png +0 -0
  218. package/dist/exports/trial-03/Images/tp3_Image_6c4f307a-bac2-40e7-b4f1-9aa623c9eb8e.png +0 -0
  219. package/dist/exports/trial-03/Images/tp3_Image_848917ce-3f89-4538-a826-558b21f5fea7.png +0 -0
  220. package/dist/exports/trial-03/Images/tp3_Image_aae8410f-556f-4fb9-88f9-f276d75bafd2.png +0 -0
  221. package/dist/exports/trial-03/Images/tp3_Image_b4d5be39-509e-4f22-9601-dd070e4c6561.png +0 -0
  222. package/dist/exports/trial-03/index.braze.html +1129 -0
  223. package/dist/exports/trial-03/index.html +1129 -0
  224. package/dist/exports/trial-04/Images/tp4_Image_03bd5a56-25e3-4dcc-bef5-143bf12312d5.png +0 -0
  225. package/dist/exports/trial-04/Images/tp4_Image_0facbfca-b735-4199-a0d9-05a59341a1e3.gif +0 -0
  226. package/dist/exports/trial-04/Images/tp4_Image_171cee5f-cd3d-42f0-a180-995893d3742a.png +0 -0
  227. package/dist/exports/trial-04/Images/tp4_Image_3509d89d-1825-4817-8c1e-130fa294d0e1.png +0 -0
  228. package/dist/exports/trial-04/Images/tp4_Image_763a0f40-2985-4140-859b-ddd34f20a520.png +0 -0
  229. package/dist/exports/trial-04/Images/tp4_Image_cc2db4f5-b41d-45d7-a798-7a79e7b8d4d8.png +0 -0
  230. package/dist/exports/trial-04/index.braze.html +885 -0
  231. package/dist/exports/trial-04/index.html +885 -0
  232. package/dist/exports/trial-05/Images/tp5_Image_0248a517-5c60-4e84-ad1c-449dcf4f6a64.png +0 -0
  233. package/dist/exports/trial-05/Images/tp5_Image_4c1a2d5a-47d3-4801-bb3a-01c22decc108.png +0 -0
  234. package/dist/exports/trial-05/Images/tp5_Image_63ae77e7-cec7-4b4a-91e0-603b5a80929f.png +0 -0
  235. package/dist/exports/trial-05/Images/tp5_Image_7aa43530-6707-4308-ab0e-e4c38fc1b77d.png +0 -0
  236. package/dist/exports/trial-05/Images/tp5_Image_7efe5b6d-b360-4179-bee1-72908ba569bc.png +0 -0
  237. package/dist/exports/trial-05/Images/tp5_Image_b142bd84-c40a-4a29-b9d5-715b52fdd937.png +0 -0
  238. package/dist/exports/trial-05/Images/tp5_Image_c0c896ea-5b68-4f58-9e27-cdb4a1f1b438.png +0 -0
  239. package/dist/exports/trial-05/index.braze.html +1023 -0
  240. package/dist/exports/trial-05/index.html +1023 -0
  241. package/dist/exports/trial-06/Images/tp6_Image_2267a268-8a80-4e0d-8813-d4c75dbab6f2.png +0 -0
  242. package/dist/exports/trial-06/Images/tp6_Image_637a97b7-837e-478d-8ed1-6e8c2739fdc7.png +0 -0
  243. package/dist/exports/trial-06/Images/tp6_Image_a78df270-ad6f-41e6-8822-ba8ec38313a3.png +0 -0
  244. package/dist/exports/trial-06/index.braze.html +773 -0
  245. package/dist/exports/trial-06/index.html +773 -0
  246. package/dist/exports/winback/Images/_managers_Image_4587ac22-460c-487a-bc37-9dbc487e95a4.png +0 -0
  247. package/dist/exports/winback/Images/_managers_Image_8a77ec2c-ed49-480d-a1a1-7a38abad232a.png +0 -0
  248. package/dist/exports/winback/Images/_managers_Image_bb643775-8a2f-4e28-9dfb-6d1838c3561f.png +0 -0
  249. package/dist/exports/winback/Images/_managers_Image_f7d1bca5-0fcb-4d4c-abcd-40ce2d453b07.png +0 -0
  250. package/dist/exports/winback/index.braze.html +605 -0
  251. package/dist/exports/winback/index.html +605 -0
  252. package/dist/generated/email-tokens.d.ts +101 -0
  253. package/dist/generated/email-tokens.d.ts.map +1 -0
  254. package/dist/generated/email-tokens.js +104 -0
  255. package/dist/generated/email-tokens.js.map +1 -0
  256. package/dist/index.d.ts +9 -0
  257. package/dist/index.d.ts.map +1 -0
  258. package/dist/index.js +8 -0
  259. package/dist/index.js.map +1 -0
  260. package/dist/tokens/build-email-assets.d.ts +19 -0
  261. package/dist/tokens/build-email-assets.d.ts.map +1 -0
  262. package/dist/tokens/build-email-assets.js +186 -0
  263. package/dist/tokens/build-email-assets.js.map +1 -0
  264. package/dist/tokens/build-email-tokens.d.ts +17 -0
  265. package/dist/tokens/build-email-tokens.d.ts.map +1 -0
  266. package/dist/tokens/build-email-tokens.js +229 -0
  267. package/dist/tokens/build-email-tokens.js.map +1 -0
  268. package/package.json +41 -3
package/dist/emails/component-buttons-secondary.html ADDED
@@ -0,0 +1,255 @@
1
+ <!doctype html>
2
+ <html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
3
+ <head>
4
+ <title>Buttons — Secondary</title>
5
+ <!--[if !mso]><!-->
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <!--<![endif]-->
8
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <style type="text/css">
11
+ #outlook a { padding:0; }
12
+ body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
13
+ table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
14
+ img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
15
+ p { display:block;margin:13px 0; }
16
+ </style>
17
+ <!--[if mso]>
18
+ <noscript>
19
+ <xml>
20
+ <o:OfficeDocumentSettings>
21
+ <o:AllowPNG/>
22
+ <o:PixelsPerInch>96</o:PixelsPerInch>
23
+ </o:OfficeDocumentSettings>
24
+ </xml>
25
+ </noscript>
26
+ <![endif]-->
27
+ <!--[if lte mso 11]>
28
+ <style type="text/css">
29
+ .mj-outlook-group-fix { width:100% !important; }
30
+ </style>
31
+ <![endif]-->
32
+
33
+ <!--[if !mso]><!-->
34
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" type="text/css">
35
+ <style type="text/css">
36
+ @import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap);
37
+ </style>
38
+ <!--<![endif]-->
39
+
40
+
41
+
42
+ <style type="text/css">
43
+ @media only screen and (min-width:480px) {
44
+ .mj-column-per-100 { width:100% !important; max-width: 100%; }
45
+ }
46
+ </style>
47
+ <style media="screen and (min-width:480px)">
48
+ .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
49
+ </style>
50
+
51
+
52
+
53
+
54
+
55
+ <style type="text/css">
56
+ /* Client resets emaillove ships that MJML omits (Outlook.com line-height, image gaps). */
57
+ img { display: block; }
58
+ .ExternalClass { width: 100%; }
59
+ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
60
+ /* Dark-only images hidden in light mode; swapped in the dark block below. */
61
+ .dl { display: none; }
62
+
63
+ /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
64
+ @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
65
+ css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
66
+ size is the inline fallback if <style> is dropped. Per production emails, only the primary/
67
+ hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
68
+ mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
69
+ @media only screen and (max-width: 479px) {
70
+ .clay-h1 > div { font-size: 48px !important; }
71
+ .clay-h2 > div { font-size: 40px !important; }
72
+ .clay-h3 > div { font-size: 32px !important; }
73
+ .clay-h4 > div { font-size: 24px !important; }
74
+
75
+ /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
76
+ the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
77
+ Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
78
+ Targets the outer td MJML generates with inline padding-left/padding-right. */
79
+ .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
80
+ .email-mobile-px-16 > table > tbody > tr > td { padding-right: 16px !important; padding-left: 16px !important; }
81
+ .email-mobile-px-0 > table > tbody > tr > td { padding-right: 0 !important; padding-left: 0 !important; }
82
+ .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
83
+
84
+ /* Mobile text centering — apply as css-class on mj-text elements whose content should be
85
+ center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
86
+ Targets the inner <div> MJML wraps text content in. */
87
+ .email-mobile-center > div { text-align: center !important; }
88
+
89
+ /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
90
+ text-align on the td does not reposition its block-level child table (CSS text-align
91
+ only affects inline content), so the nested image-wrapper table also needs margin:auto
92
+ to actually override the mj-image align="left"/"right" attribute on mobile. */
93
+ .email-mobile-center-img { text-align: center !important; }
94
+ .email-mobile-center-img > table { margin: 0 auto !important; }
95
+
96
+ /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
97
+ Makes the button's inner <table> fill the column width and centers it.
98
+ Matches emaillove .mj-b-full pattern. */
99
+ .email-btn-full > table { width: 100% !important; }
100
+ .email-btn-full > table > tbody > tr > td { text-align: center !important; }
101
+ }
102
+
103
+ /* Left-aligned button content — apply css-class="email-btn-left" to mj-button.
104
+ Overrides MJML's default text-align:center on the inner td and anchor so
105
+ icon+text rows (e.g. buttons-icons) are left-aligned like the emaillove source. */
106
+ .email-btn-left > table > tbody > tr > td { text-align: left !important; }
107
+ .email-btn-left > table > tbody > tr > td > a { text-align: left !important; }
108
+
109
+ /* Decorative image tilt — apply css-class="email-tilt-1".."email-tilt-4" to mj-image for a
110
+ fanned photo-stack look (e.g. an avatar composite row). Webkit/Blink clients rotate the
111
+ image; Outlook and other non-supporting clients silently ignore the transform and show the
112
+ image unrotated — safe graceful degradation, never a broken layout. */
113
+ .email-tilt-1 { transform: rotate(-6deg); }
114
+ .email-tilt-2 { transform: rotate(4deg); }
115
+ .email-tilt-3 { transform: rotate(-4deg); }
116
+ .email-tilt-4 { transform: rotate(6deg); }
117
+
118
+ :root { color-scheme: light dark; supported-color-schemes: light dark; }
119
+ @media (prefers-color-scheme: dark) {
120
+ body, .email-page { background-color: #000000 !important; }
121
+ /*
122
+ * email-card: flip a section or column's background to dark.
123
+ *
124
+ * Three selectors cover every compiled MJML structure:
125
+ * 1. .email-card — the outer <div> (mj-section or mj-column)
126
+ * 2. .email-card > table — the direct child <table> (mj-section has inline bg here)
127
+ * 3. .email-card > table > tbody > tr > td
128
+ * — the content <td> inside mj-column (carries inline bg-color
129
+ * + border-radius when background-color is set on mj-column)
130
+ *
131
+ * Apply css-class="email-card" to any mj-section or mj-column that should
132
+ * become dark. Works for grey inner cards (#f3f4f5), coloured panels, etc.
133
+ */
134
+ .email-card,
135
+ .email-card > table,
136
+ .email-card > table > tbody > tr > td { background-color: #252526 !important; }
137
+ .email-text, .email-text * { color: #ffffff !important; }
138
+ .ll { display: none !important; }
139
+ .dl { display: block !important; }
140
+ /* Black CTA button invert — apply css-class="email-btn-invert-dark" to invert a black
141
+ mj-button to white background + black text in dark mode. Matches emaillove global
142
+ .mj-b>td { background-color:#ffffff } pattern for black CTA buttons. */
143
+ .email-btn-invert-dark > table > tbody > tr > td { background-color: #ffffff !important; }
144
+ .email-btn-invert-dark > table > tbody > tr > td > a { background-color: #ffffff !important; color: #000000 !important; }
145
+ }
146
+ /* Outlook.com + Gmail-app dark mode — these clients ignore prefers-color-scheme and instead
147
+ prefix overridden nodes with data-ogsc (foreground) / data-ogsb (background). */
148
+ [data-ogsb] body, [data-ogsb] .email-page { background-color: #000000 !important; }
149
+ [data-ogsb] .email-card,
150
+ [data-ogsb] .email-card > table,
151
+ [data-ogsb] .email-card > table > tbody > tr > td { background-color: #252526 !important; }
152
+ [data-ogsc] .email-text, [data-ogsc] .email-text * { color: #ffffff !important; }
153
+ </style>
154
+ <!-- GENERATED by src/tokens/build-email-tokens.ts — do not edit. Run `pnpm --filter @clay-design-system/email tokens:check`. -->
155
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
156
+ <meta name="x-apple-disable-message-reformatting" />
157
+ <meta name="color-scheme" content="light dark" />
158
+ <meta name="supported-color-schemes" content="light dark" />
159
+ </head>
160
+ <body style="word-spacing:normal;background-color:#f3f4f5;">
161
+
162
+ <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Section preview — Buttons Secondary</div>
163
+
164
+
165
+ <div
166
+ aria-label="Buttons — Secondary" aria-roledescription="email" style="background-color:#f3f4f5;" role="article" lang="und" dir="auto"
167
+ >
168
+
169
+
170
+ <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-card-outlook" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
171
+
172
+
173
+ <div class="email-card" style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:640px;">
174
+
175
+ <table
176
+ align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
177
+ >
178
+ <tbody>
179
+ <tr>
180
+ <td
181
+ style="direction:ltr;font-size:0px;padding:0;text-align:center;"
182
+ >
183
+ <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
184
+
185
+ <!-- buttons-secondary — iris underline text link ("Learn more >").
186
+ Source: emaillove "Buttons" export / Figma Clay-LCM (node 8:208).
187
+ mj-text + inline <a> with border-bottom:1px solid #6161ff. No email-text — iris stays
188
+ in dark mode (source keeps #6161ff on dark canvas, does NOT flip to white). -->
189
+ <!--[if mso | IE]><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
190
+
191
+
192
+ <div style="margin:0px auto;max-width:640px;">
193
+
194
+ <table
195
+ align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
196
+ >
197
+ <tbody>
198
+ <tr>
199
+ <td
200
+ style="direction:ltr;font-size:0px;padding:24px 40px;text-align:center;"
201
+ >
202
+ <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:560px;" ><![endif]-->
203
+
204
+ <div
205
+ class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
206
+ >
207
+
208
+ <table
209
+ border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
210
+ >
211
+ <tbody>
212
+
213
+ <tr>
214
+ <td
215
+ align="center" style="font-size:0px;padding:0;word-break:break-word;"
216
+ >
217
+
218
+ <div
219
+ style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:400;line-height:1.4;text-align:center;color:#252526;"
220
+ ><a href="https://monday.com" style="display:inline-block;color:#6161ff;text-decoration:none;border-bottom:1px solid #6161ff;padding-bottom:2px;">Learn more &gt;</a></div>
221
+
222
+ </td>
223
+ </tr>
224
+
225
+ </tbody>
226
+ </table>
227
+
228
+ </div>
229
+
230
+ <!--[if mso | IE]></td></tr></table><![endif]-->
231
+ </td>
232
+ </tr>
233
+ </tbody>
234
+ </table>
235
+
236
+ </div>
237
+
238
+
239
+ <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
240
+ </td>
241
+ </tr>
242
+ </tbody>
243
+ </table>
244
+
245
+ </div>
246
+
247
+
248
+ <!--[if mso | IE]></td></tr></table><![endif]-->
249
+
250
+
251
+ </div>
252
+
253
+ </body>
254
+ </html>
255
+
package/dist/emails/component-buttons-two-integrations.html ADDED
@@ -0,0 +1,310 @@
1
+ <!doctype html>
2
+ <html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
3
+ <head>
4
+ <title>Buttons — Two Integrations</title>
5
+ <!--[if !mso]><!-->
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <!--<![endif]-->
8
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <style type="text/css">
11
+ #outlook a { padding:0; }
12
+ body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
13
+ table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
14
+ img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
15
+ p { display:block;margin:13px 0; }
16
+ </style>
17
+ <!--[if mso]>
18
+ <noscript>
19
+ <xml>
20
+ <o:OfficeDocumentSettings>
21
+ <o:AllowPNG/>
22
+ <o:PixelsPerInch>96</o:PixelsPerInch>
23
+ </o:OfficeDocumentSettings>
24
+ </xml>
25
+ </noscript>
26
+ <![endif]-->
27
+ <!--[if lte mso 11]>
28
+ <style type="text/css">
29
+ .mj-outlook-group-fix { width:100% !important; }
30
+ </style>
31
+ <![endif]-->
32
+
33
+ <!--[if !mso]><!-->
34
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" type="text/css">
35
+ <style type="text/css">
36
+ @import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap);
37
+ </style>
38
+ <!--<![endif]-->
39
+
40
+
41
+
42
+ <style type="text/css">
43
+ @media only screen and (min-width:480px) {
44
+ .mj-column-per-34-375 { width:34.375% !important; max-width: 34.375%; }
45
+ .mj-column-per-65-625 { width:65.625% !important; max-width: 65.625%; }
46
+ }
47
+ </style>
48
+ <style media="screen and (min-width:480px)">
49
+ .moz-text-html .mj-column-per-34-375 { width:34.375% !important; max-width: 34.375%; }
50
+ .moz-text-html .mj-column-per-65-625 { width:65.625% !important; max-width: 65.625%; }
51
+ </style>
52
+
53
+
54
+
55
+
56
+
57
+ <style type="text/css">
58
+ /* Client resets emaillove ships that MJML omits (Outlook.com line-height, image gaps). */
59
+ img { display: block; }
60
+ .ExternalClass { width: 100%; }
61
+ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
62
+ /* Dark-only images hidden in light mode; swapped in the dark block below. */
63
+ .dl { display: none; }
64
+
65
+ /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
66
+ @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
67
+ css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
68
+ size is the inline fallback if <style> is dropped. Per production emails, only the primary/
69
+ hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
70
+ mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
71
+ @media only screen and (max-width: 479px) {
72
+ .clay-h1 > div { font-size: 48px !important; }
73
+ .clay-h2 > div { font-size: 40px !important; }
74
+ .clay-h3 > div { font-size: 32px !important; }
75
+ .clay-h4 > div { font-size: 24px !important; }
76
+
77
+ /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
78
+ the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
79
+ Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
80
+ Targets the outer td MJML generates with inline padding-left/padding-right. */
81
+ .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
82
+ .email-mobile-px-16 > table > tbody > tr > td { padding-right: 16px !important; padding-left: 16px !important; }
83
+ .email-mobile-px-0 > table > tbody > tr > td { padding-right: 0 !important; padding-left: 0 !important; }
84
+ .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
85
+
86
+ /* Mobile text centering — apply as css-class on mj-text elements whose content should be
87
+ center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
88
+ Targets the inner <div> MJML wraps text content in. */
89
+ .email-mobile-center > div { text-align: center !important; }
90
+
91
+ /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
92
+ text-align on the td does not reposition its block-level child table (CSS text-align
93
+ only affects inline content), so the nested image-wrapper table also needs margin:auto
94
+ to actually override the mj-image align="left"/"right" attribute on mobile. */
95
+ .email-mobile-center-img { text-align: center !important; }
96
+ .email-mobile-center-img > table { margin: 0 auto !important; }
97
+
98
+ /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
99
+ Makes the button's inner <table> fill the column width and centers it.
100
+ Matches emaillove .mj-b-full pattern. */
101
+ .email-btn-full > table { width: 100% !important; }
102
+ .email-btn-full > table > tbody > tr > td { text-align: center !important; }
103
+ }
104
+
105
+ /* Left-aligned button content — apply css-class="email-btn-left" to mj-button.
106
+ Overrides MJML's default text-align:center on the inner td and anchor so
107
+ icon+text rows (e.g. buttons-icons) are left-aligned like the emaillove source. */
108
+ .email-btn-left > table > tbody > tr > td { text-align: left !important; }
109
+ .email-btn-left > table > tbody > tr > td > a { text-align: left !important; }
110
+
111
+ /* Decorative image tilt — apply css-class="email-tilt-1".."email-tilt-4" to mj-image for a
112
+ fanned photo-stack look (e.g. an avatar composite row). Webkit/Blink clients rotate the
113
+ image; Outlook and other non-supporting clients silently ignore the transform and show the
114
+ image unrotated — safe graceful degradation, never a broken layout. */
115
+ .email-tilt-1 { transform: rotate(-6deg); }
116
+ .email-tilt-2 { transform: rotate(4deg); }
117
+ .email-tilt-3 { transform: rotate(-4deg); }
118
+ .email-tilt-4 { transform: rotate(6deg); }
119
+
120
+ :root { color-scheme: light dark; supported-color-schemes: light dark; }
121
+ @media (prefers-color-scheme: dark) {
122
+ body, .email-page { background-color: #000000 !important; }
123
+ /*
124
+ * email-card: flip a section or column's background to dark.
125
+ *
126
+ * Three selectors cover every compiled MJML structure:
127
+ * 1. .email-card — the outer <div> (mj-section or mj-column)
128
+ * 2. .email-card > table — the direct child <table> (mj-section has inline bg here)
129
+ * 3. .email-card > table > tbody > tr > td
130
+ * — the content <td> inside mj-column (carries inline bg-color
131
+ * + border-radius when background-color is set on mj-column)
132
+ *
133
+ * Apply css-class="email-card" to any mj-section or mj-column that should
134
+ * become dark. Works for grey inner cards (#f3f4f5), coloured panels, etc.
135
+ */
136
+ .email-card,
137
+ .email-card > table,
138
+ .email-card > table > tbody > tr > td { background-color: #252526 !important; }
139
+ .email-text, .email-text * { color: #ffffff !important; }
140
+ .ll { display: none !important; }
141
+ .dl { display: block !important; }
142
+ /* Black CTA button invert — apply css-class="email-btn-invert-dark" to invert a black
143
+ mj-button to white background + black text in dark mode. Matches emaillove global
144
+ .mj-b>td { background-color:#ffffff } pattern for black CTA buttons. */
145
+ .email-btn-invert-dark > table > tbody > tr > td { background-color: #ffffff !important; }
146
+ .email-btn-invert-dark > table > tbody > tr > td > a { background-color: #ffffff !important; color: #000000 !important; }
147
+ }
148
+ /* Outlook.com + Gmail-app dark mode — these clients ignore prefers-color-scheme and instead
149
+ prefix overridden nodes with data-ogsc (foreground) / data-ogsb (background). */
150
+ [data-ogsb] body, [data-ogsb] .email-page { background-color: #000000 !important; }
151
+ [data-ogsb] .email-card,
152
+ [data-ogsb] .email-card > table,
153
+ [data-ogsb] .email-card > table > tbody > tr > td { background-color: #252526 !important; }
154
+ [data-ogsc] .email-text, [data-ogsc] .email-text * { color: #ffffff !important; }
155
+ </style>
156
+ <!-- GENERATED by src/tokens/build-email-tokens.ts — do not edit. Run `pnpm --filter @clay-design-system/email tokens:check`. -->
157
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
158
+ <meta name="x-apple-disable-message-reformatting" />
159
+ <meta name="color-scheme" content="light dark" />
160
+ <meta name="supported-color-schemes" content="light dark" />
161
+ </head>
162
+ <body style="word-spacing:normal;background-color:#f3f4f5;">
163
+
164
+ <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Section preview — Buttons Two Integrations</div>
165
+
166
+
167
+ <div
168
+ aria-label="Buttons — Two Integrations" aria-roledescription="email" style="background-color:#f3f4f5;" role="article" lang="und" dir="auto"
169
+ >
170
+
171
+
172
+ <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-card-outlook" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
173
+
174
+
175
+ <div class="email-card" style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:640px;">
176
+
177
+ <table
178
+ align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
179
+ >
180
+ <tbody>
181
+ <tr>
182
+ <td
183
+ style="direction:ltr;font-size:0px;padding:0;text-align:center;"
184
+ >
185
+ <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
186
+
187
+ <!-- buttons-two-integrations — two icon + text links side by side (Gmail + Outlook).
188
+ Source: emaillove "Buttons" export / Figma Clay-LCM (node 8:232).
189
+ 34.375% (220px) left column + 65.625% (420px) right column. Content base = 640px.
190
+ Columns stack full-width below 480px. email-text flips both links to white on dark canvas.
191
+ Source mobile: left col padding → 24px all sides; right col padding → 0 40px 24px 40px. -->
192
+ <!--[if mso | IE]><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
193
+
194
+
195
+ <div style="margin:0px auto;max-width:640px;">
196
+
197
+ <table
198
+ align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
199
+ >
200
+ <tbody>
201
+ <tr>
202
+ <td
203
+ style="direction:ltr;font-size:0px;padding:0;text-align:center;"
204
+ >
205
+ <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="email-mobile-px-24-outlook" style="vertical-align:middle;width:220px;" ><![endif]-->
206
+
207
+ <div
208
+ class="mj-column-per-34-375 mj-outlook-group-fix email-mobile-px-24" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;"
209
+ >
210
+
211
+ <table
212
+ border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
213
+ >
214
+ <tbody>
215
+ <tr>
216
+ <td style="vertical-align:middle;padding:24px 0 24px 40px;">
217
+
218
+ <table
219
+ border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
220
+ >
221
+ <tbody>
222
+
223
+ <tr>
224
+ <td
225
+ align="left" class="email-text email-mobile-center" style="font-size:0px;padding:0;word-break:break-word;"
226
+ >
227
+
228
+ <div
229
+ style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#252526;"
230
+ ><a href="https://monday.com" style="display:inline-block;color:#45454a;text-decoration:none;vertical-align:middle;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAA79JREFUeAG9V11oVEcU/mbm7s3e7NqaNg2J2kL/Hkqx1UIf+lKqYGjpU6EPhQpR2j4UqRUVrK2tFSttKLbWUtJCqUUSWih9UwRFVBAlKv4gig+KMRERFE3W3b2/M+PZu5vduK47m2STD24y98zZc747c87MOcAU4HneC3k36nfdMEvPPRoPFGSYaWQyuj3vhTvybujTo6sevzCntW6fjE3WiBIZdXJusJpz/gU05tbVJZ6M822OzXcyxjxMhwA55l4oP9QS2+jtaUwKelgBX6eSiX4iojBZAlkvXMaBXvqkxZgGNMNZWpUN6WRiPxohkA2CV4Vi32uNd9BEMIZ9MlIb0umW8zUJ5HJ6HufyOw3dQ68cMwPFOPtbS7G5tZVdLxPI5YLXmGAHTQHWLNCW3IXS3amUfSr+UmL122w5j/0BbeTz19IYoByO6J/A7EK1OgkxvtePdC7HRnFr9y5kTw6iETCZAx/aBHFlFRDdrqca+7ZgwNX1a3Dv2FFS55jXsxIdq9eB2XZNXTUyBGvkfQh9oSRJQD6/A0YW9eAPXytZV8j8NwB33cdQw0MP6YVHDsBd+xFw+0pFGNwwmTcTuNP+YnlMJyPU1cvIr1mBcO//RVkYwv/jZ/g/boZ23QohzXHI7zSZN2/BP8t24jn+O5ac7YvzJ0YQwO/bjuj0IPQYZdSlC5UfRAw3pYOvMq9jjujCmwb7xhWwKE4PL/4Uf767G3fmLHhgTg4efdA54XjQiZ7RJbgo2yC1Mpk3ExjPk5GORdiz4l9Yb3U/whKHvfwT7Op6DxmdKBKkW2zaBPgEDZlMI7n+W7Ss/QasNVWWs8fb4Gz5CfYHK4lwZVcbWQFjDIgJBKKSvcTStyFeWgh/+xYKCwZn41awJzuKBlnlSJHKvAJmAhPuS6V1ecy75sPp7Yszg1kVM5aojMNmELBiBkXHstqeEA/d53yChJIWJhhj4NmOikGlYcQTybnocp7CglQnls5/w6g/fhnJemSyXlxQ0GoALcY1axiSLiNr3OmJeprpJJBqaarzAk4W/sQEtNKfUSjdxWyBYdQSelWZQKEyYVq8QkXCX/RqjpypQ9HHUkkWvGzb9ukilypkfX+hUKKXasPmFqWgolTqjem0fa5KXhtUlneXyvJFmJ7nM6pYlh+oPV0HcWPiyeWUz1tJ9RlMzvOIgto05cakikgy50af05n0JR0Fj9XXxSgZ/cFxrEJr5qKZyFDjmc8Hv9RqTqlL9rM0V2hgMdPwPE3teTCQj1vzQose9Y9NsT2/D2RiqrHeaeIMAAAAAElFTkSuQmCC" alt="Gmail" width="32" style="vertical-align:middle;margin-right:4px;display:inline-block;"> Integrate Gmail &gt;</a></div>
231
+
232
+ </td>
233
+ </tr>
234
+
235
+ </tbody>
236
+ </table>
237
+
238
+ </td>
239
+ </tr>
240
+ </tbody>
241
+ </table>
242
+
243
+ </div>
244
+
245
+ <!--[if mso | IE]></td><td class="email-mobile-px-24-outlook email-mobile-pt-0-outlook" style="vertical-align:middle;width:420px;" ><![endif]-->
246
+
247
+ <div
248
+ class="mj-column-per-65-625 mj-outlook-group-fix email-mobile-px-24 email-mobile-pt-0" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;"
249
+ >
250
+
251
+ <table
252
+ border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
253
+ >
254
+ <tbody>
255
+ <tr>
256
+ <td style="vertical-align:middle;padding:24px 40px 24px 12px;">
257
+
258
+ <table
259
+ border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
260
+ >
261
+ <tbody>
262
+
263
+ <tr>
264
+ <td
265
+ align="left" class="email-text email-mobile-center" style="font-size:0px;padding:0;word-break:break-word;"
266
+ >
267
+
268
+ <div
269
+ style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#252526;"
270
+ ><a href="https://monday.com" style="display:inline-block;color:#45454a;text-decoration:none;vertical-align:middle;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAABIxJREFUeAGtV21MU2cUfu5taQst3zCUAUU+ZANNoWzLls2NOKYCuo3FZGTZ3I+Nff1YphOIyeL0xxKBxmiWhWRmW3Rs8YfRbEw7gR86Ndsi39IluOIYoIgVpFBo6cet595KBZTe3tonuTl9z/ve9zz39LznPQcIAV6vdyM9nYPjVq/5hpV+ev+m52WEAEbKYjKST6L+yvDk1oaTXbhstgj64uxk1FYWQZeZeJqGtQzD/BPsnkERIMOrSewdnbC9f6ilT366c5jXLVnDMgzK9BnY/brOszpefYRU+4jIuNjejIjhSBK7rXZXzZGzpujm81fhcHkCvQKFnMWOkjxUb863xUYq6kl1iIjYJBEgwyyJHW4P99XPF8yp3xj7YZ2dhxTEa5T4eEsBqjbkjihk7F5SHSMinCgBMl5K3m1s6xspNJzqwfBtGx4F2sei8fmrOmwqTO+lYQ2RaHsoATJcQKKxb2iirOFUNzoGLQgn9FlJqKvUQ7cm8Qx8gWryEyDjJbemHcYDJzpVxu6RBwIsXOADdUtRBvZs1zuSY1RlROLcAoGu7Q1ni/qHJyVtGK9WIu/xOAxcn8IdCTGyLiMBJ2o3dxMBvZxXzNidukDGVQo5clJiBGPZqbF4IjUOa+lJilEJ828aWiUR4G3ZHC4d/1sgQB5nV1qsTdLA+OVWwX3hBOc7aT4CgSCTsaLGKfGg8tmsJTqPx4uDLb2YdbgCvitKIBjEqRWoeiHHP3a5OXx95grs827RdyUR4Dc2/NqDEYuNUm4hsiguluPa+DRqj/4JOcsgNiqCYsMZcE8WEvDj+QEMjE4JAbjz+0t+/c0pO0wUWMcvmlFlaEOpLg3Nu0oRpYoQ3VOSBy6YxvDBpnw8l7cKP/1xFRarHcmxkUKMvHO4HWkJGvzw6UYUpMcHvackAkqFDHanG063By4Phwi5z4HZq6Jx+L3nIZcxYCSeFkkEKoq1OEBpes2lQTyTm0LBp/TPLZCRCkkEtj2dCRkFF39BvbUhV3Q9x4mndMnHsJy8sBz/jc9gT/NfS3Qzcy6M3ZlD2Ak8DJZpO9r7RhEKRP+4KcrxLZeHhPMdjEulQvAAy7LcSmQmbfOoocTCQ62MwJPpccJtlp8WTzIRmVRwhAI6LJyfgEYl712nTSjq/z/wdTw770IHVcId5vvFSpRSLtkz/AdEqxR8heT/6l1NH77oKNNryRvSzvEc5XuxQnUBfI4op8q56aOXHLxNQbcwea8ka+gdul1ef7IHXdfCW5It6h2M8NWG90uyxSAir5BobO0e1R2ki2fIMoNHQUZyNGpe06G0ML2H8RluXzwfqCx/1+ni9h+/+G960+8mSRUPD/6K/qRsPSWsnBtyGfsFqY4GVZYvI6IhsXN6zlX7batJc+zcAN0DXEDDqggZ3i5Zi+rS/JlYtcJAqkYybF9pfbCtWQqJfZTZqg2/9MiMXcMPRD4fYBXFGfhsm86dlqj+jlT7STcmtncozSkF6kQF3zt03usdnqIAq3tDj/XahN9oWCelOQ0JfCvOt+TmMat38KbQnnfyLTtCwF2e980uQGy2iAAAAABJRU5ErkJggg==" alt="Outlook" width="32" style="vertical-align:middle;margin-right:4px;display:inline-block;"> Integrate Outlook &gt;</a></div>
271
+
272
+ </td>
273
+ </tr>
274
+
275
+ </tbody>
276
+ </table>
277
+
278
+ </td>
279
+ </tr>
280
+ </tbody>
281
+ </table>
282
+
283
+ </div>
284
+
285
+ <!--[if mso | IE]></td></tr></table><![endif]-->
286
+ </td>
287
+ </tr>
288
+ </tbody>
289
+ </table>
290
+
291
+ </div>
292
+
293
+
294
+ <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
295
+ </td>
296
+ </tr>
297
+ </tbody>
298
+ </table>
299
+
300
+ </div>
301
+
302
+
303
+ <!--[if mso | IE]></td></tr></table><![endif]-->
304
+
305
+
306
+ </div>
307
+
308
+ </body>
309
+ </html>
310
+