@wix/headless-bookings 0.0.86 → 0.0.88

package/cjs/dist/react/booking/Booking.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import * as CoreBooking from '../core/booking/Booking.js';
 import type { BookingServiceConfig } from '../../services/booking/booking.js';
-import { type AsChildChildren } from '@wix/headless-utils/react';
+import * as BookingItemComponents from './BookingItem.js';
 export type { BookingData, DataProps, BookingItem, } from '../core/booking/Booking.js';
 /**
  * Props for Booking.Root component
@@ -63,132 +63,70 @@ export declare const Actions: {
  */
 export declare const useBookingItem: typeof CoreBooking.useBookingItemContext;
 /**
- * Props for Booking.ItemsRoot component (Container Level)
+ * Props for Booking.BookingItems component
  */
-export interface ItemsRootProps {
-    children: React.ReactNode;
-    className?: string;
-}
-/**
- * Container component that provides GenericList.Root context for booking items.
- * Use Booking.Items inside for list container with emptyState support.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.ItemsRoot>
- *   <Booking.Items emptyState={<div>No bookings selected</div>}>
- *     <Booking.ItemRepeater>
- *       <div className="booking-card">
- *         <Booking.Service>
- *           <Service.Name />
- *         </Booking.Service>
- *       </div>
- *     </Booking.ItemRepeater>
- *   </Booking.Items>
- * </Booking.ItemsRoot>
- * ```
- */
-export declare const ItemsRoot: React.ForwardRefExoticComponent<ItemsRootProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * Props for Booking.Items component (List Container Level)
- */
-export interface ItemsProps {
+export interface BookingItemsProps {
     children: React.ReactNode;
     /** Content to render when there are no booking items */
     emptyState?: React.ReactNode;
     className?: string;
 }
 /**
- * List container component with emptyState support.
- * Wraps GenericList.Items. Must be used within Booking.ItemsRoot.
+ * Container component for booking items with emptyState support.
+ * Provides GenericList context and renders items.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.ItemsRoot>
- *   <Booking.Items emptyState={<div>No bookings selected</div>}>
- *     <Booking.ItemRepeater>
- *       <Booking.Service>
- *         <Service.Name />
- *       </Booking.Service>
- *     </Booking.ItemRepeater>
- *   </Booking.Items>
- * </Booking.ItemsRoot>
+ * <Booking.BookingItems emptyState={<div>No bookings selected</div>}>
+ *   <Booking.BookingItemRepeater>
+ *     <BookingItem.Service>
+ *       <Service.Name />
+ *     </BookingItem.Service>
+ *   </Booking.BookingItemRepeater>
+ * </Booking.BookingItems>
  * ```
  */
-export declare const Items: React.ForwardRefExoticComponent<ItemsProps & React.RefAttributes<HTMLElement>>;
+export declare const BookingItems: React.ForwardRefExoticComponent<BookingItemsProps & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated Use Booking.BookingItems instead */
+export declare const ItemsRoot: React.ForwardRefExoticComponent<BookingItemsProps & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated Use Booking.BookingItems instead */
+export declare const Items: React.ForwardRefExoticComponent<BookingItemsProps & React.RefAttributes<HTMLDivElement>>;
 /**
- * Props for Booking.ItemRepeater component
+ * Props for Booking.BookingItemRepeater component
  */
-export interface ItemRepeaterProps {
+export interface BookingItemRepeaterProps {
     children: React.ReactNode;
 }
 /**
  * Repeater component that maps over booking items and provides context per item.
  * Uses GenericList.Repeater internally with itemWrapper that provides BookingItemContext.
- * Children have access to Booking.Service, Booking.TimeSlot, etc.
+ * Children have access to BookingItem.Service, BookingItem.TimeSlot, etc.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.ItemRepeater>
+ * <Booking.BookingItemRepeater>
  *   <div className="booking-card">
- *     <Booking.Service>
+ *     <BookingItem.Service>
  *       <Service.Name />
  *       <Service.Price />
- *     </Booking.Service>
- *     <Booking.TimeSlot>
+ *     </BookingItem.Service>
+ *     <BookingItem.TimeSlot>
  *       <TimeSlot.StartDate />
- *     </Booking.TimeSlot>
- *     <Booking.StaffName />
+ *     </BookingItem.TimeSlot>
+ *     <BookingItem.StaffName />
  *   </div>
- * </Booking.ItemRepeater>
- * ```
- */
-export declare const ItemRepeater: React.ForwardRefExoticComponent<ItemRepeaterProps & React.RefAttributes<HTMLElement>>;
-/**
- * Props for Booking.Service component
- */
-export interface BookingServiceProps {
-    children: React.ReactNode;
-}
-/**
- * Wraps Service.Root with the service from the current booking item context.
- * Children can use all Service.* components (Service.Name, Service.Price, etc.).
- *
- * @component
- * @example
- * ```tsx
- * <Booking.Service>
- *   <Service.Name className="text-xl font-bold" />
- *   <Service.Description />
- *   <Service.Price />
- * </Booking.Service>
+ * </Booking.BookingItemRepeater>
  * ```
  */
-export declare function Service(props: BookingServiceProps): React.ReactNode;
-/**
- * Props for Booking.TimeSlot component
- */
-export interface BookingTimeSlotProps {
-    children: React.ReactNode;
-}
-/**
- * Wraps TimeSlot.Root with the timeSlot from the current booking item context.
- * Children can use all TimeSlot.* components (TimeSlot.StartDate, TimeSlot.Duration, etc.).
- * Always renders with data-has-time-slot attribute for CSS targeting.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.TimeSlot>
- *   <TimeSlot.StartDate />
- *   <TimeSlot.Duration />
- * </Booking.TimeSlot>
- * ```
- */
-export declare function TimeSlot(props: BookingTimeSlotProps): React.ReactNode;
+export declare const BookingItemRepeater: React.ForwardRefExoticComponent<BookingItemRepeaterProps & React.RefAttributes<HTMLElement>>;
+/** @deprecated Use Booking.BookingItemRepeater instead */
+export declare const ItemRepeater: React.ForwardRefExoticComponent<BookingItemRepeaterProps & React.RefAttributes<HTMLElement>>;
+/** @deprecated Use BookingItem.Service instead */
+export declare const Service: typeof BookingItemComponents.Service;
+/** @deprecated Use BookingItem.TimeSlot instead */
+export declare const TimeSlot: typeof BookingItemComponents.TimeSlot;
 /**
  * Props for Booking.Payment component
  */
@@ -244,24 +182,5 @@ export interface BookingLocationProps {
  * ```
  */
 export declare function Location(props: BookingLocationProps): React.ReactNode;
-/**
- * Props for Booking.StaffName component
- */
-export interface StaffNameProps {
-    asChild?: boolean;
-    children?: AsChildChildren<{
-        name: string;
-    }>;
-    className?: string;
-}
-/**
- * Displays the first staff member's name from the current booking item.
- * Returns null when staff name is empty.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.StaffName className="text-foreground" />
- * ```
- */
-export declare const StaffName: React.ForwardRefExoticComponent<StaffNameProps & React.RefAttributes<HTMLElement>>;
+/** @deprecated Use BookingItem.StaffName instead */
+export declare const StaffName: React.ForwardRefExoticComponent<BookingItemComponents.StaffNameProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/booking/Booking.js

@@ -6,12 +6,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import * as CoreBooking from '../core/booking/Booking.js';
 import { Book } from './Book.js';
-import { AsChildSlot } from '@wix/headless-utils/react';
-import * as ServiceComponent from '../service/Service.js';
-import * as TimeSlotComponent from '../time-slot-list/TimeSlot.js';
 import * as PaymentComponent from '../payment/Payment.js';
 import * as CoreLocation from '../core/location/Location.js';
 import { GenericList } from '@wix/headless-components/react';
+// Re-export BookingItem components for backward compatibility
+import * as BookingItemComponents from './BookingItem.js';
 // ============================================================================
 // TestIds
 // ============================================================================
@@ -82,56 +81,33 @@ export const Actions = {
  */
 export const useBookingItem = CoreBooking.useBookingItemContext;
 /**
- * Container component that provides GenericList.Root context for booking items.
- * Use Booking.Items inside for list container with emptyState support.
+ * Container component for booking items with emptyState support.
+ * Provides GenericList context and renders items.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.ItemsRoot>
- *   <Booking.Items emptyState={<div>No bookings selected</div>}>
- *     <Booking.ItemRepeater>
- *       <div className="booking-card">
- *         <Booking.Service>
- *           <Service.Name />
- *         </Booking.Service>
- *       </div>
- *     </Booking.ItemRepeater>
- *   </Booking.Items>
- * </Booking.ItemsRoot>
+ * <Booking.BookingItems emptyState={<div>No bookings selected</div>}>
+ *   <Booking.BookingItemRepeater>
+ *     <BookingItem.Service>
+ *       <Service.Name />
+ *     </BookingItem.Service>
+ *   </Booking.BookingItemRepeater>
+ * </Booking.BookingItems>
  * ```
  */
-export const ItemsRoot = React.forwardRef((props, ref) => {
-    const { children, ...otherProps } = props;
+export const BookingItems = React.forwardRef((props, ref) => {
+    const { children, emptyState, ...otherProps } = props;
     return (_jsx(CoreBooking.ItemsData, { children: ({ items }) => (_jsx(GenericList.Root, { ref: ref, items: items.map((item) => ({
                 ...item,
                 id: item.instanceId,
-            })), hasMore: false, isLoading: false, "data-testid": TestIds.bookingItemsRoot, ...otherProps, children: children })) }));
-});
-ItemsRoot.displayName = 'Booking.ItemsRoot';
-/**
- * List container component with emptyState support.
- * Wraps GenericList.Items. Must be used within Booking.ItemsRoot.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.ItemsRoot>
- *   <Booking.Items emptyState={<div>No bookings selected</div>}>
- *     <Booking.ItemRepeater>
- *       <Booking.Service>
- *         <Service.Name />
- *       </Booking.Service>
- *     </Booking.ItemRepeater>
- *   </Booking.Items>
- * </Booking.ItemsRoot>
- * ```
- */
-export const Items = React.forwardRef((props, ref) => {
-    const { children, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.bookingItems, ...otherProps, children: children }));
+            })), hasMore: false, isLoading: false, "data-testid": TestIds.bookingItems, ...otherProps, children: _jsx(GenericList.Items, { emptyState: emptyState, children: children }) })) }));
 });
-Items.displayName = 'Booking.Items';
+BookingItems.displayName = 'Booking.BookingItems';
+/** @deprecated Use Booking.BookingItems instead */
+export const ItemsRoot = BookingItems;
+/** @deprecated Use Booking.BookingItems instead */
+export const Items = BookingItems;
 /**
  * Internal component that wraps each booking item with context provider.
  */
@@ -141,66 +117,39 @@ const BookingItemWrapper = ({ item, children, }) => {
 /**
  * Repeater component that maps over booking items and provides context per item.
  * Uses GenericList.Repeater internally with itemWrapper that provides BookingItemContext.
- * Children have access to Booking.Service, Booking.TimeSlot, etc.
+ * Children have access to BookingItem.Service, BookingItem.TimeSlot, etc.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.ItemRepeater>
+ * <Booking.BookingItemRepeater>
  *   <div className="booking-card">
- *     <Booking.Service>
+ *     <BookingItem.Service>
  *       <Service.Name />
  *       <Service.Price />
- *     </Booking.Service>
- *     <Booking.TimeSlot>
+ *     </BookingItem.Service>
+ *     <BookingItem.TimeSlot>
  *       <TimeSlot.StartDate />
- *     </Booking.TimeSlot>
- *     <Booking.StaffName />
+ *     </BookingItem.TimeSlot>
+ *     <BookingItem.StaffName />
  *   </div>
- * </Booking.ItemRepeater>
+ * </Booking.BookingItemRepeater>
  * ```
  */
-export const ItemRepeater = React.forwardRef((props, ref) => {
+export const BookingItemRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
     return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item }) => (_jsx(BookingItemWrapper, { item: item, children: children }, item.instanceId)), children: undefined }));
 });
-ItemRepeater.displayName = 'Booking.ItemRepeater';
-/**
- * Wraps Service.Root with the service from the current booking item context.
- * Children can use all Service.* components (Service.Name, Service.Price, etc.).
- *
- * @component
- * @example
- * ```tsx
- * <Booking.Service>
- *   <Service.Name className="text-xl font-bold" />
- *   <Service.Description />
- *   <Service.Price />
- * </Booking.Service>
- * ```
- */
-export function Service(props) {
-    const { children } = props;
-    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ service }) => (_jsx(ServiceComponent.Root, { service: service, children: children })) }));
-}
-/**
- * Wraps TimeSlot.Root with the timeSlot from the current booking item context.
- * Children can use all TimeSlot.* components (TimeSlot.StartDate, TimeSlot.Duration, etc.).
- * Always renders with data-has-time-slot attribute for CSS targeting.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.TimeSlot>
- *   <TimeSlot.StartDate />
- *   <TimeSlot.Duration />
- * </Booking.TimeSlot>
- * ```
- */
-export function TimeSlot(props) {
-    const { children } = props;
-    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ timeSlot }) => timeSlot ? (_jsx(TimeSlotComponent.Root, { timeSlot: timeSlot, children: children })) : null }));
-}
+BookingItemRepeater.displayName = 'Booking.BookingItemRepeater';
+/** @deprecated Use Booking.BookingItemRepeater instead */
+export const ItemRepeater = BookingItemRepeater;
+// ============================================================================
+// Deprecated: Service, TimeSlot, StaffName (moved to BookingItem namespace)
+// ============================================================================
+/** @deprecated Use BookingItem.Service instead */
+export const Service = BookingItemComponents.Service;
+/** @deprecated Use BookingItem.TimeSlot instead */
+export const TimeSlot = BookingItemComponents.TimeSlot;
 /**
  * Wraps Payment.Root with all services from all booking items.
  * Should be used outside of ItemRepeater - it calculates payment for all items.
@@ -245,23 +194,5 @@ export function Location(props) {
     const { children } = props;
     return (_jsx(CoreBooking.Data, { children: ({ location }) => location ? (_jsx(CoreLocation.Root, { location: location, children: children })) : null }));
 }
-/**
- * Displays the first staff member's name from the current booking item.
- * Returns null when staff name is empty.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.StaffName className="text-foreground" />
- * ```
- */
-export const StaffName = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ staffName }) => {
-            if (!staffName) {
-                return null;
-            }
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
-        } }));
-});
-StaffName.displayName = 'Booking.StaffName';
+/** @deprecated Use BookingItem.StaffName instead */
+export const StaffName = BookingItemComponents.StaffName;

package/cjs/dist/react/booking/BookingItem.d.ts

@@ -0,0 +1,64 @@
+/**
+ * BookingItem - Components for displaying booking item details
+ * Must be used within Booking.BookingItemRepeater context
+ */
+import React from 'react';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+export interface ServiceProps {
+    children: React.ReactNode;
+}
+/**
+ * Wraps Service.Root with the service from the current booking item context.
+ * Must be used within Booking.BookingItemRepeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingItem.Service>
+ *   <Service.Name className="text-xl font-bold" />
+ *   <Service.Price />
+ * </BookingItem.Service>
+ * ```
+ */
+export declare function Service(props: ServiceProps): React.ReactNode;
+export declare namespace Service {
+    var displayName: string;
+}
+export interface TimeSlotProps {
+    children: React.ReactNode;
+}
+/**
+ * Wraps TimeSlot.Root with the timeSlot from the current booking item context.
+ * Must be used within Booking.BookingItemRepeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingItem.TimeSlot>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.EndDate />
+ * </BookingItem.TimeSlot>
+ * ```
+ */
+export declare function TimeSlot(props: TimeSlotProps): React.ReactNode;
+export declare namespace TimeSlot {
+    var displayName: string;
+}
+export interface StaffNameProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        name: string;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the staff member's name from the current booking item.
+ * Must be used within Booking.BookingItemRepeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingItem.StaffName className="text-foreground" />
+ * ```
+ */
+export declare const StaffName: React.ForwardRefExoticComponent<StaffNameProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/booking/BookingItem.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BookingItem - Components for displaying booking item details
+ * Must be used within Booking.BookingItemRepeater context
+ */
+import React from 'react';
+import * as CoreBooking from '../core/booking/Booking.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as ServiceComponent from '../service/Service.js';
+import * as TimeSlotComponent from '../time-slot-list/TimeSlot.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["bookingItemService"] = "booking-item-service";
+    TestIds["bookingItemTimeSlot"] = "booking-item-time-slot";
+    TestIds["bookingItemStaffName"] = "booking-item-staff-name";
+})(TestIds || (TestIds = {}));
+/**
+ * Wraps Service.Root with the service from the current booking item context.
+ * Must be used within Booking.BookingItemRepeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingItem.Service>
+ *   <Service.Name className="text-xl font-bold" />
+ *   <Service.Price />
+ * </BookingItem.Service>
+ * ```
+ */
+export function Service(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ service }) => (_jsx(ServiceComponent.Root, { service: service, children: children })) }));
+}
+Service.displayName = 'BookingItem.Service';
+/**
+ * Wraps TimeSlot.Root with the timeSlot from the current booking item context.
+ * Must be used within Booking.BookingItemRepeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingItem.TimeSlot>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.EndDate />
+ * </BookingItem.TimeSlot>
+ * ```
+ */
+export function TimeSlot(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ timeSlot }) => timeSlot ? (_jsx(TimeSlotComponent.Root, { timeSlot: timeSlot, children: children })) : null }));
+}
+TimeSlot.displayName = 'BookingItem.TimeSlot';
+/**
+ * Displays the staff member's name from the current booking item.
+ * Must be used within Booking.BookingItemRepeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingItem.StaffName className="text-foreground" />
+ * ```
+ */
+export const StaffName = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ staffName }) => {
+            if (!staffName)
+                return null;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingItemStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
+        } }));
+});
+StaffName.displayName = 'BookingItem.StaffName';

package/cjs/dist/react/core/booking/Booking.js

@@ -25,7 +25,7 @@ import { LocationType, } from '@wix/auto_sdk_bookings_services';
  */
 export function Root(props) {
     const { bookingServiceConfig = {}, children } = props;
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(BookingServiceDefinition, BookingService, bookingServiceConfig), children: children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(BookingServiceDefinition, BookingService, bookingServiceConfig), disposeOnUnmount: true, children: children }));
 }
 /**
  * Core component that provides access to booking data via render props.

package/cjs/dist/react/core/booking-form/BookingForm.js

@@ -178,7 +178,7 @@ export function Root(props) {
     }
     // Use Form.Root to set up FormService, then nest WixServices for BookingFormService
     // This allows BookingFormService to access FormService via getService internally
-    return (_jsx(Form.Root, { formServiceConfig: formServiceConfig, ref: formRef, children: _jsx(WixServices, { servicesMap: createServicesMap().addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), children: _jsx(BookingFormContent, { fields: fieldMap, formRef: formRef, children: children }) }) }));
+    return (_jsx(Form.Root, { formServiceConfig: formServiceConfig, ref: formRef, children: _jsx(WixServices, { servicesMap: createServicesMap().addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), disposeOnUnmount: true, children: _jsx(BookingFormContent, { fields: fieldMap, formRef: formRef, children: children }) }) }));
 }
 /**
  * Internal component that consumes BookingFormService and provides render props.

package/cjs/dist/react/core/location-list/LocationList.js

@@ -18,7 +18,7 @@ import { LocationListServiceDefinition, LocationListService, } from '../../../se
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(LocationListServiceDefinition, LocationListService, props.locationListServiceConfig), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(LocationListServiceDefinition, LocationListService, props.locationListServiceConfig), disposeOnUnmount: true, children: props.children }));
 }
 /**
  * Core component that provides access to locations list via render props

package/cjs/dist/react/core/payment/Payment.js

@@ -56,7 +56,7 @@ export function Root(props) {
         pricingServiceSelections,
         numberOfParticipants,
     };
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(PaymentServiceDefinition, PaymentService, internalConfig), children: _jsx(RootContent, { children: children }) }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(PaymentServiceDefinition, PaymentService, internalConfig), disposeOnUnmount: true, children: _jsx(RootContent, { children: children }) }));
 }
 /**
  * Core component that provides access to converted payment data.

package/cjs/dist/react/core/service/Service.js

@@ -29,7 +29,7 @@ function RootContent({ children, }) {
     return children;
 }
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServiceServiceDefinition, ServiceService, props.serviceServiceConfig), children: _jsx(RootContent, { children: props.children }) }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServiceServiceDefinition, ServiceService, props.serviceServiceConfig), disposeOnUnmount: true, children: _jsx(RootContent, { children: props.children }) }));
 }
 /**
  * Core component that provides access to full service data via render props.

package/cjs/dist/react/core/service-list/ServiceList.js

@@ -14,7 +14,7 @@ import { ServiceListServiceDefinition, ServiceListService, } from '../../../serv
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServiceListServiceDefinition, ServiceListService, props.serviceListConfig), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServiceListServiceDefinition, ServiceListService, props.serviceListConfig), disposeOnUnmount: true, children: props.children }));
 }
 /**
  * Component that provides services list data through render props.

package/cjs/dist/react/core/staff-member-list/StaffMemberList.js

@@ -18,7 +18,7 @@ import { StaffMemberListServiceDefinition, StaffMemberListService, } from '../..
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(StaffMemberListServiceDefinition, StaffMemberListService, props.staffMemberListServiceConfig), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(StaffMemberListServiceDefinition, StaffMemberListService, props.staffMemberListServiceConfig), disposeOnUnmount: true, children: props.children }));
 }
 /**
  * Core component that provides access to staff members list via render props

package/cjs/dist/react/core/time-slot-list/TimeSlot.js

@@ -24,7 +24,7 @@ import { TimeSlotServiceDefinition, TimeSlotService, } from '../../../services/t
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotServiceDefinition, TimeSlotService, props.config), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotServiceDefinition, TimeSlotService, props.config), disposeOnUnmount: true, children: props.children }));
 }
 const StaffMemberContext = React.createContext(null);
 /**

package/cjs/dist/react/core/time-slot-list/TimeSlotList.d.ts

@@ -90,6 +90,8 @@ export interface DateRangeRenderProps {
     startDate: Date;
     endDate: Date;
     setDateRange: (start: Date, end: Date) => void;
+    /** IANA timezone string for the time slots (e.g., "America/New_York") */
+    timezone: string | undefined;
 }
 /**
  * Props for DateRange render prop component

package/cjs/dist/react/core/time-slot-list/TimeSlotList.js

@@ -15,7 +15,7 @@ import { BookingServiceDefinition } from '../../../services/booking/booking.js';
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config), disposeOnUnmount: true, children: props.children }));
 }
 // ============================================================================
 // Timezone Component
@@ -109,10 +109,13 @@ export function ListData(props) {
  */
 export function DateRange(props) {
     const service = useService(TimeSlotListServiceDefinition);
+    const bookingService = useService(BookingServiceDefinition);
     const dateRange = service.dateRange.get();
+    const timezone = bookingService.timezone.get();
     return props.children({
         startDate: dateRange.start,
         endDate: dateRange.end,
         setDateRange: service.actions.setDateRange,
+        timezone,
     });
 }

package/cjs/dist/react/index.d.ts

@@ -1,4 +1,5 @@
 export * as Booking from './booking/Booking.js';
+export * as BookingItem from './booking/BookingItem.js';
 export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as ServiceMedia from './service/ServiceMedia.js';