@loczer/storefront-sdk 0.181.0 → 0.183.0

package/dist/components/BookingPeriodSelector/components/BookingEndDateField.js

@@ -1,406 +1,351 @@
-import { jsxs as ne, jsx as s } from "react/jsx-runtime";
-import { differenceInCalendarDays as fe } from "date-fns";
-import { createContext as me, useRef as L, useState as X, useEffect as b, useContext as pe } from "react";
-import { cn as T, DayPickerField as ye } from "@rpcbase/ui";
-import { useMorphingModalWizardOverlayLayer as De } from "../../../chunks/ui/dist/MorphingModalWizard-V0zTc513.js";
-import { DayPicker as he } from "../../../ui/day-picker.js";
-import { Label as Ee } from "../../../ui/label.js";
-import { Provider as ve, Root as be, TooltipTrigger as ge, Content as Me } from "../../../ui/tooltip.js";
-import { useBookingPeriod as ke } from "../BookingPeriodContext.js";
-import { BookingPeriodFieldErrorMessage as Te } from "./BookingPeriodFieldErrorMessage.js";
-import { ModalDayPickerField as Pe } from "./internal/ModalDayPickerField.js";
-const Z = (t) => String(t).padStart(2, "0"), z = (t) => `${t.getFullYear()}-${Z(t.getMonth() + 1)}-${Z(t.getDate())}`, U = (t) => t.getFullYear() * 12 + t.getMonth(), oe = (t) => new Date(Math.floor(t / 12), t % 12, 1), A = (t) => oe(U(t)), ee = (t, i, r) => {
-  const c = U(t), d = U(i), f = Math.max(0, r - 1), g = c + f;
-  if (d < c)
-    return A(i);
-  if (d > g) {
-    const m = d - f;
-    return m === c ? t : oe(m);
-  }
-  return t;
-}, we = (t) => {
-  if (typeof PointerEvent == "function") {
-    t.dispatchEvent(new PointerEvent("pointermove", { bubbles: !0, pointerType: "mouse" }));
-    return;
-  }
-  t.dispatchEvent(new MouseEvent("mousemove", { bubbles: !0 }));
-}, te = (t) => {
-  if (typeof PointerEvent == "function") {
-    t.dispatchEvent(new PointerEvent("pointerout", { bubbles: !0, pointerType: "mouse" })), t.dispatchEvent(new PointerEvent("pointerleave", { bubbles: !0, pointerType: "mouse" }));
-    return;
-  }
-  t.dispatchEvent(new MouseEvent("mouseout", { bubbles: !0 })), t.dispatchEvent(new MouseEvent("mouseleave", { bubbles: !0 }));
-}, re = me(null), ae = (t) => {
-  const i = pe(re), { day: r, modifiers: c, className: d, ...f } = t, g = c.disabled ? "cursor-not-allowed" : "cursor-pointer", m = L(null);
-  b(() => {
-    c.focused && m.current?.focus();
-  }, [c.focused]);
-  const p = /* @__PURE__ */ s(
-    "button",
-    {
-      ref: m,
-      ...f,
-      className: T(d, g)
-    }
-  );
-  if (!i)
-    return p;
-  const { labels: y, startDate: B, hoveredEndDate: P, keyboardTooltipDay: w, numberOfMonths: M, overlayLayer: k } = i;
-  if (!B || c.disabled || M === 1)
-    return p;
-  const l = fe(r.date, B);
-  if (l < 0)
-    return p;
-  const I = z(r.date), O = w === I || (!w && P ? z(P) === I : !1), x = y.selectedDaysTooltip?.({ count: l + 1 });
-  return x ? /* @__PURE__ */ ne(be, { open: O, children: [
-    /* @__PURE__ */ s(ge, { asChild: !0, children: p }),
-    /* @__PURE__ */ s(
-      Me,
-      {
-        container: k ?? void 0,
-        side: "top",
-        align: "center",
-        disableAnimation: !0,
-        positionerClassName: k ? "z-[120]" : "z-[80]",
-        className: T(
-          "pointer-events-none rounded-md border bg-popover px-2 py-1 text-xs font-semibold text-primary shadow-md",
-          k ? "z-[120]" : "z-[70]"
-        ),
-        children: /* @__PURE__ */ s("span", { children: x })
-      }
-    )
-  ] }) : p;
+import { Content as e, Provider as t, Root as n, TooltipTrigger as r } from "../../../ui/tooltip.js";
+import { useBookingPeriod as i } from "../BookingPeriodContext.js";
+import { useMorphingModalWizardOverlayLayer as a } from "../../../chunks/ui/dist/MorphingModalWizard-DKDiSyVA.js";
+import { DayPicker as o } from "../../../ui/day-picker.js";
+import { Label as s } from "../../../ui/label.js";
+import { BookingPeriodFieldErrorMessage as c } from "./BookingPeriodFieldErrorMessage.js";
+import { ModalDayPickerField as l } from "./internal/ModalDayPickerField.js";
+import { differenceInCalendarDays as u } from "date-fns";
+import { createContext as d, useContext as f, useEffect as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { DayPickerField as v, cn as y } from "@rpcbase/ui";
+//#region src/components/BookingPeriodSelector/components/BookingEndDateField.tsx
+var b = (e) => String(e).padStart(2, "0"), x = (e) => `${e.getFullYear()}-${b(e.getMonth() + 1)}-${b(e.getDate())}`, S = (e) => e.getFullYear() * 12 + e.getMonth(), C = (e) => new Date(Math.floor(e / 12), e % 12, 1), w = (e) => C(S(e)), T = (e, t, n) => {
+	let r = S(e), i = S(t), a = Math.max(0, n - 1), o = r + a;
+	if (i < r) return w(t);
+	if (i > o) {
+		let t = i - a;
+		return t === r ? e : C(t);
+	}
+	return e;
+}, E = (e) => {
+	if (typeof PointerEvent == "function") {
+		e.dispatchEvent(new PointerEvent("pointermove", {
+			bubbles: !0,
+			pointerType: "mouse"
+		}));
+		return;
+	}
+	e.dispatchEvent(new MouseEvent("mousemove", { bubbles: !0 }));
+}, D = (e) => {
+	if (typeof PointerEvent == "function") {
+		e.dispatchEvent(new PointerEvent("pointerout", {
+			bubbles: !0,
+			pointerType: "mouse"
+		})), e.dispatchEvent(new PointerEvent("pointerleave", {
+			bubbles: !0,
+			pointerType: "mouse"
+		}));
+		return;
+	}
+	e.dispatchEvent(new MouseEvent("mouseout", { bubbles: !0 })), e.dispatchEvent(new MouseEvent("mouseleave", { bubbles: !0 }));
+}, O = d(null), k = (t) => {
+	let i = f(O), { day: a, modifiers: o, className: s, ...c } = t, l = o.disabled ? "cursor-not-allowed" : "cursor-pointer", d = m(null);
+	p(() => {
+		o.focused && d.current?.focus();
+	}, [o.focused]);
+	let h = /* @__PURE__ */ g("button", {
+		ref: d,
+		...c,
+		className: y(s, l)
+	});
+	if (!i) return h;
+	let { labels: v, startDate: b, hoveredEndDate: S, keyboardTooltipDay: C, numberOfMonths: w, overlayLayer: T } = i;
+	if (!b || o.disabled || w === 1) return h;
+	let E = u(a.date, b);
+	if (E < 0) return h;
+	let D = x(a.date), k = C === D || (!C && S ? x(S) === D : !1), A = v.selectedDaysTooltip?.({ count: E + 1 });
+	return A ? /* @__PURE__ */ _(n, {
+		open: k,
+		children: [/* @__PURE__ */ g(r, {
+			asChild: !0,
+			children: h
+		}), /* @__PURE__ */ g(e, {
+			container: T ?? void 0,
+			side: "top",
+			align: "center",
+			disableAnimation: !0,
+			positionerClassName: T ? "z-[120]" : "z-[80]",
+			className: y("pointer-events-none rounded-md border bg-popover px-2 py-1 text-xs font-semibold text-primary shadow-md", T ? "z-[120]" : "z-[70]"),
+			children: /* @__PURE__ */ g("span", { children: A })
+		})]
+	}) : h;
 };
-ae.displayName = "BookingEndDateDayButton";
-const qe = () => {
-  const {
-    labels: t,
-    startDate: i,
-    endDate: r,
-    selectEndDate: c,
-    isEndDatePopoverOpen: d,
-    setIsEndDatePopoverOpen: f,
-    setIsStartTimeSelectOpen: g,
-    hoveredEndDate: m,
-    setHoveredEndDate: p,
-    resetHoveredEndDate: y,
-    labelClassName: B,
-    inputClassName: P,
-    buttonClassName: w,
-    errors: M,
-    dateLocale: k,
-    numberOfMonths: l,
-    isMobile: I,
-    isHydrated: O,
-    openDatePickerOnFocus: x,
-    withMobileDateDrawer: ie,
-    selectionFlow: S,
-    minSelectableDate: V
-  } = ke(), D = ie && I, h = L(null), E = L(!1), [j, q] = X(null), [W, K] = X(
-    () => A(i ?? r ?? /* @__PURE__ */ new Date())
-  ), H = De(), de = !!H;
-  b(() => {
-    if (typeof document > "u")
-      return;
-    const e = document.getElementById("end-date-picker");
-    if (!(e instanceof HTMLInputElement))
-      return;
-    const n = (o) => {
-      E.current = o.key === "ArrowUp" || o.key === "ArrowDown";
-    };
-    return e.addEventListener("keydown", n, !0), () => {
-      e.removeEventListener("keydown", n, !0);
-    };
-  }, []), b(() => {
-    if (!d || D)
-      return;
-    const e = A(i ?? r ?? /* @__PURE__ */ new Date()), n = r ?? i;
-    K(n ? ee(e, n, l) : e);
-  }, [r, d, l, i]), b(() => {
-    if (!d)
-      return;
-    const e = m ?? r;
-    e && K((n) => ee(n, e, l));
-  }, [r, m, d, l]), b(() => {
-    if (!d || typeof document > "u" || (y(), D))
-      return;
-    const e = document.getElementById("end-date-picker");
-    if (!(e instanceof HTMLElement)) {
-      f(!1);
-      return;
-    }
-    document.activeElement !== e && requestAnimationFrame(() => {
-      e.focus({ preventScroll: !0 }), S === "chained-times" && e.click();
-    });
-  }, [d, y, S, f]), b(() => {
-    if (typeof document > "u")
-      return;
-    const e = document.getElementById("end-date-picker");
-    if (!(e instanceof HTMLInputElement) || S !== "chained-times")
-      return;
-    const n = () => {
-      g(!1);
-    };
-    return e.addEventListener("focus", n, !0), () => {
-      e.removeEventListener("focus", n, !0);
-    };
-  }, [S, g]), b(() => {
-    if (d || typeof document > "u")
-      return;
-    const e = h.current;
-    if (!e)
-      return;
-    const o = document.getElementById("end-date-calendar")?.querySelector(`[data-day="${e}"] button`);
-    o instanceof HTMLElement && te(o), h.current = null, q(null);
-  }, [d]);
-  const R = L({
-    labels: t,
-    startDate: i,
-    endDate: r,
-    hoveredEndDate: m,
-    keyboardTooltipDay: j,
-    numberOfMonths: l,
-    overlayLayer: H,
-    calendarMonth: W,
-    resetHoveredEndDate: y,
-    setHoveredEndDate: p
-  });
-  R.current = {
-    labels: t,
-    startDate: i,
-    endDate: r,
-    hoveredEndDate: m,
-    keyboardTooltipDay: j,
-    numberOfMonths: l,
-    overlayLayer: H,
-    calendarMonth: W,
-    resetHoveredEndDate: y,
-    setHoveredEndDate: p
-  };
-  const Y = L(null);
-  if (!Y.current) {
-    const e = (n) => {
-      const {
-        labels: o,
-        startDate: a,
-        endDate: u,
-        hoveredEndDate: C,
-        keyboardTooltipDay: N,
-        numberOfMonths: Q,
-        overlayLayer: se,
-        calendarMonth: ce,
-        setHoveredEndDate: le
-      } = R.current, ue = {
-        labels: o,
-        startDate: a,
-        hoveredEndDate: C,
-        keyboardTooltipDay: N,
-        numberOfMonths: Q,
-        overlayLayer: se
-      };
-      return /* @__PURE__ */ s(re.Provider, { value: ue, children: /* @__PURE__ */ s(ve, { delayDuration: 0, children: /* @__PURE__ */ s(
-        "div",
-        {
-          onMouseLeave: (v) => {
-            const F = v.currentTarget;
-            requestAnimationFrame(() => {
-              F.matches(":hover") || R.current.resetHoveredEndDate();
-            });
-          },
-          children: /* @__PURE__ */ s(
-            he,
-            {
-              ...n,
-              mode: "range",
-              month: ce,
-              onMonthChange: (v) => {
-                K(A(v));
-              },
-              selected: {
-                from: a,
-                to: C || u
-              },
-              components: {
-                ...n.components,
-                DayButton: ae
-              },
-              onSelect: (v, F) => {
-                n.onSelect?.(F);
-              },
-              onDayMouseEnter: (v, F) => {
-                Q !== 1 && a && !F.disabled && v >= a && le(v);
-              }
-            }
-          )
-        }
-      ) }) });
-    };
-    e.displayName = "BookingEndDateDayPicker", Y.current = e;
-  }
-  const _ = Y.current, $ = () => {
-    if (typeof document > "u") {
-      h.current = null;
-      return;
-    }
-    const e = h.current;
-    if (!e)
-      return;
-    const o = document.getElementById("end-date-calendar")?.querySelector(`[data-day="${e}"] button`);
-    o instanceof HTMLElement && te(o), h.current = null, q(null);
-  }, G = (e) => {
-    if (typeof document > "u")
-      return;
-    const n = z(e);
-    if (h.current === n)
-      return;
-    $(), h.current = n, q(n);
-    let o = 0;
-    const a = 6, u = () => {
-      if (h.current !== n)
-        return;
-      const C = document.getElementById("end-date-calendar");
-      if (!(C instanceof HTMLElement)) {
-        o += 1, o <= a && requestAnimationFrame(u);
-        return;
-      }
-      const N = C.querySelector(`[data-day="${n}"] button:not([disabled])`);
-      if (N instanceof HTMLElement) {
-        we(N);
-        return;
-      }
-      o += 1, o <= a && requestAnimationFrame(u);
-    };
-    requestAnimationFrame(u);
-  }, J = () => {
-    D && f(!0);
-  };
-  return /* @__PURE__ */ ne(
-    "div",
-    {
-      className: T("group/form-item relative flex-grow", D && "cursor-pointer rounded-md"),
-      onPointerDownCapture: J,
-      onClick: J,
-      children: [
-        /* @__PURE__ */ s(
-          Ee,
-          {
-            htmlFor: "end-date-picker",
-            className: T("mb-1 block text-sm font-medium", D && "cursor-pointer", B),
-            children: /* @__PURE__ */ s("span", { children: t.endDate })
-          }
-        ),
-        de ? /* @__PURE__ */ s(
-          Pe,
-          {
-            id: "end-date-picker",
-            value: r ?? null,
-            placeholder: t.pickEndDate,
-            triggerTestId: "end-date-trigger",
-            isHydrated: O,
-            open: D ? !1 : d,
-            onOpenChange: f,
-            readOnly: D,
-            openOnFocus: x,
-            onValueUpdate: (e) => {
-              const n = (() => {
-                if (!d || typeof document > "u")
-                  return !1;
-                const o = document.activeElement;
-                return o instanceof HTMLElement && o.id === "end-date-picker";
-              })();
-              if (!i || !e || e < i) {
-                y(), n && $();
-                return;
-              }
-              p(e), n && G(e);
-            },
-            onChange: (e) => {
-              if (y(), (() => {
-                if (typeof document > "u")
-                  return E.current = !1, !1;
-                const a = document.activeElement, u = E.current && a instanceof HTMLElement && a.id === "end-date-picker";
-                return E.current = !1, u;
-              })() || e && r && e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth() && e.getDate() === r.getDate())
-                return;
-              const o = (() => {
-                if (!e || typeof document > "u")
-                  return !1;
-                const a = document.activeElement;
-                return a instanceof HTMLElement ? !!(document.getElementById("end-date-calendar")?.contains(a) || a.id === "end-date-picker") : !1;
-              })();
-              c(e ?? void 0, { openTimePicker: o ? void 0 : !1 });
-            },
-            inputClassName: T(M.endDate && "border-destructive", P, w),
-            dayPickerComponent: _,
-            dayPickerProps: {
-              id: "end-date-calendar",
-              locale: k,
-              showOutsideDays: !1,
-              numberOfMonths: l,
-              disabled: (e) => i && e < i || e < V,
-              autoFocus: !0,
-              "data-testid": "end-date-calendar"
-            },
-            portalContainer: H
-          }
-        ) : /* @__PURE__ */ s(
-          ye,
-          {
-            id: "end-date-picker",
-            value: r ?? null,
-            placeholder: t.pickEndDate,
-            triggerTestId: "end-date-trigger",
-            isHydrated: O,
-            open: D ? !1 : d,
-            onOpenChange: f,
-            readOnly: D,
-            onValueUpdate: (e) => {
-              const n = (() => {
-                if (!d || typeof document > "u")
-                  return !1;
-                const o = document.activeElement;
-                return o instanceof HTMLElement && o.id === "end-date-picker";
-              })();
-              if (!i || !e || e < i) {
-                y(), n && $();
-                return;
-              }
-              p(e), n && G(e);
-            },
-            onChange: (e) => {
-              if (y(), (() => {
-                if (typeof document > "u")
-                  return E.current = !1, !1;
-                const a = document.activeElement, u = E.current && a instanceof HTMLElement && a.id === "end-date-picker";
-                return E.current = !1, u;
-              })() || e && r && e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth() && e.getDate() === r.getDate())
-                return;
-              const o = (() => {
-                if (!e || typeof document > "u")
-                  return !1;
-                const a = document.activeElement;
-                return a instanceof HTMLElement ? !!(document.getElementById("end-date-calendar")?.contains(a) || a.id === "end-date-picker") : !1;
-              })();
-              c(e ?? void 0, { openTimePicker: o ? void 0 : !1 });
-            },
-            inputClassName: T(M.endDate && "border-destructive", P, w),
-            dayPickerComponent: _,
-            dayPickerProps: {
-              id: "end-date-calendar",
-              locale: k,
-              showOutsideDays: !1,
-              numberOfMonths: l,
-              disabled: (e) => i && e < i || e < V,
-              autoFocus: !0,
-              "data-testid": "end-date-calendar"
-            }
-          }
-        ),
-        M.endDate && /* @__PURE__ */ s(Te, { children: M.endDate })
-      ]
-    }
-  );
-};
-export {
-  qe as BookingEndDateField
+k.displayName = "BookingEndDateDayButton";
+var A = () => {
+	let { labels: e, startDate: n, endDate: r, selectEndDate: u, isEndDatePopoverOpen: d, setIsEndDatePopoverOpen: f, setIsStartTimeSelectOpen: b, hoveredEndDate: S, setHoveredEndDate: C, resetHoveredEndDate: A, labelClassName: j, inputClassName: M, buttonClassName: N, errors: P, dateLocale: F, numberOfMonths: I, isMobile: ee, isHydrated: L, openDatePickerOnFocus: te, withMobileDateDrawer: ne, selectionFlow: R, minSelectableDate: z } = i(), B = ne && ee, V = m(null), H = m(!1), [U, W] = h(null), [G, K] = h(() => w(n ?? r ?? /* @__PURE__ */ new Date())), q = a(), re = !!q;
+	p(() => {
+		if (typeof document > "u") return;
+		let e = document.getElementById("end-date-picker");
+		if (!(e instanceof HTMLInputElement)) return;
+		let t = (e) => {
+			H.current = e.key === "ArrowUp" || e.key === "ArrowDown";
+		};
+		return e.addEventListener("keydown", t, !0), () => {
+			e.removeEventListener("keydown", t, !0);
+		};
+	}, []), p(() => {
+		if (!d || B) return;
+		let e = w(n ?? r ?? /* @__PURE__ */ new Date()), t = r ?? n;
+		K(t ? T(e, t, I) : e);
+	}, [
+		r,
+		d,
+		I,
+		n
+	]), p(() => {
+		if (!d) return;
+		let e = S ?? r;
+		e && K((t) => T(t, e, I));
+	}, [
+		r,
+		S,
+		d,
+		I
+	]), p(() => {
+		if (!d || typeof document > "u" || (A(), B)) return;
+		let e = document.getElementById("end-date-picker");
+		if (!(e instanceof HTMLElement)) {
+			f(!1);
+			return;
+		}
+		document.activeElement !== e && requestAnimationFrame(() => {
+			e.focus({ preventScroll: !0 }), R === "chained-times" && e.click();
+		});
+	}, [
+		d,
+		A,
+		R,
+		f
+	]), p(() => {
+		if (typeof document > "u") return;
+		let e = document.getElementById("end-date-picker");
+		if (!(e instanceof HTMLInputElement) || R !== "chained-times") return;
+		let t = () => {
+			b(!1);
+		};
+		return e.addEventListener("focus", t, !0), () => {
+			e.removeEventListener("focus", t, !0);
+		};
+	}, [R, b]), p(() => {
+		if (d || typeof document > "u") return;
+		let e = V.current;
+		if (!e) return;
+		let t = document.getElementById("end-date-calendar")?.querySelector(`[data-day="${e}"] button`);
+		t instanceof HTMLElement && D(t), V.current = null, W(null);
+	}, [d]);
+	let J = m({
+		labels: e,
+		startDate: n,
+		endDate: r,
+		hoveredEndDate: S,
+		keyboardTooltipDay: U,
+		numberOfMonths: I,
+		overlayLayer: q,
+		calendarMonth: G,
+		resetHoveredEndDate: A,
+		setHoveredEndDate: C
+	});
+	J.current = {
+		labels: e,
+		startDate: n,
+		endDate: r,
+		hoveredEndDate: S,
+		keyboardTooltipDay: U,
+		numberOfMonths: I,
+		overlayLayer: q,
+		calendarMonth: G,
+		resetHoveredEndDate: A,
+		setHoveredEndDate: C
+	};
+	let Y = m(null);
+	if (!Y.current) {
+		let e = (e) => {
+			let { labels: n, startDate: r, endDate: i, hoveredEndDate: a, keyboardTooltipDay: s, numberOfMonths: c, overlayLayer: l, calendarMonth: u, setHoveredEndDate: d } = J.current, f = {
+				labels: n,
+				startDate: r,
+				hoveredEndDate: a,
+				keyboardTooltipDay: s,
+				numberOfMonths: c,
+				overlayLayer: l
+			};
+			return /* @__PURE__ */ g(O.Provider, {
+				value: f,
+				children: /* @__PURE__ */ g(t, {
+					delayDuration: 0,
+					children: /* @__PURE__ */ g("div", {
+						onMouseLeave: (e) => {
+							let t = e.currentTarget;
+							requestAnimationFrame(() => {
+								t.matches(":hover") || J.current.resetHoveredEndDate();
+							});
+						},
+						children: /* @__PURE__ */ g(o, {
+							...e,
+							mode: "range",
+							month: u,
+							onMonthChange: (e) => {
+								K(w(e));
+							},
+							selected: {
+								from: r,
+								to: a || i
+							},
+							components: {
+								...e.components,
+								DayButton: k
+							},
+							onSelect: (t, n) => {
+								e.onSelect?.(n);
+							},
+							onDayMouseEnter: (e, t) => {
+								c !== 1 && r && !t.disabled && e >= r && d(e);
+							}
+						})
+					})
+				})
+			});
+		};
+		e.displayName = "BookingEndDateDayPicker", Y.current = e;
+	}
+	let X = Y.current, Z = () => {
+		if (typeof document > "u") {
+			V.current = null;
+			return;
+		}
+		let e = V.current;
+		if (!e) return;
+		let t = document.getElementById("end-date-calendar")?.querySelector(`[data-day="${e}"] button`);
+		t instanceof HTMLElement && D(t), V.current = null, W(null);
+	}, Q = (e) => {
+		if (typeof document > "u") return;
+		let t = x(e);
+		if (V.current === t) return;
+		Z(), V.current = t, W(t);
+		let n = 0, r = () => {
+			if (V.current !== t) return;
+			let e = document.getElementById("end-date-calendar");
+			if (!(e instanceof HTMLElement)) {
+				n += 1, n <= 6 && requestAnimationFrame(r);
+				return;
+			}
+			let i = e.querySelector(`[data-day="${t}"] button:not([disabled])`);
+			if (i instanceof HTMLElement) {
+				E(i);
+				return;
+			}
+			n += 1, n <= 6 && requestAnimationFrame(r);
+		};
+		requestAnimationFrame(r);
+	}, $ = () => {
+		B && f(!0);
+	};
+	return /* @__PURE__ */ _("div", {
+		className: y("group/form-item relative flex-grow", B && "cursor-pointer rounded-md"),
+		onPointerDownCapture: $,
+		onClick: $,
+		children: [
+			/* @__PURE__ */ g(s, {
+				htmlFor: "end-date-picker",
+				className: y("mb-1 block text-sm font-medium", B && "cursor-pointer", j),
+				children: /* @__PURE__ */ g("span", { children: e.endDate })
+			}),
+			re ? /* @__PURE__ */ g(l, {
+				id: "end-date-picker",
+				value: r ?? null,
+				placeholder: e.pickEndDate,
+				triggerTestId: "end-date-trigger",
+				isHydrated: L,
+				open: !B && d,
+				onOpenChange: f,
+				readOnly: B,
+				openOnFocus: te,
+				onValueUpdate: (e) => {
+					let t = (() => {
+						if (!d || typeof document > "u") return !1;
+						let e = document.activeElement;
+						return e instanceof HTMLElement && e.id === "end-date-picker";
+					})();
+					if (!n || !e || e < n) {
+						A(), t && Z();
+						return;
+					}
+					C(e), t && Q(e);
+				},
+				onChange: (e) => {
+					if (A(), (() => {
+						if (typeof document > "u") return H.current = !1, !1;
+						let e = document.activeElement, t = H.current && e instanceof HTMLElement && e.id === "end-date-picker";
+						return H.current = !1, t;
+					})() || e && r && e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth() && e.getDate() === r.getDate()) return;
+					let t = (() => {
+						if (!e || typeof document > "u") return !1;
+						let t = document.activeElement;
+						return t instanceof HTMLElement && !!(document.getElementById("end-date-calendar")?.contains(t) || t.id === "end-date-picker");
+					})();
+					u(e ?? void 0, { openTimePicker: t ? void 0 : !1 });
+				},
+				inputClassName: y(P.endDate && "border-destructive", M, N),
+				dayPickerComponent: X,
+				dayPickerProps: {
+					id: "end-date-calendar",
+					locale: F,
+					showOutsideDays: !1,
+					numberOfMonths: I,
+					disabled: (e) => n && e < n || e < z,
+					autoFocus: !0,
+					"data-testid": "end-date-calendar"
+				},
+				portalContainer: q
+			}) : /* @__PURE__ */ g(v, {
+				id: "end-date-picker",
+				value: r ?? null,
+				placeholder: e.pickEndDate,
+				triggerTestId: "end-date-trigger",
+				isHydrated: L,
+				open: !B && d,
+				onOpenChange: f,
+				readOnly: B,
+				onValueUpdate: (e) => {
+					let t = (() => {
+						if (!d || typeof document > "u") return !1;
+						let e = document.activeElement;
+						return e instanceof HTMLElement && e.id === "end-date-picker";
+					})();
+					if (!n || !e || e < n) {
+						A(), t && Z();
+						return;
+					}
+					C(e), t && Q(e);
+				},
+				onChange: (e) => {
+					if (A(), (() => {
+						if (typeof document > "u") return H.current = !1, !1;
+						let e = document.activeElement, t = H.current && e instanceof HTMLElement && e.id === "end-date-picker";
+						return H.current = !1, t;
+					})() || e && r && e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth() && e.getDate() === r.getDate()) return;
+					let t = (() => {
+						if (!e || typeof document > "u") return !1;
+						let t = document.activeElement;
+						return t instanceof HTMLElement && !!(document.getElementById("end-date-calendar")?.contains(t) || t.id === "end-date-picker");
+					})();
+					u(e ?? void 0, { openTimePicker: t ? void 0 : !1 });
+				},
+				inputClassName: y(P.endDate && "border-destructive", M, N),
+				dayPickerComponent: X,
+				dayPickerProps: {
+					id: "end-date-calendar",
+					locale: F,
+					showOutsideDays: !1,
+					numberOfMonths: I,
+					disabled: (e) => n && e < n || e < z,
+					autoFocus: !0,
+					"data-testid": "end-date-calendar"
+				}
+			}),
+			P.endDate && /* @__PURE__ */ g(c, { children: P.endDate })
+		]
+	});
 };
+//#endregion
+export { A as BookingEndDateField };