@planetaexo/design-system 0.94.0 → 0.95.1

package/dist/index.cjs

@@ -18,6 +18,7 @@ var mergeProps = require('@base-ui/react/merge-props');
 var useRender = require('@base-ui/react/use-render');
 var reactDom = require('react-dom');
 var input = require('@base-ui/react/input');
+var tooltip = require('@base-ui/react/tooltip');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -12562,7 +12563,7 @@ function PhotoTile({
   onClick,
   showCredit = false
 }) {
-  var _a, _b;
+  var _a, _b, _c;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -12577,8 +12578,8 @@ function PhotoTile({
         /* @__PURE__ */ jsxRuntime.jsx(
           Picture,
           {
-            src: photo.src,
-            alt: (_b = photo.alt) != null ? _b : `Photo ${index + 1}`,
+            src: (_b = photo.thumbSrc) != null ? _b : photo.src,
+            alt: (_c = photo.alt) != null ? _c : `Photo ${index + 1}`,
             title: photo.caption,
             className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105",
             loading: "lazy"
@@ -12695,7 +12696,7 @@ function MasonryGallery({
   const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "columns-2 sm:columns-3 gap-1 [&>*]:break-inside-avoid [&>*]:mb-1", children: visible.map((p, i) => {
-      var _a, _b;
+      var _a, _b, _c;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -12707,8 +12708,8 @@ function MasonryGallery({
             /* @__PURE__ */ jsxRuntime.jsx(
               Picture,
               {
-                src: p.src,
-                alt: (_b = p.alt) != null ? _b : `Photo ${i + 1}`,
+                src: (_b = p.thumbSrc) != null ? _b : p.src,
+                alt: (_c = p.alt) != null ? _c : `Photo ${i + 1}`,
                 title: p.caption,
                 className: "w-full h-auto object-cover transition-transform duration-700 group-hover:scale-105",
                 loading: "lazy"
@@ -12736,7 +12737,7 @@ function FilmstripGallery({
   onOpen
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto flex gap-1 snap-x snap-mandatory pb-1 scrollbar-none", children: photos.map((p, i) => {
-    var _a, _b;
+    var _a, _b, _c;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -12748,8 +12749,8 @@ function FilmstripGallery({
           /* @__PURE__ */ jsxRuntime.jsx(
             Picture,
             {
-              src: p.src,
-              alt: (_b = p.alt) != null ? _b : `Photo ${i + 1}`,
+              src: (_b = p.thumbSrc) != null ? _b : p.src,
+              alt: (_c = p.alt) != null ? _c : `Photo ${i + 1}`,
               title: p.caption,
               className: "h-full w-full object-cover transition-transform duration-700 group-hover:scale-105",
               loading: "lazy"
@@ -12803,7 +12804,7 @@ function FeaturedGallery({
       ] })
     ] }),
     expanded && extra.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 overflow-x-auto flex gap-1.5 snap-x snap-mandatory scrollbar-none rounded-xl overflow-hidden pb-0", children: extra.map((p, i) => {
-      var _a, _b;
+      var _a, _b, _c;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -12815,8 +12816,8 @@ function FeaturedGallery({
             /* @__PURE__ */ jsxRuntime.jsx(
               Picture,
               {
-                src: p.src,
-                alt: (_b = p.alt) != null ? _b : `Photo ${i + 4}`,
+                src: (_b = p.thumbSrc) != null ? _b : p.src,
+                alt: (_c = p.alt) != null ? _c : `Photo ${i + 4}`,
                 title: p.caption,
                 className: "h-full w-full object-cover transition-transform duration-700 group-hover:scale-105",
                 loading: "lazy"
@@ -18093,9 +18094,15 @@ var STATUS_MAP = {
   "operating": { label: "Operating", variant: "default", dot: "bg-primary-foreground" },
   "cancelled": { label: "Cancelled", variant: "destructive", dot: "bg-destructive" }
 };
-function StatusBadge2({ status, dot = true, label, className }) {
+function StatusBadge2({
+  status,
+  dot = true,
+  label,
+  variant,
+  className
+}) {
   const config = STATUS_MAP[status];
-  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: config.variant, className: cn("gap-1.5", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: variant != null ? variant : config.variant, className: cn("gap-1.5", className), children: [
     dot && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -18590,6 +18597,561 @@ function StickyBookingCard({
     }
   );
 }
+function TooltipProvider(_a) {
+  var _b = _a, {
+    delay = 200,
+    closeDelay = 0
+  } = _b, props = __objRest(_b, [
+    "delay",
+    "closeDelay"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Provider,
+    __spreadValues({
+      "data-slot": "tooltip-provider",
+      delay,
+      closeDelay
+    }, props)
+  );
+}
+function Tooltip(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Root, __spreadValues({ "data-slot": "tooltip" }, props));
+}
+function TooltipTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
+}
+function TooltipContent(_a) {
+  var _b = _a, {
+    className,
+    children,
+    side = "top",
+    sideOffset = 8,
+    align = "center",
+    showArrow = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "side",
+    "sideOffset",
+    "align",
+    "showArrow"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        tooltip.Tooltip.Popup,
+        __spreadProps(__spreadValues({
+          "data-slot": "tooltip-content",
+          className: cn(
+            // Legible system sans (not the display UI font), bumped size + padding,
+            // strong contrast and a defined shadow/ring for visibility.
+            "z-50 w-max max-w-72 origin-(--transform-origin) rounded-xl bg-foreground px-3.5 py-2.5 text-[13px] font-normal leading-snug text-background shadow-lg ring-1 ring-foreground/10 outline-hidden [font-family:ui-sans-serif,system-ui,-apple-system,'Segoe_UI',Roboto,Helvetica,Arial,sans-serif]",
+            "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )
+        }, props), {
+          children: [
+            showArrow && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "data-[side=bottom]:top-[-7px] data-[side=top]:bottom-[-7px] data-[side=top]:rotate-180", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "7", viewBox: "0 0 14 7", className: "fill-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 7 L7 0 L14 7 Z" }) }) }),
+            children
+          ]
+        })
+      )
+    }
+  ) });
+}
+var DEFAULT_LABELS15 = {
+  title: "Join an existing group",
+  chooseMonth: "Choose month",
+  allMonths: "All",
+  from: "From",
+  travellers: (c, cap) => `${c}/${cap} travellers`,
+  travellersOf: (c, cap) => `${c} of ${cap} travellers`,
+  seeMore: (n) => `See more (${n})`,
+  confirmsIn: (n) => `${n} more to confirm`,
+  fillingFast: (n) => `Filling fast \xB7 ${n} ${n === 1 ? "spot" : "spots"} left`,
+  atFull: "at full group",
+  join: "Join this group",
+  dynamicPricingTitle: "Dynamic pricing",
+  dynamicPricingBody: "Adventure Together departure \u2014 the price per person drops as more travellers join.",
+  startGroupTitle: "Can't find a date that suits you?",
+  startGroupBody: "Start your own group on the dates you want.",
+  startGroupCta: "Start a new group"
+};
+function isJoinable(d) {
+  return d.travellers < d.capacity && d.status !== "cancelled" && d.status !== "full" && d.status !== "draft";
+}
+function pickFeatured(list) {
+  const candidates = list.filter(isJoinable);
+  if (!candidates.length) return void 0;
+  return candidates.reduce(
+    (best, d) => d.travellers / d.capacity > best.travellers / best.capacity ? d : best
+  );
+}
+function fmtDates(d) {
+  var _a;
+  return (_a = d.dateLabel) != null ? _a : d.endDate ? `${d.startDate} to ${d.endDate}` : d.startDate;
+}
+function DeparturesList({
+  departures,
+  years,
+  defaultYear,
+  initialVisible = 4,
+  featured = true,
+  showStartGroup = true,
+  startGroupHref,
+  onStartGroup,
+  onSelect,
+  labels: labelsProp,
+  className
+}) {
+  const labels = React20__namespace.useMemo(
+    () => __spreadValues(__spreadValues({}, DEFAULT_LABELS15), labelsProp),
+    [labelsProp]
+  );
+  const yearList = React20__namespace.useMemo(() => {
+    if (years && years.length) return years;
+    return Array.from(new Set(departures.map((d) => d.year))).sort(
+      (a, b) => a - b
+    );
+  }, [years, departures]);
+  const [year, setYear] = React20__namespace.useState(defaultYear != null ? defaultYear : yearList[0]);
+  const [month, setMonth] = React20__namespace.useState(null);
+  const [expanded, setExpanded] = React20__namespace.useState(false);
+  const selectYear = (y) => {
+    setYear(y);
+    setMonth(null);
+    setExpanded(false);
+  };
+  const inYear = React20__namespace.useMemo(
+    () => departures.filter((d) => d.year === year),
+    [departures, year]
+  );
+  const months = React20__namespace.useMemo(() => {
+    var _a;
+    const counts = /* @__PURE__ */ new Map();
+    for (const d of inYear) counts.set(d.month, ((_a = counts.get(d.month)) != null ? _a : 0) + 1);
+    return Array.from(counts, ([name, count]) => ({ name, count }));
+  }, [inYear]);
+  const filtered = React20__namespace.useMemo(
+    () => month ? inYear.filter((d) => d.month === month) : inYear,
+    [inYear, month]
+  );
+  const featuredDeparture = React20__namespace.useMemo(() => {
+    if (featured === false) return void 0;
+    if (typeof featured === "string")
+      return filtered.find((d) => d.id === featured);
+    return pickFeatured(filtered);
+  }, [featured, filtered]);
+  const rows = React20__namespace.useMemo(
+    () => filtered.filter((d) => d.id !== (featuredDeparture == null ? void 0 : featuredDeparture.id)),
+    [filtered, featuredDeparture]
+  );
+  const visible = expanded ? rows : rows.slice(0, initialVisible);
+  const remaining = rows.length - visible.length;
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: cn(
+        "rounded-3xl border border-border bg-card p-5 text-card-foreground sm:p-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-display text-lg font-extrabold tracking-tight sm:text-xl", children: labels.title }),
+        yearList.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 mb-2 flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-ui text-xs uppercase tracking-wider text-muted-foreground", children: labels.chooseMonth }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "tablist",
+              "aria-label": "Year",
+              className: "inline-flex rounded-full border border-border p-0.5",
+              children: yearList.map((y) => {
+                const active = y === year;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    role: "tab",
+                    type: "button",
+                    "aria-selected": active,
+                    onClick: () => selectYear(y),
+                    className: cn(
+                      "cursor-pointer rounded-full px-3.5 py-1 font-ui text-xs font-bold leading-none transition-colors",
+                      active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+                    ),
+                    children: y
+                  },
+                  y
+                );
+              })
+            }
+          )
+        ] }),
+        months.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "tablist",
+            "aria-label": labels.chooseMonth,
+            className: "-mx-1 flex gap-1.5 overflow-x-auto px-1 py-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MonthChip,
+                {
+                  label: labels.allMonths,
+                  selected: month === null,
+                  onClick: () => {
+                    setMonth(null);
+                    setExpanded(false);
+                  }
+                }
+              ),
+              months.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+                MonthChip,
+                {
+                  label: m.name,
+                  count: m.count,
+                  selected: month === m.name,
+                  onClick: () => {
+                    setMonth(m.name);
+                    setExpanded(false);
+                  }
+                },
+                m.name
+              ))
+            ]
+          }
+        ),
+        featuredDeparture && /* @__PURE__ */ jsxRuntime.jsx(
+          FeaturedDeparture,
+          {
+            departure: featuredDeparture,
+            labels,
+            onSelect
+          }
+        ),
+        visible.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-col gap-2.5", children: visible.map((d) => /* @__PURE__ */ jsxRuntime.jsx(
+          DepartureRow,
+          {
+            departure: d,
+            labels,
+            onSelect
+          },
+          d.id
+        )) }),
+        remaining > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(true),
+            className: "inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card px-4 py-2 font-display text-xs font-bold text-foreground transition-colors hover:bg-muted/50",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "size-4" }),
+              labels.seeMore(remaining)
+            ]
+          }
+        ) }),
+        showStartGroup && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 flex flex-wrap items-center gap-4 rounded-2xl border border-primary/25 bg-primary/10 p-5 sm:p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-44 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "block font-display text-base font-extrabold leading-tight text-foreground sm:text-lg", children: labels.startGroupTitle }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-sm leading-snug text-primary-800 dark:text-primary-300", children: labels.startGroupBody })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StartGroupCta,
+            {
+              href: startGroupHref,
+              onClick: onStartGroup,
+              label: labels.startGroupCta
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function FeaturedDeparture({
+  departure: d,
+  labels,
+  onSelect
+}) {
+  var _a;
+  const spotsLeft = d.capacity - d.travellers;
+  const needsQuorum = d.min != null && d.travellers < d.min;
+  const eyebrow = needsQuorum ? labels.confirmsIn(d.min - d.travellers) : labels.fillingFast(spotsLeft);
+  const ladder = d.dynamicPricing && d.lowestPrice && spotsLeft > 0;
+  const cta = d.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: d.href, className: buttonVariants({ variant: "primary", size: "md" }), children: labels.join }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "md", onClick: () => onSelect == null ? void 0 : onSelect(d), children: labels.join });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 rounded-2xl border border-primary/30 bg-gradient-to-b from-primary/[0.07] to-primary/[0.02] p-4 sm:p-5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "size-1.5 rounded-full bg-primary motion-safe:animate-pulse"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-ui text-[11px] font-bold uppercase tracking-wider text-primary-800 dark:text-primary-400", children: eyebrow })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-display text-lg font-extrabold tracking-tight whitespace-nowrap", children: fmtDates(d) }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatusChip, { status: d.status }),
+      d.dynamicPricing && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TooltipTrigger,
+          {
+            render: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.dynamicPricingTitle,
+                className: "ml-auto inline-flex cursor-help items-center text-primary"
+              }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SparklesIcon, { className: "size-[18px]", strokeWidth: 1.8 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-bold", children: labels.dynamicPricingTitle }),
+          labels.dynamicPricingBody
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-x-3 gap-y-2", children: [
+      d.participants && d.participants.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(AvatarStack, { participants: d.participants, capacity: d.capacity }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 font-sans text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UsersIcon, { className: "size-4", strokeWidth: 1.6, "aria-hidden": true }),
+        labels.travellersOf(d.travellers, d.capacity)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GroupProgressBar,
+      {
+        className: "mt-3",
+        current: d.travellers,
+        min: (_a = d.min) != null ? _a : d.travellers,
+        max: d.capacity,
+        hideLabels: d.min == null
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-wrap items-end justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-display text-xl font-extrabold tracking-tight whitespace-nowrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1 align-middle text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: labels.from }),
+          d.price
+        ] }),
+        ladder && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 font-sans text-sm font-semibold text-success whitespace-nowrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ArrowRightIcon,
+            {
+              className: "size-3.5 text-muted-foreground",
+              strokeWidth: 2.2,
+              "aria-hidden": true
+            }
+          ),
+          d.lowestPrice,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-normal text-muted-foreground", children: labels.atFull })
+        ] })
+      ] }),
+      cta
+    ] })
+  ] });
+}
+function AvatarStack({
+  participants,
+  capacity
+}) {
+  const shown = participants.slice(0, 4);
+  const extra = Math.max(0, participants.length - shown.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center -space-x-2", "aria-hidden": true, children: [
+    shown.map((p, i) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          title: p.country ? `${p.firstName} \xB7 ${p.country}` : p.firstName,
+          className: "flex size-7 items-center justify-center rounded-full border-2 border-card bg-primary/10 text-sm ring-0",
+          children: (_a = p.flag) != null ? _a : p.firstName.charAt(0)
+        },
+        `${p.firstName}-${i}`
+      );
+    }),
+    extra > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex size-7 items-center justify-center rounded-full border-2 border-card bg-muted font-ui text-[11px] font-bold text-muted-foreground", children: [
+      "+",
+      extra
+    ] }),
+    capacity > participants.length && participants.length < 5 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-7 items-center justify-center rounded-full border-2 border-dashed border-border bg-card text-muted-foreground/50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: "+" }) })
+  ] });
+}
+function MonthChip({
+  label,
+  count,
+  selected,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      role: "tab",
+      type: "button",
+      "aria-selected": selected,
+      onClick,
+      className: cn(
+        "inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 font-ui text-xs leading-none transition-colors",
+        selected ? "border-primary bg-primary/10 font-semibold text-primary-800 dark:text-primary-400" : "border-border text-foreground hover:border-foreground/30"
+      ),
+      children: [
+        label,
+        count != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 text-[11px]",
+              selected ? "bg-primary/15 text-primary-800 dark:text-primary-400" : "bg-muted text-muted-foreground"
+            ),
+            children: count
+          }
+        )
+      ]
+    }
+  );
+}
+function StatusChip({ status }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Chip,
+    {
+      variant: "solid",
+      size: "sm",
+      className: "hover:bg-muted hover:text-foreground/80",
+      children: STATUS_MAP[status].label
+    }
+  );
+}
+function DepartureRow({
+  departure: d,
+  labels,
+  onSelect
+}) {
+  var _a;
+  const dateLabel = fmtDates(d);
+  const statusTip = (_a = labels.statusTooltips) == null ? void 0 : _a[d.status];
+  const pct = Math.max(0, Math.min(100, d.travellers / d.capacity * 100));
+  const overlayClass = "absolute inset-0 z-0 rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+  const statusBadge = statusTip ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TooltipTrigger,
+      {
+        render: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            tabIndex: 0,
+            className: "pointer-events-auto cursor-help outline-hidden"
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(StatusChip, { status: d.status })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-bold", children: statusTip.title }),
+      statusTip.body
+    ] })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(StatusChip, { status: d.status });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-2 overflow-hidden rounded-2xl border border-border p-3.5 pb-4 transition-colors hover:border-foreground/25 hover:bg-muted/40 has-focus-visible:border-foreground/25 sm:flex sm:flex-nowrap sm:gap-4", children: [
+    d.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: d.href, "aria-label": dateLabel, className: overlayClass }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": dateLabel,
+        onClick: () => onSelect == null ? void 0 : onSelect(d),
+        className: cn(overlayClass, "w-full text-left")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10 font-display text-sm font-extrabold tracking-tight whitespace-nowrap sm:order-1", children: dateLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10 justify-self-end sm:order-3 sm:ml-auto", children: statusBadge }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pointer-events-none relative z-10 inline-flex items-center gap-2 sm:order-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 font-sans text-sm text-muted-foreground whitespace-nowrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UsersIcon, { className: "size-4", strokeWidth: 1.6 }),
+        labels.travellers(d.travellers, d.capacity)
+      ] }),
+      d.dynamicPricing && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TooltipTrigger,
+          {
+            render: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.dynamicPricingTitle,
+                className: "pointer-events-auto inline-flex cursor-help items-center text-primary"
+              }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SparklesIcon, { className: "size-[18px]", strokeWidth: 1.8 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-bold", children: labels.dynamicPricingTitle }),
+          labels.dynamicPricingBody
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pointer-events-none relative z-10 flex items-center justify-self-end gap-3 sm:order-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "w-[88px] text-right font-display text-sm font-extrabold whitespace-nowrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: labels.from }),
+        d.price
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.ArrowRightIcon,
+        {
+          className: "size-5 shrink-0 text-primary transition-transform group-hover:translate-x-0.5",
+          strokeWidth: 2.2,
+          "aria-hidden": true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-x-0 bottom-0 h-[3px] bg-transparent",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "block h-full rounded-full transition-[width] duration-500",
+              d.travellers >= d.capacity ? "bg-success/60" : "bg-primary/45"
+            ),
+            style: { width: `${pct}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+function StartGroupCta({
+  href,
+  onClick,
+  label
+}) {
+  const cls = "group/cta inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-full bg-primary px-6 py-3 font-display text-sm font-bold text-primary-foreground shadow-sm transition-all hover:bg-primary/90 hover:shadow-md";
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    label,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.ArrowRightIcon,
+      {
+        className: "size-4 transition-transform group-hover/cta:translate-x-0.5",
+        strokeWidth: 2.2
+      }
+    )
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: cls, children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: cls, children: content });
+}
 var DEFAULT_TRUSTPILOT = {
   businessUnitId: "6171e6a56fc555750dd81ae7",
   templateId: "5419b732fbfb950b10de65e5",
@@ -20542,6 +21104,7 @@ exports.DEFAULT_HEADER_LINKS = DEFAULT_HEADER_LINKS;
 exports.DEFAULT_LANGUAGES = DEFAULT_LANGUAGES;
 exports.DEPARTURE_STATUS_MAP = STATUS_MAP;
 exports.DatePickerField = DatePickerField;
+exports.DeparturesList = DeparturesList;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;