@planetaexo/design-system 0.4.0 → 0.4.2

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 +245 -244
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +45 -1
  4. package/dist/index.d.ts +45 -1
  5. package/dist/index.js +244 -245
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -2894,6 +2894,58 @@ function BookingDetails({
2894
2894
  }
2895
2895
  );
2896
2896
  }
2897
+
2898
+ // src/lib/emailTokens.ts
2899
+ var emailTokens = {
2900
+ /** Slate-900 — main body text */
2901
+ foreground: "#0f172a",
2902
+ /** Slate-700 — body content text (slightly lighter than foreground) */
2903
+ bodyText: "#334155",
2904
+ /** Slate-500 — secondary / muted labels */
2905
+ mutedForeground: "#64748b",
2906
+ /** Sky-500 — primary brand color */
2907
+ primary: "#0ea5e9",
2908
+ /** White — text on primary-colored backgrounds */
2909
+ primaryForeground: "#ffffff",
2910
+ /** Sky-100 — light primary tint (number badges, reference badges) */
2911
+ primaryLight: "#e0f2fe",
2912
+ /** Slate-200 — dividers and card borders */
2913
+ border: "#e2e8f0",
2914
+ /** Slate-50 — subtle background for table headers / muted rows */
2915
+ muted: "#f8fafc",
2916
+ /** White — explicit white backgrounds */
2917
+ white: "#ffffff",
2918
+ /** Green-600 — success / discounts */
2919
+ green: "#16a34a",
2920
+ /** Green-50 — "paid in full" banner background */
2921
+ greenBg: "#f0fdf4",
2922
+ /** Red-600 — destructive / not-included icon */
2923
+ destructive: "#dc2626",
2924
+ /**
2925
+ * Font stack — DM Sans (the DS brand font) with modern system-font
2926
+ * fallbacks. Clients that load Google Fonts (Apple Mail, Gmail web,
2927
+ * Outlook Mac) will render DM Sans; others fall back gracefully.
2928
+ */
2929
+ fontFamily: "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
2930
+ };
2931
+ var DM_SANS_URL = "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap";
2932
+ function wrapEmailHtml(content) {
2933
+ return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2934
+ <html xmlns="http://www.w3.org/1999/xhtml" lang="pt">
2935
+ <head>
2936
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
2937
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2938
+ <!--[if !mso]><!-->
2939
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
2940
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
2941
+ <link href="${DM_SANS_URL}" rel="stylesheet" type="text/css" />
2942
+ <!--<![endif]-->
2943
+ </head>
2944
+ <body style="margin:0;padding:0;background-color:#f1f5f9;">
2945
+ ${content}
2946
+ </body>
2947
+ </html>`;
2948
+ }
2897
2949
  var DEFAULT_LABELS = {
2898
2950
  ctaButton: "View booking details",
2899
2951
  logoAlt: "PlanetaEXO",
@@ -2952,14 +3004,14 @@ function BookingConfirmation({
2952
3004
  });
2953
3005
  const ctaStyle = {
2954
3006
  display: "inline-block",
2955
- backgroundColor: "#0ea5e9",
2956
- color: "#ffffff",
3007
+ backgroundColor: emailTokens.primary,
3008
+ color: emailTokens.primaryForeground,
2957
3009
  padding: "14px 32px",
2958
3010
  borderRadius: "8px",
2959
3011
  fontSize: "14px",
2960
3012
  fontWeight: "700",
2961
3013
  textDecoration: "none",
2962
- fontFamily: "Arial, Helvetica, sans-serif"
3014
+ fontFamily: emailTokens.fontFamily
2963
3015
  };
2964
3016
  const ViewBookingCta = viewBookingUrl ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: viewBookingUrl, style: ctaStyle, children: l.ctaButton }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: ctaStyle, role: "presentation", children: l.ctaButton });
2965
3017
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2968,11 +3020,14 @@ function BookingConfirmation({
2968
3020
  style: {
2969
3021
  maxWidth: "576px",
2970
3022
  margin: "0 auto",
2971
- backgroundColor: "#ffffff",
2972
- color: "#0f172a",
2973
- fontFamily: "Arial, Helvetica, sans-serif",
3023
+ backgroundColor: emailTokens.white,
3024
+ color: emailTokens.foreground,
3025
+ fontFamily: emailTokens.fontFamily,
2974
3026
  fontSize: "16px",
2975
- lineHeight: "1.6"
3027
+ lineHeight: "1.6",
3028
+ border: `1px solid ${emailTokens.border}`,
3029
+ borderRadius: "12px",
3030
+ overflow: "hidden"
2976
3031
  },
2977
3032
  className,
2978
3033
  children: [
@@ -2985,215 +3040,174 @@ function BookingConfirmation({
2985
3040
  }
2986
3041
  ) }),
2987
3042
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px" }, children: [
2988
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.greeting(recipientName) }),
2989
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.confirmationMessage }),
2990
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "32px", fontSize: "16px" }, children: l.detailsIntro }),
3043
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.greeting(recipientName) }),
3044
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.confirmationMessage }),
3045
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "32px", marginTop: 0, fontSize: "16px" }, children: l.detailsIntro }),
2991
3046
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
2992
3047
  ] }),
2993
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "0 32px" } }),
3048
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
2994
3049
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
2995
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: "#0f172a", fontSize: "18px", fontFamily: "Arial, Helvetica, sans-serif" }, children: l.nextStepsHeading }),
2996
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: "1px solid #e2e8f0", padding: "20px", display: "flex", flexDirection: "column", gap: "16px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "14px" }, children: [
2997
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
2998
- display: "flex",
3050
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
3051
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: i < l.nextSteps.length - 1 ? "16px" : "0" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3052
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", width: "32px", paddingRight: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
3053
+ display: "inline-block",
2999
3054
  height: "24px",
3000
3055
  width: "24px",
3001
- flexShrink: 0,
3002
- alignItems: "center",
3003
- justifyContent: "center",
3056
+ lineHeight: "24px",
3057
+ textAlign: "center",
3004
3058
  borderRadius: "9999px",
3005
- backgroundColor: "#e0f2fe",
3059
+ backgroundColor: emailTokens.primaryLight,
3006
3060
  fontSize: "12px",
3007
3061
  fontWeight: "700",
3008
- color: "#0ea5e9",
3062
+ color: emailTokens.primary,
3009
3063
  marginTop: "2px"
3010
- }, children: i + 1 }),
3011
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "#334155", lineHeight: "1.6", margin: 0 }, children: step })
3012
- ] }, i)) })
3064
+ }, children: i + 1 }) }),
3065
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top" }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step }) })
3066
+ ] }) }) }, i)) })
3013
3067
  ] }),
3014
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "0 32px" } }),
3068
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3015
3069
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
3016
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: "#0f172a", fontSize: "18px", fontFamily: "Arial, Helvetica, sans-serif" }, children: l.bookingSummaryHeading }),
3017
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: "1px solid #e2e8f0", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3018
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: "1px solid #e2e8f0" }, children: [
3019
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: "#64748b", backgroundColor: "#f8fafc" }, children: l.bookingNumberLabel }),
3020
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "600", color: "#0ea5e9" }, children: bookingReference })
3070
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
3071
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3072
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3073
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.bookingNumberLabel }),
3074
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "600", color: emailTokens.primary }, children: bookingReference })
3021
3075
  ] }),
3022
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: "1px solid #e2e8f0" }, children: [
3023
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: "#64748b", backgroundColor: "#f8fafc" }, children: l.adventuresLabel }),
3024
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: "#0f172a" }, children: adventures.length })
3076
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3077
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.adventuresLabel }),
3078
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: adventures.length })
3025
3079
  ] }),
3026
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: "1px solid #e2e8f0" }, children: [
3027
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: "#64748b", backgroundColor: "#f8fafc" }, children: l.totalTravellersLabel }),
3028
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: "#0f172a" }, children: allTravellers.length })
3080
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3081
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.totalTravellersLabel }),
3082
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: allTravellers.length })
3029
3083
  ] }),
3030
3084
  /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3031
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: "#64748b", backgroundColor: "#f8fafc" }, children: l.agentLabel }),
3032
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: "#0f172a" }, children: agent })
3085
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.agentLabel }),
3086
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: agent })
3033
3087
  ] })
3034
3088
  ] }) }) })
3035
3089
  ] }),
3036
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "0 32px" } }),
3037
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px", display: "flex", flexDirection: "column", gap: "24px" }, children: adventures.map((adventure) => {
3090
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3091
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: adventures.map((adventure, adIdx) => {
3038
3092
  var _a;
3039
3093
  return /* @__PURE__ */ jsxRuntime.jsxs(
3040
3094
  "div",
3041
3095
  {
3042
- style: { borderRadius: "16px", border: "1px solid #e2e8f0", backgroundColor: "#ffffff", overflow: "hidden" },
3096
+ style: {
3097
+ borderRadius: "16px",
3098
+ border: `1px solid ${emailTokens.border}`,
3099
+ backgroundColor: emailTokens.white,
3100
+ overflow: "hidden",
3101
+ marginBottom: adIdx < adventures.length - 1 ? "24px" : "0"
3102
+ },
3043
3103
  children: [
3044
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "16/7", overflow: "hidden", backgroundColor: "#f8fafc" }, children: /* @__PURE__ */ jsxRuntime.jsx(
3104
+ adventure.image && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsxRuntime.jsx(
3045
3105
  "img",
3046
3106
  {
3047
3107
  src: adventure.image,
3048
3108
  alt: (_a = adventure.imageAlt) != null ? _a : adventure.title,
3049
- style: { width: "100%", height: "100%", objectFit: "cover" }
3109
+ style: { width: "100%", height: "auto", display: "block" }
3050
3110
  }
3051
3111
  ) }),
3052
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px", display: "flex", flexDirection: "column", gap: "10px" }, children: [
3053
- adventure.reference && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
3112
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px" }, children: [
3113
+ adventure.reference && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
3054
3114
  display: "inline-block",
3055
- backgroundColor: "#e0f2fe",
3056
- color: "#0ea5e9",
3115
+ backgroundColor: emailTokens.primaryLight,
3116
+ color: emailTokens.primary,
3057
3117
  padding: "2px 8px",
3058
3118
  borderRadius: "6px",
3059
3119
  fontSize: "12px",
3060
3120
  fontWeight: "600",
3061
- letterSpacing: "0.05em",
3062
- alignSelf: "flex-start"
3063
- }, children: adventure.reference }),
3064
- /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "20px", fontWeight: "700", color: "#0f172a", lineHeight: "1.3", marginTop: "2px", margin: 0 }, children: adventure.title }),
3065
- /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: "#64748b", margin: 0, lineHeight: 1 }, children: [
3066
- /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "14px", height: "14px", color: "#0ea5e9", flexShrink: 0 }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3121
+ letterSpacing: "0.05em"
3122
+ }, children: adventure.reference }) }),
3123
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "20px", fontWeight: "700", color: emailTokens.foreground, lineHeight: "1.3", margin: "0 0 10px 0" }, children: adventure.title }),
3124
+ /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3125
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3067
3126
  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
3068
3127
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
3069
3128
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
3070
3129
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })
3071
- ] }),
3072
- adventure.dateFrom,
3073
- " \u2192 ",
3074
- adventure.dateTo
3075
- ] }),
3076
- adventure.location && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: "#64748b", margin: 0, lineHeight: 1 }, children: [
3077
- /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "14px", height: "14px", color: "#0ea5e9", flexShrink: 0 }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3130
+ ] }) }),
3131
+ /* @__PURE__ */ jsxRuntime.jsxs("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: [
3132
+ adventure.dateFrom,
3133
+ " \u2192 ",
3134
+ adventure.dateTo
3135
+ ] })
3136
+ ] }) }) }),
3137
+ adventure.location && /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3138
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3078
3139
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
3079
3140
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "3" })
3080
- ] }),
3081
- adventure.location
3082
- ] }),
3083
- adventure.slots && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: "#64748b", margin: 0, lineHeight: 1 }, children: [
3084
- /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "14px", height: "14px", color: "#0ea5e9", flexShrink: 0 }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3141
+ ] }) }),
3142
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: adventure.location })
3143
+ ] }) }) }),
3144
+ adventure.slots && /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3145
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3085
3146
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
3086
3147
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
3087
3148
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
3088
3149
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
3089
- ] }),
3090
- [
3150
+ ] }) }),
3151
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: [
3091
3152
  adventure.slots.adults ? `${adventure.slots.adults} ${l.adultsUnit}` : null,
3092
3153
  adventure.slots.children ? `${adventure.slots.children} ${l.childrenUnit}` : null
3093
- ].filter(Boolean).join(" \xB7 ")
3094
- ] }),
3095
- adventure.partner && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: "#64748b", margin: 0, lineHeight: 1 }, children: [
3096
- /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "14px", height: "14px", color: "#0ea5e9", flexShrink: 0 }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3154
+ ].filter(Boolean).join(" \xB7 ") })
3155
+ ] }) }) }),
3156
+ adventure.partner && /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3157
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3097
3158
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
3098
3159
  /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" })
3099
- ] }),
3100
- adventure.partner
3160
+ ] }) }),
3161
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: adventure.partner })
3162
+ ] }) }) }),
3163
+ adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
3164
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
3165
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.travellersLabel }),
3166
+ adventure.travellers.map((traveller) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3167
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle" }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: emailTokens.foreground }, children: [
3168
+ traveller.firstName,
3169
+ " ",
3170
+ traveller.lastName
3171
+ ] }) }),
3172
+ traveller.isChild && /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", textAlign: "right" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "10px", fontWeight: "600", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted, borderRadius: "9999px", padding: "2px 8px", textTransform: "uppercase", letterSpacing: "0.05em" }, children: l.childBadge }) })
3173
+ ] }) }) }, traveller.id))
3101
3174
  ] }),
3102
- adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3103
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", marginTop: "4px", marginBottom: "4px" } }),
3104
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3105
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: "#64748b", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "8px", margin: "0 0 8px 0" }, children: l.travellersLabel }),
3106
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: adventure.travellers.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(
3107
- "div",
3108
- {
3109
- style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
3110
- children: [
3111
- /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: "#0f172a" }, children: [
3112
- t.firstName,
3113
- " ",
3114
- t.lastName
3115
- ] }),
3116
- t.isChild && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "10px", fontWeight: "600", color: "#64748b", backgroundColor: "#f8fafc", borderRadius: "9999px", padding: "2px 8px", textTransform: "uppercase", letterSpacing: "0.05em" }, children: l.childBadge })
3117
- ]
3118
- },
3119
- t.id
3120
- )) })
3121
- ] })
3175
+ adventure.description && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
3176
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
3177
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.itineraryLabel }),
3178
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: adventure.description })
3122
3179
  ] }),
3123
- adventure.description && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3124
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", marginTop: "4px", marginBottom: "4px" } }),
3125
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3126
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: "#64748b", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "8px", margin: "0 0 8px 0" }, children: l.itineraryLabel }),
3127
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "#334155", lineHeight: "1.6", margin: 0 }, children: adventure.description })
3128
- ] })
3180
+ adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "10px" }, children: [
3181
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: "0 0 8px 0" }, children: l.includedLabel }),
3182
+ adventure.included.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3183
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { display: "block", width: "16px", height: "16px", color: emailTokens.primary, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
3184
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
3185
+ ] }) }) }, i))
3129
3186
  ] }),
3130
- adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
3131
- /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: "#0f172a", margin: 0 }, children: l.includedLabel }),
3132
- /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { display: "flex", flexDirection: "column", gap: "6px", margin: 0, padding: 0, listStyle: "none" }, children: adventure.included.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
3133
- "li",
3134
- {
3135
- style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: "#334155" },
3136
- children: [
3137
- /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { width: "16px", height: "16px", color: "#0ea5e9", flexShrink: 0, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }),
3138
- item
3139
- ]
3140
- },
3141
- i
3142
- )) })
3143
- ] }),
3144
- adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
3145
- /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: "#0f172a", margin: 0 }, children: l.notIncludedLabel }),
3146
- /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { display: "flex", flexDirection: "column", gap: "6px", margin: 0, padding: 0, listStyle: "none" }, children: adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
3147
- "li",
3148
- {
3149
- style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: "#334155" },
3150
- children: [
3151
- /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "16px", height: "16px", color: "#dc2626", flexShrink: 0, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3152
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
3153
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
3154
- ] }),
3155
- item
3156
- ]
3157
- },
3158
- i
3159
- )) })
3187
+ adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "10px" }, children: [
3188
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: "0 0 8px 0" }, children: l.notIncludedLabel }),
3189
+ adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3190
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "16px", height: "16px", color: emailTokens.destructive, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3191
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
3192
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
3193
+ ] }) }),
3194
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
3195
+ ] }) }) }, i))
3160
3196
  ] }),
3161
- adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3162
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", marginTop: "4px", marginBottom: "4px" } }),
3163
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3164
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: "#64748b", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "8px", margin: "0 0 8px 0" }, children: l.pricingLabel }),
3165
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
3166
- adventure.lineItems.map((item, j) => /* @__PURE__ */ jsxRuntime.jsxs(
3167
- "div",
3168
- {
3169
- style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
3170
- children: [
3171
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", color: "#64748b" }, children: item.label }),
3172
- /* @__PURE__ */ jsxRuntime.jsxs(
3173
- "span",
3174
- {
3175
- style: {
3176
- fontSize: "14px",
3177
- fontWeight: "500",
3178
- whiteSpace: "nowrap",
3179
- color: item.isDiscount ? "#16a34a" : "#0f172a"
3180
- },
3181
- children: [
3182
- item.isDiscount ? "\u2212" : "",
3183
- item.price
3184
- ]
3185
- }
3186
- )
3187
- ]
3188
- },
3189
- j
3190
- )),
3191
- adventure.subtotal && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: "8px", marginTop: "4px", borderTop: "1px solid #e2e8f0" }, children: [
3192
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: "700", color: "#0f172a" }, children: l.subtotalLabel }),
3193
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: "700", color: "#0f172a", whiteSpace: "nowrap" }, children: adventure.subtotal })
3194
- ] })
3197
+ adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
3198
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
3199
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.pricingLabel }),
3200
+ adventure.lineItems.map((item, j) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3201
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground }, children: item.label }),
3202
+ /* @__PURE__ */ jsxRuntime.jsxs("td", { style: { verticalAlign: "middle", textAlign: "right", fontSize: "14px", fontWeight: "500", whiteSpace: "nowrap", color: item.isDiscount ? emailTokens.green : emailTokens.foreground }, children: [
3203
+ item.isDiscount ? "\u2212" : "",
3204
+ item.price
3195
3205
  ] })
3196
- ] })
3206
+ ] }) }) }, j)),
3207
+ adventure.subtotal && /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", paddingTop: "8px", marginTop: "4px", borderTop: `1px solid ${emailTokens.border}` }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3208
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", fontWeight: "700", color: emailTokens.foreground }, children: l.subtotalLabel }),
3209
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", textAlign: "right", fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: adventure.subtotal })
3210
+ ] }) }) })
3197
3211
  ] })
3198
3212
  ] })
3199
3213
  ]
@@ -3201,74 +3215,49 @@ function BookingConfirmation({
3201
3215
  adventure.id
3202
3216
  );
3203
3217
  }) }),
3204
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "0 32px" } }),
3218
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3205
3219
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
3206
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: "#0f172a", fontSize: "18px", fontFamily: "Arial, Helvetica, sans-serif" }, children: l.paymentSummaryHeading }),
3207
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: "1px solid #e2e8f0", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3208
- summaryLineItems && summaryLineItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: "1px solid #e2e8f0" }, children: [
3209
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: "#64748b" }, children: item.label }),
3210
- /* @__PURE__ */ jsxRuntime.jsxs(
3211
- "td",
3212
- {
3213
- style: {
3214
- padding: "10px 16px",
3215
- textAlign: "right",
3216
- fontWeight: "500",
3217
- whiteSpace: "nowrap",
3218
- color: item.isDiscount ? "#16a34a" : "#0f172a"
3219
- },
3220
- children: [
3221
- item.isDiscount ? "\u2212" : "",
3222
- item.price
3223
- ]
3224
- }
3225
- )
3220
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.paymentSummaryHeading }),
3221
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3222
+ summaryLineItems && summaryLineItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3223
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: item.label }),
3224
+ /* @__PURE__ */ jsxRuntime.jsxs("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", whiteSpace: "nowrap", color: item.isDiscount ? emailTokens.green : emailTokens.foreground }, children: [
3225
+ item.isDiscount ? "\u2212" : "",
3226
+ item.price
3227
+ ] })
3226
3228
  ] }, i)),
3227
- subtotal && /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: "1px solid #e2e8f0" }, children: [
3228
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: "#64748b" }, children: l.subtotalLabel }),
3229
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: "#0f172a", whiteSpace: "nowrap" }, children: subtotal })
3229
+ subtotal && /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3230
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.subtotalLabel }),
3231
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: subtotal })
3230
3232
  ] }),
3231
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { backgroundColor: "#f8fafc" }, children: [
3232
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "16px", fontWeight: "700", color: "#0f172a", fontSize: "16px" }, children: l.totalLabel }),
3233
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "16px", textAlign: "right", fontWeight: "700", color: "#0ea5e9", fontSize: "20px", whiteSpace: "nowrap" }, children: total })
3233
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { backgroundColor: emailTokens.muted }, children: [
3234
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "16px", fontWeight: "700", color: emailTokens.foreground, fontSize: "16px" }, children: l.totalLabel }),
3235
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "16px", textAlign: "right", fontWeight: "700", color: emailTokens.primary, fontSize: "20px", whiteSpace: "nowrap" }, children: total })
3234
3236
  ] })
3235
3237
  ] }) }) }),
3236
- depositInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderRadius: "12px", border: "1px solid #e2e8f0", marginTop: "16px", overflow: "hidden" }, children: [
3237
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 16px", backgroundColor: "#f8fafc", borderBottom: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: "#64748b", textTransform: "uppercase", letterSpacing: "0.1em", margin: 0 }, children: l.paymentDetailsHeading }) }),
3238
+ depositInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, marginTop: "16px", overflow: "hidden" }, children: [
3239
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 16px", backgroundColor: emailTokens.muted, borderBottom: `1px solid ${emailTokens.border}` }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: 0 }, children: l.paymentDetailsHeading }) }),
3238
3240
  /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3239
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: "1px solid #e2e8f0" }, children: [
3240
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: "#64748b" }, children: l.depositLabel(depositInfo.depositPercent) }),
3241
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: "#0f172a", whiteSpace: "nowrap" }, children: depositInfo.depositAmount })
3241
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3242
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.depositLabel(depositInfo.depositPercent) }),
3243
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.depositAmount })
3242
3244
  ] }),
3243
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: "1px solid #e2e8f0" }, children: [
3244
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: "#64748b" }, children: l.remainingBalanceLabel }),
3245
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: "#0f172a", whiteSpace: "nowrap" }, children: depositInfo.remainingAmount })
3245
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3246
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.remainingBalanceLabel }),
3247
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.remainingAmount })
3246
3248
  ] }),
3247
- /* @__PURE__ */ jsxRuntime.jsxs(
3248
- "tr",
3249
- {
3250
- style: depositInfo.isPaidInFull ? { borderBottom: "1px solid #e2e8f0" } : {},
3251
- children: [
3252
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: "#64748b" }, children: l.balanceDueLabel }),
3253
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: "#0f172a", whiteSpace: "nowrap" }, children: depositInfo.balanceDueDate })
3254
- ]
3255
- }
3256
- ),
3257
- depositInfo.isPaidInFull && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
3258
- "td",
3259
- {
3260
- colSpan: 2,
3261
- style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: "#16a34a", backgroundColor: "#f0fdf4" },
3262
- children: l.paidInFullLabel
3263
- }
3264
- ) })
3249
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {}, children: [
3250
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.balanceDueLabel }),
3251
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.balanceDueDate })
3252
+ ] }),
3253
+ depositInfo.isPaidInFull && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 2, style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: emailTokens.green, backgroundColor: emailTokens.greenBg }, children: l.paidInFullLabel }) })
3265
3254
  ] }) })
3266
3255
  ] })
3267
3256
  ] }),
3268
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "0 32px" } }),
3257
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3269
3258
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: [
3270
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
3271
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px" }, children: l.footerContact(agent) })
3259
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
3260
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: 0, fontSize: "16px" }, children: l.footerContact(agent) })
3272
3261
  ] })
3273
3262
  ]
3274
3263
  }
@@ -3307,14 +3296,14 @@ function BookingConfirmationEmail({
3307
3296
  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS2), labels);
3308
3297
  const ctaStyle = {
3309
3298
  display: "inline-block",
3310
- backgroundColor: "#0ea5e9",
3311
- color: "#ffffff",
3299
+ backgroundColor: emailTokens.primary,
3300
+ color: emailTokens.primaryForeground,
3312
3301
  padding: "12px 24px",
3313
3302
  borderRadius: "8px",
3314
3303
  fontSize: "14px",
3315
3304
  fontWeight: "700",
3316
3305
  textDecoration: "none",
3317
- fontFamily: "Arial, Helvetica, sans-serif"
3306
+ fontFamily: emailTokens.fontFamily
3318
3307
  };
3319
3308
  const AddTravellersCta = addTravellersUrl ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: addTravellersUrl, style: ctaStyle, children: l.ctaButton }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: ctaStyle, role: "presentation", children: l.ctaButton });
3320
3309
  const tableRows = [
@@ -3331,15 +3320,19 @@ function BookingConfirmationEmail({
3331
3320
  style: {
3332
3321
  maxWidth: "576px",
3333
3322
  margin: "0 auto",
3334
- backgroundColor: "#ffffff",
3335
- color: "#0f172a",
3336
- fontFamily: "Arial, Helvetica, sans-serif",
3323
+ backgroundColor: emailTokens.white,
3324
+ color: emailTokens.foreground,
3325
+ fontFamily: emailTokens.fontFamily,
3337
3326
  fontSize: "16px",
3338
- lineHeight: "1.6"
3327
+ lineHeight: "1.6",
3328
+ border: `1px solid ${emailTokens.border}`,
3329
+ borderRadius: "12px",
3330
+ overflow: "hidden",
3331
+ padding: "32px"
3339
3332
  },
3340
3333
  className,
3341
3334
  children: [
3342
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "32px", marginBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
3335
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "0", marginBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
3343
3336
  "img",
3344
3337
  {
3345
3338
  src: logoUrl,
@@ -3351,13 +3344,13 @@ function BookingConfirmationEmail({
3351
3344
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.thankYouMessage }),
3352
3345
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.addTravellersInstruction }),
3353
3346
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "32px" }, children: AddTravellersCta }),
3354
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", marginBottom: "32px" } }),
3355
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontWeight: "700", color: "#0f172a", fontFamily: "Arial, Helvetica, sans-serif" }, children: l.summaryHeading }),
3356
- /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", marginBottom: "32px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: i > 0 ? { borderTop: "1px solid #e2e8f0" } : {}, children: [
3357
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 16px 4px 0", color: "#64748b" }, children: row.label }),
3358
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 0", fontWeight: "500", color: "#0f172a" }, children: row.value })
3347
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "32px" } }),
3348
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontWeight: "700", color: emailTokens.foreground, fontFamily: emailTokens.fontFamily }, children: l.summaryHeading }),
3349
+ /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", marginBottom: "32px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: i > 0 ? { borderTop: `1px solid ${emailTokens.border}` } : {}, children: [
3350
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 16px 4px 0", color: emailTokens.mutedForeground }, children: row.label }),
3351
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 0", fontWeight: "500", color: emailTokens.foreground }, children: row.value })
3359
3352
  ] }, i)) }) }),
3360
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", marginBottom: "32px" } }),
3353
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "32px" } }),
3361
3354
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.postCtaMessage }),
3362
3355
  /* @__PURE__ */ jsxRuntime.jsx("p", { children: l.closingMessage })
3363
3356
  ]
@@ -3375,11 +3368,14 @@ function BookingOtpEmail({
3375
3368
  "div",
3376
3369
  {
3377
3370
  style: {
3378
- fontFamily: "Arial, Helvetica, sans-serif",
3379
- color: "#0f172a",
3371
+ fontFamily: emailTokens.fontFamily,
3372
+ color: emailTokens.foreground,
3380
3373
  maxWidth: "600px",
3381
3374
  margin: "0 auto",
3382
- padding: "24px"
3375
+ padding: "32px",
3376
+ border: `1px solid ${emailTokens.border}`,
3377
+ borderRadius: "12px",
3378
+ backgroundColor: emailTokens.white
3383
3379
  },
3384
3380
  className,
3385
3381
  children: [
@@ -3406,7 +3402,7 @@ function BookingOtpEmail({
3406
3402
  "p",
3407
3403
  {
3408
3404
  style: {
3409
- color: "#64748b",
3405
+ color: emailTokens.mutedForeground,
3410
3406
  fontSize: "14px",
3411
3407
  lineHeight: "1.5",
3412
3408
  margin: "0"
@@ -3434,11 +3430,14 @@ function TravellerFormInviteEmail({
3434
3430
  "div",
3435
3431
  {
3436
3432
  style: {
3437
- fontFamily: "Arial, Helvetica, sans-serif",
3438
- color: "#0f172a",
3433
+ fontFamily: emailTokens.fontFamily,
3434
+ color: emailTokens.foreground,
3439
3435
  maxWidth: "600px",
3440
3436
  margin: "0 auto",
3441
- padding: "24px"
3437
+ padding: "32px",
3438
+ border: `1px solid ${emailTokens.border}`,
3439
+ borderRadius: "12px",
3440
+ backgroundColor: emailTokens.white
3442
3441
  },
3443
3442
  className,
3444
3443
  children: [
@@ -3460,7 +3459,7 @@ function TravellerFormInviteEmail({
3460
3459
  style: {
3461
3460
  display: "block",
3462
3461
  fontSize: "13px",
3463
- color: "#64748b",
3462
+ color: emailTokens.mutedForeground,
3464
3463
  marginBottom: "4px"
3465
3464
  },
3466
3465
  children: link.adventureName
@@ -3472,8 +3471,8 @@ function TravellerFormInviteEmail({
3472
3471
  href: link.url,
3473
3472
  style: {
3474
3473
  display: "inline-block",
3475
- backgroundColor: "#0ea5e9",
3476
- color: "#ffffff",
3474
+ backgroundColor: emailTokens.primary,
3475
+ color: emailTokens.primaryForeground,
3477
3476
  fontSize: "14px",
3478
3477
  fontWeight: "600",
3479
3478
  textDecoration: "none",
@@ -3488,7 +3487,7 @@ function TravellerFormInviteEmail({
3488
3487
  "p",
3489
3488
  {
3490
3489
  style: {
3491
- color: "#64748b",
3490
+ color: emailTokens.mutedForeground,
3492
3491
  fontSize: "13px",
3493
3492
  lineHeight: "1.5",
3494
3493
  margin: "0 0 16px"
@@ -8237,7 +8236,9 @@ exports.TripHeader = TripHeader;
8237
8236
  exports.TripPage = TripPage;
8238
8237
  exports.buttonVariants = buttonVariants;
8239
8238
  exports.cn = cn;
8239
+ exports.emailTokens = emailTokens;
8240
8240
  exports.getStripeAppearance = getStripeAppearance;
8241
8241
  exports.stripeAppearance = stripeAppearance;
8242
+ exports.wrapEmailHtml = wrapEmailHtml;
8242
8243
  //# sourceMappingURL=index.cjs.map
8243
8244
  //# sourceMappingURL=index.cjs.map