@planetaexo/design-system 0.60.0 → 0.61.0

package/dist/index.cjs

@@ -7346,6 +7346,166 @@ function BookingOtpEmail({
     }
   );
 }
+function NotificationEmail({
+  greeting,
+  paragraphs,
+  cta,
+  details,
+  detailsHeading,
+  highlight,
+  signature,
+  logoUrl,
+  className
+}) {
+  const ctaStyle = {
+    display: "inline-block",
+    backgroundColor: emailTokens.primary,
+    color: emailTokens.primaryForeground,
+    padding: "12px 24px",
+    borderRadius: "8px",
+    fontSize: "14px",
+    fontWeight: "700",
+    textDecoration: "none",
+    fontFamily: emailTokens.fontFamily
+  };
+  const hasHighlight = Array.isArray(highlight) && highlight.length > 0;
+  const hasDetails = Array.isArray(details) && details.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        fontFamily: emailTokens.fontFamily,
+        color: emailTokens.foreground,
+        maxWidth: "600px",
+        margin: "0 auto",
+        padding: "32px",
+        border: `1px solid ${emailTokens.border}`,
+        borderRadius: "12px",
+        backgroundColor: emailTokens.white
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(EmailLogo, { src: logoUrl }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px", lineHeight: "1.5", margin: "0 0 16px" }, children: greeting }),
+        paragraphs.map((paragraph, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 16px" },
+            children: paragraph
+          },
+          i
+        )),
+        hasHighlight && /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
+            role: "presentation",
+            cellPadding: 0,
+            cellSpacing: 0,
+            border: 0,
+            style: { width: "100%", borderCollapse: "collapse", margin: "0 0 24px" },
+            children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                style: {
+                  backgroundColor: emailTokens.primaryLight,
+                  border: `1px solid ${emailTokens.border}`,
+                  borderRadius: "12px",
+                  padding: "24px 16px"
+                },
+                children: highlight.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    style: {
+                      fontSize: "15px",
+                      lineHeight: "1.5",
+                      margin: i < highlight.length - 1 ? "0 0 8px" : "0",
+                      color: emailTokens.foreground
+                    },
+                    children: line
+                  },
+                  i
+                ))
+              }
+            ) }) })
+          }
+        ),
+        hasDetails && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          detailsHeading && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              style: {
+                fontSize: "15px",
+                lineHeight: "1.5",
+                fontWeight: 700,
+                margin: "0 0 12px"
+              },
+              children: detailsHeading
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "table",
+            {
+              role: "presentation",
+              cellPadding: 0,
+              cellSpacing: 0,
+              border: 0,
+              style: { width: "100%", borderCollapse: "collapse", margin: "0 0 24px" },
+              children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: details.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: item.label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "1.6",
+                      color: emailTokens.mutedForeground,
+                      padding: "4px 12px 4px 0",
+                      verticalAlign: "top",
+                      whiteSpace: "nowrap"
+                    },
+                    children: item.label
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "1.6",
+                      color: item.emphasizeValue ? emailTokens.primary : emailTokens.foreground,
+                      fontWeight: item.emphasizeValue ? 700 : 400,
+                      padding: "4px 0",
+                      verticalAlign: "top",
+                      width: "100%"
+                    },
+                    children: item.value
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+                "td",
+                {
+                  colSpan: 2,
+                  style: {
+                    fontSize: "14px",
+                    lineHeight: "1.6",
+                    color: emailTokens.foreground,
+                    padding: "4px 0",
+                    verticalAlign: "top"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: emailTokens.primary, paddingRight: "8px" }, children: "\u2022" }),
+                    item.value
+                  ]
+                }
+              ) }, i)) })
+            }
+          )
+        ] }),
+        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 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", lineHeight: "1.5", margin: "0" }, children: signature })
+      ]
+    }
+  );
+}
 function TravellerFormInviteEmail({
   greeting,
   bodyIntro,
@@ -16581,6 +16741,7 @@ exports.ItineraryDay = ItineraryDay;
 exports.LOGO_PLANETAEXO_DATA_URI = LOGO_PLANETAEXO_DATA_URI;
 exports.LeadCapturePopup = LeadCapturePopup;
 exports.MenuTrip = MenuTrip;
+exports.NotificationEmail = NotificationEmail;
 exports.OTPCodeInput = OTPCodeInput;
 exports.Offer = Offer;
 exports.OfferAdventureCard = OfferAdventureCard;