@planetaexo/design-system 0.3.21 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -2873,6 +2873,36 @@ function BookingDetails({
2873
2873
  }
2874
2874
  );
2875
2875
  }
2876
+
2877
+ // src/lib/emailTokens.ts
2878
+ var emailTokens = {
2879
+ /** Slate-900 — main body text */
2880
+ foreground: "#0f172a",
2881
+ /** Slate-700 — body content text (slightly lighter than foreground) */
2882
+ bodyText: "#334155",
2883
+ /** Slate-500 — secondary / muted labels */
2884
+ mutedForeground: "#64748b",
2885
+ /** Sky-500 — primary brand color */
2886
+ primary: "#0ea5e9",
2887
+ /** White — text on primary-colored backgrounds */
2888
+ primaryForeground: "#ffffff",
2889
+ /** Sky-100 — light primary tint (number badges, reference badges) */
2890
+ primaryLight: "#e0f2fe",
2891
+ /** Slate-200 — dividers and card borders */
2892
+ border: "#e2e8f0",
2893
+ /** Slate-50 — subtle background for table headers / muted rows */
2894
+ muted: "#f8fafc",
2895
+ /** White — explicit white backgrounds */
2896
+ white: "#ffffff",
2897
+ /** Green-600 — success / discounts */
2898
+ green: "#16a34a",
2899
+ /** Green-50 — "paid in full" banner background */
2900
+ greenBg: "#f0fdf4",
2901
+ /** Red-600 — destructive / not-included icon */
2902
+ destructive: "#dc2626",
2903
+ /** Web-safe font stack used in all email components */
2904
+ fontFamily: "Arial, Helvetica, sans-serif"
2905
+ };
2876
2906
  var DEFAULT_LABELS = {
2877
2907
  ctaButton: "View booking details",
2878
2908
  logoAlt: "PlanetaEXO",
@@ -2929,94 +2959,120 @@ function BookingConfirmation({
2929
2959
  var _a;
2930
2960
  return (_a = a.travellers) != null ? _a : [];
2931
2961
  });
2932
- const ViewBookingCta = viewBookingUrl ? /* @__PURE__ */ jsx(
2933
- "a",
2934
- {
2935
- href: viewBookingUrl,
2936
- className: "inline-flex items-center justify-center rounded-lg bg-primary px-8 py-3.5 text-sm font-bold text-primary-foreground font-heading hover:bg-primary/90 transition-colors no-underline",
2937
- children: l.ctaButton
2938
- }
2939
- ) : /* @__PURE__ */ jsx(
2940
- "span",
2941
- {
2942
- className: "inline-flex items-center justify-center rounded-lg bg-primary px-8 py-3.5 text-sm font-bold text-primary-foreground font-heading",
2943
- role: "presentation",
2944
- children: l.ctaButton
2945
- }
2946
- );
2962
+ const ctaStyle = {
2963
+ display: "inline-block",
2964
+ backgroundColor: emailTokens.primary,
2965
+ color: emailTokens.primaryForeground,
2966
+ padding: "14px 32px",
2967
+ borderRadius: "8px",
2968
+ fontSize: "14px",
2969
+ fontWeight: "700",
2970
+ textDecoration: "none",
2971
+ fontFamily: emailTokens.fontFamily
2972
+ };
2973
+ const ViewBookingCta = viewBookingUrl ? /* @__PURE__ */ jsx("a", { href: viewBookingUrl, style: ctaStyle, children: l.ctaButton }) : /* @__PURE__ */ jsx("span", { style: ctaStyle, role: "presentation", children: l.ctaButton });
2947
2974
  return /* @__PURE__ */ jsxs(
2948
2975
  "div",
2949
2976
  {
2950
- className: cn(
2951
- "max-w-xl mx-auto bg-white text-foreground font-sans text-base leading-relaxed",
2952
- className
2953
- ),
2977
+ style: {
2978
+ maxWidth: "576px",
2979
+ margin: "0 auto",
2980
+ backgroundColor: emailTokens.white,
2981
+ color: emailTokens.foreground,
2982
+ fontFamily: emailTokens.fontFamily,
2983
+ fontSize: "16px",
2984
+ lineHeight: "1.6"
2985
+ },
2986
+ className,
2954
2987
  children: [
2955
- /* @__PURE__ */ jsx("div", { className: "pt-10 pb-8 flex justify-center", children: /* @__PURE__ */ jsx(
2988
+ /* @__PURE__ */ jsx("div", { style: { paddingTop: "40px", paddingBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsx(
2956
2989
  "img",
2957
2990
  {
2958
2991
  src: logoUrl,
2959
2992
  alt: l.logoAlt,
2960
- className: "h-[70px] w-auto object-contain"
2993
+ style: { height: "70px", width: "auto", objectFit: "contain" }
2961
2994
  }
2962
2995
  ) }),
2963
- /* @__PURE__ */ jsxs("div", { className: "px-8", children: [
2964
- /* @__PURE__ */ jsx("p", { className: "mb-5 text-base", children: l.greeting(recipientName) }),
2965
- /* @__PURE__ */ jsx("p", { className: "mb-5 text-base", children: l.confirmationMessage }),
2966
- /* @__PURE__ */ jsx("p", { className: "mb-8 text-base", children: l.detailsIntro }),
2967
- /* @__PURE__ */ jsx("div", { className: "mb-10", children: ViewBookingCta })
2996
+ /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px" }, children: [
2997
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.greeting(recipientName) }),
2998
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.confirmationMessage }),
2999
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "32px", fontSize: "16px" }, children: l.detailsIntro }),
3000
+ /* @__PURE__ */ jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
2968
3001
  ] }),
2969
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border mx-8" }),
2970
- /* @__PURE__ */ jsxs("div", { className: "px-8 py-8", children: [
2971
- /* @__PURE__ */ jsx("p", { className: "mb-5 font-heading font-bold text-foreground text-lg", children: l.nextStepsHeading }),
2972
- /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border p-5 flex flex-col gap-4", children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3.5", children: [
2973
- /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary font-heading mt-0.5", children: i + 1 }),
2974
- /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/80 leading-relaxed", children: step })
3002
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3003
+ /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
3004
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
3005
+ /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px", display: "flex", flexDirection: "column", gap: "16px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "14px" }, children: [
3006
+ /* @__PURE__ */ jsx("span", { style: {
3007
+ display: "flex",
3008
+ height: "24px",
3009
+ width: "24px",
3010
+ flexShrink: 0,
3011
+ alignItems: "center",
3012
+ justifyContent: "center",
3013
+ borderRadius: "9999px",
3014
+ backgroundColor: emailTokens.primaryLight,
3015
+ fontSize: "12px",
3016
+ fontWeight: "700",
3017
+ color: emailTokens.primary,
3018
+ marginTop: "2px"
3019
+ }, children: i + 1 }),
3020
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step })
2975
3021
  ] }, i)) })
2976
3022
  ] }),
2977
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border mx-8" }),
2978
- /* @__PURE__ */ jsxs("div", { className: "px-8 py-8", children: [
2979
- /* @__PURE__ */ jsx("p", { className: "mb-5 font-heading font-bold text-foreground text-lg", children: l.bookingSummaryHeading }),
2980
- /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border overflow-hidden", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxs("tbody", { children: [
2981
- /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
2982
- /* @__PURE__ */ jsx("td", { className: "py-3 px-5 text-muted-foreground font-ui bg-muted/30", children: l.bookingNumberLabel }),
2983
- /* @__PURE__ */ jsx("td", { className: "py-3 px-5 font-semibold text-primary", children: bookingReference })
3023
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3024
+ /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
3025
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
3026
+ /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
3027
+ /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3028
+ /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.bookingNumberLabel }),
3029
+ /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "600", color: emailTokens.primary }, children: bookingReference })
2984
3030
  ] }),
2985
- /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
2986
- /* @__PURE__ */ jsx("td", { className: "py-3 px-5 text-muted-foreground font-ui bg-muted/30", children: l.adventuresLabel }),
2987
- /* @__PURE__ */ jsx("td", { className: "py-3 px-5 font-medium text-foreground", children: adventures.length })
3031
+ /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3032
+ /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.adventuresLabel }),
3033
+ /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: adventures.length })
2988
3034
  ] }),
2989
- /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
2990
- /* @__PURE__ */ jsx("td", { className: "py-3 px-5 text-muted-foreground font-ui bg-muted/30", children: l.totalTravellersLabel }),
2991
- /* @__PURE__ */ jsx("td", { className: "py-3 px-5 font-medium text-foreground", children: allTravellers.length })
3035
+ /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3036
+ /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.totalTravellersLabel }),
3037
+ /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: allTravellers.length })
2992
3038
  ] }),
2993
3039
  /* @__PURE__ */ jsxs("tr", { children: [
2994
- /* @__PURE__ */ jsx("td", { className: "py-3 px-5 text-muted-foreground font-ui bg-muted/30", children: l.agentLabel }),
2995
- /* @__PURE__ */ jsx("td", { className: "py-3 px-5 font-medium text-foreground", children: agent })
3040
+ /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.agentLabel }),
3041
+ /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: agent })
2996
3042
  ] })
2997
3043
  ] }) }) })
2998
3044
  ] }),
2999
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border mx-8" }),
3000
- /* @__PURE__ */ jsx("div", { className: "px-8 py-8 flex flex-col gap-6", children: adventures.map((adventure) => {
3045
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3046
+ /* @__PURE__ */ jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px", display: "flex", flexDirection: "column", gap: "24px" }, children: adventures.map((adventure) => {
3001
3047
  var _a;
3002
3048
  return /* @__PURE__ */ jsxs(
3003
3049
  "div",
3004
3050
  {
3005
- className: "rounded-2xl border border-border bg-card overflow-hidden",
3051
+ style: { borderRadius: "16px", border: `1px solid ${emailTokens.border}`, backgroundColor: emailTokens.white, overflow: "hidden" },
3006
3052
  children: [
3007
- /* @__PURE__ */ jsx("div", { className: "aspect-[16/7] overflow-hidden bg-muted", children: /* @__PURE__ */ jsx(
3053
+ /* @__PURE__ */ jsx("div", { style: { aspectRatio: "16/7", overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsx(
3008
3054
  "img",
3009
3055
  {
3010
3056
  src: adventure.image,
3011
3057
  alt: (_a = adventure.imageAlt) != null ? _a : adventure.title,
3012
- className: "w-full h-full object-cover"
3058
+ style: { width: "100%", height: "100%", objectFit: "cover" }
3013
3059
  }
3014
3060
  ) }),
3015
- /* @__PURE__ */ jsxs("div", { className: "p-5 flex flex-col gap-2.5", children: [
3016
- adventure.reference && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary font-heading tracking-wide self-start", children: adventure.reference }),
3017
- /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-foreground font-heading leading-snug mt-0.5", children: adventure.title }),
3018
- /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground font-sans leading-none", children: [
3019
- /* @__PURE__ */ jsxs("svg", { className: "w-3.5 h-3.5 text-primary shrink-0", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3061
+ /* @__PURE__ */ jsxs("div", { style: { padding: "20px", display: "flex", flexDirection: "column", gap: "10px" }, children: [
3062
+ adventure.reference && /* @__PURE__ */ jsx("span", { style: {
3063
+ display: "inline-block",
3064
+ backgroundColor: emailTokens.primaryLight,
3065
+ color: emailTokens.primary,
3066
+ padding: "2px 8px",
3067
+ borderRadius: "6px",
3068
+ fontSize: "12px",
3069
+ fontWeight: "600",
3070
+ letterSpacing: "0.05em",
3071
+ alignSelf: "flex-start"
3072
+ }, children: adventure.reference }),
3073
+ /* @__PURE__ */ jsx("h3", { style: { fontSize: "20px", fontWeight: "700", color: emailTokens.foreground, lineHeight: "1.3", marginTop: "2px", margin: 0 }, children: adventure.title }),
3074
+ /* @__PURE__ */ jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
3075
+ /* @__PURE__ */ jsxs("svg", { style: { width: "14px", height: "14px", color: emailTokens.primary, 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: [
3020
3076
  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
3021
3077
  /* @__PURE__ */ jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
3022
3078
  /* @__PURE__ */ jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
@@ -3026,15 +3082,15 @@ function BookingConfirmation({
3026
3082
  " \u2192 ",
3027
3083
  adventure.dateTo
3028
3084
  ] }),
3029
- adventure.location && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground font-sans leading-none", children: [
3030
- /* @__PURE__ */ jsxs("svg", { className: "w-3.5 h-3.5 text-primary shrink-0", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3085
+ adventure.location && /* @__PURE__ */ jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
3086
+ /* @__PURE__ */ jsxs("svg", { style: { width: "14px", height: "14px", color: emailTokens.primary, 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: [
3031
3087
  /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
3032
3088
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
3033
3089
  ] }),
3034
3090
  adventure.location
3035
3091
  ] }),
3036
- adventure.slots && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground font-sans leading-none", children: [
3037
- /* @__PURE__ */ jsxs("svg", { className: "w-3.5 h-3.5 text-primary shrink-0", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3092
+ adventure.slots && /* @__PURE__ */ jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
3093
+ /* @__PURE__ */ jsxs("svg", { style: { width: "14px", height: "14px", color: emailTokens.primary, 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: [
3038
3094
  /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
3039
3095
  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
3040
3096
  /* @__PURE__ */ jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
@@ -3045,63 +3101,63 @@ function BookingConfirmation({
3045
3101
  adventure.slots.children ? `${adventure.slots.children} ${l.childrenUnit}` : null
3046
3102
  ].filter(Boolean).join(" \xB7 ")
3047
3103
  ] }),
3048
- adventure.partner && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground font-sans leading-none", children: [
3049
- /* @__PURE__ */ jsxs("svg", { className: "w-3.5 h-3.5 text-primary shrink-0", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3104
+ adventure.partner && /* @__PURE__ */ jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
3105
+ /* @__PURE__ */ jsxs("svg", { style: { width: "14px", height: "14px", color: emailTokens.primary, 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: [
3050
3106
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
3051
3107
  /* @__PURE__ */ jsx("polygon", { points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" })
3052
3108
  ] }),
3053
3109
  adventure.partner
3054
3110
  ] }),
3055
3111
  adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
3056
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border my-1" }),
3112
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
3057
3113
  /* @__PURE__ */ jsxs("div", { children: [
3058
- /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-2", children: l.travellersLabel }),
3059
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: adventure.travellers.map((t) => /* @__PURE__ */ jsxs(
3114
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "8px", margin: "0 0 8px 0" }, children: l.travellersLabel }),
3115
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: adventure.travellers.map((traveller) => /* @__PURE__ */ jsxs(
3060
3116
  "div",
3061
3117
  {
3062
- className: "flex items-center justify-between",
3118
+ style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
3063
3119
  children: [
3064
- /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-foreground font-sans", children: [
3065
- t.firstName,
3120
+ /* @__PURE__ */ jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: emailTokens.foreground }, children: [
3121
+ traveller.firstName,
3066
3122
  " ",
3067
- t.lastName
3123
+ traveller.lastName
3068
3124
  ] }),
3069
- t.isChild && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-muted-foreground bg-muted rounded-full px-2 py-0.5 font-heading uppercase tracking-wide", children: l.childBadge })
3125
+ traveller.isChild && /* @__PURE__ */ 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 })
3070
3126
  ]
3071
3127
  },
3072
- t.id
3128
+ traveller.id
3073
3129
  )) })
3074
3130
  ] })
3075
3131
  ] }),
3076
3132
  adventure.description && /* @__PURE__ */ jsxs(Fragment, { children: [
3077
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border my-1" }),
3133
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
3078
3134
  /* @__PURE__ */ jsxs("div", { children: [
3079
- /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-2", children: l.itineraryLabel }),
3080
- /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/80 leading-relaxed font-sans", children: adventure.description })
3135
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "8px", margin: "0 0 8px 0" }, children: l.itineraryLabel }),
3136
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: adventure.description })
3081
3137
  ] })
3082
3138
  ] }),
3083
- adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
3084
- /* @__PURE__ */ jsx("h4", { className: "text-sm font-bold text-foreground font-heading", children: l.includedLabel }),
3085
- /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.included.map((item, i) => /* @__PURE__ */ jsxs(
3139
+ adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
3140
+ /* @__PURE__ */ jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: 0 }, children: l.includedLabel }),
3141
+ /* @__PURE__ */ jsx("ul", { style: { display: "flex", flexDirection: "column", gap: "6px", margin: 0, padding: 0, listStyle: "none" }, children: adventure.included.map((item, i) => /* @__PURE__ */ jsxs(
3086
3142
  "li",
3087
3143
  {
3088
- className: "flex items-start gap-2 text-sm text-foreground/80 font-sans",
3144
+ style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
3089
3145
  children: [
3090
- /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-primary shrink-0 mt-0.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
3146
+ /* @__PURE__ */ jsx("svg", { style: { width: "16px", height: "16px", color: emailTokens.primary, 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__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
3091
3147
  item
3092
3148
  ]
3093
3149
  },
3094
3150
  i
3095
3151
  )) })
3096
3152
  ] }),
3097
- adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
3098
- /* @__PURE__ */ jsx("h4", { className: "text-sm font-bold text-foreground font-heading", children: l.notIncludedLabel }),
3099
- /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxs(
3153
+ adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
3154
+ /* @__PURE__ */ jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: 0 }, children: l.notIncludedLabel }),
3155
+ /* @__PURE__ */ jsx("ul", { style: { display: "flex", flexDirection: "column", gap: "6px", margin: 0, padding: 0, listStyle: "none" }, children: adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxs(
3100
3156
  "li",
3101
3157
  {
3102
- className: "flex items-start gap-2 text-sm text-foreground/80 font-sans",
3158
+ style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
3103
3159
  children: [
3104
- /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 text-destructive shrink-0 mt-0.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3160
+ /* @__PURE__ */ jsxs("svg", { style: { width: "16px", height: "16px", color: emailTokens.destructive, 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: [
3105
3161
  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
3106
3162
  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
3107
3163
  ] }),
@@ -3112,23 +3168,25 @@ function BookingConfirmation({
3112
3168
  )) })
3113
3169
  ] }),
3114
3170
  adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
3115
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border my-1" }),
3171
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
3116
3172
  /* @__PURE__ */ jsxs("div", { children: [
3117
- /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-2", children: l.pricingLabel }),
3118
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
3173
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "8px", margin: "0 0 8px 0" }, children: l.pricingLabel }),
3174
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
3119
3175
  adventure.lineItems.map((item, j) => /* @__PURE__ */ jsxs(
3120
3176
  "div",
3121
3177
  {
3122
- className: "flex items-center justify-between",
3178
+ style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
3123
3179
  children: [
3124
- /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-sans", children: item.label }),
3180
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", color: emailTokens.mutedForeground }, children: item.label }),
3125
3181
  /* @__PURE__ */ jsxs(
3126
3182
  "span",
3127
3183
  {
3128
- className: cn(
3129
- "text-sm font-medium font-sans whitespace-nowrap",
3130
- item.isDiscount ? "text-green-600" : "text-foreground"
3131
- ),
3184
+ style: {
3185
+ fontSize: "14px",
3186
+ fontWeight: "500",
3187
+ whiteSpace: "nowrap",
3188
+ color: item.isDiscount ? emailTokens.green : emailTokens.foreground
3189
+ },
3132
3190
  children: [
3133
3191
  item.isDiscount ? "\u2212" : "",
3134
3192
  item.price
@@ -3139,9 +3197,9 @@ function BookingConfirmation({
3139
3197
  },
3140
3198
  j
3141
3199
  )),
3142
- adventure.subtotal && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-2 mt-1 border-t border-border", children: [
3143
- /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-foreground font-heading", children: l.subtotalLabel }),
3144
- /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-foreground font-heading whitespace-nowrap", children: adventure.subtotal })
3200
+ adventure.subtotal && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: "8px", marginTop: "4px", borderTop: `1px solid ${emailTokens.border}` }, children: [
3201
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground }, children: l.subtotalLabel }),
3202
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: adventure.subtotal })
3145
3203
  ] })
3146
3204
  ] })
3147
3205
  ] })
@@ -3152,19 +3210,22 @@ function BookingConfirmation({
3152
3210
  adventure.id
3153
3211
  );
3154
3212
  }) }),
3155
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border mx-8" }),
3156
- /* @__PURE__ */ jsxs("div", { className: "px-8 py-8", children: [
3157
- /* @__PURE__ */ jsx("p", { className: "mb-5 font-heading font-bold text-foreground text-lg", children: l.paymentSummaryHeading }),
3158
- /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border overflow-hidden", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxs("tbody", { children: [
3159
- summaryLineItems && summaryLineItems.map((item, i) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
3160
- /* @__PURE__ */ jsx("td", { className: "py-2.5 px-4 text-muted-foreground", children: item.label }),
3213
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3214
+ /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
3215
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.paymentSummaryHeading }),
3216
+ /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
3217
+ summaryLineItems && summaryLineItems.map((item, i) => /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3218
+ /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: item.label }),
3161
3219
  /* @__PURE__ */ jsxs(
3162
3220
  "td",
3163
3221
  {
3164
- className: cn(
3165
- "py-2.5 px-4 text-right font-medium whitespace-nowrap",
3166
- item.isDiscount ? "text-green-600" : "text-foreground"
3167
- ),
3222
+ style: {
3223
+ padding: "10px 16px",
3224
+ textAlign: "right",
3225
+ fontWeight: "500",
3226
+ whiteSpace: "nowrap",
3227
+ color: item.isDiscount ? emailTokens.green : emailTokens.foreground
3228
+ },
3168
3229
  children: [
3169
3230
  item.isDiscount ? "\u2212" : "",
3170
3231
  item.price
@@ -3172,35 +3233,33 @@ function BookingConfirmation({
3172
3233
  }
3173
3234
  )
3174
3235
  ] }, i)),
3175
- subtotal && /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
3176
- /* @__PURE__ */ jsx("td", { className: "py-2.5 px-4 text-muted-foreground font-ui", children: l.subtotalLabel }),
3177
- /* @__PURE__ */ jsx("td", { className: "py-2.5 px-4 text-right font-medium text-foreground whitespace-nowrap", children: subtotal })
3236
+ subtotal && /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3237
+ /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.subtotalLabel }),
3238
+ /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: subtotal })
3178
3239
  ] }),
3179
- /* @__PURE__ */ jsxs("tr", { className: "bg-muted/30", children: [
3180
- /* @__PURE__ */ jsx("td", { className: "py-4 px-4 font-bold text-foreground font-heading text-base", children: l.totalLabel }),
3181
- /* @__PURE__ */ jsx("td", { className: "py-4 px-4 text-right font-bold text-primary font-heading text-xl whitespace-nowrap", children: total })
3240
+ /* @__PURE__ */ jsxs("tr", { style: { backgroundColor: emailTokens.muted }, children: [
3241
+ /* @__PURE__ */ jsx("td", { style: { padding: "16px", fontWeight: "700", color: emailTokens.foreground, fontSize: "16px" }, children: l.totalLabel }),
3242
+ /* @__PURE__ */ jsx("td", { style: { padding: "16px", textAlign: "right", fontWeight: "700", color: emailTokens.primary, fontSize: "20px", whiteSpace: "nowrap" }, children: total })
3182
3243
  ] })
3183
3244
  ] }) }) }),
3184
- depositInfo && /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border mt-4 overflow-hidden", children: [
3185
- /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: l.paymentDetailsHeading }) }),
3186
- /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxs("tbody", { children: [
3187
- /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
3188
- /* @__PURE__ */ jsx("td", { className: "py-2.5 px-4 text-muted-foreground", children: l.depositLabel(depositInfo.depositPercent) }),
3189
- /* @__PURE__ */ jsx("td", { className: "py-2.5 px-4 text-right font-medium text-foreground whitespace-nowrap", children: depositInfo.depositAmount })
3245
+ depositInfo && /* @__PURE__ */ jsxs("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, marginTop: "16px", overflow: "hidden" }, children: [
3246
+ /* @__PURE__ */ jsx("div", { style: { padding: "12px 16px", backgroundColor: emailTokens.muted, borderBottom: `1px solid ${emailTokens.border}` }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: 0 }, children: l.paymentDetailsHeading }) }),
3247
+ /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
3248
+ /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3249
+ /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.depositLabel(depositInfo.depositPercent) }),
3250
+ /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.depositAmount })
3190
3251
  ] }),
3191
- /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
3192
- /* @__PURE__ */ jsx("td", { className: "py-2.5 px-4 text-muted-foreground", children: l.remainingBalanceLabel }),
3193
- /* @__PURE__ */ jsx("td", { className: "py-2.5 px-4 text-right font-medium text-foreground whitespace-nowrap", children: depositInfo.remainingAmount })
3252
+ /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3253
+ /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.remainingBalanceLabel }),
3254
+ /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.remainingAmount })
3194
3255
  ] }),
3195
3256
  /* @__PURE__ */ jsxs(
3196
3257
  "tr",
3197
3258
  {
3198
- className: cn(
3199
- depositInfo.isPaidInFull && "border-b border-border"
3200
- ),
3259
+ style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
3201
3260
  children: [
3202
- /* @__PURE__ */ jsx("td", { className: "py-2.5 px-4 text-muted-foreground", children: l.balanceDueLabel }),
3203
- /* @__PURE__ */ jsx("td", { className: "py-2.5 px-4 text-right font-medium text-foreground whitespace-nowrap", children: depositInfo.balanceDueDate })
3261
+ /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.balanceDueLabel }),
3262
+ /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.balanceDueDate })
3204
3263
  ]
3205
3264
  }
3206
3265
  ),
@@ -3208,17 +3267,17 @@ function BookingConfirmation({
3208
3267
  "td",
3209
3268
  {
3210
3269
  colSpan: 2,
3211
- className: "py-3 px-4 text-center font-semibold text-green-600 bg-green-50",
3270
+ style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: emailTokens.green, backgroundColor: emailTokens.greenBg },
3212
3271
  children: l.paidInFullLabel
3213
3272
  }
3214
3273
  ) })
3215
3274
  ] }) })
3216
3275
  ] })
3217
3276
  ] }),
3218
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border mx-8" }),
3219
- /* @__PURE__ */ jsxs("div", { className: "px-8 py-8 pb-10", children: [
3220
- /* @__PURE__ */ jsx("p", { className: "mb-5 text-base", children: l.footerMessage }),
3221
- /* @__PURE__ */ jsx("p", { className: "text-base", children: l.footerContact(agent) })
3277
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3278
+ /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: [
3279
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
3280
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "16px" }, children: l.footerContact(agent) })
3222
3281
  ] })
3223
3282
  ]
3224
3283
  }
@@ -3255,72 +3314,198 @@ function BookingConfirmationEmail({
3255
3314
  className
3256
3315
  }) {
3257
3316
  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS2), labels);
3258
- const AddTravellersCta = addTravellersUrl ? /* @__PURE__ */ jsx(
3259
- "a",
3317
+ const ctaStyle = {
3318
+ display: "inline-block",
3319
+ backgroundColor: emailTokens.primary,
3320
+ color: emailTokens.primaryForeground,
3321
+ padding: "12px 24px",
3322
+ borderRadius: "8px",
3323
+ fontSize: "14px",
3324
+ fontWeight: "700",
3325
+ textDecoration: "none",
3326
+ fontFamily: emailTokens.fontFamily
3327
+ };
3328
+ const AddTravellersCta = addTravellersUrl ? /* @__PURE__ */ jsx("a", { href: addTravellersUrl, style: ctaStyle, children: l.ctaButton }) : /* @__PURE__ */ jsx("span", { style: ctaStyle, role: "presentation", children: l.ctaButton });
3329
+ const tableRows = [
3330
+ { label: l.bookingNumberLabel, value: bookingNumber },
3331
+ { label: l.activityLabel, value: activity },
3332
+ { label: l.adventureLabel, value: adventure },
3333
+ { label: l.startingDateLabel, value: startingDate },
3334
+ { label: l.numberOfPeopleLabel, value: String(numberOfPeople) },
3335
+ { label: l.hostLabel, value: host }
3336
+ ];
3337
+ return /* @__PURE__ */ jsxs(
3338
+ "div",
3260
3339
  {
3261
- href: addTravellersUrl,
3262
- className: "inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-sm font-bold text-primary-foreground font-heading hover:bg-primary-800 transition-colors no-underline",
3263
- children: l.ctaButton
3340
+ style: {
3341
+ maxWidth: "576px",
3342
+ margin: "0 auto",
3343
+ backgroundColor: emailTokens.white,
3344
+ color: emailTokens.foreground,
3345
+ fontFamily: emailTokens.fontFamily,
3346
+ fontSize: "16px",
3347
+ lineHeight: "1.6"
3348
+ },
3349
+ className,
3350
+ children: [
3351
+ /* @__PURE__ */ jsx("div", { style: { marginTop: "32px", marginBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsx(
3352
+ "img",
3353
+ {
3354
+ src: logoUrl,
3355
+ alt: l.logoAlt,
3356
+ style: { height: "70px", width: "auto", objectFit: "contain" }
3357
+ }
3358
+ ) }),
3359
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px" }, children: l.greeting(recipientName) }),
3360
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px" }, children: l.thankYouMessage }),
3361
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px" }, children: l.addTravellersInstruction }),
3362
+ /* @__PURE__ */ jsx("div", { style: { marginBottom: "32px" }, children: AddTravellersCta }),
3363
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "32px" } }),
3364
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px", fontWeight: "700", color: emailTokens.foreground, fontFamily: emailTokens.fontFamily }, children: l.summaryHeading }),
3365
+ /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", marginBottom: "32px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsx("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxs("tr", { style: i > 0 ? { borderTop: `1px solid ${emailTokens.border}` } : {}, children: [
3366
+ /* @__PURE__ */ jsx("td", { style: { padding: "4px 16px 4px 0", color: emailTokens.mutedForeground }, children: row.label }),
3367
+ /* @__PURE__ */ jsx("td", { style: { padding: "4px 0", fontWeight: "500", color: emailTokens.foreground }, children: row.value })
3368
+ ] }, i)) }) }),
3369
+ /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "32px" } }),
3370
+ /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px" }, children: l.postCtaMessage }),
3371
+ /* @__PURE__ */ jsx("p", { children: l.closingMessage })
3372
+ ]
3264
3373
  }
3265
- ) : /* @__PURE__ */ jsx(
3266
- "span",
3374
+ );
3375
+ }
3376
+ var DEFAULT_LOGO3 = "/logo-planetaexo.png";
3377
+ function BookingOtpEmail({
3378
+ bodyMessage,
3379
+ expiryMessage,
3380
+ logoUrl = DEFAULT_LOGO3,
3381
+ className
3382
+ }) {
3383
+ return /* @__PURE__ */ jsxs(
3384
+ "div",
3267
3385
  {
3268
- className: "inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-sm font-bold text-primary-foreground font-heading",
3269
- role: "presentation",
3270
- children: l.ctaButton
3386
+ style: {
3387
+ fontFamily: emailTokens.fontFamily,
3388
+ color: emailTokens.foreground,
3389
+ maxWidth: "600px",
3390
+ margin: "0 auto",
3391
+ padding: "24px"
3392
+ },
3393
+ className,
3394
+ children: [
3395
+ /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: "32px" }, children: /* @__PURE__ */ jsx(
3396
+ "img",
3397
+ {
3398
+ src: logoUrl,
3399
+ alt: "PlanetaEXO",
3400
+ style: { height: "56px", width: "auto" }
3401
+ }
3402
+ ) }),
3403
+ /* @__PURE__ */ jsx(
3404
+ "p",
3405
+ {
3406
+ style: {
3407
+ fontSize: "16px",
3408
+ lineHeight: "1.6",
3409
+ margin: "0 0 16px"
3410
+ },
3411
+ children: bodyMessage
3412
+ }
3413
+ ),
3414
+ /* @__PURE__ */ jsx(
3415
+ "p",
3416
+ {
3417
+ style: {
3418
+ color: emailTokens.mutedForeground,
3419
+ fontSize: "14px",
3420
+ lineHeight: "1.5",
3421
+ margin: "0"
3422
+ },
3423
+ children: expiryMessage
3424
+ }
3425
+ )
3426
+ ]
3271
3427
  }
3272
3428
  );
3429
+ }
3430
+ var DEFAULT_LOGO4 = "/logo-planetaexo.png";
3431
+ function TravellerFormInviteEmail({
3432
+ greeting,
3433
+ bodyIntro,
3434
+ bodyInstruction,
3435
+ links,
3436
+ ignoreNote,
3437
+ teamSignature,
3438
+ logoUrl = DEFAULT_LOGO4,
3439
+ buttonLabel = "Preencher formul\xE1rio",
3440
+ className
3441
+ }) {
3273
3442
  return /* @__PURE__ */ jsxs(
3274
3443
  "div",
3275
3444
  {
3276
- className: cn(
3277
- "max-w-xl mx-auto bg-white text-foreground font-sans text-base leading-relaxed",
3278
- className
3279
- ),
3445
+ style: {
3446
+ fontFamily: emailTokens.fontFamily,
3447
+ color: emailTokens.foreground,
3448
+ maxWidth: "600px",
3449
+ margin: "0 auto",
3450
+ padding: "24px"
3451
+ },
3452
+ className,
3280
3453
  children: [
3281
- /* @__PURE__ */ jsx("div", { className: "mt-8 mb-8 flex justify-center", children: /* @__PURE__ */ jsx(
3454
+ /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: "32px" }, children: /* @__PURE__ */ jsx(
3282
3455
  "img",
3283
3456
  {
3284
3457
  src: logoUrl,
3285
- alt: l.logoAlt,
3286
- className: "h-[70px] w-auto object-contain"
3458
+ alt: "PlanetaEXO",
3459
+ style: { height: "56px", width: "auto" }
3287
3460
  }
3288
3461
  ) }),
3289
- /* @__PURE__ */ jsx("p", { className: "mb-4", children: l.greeting(recipientName) }),
3290
- /* @__PURE__ */ jsx("p", { className: "mb-4", children: l.thankYouMessage }),
3291
- /* @__PURE__ */ jsx("p", { className: "mb-4", children: l.addTravellersInstruction }),
3292
- /* @__PURE__ */ jsx("div", { className: "mb-8", children: AddTravellersCta }),
3293
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border mb-8" }),
3294
- /* @__PURE__ */ jsx("p", { className: "mb-4 font-heading font-bold text-foreground", children: l.summaryHeading }),
3295
- /* @__PURE__ */ jsx("table", { className: "w-full text-sm mb-8", children: /* @__PURE__ */ jsxs("tbody", { className: "divide-y divide-border", children: [
3296
- /* @__PURE__ */ jsxs("tr", { children: [
3297
- /* @__PURE__ */ jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.bookingNumberLabel }),
3298
- /* @__PURE__ */ jsx("td", { className: "py-1 font-medium text-foreground", children: bookingNumber })
3299
- ] }),
3300
- /* @__PURE__ */ jsxs("tr", { children: [
3301
- /* @__PURE__ */ jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.activityLabel }),
3302
- /* @__PURE__ */ jsx("td", { className: "py-1 font-medium text-foreground", children: activity })
3303
- ] }),
3304
- /* @__PURE__ */ jsxs("tr", { children: [
3305
- /* @__PURE__ */ jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.adventureLabel }),
3306
- /* @__PURE__ */ jsx("td", { className: "py-1 font-medium text-foreground", children: adventure })
3307
- ] }),
3308
- /* @__PURE__ */ jsxs("tr", { children: [
3309
- /* @__PURE__ */ jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.startingDateLabel }),
3310
- /* @__PURE__ */ jsx("td", { className: "py-1 font-medium text-foreground", children: startingDate })
3311
- ] }),
3312
- /* @__PURE__ */ jsxs("tr", { children: [
3313
- /* @__PURE__ */ jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.numberOfPeopleLabel }),
3314
- /* @__PURE__ */ jsx("td", { className: "py-1 font-medium text-foreground", children: numberOfPeople })
3315
- ] }),
3316
- /* @__PURE__ */ jsxs("tr", { children: [
3317
- /* @__PURE__ */ jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.hostLabel }),
3318
- /* @__PURE__ */ jsx("td", { className: "py-1 font-medium text-foreground", children: host })
3319
- ] })
3320
- ] }) }),
3321
- /* @__PURE__ */ jsx("hr", { className: "border-t border-border mb-8" }),
3322
- /* @__PURE__ */ jsx("p", { className: "mb-4", children: l.postCtaMessage }),
3323
- /* @__PURE__ */ jsx("p", { children: l.closingMessage })
3462
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "16px", lineHeight: "1.5", margin: "0 0 12px" }, children: greeting }),
3463
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 8px" }, children: bodyIntro }),
3464
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 20px" }, children: bodyInstruction }),
3465
+ /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 24px" }, children: links.map((link, i) => /* @__PURE__ */ jsxs("li", { style: { marginBottom: "12px" }, children: [
3466
+ /* @__PURE__ */ jsx(
3467
+ "span",
3468
+ {
3469
+ style: {
3470
+ display: "block",
3471
+ fontSize: "13px",
3472
+ color: emailTokens.mutedForeground,
3473
+ marginBottom: "4px"
3474
+ },
3475
+ children: link.adventureName
3476
+ }
3477
+ ),
3478
+ /* @__PURE__ */ jsx(
3479
+ "a",
3480
+ {
3481
+ href: link.url,
3482
+ style: {
3483
+ display: "inline-block",
3484
+ backgroundColor: emailTokens.primary,
3485
+ color: emailTokens.primaryForeground,
3486
+ fontSize: "14px",
3487
+ fontWeight: "600",
3488
+ textDecoration: "none",
3489
+ padding: "10px 20px",
3490
+ borderRadius: "6px"
3491
+ },
3492
+ children: buttonLabel
3493
+ }
3494
+ )
3495
+ ] }, i)) }),
3496
+ /* @__PURE__ */ jsx(
3497
+ "p",
3498
+ {
3499
+ style: {
3500
+ color: emailTokens.mutedForeground,
3501
+ fontSize: "13px",
3502
+ lineHeight: "1.5",
3503
+ margin: "0 0 16px"
3504
+ },
3505
+ children: ignoreNote
3506
+ }
3507
+ ),
3508
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", lineHeight: "1.5", margin: "0" }, children: teamSignature })
3324
3509
  ]
3325
3510
  }
3326
3511
  );
@@ -8019,6 +8204,6 @@ function LeadCapturePopup({
8019
8204
  );
8020
8205
  }
8021
8206
 
8022
- export { ActivityCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TermsSection, ThemeToggle, TripCard, TripHeader, TripPage, buttonVariants, cn, getStripeAppearance, stripeAppearance };
8207
+ export { ActivityCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingOtpEmail, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TermsSection, ThemeToggle, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance };
8023
8208
  //# sourceMappingURL=index.js.map
8024
8209
  //# sourceMappingURL=index.js.map