@resira/ui 0.4.5 → 0.4.6

package/dist/index.d.cts

@@ -790,119 +790,6 @@ interface UseCheckoutSessionReturn {
  * ```
  */
 declare function useCheckoutSession(token: string | undefined): UseCheckoutSessionReturn;
-/** A single duration/price option for a service. */
-interface ServiceOption {
-    /** Duration in minutes. */
-    durationMinutes: number;
-    /** Human-readable duration label (e.g. "1h 30m"). */
-    durationLabel: string;
-    /** Price in minor units (cents). */
-    priceCents: number;
-    /** Formatted price string (e.g. "€50.00"). */
-    priceFormatted: string;
-}
-/** Enriched service data ready for display. */
-interface Service {
-    /** Unique service ID. */
-    id: string;
-    /** Service name. */
-    name: string;
-    /** Optional description. */
-    description?: string;
-    /** Image URL. */
-    imageUrl?: string;
-    /** ISO 4217 currency code. */
-    currency: string;
-    /** Whether the service is active. */
-    active: boolean;
-    /** Pricing model: "per_session" | "per_person" | "per_rider". */
-    pricingModel: string;
-    /** Default/base price in minor units. */
-    priceCents: number;
-    /** Formatted base price (e.g. "€50.00"). */
-    priceFormatted: string;
-    /** Lowest price across all options (for "from €X" display). */
-    lowestPriceCents: number;
-    /** Formatted lowest price. */
-    lowestPriceFormatted: string;
-    /** Whether multiple duration/price options exist. */
-    hasMultipleOptions: boolean;
-    /** Default duration in minutes. */
-    durationMinutes: number;
-    /** Human-readable default duration (e.g. "2h"). */
-    durationLabel: string;
-    /** All available duration/price options. */
-    options: ServiceOption[];
-    /** Maximum party/group size. */
-    maxPartySize?: number;
-    /** IDs of linked equipment/resources. */
-    equipmentIds: string[];
-    /** Names of linked equipment/resources. */
-    equipmentNames?: string[];
-    /** Display color. */
-    serviceColor?: string;
-    /** Sort order. */
-    sortOrder?: number;
-    /** Raw product object from the API. */
-    raw: Product;
-}
-interface UseServicesReturn {
-    /** Enriched service list. */
-    services: Service[];
-    /** Whether loading. */
-    loading: boolean;
-    /** Error message. */
-    error: string | null;
-    /** Re-fetch services. */
-    refetch: () => void;
-}
-/**
- * Fetch all services for the organisation with enriched display data.
- *
- * Returns formatted prices, duration labels, and "from €X" logic
- * so you can render service cards with your own styling.
- *
- * Requires `<ResiraProvider>` ancestor.
- *
- * ```tsx
- * const { services, loading, error } = useServices();
- *
- * return services.map(s => (
- *   <div key={s.id}>
- *     <h3>{s.name}</h3>
- *     <img src={s.imageUrl} alt={s.name} />
- *     <p>{s.hasMultipleOptions ? `from ${s.lowestPriceFormatted}` : s.priceFormatted}</p>
- *     <p>{s.durationLabel}</p>
- *     {s.options.map(opt => (
- *       <span key={opt.durationMinutes}>{opt.durationLabel} — {opt.priceFormatted}</span>
- *     ))}
- *   </div>
- * ));
- * ```
- */
-declare function useServices(): UseServicesReturn;
-/**
- * Fetch all services for an organisation — standalone, no React needed.
- *
- * Use this in non-React contexts, server components, scripts, or
- * when you want full control over rendering.
- *
- * ```ts
- * import { fetchServices } from "@resira/ui";
- *
- * const services = await fetchServices("your-api-key");
- * services.forEach(s => {
- *   console.log(s.name, s.lowestPriceFormatted, s.options);
- * });
- * ```
- *
- * @param apiKey  Your Resira public API key
- * @param opts    Optional: baseUrl override
- * @returns       Array of enriched Service objects
- */
-declare function fetchServices(apiKey: string, opts?: {
-    baseUrl?: string;
-}): Promise<Service[]>;
 
 /** Default theme values. */
 declare const DEFAULT_THEME: Required<ResiraTheme>;
@@ -942,4 +829,4 @@ declare function TagIcon({ size, className }: IconProps): react_jsx_runtime.JSX.
 declare function CubeIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 declare function ViewfinderIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 
-export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type Service, type ServiceLayout, type ServiceOption, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, type UseServicesReturn, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, fetchServices, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, useServices, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type ServiceLayout, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };

package/dist/index.d.ts

@@ -790,119 +790,6 @@ interface UseCheckoutSessionReturn {
  * ```
  */
 declare function useCheckoutSession(token: string | undefined): UseCheckoutSessionReturn;
-/** A single duration/price option for a service. */
-interface ServiceOption {
-    /** Duration in minutes. */
-    durationMinutes: number;
-    /** Human-readable duration label (e.g. "1h 30m"). */
-    durationLabel: string;
-    /** Price in minor units (cents). */
-    priceCents: number;
-    /** Formatted price string (e.g. "€50.00"). */
-    priceFormatted: string;
-}
-/** Enriched service data ready for display. */
-interface Service {
-    /** Unique service ID. */
-    id: string;
-    /** Service name. */
-    name: string;
-    /** Optional description. */
-    description?: string;
-    /** Image URL. */
-    imageUrl?: string;
-    /** ISO 4217 currency code. */
-    currency: string;
-    /** Whether the service is active. */
-    active: boolean;
-    /** Pricing model: "per_session" | "per_person" | "per_rider". */
-    pricingModel: string;
-    /** Default/base price in minor units. */
-    priceCents: number;
-    /** Formatted base price (e.g. "€50.00"). */
-    priceFormatted: string;
-    /** Lowest price across all options (for "from €X" display). */
-    lowestPriceCents: number;
-    /** Formatted lowest price. */
-    lowestPriceFormatted: string;
-    /** Whether multiple duration/price options exist. */
-    hasMultipleOptions: boolean;
-    /** Default duration in minutes. */
-    durationMinutes: number;
-    /** Human-readable default duration (e.g. "2h"). */
-    durationLabel: string;
-    /** All available duration/price options. */
-    options: ServiceOption[];
-    /** Maximum party/group size. */
-    maxPartySize?: number;
-    /** IDs of linked equipment/resources. */
-    equipmentIds: string[];
-    /** Names of linked equipment/resources. */
-    equipmentNames?: string[];
-    /** Display color. */
-    serviceColor?: string;
-    /** Sort order. */
-    sortOrder?: number;
-    /** Raw product object from the API. */
-    raw: Product;
-}
-interface UseServicesReturn {
-    /** Enriched service list. */
-    services: Service[];
-    /** Whether loading. */
-    loading: boolean;
-    /** Error message. */
-    error: string | null;
-    /** Re-fetch services. */
-    refetch: () => void;
-}
-/**
- * Fetch all services for the organisation with enriched display data.
- *
- * Returns formatted prices, duration labels, and "from €X" logic
- * so you can render service cards with your own styling.
- *
- * Requires `<ResiraProvider>` ancestor.
- *
- * ```tsx
- * const { services, loading, error } = useServices();
- *
- * return services.map(s => (
- *   <div key={s.id}>
- *     <h3>{s.name}</h3>
- *     <img src={s.imageUrl} alt={s.name} />
- *     <p>{s.hasMultipleOptions ? `from ${s.lowestPriceFormatted}` : s.priceFormatted}</p>
- *     <p>{s.durationLabel}</p>
- *     {s.options.map(opt => (
- *       <span key={opt.durationMinutes}>{opt.durationLabel} — {opt.priceFormatted}</span>
- *     ))}
- *   </div>
- * ));
- * ```
- */
-declare function useServices(): UseServicesReturn;
-/**
- * Fetch all services for an organisation — standalone, no React needed.
- *
- * Use this in non-React contexts, server components, scripts, or
- * when you want full control over rendering.
- *
- * ```ts
- * import { fetchServices } from "@resira/ui";
- *
- * const services = await fetchServices("your-api-key");
- * services.forEach(s => {
- *   console.log(s.name, s.lowestPriceFormatted, s.options);
- * });
- * ```
- *
- * @param apiKey  Your Resira public API key
- * @param opts    Optional: baseUrl override
- * @returns       Array of enriched Service objects
- */
-declare function fetchServices(apiKey: string, opts?: {
-    baseUrl?: string;
-}): Promise<Service[]>;
 
 /** Default theme values. */
 declare const DEFAULT_THEME: Required<ResiraTheme>;
@@ -942,4 +829,4 @@ declare function TagIcon({ size, className }: IconProps): react_jsx_runtime.JSX.
 declare function CubeIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 declare function ViewfinderIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 
-export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type Service, type ServiceLayout, type ServiceOption, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, type UseServicesReturn, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, fetchServices, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, useServices, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type ServiceLayout, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };

package/dist/index.js

@@ -650,101 +650,6 @@ function useCheckoutSession(token) {
   }, [client, token]);
   return { session, loading, error, errorCode };
 }
-function formatPriceCentsUtil(cents, currency) {
-  return new Intl.NumberFormat("default", { style: "currency", currency }).format(cents / 100);
-}
-function formatDurationUtil(minutes) {
-  if (minutes < 60) return `${minutes} min`;
-  const h = Math.floor(minutes / 60);
-  const m = minutes % 60;
-  return m > 0 ? `${h}h ${m}m` : `${h}h`;
-}
-function enrichProduct(product) {
-  const currency = product.currency ?? "EUR";
-  const options = [];
-  if (product.durationPricing?.length) {
-    for (const dp of product.durationPricing) {
-      options.push({
-        durationMinutes: dp.durationMinutes,
-        durationLabel: formatDurationUtil(dp.durationMinutes),
-        priceCents: dp.priceCents,
-        priceFormatted: formatPriceCentsUtil(dp.priceCents, currency)
-      });
-    }
-  } else {
-    options.push({
-      durationMinutes: product.durationMinutes,
-      durationLabel: formatDurationUtil(product.durationMinutes),
-      priceCents: product.priceCents,
-      priceFormatted: formatPriceCentsUtil(product.priceCents, currency)
-    });
-  }
-  const lowestPriceCents = Math.min(...options.map((o) => o.priceCents));
-  return {
-    id: product.id,
-    name: product.name,
-    description: product.description,
-    imageUrl: product.imageUrl,
-    currency,
-    active: product.active,
-    pricingModel: product.pricingModel,
-    priceCents: product.priceCents,
-    priceFormatted: formatPriceCentsUtil(product.priceCents, currency),
-    lowestPriceCents,
-    lowestPriceFormatted: formatPriceCentsUtil(lowestPriceCents, currency),
-    hasMultipleOptions: options.length > 1,
-    durationMinutes: product.durationMinutes,
-    durationLabel: formatDurationUtil(product.durationMinutes),
-    options,
-    maxPartySize: product.maxPartySize,
-    equipmentIds: product.equipmentIds,
-    equipmentNames: product.equipmentNames,
-    serviceColor: product.serviceColor,
-    sortOrder: product.sortOrder,
-    raw: product
-  };
-}
-function useServices() {
-  const { client } = useResira();
-  const [services, setServices] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [fetchCount, setFetchCount] = useState(0);
-  useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    async function load() {
-      try {
-        const data = await client.listProducts();
-        if (!cancelled) {
-          setServices((data.products ?? []).map(enrichProduct));
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : "Failed to load services");
-        }
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    }
-    load();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, fetchCount]);
-  const refetch = useCallback(() => setFetchCount((c) => c + 1), []);
-  return { services, loading, error, refetch };
-}
-async function fetchServices(apiKey, opts) {
-  const { Resira: Resira2 } = await import('@resira/sdk');
-  const client = new Resira2({
-    apiKey,
-    ...opts?.baseUrl ? { baseUrl: opts.baseUrl } : {}
-  });
-  const data = await client.listProducts();
-  return (data.products ?? []).map(enrichProduct);
-}
 var defaultSize = 20;
 function CalendarIcon({ size = defaultSize, className }) {
   return /* @__PURE__ */ jsxs(
@@ -1699,6 +1604,99 @@ function formatDuration(minutes) {
   return `${h}h ${m}m`;
 }
 var PLACEHOLDER_IMG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='240' fill='%23e2e8f0'%3E%3Crect width='400' height='240' rx='8'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='system-ui' font-size='16' fill='%2394a3b8'%3ENo image%3C/text%3E%3C/svg%3E";
+function resolveImages(resource) {
+  if (resource.images && resource.images.length > 0) return resource.images;
+  if (resource.imageUrl) return [{ url: resource.imageUrl }];
+  return [];
+}
+function ChevronLeftIcon2() {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ChevronRightIcon2() {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ResourceImageCarousel({
+  images,
+  alt
+}) {
+  const [idx, setIdx] = useState(0);
+  const hasMultiple = images.length > 1;
+  const current = images[idx] ?? images[0];
+  const goPrev = useCallback(
+    (e) => {
+      e.stopPropagation();
+      setIdx((i) => (i - 1 + images.length) % images.length);
+    },
+    [images.length]
+  );
+  const goNext = useCallback(
+    (e) => {
+      e.stopPropagation();
+      setIdx((i) => (i + 1) % images.length);
+    },
+    [images.length]
+  );
+  if (!current) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: PLACEHOLDER_IMG,
+        alt,
+        loading: "lazy"
+      }
+    );
+  }
+  const ds = current.displaySettings;
+  return /* @__PURE__ */ jsxs("div", { className: "resira-resource-carousel", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: current.url,
+        alt,
+        loading: "lazy",
+        style: {
+          objectFit: ds?.objectFit ?? "cover",
+          objectPosition: ds?.objectPosition ?? "center center",
+          transform: ds?.zoom && ds.zoom !== 1 ? `scale(${ds.zoom})` : void 0
+        }
+      }
+    ),
+    hasMultiple && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "resira-resource-carousel-btn resira-resource-carousel-prev",
+          onClick: goPrev,
+          "aria-label": "Previous image",
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon2, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "resira-resource-carousel-btn resira-resource-carousel-next",
+          onClick: goNext,
+          "aria-label": "Next image",
+          children: /* @__PURE__ */ jsx(ChevronRightIcon2, {})
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "resira-resource-carousel-dots", children: images.map((_, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `resira-resource-carousel-dot${i === idx ? " resira-resource-carousel-dot--active" : ""}`
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsxs("span", { className: "resira-resource-carousel-count", children: [
+        idx + 1,
+        "/",
+        images.length
+      ] })
+    ] })
+  ] });
+}
 function ResourcePicker({
   resources,
   selectedIds,
@@ -1734,14 +1732,17 @@ function ResourcePicker({
           onClick: () => onSelect(resource.id),
           "aria-pressed": isSelected,
           children: [
-            /* @__PURE__ */ jsx("div", { className: "resira-resource-card-image", children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: resource.imageUrl ?? PLACEHOLDER_IMG,
-                alt: resource.name,
-                loading: "lazy"
-              }
-            ) }),
+            /* @__PURE__ */ jsx("div", { className: "resira-resource-card-image", children: (() => {
+              const images = resolveImages(resource);
+              return images.length > 0 ? /* @__PURE__ */ jsx(ResourceImageCarousel, { images, alt: resource.name }) : /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: PLACEHOLDER_IMG,
+                  alt: resource.name,
+                  loading: "lazy"
+                }
+              );
+            })() }),
             /* @__PURE__ */ jsxs("div", { className: "resira-resource-card-content", children: [
               /* @__PURE__ */ jsx("h3", { className: "resira-resource-card-name", children: resource.name }),
               resource.description && /* @__PURE__ */ jsx("p", { className: "resira-resource-card-description", children: resource.description }),
@@ -1809,17 +1810,18 @@ function groupProductsByCategory(products, resources) {
     const groupId = categoryType?.toLowerCase() ?? UNCATEGORIZED_CATEGORY_KEY;
     const label = categoryType ? formatCategoryLabel(categoryType) : UNCATEGORIZED_CATEGORY_LABEL;
     if (!groups.has(groupId)) {
+      const catImage = categoryResource?.images?.[0]?.url ?? categoryResource?.imageUrl ?? void 0;
       groups.set(groupId, {
         id: groupId,
         label,
-        imageUrl: categoryResource?.imageUrl ?? void 0,
+        imageUrl: catImage,
         products: []
       });
     }
     const group = groups.get(groupId);
     group.products.push(product);
-    if (!group.imageUrl && categoryResource?.imageUrl) {
-      group.imageUrl = categoryResource.imageUrl;
+    if (!group.imageUrl && categoryResource) {
+      group.imageUrl = categoryResource.images?.[0]?.url ?? categoryResource.imageUrl;
     }
   });
   return Array.from(groups.values());
@@ -1872,10 +1874,6 @@ function ServiceOverlayCard({
 }) {
   const currency = product.currency ?? "EUR";
   const priceLabel = product.pricingModel === "per_rider" ? "per rider" : product.pricingModel === "per_person" ? locale.perPerson : locale.perSession;
-  const hasMultipleOptions = (product.durationPricing?.length ?? 0) > 1 || (product.riderTierPricing?.length ?? 0) > 1;
-  const lowestPrice = hasMultipleOptions && product.durationPricing?.length ? Math.min(...product.durationPricing.map((dp) => dp.priceCents)) : product.priceCents;
-  const pricePrefix = hasMultipleOptions ? "from " : "";
-  const optionCount = product.durationPricing?.length ?? (product.riderTierPricing?.length ?? 0);
   let className = "resira-service-overlay-card";
   if (isSelected) className += " resira-service-overlay-card--selected";
   if (cardClassName) className += ` ${cardClassName}`;
@@ -1896,22 +1894,17 @@ function ServiceOverlayCard({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "resira-service-overlay-card-bottom", children: [
         /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-price", children: [
-          pricePrefix,
-          formatPrice2(lowestPrice, currency),
+          formatPrice2(product.priceCents, currency),
           /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-price-unit", children: [
             "/",
             priceLabel
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "resira-service-overlay-card-pills", children: [
-          hasMultipleOptions && optionCount > 1 ? /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
-            /* @__PURE__ */ jsx(ClockIcon, { size: 11 }),
-            optionCount,
-            " options"
-          ] }) : product.durationMinutes > 0 ? /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+          product.durationMinutes > 0 && /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
             /* @__PURE__ */ jsx(ClockIcon, { size: 11 }),
             formatDuration2(product.durationMinutes)
-          ] }) : null,
+          ] }),
           product.maxPartySize && /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
             /* @__PURE__ */ jsx(UsersIcon, { size: 11 }),
             "max ",
@@ -3128,14 +3121,8 @@ function ResiraBookingWidget() {
           partySize: clampedPartySize
         };
       });
-      if (step === "resource" && isServiceBased) {
-        const nextIdx = stepIndex("resource", STEPS) + 1;
-        if (nextIdx < STEPS.length) {
-          setStep(STEPS[nextIdx]);
-        }
-      }
     },
-    [setActiveResourceId, domainConfig.maxPartySize, step, isServiceBased, STEPS]
+    [setActiveResourceId, domainConfig.maxPartySize]
   );
   const handleResourceSelect = useCallback(
     (resourceId) => {
@@ -4317,6 +4304,6 @@ function DishShowcase({
   ] });
 }
 
-export { AlertCircleIcon, BookingCalendar, BookingModal, CalendarIcon, CheckCircleIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, DishShowcase, GuestForm, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, ResiraProvider, ResourcePicker, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, fetchServices, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, useServices, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, CalendarIcon, CheckCircleIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, DishShowcase, GuestForm, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, ResiraProvider, ResourcePicker, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map