@planetaexo/design-system 0.4.1 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +160 -181
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +8 -3
  4. package/dist/index.d.ts +8 -3
  5. package/dist/index.js +160 -182
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -2921,9 +2921,40 @@ var emailTokens = {
2921
2921
  greenBg: "#f0fdf4",
2922
2922
  /** Red-600 — destructive / not-included icon */
2923
2923
  destructive: "#dc2626",
2924
- /** Web-safe font stack used in all email components */
2925
- fontFamily: "Arial, Helvetica, sans-serif"
2924
+ /**
2925
+ * Font stack — DM Sans (the DS brand font) with modern system-font
2926
+ * fallbacks. Clients that load Google Fonts (Apple Mail, Gmail web,
2927
+ * Outlook Mac) will render DM Sans; others fall back gracefully.
2928
+ */
2929
+ fontFamily: "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
2926
2930
  };
2931
+ var DM_SANS_URL = "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap";
2932
+ function wrapEmailHtml(content) {
2933
+ return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2934
+ <html xmlns="http://www.w3.org/1999/xhtml" lang="pt">
2935
+ <head>
2936
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
2937
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2938
+ <meta name="color-scheme" content="light dark" />
2939
+ <meta name="supported-color-schemes" content="light dark" />
2940
+ <!--[if !mso]><!-->
2941
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
2942
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
2943
+ <link href="${DM_SANS_URL}" rel="stylesheet" type="text/css" />
2944
+ <!--<![endif]-->
2945
+ </head>
2946
+ <body style="margin:0;padding:16px;background-color:#ffffff;">
2947
+ <!--[if !mso]><!-->
2948
+ <style type="text/css">
2949
+ @media (prefers-color-scheme: dark) {
2950
+ body { background-color: #111827 !important; }
2951
+ }
2952
+ </style>
2953
+ <!--<![endif]-->
2954
+ ${content}
2955
+ </body>
2956
+ </html>`;
2957
+ }
2927
2958
  var DEFAULT_LABELS = {
2928
2959
  ctaButton: "View booking details",
2929
2960
  logoAlt: "PlanetaEXO",
@@ -3002,7 +3033,10 @@ function BookingConfirmation({
3002
3033
  color: emailTokens.foreground,
3003
3034
  fontFamily: emailTokens.fontFamily,
3004
3035
  fontSize: "16px",
3005
- lineHeight: "1.6"
3036
+ lineHeight: "1.6",
3037
+ border: `1px solid ${emailTokens.border}`,
3038
+ borderRadius: "12px",
3039
+ overflow: "hidden"
3006
3040
  },
3007
3041
  className,
3008
3042
  children: [
@@ -3015,35 +3049,34 @@ function BookingConfirmation({
3015
3049
  }
3016
3050
  ) }),
3017
3051
  /* @__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 }),
3052
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.greeting(recipientName) }),
3053
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.confirmationMessage }),
3054
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "32px", marginTop: 0, fontSize: "16px" }, children: l.detailsIntro }),
3021
3055
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
3022
3056
  ] }),
3023
3057
  /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3024
3058
  /* @__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",
3059
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
3060
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: i < l.nextSteps.length - 1 ? "16px" : "0" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3061
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", width: "32px", paddingRight: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
3062
+ display: "inline-block",
3029
3063
  height: "24px",
3030
3064
  width: "24px",
3031
- flexShrink: 0,
3032
- alignItems: "center",
3033
- justifyContent: "center",
3065
+ lineHeight: "24px",
3066
+ textAlign: "center",
3034
3067
  borderRadius: "9999px",
3035
3068
  backgroundColor: emailTokens.primaryLight,
3036
3069
  fontSize: "12px",
3037
3070
  fontWeight: "700",
3038
3071
  color: emailTokens.primary,
3039
3072
  marginTop: "2px"
3040
- }, children: i + 1 }),
3041
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step })
3042
- ] }, i)) })
3073
+ }, children: i + 1 }) }),
3074
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top" }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step }) })
3075
+ ] }) }) }, i)) })
3043
3076
  ] }),
3044
3077
  /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3045
3078
  /* @__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 }),
3079
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
3047
3080
  /* @__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
3081
  /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3049
3082
  /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.bookingNumberLabel }),
@@ -3064,23 +3097,29 @@ function BookingConfirmation({
3064
3097
  ] }) }) })
3065
3098
  ] }),
3066
3099
  /* @__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) => {
3100
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: adventures.map((adventure, adIdx) => {
3068
3101
  var _a;
3069
3102
  return /* @__PURE__ */ jsxRuntime.jsxs(
3070
3103
  "div",
3071
3104
  {
3072
- style: { borderRadius: "16px", border: `1px solid ${emailTokens.border}`, backgroundColor: emailTokens.white, overflow: "hidden" },
3105
+ style: {
3106
+ borderRadius: "16px",
3107
+ border: `1px solid ${emailTokens.border}`,
3108
+ backgroundColor: emailTokens.white,
3109
+ overflow: "hidden",
3110
+ marginBottom: adIdx < adventures.length - 1 ? "24px" : "0"
3111
+ },
3073
3112
  children: [
3074
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "16/7", overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsxRuntime.jsx(
3113
+ adventure.image && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsxRuntime.jsx(
3075
3114
  "img",
3076
3115
  {
3077
3116
  src: adventure.image,
3078
3117
  alt: (_a = adventure.imageAlt) != null ? _a : adventure.title,
3079
- style: { width: "100%", height: "100%", objectFit: "cover" }
3118
+ style: { width: "100%", height: "auto", display: "block" }
3080
3119
  }
3081
3120
  ) }),
3082
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px", display: "flex", flexDirection: "column", gap: "10px" }, children: [
3083
- adventure.reference && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
3121
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px" }, children: [
3122
+ adventure.reference && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
3084
3123
  display: "inline-block",
3085
3124
  backgroundColor: emailTokens.primaryLight,
3086
3125
  color: emailTokens.primary,
@@ -3088,142 +3127,96 @@ function BookingConfirmation({
3088
3127
  borderRadius: "6px",
3089
3128
  fontSize: "12px",
3090
3129
  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: [
3130
+ letterSpacing: "0.05em"
3131
+ }, children: adventure.reference }) }),
3132
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "20px", fontWeight: "700", color: emailTokens.foreground, lineHeight: "1.3", margin: "0 0 10px 0" }, children: adventure.title }),
3133
+ /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3134
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3097
3135
  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
3098
3136
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
3099
3137
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
3100
3138
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })
3101
- ] }),
3102
- adventure.dateFrom,
3103
- " \u2192 ",
3104
- adventure.dateTo
3105
- ] }),
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: [
3139
+ ] }) }),
3140
+ /* @__PURE__ */ jsxRuntime.jsxs("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: [
3141
+ adventure.dateFrom,
3142
+ " \u2192 ",
3143
+ adventure.dateTo
3144
+ ] })
3145
+ ] }) }) }),
3146
+ adventure.location && /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3147
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3108
3148
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
3109
3149
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "3" })
3110
- ] }),
3111
- adventure.location
3112
- ] }),
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: [
3150
+ ] }) }),
3151
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: adventure.location })
3152
+ ] }) }) }),
3153
+ adventure.slots && /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3154
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3115
3155
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
3116
3156
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
3117
3157
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
3118
3158
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
3119
- ] }),
3120
- [
3159
+ ] }) }),
3160
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: [
3121
3161
  adventure.slots.adults ? `${adventure.slots.adults} ${l.adultsUnit}` : null,
3122
3162
  adventure.slots.children ? `${adventure.slots.children} ${l.childrenUnit}` : null
3123
- ].filter(Boolean).join(" \xB7 ")
3124
- ] }),
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: [
3163
+ ].filter(Boolean).join(" \xB7 ") })
3164
+ ] }) }) }),
3165
+ adventure.partner && /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3166
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3127
3167
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
3128
3168
  /* @__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" })
3129
- ] }),
3130
- adventure.partner
3169
+ ] }) }),
3170
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: adventure.partner })
3171
+ ] }) }) }),
3172
+ adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
3173
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
3174
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.travellersLabel }),
3175
+ adventure.travellers.map((traveller) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3176
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle" }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: emailTokens.foreground }, children: [
3177
+ traveller.firstName,
3178
+ " ",
3179
+ traveller.lastName
3180
+ ] }) }),
3181
+ traveller.isChild && /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", textAlign: "right" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "10px", fontWeight: "600", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted, borderRadius: "9999px", padding: "2px 8px", textTransform: "uppercase", letterSpacing: "0.05em" }, children: l.childBadge }) })
3182
+ ] }) }) }, traveller.id))
3131
3183
  ] }),
3132
- adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3133
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
3134
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
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(
3137
- "div",
3138
- {
3139
- style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
3140
- children: [
3141
- /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: emailTokens.foreground }, children: [
3142
- traveller.firstName,
3143
- " ",
3144
- traveller.lastName
3145
- ] }),
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 })
3147
- ]
3148
- },
3149
- traveller.id
3150
- )) })
3151
- ] })
3184
+ adventure.description && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
3185
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
3186
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.itineraryLabel }),
3187
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: adventure.description })
3152
3188
  ] }),
3153
- adventure.description && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3154
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
3155
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
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 })
3158
- ] })
3189
+ adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "10px" }, children: [
3190
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: "0 0 8px 0" }, children: l.includedLabel }),
3191
+ adventure.included.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3192
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { display: "block", width: "16px", height: "16px", color: emailTokens.primary, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
3193
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
3194
+ ] }) }) }, i))
3159
3195
  ] }),
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(
3163
- "li",
3164
- {
3165
- style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
3166
- children: [
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" }) }),
3168
- item
3169
- ]
3170
- },
3171
- i
3172
- )) })
3196
+ adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "10px" }, children: [
3197
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: "0 0 8px 0" }, children: l.notIncludedLabel }),
3198
+ adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3199
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { display: "block", width: "16px", height: "16px", color: emailTokens.destructive, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
3200
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
3201
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
3202
+ ] }) }),
3203
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
3204
+ ] }) }) }, i))
3173
3205
  ] }),
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(
3177
- "li",
3178
- {
3179
- style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
3180
- 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: [
3182
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
3183
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
3184
- ] }),
3185
- item
3186
- ]
3187
- },
3188
- i
3189
- )) })
3190
- ] }),
3191
- adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3192
- /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
3193
- /* @__PURE__ */ jsxRuntime.jsxs("div", { 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: [
3196
- adventure.lineItems.map((item, j) => /* @__PURE__ */ jsxRuntime.jsxs(
3197
- "div",
3198
- {
3199
- style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
3200
- children: [
3201
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", color: emailTokens.mutedForeground }, children: item.label }),
3202
- /* @__PURE__ */ jsxRuntime.jsxs(
3203
- "span",
3204
- {
3205
- style: {
3206
- fontSize: "14px",
3207
- fontWeight: "500",
3208
- whiteSpace: "nowrap",
3209
- color: item.isDiscount ? emailTokens.green : emailTokens.foreground
3210
- },
3211
- children: [
3212
- item.isDiscount ? "\u2212" : "",
3213
- item.price
3214
- ]
3215
- }
3216
- )
3217
- ]
3218
- },
3219
- j
3220
- )),
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 })
3224
- ] })
3206
+ adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
3207
+ /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
3208
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.pricingLabel }),
3209
+ adventure.lineItems.map((item, j) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3210
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground }, children: item.label }),
3211
+ /* @__PURE__ */ jsxRuntime.jsxs("td", { style: { verticalAlign: "middle", textAlign: "right", fontSize: "14px", fontWeight: "500", whiteSpace: "nowrap", color: item.isDiscount ? emailTokens.green : emailTokens.foreground }, children: [
3212
+ item.isDiscount ? "\u2212" : "",
3213
+ item.price
3225
3214
  ] })
3226
- ] })
3215
+ ] }) }) }, j)),
3216
+ adventure.subtotal && /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", paddingTop: "8px", marginTop: "4px", borderTop: `1px solid ${emailTokens.border}` }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
3217
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", fontWeight: "700", color: emailTokens.foreground }, children: l.subtotalLabel }),
3218
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "middle", textAlign: "right", fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: adventure.subtotal })
3219
+ ] }) }) })
3227
3220
  ] })
3228
3221
  ] })
3229
3222
  ]
@@ -3233,26 +3226,14 @@ function BookingConfirmation({
3233
3226
  }) }),
3234
3227
  /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3235
3228
  /* @__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 }),
3229
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.paymentSummaryHeading }),
3237
3230
  /* @__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
3231
  summaryLineItems && summaryLineItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3239
3232
  /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: item.label }),
3240
- /* @__PURE__ */ jsxRuntime.jsxs(
3241
- "td",
3242
- {
3243
- style: {
3244
- padding: "10px 16px",
3245
- textAlign: "right",
3246
- fontWeight: "500",
3247
- whiteSpace: "nowrap",
3248
- color: item.isDiscount ? emailTokens.green : emailTokens.foreground
3249
- },
3250
- children: [
3251
- item.isDiscount ? "\u2212" : "",
3252
- item.price
3253
- ]
3254
- }
3255
- )
3233
+ /* @__PURE__ */ jsxRuntime.jsxs("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", whiteSpace: "nowrap", color: item.isDiscount ? emailTokens.green : emailTokens.foreground }, children: [
3234
+ item.isDiscount ? "\u2212" : "",
3235
+ item.price
3236
+ ] })
3256
3237
  ] }, i)),
3257
3238
  subtotal && /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
3258
3239
  /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.subtotalLabel }),
@@ -3274,31 +3255,18 @@ function BookingConfirmation({
3274
3255
  /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.remainingBalanceLabel }),
3275
3256
  /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.remainingAmount })
3276
3257
  ] }),
3277
- /* @__PURE__ */ jsxRuntime.jsxs(
3278
- "tr",
3279
- {
3280
- style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
3281
- children: [
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 })
3284
- ]
3285
- }
3286
- ),
3287
- depositInfo.isPaidInFull && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
3288
- "td",
3289
- {
3290
- colSpan: 2,
3291
- style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: emailTokens.green, backgroundColor: emailTokens.greenBg },
3292
- children: l.paidInFullLabel
3293
- }
3294
- ) })
3258
+ /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {}, children: [
3259
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.balanceDueLabel }),
3260
+ /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.balanceDueDate })
3261
+ ] }),
3262
+ depositInfo.isPaidInFull && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 2, style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: emailTokens.green, backgroundColor: emailTokens.greenBg }, children: l.paidInFullLabel }) })
3295
3263
  ] }) })
3296
3264
  ] })
3297
3265
  ] }),
3298
3266
  /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
3299
3267
  /* @__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) })
3268
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
3269
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: 0, fontSize: "16px" }, children: l.footerContact(agent) })
3302
3270
  ] })
3303
3271
  ]
3304
3272
  }
@@ -3365,11 +3333,15 @@ function BookingConfirmationEmail({
3365
3333
  color: emailTokens.foreground,
3366
3334
  fontFamily: emailTokens.fontFamily,
3367
3335
  fontSize: "16px",
3368
- lineHeight: "1.6"
3336
+ lineHeight: "1.6",
3337
+ border: `1px solid ${emailTokens.border}`,
3338
+ borderRadius: "12px",
3339
+ overflow: "hidden",
3340
+ padding: "32px"
3369
3341
  },
3370
3342
  className,
3371
3343
  children: [
3372
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "32px", marginBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
3344
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "0", marginBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
3373
3345
  "img",
3374
3346
  {
3375
3347
  src: logoUrl,
@@ -3409,7 +3381,10 @@ function BookingOtpEmail({
3409
3381
  color: emailTokens.foreground,
3410
3382
  maxWidth: "600px",
3411
3383
  margin: "0 auto",
3412
- padding: "24px"
3384
+ padding: "32px",
3385
+ border: `1px solid ${emailTokens.border}`,
3386
+ borderRadius: "12px",
3387
+ backgroundColor: emailTokens.white
3413
3388
  },
3414
3389
  className,
3415
3390
  children: [
@@ -3468,7 +3443,10 @@ function TravellerFormInviteEmail({
3468
3443
  color: emailTokens.foreground,
3469
3444
  maxWidth: "600px",
3470
3445
  margin: "0 auto",
3471
- padding: "24px"
3446
+ padding: "32px",
3447
+ border: `1px solid ${emailTokens.border}`,
3448
+ borderRadius: "12px",
3449
+ backgroundColor: emailTokens.white
3472
3450
  },
3473
3451
  className,
3474
3452
  children: [
@@ -8270,5 +8248,6 @@ exports.cn = cn;
8270
8248
  exports.emailTokens = emailTokens;
8271
8249
  exports.getStripeAppearance = getStripeAppearance;
8272
8250
  exports.stripeAppearance = stripeAppearance;
8251
+ exports.wrapEmailHtml = wrapEmailHtml;
8273
8252
  //# sourceMappingURL=index.cjs.map
8274
8253
  //# sourceMappingURL=index.cjs.map