@planetaexo/design-system 0.60.0 → 0.62.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 (7) hide show
  1. package/dist/index.cjs +324 -0
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +91 -1
  4. package/dist/index.d.ts +91 -1
  5. package/dist/index.js +324 -1
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -7346,6 +7346,329 @@ function BookingOtpEmail({
7346
7346
  }
7347
7347
  );
7348
7348
  }
7349
+ function NotificationEmail({
7350
+ greeting,
7351
+ paragraphs,
7352
+ cta,
7353
+ details,
7354
+ detailsHeading,
7355
+ highlight,
7356
+ summary,
7357
+ roster,
7358
+ signature,
7359
+ logoUrl,
7360
+ className
7361
+ }) {
7362
+ const ctaStyle = {
7363
+ display: "inline-block",
7364
+ backgroundColor: emailTokens.primary,
7365
+ color: emailTokens.primaryForeground,
7366
+ padding: "12px 24px",
7367
+ borderRadius: "8px",
7368
+ fontSize: "14px",
7369
+ fontWeight: "700",
7370
+ textDecoration: "none",
7371
+ fontFamily: emailTokens.fontFamily
7372
+ };
7373
+ const hasHighlight = Array.isArray(highlight) && highlight.length > 0;
7374
+ const hasDetails = Array.isArray(details) && details.length > 0;
7375
+ const hasSummary = !!summary && Array.isArray(summary.rows) && summary.rows.length > 0;
7376
+ const hasRoster = !!roster && Array.isArray(roster.people) && roster.people.length > 0;
7377
+ return /* @__PURE__ */ jsxRuntime.jsxs(
7378
+ "div",
7379
+ {
7380
+ style: {
7381
+ fontFamily: emailTokens.fontFamily,
7382
+ color: emailTokens.foreground,
7383
+ maxWidth: "600px",
7384
+ margin: "0 auto",
7385
+ padding: "32px",
7386
+ border: `1px solid ${emailTokens.border}`,
7387
+ borderRadius: "12px",
7388
+ backgroundColor: emailTokens.white
7389
+ },
7390
+ className,
7391
+ children: [
7392
+ /* @__PURE__ */ jsxRuntime.jsx(EmailLogo, { src: logoUrl }),
7393
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px", lineHeight: "1.5", margin: "0 0 16px" }, children: greeting }),
7394
+ paragraphs.map((paragraph, i) => /* @__PURE__ */ jsxRuntime.jsx(
7395
+ "p",
7396
+ {
7397
+ style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 16px" },
7398
+ children: paragraph
7399
+ },
7400
+ i
7401
+ )),
7402
+ hasHighlight && /* @__PURE__ */ jsxRuntime.jsx(
7403
+ "table",
7404
+ {
7405
+ role: "presentation",
7406
+ cellPadding: 0,
7407
+ cellSpacing: 0,
7408
+ border: 0,
7409
+ style: { width: "100%", borderCollapse: "collapse", margin: "0 0 24px" },
7410
+ children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
7411
+ "td",
7412
+ {
7413
+ style: {
7414
+ backgroundColor: emailTokens.primaryLight,
7415
+ border: `1px solid ${emailTokens.border}`,
7416
+ borderRadius: "12px",
7417
+ padding: "24px 16px"
7418
+ },
7419
+ children: highlight.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
7420
+ "p",
7421
+ {
7422
+ style: {
7423
+ fontSize: "15px",
7424
+ lineHeight: "1.5",
7425
+ margin: i < highlight.length - 1 ? "0 0 8px" : "0",
7426
+ color: emailTokens.foreground
7427
+ },
7428
+ children: line
7429
+ },
7430
+ i
7431
+ ))
7432
+ }
7433
+ ) }) })
7434
+ }
7435
+ ),
7436
+ hasSummary && /* @__PURE__ */ jsxRuntime.jsx(
7437
+ BookingSummary,
7438
+ {
7439
+ heading: summary.heading,
7440
+ rows: summary.rows.map((row) => ({
7441
+ label: row.label,
7442
+ value: row.value,
7443
+ valueColor: row.emphasizeValue ? emailTokens.primary : void 0
7444
+ }))
7445
+ }
7446
+ ),
7447
+ hasRoster && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
7448
+ roster.heading && /* @__PURE__ */ jsxRuntime.jsx(
7449
+ "p",
7450
+ {
7451
+ style: {
7452
+ fontSize: "15px",
7453
+ lineHeight: "1.5",
7454
+ fontWeight: 700,
7455
+ margin: "0 0 12px"
7456
+ },
7457
+ children: roster.heading
7458
+ }
7459
+ ),
7460
+ /* @__PURE__ */ jsxRuntime.jsx(
7461
+ "table",
7462
+ {
7463
+ role: "presentation",
7464
+ cellPadding: 0,
7465
+ cellSpacing: 0,
7466
+ border: 0,
7467
+ style: {
7468
+ width: "100%",
7469
+ borderCollapse: "collapse",
7470
+ borderRadius: "12px",
7471
+ border: `1px solid ${emailTokens.border}`,
7472
+ margin: "0 0 24px"
7473
+ },
7474
+ children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
7475
+ roster.people.map((person, i) => {
7476
+ var _a;
7477
+ const isLast = i === roster.people.length - 1 && !roster.footnote;
7478
+ return /* @__PURE__ */ jsxRuntime.jsxs(
7479
+ "tr",
7480
+ {
7481
+ style: !isLast ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
7482
+ children: [
7483
+ /* @__PURE__ */ jsxRuntime.jsx(
7484
+ "td",
7485
+ {
7486
+ style: {
7487
+ width: "32px",
7488
+ padding: "12px 0 12px 16px",
7489
+ verticalAlign: "top"
7490
+ },
7491
+ children: /* @__PURE__ */ jsxRuntime.jsx(
7492
+ "table",
7493
+ {
7494
+ role: "presentation",
7495
+ cellPadding: 0,
7496
+ cellSpacing: 0,
7497
+ border: 0,
7498
+ style: { borderCollapse: "collapse" },
7499
+ children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
7500
+ "td",
7501
+ {
7502
+ style: {
7503
+ width: "32px",
7504
+ height: "32px",
7505
+ borderRadius: "16px",
7506
+ backgroundColor: emailTokens.primaryLight,
7507
+ color: emailTokens.primary,
7508
+ fontSize: "13px",
7509
+ fontWeight: 700,
7510
+ textAlign: "center",
7511
+ verticalAlign: "middle",
7512
+ lineHeight: "32px"
7513
+ },
7514
+ children: ((_a = person.name.trim()[0]) != null ? _a : "\u2022").toUpperCase()
7515
+ }
7516
+ ) }) })
7517
+ }
7518
+ )
7519
+ }
7520
+ ),
7521
+ /* @__PURE__ */ jsxRuntime.jsxs(
7522
+ "td",
7523
+ {
7524
+ style: {
7525
+ padding: "12px 16px 12px 12px",
7526
+ verticalAlign: "top"
7527
+ },
7528
+ children: [
7529
+ /* @__PURE__ */ jsxRuntime.jsx(
7530
+ "span",
7531
+ {
7532
+ style: {
7533
+ fontSize: "14px",
7534
+ fontWeight: 500,
7535
+ color: emailTokens.foreground
7536
+ },
7537
+ children: person.name
7538
+ }
7539
+ ),
7540
+ person.flag && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", paddingLeft: "6px" }, children: person.flag }),
7541
+ person.isLeader && roster.leaderLabel && /* @__PURE__ */ jsxRuntime.jsx(
7542
+ "span",
7543
+ {
7544
+ style: {
7545
+ display: "inline-block",
7546
+ marginLeft: "8px",
7547
+ padding: "1px 8px",
7548
+ borderRadius: "9999px",
7549
+ backgroundColor: emailTokens.primaryLight,
7550
+ color: emailTokens.primary,
7551
+ fontSize: "11px",
7552
+ fontWeight: 500,
7553
+ verticalAlign: "middle"
7554
+ },
7555
+ children: roster.leaderLabel
7556
+ }
7557
+ ),
7558
+ person.note && /* @__PURE__ */ jsxRuntime.jsx(
7559
+ "span",
7560
+ {
7561
+ style: {
7562
+ display: "block",
7563
+ marginTop: "2px",
7564
+ fontSize: "12px",
7565
+ color: emailTokens.mutedForeground
7566
+ },
7567
+ children: person.note
7568
+ }
7569
+ )
7570
+ ]
7571
+ }
7572
+ )
7573
+ ]
7574
+ },
7575
+ i
7576
+ );
7577
+ }),
7578
+ roster.footnote && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
7579
+ "td",
7580
+ {
7581
+ colSpan: 2,
7582
+ style: {
7583
+ padding: "12px 16px",
7584
+ fontSize: "12px",
7585
+ color: emailTokens.mutedForeground,
7586
+ backgroundColor: emailTokens.muted
7587
+ },
7588
+ children: roster.footnote
7589
+ }
7590
+ ) })
7591
+ ] })
7592
+ }
7593
+ )
7594
+ ] }),
7595
+ hasDetails && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
7596
+ detailsHeading && /* @__PURE__ */ jsxRuntime.jsx(
7597
+ "p",
7598
+ {
7599
+ style: {
7600
+ fontSize: "15px",
7601
+ lineHeight: "1.5",
7602
+ fontWeight: 700,
7603
+ margin: "0 0 12px"
7604
+ },
7605
+ children: detailsHeading
7606
+ }
7607
+ ),
7608
+ /* @__PURE__ */ jsxRuntime.jsx(
7609
+ "table",
7610
+ {
7611
+ role: "presentation",
7612
+ cellPadding: 0,
7613
+ cellSpacing: 0,
7614
+ border: 0,
7615
+ style: { width: "100%", borderCollapse: "collapse", margin: "0 0 24px" },
7616
+ children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: details.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: item.label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
7617
+ /* @__PURE__ */ jsxRuntime.jsx(
7618
+ "td",
7619
+ {
7620
+ style: {
7621
+ fontSize: "14px",
7622
+ lineHeight: "1.6",
7623
+ color: emailTokens.mutedForeground,
7624
+ padding: "4px 12px 4px 0",
7625
+ verticalAlign: "top",
7626
+ whiteSpace: "nowrap"
7627
+ },
7628
+ children: item.label
7629
+ }
7630
+ ),
7631
+ /* @__PURE__ */ jsxRuntime.jsx(
7632
+ "td",
7633
+ {
7634
+ style: {
7635
+ fontSize: "14px",
7636
+ lineHeight: "1.6",
7637
+ color: item.emphasizeValue ? emailTokens.primary : emailTokens.foreground,
7638
+ fontWeight: item.emphasizeValue ? 700 : 400,
7639
+ padding: "4px 0",
7640
+ verticalAlign: "top",
7641
+ width: "100%"
7642
+ },
7643
+ children: item.value
7644
+ }
7645
+ )
7646
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
7647
+ "td",
7648
+ {
7649
+ colSpan: 2,
7650
+ style: {
7651
+ fontSize: "14px",
7652
+ lineHeight: "1.6",
7653
+ color: emailTokens.foreground,
7654
+ padding: "4px 0",
7655
+ verticalAlign: "top"
7656
+ },
7657
+ children: [
7658
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: emailTokens.primary, paddingRight: "8px" }, children: "\u2022" }),
7659
+ item.value
7660
+ ]
7661
+ }
7662
+ ) }, i)) })
7663
+ }
7664
+ )
7665
+ ] }),
7666
+ cta && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "24px 0" }, children: cta.url ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: cta.url, style: ctaStyle, children: cta.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: ctaStyle, role: "presentation", children: cta.label }) }),
7667
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", lineHeight: "1.5", margin: "0" }, children: signature })
7668
+ ]
7669
+ }
7670
+ );
7671
+ }
7349
7672
  function TravellerFormInviteEmail({
7350
7673
  greeting,
7351
7674
  bodyIntro,
@@ -16581,6 +16904,7 @@ exports.ItineraryDay = ItineraryDay;
16581
16904
  exports.LOGO_PLANETAEXO_DATA_URI = LOGO_PLANETAEXO_DATA_URI;
16582
16905
  exports.LeadCapturePopup = LeadCapturePopup;
16583
16906
  exports.MenuTrip = MenuTrip;
16907
+ exports.NotificationEmail = NotificationEmail;
16584
16908
  exports.OTPCodeInput = OTPCodeInput;
16585
16909
  exports.Offer = Offer;
16586
16910
  exports.OfferAdventureCard = OfferAdventureCard;