@planetaexo/design-system 0.51.0 → 0.52.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React28 from 'react';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect, useId } from 'react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -3541,6 +3541,7 @@ function BookingDetails({
   status,
   statusLabel,
   createdAt,
+  cancelledAt,
   contact,
   agent,
   agentName,
@@ -3585,7 +3586,7 @@ function BookingDetails({
   labels,
   className
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
   const people = totalPeople(adventures);
   const hasSubmitAddTraveller = !!onSubmitAddTraveller;
   const hasSubmitEditTraveller = !!onSubmitEditTraveller;
@@ -3718,12 +3719,18 @@ function BookingDetails({
                   bookingId
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-sans", children: (_b = (_a = labels == null ? void 0 : labels.createdOn) == null ? void 0 : _a.call(labels, createdAt)) != null ? _b : `Created on ${createdAt}` })
+              /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground font-sans", children: [
+                (_b = (_a = labels == null ? void 0 : labels.createdOn) == null ? void 0 : _a.call(labels, createdAt)) != null ? _b : `Created on ${createdAt}`,
+                cancelledAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  ", ",
+                  /* @__PURE__ */ jsx("span", { className: "text-destructive font-medium", children: (_d = (_c = labels == null ? void 0 : labels.cancelledOn) == null ? void 0 : _c.call(labels, cancelledAt)) != null ? _d : `cancelled on ${cancelledAt}` })
+                ] })
+              ] })
             ] }),
             /* @__PURE__ */ jsx(StatusBadge, { status, label: statusLabel })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-3", children: [
-            /* @__PURE__ */ jsxs(InfoCard, { label: (_c = labels == null ? void 0 : labels.contactInfo) != null ? _c : "Contact", children: [
+            /* @__PURE__ */ jsxs(InfoCard, { label: (_e = labels == null ? void 0 : labels.contactInfo) != null ? _e : "Contact", children: [
               /* @__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 })
             ] }),
@@ -3731,7 +3738,7 @@ function BookingDetails({
               AgentContactCard,
               {
                 layout: "compact",
-                name: (_d = agent == null ? void 0 : agent.name) != null ? _d : agentName,
+                name: (_f = agent == null ? void 0 : agent.name) != null ? _f : agentName,
                 avatar: agent == null ? void 0 : agent.avatar,
                 email: agent == null ? void 0 : agent.email,
                 whatsappUrl: agent == null ? void 0 : agent.whatsappUrl,
@@ -3741,20 +3748,20 @@ function BookingDetails({
                 legacyContactLabel: agentContactLabel
               }
             ),
-            /* @__PURE__ */ jsxs(InfoCard, { label: (_e = labels == null ? void 0 : labels.totalPeople) != null ? _e : "Total People", children: [
+            /* @__PURE__ */ jsxs(InfoCard, { label: (_g = labels == null ? void 0 : labels.totalPeople) != null ? _g : "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" }),
-                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: (_g = (_f = labels == null ? void 0 : labels.personCount) == null ? void 0 : _f.call(labels, people.total)) != null ? _g : `${people.total} person(s)` })
+                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: (_i = (_h = labels == null ? void 0 : labels.personCount) == null ? void 0 : _h.call(labels, people.total)) != null ? _i : `${people.total} person(s)` })
               ] }),
               /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-sans", children: [
-                people.adults > 0 ? (_j = (_i = (_h = labels == null ? void 0 : labels.peopleBreakdown) == null ? void 0 : _h.adults) == null ? void 0 : _i.call(_h, people.adults)) != null ? _j : `Adults: ${people.adults}` : null,
-                people.children > 0 ? (_m = (_l = (_k = labels == null ? void 0 : labels.peopleBreakdown) == null ? void 0 : _k.children) == null ? void 0 : _l.call(_k, people.children)) != null ? _m : `Children: ${people.children}` : null,
-                people.seniors > 0 ? (_p = (_o = (_n = labels == null ? void 0 : labels.peopleBreakdown) == null ? void 0 : _n.seniors) == null ? void 0 : _o.call(_n, people.seniors)) != null ? _p : `Seniors: ${people.seniors}` : null
+                people.adults > 0 ? (_l = (_k = (_j = labels == null ? void 0 : labels.peopleBreakdown) == null ? void 0 : _j.adults) == null ? void 0 : _k.call(_j, people.adults)) != null ? _l : `Adults: ${people.adults}` : null,
+                people.children > 0 ? (_o = (_n = (_m = labels == null ? void 0 : labels.peopleBreakdown) == null ? void 0 : _m.children) == null ? void 0 : _n.call(_m, people.children)) != null ? _o : `Children: ${people.children}` : null,
+                people.seniors > 0 ? (_r = (_q = (_p = labels == null ? void 0 : labels.peopleBreakdown) == null ? void 0 : _p.seniors) == null ? void 0 : _q.call(_p, people.seniors)) != null ? _r : `Seniors: ${people.seniors}` : null
               ].filter(Boolean).join(" \xB7 ") })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: (_r = (_q = labels == null ? void 0 : labels.adventuresSection) == null ? void 0 : _q.call(labels, adventures.length)) != null ? _r : `Adventures (${adventures.length})` }),
+            /* @__PURE__ */ jsx("h2", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: (_t = (_s = labels == null ? void 0 : labels.adventuresSection) == null ? void 0 : _s.call(labels, adventures.length)) != null ? _t : `Adventures (${adventures.length})` }),
             adventures.map((adventure) => /* @__PURE__ */ jsx(
               AdventureSection,
               {
@@ -3799,23 +3806,23 @@ function BookingDetails({
             /* @__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: (_t = (_s = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _s.name) != null ? _t : "Name" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: (_v = (_u = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _u.name) != null ? _v : "Name" }),
                 /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground font-sans", children: contact.name })
               ] }),
               /* @__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: (_v = (_u = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _u.email) != null ? _v : "Email" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans truncate", children: (_w = contact.email) != null ? _w : "\u2014" })
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: (_x = (_w = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _w.email) != null ? _x : "Email" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans truncate", children: (_y = contact.email) != null ? _y : "\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: (_y = (_x = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _x.phone) != null ? _y : "Phone" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_z = contact.phone) != null ? _z : "\u2014" })
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: (_A = (_z = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _z.phone) != null ? _A : "Phone" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_B = contact.phone) != 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: (_B = (_A = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _A.country) != null ? _B : "Country" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_C = contact.country) != null ? _C : "\u2014" })
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: (_D = (_C = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _C.country) != null ? _D : "Country" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_E = contact.country) != null ? _E : "\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: (_E = (_D = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _D.document) != null ? _E : "Passport / ID" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: (_G = (_F = labels == null ? void 0 : labels.contactDetailsFields) == null ? void 0 : _F.document) != null ? _G : "Passport / ID" }),
                 /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: contact.passport })
               ] }),
               (() => {
@@ -3876,7 +3883,7 @@ function BookingDetails({
                 className: "flex items-center gap-1.5 text-xs font-ui text-muted-foreground hover:text-destructive transition-colors underline underline-offset-2",
                 children: [
                   /* @__PURE__ */ jsx(AlertCircleIcon, { className: "w-3 h-3" }),
-                  (_F = labels == null ? void 0 : labels.cancelRequestLabel) != null ? _F : "Request cancellation"
+                  (_H = labels == null ? void 0 : labels.cancelRequestLabel) != null ? _H : "Request cancellation"
                 ]
               }
             )
@@ -3926,7 +3933,7 @@ function BookingDetails({
       ResendInviteConfirmDialog,
       {
         open: resendInviteDialogState.open,
-        travellerName: resendInviteDialogState.traveller ? `${(_G = resendInviteDialogState.traveller.firstName) != null ? _G : ""} ${(_H = resendInviteDialogState.traveller.lastName) != null ? _H : ""}`.trim() : "",
+        travellerName: resendInviteDialogState.traveller ? `${(_I = resendInviteDialogState.traveller.firstName) != null ? _I : ""} ${(_J = resendInviteDialogState.traveller.lastName) != null ? _J : ""}`.trim() : "",
         onClose: closeResendInviteDialog,
         onConfirm: () => {
           const traveller = resendInviteDialogState.traveller;
@@ -14270,7 +14277,446 @@ function LeadCapturePopup({
     }
   );
 }
+function ExoOrb({
+  size = 80,
+  logoSrc = "/white_transparent_exo.png",
+  pulse = true,
+  trackCursor = true,
+  className
+}) {
+  const uid = useId().replace(/:/g, "");
+  const id = (name) => `exo-orb-${uid}-${name}`;
+  const rootRef = useRef(null);
+  const pupilRef = useRef(null);
+  useEffect(() => {
+    if (!trackCursor) return;
+    if (typeof window === "undefined") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const root = rootRef.current;
+    const pupil = pupilRef.current;
+    if (!root || !pupil) return;
+    const MAX_OFFSET = 3.5;
+    const REACH_PX = 260;
+    const EASE = 0.18;
+    let targetX = 0, targetY = 0, curX = 0, curY = 0;
+    let raf = 0;
+    const onMove = (e) => {
+      const r = root.getBoundingClientRect();
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height / 2;
+      const dx = e.clientX - cx;
+      const dy = e.clientY - cy;
+      const dist = Math.hypot(dx, dy) || 1;
+      const factor = Math.min(dist, REACH_PX) / REACH_PX;
+      targetX = dx / dist * MAX_OFFSET * factor;
+      targetY = dy / dist * MAX_OFFSET * factor;
+    };
+    const onLeave = () => {
+      targetX = 0;
+      targetY = 0;
+    };
+    const tick = () => {
+      curX += (targetX - curX) * EASE;
+      curY += (targetY - curY) * EASE;
+      pupil.setAttribute(
+        "transform",
+        `translate(${curX.toFixed(2)} ${curY.toFixed(2)})`
+      );
+      raf = requestAnimationFrame(tick);
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    window.addEventListener("pointerleave", onLeave);
+    window.addEventListener("blur", onLeave);
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerleave", onLeave);
+      window.removeEventListener("blur", onLeave);
+    };
+  }, [trackCursor]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: rootRef,
+      "aria-hidden": "true",
+      className: cn("inline-block leading-none", className),
+      style: { width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: size,
+            height: size,
+            viewBox: "0 0 100 100",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: cn(
+              "block overflow-visible",
+              pulse && "motion-safe:animate-[exo-orb-pulse_3.6s_ease-in-out_infinite]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("defs", { children: [
+                /* @__PURE__ */ jsxs("radialGradient", { id: id("body"), cx: "35%", cy: "30%", r: "75%", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#a8efe2" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "35%", stopColor: "#5bd3bf" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "#47bca9" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#155b52" })
+                ] }),
+                /* @__PURE__ */ jsxs("radialGradient", { id: id("highlight"), cx: "30%", cy: "22%", r: "35%", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "0.85" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#ffffff", stopOpacity: "0.10" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#ffffff", stopOpacity: "0" })
+                ] }),
+                /* @__PURE__ */ jsxs("radialGradient", { id: id("rim"), cx: "60%", cy: "85%", r: "65%", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#000000", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#000000", stopOpacity: "0.35" })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "filter",
+                  {
+                    id: id("glow"),
+                    x: "-60%",
+                    y: "-60%",
+                    width: "220%",
+                    height: "220%",
+                    children: [
+                      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
+                      /* @__PURE__ */ jsx(
+                        "feColorMatrix",
+                        {
+                          in: "blur",
+                          type: "matrix",
+                          values: "0 0 0 0 0.28\n                      0 0 0 0 0.74\n                      0 0 0 0 0.66\n                      0 0 0 1 0",
+                          result: "tinted"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("feComponentTransfer", { in: "tinted", result: "strong", children: /* @__PURE__ */ jsx("feFuncA", { type: "linear", slope: 1.6 }) }),
+                      /* @__PURE__ */ jsxs("feMerge", { children: [
+                        /* @__PURE__ */ jsx("feMergeNode", { in: "strong" }),
+                        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("clipPath", { id: id("clip"), children: /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "22" }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: "30",
+                  fill: "#47bca9",
+                  opacity: "0.18",
+                  filter: `url(#${id("glow")})`
+                }
+              ),
+              /* @__PURE__ */ jsxs("g", { filter: `url(#${id("glow")})`, children: [
+                /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "22", fill: `url(#${id("body")})` }),
+                /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "22", fill: `url(#${id("highlight")})` }),
+                /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "22", fill: `url(#${id("rim")})` })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M 34 38 Q 50 28 66 38",
+                  stroke: "#ffffff",
+                  strokeOpacity: "0.45",
+                  strokeWidth: "1.4",
+                  strokeLinecap: "round",
+                  fill: "none"
+                }
+              ),
+              /* @__PURE__ */ jsx("g", { clipPath: `url(#${id("clip")})`, children: /* @__PURE__ */ jsx("g", { ref: pupilRef, children: /* @__PURE__ */ jsx(
+                "image",
+                {
+                  href: logoSrc,
+                  x: "33.8",
+                  y: "33.8",
+                  width: "32.4",
+                  height: "32.4",
+                  preserveAspectRatio: "xMidYMid meet"
+                }
+              ) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `@keyframes exo-orb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}` })
+      ]
+    }
+  );
+}
+function Textarea(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    __spreadValues({
+      "data-slot": "textarea",
+      className: cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )
+    }, props)
+  );
+}
+var DEFAULT_BASE_URL = "https://staging.ask.planetaexo.com";
+var DEFAULT_SUGGESTIONS = [
+  { label: "Where do I start?", ask: "I am new to PlanetaEXO, what should I check out first?" },
+  { label: "Destinations", ask: "What destinations does PlanetaEXO offer?" },
+  { label: "5 days in the Amazon", ask: "Plan a 5-day trip to the Amazon for two travelers." },
+  { label: "Mount Roraima trek", ask: "What is included in the Mount Roraima trek?" },
+  { label: "Best time for Pantanal", ask: "Best time of year to visit the Pantanal?" },
+  { label: "Fitness level needed", ask: "How fit do I need to be for an EXO trek?" }
+];
+function AskExo({
+  baseUrl = DEFAULT_BASE_URL,
+  variant = "suggestions",
+  eyebrow = "PLANETAEXO",
+  title = "Ask EXO",
+  subtitle = "Our AI travel concierge will answer in seconds.",
+  suggestions = DEFAULT_SUGGESTIONS,
+  inputPlaceholder,
+  submitLabel = "Ask",
+  logoSrc = "/white_transparent_exo.png",
+  className,
+  teaser = "Need help?",
+  teaserDelayMs = 2500,
+  teaserDurationMs = 6e3
+}) {
+  const [open, setOpen] = useState(false);
+  const [question, setQuestion] = useState("");
+  const [teaserVisible, setTeaserVisible] = useState(false);
+  const teaserEnabled = !!teaser && teaser !== "";
+  const inputRef = useRef(null);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      setQuestion("");
+      return;
+    }
+    const t = setTimeout(() => {
+      var _a, _b;
+      if (variant === "compose") (_a = textareaRef.current) == null ? void 0 : _a.focus();
+      else (_b = inputRef.current) == null ? void 0 : _b.focus();
+    }, 200);
+    return () => clearTimeout(t);
+  }, [open, variant]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  useEffect(() => {
+    if (!teaserEnabled || open) return;
+    if (typeof window === "undefined") return;
+    const showTimer = setTimeout(() => setTeaserVisible(true), teaserDelayMs);
+    const hideTimer = setTimeout(
+      () => setTeaserVisible(false),
+      teaserDelayMs + teaserDurationMs
+    );
+    return () => {
+      clearTimeout(showTimer);
+      clearTimeout(hideTimer);
+    };
+  }, [teaserEnabled, teaserDelayMs, teaserDurationMs, open]);
+  useEffect(() => {
+    if (open) setTeaserVisible(false);
+  }, [open]);
+  const askExo = (q) => {
+    const trimmed = q.trim();
+    if (!trimmed) return;
+    const url = baseUrl.replace(/\/+$/, "") + "/?q=" + encodeURIComponent(trimmed) + "&source=" + encodeURIComponent(window.location.href);
+    window.open(url, "_blank", "noopener,noreferrer");
+    setOpen(false);
+  };
+  const placeholder = inputPlaceholder != null ? inputPlaceholder : variant === "compose" ? "Type your question\u2026" : "Ask your own question\u2026";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    teaserEnabled && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-hidden": !teaserVisible,
+        tabIndex: teaserVisible ? 0 : -1,
+        onClick: () => setOpen(true),
+        className: cn(
+          // shape + tone
+          "fixed right-24 bottom-13 z-40 cursor-pointer rounded-full border border-border bg-card px-3.5 py-1.5",
+          "font-sans text-[12.5px] leading-none font-normal whitespace-nowrap text-muted-foreground",
+          "shadow-[0_6px_18px_oklch(0.20_0.002_60_/_0.12)]",
+          // entrance / exit animation
+          "transition-[opacity,transform,color] duration-300 ease-out",
+          teaserVisible ? "translate-x-0 scale-100 opacity-100" : "pointer-events-none translate-x-1 scale-95 opacity-0",
+          // hover
+          "hover:text-foreground",
+          // a11y
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2",
+          "max-[480px]:hidden"
+        ),
+        children: teaser
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": open ? "Close Ask EXO" : "Open Ask EXO",
+        "aria-expanded": open,
+        "aria-controls": "ask-exo-panel",
+        onClick: () => setOpen((v) => !v),
+        className: cn(
+          "fixed right-5 bottom-6 z-40 size-20 cursor-pointer border-0 bg-transparent p-0",
+          "transition-transform duration-200 ease-out hover:-translate-y-px hover:scale-[1.04] active:translate-y-0 active:scale-[0.98]",
+          "focus-visible:outline-none [-webkit-tap-highlight-color:transparent]"
+        ),
+        children: /* @__PURE__ */ jsx(ExoOrb, { size: 80, logoSrc })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        id: "ask-exo-panel",
+        role: "dialog",
+        "aria-labelledby": "ask-exo-title",
+        "aria-hidden": !open,
+        "data-open": open,
+        className: cn(
+          "fixed right-5 bottom-30 z-50 w-[400px] max-h-[min(640px,80vh)]",
+          variant === "compose" && "max-h-[min(560px,82vh)]",
+          "flex flex-col overflow-hidden rounded-2xl border border-border bg-card text-card-foreground",
+          "shadow-[0_40px_100px_oklch(0.20_0.002_60_/_0.35)]",
+          "transition-[opacity,transform] duration-200 ease-out",
+          "data-[open=false]:pointer-events-none data-[open=false]:translate-y-4 data-[open=false]:scale-[0.985] data-[open=false]:opacity-0",
+          "data-[open=true]:pointer-events-auto data-[open=true]:translate-y-0 data-[open=true]:scale-100 data-[open=true]:opacity-100",
+          "max-[480px]:right-2 max-[480px]:bottom-28 max-[480px]:w-[calc(100%-1rem)] max-[480px]:rounded-xl",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "relative border-b border-border bg-gradient-to-b from-primary-300/20 to-transparent px-5 py-4", children: [
+            /* @__PURE__ */ jsx("p", { className: "m-0 mb-1 font-ui text-[10.5px] font-bold tracking-[1.4px] text-primary-800 uppercase", children: eyebrow }),
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                id: "ask-exo-title",
+                className: "m-0 font-heading text-[20px] font-bold tracking-[-0.3px] text-foreground",
+                children: title
+              }
+            ),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1.5 mb-0 font-sans text-[13.5px] leading-relaxed text-muted-foreground", children: subtitle }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close",
+                onClick: () => setOpen(false),
+                className: cn(
+                  "absolute top-3 right-3 inline-flex size-8 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent text-muted-foreground transition-colors",
+                  "hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                ),
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+              }
+            )
+          ] }),
+          variant === "compose" ? (
+            /* — Compose variant: just a big textarea — */
+            /* @__PURE__ */ jsxs(
+              "form",
+              {
+                className: "flex flex-1 flex-col gap-2.5 overflow-y-auto p-5",
+                onSubmit: (e) => {
+                  e.preventDefault();
+                  askExo(question);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Textarea,
+                    {
+                      ref: textareaRef,
+                      placeholder,
+                      value: question,
+                      onChange: (e) => setQuestion(e.target.value),
+                      maxLength: 500,
+                      className: "min-h-[220px] flex-1 resize-y bg-muted/50 px-4 py-3.5 font-sans text-[15px] leading-relaxed placeholder:italic focus-visible:bg-card"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button2,
+                    {
+                      type: "submit",
+                      disabled: !question.trim(),
+                      className: "h-11 w-full font-ui text-[13px] font-bold tracking-[0.5px] uppercase",
+                      children: submitLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 mb-0 text-center font-ui text-[10.5px] font-bold tracking-[0.5px] text-muted-foreground uppercase", children: "Opens in a new tab" })
+                ]
+              }
+            )
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3.5 overflow-y-auto px-5 py-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "mt-1 mb-0 font-ui text-[10.5px] font-bold tracking-[1.2px] text-muted-foreground uppercase", children: "Suggested questions" }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: suggestions.map((s) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => askExo(s.ask),
+                  className: cn(
+                    "cursor-pointer rounded-full border border-border bg-muted/60 px-3.5 py-2 text-left font-ui text-[12.5px] font-bold leading-tight text-foreground",
+                    "transition-colors hover:border-primary hover:bg-primary-100 hover:text-primary-800",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  ),
+                  children: s.label
+                },
+                s.label
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxs("footer", { className: "border-t border-border bg-card px-4 py-3.5", children: [
+              /* @__PURE__ */ jsxs(
+                "form",
+                {
+                  className: "flex items-stretch gap-2",
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    askExo(question);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        ref: inputRef,
+                        type: "text",
+                        placeholder,
+                        value: question,
+                        onChange: (e) => setQuestion(e.target.value),
+                        maxLength: 500,
+                        "aria-label": "Ask EXO",
+                        className: "h-10 flex-1 rounded-xl bg-muted/50 px-3.5 py-2.5 font-sans text-[14.5px] focus-visible:bg-card"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button2,
+                      {
+                        type: "submit",
+                        disabled: !question.trim(),
+                        className: "h-10 min-w-[86px] rounded-xl font-ui text-[12px] font-bold tracking-[0.5px] uppercase",
+                        children: submitLabel
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "mt-2.5 mb-0 text-center font-ui text-[10.5px] font-bold tracking-[0.5px] text-muted-foreground uppercase", children: "Opens in a new tab" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 
-export { ActivityCard, AgentContactCard, Alert, BirthDateField, BookingAdventureCard, BookingCancellationEmail, BookingConfirmedCard, BookingCreatedEmail, BookingDetails, BookingForm, BookingOtpEmail, BookingPaymentConfirmationEmail, BookingShell, BookingSummary, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, FilterPanel, FloatingInput, FloatingSelect, Itinerary, ItineraryDay, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, OTPCodeInput, Offer, OfferAdventureCard, PartnerBookingCreatedEmail, PartnerRegistrationCompleteEmail, PaymentAmountSelector, PaymentDetailsBlock, PaymentMethodSelector, PaymentModalShell, PaymentReceiptEmail, PaymentReminderEmail, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationProgressBar, RegistrationReminderEmail, RegistrationReminderIndividualEmail, RegistrationSuccessCard, SiteHeader, TERMS_ACCEPT_KEY, TermsSection, ThemeToggle, Toast, TransferDetailsBlock, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, TrustpilotEmbed, buttonVariants, cn, emailTokens, formatCpf, getStripeAppearance, itineraryDaySpecIcons, stripeAppearance, validateCpf, wrapEmailHtml };
+export { ActivityCard, AgentContactCard, Alert, AskExo, BirthDateField, BookingAdventureCard, BookingCancellationEmail, BookingConfirmedCard, BookingCreatedEmail, BookingDetails, BookingForm, BookingOtpEmail, BookingPaymentConfirmationEmail, BookingShell, BookingSummary, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, ExoOrb, FilterPanel, FloatingInput, FloatingSelect, Itinerary, ItineraryDay, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, OTPCodeInput, Offer, OfferAdventureCard, PartnerBookingCreatedEmail, PartnerRegistrationCompleteEmail, PaymentAmountSelector, PaymentDetailsBlock, PaymentMethodSelector, PaymentModalShell, PaymentReceiptEmail, PaymentReminderEmail, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationProgressBar, RegistrationReminderEmail, RegistrationReminderIndividualEmail, RegistrationSuccessCard, SiteHeader, TERMS_ACCEPT_KEY, TermsSection, ThemeToggle, Toast, TransferDetailsBlock, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, TrustpilotEmbed, buttonVariants, cn, emailTokens, formatCpf, getStripeAppearance, itineraryDaySpecIcons, stripeAppearance, validateCpf, wrapEmailHtml };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map