@planetaexo/design-system 0.9.4 → 0.10.0

package/dist/index.js

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { XIcon, ChevronDownIcon, CalendarIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, CheckCircle2Icon, MapIcon, LogOutIcon, MessageCircleIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CircleCheckIcon, ChevronLeftIcon, ClockIcon, ChevronUpIcon, UserIcon, MenuIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, InfoIcon, Loader2Icon, SendIcon, CheckCircleIcon, CheckIcon, MailIcon, PhoneIcon, CompassIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, CarIcon, ZoomInIcon, StarIcon, LayoutGridIcon } from 'lucide-react';
+import { XIcon, ChevronDownIcon, CalendarIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, CheckCircle2Icon, MapIcon, LogOutIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CircleCheckIcon, ChevronLeftIcon, ClockIcon, ChevronUpIcon, UserIcon, MenuIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, InfoIcon, Loader2Icon, SendIcon, CheckCircleIcon, CheckIcon, MailIcon, PhoneIcon, MessageCircleIcon, CompassIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, CarIcon, ZoomInIcon, StarIcon, LayoutGridIcon } from 'lucide-react';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import { Button as Button$1 } from '@base-ui/react/button';
@@ -1352,7 +1352,7 @@ function AdventureCard({ adventure }) {
       (adventure.description || adventure.detailsSlot) && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-3", children: (_f = adventure.itineraryLabel) != null ? _f : "Itinerary" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-3", children: (_f = adventure.itineraryLabel) != null ? _f : "Details" }),
           adventure.description && !adventure.detailsSlot && /* @__PURE__ */ jsx("p", { className: "text-base text-foreground/80 leading-snug font-sans", children: adventure.description }),
           adventure.detailsSlot && /* @__PURE__ */ jsx("div", { className: cn(
             "text-foreground",
@@ -2195,11 +2195,193 @@ function Offer({
     ] }) })
   ] });
 }
+function getInitial(name) {
+  return name && name.length > 0 ? name.charAt(0).toUpperCase() : "?";
+}
+function CompactAgentCard({
+  name,
+  avatar,
+  email,
+  whatsappUrl,
+  label,
+  nameFallback,
+  legacyContactUrl,
+  legacyContactLabel,
+  className
+}) {
+  const hasAgent = !!name;
+  const displayName = hasAgent ? name : nameFallback != null ? nameFallback : "No agent assigned";
+  const showLegacyContact = hasAgent && !email && !whatsappUrl && !!legacyContactUrl;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border border-border bg-card p-4 flex items-center gap-3.5 min-w-0",
+        className
+      ),
+      children: [
+        hasAgent && avatar ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: avatar,
+              alt: displayName,
+              className: "h-10 w-10 shrink-0 rounded-full object-cover ring-2 ring-primary/20"
+            }
+          )
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-heading font-bold text-sm uppercase",
+              hasAgent ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+            ),
+            children: getInitial(name)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: label != null ? label : "Your Agent" }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm font-sans truncate",
+                hasAgent ? "font-semibold text-foreground" : "italic text-muted-foreground"
+              ),
+              children: displayName
+            }
+          )
+        ] }),
+        hasAgent && (email || whatsappUrl) && /* @__PURE__ */ jsxs("div", { className: "ml-auto shrink-0 flex items-center gap-1.5", children: [
+          email && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `mailto:${email}`,
+              className: "flex items-center justify-center h-8 w-8 rounded-full bg-primary/10 text-primary transition-colors hover:bg-primary/20",
+              "aria-label": `Email ${displayName}`,
+              title: email,
+              children: /* @__PURE__ */ jsx(MailIcon, { className: "w-3.5 h-3.5" })
+            }
+          ),
+          whatsappUrl && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: whatsappUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "flex items-center justify-center h-8 w-8 rounded-full bg-[#25D366]/15 text-[#25D366] transition-colors hover:bg-[#25D366]/25",
+              "aria-label": `WhatsApp ${displayName}`,
+              children: /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
+            }
+          )
+        ] }),
+        showLegacyContact && /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: legacyContactUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "ml-auto shrink-0 flex items-center gap-1.5 rounded-full bg-primary/10 px-3.5 py-1.5 text-xs font-semibold text-primary font-ui transition-colors hover:bg-primary/20",
+            children: [
+              /* @__PURE__ */ jsx(MessageCircleIcon, { className: "w-3.5 h-3.5" }),
+              legacyContactLabel != null ? legacyContactLabel : "Contact"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function WideAgentCard({
+  name,
+  avatar,
+  email,
+  whatsappUrl,
+  label,
+  nameFallback,
+  helperText,
+  className
+}) {
+  const hasAgent = !!name;
+  const displayName = hasAgent ? name : nameFallback != null ? nameFallback : "No agent assigned";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border bg-card p-5 flex flex-col gap-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
+          hasAgent && avatar ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: avatar,
+                alt: displayName,
+                className: "w-16 h-16 rounded-full object-cover ring-2 ring-primary/20"
+              }
+            )
+          ) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xl font-bold text-primary font-heading", children: getInitial(name) }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            label && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: label }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm font-sans text-foreground mt-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground font-heading", children: displayName }),
+              helperText && /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                helperText
+              ] })
+            ] })
+          ] })
+        ] }),
+        (whatsappUrl || email) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            whatsappUrl && /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: whatsappUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "flex items-center gap-2.5 rounded-lg border border-border px-4 py-2.5 text-sm font-sans text-foreground hover:bg-muted/50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 shrink-0 text-[#25D366]", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }),
+                  "WhatsApp"
+                ]
+              }
+            ),
+            email && /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: `mailto:${email}`,
+                className: "flex items-center gap-2.5 rounded-lg border border-border px-4 py-2.5 text-sm font-sans text-foreground hover:bg-muted/50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx(MailIcon, { className: "w-4 h-4 shrink-0 text-primary" }),
+                  "Email"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function AgentContactCard(props) {
+  if (props.layout === "wide") return /* @__PURE__ */ jsx(WideAgentCard, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx(CompactAgentCard, __spreadValues({}, props));
+}
 var STATUS_STYLES = {
   pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
   confirmed: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
   cancelled: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
-  completed: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
+  completed: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+  pendingRegistration: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+  pendingPayment: "bg-warning/15 text-warning-foreground dark:bg-warning/20 dark:text-warning",
+  pendingPaymentOverdue: "bg-destructive/15 text-destructive dark:bg-destructive/25 dark:text-destructive",
+  complete: "bg-success/15 text-success dark:bg-success/20 dark:text-success"
 };
 function StatusBadge({ status }) {
   return /* @__PURE__ */ jsx(
@@ -2264,7 +2446,7 @@ function AdventureSection({
   onRequestOpenDeleteModal,
   cannotRemoveLastTravellerLabel
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const [detailsOpen, setDetailsOpen] = React22.useState(false);
   const handleCopyUrl = (url) => {
     if (onCopyFormLink) {
@@ -2336,7 +2518,7 @@ function AdventureSection({
     ] }),
     detailsOpen && /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-5 lg:px-6 py-5 flex flex-col gap-5 bg-muted/10", children: [
       (adventure.detailsSlot || adventure.description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Itinerary" }),
+        /* @__PURE__ */ jsx("h4", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: (_e = adventure.itineraryLabel) != null ? _e : "Details" }),
         adventure.detailsSlot ? /* @__PURE__ */ jsx(
           "div",
           {
@@ -2441,8 +2623,8 @@ function AdventureSection({
               className: "flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-xs font-ui text-primary hover:border-primary hover:bg-primary/5 transition-colors",
               children: [
                 /* @__PURE__ */ jsx(PlusIcon, { className: "w-3 h-3" }),
-                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: (_e = adventure.addTravellerLabel) != null ? _e : "More travellers" }),
-                /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: (_g = (_f = adventure.addTravellerShortLabel) != null ? _f : adventure.addTravellerLabel) != null ? _g : "Add" })
+                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: (_f = adventure.addTravellerLabel) != null ? _f : "More travellers" }),
+                /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: (_h = (_g = adventure.addTravellerShortLabel) != null ? _g : adventure.addTravellerLabel) != null ? _h : "Add" })
               ]
             }
           )
@@ -2936,7 +3118,8 @@ function OrderSummary({
   summaryLineItems,
   subtotal,
   total,
-  depositInfo
+  depositInfo,
+  balanceDueLabel
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card p-5 lg:p-6 flex flex-col gap-4", children: [
     /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Order Summary" }),
@@ -3032,7 +3215,7 @@ function OrderSummary({
         /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground font-sans", children: depositInfo.remainingAmount })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-sans", children: "Balance due" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-sans", children: balanceDueLabel != null ? balanceDueLabel : "Balance due" }),
         /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground font-sans", children: depositInfo.balanceDueDate })
       ] })
     ] })
@@ -3043,11 +3226,15 @@ function BookingDetails({
   status,
   createdAt,
   contact,
+  agent,
   agentName,
   agentContactUrl,
   agentNameFallback,
   agentLabel,
   agentContactLabel,
+  contactSectionLabel,
+  payBalanceLabel,
+  balanceDueLabel,
   cannotRemoveLastTravellerLabel,
   adventures,
   summaryLineItems,
@@ -3077,7 +3264,7 @@ function BookingDetails({
   signOutLabel,
   className
 }) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const people = totalPeople(adventures);
   const hasSubmitAddTraveller = !!onSubmitAddTraveller;
   const hasSubmitEditTraveller = !!onSubmitEditTraveller;
@@ -3199,49 +3386,20 @@ function BookingDetails({
               /* @__PURE__ */ jsx("p", { className: "font-semibold", children: contact.name }),
               contact.email && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-sans truncate", children: contact.email })
             ] }),
-            (() => {
-              const hasAgent = !!agentName;
-              const displayName = hasAgent ? agentName : agentNameFallback != null ? agentNameFallback : "No agent assigned";
-              const initial = hasAgent ? agentName.charAt(0) : "?";
-              return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card p-4 flex items-center gap-3.5 min-w-0", children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-heading font-bold text-sm uppercase",
-                      hasAgent ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
-                    ),
-                    children: initial
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: agentLabel != null ? agentLabel : "Your Agent" }),
-                  /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "text-sm font-sans truncate",
-                        hasAgent ? "font-semibold text-foreground" : "italic text-muted-foreground"
-                      ),
-                      children: displayName
-                    }
-                  )
-                ] }),
-                hasAgent && agentContactUrl && /* @__PURE__ */ jsxs(
-                  "a",
-                  {
-                    href: agentContactUrl,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "ml-auto shrink-0 flex items-center gap-1.5 rounded-full bg-primary/10 px-3.5 py-1.5 text-xs font-semibold text-primary font-ui transition-colors hover:bg-primary/20",
-                    children: [
-                      /* @__PURE__ */ jsx(MessageCircleIcon, { className: "w-3.5 h-3.5" }),
-                      agentContactLabel != null ? agentContactLabel : "Contact"
-                    ]
-                  }
-                )
-              ] });
-            })(),
+            /* @__PURE__ */ jsx(
+              AgentContactCard,
+              {
+                layout: "compact",
+                name: (_a = agent == null ? void 0 : agent.name) != null ? _a : agentName,
+                avatar: agent == null ? void 0 : agent.avatar,
+                email: agent == null ? void 0 : agent.email,
+                whatsappUrl: agent == null ? void 0 : agent.whatsappUrl,
+                label: agentLabel,
+                nameFallback: agentNameFallback,
+                legacyContactUrl: agentContactUrl,
+                legacyContactLabel: agentContactLabel
+              }
+            ),
             /* @__PURE__ */ jsxs(InfoCard, { label: "Total People", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(UsersIcon, { className: "w-4 h-4 text-primary shrink-0" }),
@@ -3292,11 +3450,12 @@ function BookingDetails({
               summaryLineItems,
               subtotal,
               total,
-              depositInfo
+              depositInfo,
+              balanceDueLabel
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card p-5 lg:p-6 flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Responsible Person" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: contactSectionLabel != null ? contactSectionLabel : "Responsible Person" }),
             /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-6 gap-y-3", children: [
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Name" }),
@@ -3304,15 +3463,15 @@ function BookingDetails({
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Email" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans truncate", children: (_a = contact.email) != null ? _a : "\u2014" })
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans truncate", children: (_b = contact.email) != null ? _b : "\u2014" })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Phone" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_b = contact.phone) != null ? _b : "\u2014" })
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_c = contact.phone) != null ? _c : "\u2014" })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Country" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_c = contact.country) != null ? _c : "\u2014" })
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_d = contact.country) != null ? _d : "\u2014" })
               ] }),
               contact.passport && /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Passport / CPF" }),
@@ -3323,24 +3482,38 @@ function BookingDetails({
           (onPayBalance || onCancelRequest) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
             depositInfo && !depositInfo.isPaidInFull && // Se consumer passar remainingAmountValue, só mostra botão quando saldo > 0.
             // Quando undefined, mantém comportamento antigo (backward compat).
-            (depositInfo.remainingAmountValue === void 0 || depositInfo.remainingAmountValue > 0) && onPayBalance && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: onPayBalance,
-                className: cn(
-                  "w-full rounded-full bg-primary py-3.5 text-center text-sm font-bold uppercase tracking-wide",
-                  "text-primary-foreground font-heading transition-colors hover:bg-primary/90",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  "flex items-center justify-center gap-2"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(CreditCardIcon, { className: "w-4 h-4" }),
-                  "Pay remaining balance \u2014 ",
-                  depositInfo.remainingAmount
-                ]
-              }
-            ),
+            (depositInfo.remainingAmountValue === void 0 || depositInfo.remainingAmountValue > 0) && onPayBalance && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onPayBalance,
+                  className: cn(
+                    "w-full rounded-full py-3.5 text-center text-sm font-bold uppercase tracking-wide font-heading",
+                    depositInfo.isOverdue ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-primary text-primary-foreground hover:bg-primary/90",
+                    "transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "flex items-center justify-center gap-2"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(CreditCardIcon, { className: "w-4 h-4" }),
+                    payBalanceLabel != null ? payBalanceLabel : "Pay remaining balance",
+                    " \u2014 ",
+                    depositInfo.remainingAmount
+                  ]
+                }
+              ),
+              depositInfo.dueDateLabel && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-xs font-sans",
+                    depositInfo.isOverdue ? "text-destructive font-semibold" : "text-muted-foreground"
+                  ),
+                  children: depositInfo.dueDateLabel
+                }
+              )
+            ] }),
             onCancelRequest && status !== "cancelled" && /* @__PURE__ */ jsxs(
               "button",
               {
@@ -3492,7 +3665,7 @@ var DEFAULT_LABELS = {
   childrenUnit: "child(ren)",
   travellersLabel: "Travellers",
   childBadge: "child",
-  itineraryLabel: "Itinerary",
+  itineraryLabel: "Details",
   includedLabel: "O que est\xE1 incluso",
   notIncludedLabel: "O que n\xE3o est\xE1 incluso",
   pricingLabel: "Pricing",
@@ -5675,74 +5848,19 @@ var OTPCodeInput = ({
   required
 }) => {
   const baseId = id != null ? id : React22.useId();
-  const inputRefs = React22.useRef([]);
+  const inputRef = React22.useRef(null);
+  const [focused, setFocused] = React22.useState(false);
   const digits = React22.useMemo(() => {
     const arr = value.split("").slice(0, length);
     while (arr.length < length) arr.push("");
     return arr;
   }, [value, length]);
-  const updateValue = (newDigits) => {
-    onChange(newDigits.join(""));
-  };
-  const focusedIndexRef = React22.useRef(0);
-  const focusSlot = (index) => {
-    var _a;
-    if (index >= 0 && index < length) {
-      (_a = inputRefs.current[index]) == null ? void 0 : _a.focus();
-    }
-  };
-  const handleChange = (index, raw) => {
-    const numeric = raw.replace(/\D/g, "");
-    if (!numeric) return;
-    const newDigits = [...digits];
-    if (numeric.length === 1) {
-      newDigits[index] = numeric;
-      updateValue(newDigits);
-      if (index < length - 1) focusSlot(index + 1);
-      return;
-    }
-    const toPaste = numeric.slice(0, length - index);
-    for (let i = 0; i < toPaste.length; i++) {
-      newDigits[index + i] = toPaste[i];
-    }
-    updateValue(newDigits);
-    const lastFilled = Math.min(index + toPaste.length, length) - 1;
-    focusSlot(lastFilled < length - 1 ? lastFilled + 1 : lastFilled);
-  };
-  const handleKeyDown = (index, e) => {
-    if (e.key === "Backspace") {
-      e.preventDefault();
-      const newDigits = [...digits];
-      if (newDigits[index]) {
-        newDigits[index] = "";
-        updateValue(newDigits);
-      } else if (index > 0) {
-        newDigits[index - 1] = "";
-        updateValue(newDigits);
-        focusSlot(index - 1);
-      }
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      focusSlot(index - 1);
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      focusSlot(index + 1);
-    } else if (e.key === "Tab") ; else if (!/^\d$/.test(e.key) && e.key.length === 1) {
-      e.preventDefault();
-    }
-  };
-  const handlePaste = (e, startIndex) => {
-    e.preventDefault();
-    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
-    if (!pasted) return;
-    const newDigits = [...digits];
-    for (let i = 0; i < pasted.length && startIndex + i < length; i++) {
-      newDigits[startIndex + i] = pasted[i];
-    }
-    updateValue(newDigits);
-    const lastFilled = Math.min(startIndex + pasted.length, length) - 1;
-    focusSlot(lastFilled < length - 1 ? lastFilled + 1 : lastFilled);
+  const handleChange = (e) => {
+    const numeric = e.target.value.replace(/\D/g, "").slice(0, length);
+    onChange(numeric);
   };
+  const activeIndex = Math.min(value.length, length - 1);
+  const errorId = error ? `${baseId}-error` : void 0;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center", className), children: [
     /* @__PURE__ */ jsx(
       "label",
@@ -5755,50 +5873,71 @@ var OTPCodeInput = ({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "flex justify-center gap-2",
+          "relative",
           disabled && "opacity-50 pointer-events-none"
         ),
-        role: "group",
-        "aria-label": label,
-        children: digits.map((digit, index) => /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: (el) => {
-              inputRefs.current[index] = el;
-            },
-            id: index === 0 ? baseId : `${baseId}-${index}`,
-            type: "text",
-            inputMode: "numeric",
-            pattern: "\\d*",
-            maxLength: 1,
-            value: digit,
-            autoComplete: index === 0 ? "one-time-code" : "off",
-            "aria-label": `${label} d\xEDgito ${index + 1} de ${length}`,
-            disabled,
-            onChange: (e) => handleChange(index, e.target.value),
-            onKeyDown: (e) => handleKeyDown(index, e),
-            onPaste: (e) => handlePaste(e, index),
-            onFocus: (e) => {
-              focusedIndexRef.current = index;
-              e.target.select();
-            },
-            className: cn(
-              "w-11 h-14 text-center text-lg rounded-lg border font-ui",
-              "bg-background text-foreground border-border",
-              "transition-colors",
-              "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
-              error && "border-destructive focus:border-destructive focus:ring-destructive"
-            )
-          },
-          index
-        ))
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: baseId,
+              type: "text",
+              inputMode: "numeric",
+              pattern: "\\d*",
+              maxLength: length,
+              value,
+              autoComplete: "one-time-code",
+              "aria-label": label,
+              "aria-describedby": errorId,
+              "aria-invalid": !!error,
+              disabled,
+              required,
+              onChange: handleChange,
+              onFocus: () => setFocused(true),
+              onBlur: () => setFocused(false),
+              className: "absolute inset-0 w-full h-full opacity-0 cursor-text outline-none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex justify-center gap-2 pointer-events-none",
+              role: "group",
+              "aria-hidden": "true",
+              children: digits.map((digit, i) => {
+                const isActive = focused && i === activeIndex;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "w-11 h-14 flex items-center justify-center text-lg rounded-lg border font-ui",
+                      "bg-background text-foreground border-border transition-colors",
+                      isActive && "border-primary ring-1 ring-primary",
+                      error && "border-destructive"
+                    ),
+                    children: digit
+                  },
+                  i
+                );
+              })
+            }
+          )
+        ]
       }
     ),
-    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive font-ui self-start", children: error })
+    error && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        className: "mt-1 text-xs text-destructive font-ui self-start",
+        children: error
+      }
+    )
   ] });
 };
 OTPCodeInput.displayName = "OTPCodeInput";
@@ -9234,6 +9373,6 @@ function LeadCapturePopup({
   );
 }
 
-export { ActivityCard, 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 };
+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