@planetaexo/design-system 0.4.15 → 0.4.16

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React21 = require('react');
+var React22 = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -36,7 +36,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React21__namespace = /*#__PURE__*/_interopNamespace(React21);
+var React22__namespace = /*#__PURE__*/_interopNamespace(React22);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -101,7 +101,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React21__namespace.forwardRef(
+var Button = React22__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -296,10 +296,10 @@ function DialogDescription(_a) {
     }, props)
   );
 }
-var FloatingInput = React21__namespace.forwardRef(
+var FloatingInput = React22__namespace.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 : React21__namespace.useId();
+    const inputId = id != null ? id : React22__namespace.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -339,10 +339,10 @@ var FloatingInput = React21__namespace.forwardRef(
   }
 );
 FloatingInput.displayName = "FloatingInput";
-var FloatingSelect = React21__namespace.forwardRef(
+var FloatingSelect = React22__namespace.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 : React21__namespace.useId();
+    const inputId = id != null ? id : React22__namespace.useId();
     const hasValue = typeof value === "string" ? value !== "" : value !== void 0 && value !== null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -605,11 +605,11 @@ function PhoneCountrySelect({
   className
 }) {
   var _a;
-  const [open, setOpen] = React21__namespace.useState(false);
-  const containerRef = React21__namespace.useRef(null);
-  const listRef = React21__namespace.useRef(null);
+  const [open, setOpen] = React22__namespace.useState(false);
+  const containerRef = React22__namespace.useRef(null);
+  const listRef = React22__namespace.useRef(null);
   const selected = (_a = PHONE_COUNTRIES.find((c) => c.code === value)) != null ? _a : PHONE_COUNTRIES[0];
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       var _a2;
@@ -620,7 +620,7 @@ function PhoneCountrySelect({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!open || !listRef.current) return;
     const activeEl = listRef.current.querySelector("[data-selected=true]");
     activeEl == null ? void 0 : activeEl.scrollIntoView({ block: "nearest" });
@@ -884,8 +884,8 @@ function CalendarDayButton(_a) {
     "locale"
   ]);
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  const ref = React21__namespace.useRef(null);
-  React21__namespace.useEffect(() => {
+  const ref = React22__namespace.useRef(null);
+  React22__namespace.useEffect(() => {
     var _a2;
     if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
   }, [modifiers.focused]);
@@ -915,16 +915,16 @@ function BirthDateField({
   error,
   className
 }) {
-  const [open, setOpen] = React21__namespace.useState(false);
-  const [text, setText] = React21__namespace.useState(
+  const [open, setOpen] = React22__namespace.useState(false);
+  const [text, setText] = React22__namespace.useState(
     value ? dateFns.format(value, "dd/MM/yyyy") : ""
   );
-  const containerRef = React21__namespace.useRef(null);
-  const inputId = React21__namespace.useId();
-  React21__namespace.useEffect(() => {
+  const containerRef = React22__namespace.useRef(null);
+  const inputId = React22__namespace.useId();
+  React22__namespace.useEffect(() => {
     setText(value ? dateFns.format(value, "dd/MM/yyyy") : "");
   }, [value]);
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       var _a;
@@ -1127,14 +1127,14 @@ function CountrySearchField({
 }) {
   var _a;
   const list = countries != null ? countries : COUNTRIES;
-  const [query, setQuery] = React21__namespace.useState("");
-  const [open, setOpen] = React21__namespace.useState(false);
-  const containerRef = React21__namespace.useRef(null);
-  const searchRef = React21__namespace.useRef(null);
+  const [query, setQuery] = React22__namespace.useState("");
+  const [open, setOpen] = React22__namespace.useState(false);
+  const containerRef = React22__namespace.useRef(null);
+  const searchRef = React22__namespace.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;
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       var _a2;
@@ -1241,7 +1241,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] = React21__namespace.useState(
+  const [checkedInternal, setCheckedInternal] = React22__namespace.useState(
     new Set((_d = (_c = adventure.optionals) == null ? void 0 : _c.filter((o) => o.defaultChecked).map((o) => o.id)) != null ? _d : [])
   );
   const isChecked = (opt) => {
@@ -1578,7 +1578,7 @@ function BookingShell({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border px-5 py-4 bg-muted/20", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground font-heading mb-2", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: steps.map((label, i) => /* @__PURE__ */ jsxRuntime.jsxs(React21__namespace.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: steps.map((label, i) => /* @__PURE__ */ jsxRuntime.jsxs(React22__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -1777,7 +1777,7 @@ function TermsSection({
   termsContent
 }) {
   var _a;
-  const [modalOpen, setModalOpen] = React21__namespace.useState(false);
+  const [modalOpen, setModalOpen] = React22__namespace.useState(false);
   const i18n = (_a = TERMS_I18N[locale]) != null ? _a : TERMS_I18N.en;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
@@ -1865,9 +1865,9 @@ function BookingWizard({
   depositInfo,
   onCancel
 }) {
-  const [step, setStep] = React21__namespace.useState("responsible");
-  const [error, setError] = React21__namespace.useState(null);
-  const [responsible, setResponsible] = React21__namespace.useState({
+  const [step, setStep] = React22__namespace.useState("responsible");
+  const [error, setError] = React22__namespace.useState(null);
+  const [responsible, setResponsible] = React22__namespace.useState({
     firstName: "",
     lastName: "",
     email: "",
@@ -1886,7 +1886,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] = React21__namespace.useState(
+  const [travellers, setTravellers] = React22__namespace.useState(
     Array.from({ length: Math.max(totalPax, 1) }, () => ({
       firstName: "",
       lastName: "",
@@ -1894,9 +1894,9 @@ function BookingWizard({
       email: ""
     }))
   );
-  const [payAmount, setPayAmount] = React21__namespace.useState("full");
-  const [payMethod, setPayMethod] = React21__namespace.useState("stripe");
-  const [termsAccepted, setTermsAccepted] = React21__namespace.useState(false);
+  const [payAmount, setPayAmount] = React22__namespace.useState("full");
+  const [payMethod, setPayMethod] = React22__namespace.useState("stripe");
+  const [termsAccepted, setTermsAccepted] = React22__namespace.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));
@@ -2097,7 +2097,7 @@ function Offer({
   continueDisabled,
   className
 }) {
-  const [showBooking, setShowBooking] = React21__namespace.useState(false);
+  const [showBooking, setShowBooking] = React22__namespace.useState(false);
   const isShowingCheckout = !!checkoutSlot || showBooking;
   const handleBook = () => {
     if (!checkoutSlot && !externalBookingFlow) setShowBooking(true);
@@ -2219,9 +2219,9 @@ function AdventureSection({
   onAddSuggestedTraveller
 }) {
   var _a, _b, _c;
-  const [detailsOpen, setDetailsOpen] = React21__namespace.useState(false);
-  const [addModalOpen, setAddModalOpen] = React21__namespace.useState(false);
-  const [newTraveller, setNewTraveller] = React21__namespace.useState({
+  const [detailsOpen, setDetailsOpen] = React22__namespace.useState(false);
+  const [addModalOpen, setAddModalOpen] = React22__namespace.useState(false);
+  const [newTraveller, setNewTraveller] = React22__namespace.useState({
     firstName: "",
     lastName: "",
     passport: "",
@@ -3640,11 +3640,11 @@ function DatePickerField({
   fromDate,
   className
 }) {
-  const [open, setOpen] = React21__namespace.useState(false);
-  const containerRef = React21__namespace.useRef(null);
-  const [calendarWidth, setCalendarWidth] = React21__namespace.useState();
+  const [open, setOpen] = React22__namespace.useState(false);
+  const containerRef = React22__namespace.useRef(null);
+  const [calendarWidth, setCalendarWidth] = React22__namespace.useState();
   const hasValue = !!value;
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!containerRef.current) return;
     const observer = new ResizeObserver(([entry]) => {
       setCalendarWidth(entry.contentRect.width);
@@ -3753,7 +3753,7 @@ function BookingForm({
   subtitle = "Free enquiry \u2013 no commitment",
   className
 }) {
-  const [values, setValues] = React21__namespace.useState(__spreadValues(__spreadValues({}, defaultInitial), defaultValues));
+  const [values, setValues] = React22__namespace.useState(__spreadValues(__spreadValues({}, defaultInitial), defaultValues));
   const set = (key, value) => setValues((prev) => __spreadProps(__spreadValues({}, prev), { [key]: value }));
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -4267,11 +4267,11 @@ function FloatingTextarea({
 }
 function SelectField({ field, value, onChange, error }) {
   var _a, _b, _c;
-  const [open, setOpen] = React21__namespace.useState(false);
-  const containerRef = React21__namespace.useRef(null);
+  const [open, setOpen] = React22__namespace.useState(false);
+  const containerRef = React22__namespace.useRef(null);
   const options = (_a = field.options) != null ? _a : [];
   const selectedOpt = (_b = options.find((o) => o.value === value)) != null ? _b : null;
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!open) return;
     const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -4638,11 +4638,11 @@ function RegistrationForm({
   className
 }) {
   var _a;
-  const L = React21__namespace.useMemo(
+  const L = React22__namespace.useMemo(
     () => __spreadValues(__spreadValues({}, DEFAULT_LABELS3), labels != null ? labels : {}),
     [labels]
   );
-  const sortedFields = React21__namespace.useMemo(
+  const sortedFields = React22__namespace.useMemo(
     () => [...fields].sort((a, b) => {
       var _a2, _b;
       return ((_a2 = a.order) != null ? _a2 : 0) - ((_b = b.order) != null ? _b : 0);
@@ -4650,7 +4650,7 @@ function RegistrationForm({
     [fields]
   );
   const isControlled = values !== void 0;
-  const [internal, setInternal] = React21__namespace.useState(
+  const [internal, setInternal] = React22__namespace.useState(
     () => initializeValues(
       sortedFields,
       defaultValues != null ? defaultValues : {},
@@ -4658,9 +4658,9 @@ function RegistrationForm({
       includeTerms
     )
   );
-  const [submitAttempted, setSubmitAttempted] = React21__namespace.useState(false);
-  const [validationErrors, setValidationErrors] = React21__namespace.useState({});
-  React21__namespace.useEffect(() => {
+  const [submitAttempted, setSubmitAttempted] = React22__namespace.useState(false);
+  const [validationErrors, setValidationErrors] = React22__namespace.useState({});
+  React22__namespace.useEffect(() => {
     if (isControlled) return;
     setInternal((prev) => {
       const next = initializeValues(
@@ -4717,7 +4717,7 @@ function RegistrationForm({
   const termsError = submitAttempted && termsEnabled && !termsAccepted;
   const firstErrorFieldId = Object.keys(fieldErrors)[0];
   const scrollTargetId = firstErrorFieldId ? `rf-${firstErrorFieldId}` : termsError ? "rf-terms" : null;
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!submitAttempted || !scrollTargetId) return;
     const timer = setTimeout(() => {
       const elem = document.getElementById(scrollTargetId);
@@ -5025,6 +5025,132 @@ function RegistrationSuccessCard({
     ] }, f.id)) }) })
   ] });
 }
+var OTPCodeInput = ({
+  value,
+  onChange,
+  label,
+  error,
+  disabled = false,
+  length = 6,
+  className,
+  id,
+  required
+}) => {
+  const baseId = id != null ? id : React22__namespace.useId();
+  const inputRefs = React22__namespace.useRef([]);
+  const digits = React22__namespace.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 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];
+    newDigits[index] = numeric[numeric.length - 1];
+    updateValue(newDigits);
+    if (index < length - 1) {
+      focusSlot(index + 1);
+    }
+  };
+  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) => {
+    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; i++) {
+      newDigits[i] = pasted[i];
+    }
+    updateValue(newDigits);
+    const nextEmpty = newDigits.findIndex((d, i) => i >= pasted.length && !d);
+    focusSlot(nextEmpty !== -1 ? nextEmpty : Math.min(pasted.length, length - 1));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        className: cn(
+          "text-sm text-muted-foreground mb-2",
+          required && "after:content-['*'] after:text-primary after:ml-0.5"
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex gap-2",
+          disabled && "opacity-50 pointer-events-none"
+        ),
+        role: "group",
+        "aria-label": label,
+        children: digits.map((digit, index) => /* @__PURE__ */ jsxRuntime.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: handlePaste,
+            onFocus: (e) => e.target.select(),
+            className: cn(
+              "w-10 h-12 text-center text-lg rounded-lg border",
+              "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
+        ))
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: error })
+  ] });
+};
+OTPCodeInput.displayName = "OTPCodeInput";
 function Checkbox(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5050,7 +5176,7 @@ function Checkbox(_a) {
     })
   );
 }
-var AccordionVariantContext = React21__namespace.createContext("default");
+var AccordionVariantContext = React22__namespace.createContext("default");
 function Accordion(_a) {
   var _b = _a, { className, variant = "default" } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5068,7 +5194,7 @@ function Accordion(_a) {
 }
 function AccordionItem(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const variant = React21__namespace.useContext(AccordionVariantContext);
+  const variant = React22__namespace.useContext(AccordionVariantContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     accordion.Accordion.Item,
     __spreadValues({
@@ -5089,7 +5215,7 @@ function AccordionTrigger(_a) {
     "className",
     "children"
   ]);
-  const variant = React21__namespace.useContext(AccordionVariantContext);
+  const variant = React22__namespace.useContext(AccordionVariantContext);
   return /* @__PURE__ */ jsxRuntime.jsx(accordion.Accordion.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
     accordion.Accordion.Trigger,
     __spreadProps(__spreadValues({
@@ -5143,7 +5269,7 @@ function AccordionContent(_a) {
     "className",
     "children"
   ]);
-  const variant = React21__namespace.useContext(AccordionVariantContext);
+  const variant = React22__namespace.useContext(AccordionVariantContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     accordion.Accordion.Panel,
     __spreadProps(__spreadValues({
@@ -5175,7 +5301,7 @@ function FilterPanel({
   title = "Filters",
   className
 }) {
-  const [internalValue, setInternalValue] = React21__namespace.useState(
+  const [internalValue, setInternalValue] = React22__namespace.useState(
     () => Object.fromEntries(groups.map((g) => [g.id, []]))
   );
   const selected = value != null ? value : internalValue;
@@ -5337,11 +5463,11 @@ function ItineraryModal({
   onNext
 }) {
   var _a, _b, _c;
-  const [imgIndex, setImgIndex] = React21__namespace.useState(0);
+  const [imgIndex, setImgIndex] = React22__namespace.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);
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     setImgIndex(0);
   }, [stop == null ? void 0 : stop.dayNumber]);
   if (!stop) return null;
@@ -5468,8 +5594,8 @@ function ItineraryModal({
   ) });
 }
 function Itinerary({ title, subtitle, stops, className }) {
-  const [activeIndex, setActiveIndex] = React21__namespace.useState(null);
-  const scrollRef = React21__namespace.useRef(null);
+  const [activeIndex, setActiveIndex] = React22__namespace.useState(null);
+  const scrollRef = React22__namespace.useRef(null);
   const activeStop = activeIndex !== null ? stops[activeIndex] : null;
   const scrollBy = (dir) => {
     if (!scrollRef.current) return;
@@ -5555,8 +5681,8 @@ function MenuTrip({
   bold = true,
   className
 }) {
-  const scrollRef = React21__namespace.useRef(null);
-  React21__namespace.useEffect(() => {
+  const scrollRef = React22__namespace.useRef(null);
+  React22__namespace.useEffect(() => {
     if (!scrollRef.current || !activeSection) return;
     const container = scrollRef.current;
     const btn = container.querySelector(
@@ -5702,18 +5828,18 @@ function Lightbox({
   onClose
 }) {
   var _a;
-  const [index, setIndex] = React21__namespace.useState(initialIndex);
+  const [index, setIndex] = React22__namespace.useState(initialIndex);
   const total = photos.length;
   const photo = photos[index];
-  const prev = React21__namespace.useCallback(
+  const prev = React22__namespace.useCallback(
     () => setIndex((i) => (i - 1 + total) % total),
     [total]
   );
-  const next = React21__namespace.useCallback(
+  const next = React22__namespace.useCallback(
     () => setIndex((i) => (i + 1) % total),
     [total]
   );
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
       if (e.key === "ArrowLeft") prev();
@@ -5907,7 +6033,7 @@ function GridGallery({
   initialVisible,
   onOpen
 }) {
-  const [expanded, setExpanded] = React21__namespace.useState(false);
+  const [expanded, setExpanded] = React22__namespace.useState(false);
   const cols = gridCols(photos.length);
   const hasMore = photos.length > initialVisible;
   const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
@@ -5937,7 +6063,7 @@ function MasonryGallery({
   initialVisible,
   onOpen
 }) {
-  const [expanded, setExpanded] = React21__namespace.useState(false);
+  const [expanded, setExpanded] = React22__namespace.useState(false);
   const hasMore = photos.length > initialVisible;
   const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -6010,7 +6136,7 @@ function FeaturedGallery({
   photos,
   onOpen
 }) {
-  const [expanded, setExpanded] = React21__namespace.useState(false);
+  const [expanded, setExpanded] = React22__namespace.useState(false);
   const featured = photos.slice(0, 3);
   const extra = photos.slice(3);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -6087,8 +6213,8 @@ function PhotoGallery({
   onPhotoClick,
   className
 }) {
-  const [lightboxIndex, setLightboxIndex] = React21__namespace.useState(null);
-  const normalised = React21__namespace.useMemo(() => photos.map(normalise), [photos]);
+  const [lightboxIndex, setLightboxIndex] = React22__namespace.useState(null);
+  const normalised = React22__namespace.useMemo(() => photos.map(normalise), [photos]);
   const handleOpen = (index) => {
     setLightboxIndex(index);
     onPhotoClick == null ? void 0 : onPhotoClick(normalised[index].src, index);
@@ -6177,7 +6303,7 @@ function PricingTrip({
   variant = "card",
   className
 }) {
-  const [showPricing, setShowPricing] = React21__namespace.useState(false);
+  const [showPricing, setShowPricing] = React22__namespace.useState(false);
   if (variant === "compact") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -6500,14 +6626,14 @@ function SiteHeader({
   className
 }) {
   const t = VARIANT[variant];
-  const [openMenu, setOpenMenu] = React21__namespace.useState(null);
-  const [langOpen, setLangOpen] = React21__namespace.useState(false);
-  const [mobileOpen, setMobileOpen] = React21__namespace.useState(false);
-  const [openMobileSection, setOpenMobileSection] = React21__namespace.useState(null);
-  const [activeLang, setActiveLang] = React21__namespace.useState(currentLanguage);
+  const [openMenu, setOpenMenu] = React22__namespace.useState(null);
+  const [langOpen, setLangOpen] = React22__namespace.useState(false);
+  const [mobileOpen, setMobileOpen] = React22__namespace.useState(false);
+  const [openMobileSection, setOpenMobileSection] = React22__namespace.useState(null);
+  const [activeLang, setActiveLang] = React22__namespace.useState(currentLanguage);
   const toggleMobileSection = (label) => setOpenMobileSection((prev) => prev === label ? null : label);
-  const menuCloseTimer = React21__namespace.useRef(void 0);
-  const langCloseTimer = React21__namespace.useRef(void 0);
+  const menuCloseTimer = React22__namespace.useRef(void 0);
+  const langCloseTimer = React22__namespace.useRef(void 0);
   const handleMenuEnter = (label) => {
     clearTimeout(menuCloseTimer.current);
     setOpenMenu(label);
@@ -6528,7 +6654,7 @@ function SiteHeader({
     setOpenMenu(null);
     setLangOpen(false);
   };
-  React21__namespace.useEffect(() => () => {
+  React22__namespace.useEffect(() => () => {
     clearTimeout(menuCloseTimer.current);
     clearTimeout(langCloseTimer.current);
   }, []);
@@ -6793,7 +6919,7 @@ function SiteHeader({
               ), children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
                   const isActive = lang.code === activeLang;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(React21__namespace.Fragment, { children: [
+                  return /* @__PURE__ */ jsxRuntime.jsxs(React22__namespace.Fragment, { children: [
                     i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
                       "text-xs select-none",
                       variant === "white" ? "text-border" : "text-white/15"
@@ -6855,8 +6981,8 @@ function SiteHeader({
   );
 }
 function ThemeToggle({ className }) {
-  const [dark, setDark] = React21__namespace.useState(false);
-  React21__namespace.useEffect(() => {
+  const [dark, setDark] = React22__namespace.useState(false);
+  React22__namespace.useEffect(() => {
     const saved = localStorage.getItem("theme");
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const isDark = saved === "dark" || !saved && prefersDark;
@@ -7007,7 +7133,7 @@ function TripCard({
   );
 }
 function useHlsVideo(videoRef, src) {
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!src || !videoRef.current) return;
     const video = videoRef.current;
     if (!src.includes(".m3u8")) return;
@@ -7049,11 +7175,11 @@ function TripHeader({
   className
 }) {
   var _a;
-  const [heroIndex, setHeroIndex] = React21__namespace.useState(0);
-  const [videoReady, setVideoReady] = React21__namespace.useState(false);
-  const videoRef = React21__namespace.useRef(null);
+  const [heroIndex, setHeroIndex] = React22__namespace.useState(0);
+  const [videoReady, setVideoReady] = React22__namespace.useState(false);
+  const videoRef = React22__namespace.useRef(null);
   const isHls = !!(videoUrl == null ? void 0 : videoUrl.includes(".m3u8"));
-  const validImages = React21__namespace.useMemo(
+  const validImages = React22__namespace.useMemo(
     () => images.map((u) => u == null ? void 0 : u.trim()).filter(Boolean),
     [images]
   );
@@ -7068,7 +7194,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);
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!videoUrl) return;
     const el = videoRef.current;
     if (!el) return;
@@ -7210,7 +7336,7 @@ function TripHeader({
               siteHeader ? "-mt-44" : "-mt-36"
             ),
             children: [
-              breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 flex items-center gap-1.5 flex-wrap", children: breadcrumb.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React21__namespace.Fragment, { children: [
+              breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 flex items-center gap-1.5 flex-wrap", children: breadcrumb.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React22__namespace.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-3 w-3 text-white/50 shrink-0" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/70 font-ui hover:text-white/90 cursor-default", children: crumb.label })
               ] }, i)) }),
@@ -7310,19 +7436,19 @@ function TripPage({
   features,
   className
 }) {
-  const [activeSection, setActiveSection] = React21__namespace.useState("");
-  const [navFloating, setNavFloating] = React21__namespace.useState(false);
-  const [navHidden, setNavHidden] = React21__namespace.useState(false);
-  const [isFloating, setIsFloating] = React21__namespace.useState(false);
-  const [sidebarPos, setSidebarPos] = React21__namespace.useState(null);
-  const [pricingBarVisible, setPricingBarVisible] = React21__namespace.useState(false);
-  const navRef = React21__namespace.useRef(null);
-  const navSentinelRef = React21__namespace.useRef(null);
-  const sentinelRef = React21__namespace.useRef(null);
-  const sidebarPlaceholderRef = React21__namespace.useRef(null);
-  const pricingBarRef = React21__namespace.useRef(null);
-  const galleryRef = React21__namespace.useRef(null);
-  const sections = React21__namespace.useMemo(
+  const [activeSection, setActiveSection] = React22__namespace.useState("");
+  const [navFloating, setNavFloating] = React22__namespace.useState(false);
+  const [navHidden, setNavHidden] = React22__namespace.useState(false);
+  const [isFloating, setIsFloating] = React22__namespace.useState(false);
+  const [sidebarPos, setSidebarPos] = React22__namespace.useState(null);
+  const [pricingBarVisible, setPricingBarVisible] = React22__namespace.useState(false);
+  const navRef = React22__namespace.useRef(null);
+  const navSentinelRef = React22__namespace.useRef(null);
+  const sentinelRef = React22__namespace.useRef(null);
+  const sidebarPlaceholderRef = React22__namespace.useRef(null);
+  const pricingBarRef = React22__namespace.useRef(null);
+  const galleryRef = React22__namespace.useRef(null);
+  const sections = React22__namespace.useMemo(
     () => [
       { id: "key-info", label: "Key info", show: !!(infoGroups == null ? void 0 : infoGroups.length) },
       { id: "overview", label: "Overview", show: !!overview },
@@ -7337,7 +7463,7 @@ function TripPage({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     const sentinel = navSentinelRef.current;
     if (!sentinel) return;
     const update = () => setNavFloating(sentinel.getBoundingClientRect().top < 1);
@@ -7345,7 +7471,7 @@ function TripPage({
     update();
     return () => document.removeEventListener("scroll", update, { capture: true });
   }, []);
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     const sentinel = sentinelRef.current;
     if (!sentinel) return;
     const update = () => setIsFloating(sentinel.getBoundingClientRect().top < 1);
@@ -7353,7 +7479,7 @@ function TripPage({
     update();
     return () => document.removeEventListener("scroll", update, { capture: true });
   }, []);
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     const measure = () => {
       if (!sidebarPlaceholderRef.current) return;
       const rect = sidebarPlaceholderRef.current.getBoundingClientRect();
@@ -7363,7 +7489,7 @@ function TripPage({
     window.addEventListener("resize", measure);
     return () => window.removeEventListener("resize", measure);
   }, [isFloating]);
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     const check = () => {
       var _a;
       const target = (_a = galleryRef.current) != null ? _a : pricingBarRef.current;
@@ -7374,7 +7500,7 @@ function TripPage({
     check();
     return () => document.removeEventListener("scroll", check, { capture: true });
   }, []);
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     const check = () => {
       if (!pricingBarRef.current) return;
       setNavHidden(pricingBarRef.current.getBoundingClientRect().top < window.innerHeight * 0.92);
@@ -7383,7 +7509,7 @@ function TripPage({
     check();
     return () => document.removeEventListener("scroll", check, { capture: true });
   }, []);
-  React21__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (sections.length === 0) return;
     setActiveSection(sections[0].id);
     const update = () => {
@@ -8100,21 +8226,21 @@ function LeadCapturePopup({
 }) {
   var _a;
   const config = __spreadValues(__spreadValues({}, DEFAULTS), _config);
-  const [open, setOpen] = React21.useState(false);
-  const [closing, setClosing] = React21.useState(false);
-  const [submitted, setSubmitted] = React21.useState(false);
-  const [submitting, setSubmitting] = React21.useState(false);
-  const [error, setError] = React21.useState(null);
-  const [name, setName] = React21.useState("");
-  const [email, setEmail] = React21.useState("");
-  const [travelDate, setTravelDate] = React21.useState("");
-  const panelRef = React21.useRef(null);
-  const nameRef = React21.useRef(null);
-  const show = React21.useCallback(() => {
+  const [open, setOpen] = React22.useState(false);
+  const [closing, setClosing] = React22.useState(false);
+  const [submitted, setSubmitted] = React22.useState(false);
+  const [submitting, setSubmitting] = React22.useState(false);
+  const [error, setError] = React22.useState(null);
+  const [name, setName] = React22.useState("");
+  const [email, setEmail] = React22.useState("");
+  const [travelDate, setTravelDate] = React22.useState("");
+  const panelRef = React22.useRef(null);
+  const nameRef = React22.useRef(null);
+  const show = React22.useCallback(() => {
     if (isDismissed()) return;
     setOpen(true);
   }, []);
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     var _a2;
     if (isDismissed()) return;
     if (config.trigger === "delay") {
@@ -8141,7 +8267,7 @@ function LeadCapturePopup({
       return () => window.removeEventListener("scroll", handler);
     }
   }, [config.trigger, config.delaySeconds, config.scrollPercent, show]);
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (open && !submitted) {
       requestAnimationFrame(() => {
         var _a2;
@@ -8149,7 +8275,7 @@ function LeadCapturePopup({
       });
     }
   }, [open, submitted]);
-  const close = React21.useCallback(() => {
+  const close = React22.useCallback(() => {
     setClosing(true);
     setDismissed(config.dismissDays);
     setTimeout(() => {
@@ -8157,7 +8283,7 @@ function LeadCapturePopup({
       setClosing(false);
     }, 250);
   }, [config.dismissDays]);
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       if (e.key === "Escape") close();
@@ -8165,7 +8291,7 @@ function LeadCapturePopup({
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, [open, close]);
-  const onOverlayClick = React21.useCallback(
+  const onOverlayClick = React22.useCallback(
     (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         close();
@@ -8421,6 +8547,7 @@ exports.Itinerary = Itinerary;
 exports.LOGO_PLANETAEXO_DATA_URI = LOGO_PLANETAEXO_DATA_URI;
 exports.LeadCapturePopup = LeadCapturePopup;
 exports.MenuTrip = MenuTrip;
+exports.OTPCodeInput = OTPCodeInput;
 exports.Offer = Offer;
 exports.OfferAdventureCard = OfferAdventureCard;
 exports.PaymentAmountSelector = PaymentAmountSelector;