@planetaexo/design-system 0.4.0 → 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 +141 -110
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +40 -1
- package/dist/index.d.ts +40 -1
- package/dist/index.js +141 -111
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
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",
|
|
@@ -2952,14 +2982,14 @@ function BookingConfirmation({
|
|
|
2952
2982
|
});
|
|
2953
2983
|
const ctaStyle = {
|
|
2954
2984
|
display: "inline-block",
|
|
2955
|
-
backgroundColor:
|
|
2956
|
-
color:
|
|
2985
|
+
backgroundColor: emailTokens.primary,
|
|
2986
|
+
color: emailTokens.primaryForeground,
|
|
2957
2987
|
padding: "14px 32px",
|
|
2958
2988
|
borderRadius: "8px",
|
|
2959
2989
|
fontSize: "14px",
|
|
2960
2990
|
fontWeight: "700",
|
|
2961
2991
|
textDecoration: "none",
|
|
2962
|
-
fontFamily:
|
|
2992
|
+
fontFamily: emailTokens.fontFamily
|
|
2963
2993
|
};
|
|
2964
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 });
|
|
2965
2995
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -2968,9 +2998,9 @@ function BookingConfirmation({
|
|
|
2968
2998
|
style: {
|
|
2969
2999
|
maxWidth: "576px",
|
|
2970
3000
|
margin: "0 auto",
|
|
2971
|
-
backgroundColor:
|
|
2972
|
-
color:
|
|
2973
|
-
fontFamily:
|
|
3001
|
+
backgroundColor: emailTokens.white,
|
|
3002
|
+
color: emailTokens.foreground,
|
|
3003
|
+
fontFamily: emailTokens.fontFamily,
|
|
2974
3004
|
fontSize: "16px",
|
|
2975
3005
|
lineHeight: "1.6"
|
|
2976
3006
|
},
|
|
@@ -2990,10 +3020,10 @@ function BookingConfirmation({
|
|
|
2990
3020
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "32px", fontSize: "16px" }, children: l.detailsIntro }),
|
|
2991
3021
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
|
|
2992
3022
|
] }),
|
|
2993
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3023
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
|
|
2994
3024
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
|
|
2995
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color:
|
|
2996
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border:
|
|
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: [
|
|
2997
3027
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: {
|
|
2998
3028
|
display: "flex",
|
|
2999
3029
|
height: "24px",
|
|
@@ -3002,46 +3032,46 @@ function BookingConfirmation({
|
|
|
3002
3032
|
alignItems: "center",
|
|
3003
3033
|
justifyContent: "center",
|
|
3004
3034
|
borderRadius: "9999px",
|
|
3005
|
-
backgroundColor:
|
|
3035
|
+
backgroundColor: emailTokens.primaryLight,
|
|
3006
3036
|
fontSize: "12px",
|
|
3007
3037
|
fontWeight: "700",
|
|
3008
|
-
color:
|
|
3038
|
+
color: emailTokens.primary,
|
|
3009
3039
|
marginTop: "2px"
|
|
3010
3040
|
}, children: i + 1 }),
|
|
3011
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color:
|
|
3041
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step })
|
|
3012
3042
|
] }, i)) })
|
|
3013
3043
|
] }),
|
|
3014
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3044
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
|
|
3015
3045
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
|
|
3016
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color:
|
|
3017
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border:
|
|
3018
|
-
/* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom:
|
|
3019
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color:
|
|
3020
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "600", color:
|
|
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 })
|
|
3021
3051
|
] }),
|
|
3022
|
-
/* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom:
|
|
3023
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color:
|
|
3024
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color:
|
|
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 })
|
|
3025
3055
|
] }),
|
|
3026
|
-
/* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom:
|
|
3027
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color:
|
|
3028
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color:
|
|
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 })
|
|
3029
3059
|
] }),
|
|
3030
3060
|
/* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
3031
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color:
|
|
3032
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color:
|
|
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 })
|
|
3033
3063
|
] })
|
|
3034
3064
|
] }) }) })
|
|
3035
3065
|
] }),
|
|
3036
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3066
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
|
|
3037
3067
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px", display: "flex", flexDirection: "column", gap: "24px" }, children: adventures.map((adventure) => {
|
|
3038
3068
|
var _a;
|
|
3039
3069
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3040
3070
|
"div",
|
|
3041
3071
|
{
|
|
3042
|
-
style: { borderRadius: "16px", border:
|
|
3072
|
+
style: { borderRadius: "16px", border: `1px solid ${emailTokens.border}`, backgroundColor: emailTokens.white, overflow: "hidden" },
|
|
3043
3073
|
children: [
|
|
3044
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "16/7", overflow: "hidden", backgroundColor:
|
|
3074
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "16/7", overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3045
3075
|
"img",
|
|
3046
3076
|
{
|
|
3047
3077
|
src: adventure.image,
|
|
@@ -3052,8 +3082,8 @@ function BookingConfirmation({
|
|
|
3052
3082
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px", display: "flex", flexDirection: "column", gap: "10px" }, children: [
|
|
3053
3083
|
adventure.reference && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
|
|
3054
3084
|
display: "inline-block",
|
|
3055
|
-
backgroundColor:
|
|
3056
|
-
color:
|
|
3085
|
+
backgroundColor: emailTokens.primaryLight,
|
|
3086
|
+
color: emailTokens.primary,
|
|
3057
3087
|
padding: "2px 8px",
|
|
3058
3088
|
borderRadius: "6px",
|
|
3059
3089
|
fontSize: "12px",
|
|
@@ -3061,9 +3091,9 @@ function BookingConfirmation({
|
|
|
3061
3091
|
letterSpacing: "0.05em",
|
|
3062
3092
|
alignSelf: "flex-start"
|
|
3063
3093
|
}, children: adventure.reference }),
|
|
3064
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "20px", fontWeight: "700", color:
|
|
3065
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color:
|
|
3066
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "14px", height: "14px", color:
|
|
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: [
|
|
3067
3097
|
/* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
|
|
3068
3098
|
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
|
|
3069
3099
|
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
|
|
@@ -3073,15 +3103,15 @@ function BookingConfirmation({
|
|
|
3073
3103
|
" \u2192 ",
|
|
3074
3104
|
adventure.dateTo
|
|
3075
3105
|
] }),
|
|
3076
|
-
adventure.location && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color:
|
|
3077
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "14px", height: "14px", color:
|
|
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: [
|
|
3078
3108
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
|
|
3079
3109
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "3" })
|
|
3080
3110
|
] }),
|
|
3081
3111
|
adventure.location
|
|
3082
3112
|
] }),
|
|
3083
|
-
adventure.slots && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color:
|
|
3084
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "14px", height: "14px", color:
|
|
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: [
|
|
3085
3115
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
|
|
3086
3116
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
|
|
3087
3117
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
|
|
@@ -3092,49 +3122,49 @@ function BookingConfirmation({
|
|
|
3092
3122
|
adventure.slots.children ? `${adventure.slots.children} ${l.childrenUnit}` : null
|
|
3093
3123
|
].filter(Boolean).join(" \xB7 ")
|
|
3094
3124
|
] }),
|
|
3095
|
-
adventure.partner && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color:
|
|
3096
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "14px", height: "14px", color:
|
|
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: [
|
|
3097
3127
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
3098
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" })
|
|
3099
3129
|
] }),
|
|
3100
3130
|
adventure.partner
|
|
3101
3131
|
] }),
|
|
3102
3132
|
adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3103
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3133
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
|
|
3104
3134
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3105
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color:
|
|
3106
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: adventure.travellers.map((
|
|
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(
|
|
3107
3137
|
"div",
|
|
3108
3138
|
{
|
|
3109
3139
|
style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
|
|
3110
3140
|
children: [
|
|
3111
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color:
|
|
3112
|
-
|
|
3141
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: emailTokens.foreground }, children: [
|
|
3142
|
+
traveller.firstName,
|
|
3113
3143
|
" ",
|
|
3114
|
-
|
|
3144
|
+
traveller.lastName
|
|
3115
3145
|
] }),
|
|
3116
|
-
|
|
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 })
|
|
3117
3147
|
]
|
|
3118
3148
|
},
|
|
3119
|
-
|
|
3149
|
+
traveller.id
|
|
3120
3150
|
)) })
|
|
3121
3151
|
] })
|
|
3122
3152
|
] }),
|
|
3123
3153
|
adventure.description && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3124
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3154
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
|
|
3125
3155
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3126
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color:
|
|
3127
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color:
|
|
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 })
|
|
3128
3158
|
] })
|
|
3129
3159
|
] }),
|
|
3130
3160
|
adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
|
|
3131
|
-
/* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color:
|
|
3161
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: 0 }, children: l.includedLabel }),
|
|
3132
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(
|
|
3133
3163
|
"li",
|
|
3134
3164
|
{
|
|
3135
|
-
style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color:
|
|
3165
|
+
style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
|
|
3136
3166
|
children: [
|
|
3137
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { style: { width: "16px", height: "16px", color:
|
|
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" }) }),
|
|
3138
3168
|
item
|
|
3139
3169
|
]
|
|
3140
3170
|
},
|
|
@@ -3142,13 +3172,13 @@ function BookingConfirmation({
|
|
|
3142
3172
|
)) })
|
|
3143
3173
|
] }),
|
|
3144
3174
|
adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
|
|
3145
|
-
/* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color:
|
|
3175
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: 0 }, children: l.notIncludedLabel }),
|
|
3146
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(
|
|
3147
3177
|
"li",
|
|
3148
3178
|
{
|
|
3149
|
-
style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color:
|
|
3179
|
+
style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
|
|
3150
3180
|
children: [
|
|
3151
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "16px", height: "16px", color:
|
|
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: [
|
|
3152
3182
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
|
|
3153
3183
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
|
|
3154
3184
|
] }),
|
|
@@ -3159,16 +3189,16 @@ function BookingConfirmation({
|
|
|
3159
3189
|
)) })
|
|
3160
3190
|
] }),
|
|
3161
3191
|
adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3162
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3192
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
|
|
3163
3193
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3164
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "10px", fontWeight: "700", color:
|
|
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 }),
|
|
3165
3195
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
|
|
3166
3196
|
adventure.lineItems.map((item, j) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3167
3197
|
"div",
|
|
3168
3198
|
{
|
|
3169
3199
|
style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
|
|
3170
3200
|
children: [
|
|
3171
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", color:
|
|
3201
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", color: emailTokens.mutedForeground }, children: item.label }),
|
|
3172
3202
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3173
3203
|
"span",
|
|
3174
3204
|
{
|
|
@@ -3176,7 +3206,7 @@ function BookingConfirmation({
|
|
|
3176
3206
|
fontSize: "14px",
|
|
3177
3207
|
fontWeight: "500",
|
|
3178
3208
|
whiteSpace: "nowrap",
|
|
3179
|
-
color: item.isDiscount ?
|
|
3209
|
+
color: item.isDiscount ? emailTokens.green : emailTokens.foreground
|
|
3180
3210
|
},
|
|
3181
3211
|
children: [
|
|
3182
3212
|
item.isDiscount ? "\u2212" : "",
|
|
@@ -3188,9 +3218,9 @@ function BookingConfirmation({
|
|
|
3188
3218
|
},
|
|
3189
3219
|
j
|
|
3190
3220
|
)),
|
|
3191
|
-
adventure.subtotal && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: "8px", marginTop: "4px", borderTop:
|
|
3192
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: "700", color:
|
|
3193
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: "700", color:
|
|
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 })
|
|
3194
3224
|
] })
|
|
3195
3225
|
] })
|
|
3196
3226
|
] })
|
|
@@ -3201,12 +3231,12 @@ function BookingConfirmation({
|
|
|
3201
3231
|
adventure.id
|
|
3202
3232
|
);
|
|
3203
3233
|
}) }),
|
|
3204
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3234
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
|
|
3205
3235
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
|
|
3206
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color:
|
|
3207
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border:
|
|
3208
|
-
summaryLineItems && summaryLineItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom:
|
|
3209
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color:
|
|
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 }),
|
|
3210
3240
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3211
3241
|
"td",
|
|
3212
3242
|
{
|
|
@@ -3215,7 +3245,7 @@ function BookingConfirmation({
|
|
|
3215
3245
|
textAlign: "right",
|
|
3216
3246
|
fontWeight: "500",
|
|
3217
3247
|
whiteSpace: "nowrap",
|
|
3218
|
-
color: item.isDiscount ?
|
|
3248
|
+
color: item.isDiscount ? emailTokens.green : emailTokens.foreground
|
|
3219
3249
|
},
|
|
3220
3250
|
children: [
|
|
3221
3251
|
item.isDiscount ? "\u2212" : "",
|
|
@@ -3224,33 +3254,33 @@ function BookingConfirmation({
|
|
|
3224
3254
|
}
|
|
3225
3255
|
)
|
|
3226
3256
|
] }, i)),
|
|
3227
|
-
subtotal && /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom:
|
|
3228
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color:
|
|
3229
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color:
|
|
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 })
|
|
3230
3260
|
] }),
|
|
3231
|
-
/* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { backgroundColor:
|
|
3232
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "16px", fontWeight: "700", color:
|
|
3233
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "16px", textAlign: "right", fontWeight: "700", color:
|
|
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 })
|
|
3234
3264
|
] })
|
|
3235
3265
|
] }) }) }),
|
|
3236
|
-
depositInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderRadius: "12px", border:
|
|
3237
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 16px", backgroundColor:
|
|
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 }) }),
|
|
3238
3268
|
/* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
|
|
3239
|
-
/* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom:
|
|
3240
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color:
|
|
3241
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color:
|
|
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 })
|
|
3242
3272
|
] }),
|
|
3243
|
-
/* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom:
|
|
3244
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color:
|
|
3245
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color:
|
|
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 })
|
|
3246
3276
|
] }),
|
|
3247
3277
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3248
3278
|
"tr",
|
|
3249
3279
|
{
|
|
3250
|
-
style: depositInfo.isPaidInFull ? { borderBottom:
|
|
3280
|
+
style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
|
|
3251
3281
|
children: [
|
|
3252
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color:
|
|
3253
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color:
|
|
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 })
|
|
3254
3284
|
]
|
|
3255
3285
|
}
|
|
3256
3286
|
),
|
|
@@ -3258,14 +3288,14 @@ function BookingConfirmation({
|
|
|
3258
3288
|
"td",
|
|
3259
3289
|
{
|
|
3260
3290
|
colSpan: 2,
|
|
3261
|
-
style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color:
|
|
3291
|
+
style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: emailTokens.green, backgroundColor: emailTokens.greenBg },
|
|
3262
3292
|
children: l.paidInFullLabel
|
|
3263
3293
|
}
|
|
3264
3294
|
) })
|
|
3265
3295
|
] }) })
|
|
3266
3296
|
] })
|
|
3267
3297
|
] }),
|
|
3268
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3298
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
|
|
3269
3299
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: [
|
|
3270
3300
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
|
|
3271
3301
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px" }, children: l.footerContact(agent) })
|
|
@@ -3307,14 +3337,14 @@ function BookingConfirmationEmail({
|
|
|
3307
3337
|
const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS2), labels);
|
|
3308
3338
|
const ctaStyle = {
|
|
3309
3339
|
display: "inline-block",
|
|
3310
|
-
backgroundColor:
|
|
3311
|
-
color:
|
|
3340
|
+
backgroundColor: emailTokens.primary,
|
|
3341
|
+
color: emailTokens.primaryForeground,
|
|
3312
3342
|
padding: "12px 24px",
|
|
3313
3343
|
borderRadius: "8px",
|
|
3314
3344
|
fontSize: "14px",
|
|
3315
3345
|
fontWeight: "700",
|
|
3316
3346
|
textDecoration: "none",
|
|
3317
|
-
fontFamily:
|
|
3347
|
+
fontFamily: emailTokens.fontFamily
|
|
3318
3348
|
};
|
|
3319
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 });
|
|
3320
3350
|
const tableRows = [
|
|
@@ -3331,9 +3361,9 @@ function BookingConfirmationEmail({
|
|
|
3331
3361
|
style: {
|
|
3332
3362
|
maxWidth: "576px",
|
|
3333
3363
|
margin: "0 auto",
|
|
3334
|
-
backgroundColor:
|
|
3335
|
-
color:
|
|
3336
|
-
fontFamily:
|
|
3364
|
+
backgroundColor: emailTokens.white,
|
|
3365
|
+
color: emailTokens.foreground,
|
|
3366
|
+
fontFamily: emailTokens.fontFamily,
|
|
3337
3367
|
fontSize: "16px",
|
|
3338
3368
|
lineHeight: "1.6"
|
|
3339
3369
|
},
|
|
@@ -3351,13 +3381,13 @@ function BookingConfirmationEmail({
|
|
|
3351
3381
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.thankYouMessage }),
|
|
3352
3382
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.addTravellersInstruction }),
|
|
3353
3383
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "32px" }, children: AddTravellersCta }),
|
|
3354
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3355
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontWeight: "700", color:
|
|
3356
|
-
/* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", marginBottom: "32px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: i > 0 ? { borderTop:
|
|
3357
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 16px 4px 0", color:
|
|
3358
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 0", fontWeight: "500", color:
|
|
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 })
|
|
3359
3389
|
] }, i)) }) }),
|
|
3360
|
-
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop:
|
|
3390
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "32px" } }),
|
|
3361
3391
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.postCtaMessage }),
|
|
3362
3392
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: l.closingMessage })
|
|
3363
3393
|
]
|
|
@@ -3375,8 +3405,8 @@ function BookingOtpEmail({
|
|
|
3375
3405
|
"div",
|
|
3376
3406
|
{
|
|
3377
3407
|
style: {
|
|
3378
|
-
fontFamily:
|
|
3379
|
-
color:
|
|
3408
|
+
fontFamily: emailTokens.fontFamily,
|
|
3409
|
+
color: emailTokens.foreground,
|
|
3380
3410
|
maxWidth: "600px",
|
|
3381
3411
|
margin: "0 auto",
|
|
3382
3412
|
padding: "24px"
|
|
@@ -3406,7 +3436,7 @@ function BookingOtpEmail({
|
|
|
3406
3436
|
"p",
|
|
3407
3437
|
{
|
|
3408
3438
|
style: {
|
|
3409
|
-
color:
|
|
3439
|
+
color: emailTokens.mutedForeground,
|
|
3410
3440
|
fontSize: "14px",
|
|
3411
3441
|
lineHeight: "1.5",
|
|
3412
3442
|
margin: "0"
|
|
@@ -3434,8 +3464,8 @@ function TravellerFormInviteEmail({
|
|
|
3434
3464
|
"div",
|
|
3435
3465
|
{
|
|
3436
3466
|
style: {
|
|
3437
|
-
fontFamily:
|
|
3438
|
-
color:
|
|
3467
|
+
fontFamily: emailTokens.fontFamily,
|
|
3468
|
+
color: emailTokens.foreground,
|
|
3439
3469
|
maxWidth: "600px",
|
|
3440
3470
|
margin: "0 auto",
|
|
3441
3471
|
padding: "24px"
|
|
@@ -3460,7 +3490,7 @@ function TravellerFormInviteEmail({
|
|
|
3460
3490
|
style: {
|
|
3461
3491
|
display: "block",
|
|
3462
3492
|
fontSize: "13px",
|
|
3463
|
-
color:
|
|
3493
|
+
color: emailTokens.mutedForeground,
|
|
3464
3494
|
marginBottom: "4px"
|
|
3465
3495
|
},
|
|
3466
3496
|
children: link.adventureName
|
|
@@ -3472,8 +3502,8 @@ function TravellerFormInviteEmail({
|
|
|
3472
3502
|
href: link.url,
|
|
3473
3503
|
style: {
|
|
3474
3504
|
display: "inline-block",
|
|
3475
|
-
backgroundColor:
|
|
3476
|
-
color:
|
|
3505
|
+
backgroundColor: emailTokens.primary,
|
|
3506
|
+
color: emailTokens.primaryForeground,
|
|
3477
3507
|
fontSize: "14px",
|
|
3478
3508
|
fontWeight: "600",
|
|
3479
3509
|
textDecoration: "none",
|
|
@@ -3488,7 +3518,7 @@ function TravellerFormInviteEmail({
|
|
|
3488
3518
|
"p",
|
|
3489
3519
|
{
|
|
3490
3520
|
style: {
|
|
3491
|
-
color:
|
|
3521
|
+
color: emailTokens.mutedForeground,
|
|
3492
3522
|
fontSize: "13px",
|
|
3493
3523
|
lineHeight: "1.5",
|
|
3494
3524
|
margin: "0 0 16px"
|
|
@@ -8237,6 +8267,7 @@ exports.TripHeader = TripHeader;
|
|
|
8237
8267
|
exports.TripPage = TripPage;
|
|
8238
8268
|
exports.buttonVariants = buttonVariants;
|
|
8239
8269
|
exports.cn = cn;
|
|
8270
|
+
exports.emailTokens = emailTokens;
|
|
8240
8271
|
exports.getStripeAppearance = getStripeAppearance;
|
|
8241
8272
|
exports.stripeAppearance = stripeAppearance;
|
|
8242
8273
|
//# sourceMappingURL=index.cjs.map
|