@planetaexo/design-system 0.4.1 → 0.4.3

package/dist/index.d.cts

@@ -1327,10 +1327,15 @@ declare const emailTokens: {
     readonly greenBg: "#f0fdf4";
     /** Red-600 — destructive / not-included icon */
     readonly destructive: "#dc2626";
-    /** Web-safe font stack used in all email components */
-    readonly fontFamily: "Arial, Helvetica, sans-serif";
+    /**
+     * Font stack — DM Sans (the DS brand font) with modern system-font
+     * fallbacks. Clients that load Google Fonts (Apple Mail, Gmail web,
+     * Outlook Mac) will render DM Sans; others fall back gracefully.
+     */
+    readonly fontFamily: "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
 };
 type EmailTokens = typeof emailTokens;
+declare function wrapEmailHtml(content: string): string;
 
 interface LeadCapturePopupConfig {
     /** Hero image URL displayed at the top of the popup */
@@ -1382,4 +1387,4 @@ declare function LeadCapturePopup({ config: _config, }: {
     config: LeadCapturePopupConfig;
 }): react_jsx_runtime.JSX.Element | null;
 
-export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, BirthDateField, type BirthDateFieldProps, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, BookingConfirmedCard, type BookingConfirmedCardProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingOtpEmail, type BookingOtpEmailLabels, type BookingOtpEmailProps, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, Button, type ButtonProps, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type EmailTokens, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, type RegistrationAdventure, type RegistrationBooking, type RegistrationEmergencyContactValue, type RegistrationField, type RegistrationFieldOption, type RegistrationFieldType, type RegistrationFieldValue, RegistrationForm, type RegistrationFormLabels, type RegistrationFormProps, type RegistrationFormValues, type RegistrationNameValue, type RegistrationPhoneValue, RegistrationSuccessCard, type RegistrationSuccessCardProps, type RegistrationTerms, type RegistrationTraveller, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TravellerFormInviteEmail, type TravellerFormInviteEmailLabels, type TravellerFormInviteEmailProps, type TravellerFormInviteLink, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance };
+export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, BirthDateField, type BirthDateFieldProps, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, BookingConfirmedCard, type BookingConfirmedCardProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingOtpEmail, type BookingOtpEmailLabels, type BookingOtpEmailProps, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, Button, type ButtonProps, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type EmailTokens, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, type RegistrationAdventure, type RegistrationBooking, type RegistrationEmergencyContactValue, type RegistrationField, type RegistrationFieldOption, type RegistrationFieldType, type RegistrationFieldValue, RegistrationForm, type RegistrationFormLabels, type RegistrationFormProps, type RegistrationFormValues, type RegistrationNameValue, type RegistrationPhoneValue, RegistrationSuccessCard, type RegistrationSuccessCardProps, type RegistrationTerms, type RegistrationTraveller, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TravellerFormInviteEmail, type TravellerFormInviteEmailLabels, type TravellerFormInviteEmailProps, type TravellerFormInviteLink, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };

package/dist/index.d.ts

@@ -1327,10 +1327,15 @@ declare const emailTokens: {
     readonly greenBg: "#f0fdf4";
     /** Red-600 — destructive / not-included icon */
     readonly destructive: "#dc2626";
-    /** Web-safe font stack used in all email components */
-    readonly fontFamily: "Arial, Helvetica, sans-serif";
+    /**
+     * Font stack — DM Sans (the DS brand font) with modern system-font
+     * fallbacks. Clients that load Google Fonts (Apple Mail, Gmail web,
+     * Outlook Mac) will render DM Sans; others fall back gracefully.
+     */
+    readonly fontFamily: "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
 };
 type EmailTokens = typeof emailTokens;
+declare function wrapEmailHtml(content: string): string;
 
 interface LeadCapturePopupConfig {
     /** Hero image URL displayed at the top of the popup */
@@ -1382,4 +1387,4 @@ declare function LeadCapturePopup({ config: _config, }: {
     config: LeadCapturePopupConfig;
 }): react_jsx_runtime.JSX.Element | null;
 
-export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, BirthDateField, type BirthDateFieldProps, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, BookingConfirmedCard, type BookingConfirmedCardProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingOtpEmail, type BookingOtpEmailLabels, type BookingOtpEmailProps, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, Button, type ButtonProps, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type EmailTokens, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, type RegistrationAdventure, type RegistrationBooking, type RegistrationEmergencyContactValue, type RegistrationField, type RegistrationFieldOption, type RegistrationFieldType, type RegistrationFieldValue, RegistrationForm, type RegistrationFormLabels, type RegistrationFormProps, type RegistrationFormValues, type RegistrationNameValue, type RegistrationPhoneValue, RegistrationSuccessCard, type RegistrationSuccessCardProps, type RegistrationTerms, type RegistrationTraveller, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TravellerFormInviteEmail, type TravellerFormInviteEmailLabels, type TravellerFormInviteEmailProps, type TravellerFormInviteLink, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance };
+export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, BirthDateField, type BirthDateFieldProps, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, BookingConfirmedCard, type BookingConfirmedCardProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingOtpEmail, type BookingOtpEmailLabels, type BookingOtpEmailProps, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, Button, type ButtonProps, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type EmailTokens, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, type RegistrationAdventure, type RegistrationBooking, type RegistrationEmergencyContactValue, type RegistrationField, type RegistrationFieldOption, type RegistrationFieldType, type RegistrationFieldValue, RegistrationForm, type RegistrationFormLabels, type RegistrationFormProps, type RegistrationFormValues, type RegistrationNameValue, type RegistrationPhoneValue, RegistrationSuccessCard, type RegistrationSuccessCardProps, type RegistrationTerms, type RegistrationTraveller, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TravellerFormInviteEmail, type TravellerFormInviteEmailLabels, type TravellerFormInviteEmailProps, type TravellerFormInviteLink, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };

package/dist/index.js

@@ -2900,9 +2900,40 @@ var emailTokens = {
   greenBg: "#f0fdf4",
   /** Red-600 — destructive / not-included icon */
   destructive: "#dc2626",
-  /** Web-safe font stack used in all email components */
-  fontFamily: "Arial, Helvetica, sans-serif"
+  /**
+   * Font stack — DM Sans (the DS brand font) with modern system-font
+   * fallbacks. Clients that load Google Fonts (Apple Mail, Gmail web,
+   * Outlook Mac) will render DM Sans; others fall back gracefully.
+   */
+  fontFamily: "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
 };
+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";
+function wrapEmailHtml(content) {
+  return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="pt">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="light dark" />
+  <meta name="supported-color-schemes" content="light dark" />
+  <!--[if !mso]><!-->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+  <link href="${DM_SANS_URL}" rel="stylesheet" type="text/css" />
+  <!--<![endif]-->
+</head>
+<body style="margin:0;padding:16px;background-color:#ffffff;">
+  <!--[if !mso]><!-->
+  <style type="text/css">
+    @media (prefers-color-scheme: dark) {
+      body { background-color: #111827 !important; }
+    }
+  </style>
+  <!--<![endif]-->
+${content}
+</body>
+</html>`;
+}
 var DEFAULT_LABELS = {
   ctaButton: "View booking details",
   logoAlt: "PlanetaEXO",
@@ -2981,7 +3012,10 @@ function BookingConfirmation({
         color: emailTokens.foreground,
         fontFamily: emailTokens.fontFamily,
         fontSize: "16px",
-        lineHeight: "1.6"
+        lineHeight: "1.6",
+        border: `1px solid ${emailTokens.border}`,
+        borderRadius: "12px",
+        overflow: "hidden"
       },
       className,
       children: [
@@ -2994,35 +3028,34 @@ function BookingConfirmation({
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px" }, children: [
-          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.greeting(recipientName) }),
-          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.confirmationMessage }),
-          /* @__PURE__ */ jsx("p", { style: { marginBottom: "32px", fontSize: "16px" }, children: l.detailsIntro }),
+          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.greeting(recipientName) }),
+          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.confirmationMessage }),
+          /* @__PURE__ */ jsx("p", { style: { marginBottom: "32px", marginTop: 0, fontSize: "16px" }, children: l.detailsIntro }),
           /* @__PURE__ */ jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
         ] }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
         /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
-          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
-          /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px", display: "flex", flexDirection: "column", gap: "16px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "14px" }, children: [
-            /* @__PURE__ */ jsx("span", { style: {
-              display: "flex",
+          /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
+          /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: i < l.nextSteps.length - 1 ? "16px" : "0" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", width: "32px", paddingRight: "14px" }, children: /* @__PURE__ */ jsx("span", { style: {
+              display: "inline-block",
               height: "24px",
               width: "24px",
-              flexShrink: 0,
-              alignItems: "center",
-              justifyContent: "center",
+              lineHeight: "24px",
+              textAlign: "center",
               borderRadius: "9999px",
               backgroundColor: emailTokens.primaryLight,
               fontSize: "12px",
               fontWeight: "700",
               color: emailTokens.primary,
               marginTop: "2px"
-            }, children: i + 1 }),
-            /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step })
-          ] }, i)) })
+            }, children: i + 1 }) }),
+            /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top" }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step }) })
+          ] }) }) }, i)) })
         ] }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
         /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
-          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
+          /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
           /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
             /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
               /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.bookingNumberLabel }),
@@ -3043,23 +3076,29 @@ function BookingConfirmation({
           ] }) }) })
         ] }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
-        /* @__PURE__ */ jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px", display: "flex", flexDirection: "column", gap: "24px" }, children: adventures.map((adventure) => {
+        /* @__PURE__ */ jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: adventures.map((adventure, adIdx) => {
           var _a;
           return /* @__PURE__ */ jsxs(
             "div",
             {
-              style: { borderRadius: "16px", border: `1px solid ${emailTokens.border}`, backgroundColor: emailTokens.white, overflow: "hidden" },
+              style: {
+                borderRadius: "16px",
+                border: `1px solid ${emailTokens.border}`,
+                backgroundColor: emailTokens.white,
+                overflow: "hidden",
+                marginBottom: adIdx < adventures.length - 1 ? "24px" : "0"
+              },
               children: [
-                /* @__PURE__ */ jsx("div", { style: { aspectRatio: "16/7", overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsx(
+                adventure.image && /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsx(
                   "img",
                   {
                     src: adventure.image,
                     alt: (_a = adventure.imageAlt) != null ? _a : adventure.title,
-                    style: { width: "100%", height: "100%", objectFit: "cover" }
+                    style: { width: "100%", height: "auto", display: "block" }
                   }
                 ) }),
-                /* @__PURE__ */ jsxs("div", { style: { padding: "20px", display: "flex", flexDirection: "column", gap: "10px" }, children: [
-                  adventure.reference && /* @__PURE__ */ jsx("span", { style: {
+                /* @__PURE__ */ jsxs("div", { style: { padding: "20px" }, children: [
+                  adventure.reference && /* @__PURE__ */ jsx("div", { style: { marginBottom: "10px" }, children: /* @__PURE__ */ jsx("span", { style: {
                     display: "inline-block",
                     backgroundColor: emailTokens.primaryLight,
                     color: emailTokens.primary,
@@ -3067,142 +3106,96 @@ function BookingConfirmation({
                     borderRadius: "6px",
                     fontSize: "12px",
                     fontWeight: "600",
-                    letterSpacing: "0.05em",
-                    alignSelf: "flex-start"
-                  }, children: adventure.reference }),
-                  /* @__PURE__ */ jsx("h3", { style: { fontSize: "20px", fontWeight: "700", color: emailTokens.foreground, lineHeight: "1.3", marginTop: "2px", margin: 0 }, children: adventure.title }),
-                  /* @__PURE__ */ jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
-                    /* @__PURE__ */ jsxs("svg", { style: { width: "14px", height: "14px", color: emailTokens.primary, flexShrink: 0 }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    letterSpacing: "0.05em"
+                  }, children: adventure.reference }) }),
+                  /* @__PURE__ */ jsx("h3", { style: { fontSize: "20px", fontWeight: "700", color: emailTokens.foreground, lineHeight: "1.3", margin: "0 0 10px 0" }, children: adventure.title }),
+                  /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ 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: [
                       /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
                       /* @__PURE__ */ jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
                       /* @__PURE__ */ jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
                       /* @__PURE__ */ jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })
-                    ] }),
-                    adventure.dateFrom,
-                    " \u2192 ",
-                    adventure.dateTo
-                  ] }),
-                  adventure.location && /* @__PURE__ */ jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
-                    /* @__PURE__ */ jsxs("svg", { style: { width: "14px", height: "14px", color: emailTokens.primary, flexShrink: 0 }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    ] }) }),
+                    /* @__PURE__ */ jsxs("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: [
+                      adventure.dateFrom,
+                      " \u2192 ",
+                      adventure.dateTo
+                    ] })
+                  ] }) }) }),
+                  adventure.location && /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ 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: [
                       /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
                       /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
-                    ] }),
-                    adventure.location
-                  ] }),
-                  adventure.slots && /* @__PURE__ */ jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
-                    /* @__PURE__ */ jsxs("svg", { style: { width: "14px", height: "14px", color: emailTokens.primary, flexShrink: 0 }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    ] }) }),
+                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: adventure.location })
+                  ] }) }) }),
+                  adventure.slots && /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ 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: [
                       /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
                       /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
                       /* @__PURE__ */ jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
                       /* @__PURE__ */ jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
-                    ] }),
-                    [
+                    ] }) }),
+                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: [
                       adventure.slots.adults ? `${adventure.slots.adults} ${l.adultsUnit}` : null,
                       adventure.slots.children ? `${adventure.slots.children} ${l.childrenUnit}` : null
-                    ].filter(Boolean).join(" \xB7 ")
-                  ] }),
-                  adventure.partner && /* @__PURE__ */ jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "14px", color: emailTokens.mutedForeground, margin: 0, lineHeight: 1 }, children: [
-                    /* @__PURE__ */ jsxs("svg", { style: { width: "14px", height: "14px", color: emailTokens.primary, flexShrink: 0 }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    ].filter(Boolean).join(" \xB7 ") })
+                  ] }) }) }),
+                  adventure.partner && /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "14px" }, children: /* @__PURE__ */ 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: [
                       /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
                       /* @__PURE__ */ jsx("polygon", { points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" })
-                    ] }),
-                    adventure.partner
+                    ] }) }),
+                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: adventure.partner })
+                  ] }) }) }),
+                  adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
+                    /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
+                    /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.travellersLabel }),
+                    adventure.travellers.map((traveller) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle" }, children: /* @__PURE__ */ jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: emailTokens.foreground }, children: [
+                        traveller.firstName,
+                        " ",
+                        traveller.lastName
+                      ] }) }),
+                      traveller.isChild && /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", textAlign: "right" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: "600", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted, borderRadius: "9999px", padding: "2px 8px", textTransform: "uppercase", letterSpacing: "0.05em" }, children: l.childBadge }) })
+                    ] }) }) }, traveller.id))
                   ] }),
-                  adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "8px", margin: "0 0 8px 0" }, children: l.travellersLabel }),
-                      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: adventure.travellers.map((traveller) => /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
-                          children: [
-                            /* @__PURE__ */ jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: emailTokens.foreground }, children: [
-                              traveller.firstName,
-                              " ",
-                              traveller.lastName
-                            ] }),
-                            traveller.isChild && /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: "600", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted, borderRadius: "9999px", padding: "2px 8px", textTransform: "uppercase", letterSpacing: "0.05em" }, children: l.childBadge })
-                          ]
-                        },
-                        traveller.id
-                      )) })
-                    ] })
+                  adventure.description && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
+                    /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
+                    /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.itineraryLabel }),
+                    /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: adventure.description })
                   ] }),
-                  adventure.description && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "8px", margin: "0 0 8px 0" }, children: l.itineraryLabel }),
-                      /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: adventure.description })
-                    ] })
+                  adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
+                    /* @__PURE__ */ jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: "0 0 8px 0" }, children: l.includedLabel }),
+                    adventure.included.map((item, i) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ 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__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
+                    ] }) }) }, i))
                   ] }),
-                  adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
-                    /* @__PURE__ */ jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: 0 }, children: l.includedLabel }),
-                    /* @__PURE__ */ jsx("ul", { style: { display: "flex", flexDirection: "column", gap: "6px", margin: 0, padding: 0, listStyle: "none" }, children: adventure.included.map((item, i) => /* @__PURE__ */ jsxs(
-                      "li",
-                      {
-                        style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
-                        children: [
-                          /* @__PURE__ */ jsx("svg", { style: { width: "16px", height: "16px", color: emailTokens.primary, flexShrink: 0, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
-                          item
-                        ]
-                      },
-                      i
-                    )) })
+                  adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
+                    /* @__PURE__ */ jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: "0 0 8px 0" }, children: l.notIncludedLabel }),
+                    adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ 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: [
+                        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                      ] }) }),
+                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
+                    ] }) }) }, i))
                   ] }),
-                  adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "4px" }, children: [
-                    /* @__PURE__ */ jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: 0 }, children: l.notIncludedLabel }),
-                    /* @__PURE__ */ jsx("ul", { style: { display: "flex", flexDirection: "column", gap: "6px", margin: 0, padding: 0, listStyle: "none" }, children: adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxs(
-                      "li",
-                      {
-                        style: { display: "flex", alignItems: "flex-start", gap: "8px", fontSize: "14px", color: emailTokens.bodyText },
-                        children: [
-                          /* @__PURE__ */ jsxs("svg", { style: { width: "16px", height: "16px", color: emailTokens.destructive, flexShrink: 0, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                            /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-                            /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-                          ] }),
-                          item
-                        ]
-                      },
-                      i
-                    )) })
-                  ] }),
-                  adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginTop: "4px", marginBottom: "4px" } }),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "8px", margin: "0 0 8px 0" }, children: l.pricingLabel }),
-                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
-                        adventure.lineItems.map((item, j) => /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
-                            children: [
-                              /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", color: emailTokens.mutedForeground }, children: item.label }),
-                              /* @__PURE__ */ jsxs(
-                                "span",
-                                {
-                                  style: {
-                                    fontSize: "14px",
-                                    fontWeight: "500",
-                                    whiteSpace: "nowrap",
-                                    color: item.isDiscount ? emailTokens.green : emailTokens.foreground
-                                  },
-                                  children: [
-                                    item.isDiscount ? "\u2212" : "",
-                                    item.price
-                                  ]
-                                }
-                              )
-                            ]
-                          },
-                          j
-                        )),
-                        adventure.subtotal && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: "8px", marginTop: "4px", borderTop: `1px solid ${emailTokens.border}` }, children: [
-                          /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground }, children: l.subtotalLabel }),
-                          /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: adventure.subtotal })
-                        ] })
+                  adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
+                    /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
+                    /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.pricingLabel }),
+                    adventure.lineItems.map((item, j) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "4px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground }, children: item.label }),
+                      /* @__PURE__ */ jsxs("td", { style: { verticalAlign: "middle", textAlign: "right", fontSize: "14px", fontWeight: "500", whiteSpace: "nowrap", color: item.isDiscount ? emailTokens.green : emailTokens.foreground }, children: [
+                        item.isDiscount ? "\u2212" : "",
+                        item.price
                       ] })
-                    ] })
+                    ] }) }) }, j)),
+                    adventure.subtotal && /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", paddingTop: "8px", marginTop: "4px", borderTop: `1px solid ${emailTokens.border}` }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", fontWeight: "700", color: emailTokens.foreground }, children: l.subtotalLabel }),
+                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", textAlign: "right", fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: adventure.subtotal })
+                    ] }) }) })
                   ] })
                 ] })
               ]
@@ -3212,26 +3205,14 @@ function BookingConfirmation({
         }) }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
         /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
-          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.paymentSummaryHeading }),
+          /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.paymentSummaryHeading }),
           /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
             summaryLineItems && summaryLineItems.map((item, i) => /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
               /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: item.label }),
-              /* @__PURE__ */ jsxs(
-                "td",
-                {
-                  style: {
-                    padding: "10px 16px",
-                    textAlign: "right",
-                    fontWeight: "500",
-                    whiteSpace: "nowrap",
-                    color: item.isDiscount ? emailTokens.green : emailTokens.foreground
-                  },
-                  children: [
-                    item.isDiscount ? "\u2212" : "",
-                    item.price
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsxs("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", whiteSpace: "nowrap", color: item.isDiscount ? emailTokens.green : emailTokens.foreground }, children: [
+                item.isDiscount ? "\u2212" : "",
+                item.price
+              ] })
             ] }, i)),
             subtotal && /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
               /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.subtotalLabel }),
@@ -3253,31 +3234,18 @@ function BookingConfirmation({
                 /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.remainingBalanceLabel }),
                 /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.remainingAmount })
               ] }),
-              /* @__PURE__ */ jsxs(
-                "tr",
-                {
-                  style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
-                  children: [
-                    /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.balanceDueLabel }),
-                    /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.balanceDueDate })
-                  ]
-                }
-              ),
-              depositInfo.isPaidInFull && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-                "td",
-                {
-                  colSpan: 2,
-                  style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: emailTokens.green, backgroundColor: emailTokens.greenBg },
-                  children: l.paidInFullLabel
-                }
-              ) })
+              /* @__PURE__ */ jsxs("tr", { style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {}, children: [
+                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.balanceDueLabel }),
+                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.balanceDueDate })
+              ] }),
+              depositInfo.isPaidInFull && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 2, style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: emailTokens.green, backgroundColor: emailTokens.greenBg }, children: l.paidInFullLabel }) })
             ] }) })
           ] })
         ] }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
         /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: [
-          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
-          /* @__PURE__ */ jsx("p", { style: { fontSize: "16px" }, children: l.footerContact(agent) })
+          /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
+          /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: 0, fontSize: "16px" }, children: l.footerContact(agent) })
         ] })
       ]
     }
@@ -3344,11 +3312,15 @@ function BookingConfirmationEmail({
         color: emailTokens.foreground,
         fontFamily: emailTokens.fontFamily,
         fontSize: "16px",
-        lineHeight: "1.6"
+        lineHeight: "1.6",
+        border: `1px solid ${emailTokens.border}`,
+        borderRadius: "12px",
+        overflow: "hidden",
+        padding: "32px"
       },
       className,
       children: [
-        /* @__PURE__ */ jsx("div", { style: { marginTop: "32px", marginBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { style: { marginTop: "0", marginBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsx(
           "img",
           {
             src: logoUrl,
@@ -3388,7 +3360,10 @@ function BookingOtpEmail({
         color: emailTokens.foreground,
         maxWidth: "600px",
         margin: "0 auto",
-        padding: "24px"
+        padding: "32px",
+        border: `1px solid ${emailTokens.border}`,
+        borderRadius: "12px",
+        backgroundColor: emailTokens.white
       },
       className,
       children: [
@@ -3447,7 +3422,10 @@ function TravellerFormInviteEmail({
         color: emailTokens.foreground,
         maxWidth: "600px",
         margin: "0 auto",
-        padding: "24px"
+        padding: "32px",
+        border: `1px solid ${emailTokens.border}`,
+        borderRadius: "12px",
+        backgroundColor: emailTokens.white
       },
       className,
       children: [
@@ -8204,6 +8182,6 @@ function LeadCapturePopup({
   );
 }
 
-export { ActivityCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingOtpEmail, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TermsSection, ThemeToggle, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance };
+export { ActivityCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingOtpEmail, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TermsSection, ThemeToggle, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map