@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.cjs CHANGED
@@ -2894,6 +2894,36 @@ 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
+ /** Web-safe font stack used in all email components */
2925
+ fontFamily: "Arial, Helvetica, sans-serif"
2926
+ };
2897
2927
  var DEFAULT_LABELS = {
2898
2928
  ctaButton: "View booking details",
2899
2929
  logoAlt: "PlanetaEXO",
@@ -2950,94 +2980,120 @@ function BookingConfirmation({
2950
2980
  var _a;
2951
2981
  return (_a = a.travellers) != null ? _a : [];
2952
2982
  });
2953
- const ViewBookingCta = viewBookingUrl ? /* @__PURE__ */ jsxRuntime.jsx(
2954
- "a",
2955
- {
2956
- href: viewBookingUrl,
2957
- 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",
2958
- children: l.ctaButton
2959
- }
2960
- ) : /* @__PURE__ */ jsxRuntime.jsx(
2961
- "span",
2962
- {
2963
- 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",
2964
- role: "presentation",
2965
- children: l.ctaButton
2966
- }
2967
- );
2983
+ const ctaStyle = {
2984
+ display: "inline-block",
2985
+ backgroundColor: emailTokens.primary,
2986
+ color: emailTokens.primaryForeground,
2987
+ padding: "14px 32px",
2988
+ borderRadius: "8px",
2989
+ fontSize: "14px",
2990
+ fontWeight: "700",
2991
+ textDecoration: "none",
2992
+ fontFamily: emailTokens.fontFamily
2993
+ };
2994
+ 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 });
2968
2995
  return /* @__PURE__ */ jsxRuntime.jsxs(
2969
2996
  "div",
2970
2997
  {
2971
- className: cn(
2972
- "max-w-xl mx-auto bg-white text-foreground font-sans text-base leading-relaxed",
2973
- className
2974
- ),
2998
+ style: {
2999
+ maxWidth: "576px",
3000
+ margin: "0 auto",
3001
+ backgroundColor: emailTokens.white,
3002
+ color: emailTokens.foreground,
3003
+ fontFamily: emailTokens.fontFamily,
3004
+ fontSize: "16px",
3005
+ lineHeight: "1.6"
3006
+ },
3007
+ className,
2975
3008
  children: [
2976
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-10 pb-8 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
3009
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingTop: "40px", paddingBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
2977
3010
  "img",
2978
3011
  {
2979
3012
  src: logoUrl,
2980
3013
  alt: l.logoAlt,
2981
- className: "h-[70px] w-auto object-contain"
3014
+ style: { height: "70px", width: "auto", objectFit: "contain" }
2982
3015
  }
2983
3016
  ) }),
2984
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-8", children: [
2985
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 text-base", children: l.greeting(recipientName) }),
2986
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 text-base", children: l.confirmationMessage }),
2987
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 text-base", children: l.detailsIntro }),
2988
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-10", children: ViewBookingCta })
3017
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px" }, children: [
3018
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.greeting(recipientName) }),
3019
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.confirmationMessage }),
3020
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "32px", fontSize: "16px" }, children: l.detailsIntro }),
3021
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
2989
3022
  ] }),
2990
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border mx-8" }),
2991
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-8 py-8", children: [
2992
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 font-heading font-bold text-foreground text-lg", children: l.nextStepsHeading }),
2993
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-border p-5 flex flex-col gap-4", children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3.5", children: [
2994
- /* @__PURE__ */ jsxRuntime.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 }),
2995
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground/80 leading-relaxed", children: step })
3023
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3024
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
3025
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
3026
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "14px" }, children: [
3027
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
3028
+ display: "flex",
3029
+ height: "24px",
3030
+ width: "24px",
3031
+ flexShrink: 0,
3032
+ alignItems: "center",
3033
+ justifyContent: "center",
3034
+ borderRadius: "9999px",
3035
+ backgroundColor: emailTokens.primaryLight,
3036
+ fontSize: "12px",
3037
+ fontWeight: "700",
3038
+ color: emailTokens.primary,
3039
+ marginTop: "2px"
3040
+ }, children: i + 1 }),
3041
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step })
2996
3042
  ] }, i)) })
2997
3043
  ] }),
2998
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border mx-8" }),
2999
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-8 py-8", children: [
3000
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 font-heading font-bold text-foreground text-lg", children: l.bookingSummaryHeading }),
3001
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-border overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3002
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border", children: [
3003
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3 px-5 text-muted-foreground font-ui bg-muted/30", children: l.bookingNumberLabel }),
3004
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3 px-5 font-semibold text-primary", children: bookingReference })
3044
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3045
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
3046
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
3047
+ /* @__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: [
3048
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3049
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.bookingNumberLabel }),
3050
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "600", color: emailTokens.primary }, children: bookingReference })
3005
3051
  ] }),
3006
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border", children: [
3007
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3 px-5 text-muted-foreground font-ui bg-muted/30", children: l.adventuresLabel }),
3008
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3 px-5 font-medium text-foreground", children: adventures.length })
3052
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3053
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.adventuresLabel }),
3054
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: adventures.length })
3009
3055
  ] }),
3010
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border", children: [
3011
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3 px-5 text-muted-foreground font-ui bg-muted/30", children: l.totalTravellersLabel }),
3012
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3 px-5 font-medium text-foreground", children: allTravellers.length })
3056
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3057
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.totalTravellersLabel }),
3058
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: allTravellers.length })
3013
3059
  ] }),
3014
3060
  /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3015
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3 px-5 text-muted-foreground font-ui bg-muted/30", children: l.agentLabel }),
3016
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3 px-5 font-medium text-foreground", children: agent })
3061
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.agentLabel }),
3062
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: agent })
3017
3063
  ] })
3018
3064
  ] }) }) })
3019
3065
  ] }),
3020
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border mx-8" }),
3021
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-8 py-8 flex flex-col gap-6", children: adventures.map((adventure) => {
3066
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3067
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px", display: "flex", flexDirection: "column", gap: "24px" }, children: adventures.map((adventure) => {
3022
3068
  var _a;
3023
3069
  return /* @__PURE__ */ jsxRuntime.jsxs(
3024
3070
  "div",
3025
3071
  {
3026
- className: "rounded-2xl border border-border bg-card overflow-hidden",
3072
+ style: { borderRadius: "16px", border: `1px solid ${emailTokens.border}`, backgroundColor: emailTokens.white, overflow: "hidden" },
3027
3073
  children: [
3028
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/7] overflow-hidden bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
3074
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "16/7", overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsxRuntime.jsx(
3029
3075
  "img",
3030
3076
  {
3031
3077
  src: adventure.image,
3032
3078
  alt: (_a = adventure.imageAlt) != null ? _a : adventure.title,
3033
- className: "w-full h-full object-cover"
3079
+ style: { width: "100%", height: "100%", objectFit: "cover" }
3034
3080
  }
3035
3081
  ) }),
3036
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 flex flex-col gap-2.5", children: [
3037
- adventure.reference && /* @__PURE__ */ jsxRuntime.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 }),
3038
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-foreground font-heading leading-snug mt-0.5", children: adventure.title }),
3039
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground font-sans leading-none", children: [
3040
- /* @__PURE__ */ jsxRuntime.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: [
3082
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px", display: "flex", flexDirection: "column", gap: "10px" }, children: [
3083
+ adventure.reference && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
3084
+ display: "inline-block",
3085
+ backgroundColor: emailTokens.primaryLight,
3086
+ color: emailTokens.primary,
3087
+ padding: "2px 8px",
3088
+ borderRadius: "6px",
3089
+ fontSize: "12px",
3090
+ fontWeight: "600",
3091
+ letterSpacing: "0.05em",
3092
+ alignSelf: "flex-start"
3093
+ }, children: adventure.reference }),
3094
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "20px", fontWeight: "700", color: emailTokens.foreground, lineHeight: "1.3", marginTop: "2px", margin: 0 }, children: adventure.title }),
3095
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
3096
+ /* @__PURE__ */ jsxRuntime.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: [
3041
3097
  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
3042
3098
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
3043
3099
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
@@ -3047,15 +3103,15 @@ function BookingConfirmation({
3047
3103
  " \u2192 ",
3048
3104
  adventure.dateTo
3049
3105
  ] }),
3050
- adventure.location && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground font-sans leading-none", children: [
3051
- /* @__PURE__ */ jsxRuntime.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: [
3106
+ adventure.location && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
3107
+ /* @__PURE__ */ jsxRuntime.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: [
3052
3108
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
3053
3109
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "3" })
3054
3110
  ] }),
3055
3111
  adventure.location
3056
3112
  ] }),
3057
- adventure.slots && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground font-sans leading-none", children: [
3058
- /* @__PURE__ */ jsxRuntime.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: [
3113
+ adventure.slots && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
3114
+ /* @__PURE__ */ jsxRuntime.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: [
3059
3115
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
3060
3116
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
3061
3117
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
@@ -3066,63 +3122,63 @@ function BookingConfirmation({
3066
3122
  adventure.slots.children ? `${adventure.slots.children} ${l.childrenUnit}` : null
3067
3123
  ].filter(Boolean).join(" \xB7 ")
3068
3124
  ] }),
3069
- adventure.partner && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground font-sans leading-none", children: [
3070
- /* @__PURE__ */ jsxRuntime.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: [
3125
+ adventure.partner && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
3126
+ /* @__PURE__ */ jsxRuntime.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: [
3071
3127
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
3072
3128
  /* @__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" })
3073
3129
  ] }),
3074
3130
  adventure.partner
3075
3131
  ] }),
3076
3132
  adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3077
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border my-1" }),
3133
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
3078
3134
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3079
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-2", children: l.travellersLabel }),
3080
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: adventure.travellers.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(
3135
+ /* @__PURE__ */ jsxRuntime.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 }),
3136
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: adventure.travellers.map((traveller) => /* @__PURE__ */ jsxRuntime.jsxs(
3081
3137
  "div",
3082
3138
  {
3083
- className: "flex items-center justify-between",
3139
+ style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
3084
3140
  children: [
3085
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-foreground font-sans", children: [
3086
- t.firstName,
3141
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: emailTokens.foreground }, children: [
3142
+ traveller.firstName,
3087
3143
  " ",
3088
- t.lastName
3144
+ traveller.lastName
3089
3145
  ] }),
3090
- t.isChild && /* @__PURE__ */ jsxRuntime.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 })
3146
+ traveller.isChild && /* @__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 })
3091
3147
  ]
3092
3148
  },
3093
- t.id
3149
+ traveller.id
3094
3150
  )) })
3095
3151
  ] })
3096
3152
  ] }),
3097
3153
  adventure.description && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3098
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border my-1" }),
3154
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
3099
3155
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3100
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-2", children: l.itineraryLabel }),
3101
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground/80 leading-relaxed font-sans", children: adventure.description })
3156
+ /* @__PURE__ */ jsxRuntime.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 }),
3157
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: adventure.description })
3102
3158
  ] })
3103
3159
  ] }),
3104
- adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
3105
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-bold text-foreground font-heading", children: l.includedLabel }),
3106
- /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.included.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
3160
+ adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
3161
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: 0 }, children: l.includedLabel }),
3162
+ /* @__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(
3107
3163
  "li",
3108
3164
  {
3109
- className: "flex items-start gap-2 text-sm text-foreground/80 font-sans",
3165
+ style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
3110
3166
  children: [
3111
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }),
3167
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }),
3112
3168
  item
3113
3169
  ]
3114
3170
  },
3115
3171
  i
3116
3172
  )) })
3117
3173
  ] }),
3118
- adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
3119
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-bold text-foreground font-heading", children: l.notIncludedLabel }),
3120
- /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
3174
+ adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
3175
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: 0 }, children: l.notIncludedLabel }),
3176
+ /* @__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(
3121
3177
  "li",
3122
3178
  {
3123
- className: "flex items-start gap-2 text-sm text-foreground/80 font-sans",
3179
+ style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
3124
3180
  children: [
3125
- /* @__PURE__ */ jsxRuntime.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: [
3181
+ /* @__PURE__ */ jsxRuntime.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: [
3126
3182
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
3127
3183
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
3128
3184
  ] }),
@@ -3133,23 +3189,25 @@ function BookingConfirmation({
3133
3189
  )) })
3134
3190
  ] }),
3135
3191
  adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3136
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border my-1" }),
3192
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
3137
3193
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3138
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-2", children: l.pricingLabel }),
3139
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
3194
+ /* @__PURE__ */ jsxRuntime.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 }),
3195
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
3140
3196
  adventure.lineItems.map((item, j) => /* @__PURE__ */ jsxRuntime.jsxs(
3141
3197
  "div",
3142
3198
  {
3143
- className: "flex items-center justify-between",
3199
+ style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
3144
3200
  children: [
3145
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground font-sans", children: item.label }),
3201
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", color: emailTokens.mutedForeground }, children: item.label }),
3146
3202
  /* @__PURE__ */ jsxRuntime.jsxs(
3147
3203
  "span",
3148
3204
  {
3149
- className: cn(
3150
- "text-sm font-medium font-sans whitespace-nowrap",
3151
- item.isDiscount ? "text-green-600" : "text-foreground"
3152
- ),
3205
+ style: {
3206
+ fontSize: "14px",
3207
+ fontWeight: "500",
3208
+ whiteSpace: "nowrap",
3209
+ color: item.isDiscount ? emailTokens.green : emailTokens.foreground
3210
+ },
3153
3211
  children: [
3154
3212
  item.isDiscount ? "\u2212" : "",
3155
3213
  item.price
@@ -3160,9 +3218,9 @@ function BookingConfirmation({
3160
3218
  },
3161
3219
  j
3162
3220
  )),
3163
- adventure.subtotal && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-2 mt-1 border-t border-border", children: [
3164
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-foreground font-heading", children: l.subtotalLabel }),
3165
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-foreground font-heading whitespace-nowrap", children: adventure.subtotal })
3221
+ adventure.subtotal && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: "8px", marginTop: "4px", borderTop: `1px solid ${emailTokens.border}` }, children: [
3222
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground }, children: l.subtotalLabel }),
3223
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: adventure.subtotal })
3166
3224
  ] })
3167
3225
  ] })
3168
3226
  ] })
@@ -3173,19 +3231,22 @@ function BookingConfirmation({
3173
3231
  adventure.id
3174
3232
  );
3175
3233
  }) }),
3176
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border mx-8" }),
3177
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-8 py-8", children: [
3178
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 font-heading font-bold text-foreground text-lg", children: l.paymentSummaryHeading }),
3179
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-border overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3180
- summaryLineItems && summaryLineItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border", children: [
3181
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2.5 px-4 text-muted-foreground", children: item.label }),
3234
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3235
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
3236
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.paymentSummaryHeading }),
3237
+ /* @__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: [
3238
+ summaryLineItems && summaryLineItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3239
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: item.label }),
3182
3240
  /* @__PURE__ */ jsxRuntime.jsxs(
3183
3241
  "td",
3184
3242
  {
3185
- className: cn(
3186
- "py-2.5 px-4 text-right font-medium whitespace-nowrap",
3187
- item.isDiscount ? "text-green-600" : "text-foreground"
3188
- ),
3243
+ style: {
3244
+ padding: "10px 16px",
3245
+ textAlign: "right",
3246
+ fontWeight: "500",
3247
+ whiteSpace: "nowrap",
3248
+ color: item.isDiscount ? emailTokens.green : emailTokens.foreground
3249
+ },
3189
3250
  children: [
3190
3251
  item.isDiscount ? "\u2212" : "",
3191
3252
  item.price
@@ -3193,35 +3254,33 @@ function BookingConfirmation({
3193
3254
  }
3194
3255
  )
3195
3256
  ] }, i)),
3196
- subtotal && /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border", children: [
3197
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2.5 px-4 text-muted-foreground font-ui", children: l.subtotalLabel }),
3198
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2.5 px-4 text-right font-medium text-foreground whitespace-nowrap", children: subtotal })
3257
+ subtotal && /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3258
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.subtotalLabel }),
3259
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: subtotal })
3199
3260
  ] }),
3200
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "bg-muted/30", children: [
3201
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-4 px-4 font-bold text-foreground font-heading text-base", children: l.totalLabel }),
3202
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-4 px-4 text-right font-bold text-primary font-heading text-xl whitespace-nowrap", children: total })
3261
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { backgroundColor: emailTokens.muted }, children: [
3262
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "16px", fontWeight: "700", color: emailTokens.foreground, fontSize: "16px" }, children: l.totalLabel }),
3263
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "16px", textAlign: "right", fontWeight: "700", color: emailTokens.primary, fontSize: "20px", whiteSpace: "nowrap" }, children: total })
3203
3264
  ] })
3204
3265
  ] }) }) }),
3205
- depositInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border mt-4 overflow-hidden", children: [
3206
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: l.paymentDetailsHeading }) }),
3207
- /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3208
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border", children: [
3209
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2.5 px-4 text-muted-foreground", children: l.depositLabel(depositInfo.depositPercent) }),
3210
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2.5 px-4 text-right font-medium text-foreground whitespace-nowrap", children: depositInfo.depositAmount })
3266
+ depositInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, marginTop: "16px", overflow: "hidden" }, children: [
3267
+ /* @__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 }) }),
3268
+ /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3269
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3270
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.depositLabel(depositInfo.depositPercent) }),
3271
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.depositAmount })
3211
3272
  ] }),
3212
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border", children: [
3213
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2.5 px-4 text-muted-foreground", children: l.remainingBalanceLabel }),
3214
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2.5 px-4 text-right font-medium text-foreground whitespace-nowrap", children: depositInfo.remainingAmount })
3273
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3274
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.remainingBalanceLabel }),
3275
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.remainingAmount })
3215
3276
  ] }),
3216
3277
  /* @__PURE__ */ jsxRuntime.jsxs(
3217
3278
  "tr",
3218
3279
  {
3219
- className: cn(
3220
- depositInfo.isPaidInFull && "border-b border-border"
3221
- ),
3280
+ style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
3222
3281
  children: [
3223
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2.5 px-4 text-muted-foreground", children: l.balanceDueLabel }),
3224
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2.5 px-4 text-right font-medium text-foreground whitespace-nowrap", children: depositInfo.balanceDueDate })
3282
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.balanceDueLabel }),
3283
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.balanceDueDate })
3225
3284
  ]
3226
3285
  }
3227
3286
  ),
@@ -3229,17 +3288,17 @@ function BookingConfirmation({
3229
3288
  "td",
3230
3289
  {
3231
3290
  colSpan: 2,
3232
- className: "py-3 px-4 text-center font-semibold text-green-600 bg-green-50",
3291
+ style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: emailTokens.green, backgroundColor: emailTokens.greenBg },
3233
3292
  children: l.paidInFullLabel
3234
3293
  }
3235
3294
  ) })
3236
3295
  ] }) })
3237
3296
  ] })
3238
3297
  ] }),
3239
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border mx-8" }),
3240
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-8 py-8 pb-10", children: [
3241
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 text-base", children: l.footerMessage }),
3242
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base", children: l.footerContact(agent) })
3298
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3299
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: [
3300
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
3301
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px" }, children: l.footerContact(agent) })
3243
3302
  ] })
3244
3303
  ]
3245
3304
  }
@@ -3276,72 +3335,198 @@ function BookingConfirmationEmail({
3276
3335
  className
3277
3336
  }) {
3278
3337
  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS2), labels);
3279
- const AddTravellersCta = addTravellersUrl ? /* @__PURE__ */ jsxRuntime.jsx(
3280
- "a",
3338
+ const ctaStyle = {
3339
+ display: "inline-block",
3340
+ backgroundColor: emailTokens.primary,
3341
+ color: emailTokens.primaryForeground,
3342
+ padding: "12px 24px",
3343
+ borderRadius: "8px",
3344
+ fontSize: "14px",
3345
+ fontWeight: "700",
3346
+ textDecoration: "none",
3347
+ fontFamily: emailTokens.fontFamily
3348
+ };
3349
+ 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 });
3350
+ const tableRows = [
3351
+ { label: l.bookingNumberLabel, value: bookingNumber },
3352
+ { label: l.activityLabel, value: activity },
3353
+ { label: l.adventureLabel, value: adventure },
3354
+ { label: l.startingDateLabel, value: startingDate },
3355
+ { label: l.numberOfPeopleLabel, value: String(numberOfPeople) },
3356
+ { label: l.hostLabel, value: host }
3357
+ ];
3358
+ return /* @__PURE__ */ jsxRuntime.jsxs(
3359
+ "div",
3281
3360
  {
3282
- href: addTravellersUrl,
3283
- 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",
3284
- children: l.ctaButton
3361
+ style: {
3362
+ maxWidth: "576px",
3363
+ margin: "0 auto",
3364
+ backgroundColor: emailTokens.white,
3365
+ color: emailTokens.foreground,
3366
+ fontFamily: emailTokens.fontFamily,
3367
+ fontSize: "16px",
3368
+ lineHeight: "1.6"
3369
+ },
3370
+ className,
3371
+ children: [
3372
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "32px", marginBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
3373
+ "img",
3374
+ {
3375
+ src: logoUrl,
3376
+ alt: l.logoAlt,
3377
+ style: { height: "70px", width: "auto", objectFit: "contain" }
3378
+ }
3379
+ ) }),
3380
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.greeting(recipientName) }),
3381
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.thankYouMessage }),
3382
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.addTravellersInstruction }),
3383
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "32px" }, children: AddTravellersCta }),
3384
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "32px" } }),
3385
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontWeight: "700", color: emailTokens.foreground, fontFamily: emailTokens.fontFamily }, children: l.summaryHeading }),
3386
+ /* @__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: [
3387
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 16px 4px 0", color: emailTokens.mutedForeground }, children: row.label }),
3388
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 0", fontWeight: "500", color: emailTokens.foreground }, children: row.value })
3389
+ ] }, i)) }) }),
3390
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "32px" } }),
3391
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.postCtaMessage }),
3392
+ /* @__PURE__ */ jsxRuntime.jsx("p", { children: l.closingMessage })
3393
+ ]
3285
3394
  }
3286
- ) : /* @__PURE__ */ jsxRuntime.jsx(
3287
- "span",
3395
+ );
3396
+ }
3397
+ var DEFAULT_LOGO3 = "/logo-planetaexo.png";
3398
+ function BookingOtpEmail({
3399
+ bodyMessage,
3400
+ expiryMessage,
3401
+ logoUrl = DEFAULT_LOGO3,
3402
+ className
3403
+ }) {
3404
+ return /* @__PURE__ */ jsxRuntime.jsxs(
3405
+ "div",
3288
3406
  {
3289
- className: "inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-sm font-bold text-primary-foreground font-heading",
3290
- role: "presentation",
3291
- children: l.ctaButton
3407
+ style: {
3408
+ fontFamily: emailTokens.fontFamily,
3409
+ color: emailTokens.foreground,
3410
+ maxWidth: "600px",
3411
+ margin: "0 auto",
3412
+ padding: "24px"
3413
+ },
3414
+ className,
3415
+ children: [
3416
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginBottom: "32px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
3417
+ "img",
3418
+ {
3419
+ src: logoUrl,
3420
+ alt: "PlanetaEXO",
3421
+ style: { height: "56px", width: "auto" }
3422
+ }
3423
+ ) }),
3424
+ /* @__PURE__ */ jsxRuntime.jsx(
3425
+ "p",
3426
+ {
3427
+ style: {
3428
+ fontSize: "16px",
3429
+ lineHeight: "1.6",
3430
+ margin: "0 0 16px"
3431
+ },
3432
+ children: bodyMessage
3433
+ }
3434
+ ),
3435
+ /* @__PURE__ */ jsxRuntime.jsx(
3436
+ "p",
3437
+ {
3438
+ style: {
3439
+ color: emailTokens.mutedForeground,
3440
+ fontSize: "14px",
3441
+ lineHeight: "1.5",
3442
+ margin: "0"
3443
+ },
3444
+ children: expiryMessage
3445
+ }
3446
+ )
3447
+ ]
3292
3448
  }
3293
3449
  );
3450
+ }
3451
+ var DEFAULT_LOGO4 = "/logo-planetaexo.png";
3452
+ function TravellerFormInviteEmail({
3453
+ greeting,
3454
+ bodyIntro,
3455
+ bodyInstruction,
3456
+ links,
3457
+ ignoreNote,
3458
+ teamSignature,
3459
+ logoUrl = DEFAULT_LOGO4,
3460
+ buttonLabel = "Preencher formul\xE1rio",
3461
+ className
3462
+ }) {
3294
3463
  return /* @__PURE__ */ jsxRuntime.jsxs(
3295
3464
  "div",
3296
3465
  {
3297
- className: cn(
3298
- "max-w-xl mx-auto bg-white text-foreground font-sans text-base leading-relaxed",
3299
- className
3300
- ),
3466
+ style: {
3467
+ fontFamily: emailTokens.fontFamily,
3468
+ color: emailTokens.foreground,
3469
+ maxWidth: "600px",
3470
+ margin: "0 auto",
3471
+ padding: "24px"
3472
+ },
3473
+ className,
3301
3474
  children: [
3302
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 mb-8 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
3475
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginBottom: "32px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
3303
3476
  "img",
3304
3477
  {
3305
3478
  src: logoUrl,
3306
- alt: l.logoAlt,
3307
- className: "h-[70px] w-auto object-contain"
3479
+ alt: "PlanetaEXO",
3480
+ style: { height: "56px", width: "auto" }
3308
3481
  }
3309
3482
  ) }),
3310
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4", children: l.greeting(recipientName) }),
3311
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4", children: l.thankYouMessage }),
3312
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4", children: l.addTravellersInstruction }),
3313
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children: AddTravellersCta }),
3314
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border mb-8" }),
3315
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 font-heading font-bold text-foreground", children: l.summaryHeading }),
3316
- /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm mb-8", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { className: "divide-y divide-border", children: [
3317
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3318
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.bookingNumberLabel }),
3319
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 font-medium text-foreground", children: bookingNumber })
3320
- ] }),
3321
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3322
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.activityLabel }),
3323
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 font-medium text-foreground", children: activity })
3324
- ] }),
3325
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3326
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.adventureLabel }),
3327
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 font-medium text-foreground", children: adventure })
3328
- ] }),
3329
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3330
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.startingDateLabel }),
3331
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 font-medium text-foreground", children: startingDate })
3332
- ] }),
3333
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3334
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.numberOfPeopleLabel }),
3335
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 font-medium text-foreground", children: numberOfPeople })
3336
- ] }),
3337
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3338
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.hostLabel }),
3339
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-1 font-medium text-foreground", children: host })
3340
- ] })
3341
- ] }) }),
3342
- /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-border mb-8" }),
3343
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4", children: l.postCtaMessage }),
3344
- /* @__PURE__ */ jsxRuntime.jsx("p", { children: l.closingMessage })
3483
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px", lineHeight: "1.5", margin: "0 0 12px" }, children: greeting }),
3484
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 8px" }, children: bodyIntro }),
3485
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 20px" }, children: bodyInstruction }),
3486
+ /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 24px" }, children: links.map((link, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: { marginBottom: "12px" }, children: [
3487
+ /* @__PURE__ */ jsxRuntime.jsx(
3488
+ "span",
3489
+ {
3490
+ style: {
3491
+ display: "block",
3492
+ fontSize: "13px",
3493
+ color: emailTokens.mutedForeground,
3494
+ marginBottom: "4px"
3495
+ },
3496
+ children: link.adventureName
3497
+ }
3498
+ ),
3499
+ /* @__PURE__ */ jsxRuntime.jsx(
3500
+ "a",
3501
+ {
3502
+ href: link.url,
3503
+ style: {
3504
+ display: "inline-block",
3505
+ backgroundColor: emailTokens.primary,
3506
+ color: emailTokens.primaryForeground,
3507
+ fontSize: "14px",
3508
+ fontWeight: "600",
3509
+ textDecoration: "none",
3510
+ padding: "10px 20px",
3511
+ borderRadius: "6px"
3512
+ },
3513
+ children: buttonLabel
3514
+ }
3515
+ )
3516
+ ] }, i)) }),
3517
+ /* @__PURE__ */ jsxRuntime.jsx(
3518
+ "p",
3519
+ {
3520
+ style: {
3521
+ color: emailTokens.mutedForeground,
3522
+ fontSize: "13px",
3523
+ lineHeight: "1.5",
3524
+ margin: "0 0 16px"
3525
+ },
3526
+ children: ignoreNote
3527
+ }
3528
+ ),
3529
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", lineHeight: "1.5", margin: "0" }, children: teamSignature })
3345
3530
  ]
3346
3531
  }
3347
3532
  );
@@ -8048,6 +8233,7 @@ exports.BookingConfirmationEmail = BookingConfirmationEmail;
8048
8233
  exports.BookingConfirmedCard = BookingConfirmedCard;
8049
8234
  exports.BookingDetails = BookingDetails;
8050
8235
  exports.BookingForm = BookingForm;
8236
+ exports.BookingOtpEmail = BookingOtpEmail;
8051
8237
  exports.BookingShell = BookingShell;
8052
8238
  exports.Button = Button;
8053
8239
  exports.COUNTRIES = COUNTRIES;
@@ -8075,11 +8261,13 @@ exports.RegistrationSuccessCard = RegistrationSuccessCard;
8075
8261
  exports.SiteHeader = SiteHeader;
8076
8262
  exports.TermsSection = TermsSection;
8077
8263
  exports.ThemeToggle = ThemeToggle;
8264
+ exports.TravellerFormInviteEmail = TravellerFormInviteEmail;
8078
8265
  exports.TripCard = TripCard;
8079
8266
  exports.TripHeader = TripHeader;
8080
8267
  exports.TripPage = TripPage;
8081
8268
  exports.buttonVariants = buttonVariants;
8082
8269
  exports.cn = cn;
8270
+ exports.emailTokens = emailTokens;
8083
8271
  exports.getStripeAppearance = getStripeAppearance;
8084
8272
  exports.stripeAppearance = stripeAppearance;
8085
8273
  //# sourceMappingURL=index.cjs.map