@wix/headless-bookings 0.0.10 → 0.0.12

package/dist/react/service/Service.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Service - High-level component for displaying service information
  * Provides components for displaying service details and booking actions
@@ -6,14 +6,49 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import * as CoreService from '../core/service/Service.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { Money, GenericList } from '@wix/headless-components/react';
+import { WixMediaImage } from '@wix/headless-media/react';
+import { MediaGallery } from '@wix/headless-media/react';
+import { services } from '@wix/bookings';
+import * as Location from '../location/Location.js';
 var TestIds;
 (function (TestIds) {
     TestIds["serviceRoot"] = "service-root";
     TestIds["serviceName"] = "service-name";
     TestIds["serviceDescription"] = "service-description";
+    TestIds["servicePrice"] = "service-price";
+    TestIds["serviceTagline"] = "service-tagline";
+    TestIds["serviceDurationInMinutes"] = "service-duration-in-minutes";
+    TestIds["serviceType"] = "service-type";
+    TestIds["serviceCategory"] = "service-category";
+    TestIds["serviceLocations"] = "service-locations";
+    TestIds["serviceLocation"] = "service-location";
+    TestIds["serviceLocationRepeater"] = "service-location-repeater";
+    TestIds["locationRoot"] = "location-root";
+    TestIds["serviceStaffMembers"] = "service-staff-members";
+    TestIds["serviceStaffMemberRepeater"] = "service-staff-member-repeater";
+    TestIds["serviceMedia"] = "service-media";
+    TestIds["serviceMainMedia"] = "service-main-media";
+    TestIds["serviceCoverMedia"] = "service-cover-media";
+    TestIds["serviceMediaItems"] = "service-media-items";
+    TestIds["serviceSchedule"] = "service-schedule";
+    TestIds["serviceDefaultCapacity"] = "service-default-capacity";
+    TestIds["serviceRaw"] = "service-raw";
     TestIds["serviceActionSelect"] = "service-action-select";
     TestIds["serviceActionAdd"] = "service-action-add";
     TestIds["serviceActionRemove"] = "service-action-remove";
+    // Policy component TestIds
+    TestIds["servicePolicyLatestCancellationInMinutes"] = "service-policy-latest-cancellation-in-minutes";
+    TestIds["servicePolicyLatestBookingInMinutes"] = "service-policy-latest-booking-in-minutes";
+    TestIds["servicePolicyEarliestBookingInMinutes"] = "service-policy-earliest-booking-in-minutes";
+    TestIds["servicePolicyLatestRescheduleInMinutes"] = "service-policy-latest-reschedule-in-minutes";
+    TestIds["servicePolicyWaitlistCapacity"] = "service-policy-waitlist-capacity";
+    TestIds["servicePolicyBookAfterStartEnabled"] = "service-policy-book-after-start-enabled";
+    TestIds["servicePolicyMaxParticipantsPerBooking"] = "service-policy-max-participants-per-booking";
+    // Schedule component TestIds
+    TestIds["serviceScheduleFirstSessionStart"] = "service-schedule-first-session-start";
+    TestIds["serviceScheduleLastSessionEnd"] = "service-schedule-last-session-end";
+    TestIds["serviceScheduleSessionDuration"] = "service-schedule-session-duration";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides service context to the entire app.
@@ -35,8 +70,8 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, service, asChild, className, ...attrs } = props;
-    return (_jsx(CoreService.Root, { serviceServiceConfig: { service }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, customElement: children, ...attrs, children: _jsx("div", { children: children }) }) }));
+    const { children, service, appId, asChild, className, ...attrs } = props;
+    return (_jsx(CoreService.Root, { serviceServiceConfig: { service, appId }, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
 });
 Root.displayName = 'Service.Root';
 /**
@@ -88,6 +123,595 @@ export const Description = React.forwardRef((props, ref) => {
     return (_jsx(CoreService.Info, { children: ({ description }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceDescription, customElement: children, customElementProps: { description }, children: _jsx("div", { children: description }) })) }));
 });
 Description.displayName = 'Service.Description';
+/**
+ * Displays the service price using the Money component with customizable rendering.
+ * Renders different defaults based on rate type:
+ * - FIXED: Shows formatted price (e.g., '$50.00')
+ * - VARIED: Shows price range (e.g., '$30.00 - $50.00')
+ * - CUSTOM: Shows custom description text
+ * - NO_FEE: Shows zero price (e.g., '$0.00')
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - renders based on rate type
+ * <Service.Price className="text-3xl font-bold" />
+ *
+ * // Custom rendering with full price data
+ * <Service.Price asChild>
+ *   {({ rateType, money, minPrice, maxPrice, priceDescription, hasAddOns, hasPricingPlans }) => (
+ *     <div>
+ *       {rateType === 'FIXED' && money && <Money money={money} />}
+ *       {rateType === 'VARIED' && minPrice && maxPrice && (
+ *         <span><Money money={minPrice} /> - <Money money={maxPrice} /></span>
+ *       )}
+ *       {rateType === 'CUSTOM' && priceDescription && <span>{priceDescription}</span>}
+ *       {rateType === 'NO_FEE' && money && <Money money={money} />}
+ *       {hasPricingPlans && <span>Pricing plans available</span>}
+ *     </div>
+ *   )}
+ * </Service.Price>
+ * ```
+ */
+export const Price = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Price, { children: (childProps) => {
+            const { rateType, money, minPrice, maxPrice, priceDescription } = childProps;
+            // Default rendering based on rate type
+            const renderDefaultPrice = () => {
+                switch (rateType) {
+                    case services.RateType.FIXED:
+                        return money ? (_jsx(Money, { money: money, className: className })) : null;
+                    case services.RateType.VARIED:
+                        if (minPrice && maxPrice) {
+                            return (_jsxs("span", { className: className, "data-testid": TestIds.servicePrice, children: [_jsx(Money, { money: minPrice }), " - ", _jsx(Money, { money: maxPrice })] }));
+                        }
+                        // Fallback to defaultPrice if min/max not available
+                        return money ? (_jsx(Money, { money: money, className: className })) : null;
+                    case services.RateType.CUSTOM:
+                        return priceDescription ? (_jsx("span", { className: className, "data-testid": TestIds.servicePrice, children: priceDescription })) : null;
+                    case services.RateType.NO_FEE:
+                        return money ? (_jsx(Money, { money: money, className: className })) : null;
+                    default:
+                        // UNKNOWN_RATE_TYPE or undefined
+                        return null;
+                }
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.servicePrice, customElement: children, customElementProps: childProps, children: renderDefaultPrice() }));
+        } }));
+});
+Price.displayName = 'Service.Price';
+/**
+ * Displays the service tagline with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Tagline className="text-lg text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive element
+ * <Service.Tagline asChild>
+ *   <p className="italic text-secondary-foreground" />
+ * </Service.Tagline>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing tagline data
+ * <Service.Tagline asChild>
+ *   {React.forwardRef(({tagline, ...props}, ref) => (
+ *     <blockquote ref={ref} {...props} className="border-l-4 pl-4">
+ *       "{tagline}"
+ *     </blockquote>
+ *   ))}
+ * </Service.Tagline>
+ * ```
+ */
+export const Tagline = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Info, { children: ({ tagline }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceTagline, customElement: children, customElementProps: { tagline }, children: tagline ? _jsx("p", { children: tagline }) : null })) }));
+});
+Tagline.displayName = 'Service.Tagline';
+/**
+ * Displays the service duration in minutes (raw number) with customizable rendering.
+ * Returns the duration as a numeric value representing minutes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays raw minutes
+ * <Service.DurationInMinutes className="text-base text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive element
+ * <Service.DurationInMinutes asChild>
+ *   <span className="font-semibold" />
+ * </Service.DurationInMinutes>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component to format duration
+ * <Service.DurationInMinutes asChild>
+ *   {React.forwardRef(({duration, ...props}, ref) => (
+ *     <span ref={ref} {...props}>
+ *       {duration} minutes
+ *     </span>
+ *   ))}
+ * </Service.DurationInMinutes>
+ * ```
+ */
+export const DurationInMinutes = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Info, { children: ({ duration }) => {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceDurationInMinutes, customElement: children, customElementProps: { duration }, children: duration ? _jsx("span", { children: duration }) : null }));
+        } }));
+});
+DurationInMinutes.displayName = 'Service.DurationInMinutes';
+/**
+ * Displays the service type (APPOINTMENT, CLASS, COURSE, etc.) with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Type className="text-sm text-secondary-foreground uppercase" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with badge styling
+ * <Service.Type asChild>
+ *   <span className="px-2 py-1 bg-secondary text-secondary-foreground rounded-full text-xs" />
+ * </Service.Type>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component to format type
+ * <Service.Type asChild>
+ *   {React.forwardRef(({type, ...props}, ref) => {
+ *     const label = {
+ *       APPOINTMENT: '1-on-1',
+ *       CLASS: 'Group Class',
+ *       COURSE: 'Course',
+ *     }[type] || type;
+ *     return <span ref={ref} {...props}>{label}</span>;
+ *   })}
+ * </Service.Type>
+ * ```
+ */
+export const Type = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Info, { children: ({ type }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceType, customElement: children, customElementProps: { type }, children: type ? _jsx("span", { children: type }) : null })) }));
+});
+Type.displayName = 'Service.Type';
+/**
+ * Displays the service category with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Category className="text-sm text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with link styling
+ * <Service.Category asChild>
+ *   <a href="#" className="text-primary hover:underline" />
+ * </Service.Category>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing category data
+ * <Service.Category asChild>
+ *   {React.forwardRef(({category, ...props}, ref) => (
+ *     <a
+ *       ref={ref}
+ *       {...props}
+ *       href={`/category/${category._id}`}
+ *       className="text-primary hover:underline"
+ *     >
+ *       {category.name}
+ *     </a>
+ *   ))}
+ * </Service.Category>
+ * ```
+ */
+export const Category = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Info, { children: ({ category }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceCategory, customElement: children, customElementProps: { category }, children: category?.name ? _jsx("span", { children: category.name }) : null })) }));
+});
+Category.displayName = 'Service.Category';
+/**
+ * Container for service locations list (Container Level).
+ * Follows the 3-level List/Options/Repeater pattern.
+ * Provides context and doesn't render when there are no locations.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with 3-level pattern
+ * <Service.Locations>
+ *   <Service.Locations.List emptyState={<div>No locations available</div>}>
+ *     <Service.Locations.LocationRepeater>
+ *       {({ location }) => (
+ *         <div>
+ *           <span>{location.name}</span>
+ *           <Address.Root address={location.address}>
+ *             <Address.Formatted />
+ *           </Address.Root>
+ *         </div>
+ *       )}
+ *     </Service.Locations.LocationRepeater>
+ *   </Service.Locations.List>
+ * </Service.Locations>
+ *
+ * // With asChild pattern for custom container
+ * <Service.Locations asChild>
+ *   <ul className="locations-list">
+ *     <Service.Locations.List>
+ *       <Service.Locations.LocationRepeater>
+ *         {({ location }) => <li>{location.name}</li>}
+ *       </Service.Locations.LocationRepeater>
+ *     </Service.Locations.List>
+ *   </ul>
+ * </Service.Locations>
+ * ```
+ */
+const LocationsBase = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attributes } = props;
+    return (_jsx(CoreService.Info, { children: ({ locations }) => {
+            // Container level: don't render if no locations
+            if (!locations || locations.length === 0) {
+                return null;
+            }
+            // Map locations to include required id field for GenericList
+            const items = locations.map((location, index) => ({
+                ...location,
+                id: location._id || String(index),
+            }));
+            return (_jsx(GenericList.Root, { items: items, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceLocations, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+        } }));
+});
+LocationsBase.displayName = 'Service.Locations';
+/**
+ * List container for locations with empty state support (List Container Level).
+ * Renders emptyState when no locations, otherwise renders children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Locations.List emptyState={<div>No locations available</div>}>
+ *   <Service.Locations.LocationRepeater />
+ * </Service.Locations.List>
+ * ```
+ */
+export const LocationsList = React.forwardRef((props, ref) => {
+    const { children, emptyState, className, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, emptyState: emptyState, className: className, ...otherProps, children: children }));
+});
+LocationsList.displayName = 'Service.Locations.List';
+/**
+ * Repeater component that renders Location.Root for each location.
+ * Supports asChild pattern for custom rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Standard usage - renders Location.Root for each location
+ * <Service.Locations.LocationRepeater>
+ *   <span className="location-badge">📍</span>
+ * </Service.Locations.LocationRepeater>
+ *
+ * // AsChild usage with custom numbered list
+ * <Service.Locations.LocationRepeater asChild>
+ *   {({ items, itemWrapper }) => (
+ *     <ol>
+ *       {items.map((item, index) => (
+ *         <li key={item.id}>
+ *           {index + 1}. {itemWrapper({ item, index, children: null })}
+ *         </li>
+ *       ))}
+ *     </ol>
+ *   )}
+ * </Service.Locations.LocationRepeater>
+ * ```
+ */
+export const LocationRepeater = React.forwardRef((props, ref) => {
+    const { children, asChild } = props;
+    // Custom itemWrapper that renders Location.Root for each location
+    const locationItemWrapper = ({ item: location, children: itemChildren, }) => {
+        return (_jsx(Location.Root, { location: location, "data-testid": TestIds.serviceLocationRepeater, children: itemChildren || undefined }, location.id));
+    };
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: locationItemWrapper, asChild: asChild, children: children }));
+});
+LocationRepeater.displayName = 'Service.Locations.LocationRepeater';
+/**
+ * Container for service staff members list (Container Level).
+ * Follows the 3-level List/Options/Repeater pattern.
+ * Provides context and doesn't render when there are no staff members.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with 3-level pattern
+ * <Service.StaffMembers>
+ *   <Service.StaffMembers.List emptyState={<div>No staff assigned</div>}>
+ *     <Service.StaffMembers.StaffMemberRepeater>
+ *       {({ staffMember }) => (
+ *         <div className="staff-card">
+ *           <img src={staffMember.mainMedia?.image} alt={staffMember.name} />
+ *           <span>{staffMember.name}</span>
+ *         </div>
+ *       )}
+ *     </Service.StaffMembers.StaffMemberRepeater>
+ *   </Service.StaffMembers.List>
+ * </Service.StaffMembers>
+ *
+ * // With asChild pattern for custom container
+ * <Service.StaffMembers asChild>
+ *   <ul className="staff-list">
+ *     <Service.StaffMembers.List>
+ *       <Service.StaffMembers.StaffMemberRepeater>
+ *         {({ staffMember }) => <li>{staffMember.name}</li>}
+ *       </Service.StaffMembers.StaffMemberRepeater>
+ *     </Service.StaffMembers.List>
+ *   </ul>
+ * </Service.StaffMembers>
+ * ```
+ */
+export const StaffMembersBase = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attributes } = props;
+    return (_jsx(CoreService.Info, { children: ({ staff }) => {
+            // Container level: don't render if no staff members
+            if (!staff || staff.length === 0) {
+                return null;
+            }
+            // Map staff to include required id field for GenericList
+            const items = staff.map((member, index) => ({
+                ...member,
+                id: member._id || String(index),
+            }));
+            return (_jsx(GenericList.Root, { items: items, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceStaffMembers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+        } }));
+});
+StaffMembersBase.displayName = 'Service.StaffMembers';
+/**
+ * List container for staff members with empty state support (List Container Level).
+ * Renders emptyState when no staff members, otherwise renders children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.StaffMembers.List emptyState={<div>No staff assigned</div>}>
+ *   <Service.StaffMembers.StaffMemberRepeater />
+ * </Service.StaffMembers.List>
+ * ```
+ */
+export const StaffMembersList = React.forwardRef((props, ref) => {
+    const { children, emptyState, className, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, emptyState: emptyState, className: className, ...otherProps, children: children }));
+});
+StaffMembersList.displayName = 'Service.StaffMembers.List';
+/**
+ * Repeater component that renders staff member name for each staff member.
+ * Supports asChild pattern for custom rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Standard usage - renders staff member names
+ * <Service.StaffMembers.StaffMemberRepeater>
+ *   <span className="staff-badge">👤</span>
+ * </Service.StaffMembers.StaffMemberRepeater>
+ *
+ * // AsChild usage with custom numbered list
+ * <Service.StaffMembers.StaffMemberRepeater asChild>
+ *   {({ items, itemWrapper }) => (
+ *     <ol>
+ *       {items.map((item, index) => (
+ *         <li key={item.id}>
+ *           {index + 1}. {itemWrapper({ item, index, children: null })}
+ *         </li>
+ *       ))}
+ *     </ol>
+ *   )}
+ * </Service.StaffMembers.StaffMemberRepeater>
+ * ```
+ */
+export const StaffMemberRepeater = React.forwardRef((props, ref) => {
+    const { children, asChild } = props;
+    // Custom itemWrapper that renders staff member name
+    const staffMemberItemWrapper = ({ item: member, children: itemChildren, }) => {
+        return (_jsxs(React.Fragment, { children: [_jsx("span", { "data-testid": TestIds.serviceStaffMemberRepeater, children: member.name }), itemChildren] }, member.id));
+    };
+    // When asChild is true, provide custom render props
+    if (asChild && typeof children === 'function') {
+        return (_jsx(GenericList.Repeater, { ref: ref, asChild: true, itemWrapper: staffMemberItemWrapper, children: (genericProps) => {
+                const renderProps = {
+                    items: genericProps.items,
+                    itemWrapper: staffMemberItemWrapper,
+                };
+                return children(renderProps);
+            } }));
+    }
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: staffMemberItemWrapper, children: children }));
+});
+StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
+/**
+ * Displays the service main media image using WixMediaImage.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.MainMedia className="w-full h-64 object-cover rounded-lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive img element
+ * <Service.MainMedia asChild>
+ *   <img className="w-full h-64 object-cover shadow-lg" />
+ * </Service.MainMedia>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <Service.MainMedia asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="relative aspect-video">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 p-4">
+ *         <Service.Name className="text-primary-foreground" />
+ *       </div>
+ *     </div>
+ *   ))}
+ * </Service.MainMedia>
+ * ```
+ */
+export const MainMedia = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Info, { children: ({ mainMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceMainMedia, customElement: children, customElementProps: { media: mainMedia }, children: mainMedia?.image ? _jsx(WixMediaImage, { media: mainMedia }) : null })) }));
+});
+MainMedia.displayName = 'Service.MainMedia';
+/**
+ * Displays the service cover media image using WixMediaImage.
+ * The cover media is typically used as a hero/banner image.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.CoverMedia className="w-full h-96 object-cover" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild as a background image container
+ * <Service.CoverMedia asChild>
+ *   <div className="w-full h-96 bg-cover bg-center" />
+ * </Service.CoverMedia>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <Service.CoverMedia asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <header ref={ref} {...props} className="relative h-96">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
+ *         <h1 className="text-4xl font-bold text-primary-foreground">
+ *           <Service.Name />
+ *         </h1>
+ *       </div>
+ *     </header>
+ *   ))}
+ * </Service.CoverMedia>
+ * ```
+ */
+export const CoverMedia = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Info, { children: ({ coverMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceCoverMedia, customElement: children, customElementProps: { media: coverMedia }, children: coverMedia?.image ? _jsx(WixMediaImage, { media: coverMedia }) : null })) }));
+});
+CoverMedia.displayName = 'Service.CoverMedia';
+/**
+ * Container for service media items gallery.
+ * Renders a MediaGallery.Root with the service media items.
+ * Supports autoPlay and infinite scroll options for carousel behavior.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with MediaGallery components
+ * <Service.MediaItems>
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       {({ mediaItem, isActive }) => (
+ *         <img
+ *           src={mediaItem.url}
+ *           alt={mediaItem.altText}
+ *           className={isActive ? 'active' : ''}
+ *         />
+ *       )}
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </Service.MediaItems>
+ *
+ * // With autoPlay carousel
+ * <Service.MediaItems
+ *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
+ *   infinite
+ * >
+ *   <MediaGallery.MainImage />
+ *   <MediaGallery.Actions.Previous />
+ *   <MediaGallery.Actions.Next />
+ * </Service.MediaItems>
+ *
+ * // Full gallery with thumbnails and navigation
+ * <Service.MediaItems infinite>
+ *   <div className="gallery-container">
+ *     <MediaGallery.MainImage className="main-image" />
+ *     <div className="controls">
+ *       <MediaGallery.Actions.Previous>Prev</MediaGallery.Actions.Previous>
+ *       <MediaGallery.Actions.Next>Next</MediaGallery.Actions.Next>
+ *     </div>
+ *     <MediaGallery.Thumbnails className="thumbnails" />
+ *   </div>
+ * </Service.MediaItems>
+ * ```
+ */
+export const MediaItems = React.forwardRef((props, ref) => {
+    const { children, infinite, autoPlay } = props;
+    return (_jsx(CoreService.Info, { children: ({ mediaItems }) => {
+            if (!mediaItems || mediaItems.length === 0)
+                return null;
+            const mediaGalleryServiceConfig = {
+                media: mediaItems,
+                infinite,
+                autoPlay,
+            };
+            const attributes = {
+                'data-testid': TestIds.serviceMediaItems,
+            };
+            return (_jsx("div", { ...attributes, ref: ref, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: mediaGalleryServiceConfig, children: children }) }));
+        } }));
+});
+MediaItems.displayName = 'Service.MediaItems';
+/**
+ * Provides direct access to service object. Should be used only in rare cases.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Raw>
+ *   {({ service, isLoading, error }) => (
+ *     <div>
+ *       {isLoading && <div>Loading...</div>}
+ *       {error && <div>Error: {error}</div>}
+ *       {service && <pre>{JSON.stringify(service, null, 2)}</pre>}
+ *     </div>
+ *   )}
+ * </Service.Raw>
+ * ```
+ */
+export const Raw = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Service, { children: ({ service, isLoading, error }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRaw, customElement: children, customElementProps: { service, isLoading, error }, children: _jsxs("div", { children: [isLoading && _jsx("div", { children: "Loading..." }), error && _jsxs("div", { children: ["Error: ", error] }), service && _jsx("pre", { children: JSON.stringify(service, null, 2) })] }) })) }));
+});
+Raw.displayName = 'Service.Raw';
 /**
  * Actions namespace with individual action components
  */
@@ -107,25 +731,36 @@ export var Actions;
      *   <Button variant="primary">Select Service</Button>
      * </Service.Actions.Select>
      *
-     * // With onClicked callback for navigation
-     * <Service.Actions.Select
-     *   asChild
-     *   onClicked={(event, service) => {
-     *     router.push(`/booking/time-slots/${service._id}`);
-     *   }}
-     * >
-     *   <Button variant="primary">Select Service</Button>
+     * // Using render prop pattern to access bookable state
+     * <Service.Actions.Select>
+     *   {({ bookable, selected, onClick }) => (
+     *     <button onClick={onClick} disabled={!bookable}>
+     *       {selected ? 'Selected' : 'Select Service'}
+     *     </button>
+     *   )}
      * </Service.Actions.Select>
      * ```
      */
     Actions.Select = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label = 'Select Service', onClicked, } = props;
-        return (_jsx(CoreService.Actions, { children: ({ select, service }) => {
-                const handleClick = (event) => {
-                    select();
-                    onClicked?.(event, service);
-                };
-                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionSelect, customElement: children, customElementProps: { onClick: handleClick }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+        const { asChild, children, className, label = 'Select Service' } = props;
+        return (_jsx(CoreService.Actions, { children: ({ select, rawService, bookable, selected, requiresAvailability, }) => {
+                // If children is a function, call it with bookable, selected, requiresAvailability and other props
+                if (typeof children === 'function') {
+                    return children({
+                        bookable,
+                        selected,
+                        requiresAvailability,
+                        onClick: select,
+                        service: rawService,
+                    });
+                }
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionSelect, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
+                        onClick: select,
+                        disabled: !bookable,
+                        selected,
+                        bookable,
+                        requiresAvailability,
+                    }, children: _jsx("button", { onClick: select, disabled: !bookable, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
             } }));
     });
     Actions.Select.displayName = 'Service.Actions.Select';
@@ -143,23 +778,38 @@ export var Actions;
      *   <Button variant="secondary">Add Service</Button>
      * </Service.Actions.Add>
      *
-     * // With onClicked callback for tracking
-     * <Service.Actions.Add
-     *   label="Add to Cart"
-     *   onClicked={(event, service) => {
-     *     analytics.track('service_added', { serviceId: service._id });
-     *   }}
-     * />
+     * // Using render prop pattern to access bookable state
+     * <Service.Actions.Add>
+     *   {({ bookable, selected, onClick }) => (
+     *     <button onClick={onClick} disabled={!bookable}>
+     *       {selected ? 'Added' : 'Add to Booking'}
+     *     </button>
+     *   )}
+     * </Service.Actions.Add>
      * ```
      */
     Actions.Add = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label = 'Add Service', onClicked, } = props;
-        return (_jsx(CoreService.Actions, { children: ({ add, service }) => {
-                const handleClick = (event) => {
-                    add();
-                    onClicked?.(event, service);
-                };
-                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionAdd, customElement: children, customElementProps: { onClick: handleClick }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+        const { asChild, children, className, label = 'Add Service' } = props;
+        return (_jsx(CoreService.Actions, { children: ({ add, rawService, bookable, selected, requiresAvailability }) => {
+                // If children is a function, call it with bookable, selected, requiresAvailability and other props
+                if (typeof children === 'function') {
+                    return children({
+                        bookable,
+                        selected,
+                        requiresAvailability,
+                        onClick: add,
+                        service: rawService,
+                    });
+                }
+                // Disabled when already selected (can't add again) or not bookable
+                const isDisabled = selected || !bookable;
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionAdd, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
+                        onClick: add,
+                        disabled: isDisabled,
+                        selected,
+                        bookable,
+                        requiresAvailability,
+                    }, children: _jsx("button", { onClick: add, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
             } }));
     });
     Actions.Add.displayName = 'Service.Actions.Add';
@@ -177,26 +827,389 @@ export var Actions;
      *   <Button variant="destructive">Remove Service</Button>
      * </Service.Actions.Remove>
      *
-     * // With onClicked callback for notifications
-     * <Service.Actions.Remove
-     *   asChild
-     *   onClicked={(event, service) => {
-     *     toast.success(`${service.name} removed from selection`);
-     *   }}
-     * >
-     *   <IconButton icon="trash" />
+     * // Using render prop pattern to access bookable state
+     * <Service.Actions.Remove>
+     *   {({ bookable, selected, onClick }) => (
+     *     <button onClick={onClick} disabled={!bookable}>
+     *       Remove Service
+     *     </button>
+     *   )}
      * </Service.Actions.Remove>
      * ```
      */
     Actions.Remove = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label = 'Remove Service', onClicked, } = props;
-        return (_jsx(CoreService.Actions, { children: ({ remove, service }) => {
-                const handleClick = (event) => {
-                    remove();
-                    onClicked?.(event, service);
-                };
-                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionRemove, customElement: children, customElementProps: { onClick: handleClick }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+        const { asChild, children, className, label = 'Remove Service' } = props;
+        return (_jsx(CoreService.Actions, { children: ({ remove, rawService, bookable, selected, requiresAvailability, }) => {
+                // If children is a function, call it with bookable, selected, requiresAvailability and other props
+                if (typeof children === 'function') {
+                    return children({
+                        bookable,
+                        selected,
+                        requiresAvailability,
+                        onClick: remove,
+                        service: rawService,
+                    });
+                }
+                // Disabled when not selected (nothing to remove) or not bookable
+                const isDisabled = !selected || !bookable;
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionRemove, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
+                        onClick: remove,
+                        disabled: isDisabled,
+                        selected,
+                        bookable,
+                        requiresAvailability,
+                    }, children: _jsx("button", { onClick: remove, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
             } }));
     });
     Actions.Remove.displayName = 'Service.Actions.Remove';
 })(Actions || (Actions = {}));
+/**
+ * Displays latestCancellationInMinutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.cancellationPolicy.latestCancellationInMinutes
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays raw number only (or null if disabled/undefined)
+ * <Service.Policy.LatestCancellationInMinutes className="text-foreground" />
+ * // Renders: <span>30</span> or null
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Consumer adds formatting logic via asChild
+ * <Service.Policy.LatestCancellationInMinutes asChild>
+ *   {({ cancellationPolicyEnabled, limitLatestCancellationEnabled, latestCancellationInMinutes }) => (
+ *     cancellationPolicyEnabled ? (
+ *       <div className="policy-card">
+ *         {limitLatestCancellationEnabled
+ *           ? `Cancel up to ${latestCancellationInMinutes} minutes before`
+ *           : 'Free cancellation anytime'
+ *         }
+ *       </div>
+ *     ) : null
+ *   )}
+ * </Service.Policy.LatestCancellationInMinutes>
+ * ```
+ */
+export const PolicyLatestCancellationInMinutes = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Policy, { children: ({ cancellationPolicyEnabled, limitLatestCancellationEnabled, latestCancellationInMinutes, }) => {
+            // Prepare data for asChild pattern - ALWAYS pass to consumer
+            const childProps = {
+                cancellationPolicyEnabled,
+                limitLatestCancellationEnabled,
+                latestCancellationInMinutes,
+            };
+            // ALWAYS return AsChildSlot (never return null early)
+            // This allows consumer to override null behavior via asChild
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.servicePolicyLatestCancellationInMinutes, customElement: children, customElementProps: childProps, children: cancellationPolicyEnabled &&
+                    latestCancellationInMinutes !== undefined ? (_jsx("span", { children: latestCancellationInMinutes })) : null }));
+        } }));
+});
+PolicyLatestCancellationInMinutes.displayName =
+    'Service.Policy.LatestCancellationInMinutes';
+/**
+ * Displays latestBookingInMinutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.limitLateBookingPolicy.latestBookingInMinutes
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.LatestBookingInMinutes className="text-foreground" />
+ * ```
+ */
+export const PolicyLatestBookingInMinutes = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Policy, { children: ({ latestBookingPolicyEnabled, latestBookingInMinutes }) => {
+            const childProps = {
+                latestBookingPolicyEnabled,
+                latestBookingInMinutes,
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.servicePolicyLatestBookingInMinutes, customElement: children, customElementProps: childProps, children: latestBookingPolicyEnabled &&
+                    latestBookingInMinutes !== undefined ? (_jsx("span", { children: latestBookingInMinutes })) : null }));
+        } }));
+});
+PolicyLatestBookingInMinutes.displayName =
+    'Service.Policy.LatestBookingInMinutes';
+/**
+ * Displays earliestBookingInMinutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.limitEarlyBookingPolicy.earliestBookingInMinutes
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.EarliestBookingInMinutes className="text-foreground" />
+ * ```
+ */
+export const PolicyEarliestBookingInMinutes = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Policy, { children: ({ earliestBookingPolicyEnabled, earliestBookingInMinutes }) => {
+            const childProps = {
+                earliestBookingPolicyEnabled,
+                earliestBookingInMinutes,
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.servicePolicyEarliestBookingInMinutes, customElement: children, customElementProps: childProps, children: earliestBookingPolicyEnabled &&
+                    earliestBookingInMinutes !== undefined ? (_jsx("span", { children: earliestBookingInMinutes })) : null }));
+        } }));
+});
+PolicyEarliestBookingInMinutes.displayName =
+    'Service.Policy.EarliestBookingInMinutes';
+/**
+ * Displays latestRescheduleInMinutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.reschedulePolicy.latestRescheduleInMinutes
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.LatestRescheduleInMinutes className="text-foreground" />
+ * ```
+ */
+export const PolicyLatestRescheduleInMinutes = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Policy, { children: ({ reschedulePolicyEnabled, limitLatestRescheduleEnabled, latestRescheduleInMinutes, }) => {
+            const childProps = {
+                reschedulePolicyEnabled,
+                limitLatestRescheduleEnabled,
+                latestRescheduleInMinutes,
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.servicePolicyLatestRescheduleInMinutes, customElement: children, customElementProps: childProps, children: reschedulePolicyEnabled &&
+                    latestRescheduleInMinutes !== undefined ? (_jsx("span", { children: latestRescheduleInMinutes })) : null }));
+        } }));
+});
+PolicyLatestRescheduleInMinutes.displayName =
+    'Service.Policy.LatestRescheduleInMinutes';
+/**
+ * Displays waitlist capacity as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.waitlistPolicy.capacity
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.WaitlistCapacity className="text-foreground" />
+ * ```
+ */
+export const PolicyWaitlistCapacity = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Policy, { children: ({ waitlistPolicyEnabled, waitlistCapacity }) => {
+            const childProps = {
+                waitlistPolicyEnabled,
+                waitlistCapacity,
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.servicePolicyWaitlistCapacity, customElement: children, customElementProps: childProps, children: waitlistPolicyEnabled && waitlistCapacity !== undefined ? (_jsx("span", { children: waitlistCapacity })) : null }));
+        } }));
+});
+PolicyWaitlistCapacity.displayName = 'Service.Policy.WaitlistCapacity';
+/**
+ * Displays whether booking after start is enabled.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.bookAfterStartPolicy.enabled
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.BookAfterStartEnabled className="text-foreground" />
+ * ```
+ */
+export const PolicyBookAfterStartEnabled = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Policy, { children: ({ bookAfterStartEnabled }) => {
+            const childProps = {
+                bookAfterStartEnabled,
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.servicePolicyBookAfterStartEnabled, customElement: children, customElementProps: childProps, children: bookAfterStartEnabled ? (_jsx("span", { children: bookAfterStartEnabled ? 'true' : 'false' })) : null }));
+        } }));
+});
+PolicyBookAfterStartEnabled.displayName =
+    'Service.Policy.BookAfterStartEnabled';
+/**
+ * Displays maximum participants per booking as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.participantsPolicy.maxParticipantsPerBooking
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.MaxParticipantsPerBooking className="text-foreground" />
+ * ```
+ */
+export const PolicyMaxParticipantsPerBooking = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Policy, { children: ({ maxParticipantsPerBooking }) => {
+            const childProps = {
+                maxParticipantsPerBooking,
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.servicePolicyMaxParticipantsPerBooking, customElement: children, customElementProps: childProps, children: maxParticipantsPerBooking !== undefined ? (_jsx("span", { children: maxParticipantsPerBooking })) : null }));
+        } }));
+});
+PolicyMaxParticipantsPerBooking.displayName =
+    'Service.Policy.MaxParticipantsPerBooking';
+/**
+ * Policy namespace containing all policy sub-components
+ */
+export var Policy;
+(function (Policy) {
+    Policy.LatestCancellationInMinutes = PolicyLatestCancellationInMinutes;
+    Policy.LatestBookingInMinutes = PolicyLatestBookingInMinutes;
+    Policy.EarliestBookingInMinutes = PolicyEarliestBookingInMinutes;
+    Policy.LatestRescheduleInMinutes = PolicyLatestRescheduleInMinutes;
+    Policy.WaitlistCapacity = PolicyWaitlistCapacity;
+    Policy.BookAfterStartEnabled = PolicyBookAfterStartEnabled;
+    Policy.MaxParticipantsPerBooking = PolicyMaxParticipantsPerBooking;
+})(Policy || (Policy = {}));
+/**
+ * Displays the first session start date as a raw Date value.
+ * Headless component - contains zero formatting logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays ISO string
+ * <Service.Schedule.FirstSessionStart className="text-foreground" />
+ *
+ * // With custom formatting
+ * <Service.Schedule.FirstSessionStart asChild>
+ *   {({ firstSessionStart }) => (
+ *     firstSessionStart ? (
+ *       <span>Starts: {formatDate(firstSessionStart)}</span>
+ *     ) : null
+ *   )}
+ * </Service.Schedule.FirstSessionStart>
+ * ```
+ */
+export const ScheduleFirstSessionStart = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Schedule, { children: ({ schedule }) => {
+            const firstSessionStart = schedule?.firstSessionStart;
+            const childProps = {
+                firstSessionStart,
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceScheduleFirstSessionStart, customElement: children, customElementProps: childProps, children: firstSessionStart ? (_jsx("span", { children: firstSessionStart.toISOString() })) : null }));
+        } }));
+});
+ScheduleFirstSessionStart.displayName = 'Service.Schedule.FirstSessionStart';
+/**
+ * Displays the last session end date as a raw Date value.
+ * Headless component - contains zero formatting logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays ISO string
+ * <Service.Schedule.LastSessionEnd className="text-foreground" />
+ *
+ * // With custom formatting
+ * <Service.Schedule.LastSessionEnd asChild>
+ *   {({ lastSessionEnd }) => (
+ *     lastSessionEnd ? (
+ *       <span>Ends: {formatDate(lastSessionEnd)}</span>
+ *     ) : null
+ *   )}
+ * </Service.Schedule.LastSessionEnd>
+ * ```
+ */
+export const ScheduleLastSessionEnd = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Schedule, { children: ({ schedule }) => {
+            const lastSessionEnd = schedule?.lastSessionEnd;
+            const childProps = {
+                lastSessionEnd,
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceScheduleLastSessionEnd, customElement: children, customElementProps: childProps, children: lastSessionEnd ? (_jsx("span", { children: lastSessionEnd.toISOString() })) : null }));
+        } }));
+});
+ScheduleLastSessionEnd.displayName = 'Service.Schedule.LastSessionEnd';
+/**
+ * Displays the session duration in minutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays raw minutes
+ * <Service.Schedule.SessionDuration className="text-foreground" />
+ *
+ * // With custom formatting
+ * <Service.Schedule.SessionDuration asChild>
+ *   {({ sessionDuration }) => (
+ *     sessionDuration ? (
+ *       <span>{formatDuration(sessionDuration)}</span>
+ *     ) : null
+ *   )}
+ * </Service.Schedule.SessionDuration>
+ * ```
+ */
+export const ScheduleSessionDuration = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Schedule, { children: ({ schedule }) => {
+            const sessionDuration = schedule?.availabilityConstraints?.sessionDurations?.[0];
+            const childProps = {
+                sessionDuration,
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceScheduleSessionDuration, customElement: children, customElementProps: childProps, children: sessionDuration !== undefined ? (_jsx("span", { children: sessionDuration })) : null }));
+        } }));
+});
+ScheduleSessionDuration.displayName = 'Service.Schedule.SessionDuration';
+/**
+ * Schedule namespace containing all schedule sub-components
+ */
+export var Schedule;
+(function (Schedule) {
+    Schedule.FirstSessionStart = ScheduleFirstSessionStart;
+    Schedule.LastSessionEnd = ScheduleLastSessionEnd;
+    Schedule.SessionDuration = ScheduleSessionDuration;
+})(Schedule || (Schedule = {}));
+/**
+ * Displays the service default capacity with customizable rendering.
+ * Only renders for CLASS or COURSE service types.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.DefaultCapacity className="text-sm" />
+ *
+ * // asChild with custom component
+ * <Service.DefaultCapacity asChild>
+ *   {({ defaultCapacity, isClassOrCourse }) => isClassOrCourse ? (
+ *     <span>Max participants: {defaultCapacity}</span>
+ *   ) : null}
+ * </Service.DefaultCapacity>
+ * ```
+ */
+export const DefaultCapacity = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Info, { children: ({ type, defaultCapacity }) => {
+            const isClassOrCourse = type === 'CLASS' || type === 'COURSE';
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceDefaultCapacity, customElement: children, customElementProps: { defaultCapacity, isClassOrCourse }, children: isClassOrCourse && defaultCapacity ? (_jsxs("span", { children: ["Max ", defaultCapacity, " participants"] })) : null }));
+        } }));
+});
+DefaultCapacity.displayName = 'Service.DefaultCapacity';
+// Create Locations with nested components
+export const Locations = Object.assign(LocationsBase, {
+    List: LocationsList,
+    LocationRepeater,
+});
+// Create StaffMembers with nested components
+export const StaffMembers = Object.assign(StaffMembersBase, {
+    List: StaffMembersList,
+    StaffMemberRepeater,
+});