@loczer/storefront-sdk 0.148.0 → 0.149.0

package/dist/components/BookingBikeVariantDialog/index.js

@@ -0,0 +1,216 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useState as O, useEffect as q } from "react";
+import { useMediaQuery as K } from "@rpcbase/client";
+import { RESPONSIVE_DIALOG_MOBILE_MEDIA_QUERY as T, ResponsiveDialog as G, ResponsiveDialogContent as W, ResponsiveDialogHeader as F, ResponsiveDialogTitle as H, ResponsiveDialogDescription as U, ResponsiveDialogFooter as X } from "../../chunks/pkg/ui/dist/ResponsiveDialog-D8YzB_3J.js";
+import { cn as S } from "@rpcbase/ui";
+import { Bike as Y, CheckCircle2 as I, Plus as V } from "lucide-react";
+import { useTranslation as Z } from "react-i18next";
+import { getProductVariantAttributeValue as J, getStorefrontProductVariantDisplay as ee } from "../../lib/productVariants.js";
+import { resolveProductImageContainerStyle as ae } from "../../lib/productImageStyles.js";
+import { getAvailabilityVariant as te } from "../../lib/utils.js";
+import { getLocalizedValue as m } from "../../localization.js";
+import { useStorefrontWorkspaceLanguage as ie } from "../../StorefrontProvider.js";
+import { Badge as N } from "../../ui/badge.js";
+import { Button as x } from "../../ui/button.js";
+import { Input as se } from "../../ui/input.js";
+import { ProductPriceBadge as j } from "../ProductPriceBadge/index.js";
+import { ProductWarningNotice as B } from "../ProductWarningNotice/index.js";
+function ke({
+  open: o,
+  product: a,
+  onOpenChange: p,
+  getVariantAvailabilityLabel: u,
+  isVariantOutOfCapacity: d,
+  onAddVariant: g
+}) {
+  const { t: s, i18n: n } = Z(), r = K(T), c = ie(), [P, v] = O({});
+  if (q(() => {
+    !a || !o || v(
+      (a.productVariants ?? []).reduce((t, l) => (t[l.id] = 1, t), {})
+    );
+  }, [o, a]), !a)
+    return null;
+  const R = (t, l) => {
+    v((b) => ({
+      ...b,
+      [t]: Math.max(1, Math.floor(l))
+    }));
+  }, y = m(a.name, n.language, c), z = m(a.description, n.language, c), w = m(a.warning, n.language, c), k = typeof a.images?.[0] == "string" ? a.images[0].trim() : "", _ = ae(a.primaryImageStyle), h = te(a.availabilityStatus), f = a.features?.slice(0, 4) ?? [], C = a.productVariants ?? [], A = C.some((t) => !!J(t, "size")), M = s(A ? "product_size_label" : "product_variant_label");
+  return /* @__PURE__ */ e(G, { open: o, onOpenChange: p, children: /* @__PURE__ */ e(
+    W,
+    {
+      "data-testid": "storefront-booking-bike-dialog-content",
+      className: "overflow-hidden border-slate-200 bg-white p-0",
+      desktopClassName: "max-w-4xl gap-0",
+      mobileClassName: "max-h-[95dvh] gap-0",
+      children: /* @__PURE__ */ i("div", { "data-testid": "storefront-booking-bike-dialog", className: "flex max-h-[92dvh] flex-col", children: [
+        /* @__PURE__ */ i(F, { className: "border-b border-slate-200 px-5 py-4 text-left sm:px-6", children: [
+          /* @__PURE__ */ e(H, { className: "text-left text-lg font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: y }) }),
+          /* @__PURE__ */ e(U, { className: "line-clamp-2 text-left text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: z }) })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "overflow-y-auto", children: /* @__PURE__ */ i("div", { className: "grid gap-5 px-5 py-5 sm:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)] sm:px-6", children: [
+          /* @__PURE__ */ i("div", { className: "grid gap-4", children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: S("relative aspect-[1618/1000] overflow-hidden rounded-2xl", _.className),
+                style: _.style,
+                children: k ? /* @__PURE__ */ e(
+                  "img",
+                  {
+                    src: k,
+                    alt: y,
+                    className: "absolute inset-0 h-full w-full object-contain p-2",
+                    loading: "lazy"
+                  }
+                ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center text-slate-400", children: /* @__PURE__ */ e(Y, { className: "h-12 w-12", "aria-hidden": "true" }) })
+              }
+            ),
+            r ? null : /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ e(N, { variant: h.variant, children: /* @__PURE__ */ e("span", { children: s(h.labelKey) }) }),
+              /* @__PURE__ */ e(j, { prices: a.prices })
+            ] }),
+            !r && f.length > 0 ? /* @__PURE__ */ i("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: s("product_features_title") }) }),
+              /* @__PURE__ */ e("ul", { className: "grid gap-1.5 text-sm text-slate-700", children: f.map((t, l) => /* @__PURE__ */ i("li", { className: "inline-flex items-start gap-2", children: [
+                /* @__PURE__ */ e(I, { className: "mt-0.5 h-4 w-4 text-emerald-600", "aria-hidden": "true" }),
+                /* @__PURE__ */ e("span", { children: m(t, n.language, c) })
+              ] }, `${a.id}-${l}`)) })
+            ] }) : null,
+            r ? null : /* @__PURE__ */ e(B, { warning: w })
+          ] }),
+          /* @__PURE__ */ i("div", { className: "grid content-start gap-3", children: [
+            r ? /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ e(N, { variant: h.variant, children: /* @__PURE__ */ e("span", { children: s(h.labelKey) }) }),
+              /* @__PURE__ */ e(j, { prices: a.prices })
+            ] }) : null,
+            r && f.length > 0 ? /* @__PURE__ */ i("details", { className: "group rounded-2xl border border-slate-200 bg-slate-50", children: [
+              /* @__PURE__ */ i("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-3 px-3 py-2.5 text-sm font-semibold text-slate-950 [&::-webkit-details-marker]:hidden", children: [
+                /* @__PURE__ */ e("span", { children: s("product_features_title") }),
+                /* @__PURE__ */ e(V, { className: "h-4 w-4 shrink-0 transition-transform group-open:rotate-45", "aria-hidden": "true" })
+              ] }),
+              /* @__PURE__ */ e("div", { className: "border-t border-slate-200 px-3 py-3", children: /* @__PURE__ */ e("ul", { className: "grid gap-1.5 text-sm text-slate-700", children: f.map((t, l) => /* @__PURE__ */ i("li", { className: "inline-flex items-start gap-2", children: [
+                /* @__PURE__ */ e(I, { className: "mt-0.5 h-4 w-4 text-emerald-600", "aria-hidden": "true" }),
+                /* @__PURE__ */ e("span", { children: m(t, n.language, c) })
+              ] }, `${a.id}-mobile-${l}`)) }) })
+            ] }) : null,
+            r ? /* @__PURE__ */ e(B, { warning: w }) : null,
+            /* @__PURE__ */ e("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-slate-500", children: /* @__PURE__ */ e("span", { children: M }) }),
+            /* @__PURE__ */ e("div", { className: "grid gap-2", children: C.map((t) => {
+              const l = `storefront-booking-bike-dialog-variant-option-${a.id}-${t.id}`.toLowerCase(), { label: b, description: $ } = ee(t), D = P[t.id] ?? 1, Q = d?.(t.id) === !0, L = u?.(t.id) ?? null;
+              return /* @__PURE__ */ i(
+                "div",
+                {
+                  "data-testid": l,
+                  className: S(
+                    "flex flex-col gap-3 rounded-2xl border p-3 sm:flex-row sm:items-center sm:justify-between",
+                    "border-slate-200 bg-slate-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                      /* @__PURE__ */ e("span", { className: "text-sm font-medium text-slate-950", children: b }),
+                      $ ? /* @__PURE__ */ e("span", { className: "text-xs text-slate-600", children: $ }) : null,
+                      L ? /* @__PURE__ */ e("span", { className: "pt-1", children: /* @__PURE__ */ e(N, { variant: Q ? "destructive" : "outline", children: /* @__PURE__ */ e("span", { children: L }) }) }) : null
+                    ] }),
+                    /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2 sm:justify-end", children: [
+                      /* @__PURE__ */ e(
+                        le,
+                        {
+                          quantity: D,
+                          decreaseAriaLabel: s("decrease_quantity"),
+                          increaseAriaLabel: s("increase_quantity"),
+                          onQuantityChange: (E) => R(t.id, E),
+                          testIdPrefix: `storefront-booking-bike-dialog-variant-quantity-${a.id}-${t.id}`.toLowerCase()
+                        }
+                      ),
+                      /* @__PURE__ */ i(
+                        x,
+                        {
+                          type: "button",
+                          className: "gap-1.5 rounded-xl",
+                          "data-testid": `storefront-booking-bike-dialog-variant-add-${a.id}-${t.id}`.toLowerCase(),
+                          onClick: () => {
+                            g(t.id, D);
+                          },
+                          children: [
+                            /* @__PURE__ */ e("span", { children: s("add_short") }),
+                            /* @__PURE__ */ e(V, { className: "h-4 w-4", "aria-hidden": "true" })
+                          ]
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                t.id
+              );
+            }) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ e(X, { className: "border-t border-slate-200 px-5 py-4 sm:px-6", children: /* @__PURE__ */ e(
+          x,
+          {
+            type: "button",
+            variant: "outline",
+            className: "h-11 w-full rounded-xl sm:w-auto",
+            onClick: () => p(!1),
+            children: /* @__PURE__ */ e("span", { children: s("close_modal") })
+          }
+        ) })
+      ] })
+    }
+  ) });
+}
+function le({
+  decreaseAriaLabel: o,
+  increaseAriaLabel: a,
+  onQuantityChange: p,
+  quantity: u,
+  testIdPrefix: d
+}) {
+  const g = (s, n) => {
+    const r = n?.metaKey || n?.ctrlKey ? 10 : 1;
+    p(Math.max(1, u + s * r));
+  };
+  return /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ e(
+      x,
+      {
+        type: "button",
+        variant: "outline",
+        size: "icon",
+        className: "h-9 w-9 font-semibold",
+        "aria-label": o,
+        "data-testid": `${d}-decrement`,
+        onClick: (s) => g(-1, s),
+        children: /* @__PURE__ */ e("span", { children: "-" })
+      }
+    ),
+    /* @__PURE__ */ e(
+      se,
+      {
+        type: "text",
+        readOnly: !0,
+        value: u,
+        className: "h-9 w-12 text-center",
+        "aria-live": "polite",
+        "data-testid": `${d}-value`
+      }
+    ),
+    /* @__PURE__ */ e(
+      x,
+      {
+        type: "button",
+        variant: "outline",
+        size: "icon",
+        className: "h-9 w-9 font-semibold",
+        "aria-label": a,
+        "data-testid": `${d}-increment`,
+        onClick: (s) => g(1, s),
+        children: /* @__PURE__ */ e("span", { children: "+" })
+      }
+    )
+  ] });
+}
+export {
+  ke as BookingBikeVariantDialog
+};

package/dist/components/BookingFlowSteps/index.d.ts

@@ -0,0 +1,9 @@
+type BookingFlowStepsProps = {
+    currentStep: "booking" | "checkout";
+    bookingPath: string;
+    checkoutPath: string;
+    checkoutEnabled?: boolean;
+};
+export declare const BookingFlowSteps: ({ currentStep, bookingPath, checkoutPath, checkoutEnabled }: BookingFlowStepsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/BookingFlowSteps/index.js

@@ -0,0 +1,59 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { Link as x } from "@rpcbase/router";
+import { cn as s } from "@rpcbase/ui";
+import { useTranslation as m } from "react-i18next";
+const a = ({ index: t, label: l, state: e, href: o }) => {
+  const i = /* @__PURE__ */ r(
+    "span",
+    {
+      className: s(
+        "inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium sm:text-sm",
+        e === "active" && "border-slate-900 bg-slate-900 text-white",
+        e === "done" && "border-slate-300 bg-white text-slate-900",
+        e === "pending" && "border-slate-200 bg-slate-50 text-slate-500"
+      ),
+      children: [
+        /* @__PURE__ */ n(
+          "span",
+          {
+            className: s(
+              "inline-flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-semibold",
+              e === "active" && "bg-white/20 text-white",
+              e === "done" && "bg-slate-100 text-slate-800",
+              e === "pending" && "bg-slate-200 text-slate-600"
+            ),
+            children: t
+          }
+        ),
+        /* @__PURE__ */ n("span", { children: l })
+      ]
+    }
+  );
+  return !o || e === "active" ? i : /* @__PURE__ */ n(x, { to: o, className: "inline-flex", children: i });
+}, g = ({ currentStep: t, bookingPath: l, checkoutPath: e, checkoutEnabled: o = !0 }) => {
+  const { t: i } = m(), c = t === "booking" ? "active" : "done", d = t === "checkout" ? "active" : "pending";
+  return /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ n(
+      a,
+      {
+        index: 1,
+        label: i("flow_step_booking"),
+        state: c,
+        href: t === "checkout" ? l : void 0
+      }
+    ),
+    /* @__PURE__ */ n("span", { className: "text-slate-300", "aria-hidden": "true", children: "/" }),
+    /* @__PURE__ */ n(
+      a,
+      {
+        index: 2,
+        label: i("flow_step_checkout"),
+        state: d,
+        href: t === "booking" && o ? e : void 0
+      }
+    )
+  ] });
+};
+export {
+  g as BookingFlowSteps
+};

package/dist/components/BookingPeriodSelector/BookingPeriodContext.js

@@ -0,0 +1,16 @@
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as n, useContext as s } from "react";
+import { useBookingPeriodController as d } from "./useBookingPeriodController.js";
+const r = n(null), m = ({ children: o, ...e }) => {
+  const t = d(e);
+  return /* @__PURE__ */ i(r.Provider, { value: t, children: o });
+}, g = () => {
+  const o = s(r);
+  if (!o)
+    throw new Error("useBookingPeriod must be used within BookingPeriodProvider");
+  return o;
+};
+export {
+  m as BookingPeriodProvider,
+  g as useBookingPeriod
+};

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

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