@planetaexo/design-system 0.12.0 → 0.12.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import * as React22 from 'react';
+import * as React23 from 'react';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -81,7 +81,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React22.forwardRef(
+var Button = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
     return /* @__PURE__ */ jsx(
@@ -302,10 +302,10 @@ function DialogDescription(_a) {
     }, props)
   );
 }
-var FloatingInput = React22.forwardRef(
+var FloatingInput = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, { label, error, id, className, required } = _b, props = __objRest(_b, ["label", "error", "id", "className", "required"]);
-    const inputId = id != null ? id : React22.useId();
+    const inputId = id != null ? id : React23.useId();
     return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -345,10 +345,10 @@ var FloatingInput = React22.forwardRef(
   }
 );
 FloatingInput.displayName = "FloatingInput";
-var FloatingSelect = React22.forwardRef(
+var FloatingSelect = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, { label, error, id, className, required, children, value } = _b, props = __objRest(_b, ["label", "error", "id", "className", "required", "children", "value"]);
-    const inputId = id != null ? id : React22.useId();
+    const inputId = id != null ? id : React23.useId();
     const hasValue = typeof value === "string" ? value !== "" : value !== void 0 && value !== null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
@@ -612,11 +612,11 @@ function PhoneCountrySelect({
   disabled
 }) {
   var _a;
-  const [open, setOpen] = React22.useState(false);
-  const containerRef = React22.useRef(null);
-  const listRef = React22.useRef(null);
+  const [open, setOpen] = React23.useState(false);
+  const containerRef = React23.useRef(null);
+  const listRef = React23.useRef(null);
   const selected = (_a = PHONE_COUNTRIES.find((c) => c.code === value)) != null ? _a : PHONE_COUNTRIES[0];
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       var _a2;
@@ -627,7 +627,7 @@ function PhoneCountrySelect({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!open || !listRef.current) return;
     const activeEl = listRef.current.querySelector("[data-selected=true]");
     activeEl == null ? void 0 : activeEl.scrollIntoView({ block: "nearest" });
@@ -897,8 +897,8 @@ function CalendarDayButton(_a) {
     "locale"
   ]);
   const defaultClassNames = getDefaultClassNames();
-  const ref = React22.useRef(null);
-  React22.useEffect(() => {
+  const ref = React23.useRef(null);
+  React23.useEffect(() => {
     var _a2;
     if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
   }, [modifiers.focused]);
@@ -929,16 +929,16 @@ function BirthDateField({
   className,
   disabled
 }) {
-  const [open, setOpen] = React22.useState(false);
-  const [text, setText] = React22.useState(
+  const [open, setOpen] = React23.useState(false);
+  const [text, setText] = React23.useState(
     value ? format(value, "dd/MM/yyyy") : ""
   );
-  const containerRef = React22.useRef(null);
-  const inputId = React22.useId();
-  React22.useEffect(() => {
+  const containerRef = React23.useRef(null);
+  const inputId = React23.useId();
+  React23.useEffect(() => {
     setText(value ? format(value, "dd/MM/yyyy") : "");
   }, [value]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       var _a;
@@ -1147,14 +1147,14 @@ function CountrySearchField({
 }) {
   var _a;
   const list = countries != null ? countries : COUNTRIES;
-  const [query, setQuery] = React22.useState("");
-  const [open, setOpen] = React22.useState(false);
-  const containerRef = React22.useRef(null);
-  const searchRef = React22.useRef(null);
+  const [query, setQuery] = React23.useState("");
+  const [open, setOpen] = React23.useState(false);
+  const containerRef = React23.useRef(null);
+  const searchRef = React23.useRef(null);
   const selected = list.find((c) => c.code === value);
   const isFloated = open || !!selected;
   const filtered = query.trim() ? list.filter((c) => c.name.toLowerCase().includes(query.toLowerCase())) : list;
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       var _a2;
@@ -1264,7 +1264,7 @@ function Alert({ variant = "info", children, className }) {
 function AdventureCard({ adventure }) {
   var _a, _b, _c, _d, _e, _f;
   const isControlled = (_b = (_a = adventure.optionals) == null ? void 0 : _a.some((o) => o.onCheckedChange !== void 0)) != null ? _b : false;
-  const [checkedInternal, setCheckedInternal] = React22.useState(
+  const [checkedInternal, setCheckedInternal] = React23.useState(
     new Set((_d = (_c = adventure.optionals) == null ? void 0 : _c.filter((o) => o.defaultChecked).map((o) => o.id)) != null ? _d : [])
   );
   const isChecked = (opt) => {
@@ -1601,7 +1601,7 @@ function BookingShell({
   return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-5 py-4 bg-muted/20", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-foreground font-heading mb-2", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: steps.map((label, i) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: steps.map((label, i) => /* @__PURE__ */ jsxs(React23.Fragment, { children: [
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -1800,7 +1800,7 @@ function TermsSection({
   termsContent
 }) {
   var _a;
-  const [modalOpen, setModalOpen] = React22.useState(false);
+  const [modalOpen, setModalOpen] = React23.useState(false);
   const i18n = (_a = TERMS_I18N[locale]) != null ? _a : TERMS_I18N.en;
   return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
     /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
@@ -1888,9 +1888,9 @@ function BookingWizard({
   depositInfo,
   onCancel
 }) {
-  const [step, setStep] = React22.useState("responsible");
-  const [error, setError] = React22.useState(null);
-  const [responsible, setResponsible] = React22.useState({
+  const [step, setStep] = React23.useState("responsible");
+  const [error, setError] = React23.useState(null);
+  const [responsible, setResponsible] = React23.useState({
     firstName: "",
     lastName: "",
     email: "",
@@ -1909,7 +1909,7 @@ function BookingWizard({
     return s + ((_b = (_a = a.slots) == null ? void 0 : _a.children) != null ? _b : 0);
   }, 0);
   const totalPax = totalAdults + totalChildren;
-  const [travellers, setTravellers] = React22.useState(
+  const [travellers, setTravellers] = React23.useState(
     Array.from({ length: Math.max(totalPax, 1) }, () => ({
       firstName: "",
       lastName: "",
@@ -1917,9 +1917,9 @@ function BookingWizard({
       email: ""
     }))
   );
-  const [payAmount, setPayAmount] = React22.useState("full");
-  const [payMethod, setPayMethod] = React22.useState("stripe");
-  const [termsAccepted, setTermsAccepted] = React22.useState(false);
+  const [payAmount, setPayAmount] = React23.useState("full");
+  const [payMethod, setPayMethod] = React23.useState("stripe");
+  const [termsAccepted, setTermsAccepted] = React23.useState(false);
   const setR = (k, v) => setResponsible((p) => __spreadProps(__spreadValues({}, p), { [k]: v }));
   const setT = (i, k, v) => setTravellers((prev) => prev.map((t, idx) => idx === i ? __spreadProps(__spreadValues({}, t), { [k]: v }) : t));
   const setTDob = (i, v) => setTravellers((prev) => prev.map((t, idx) => idx === i ? __spreadProps(__spreadValues({}, t), { dateOfBirth: v }) : t));
@@ -2120,7 +2120,7 @@ function Offer({
   continueDisabled,
   className
 }) {
-  const [showBooking, setShowBooking] = React22.useState(false);
+  const [showBooking, setShowBooking] = React23.useState(false);
   const isShowingCheckout = !!checkoutSlot || showBooking;
   const handleBook = () => {
     if (!checkoutSlot && !externalBookingFlow) setShowBooking(true);
@@ -2458,7 +2458,7 @@ function AdventureSection({
   cannotRemoveLastTravellerLabel
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const [detailsOpen, setDetailsOpen] = React22.useState(false);
+  const [detailsOpen, setDetailsOpen] = React23.useState(false);
   const handleCopyUrl = (url) => {
     if (onCopyFormLink) {
       onCopyFormLink(url);
@@ -2944,8 +2944,8 @@ function AddTravellerDialog({
   errorMessage
 }) {
   var _a, _b, _c, _d, _e;
-  const [form, setForm] = React22.useState(() => createInitialAddFormData(config));
-  React22.useEffect(() => {
+  const [form, setForm] = React23.useState(() => createInitialAddFormData(config));
+  React23.useEffect(() => {
     if (open) {
       setForm(createInitialAddFormData(config));
     }
@@ -3005,7 +3005,7 @@ function EditTravellerDialog({
   errorMessage
 }) {
   var _a, _b, _c, _d, _e;
-  const [form, setForm] = React22.useState(() => ({
+  const [form, setForm] = React23.useState(() => ({
     firstName: "",
     lastName: "",
     email: "",
@@ -3014,7 +3014,7 @@ function EditTravellerDialog({
     birthDate: "",
     personType: "ADULT"
   }));
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     var _a2, _b2, _c2, _d2, _e2, _f;
     if (open && traveller) {
       setForm({
@@ -3281,37 +3281,37 @@ function BookingDetails({
   const hasSubmitAddTraveller = !!onSubmitAddTraveller;
   const hasSubmitEditTraveller = !!onSubmitEditTraveller;
   const hasConfirmRemoveTraveller = !!onConfirmRemoveTraveller;
-  const [addModalState, setAddModalState] = React22.useState({
+  const [addModalState, setAddModalState] = React23.useState({
     open: false,
     adventureId: null
   });
-  const [editModalState, setEditModalState] = React22.useState({ open: false, adventureId: null, traveller: null });
-  const [deleteModalState, setDeleteModalState] = React22.useState({ open: false, adventureId: null, traveller: null });
-  const handleRequestOpenAddModal = React22.useCallback((adventureId) => {
+  const [editModalState, setEditModalState] = React23.useState({ open: false, adventureId: null, traveller: null });
+  const [deleteModalState, setDeleteModalState] = React23.useState({ open: false, adventureId: null, traveller: null });
+  const handleRequestOpenAddModal = React23.useCallback((adventureId) => {
     setAddModalState({ open: true, adventureId });
   }, []);
-  const handleRequestOpenEditModal = React22.useCallback(
+  const handleRequestOpenEditModal = React23.useCallback(
     (adventureId, traveller) => {
       setEditModalState({ open: true, adventureId, traveller });
     },
     []
   );
-  const handleRequestOpenDeleteModal = React22.useCallback(
+  const handleRequestOpenDeleteModal = React23.useCallback(
     (adventureId, traveller) => {
       setDeleteModalState({ open: true, adventureId, traveller });
     },
     []
   );
-  const closeAddModal = React22.useCallback(() => {
+  const closeAddModal = React23.useCallback(() => {
     setAddModalState({ open: false, adventureId: null });
   }, []);
-  const closeEditModal = React22.useCallback(() => {
+  const closeEditModal = React23.useCallback(() => {
     setEditModalState({ open: false, adventureId: null, traveller: null });
   }, []);
-  const closeDeleteModal = React22.useCallback(() => {
+  const closeDeleteModal = React23.useCallback(() => {
     setDeleteModalState({ open: false, adventureId: null, traveller: null });
   }, []);
-  const handleAddSubmit = React22.useCallback(
+  const handleAddSubmit = React23.useCallback(
     async (adventureId, data) => {
       if (!onSubmitAddTraveller) return;
       try {
@@ -3322,7 +3322,7 @@ function BookingDetails({
     },
     [onSubmitAddTraveller, closeAddModal]
   );
-  const handleEditSubmit = React22.useCallback(
+  const handleEditSubmit = React23.useCallback(
     async (adventureId, travellerId, data) => {
       if (!onSubmitEditTraveller) return;
       try {
@@ -3333,7 +3333,7 @@ function BookingDetails({
     },
     [onSubmitEditTraveller, closeEditModal]
   );
-  const handleDeleteConfirm = React22.useCallback(
+  const handleDeleteConfirm = React23.useCallback(
     async (adventureId, travellerId) => {
       if (!onConfirmRemoveTraveller) return;
       try {
@@ -3985,7 +3985,8 @@ var DEFAULT_LABELS2 = {
   numberOfPeopleLabel: "Number of People:",
   hostLabel: "Host:",
   postCtaMessage: "After adding everyone, you will also receive your own registration email, just like the other travellers. Please make sure everyone completes this step so we can organise everything properly.",
-  closingMessage: "If you have any questions, just reply to this email \u2014 happy to help."
+  closingMessage: "If you have any questions, just reply to this email \u2014 happy to help.",
+  nextStepsHeading: "Next steps:"
 };
 function BookingConfirmationEmail({
   recipientName,
@@ -3998,7 +3999,9 @@ function BookingConfirmationEmail({
   numberOfPeople,
   host,
   labels,
-  className
+  className,
+  nextSteps,
+  nextStepsImportant
 }) {
   const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS2), labels);
   const ctaStyle = {
@@ -4015,12 +4018,13 @@ function BookingConfirmationEmail({
   const AddTravellersCta = addTravellersUrl ? /* @__PURE__ */ jsx("a", { href: addTravellersUrl, style: ctaStyle, children: l.ctaButton }) : /* @__PURE__ */ jsx("span", { style: ctaStyle, role: "presentation", children: l.ctaButton });
   const tableRows = [
     { label: l.bookingNumberLabel, value: bookingNumber },
-    { label: l.activityLabel, value: activity },
+    ...activity && activity.trim().length > 0 ? [{ label: l.activityLabel, value: activity }] : [],
     { label: l.adventureLabel, value: adventure },
     { label: l.startingDateLabel, value: startingDate },
     { label: l.numberOfPeopleLabel, value: String(numberOfPeople) },
     { label: l.hostLabel, value: host }
   ];
+  const showNextSteps = Array.isArray(nextSteps) && nextSteps.length > 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4050,6 +4054,30 @@ function BookingConfirmationEmail({
           /* @__PURE__ */ jsx("td", { style: { padding: "4px 16px 4px 0", color: emailTokens.mutedForeground }, children: row.label }),
           /* @__PURE__ */ jsx("td", { style: { padding: "4px 0", fontWeight: "500", color: emailTokens.foreground }, children: row.value })
         ] }, i)) }) }),
+        showNextSteps && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "32px" } }),
+          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontFamily: emailTokens.fontFamily, fontSize: "18px" }, children: l.nextStepsHeading }),
+          /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px", marginBottom: "24px" }, children: nextSteps.map((step, i) => /* @__PURE__ */ jsx("table", { cellPadding: 0, cellSpacing: 0, style: { borderCollapse: "collapse", width: "100%", marginBottom: i < 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",
+              lineHeight: "24px",
+              textAlign: "center",
+              borderRadius: "9999px",
+              backgroundColor: emailTokens.primaryLight,
+              fontSize: "12px",
+              fontWeight: "700",
+              color: emailTokens.primary,
+              marginTop: "2px"
+            }, 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)) }),
+          nextStepsImportant && nextStepsImportant.trim().length > 0 && /* @__PURE__ */ jsx("p", { style: { marginBottom: "32px", fontSize: "14px", color: emailTokens.foreground, lineHeight: "1.6" }, children: nextStepsImportant.split("\n").map((line, idx, arr) => /* @__PURE__ */ jsxs(React23.Fragment, { children: [
+            line,
+            idx < arr.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
+          ] }, idx)) })
+        ] }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "32px" } }),
         /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px" }, children: l.postCtaMessage }),
         /* @__PURE__ */ jsx("p", { children: l.closingMessage })
@@ -4244,176 +4272,6 @@ function TravellerFormInviteEmail({
     }
   );
 }
-function BookingWelcomeNewSystemEmail({
-  greeting,
-  introParagraph,
-  bookingsHeading,
-  bookings,
-  bookingFormsCompleteLabel,
-  bookingFormsPendingLabel,
-  bookingFormsNoneLabel,
-  ctaLabel,
-  bookingCodeLabel,
-  signatureLine,
-  footerText,
-  logoUrl,
-  className
-}) {
-  const ctaStyle = {
-    display: "inline-block",
-    backgroundColor: emailTokens.primary,
-    color: emailTokens.primaryForeground,
-    padding: "10px 20px",
-    borderRadius: "6px",
-    fontSize: "14px",
-    fontWeight: 600,
-    textDecoration: "none",
-    fontFamily: emailTokens.fontFamily
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        fontFamily: emailTokens.fontFamily,
-        color: emailTokens.foreground,
-        maxWidth: "600px",
-        margin: "0 auto",
-        padding: "32px",
-        border: `1px solid ${emailTokens.border}`,
-        borderRadius: "12px",
-        backgroundColor: emailTokens.white
-      },
-      className,
-      children: [
-        /* @__PURE__ */ jsx(EmailLogo, { src: logoUrl }),
-        /* @__PURE__ */ jsx("p", { style: { fontSize: "16px", lineHeight: "1.5", margin: "0 0 12px" }, children: greeting }),
-        /* @__PURE__ */ jsx("p", { style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 24px" }, children: introParagraph }),
-        /* @__PURE__ */ jsx(
-          "hr",
-          {
-            style: {
-              border: "none",
-              borderTop: `1px solid ${emailTokens.border}`,
-              margin: "0 0 24px"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: {
-              fontSize: "15px",
-              fontWeight: 700,
-              margin: "0 0 16px",
-              color: emailTokens.foreground
-            },
-            children: bookingsHeading
-          }
-        ),
-        /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 24px" }, children: bookings.map((b) => {
-          const statusLine = b.formsStatus === "COMPLETO" ? bookingFormsCompleteLabel : b.formsStatus === "SEM_FORM" ? bookingFormsNoneLabel != null ? bookingFormsNoneLabel : "" : bookingFormsPendingLabel(b.formsCompleted, b.formsRequired);
-          const statusIcon = b.formsStatus === "COMPLETO" ? "\u2713" : b.formsStatus === "SEM_FORM" ? "" : "\u26A0";
-          const statusColor = b.formsStatus === "COMPLETO" ? emailTokens.green : b.formsStatus === "SEM_FORM" ? emailTokens.mutedForeground : emailTokens.destructive;
-          return /* @__PURE__ */ jsxs(
-            "li",
-            {
-              style: {
-                marginBottom: "16px",
-                padding: "16px",
-                backgroundColor: emailTokens.muted,
-                border: `1px solid ${emailTokens.border}`,
-                borderRadius: "8px"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    style: {
-                      fontSize: "15px",
-                      fontWeight: 600,
-                      margin: "0 0 6px",
-                      color: emailTokens.foreground
-                    },
-                    children: b.adventureName
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    style: {
-                      fontSize: "13px",
-                      color: emailTokens.mutedForeground,
-                      margin: "0 0 4px"
-                    },
-                    children: b.startDate
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "p",
-                  {
-                    style: {
-                      fontSize: "13px",
-                      color: emailTokens.mutedForeground,
-                      margin: "0 0 8px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: bookingCodeLabel }),
-                      " ",
-                      /* @__PURE__ */ jsxs(
-                        "span",
-                        {
-                          style: {
-                            fontFamily: emailTokens.fontFamily,
-                            color: emailTokens.foreground,
-                            fontWeight: 600
-                          },
-                          children: [
-                            "#",
-                            b.bookingId
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                ),
-                statusLine && /* @__PURE__ */ jsxs(
-                  "p",
-                  {
-                    style: {
-                      fontSize: "13px",
-                      color: statusColor,
-                      margin: "0 0 12px",
-                      fontWeight: 500
-                    },
-                    children: [
-                      statusIcon ? `${statusIcon} ` : "",
-                      statusLine
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx("a", { href: b.bookingPublicUrl, style: ctaStyle, children: ctaLabel })
-              ]
-            },
-            b.bookingId
-          );
-        }) }),
-        footerText && /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: {
-              color: emailTokens.mutedForeground,
-              fontSize: "13px",
-              lineHeight: "1.5",
-              margin: "0 0 16px"
-            },
-            children: footerText
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", lineHeight: "1.5", margin: "0" }, children: signatureLine })
-      ]
-    }
-  );
-}
 function CounterField({
   label,
   sublabel,
@@ -4528,11 +4386,11 @@ function DatePickerField({
   fromDate,
   className
 }) {
-  const [open, setOpen] = React22.useState(false);
-  const containerRef = React22.useRef(null);
-  const [calendarWidth, setCalendarWidth] = React22.useState();
+  const [open, setOpen] = React23.useState(false);
+  const containerRef = React23.useRef(null);
+  const [calendarWidth, setCalendarWidth] = React23.useState();
   const hasValue = !!value;
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!containerRef.current) return;
     const observer = new ResizeObserver(([entry]) => {
       setCalendarWidth(entry.contentRect.width);
@@ -4641,7 +4499,7 @@ function BookingForm({
   subtitle = "Free enquiry \u2013 no commitment",
   className
 }) {
-  const [values, setValues] = React22.useState(__spreadValues(__spreadValues({}, defaultInitial), defaultValues));
+  const [values, setValues] = React23.useState(__spreadValues(__spreadValues({}, defaultInitial), defaultValues));
   const set = (key, value) => setValues((prev) => __spreadProps(__spreadValues({}, prev), { [key]: value }));
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -5173,11 +5031,11 @@ function FloatingTextarea({
 }
 function SelectField({ field, value, onChange, error, disabled }) {
   var _a, _b, _c;
-  const [open, setOpen] = React22.useState(false);
-  const containerRef = React22.useRef(null);
+  const [open, setOpen] = React23.useState(false);
+  const containerRef = React23.useRef(null);
   const options = (_a = field.options) != null ? _a : [];
   const selectedOpt = (_b = options.find((o) => o.value === value)) != null ? _b : null;
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!open) return;
     const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -5566,11 +5424,11 @@ function RegistrationForm({
   readOnly = false
 }) {
   var _a;
-  const L = React22.useMemo(
+  const L = React23.useMemo(
     () => __spreadValues(__spreadValues({}, DEFAULT_LABELS3), labels != null ? labels : {}),
     [labels]
   );
-  const sortedFields = React22.useMemo(
+  const sortedFields = React23.useMemo(
     () => [...fields].sort((a, b) => {
       var _a2, _b;
       return ((_a2 = a.order) != null ? _a2 : 0) - ((_b = b.order) != null ? _b : 0);
@@ -5578,7 +5436,7 @@ function RegistrationForm({
     [fields]
   );
   const isControlled = values !== void 0;
-  const [internal, setInternal] = React22.useState(
+  const [internal, setInternal] = React23.useState(
     () => initializeValues(
       sortedFields,
       defaultValues != null ? defaultValues : {},
@@ -5586,9 +5444,9 @@ function RegistrationForm({
       includeTerms
     )
   );
-  const [submitAttempted, setSubmitAttempted] = React22.useState(false);
-  const [validationErrors, setValidationErrors] = React22.useState({});
-  React22.useEffect(() => {
+  const [submitAttempted, setSubmitAttempted] = React23.useState(false);
+  const [validationErrors, setValidationErrors] = React23.useState({});
+  React23.useEffect(() => {
     if (isControlled) return;
     setInternal((prev) => {
       const next = initializeValues(
@@ -5645,7 +5503,7 @@ function RegistrationForm({
   const termsError = submitAttempted && termsEnabled && !termsAccepted;
   const firstErrorFieldId = Object.keys(fieldErrors)[0];
   const scrollTargetId = firstErrorFieldId ? `rf-${firstErrorFieldId}` : termsError ? "rf-terms" : null;
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!submitAttempted || !scrollTargetId) return;
     const timer = setTimeout(() => {
       const elem = document.getElementById(scrollTargetId);
@@ -6099,10 +5957,10 @@ var OTPCodeInput = ({
   id,
   required
 }) => {
-  const baseId = id != null ? id : React22.useId();
-  const inputRef = React22.useRef(null);
-  const [focused, setFocused] = React22.useState(false);
-  const digits = React22.useMemo(() => {
+  const baseId = id != null ? id : React23.useId();
+  const inputRef = React23.useRef(null);
+  const [focused, setFocused] = React23.useState(false);
+  const digits = React23.useMemo(() => {
     const arr = value.split("").slice(0, length);
     while (arr.length < length) arr.push("");
     return arr;
@@ -6218,7 +6076,7 @@ function Checkbox(_a) {
     })
   );
 }
-var AccordionVariantContext = React22.createContext("default");
+var AccordionVariantContext = React23.createContext("default");
 function Accordion(_a) {
   var _b = _a, { className, variant = "default" } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(AccordionVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
@@ -6236,7 +6094,7 @@ function Accordion(_a) {
 }
 function AccordionItem(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const variant = React22.useContext(AccordionVariantContext);
+  const variant = React23.useContext(AccordionVariantContext);
   return /* @__PURE__ */ jsx(
     Accordion$1.Item,
     __spreadValues({
@@ -6257,7 +6115,7 @@ function AccordionTrigger(_a) {
     "className",
     "children"
   ]);
-  const variant = React22.useContext(AccordionVariantContext);
+  const variant = React23.useContext(AccordionVariantContext);
   return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
     Accordion$1.Trigger,
     __spreadProps(__spreadValues({
@@ -6311,7 +6169,7 @@ function AccordionContent(_a) {
     "className",
     "children"
   ]);
-  const variant = React22.useContext(AccordionVariantContext);
+  const variant = React23.useContext(AccordionVariantContext);
   return /* @__PURE__ */ jsx(
     Accordion$1.Panel,
     __spreadProps(__spreadValues({
@@ -6343,7 +6201,7 @@ function FilterPanel({
   title = "Filters",
   className
 }) {
-  const [internalValue, setInternalValue] = React22.useState(
+  const [internalValue, setInternalValue] = React23.useState(
     () => Object.fromEntries(groups.map((g) => [g.id, []]))
   );
   const selected = value != null ? value : internalValue;
@@ -6505,11 +6363,11 @@ function ItineraryModal({
   onNext
 }) {
   var _a, _b, _c;
-  const [imgIndex, setImgIndex] = React22.useState(0);
+  const [imgIndex, setImgIndex] = React23.useState(0);
   const images = stop ? [stop.coverImage, ...(_a = stop.images) != null ? _a : []] : [];
   const isFirst = (stop == null ? void 0 : stop.dayNumber) === ((_b = allStops[0]) == null ? void 0 : _b.dayNumber);
   const isLast = (stop == null ? void 0 : stop.dayNumber) === ((_c = allStops[allStops.length - 1]) == null ? void 0 : _c.dayNumber);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     setImgIndex(0);
   }, [stop == null ? void 0 : stop.dayNumber]);
   if (!stop) return null;
@@ -6636,8 +6494,8 @@ function ItineraryModal({
   ) });
 }
 function Itinerary({ title, subtitle, stops, className }) {
-  const [activeIndex, setActiveIndex] = React22.useState(null);
-  const scrollRef = React22.useRef(null);
+  const [activeIndex, setActiveIndex] = React23.useState(null);
+  const scrollRef = React23.useRef(null);
   const activeStop = activeIndex !== null ? stops[activeIndex] : null;
   const scrollBy = (dir) => {
     if (!scrollRef.current) return;
@@ -6723,8 +6581,8 @@ function MenuTrip({
   bold = true,
   className
 }) {
-  const scrollRef = React22.useRef(null);
-  React22.useEffect(() => {
+  const scrollRef = React23.useRef(null);
+  React23.useEffect(() => {
     if (!scrollRef.current || !activeSection) return;
     const container = scrollRef.current;
     const btn = container.querySelector(
@@ -6870,18 +6728,18 @@ function Lightbox({
   onClose
 }) {
   var _a;
-  const [index, setIndex] = React22.useState(initialIndex);
+  const [index, setIndex] = React23.useState(initialIndex);
   const total = photos.length;
   const photo = photos[index];
-  const prev = React22.useCallback(
+  const prev = React23.useCallback(
     () => setIndex((i) => (i - 1 + total) % total),
     [total]
   );
-  const next = React22.useCallback(
+  const next = React23.useCallback(
     () => setIndex((i) => (i + 1) % total),
     [total]
   );
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
       if (e.key === "ArrowLeft") prev();
@@ -7075,7 +6933,7 @@ function GridGallery({
   initialVisible,
   onOpen
 }) {
-  const [expanded, setExpanded] = React22.useState(false);
+  const [expanded, setExpanded] = React23.useState(false);
   const cols = gridCols(photos.length);
   const hasMore = photos.length > initialVisible;
   const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
@@ -7105,7 +6963,7 @@ function MasonryGallery({
   initialVisible,
   onOpen
 }) {
-  const [expanded, setExpanded] = React22.useState(false);
+  const [expanded, setExpanded] = React23.useState(false);
   const hasMore = photos.length > initialVisible;
   const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7178,7 +7036,7 @@ function FeaturedGallery({
   photos,
   onOpen
 }) {
-  const [expanded, setExpanded] = React22.useState(false);
+  const [expanded, setExpanded] = React23.useState(false);
   const featured = photos.slice(0, 3);
   const extra = photos.slice(3);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7255,8 +7113,8 @@ function PhotoGallery({
   onPhotoClick,
   className
 }) {
-  const [lightboxIndex, setLightboxIndex] = React22.useState(null);
-  const normalised = React22.useMemo(() => photos.map(normalise), [photos]);
+  const [lightboxIndex, setLightboxIndex] = React23.useState(null);
+  const normalised = React23.useMemo(() => photos.map(normalise), [photos]);
   const handleOpen = (index) => {
     setLightboxIndex(index);
     onPhotoClick == null ? void 0 : onPhotoClick(normalised[index].src, index);
@@ -7345,7 +7203,7 @@ function PricingTrip({
   variant = "card",
   className
 }) {
-  const [showPricing, setShowPricing] = React22.useState(false);
+  const [showPricing, setShowPricing] = React23.useState(false);
   if (variant === "compact") {
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
       /* @__PURE__ */ jsxs("div", { children: [
@@ -7668,14 +7526,14 @@ function SiteHeader({
   className
 }) {
   const t = VARIANT[variant];
-  const [openMenu, setOpenMenu] = React22.useState(null);
-  const [langOpen, setLangOpen] = React22.useState(false);
-  const [mobileOpen, setMobileOpen] = React22.useState(false);
-  const [openMobileSection, setOpenMobileSection] = React22.useState(null);
-  const [activeLang, setActiveLang] = React22.useState(currentLanguage);
+  const [openMenu, setOpenMenu] = React23.useState(null);
+  const [langOpen, setLangOpen] = React23.useState(false);
+  const [mobileOpen, setMobileOpen] = React23.useState(false);
+  const [openMobileSection, setOpenMobileSection] = React23.useState(null);
+  const [activeLang, setActiveLang] = React23.useState(currentLanguage);
   const toggleMobileSection = (label) => setOpenMobileSection((prev) => prev === label ? null : label);
-  const menuCloseTimer = React22.useRef(void 0);
-  const langCloseTimer = React22.useRef(void 0);
+  const menuCloseTimer = React23.useRef(void 0);
+  const langCloseTimer = React23.useRef(void 0);
   const handleMenuEnter = (label) => {
     clearTimeout(menuCloseTimer.current);
     setOpenMenu(label);
@@ -7696,7 +7554,7 @@ function SiteHeader({
     setOpenMenu(null);
     setLangOpen(false);
   };
-  React22.useEffect(() => () => {
+  React23.useEffect(() => () => {
     clearTimeout(menuCloseTimer.current);
     clearTimeout(langCloseTimer.current);
   }, []);
@@ -7961,7 +7819,7 @@ function SiteHeader({
               ), children: [
                 /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
                   const isActive = lang.code === activeLang;
-                  return /* @__PURE__ */ jsxs(React22.Fragment, { children: [
+                  return /* @__PURE__ */ jsxs(React23.Fragment, { children: [
                     i > 0 && /* @__PURE__ */ jsx("span", { className: cn(
                       "text-xs select-none",
                       variant === "white" ? "text-border" : "text-white/15"
@@ -8023,8 +7881,8 @@ function SiteHeader({
   );
 }
 function ThemeToggle({ className }) {
-  const [dark, setDark] = React22.useState(false);
-  React22.useEffect(() => {
+  const [dark, setDark] = React23.useState(false);
+  React23.useEffect(() => {
     const saved = localStorage.getItem("theme");
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const isDark = saved === "dark" || !saved && prefersDark;
@@ -8175,7 +8033,7 @@ function TripCard({
   );
 }
 function useHlsVideo(videoRef, src) {
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!src || !videoRef.current) return;
     const video = videoRef.current;
     if (!src.includes(".m3u8")) return;
@@ -8217,11 +8075,11 @@ function TripHeader({
   className
 }) {
   var _a;
-  const [heroIndex, setHeroIndex] = React22.useState(0);
-  const [videoReady, setVideoReady] = React22.useState(false);
-  const videoRef = React22.useRef(null);
+  const [heroIndex, setHeroIndex] = React23.useState(0);
+  const [videoReady, setVideoReady] = React23.useState(false);
+  const videoRef = React23.useRef(null);
   const isHls = !!(videoUrl == null ? void 0 : videoUrl.includes(".m3u8"));
-  const validImages = React22.useMemo(
+  const validImages = React23.useMemo(
     () => images.map((u) => u == null ? void 0 : u.trim()).filter(Boolean),
     [images]
   );
@@ -8236,7 +8094,7 @@ function TripHeader({
   const nights = duration ? (_a = duration.nights) != null ? _a : Math.max(duration.days - 1, 1) : null;
   const hasMeta = !!(destination || duration);
   useHlsVideo(videoRef, isHls ? videoUrl : void 0);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!videoUrl) return;
     const el = videoRef.current;
     if (!el) return;
@@ -8378,7 +8236,7 @@ function TripHeader({
               siteHeader ? "-mt-44" : "-mt-36"
             ),
             children: [
-              breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center gap-1.5 flex-wrap", children: breadcrumb.map((crumb, i) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
+              breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center gap-1.5 flex-wrap", children: breadcrumb.map((crumb, i) => /* @__PURE__ */ jsxs(React23.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 text-white/50 shrink-0" }),
                 /* @__PURE__ */ jsx("span", { className: "text-xs text-white/70 font-ui hover:text-white/90 cursor-default", children: crumb.label })
               ] }, i)) }),
@@ -8478,19 +8336,19 @@ function TripPage({
   features,
   className
 }) {
-  const [activeSection, setActiveSection] = React22.useState("");
-  const [navFloating, setNavFloating] = React22.useState(false);
-  const [navHidden, setNavHidden] = React22.useState(false);
-  const [isFloating, setIsFloating] = React22.useState(false);
-  const [sidebarPos, setSidebarPos] = React22.useState(null);
-  const [pricingBarVisible, setPricingBarVisible] = React22.useState(false);
-  const navRef = React22.useRef(null);
-  const navSentinelRef = React22.useRef(null);
-  const sentinelRef = React22.useRef(null);
-  const sidebarPlaceholderRef = React22.useRef(null);
-  const pricingBarRef = React22.useRef(null);
-  const galleryRef = React22.useRef(null);
-  const sections = React22.useMemo(
+  const [activeSection, setActiveSection] = React23.useState("");
+  const [navFloating, setNavFloating] = React23.useState(false);
+  const [navHidden, setNavHidden] = React23.useState(false);
+  const [isFloating, setIsFloating] = React23.useState(false);
+  const [sidebarPos, setSidebarPos] = React23.useState(null);
+  const [pricingBarVisible, setPricingBarVisible] = React23.useState(false);
+  const navRef = React23.useRef(null);
+  const navSentinelRef = React23.useRef(null);
+  const sentinelRef = React23.useRef(null);
+  const sidebarPlaceholderRef = React23.useRef(null);
+  const pricingBarRef = React23.useRef(null);
+  const galleryRef = React23.useRef(null);
+  const sections = React23.useMemo(
     () => [
       { id: "key-info", label: "Key info", show: !!(infoGroups == null ? void 0 : infoGroups.length) },
       { id: "overview", label: "Overview", show: !!overview },
@@ -8505,7 +8363,7 @@ function TripPage({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const sentinel = navSentinelRef.current;
     if (!sentinel) return;
     const update = () => setNavFloating(sentinel.getBoundingClientRect().top < 1);
@@ -8513,7 +8371,7 @@ function TripPage({
     update();
     return () => document.removeEventListener("scroll", update, { capture: true });
   }, []);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const sentinel = sentinelRef.current;
     if (!sentinel) return;
     const update = () => setIsFloating(sentinel.getBoundingClientRect().top < 1);
@@ -8521,7 +8379,7 @@ function TripPage({
     update();
     return () => document.removeEventListener("scroll", update, { capture: true });
   }, []);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const measure = () => {
       if (!sidebarPlaceholderRef.current) return;
       const rect = sidebarPlaceholderRef.current.getBoundingClientRect();
@@ -8531,7 +8389,7 @@ function TripPage({
     window.addEventListener("resize", measure);
     return () => window.removeEventListener("resize", measure);
   }, [isFloating]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const check = () => {
       var _a;
       const target = (_a = galleryRef.current) != null ? _a : pricingBarRef.current;
@@ -8542,7 +8400,7 @@ function TripPage({
     check();
     return () => document.removeEventListener("scroll", check, { capture: true });
   }, []);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const check = () => {
       if (!pricingBarRef.current) return;
       setNavHidden(pricingBarRef.current.getBoundingClientRect().top < window.innerHeight * 0.92);
@@ -8551,7 +8409,7 @@ function TripPage({
     check();
     return () => document.removeEventListener("scroll", check, { capture: true });
   }, []);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (sections.length === 0) return;
     setActiveSection(sections[0].id);
     const update = () => {
@@ -8916,12 +8774,12 @@ function Toast({
   duration = 6e3,
   className
 }) {
-  const [mounted, setMounted] = React22.useState(false);
-  const [visible, setVisible] = React22.useState(true);
-  React22.useEffect(() => {
+  const [mounted, setMounted] = React23.useState(false);
+  const [visible, setVisible] = React23.useState(true);
+  React23.useEffect(() => {
     setMounted(true);
   }, []);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (duration === 0) return;
     const t = setTimeout(() => {
       setVisible(false);
@@ -9625,6 +9483,6 @@ function LeadCapturePopup({
   );
 }
 
-export { ActivityCard, AgentContactCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingOtpEmail, BookingShell, BookingWelcomeNewSystemEmail, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, OTPCodeInput, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TERMS_ACCEPT_KEY, TermsSection, ThemeToggle, Toast, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };
+export { ActivityCard, AgentContactCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingOtpEmail, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, OTPCodeInput, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TERMS_ACCEPT_KEY, TermsSection, ThemeToggle, Toast, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map