@wix/headless-bookings 0.0.29 → 0.0.31

package/cjs/dist/react/payment/PaymentLineItem.d.ts

@@ -0,0 +1,144 @@
+/**
+ * PaymentLineItem - Component for displaying individual line item information
+ * Used within Payment.LineItemRepeater to display price, discount, deposit, etc.
+ */
+import React from 'react';
+import { AsChildChildren } from '@wix/headless-utils/react';
+import { MoneyData } from '@wix/headless-components/react';
+import type { CombinedLineItem } from '../core/payment/Payment.js';
+/**
+ * Props for PaymentLineItem.Root component
+ */
+export interface RootProps {
+    lineItem: CombinedLineItem;
+    currency: string;
+    children?: React.ReactNode | AsChildChildren<{
+        lineItem: CombinedLineItem;
+        currency: string;
+    }>;
+    asChild?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * Root component for a single line item.
+ * Provides context for child components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Root lineItem={item} currency="USD">
+ *   <PaymentLineItem.Price />
+ *   <PaymentLineItem.Discount />
+ * </PaymentLineItem.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for PaymentLineItem.Price component
+ */
+export interface PriceProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        totalPrice: MoneyData | null;
+        subtotal: MoneyData | null;
+        tax: MoneyData | null;
+        discount: MoneyData | null;
+        deposit: MoneyData | null;
+        priceText: string | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the line item price with support for different price types.
+ * Uses data-attributes for conditional visibility.
+ *
+ * For CUSTOM rate type services, displays priceText instead of monetary value.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - renders total price or price text
+ * <PaymentLineItem.Price className="text-lg font-bold" />
+ *
+ * // Custom rendering with full price data
+ * <PaymentLineItem.Price asChild>
+ *   {({ totalPrice, subtotal, tax, discount, priceText }) => (
+ *     <div>
+ *       {priceText ? (
+ *         <span>{priceText}</span>
+ *       ) : (
+ *         <>
+ *           <span><Money money={totalPrice} /></span>
+ *           <span data-has-discount={!!discount?.amount}><Money money={discount} /></span>
+ *         </>
+ *       )}
+ *     </div>
+ *   )}
+ * </PaymentLineItem.Price>
+ * ```
+ */
+export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for PaymentLineItem.Discount component
+ */
+export interface DiscountProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        discount: MoneyData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the line item discount.
+ * Uses data-has-discount attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Discount className="text-green-500" />
+ * ```
+ */
+export declare const Discount: React.ForwardRefExoticComponent<DiscountProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for PaymentLineItem.Deposit component
+ */
+export interface DepositProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        deposit: MoneyData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the line item deposit amount.
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Deposit className="font-semibold" />
+ * ```
+ */
+export declare const Deposit: React.ForwardRefExoticComponent<DepositProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for PaymentLineItem.PriceText component
+ */
+export interface PriceTextProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        priceText: string | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the custom price text (for CUSTOM rate type services).
+ * Uses data-has-price-text attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.PriceText className="text-foreground" />
+ * ```
+ */
+export declare const PriceText: React.ForwardRefExoticComponent<PriceTextProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/payment/PaymentLineItem.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PaymentLineItem - Component for displaying individual line item information
+ * Used within Payment.LineItemRepeater to display price, discount, deposit, etc.
+ */
+import React from 'react';
+import * as CorePayment from '../core/payment/Payment.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { Money } from '@wix/headless-components/react';
+var TestIds;
+(function (TestIds) {
+    TestIds["paymentLineItemRoot"] = "payment-line-item-root";
+    TestIds["paymentLineItemPrice"] = "payment-line-item-price";
+    TestIds["paymentLineItemDiscount"] = "payment-line-item-discount";
+    TestIds["paymentLineItemDeposit"] = "payment-line-item-deposit";
+    TestIds["paymentLineItemPriceText"] = "payment-line-item-price-text";
+})(TestIds || (TestIds = {}));
+const PaymentLineItemContext = React.createContext(null);
+/**
+ * Hook to access PaymentLineItem context
+ */
+function usePaymentLineItemContext() {
+    const context = React.useContext(PaymentLineItemContext);
+    if (!context) {
+        throw new Error('usePaymentLineItemContext must be used within a PaymentLineItem.Root component');
+    }
+    return context;
+}
+/**
+ * Root component for a single line item.
+ * Provides context for child components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Root lineItem={item} currency="USD">
+ *   <PaymentLineItem.Price />
+ *   <PaymentLineItem.Discount />
+ * </PaymentLineItem.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { lineItem, currency, children, asChild, className, ...attrs } = props;
+    return (_jsx(PaymentLineItemContext.Provider, { value: { lineItem, currency }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": attrs['data-testid'] || TestIds.paymentLineItemRoot, customElement: children, customElementProps: { lineItem, currency }, ...attrs, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+});
+Root.displayName = 'PaymentLineItem.Root';
+/**
+ * Displays the line item price with support for different price types.
+ * Uses data-attributes for conditional visibility.
+ *
+ * For CUSTOM rate type services, displays priceText instead of monetary value.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - renders total price or price text
+ * <PaymentLineItem.Price className="text-lg font-bold" />
+ *
+ * // Custom rendering with full price data
+ * <PaymentLineItem.Price asChild>
+ *   {({ totalPrice, subtotal, tax, discount, priceText }) => (
+ *     <div>
+ *       {priceText ? (
+ *         <span>{priceText}</span>
+ *       ) : (
+ *         <>
+ *           <span><Money money={totalPrice} /></span>
+ *           <span data-has-discount={!!discount?.amount}><Money money={discount} /></span>
+ *         </>
+ *       )}
+ *     </div>
+ *   )}
+ * </PaymentLineItem.Price>
+ * ```
+ */
+export const Price = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem, currency } = usePaymentLineItemContext();
+    return (_jsx(CorePayment.LineItem, { lineItem: lineItem, currency: currency, children: (priceData) => {
+            const { totalPrice, discount, deposit, priceText } = priceData;
+            // Default rendering based on price type
+            const renderDefaultPrice = () => {
+                // If custom price text (CUSTOM rate type), show text
+                if (priceText) {
+                    return (_jsx("span", { className: className, "data-testid": TestIds.paymentLineItemPrice, children: priceText }));
+                }
+                // Otherwise show monetary price
+                return totalPrice ? (_jsx(Money, { money: totalPrice, className: className })) : null;
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemPrice, "data-has-discount": discount !== null && discount.amount > 0, "data-has-deposit": deposit !== null && deposit.amount > 0, "data-has-price-text": !!priceText, customElement: children, customElementProps: priceData, children: renderDefaultPrice() }));
+        } }));
+});
+Price.displayName = 'PaymentLineItem.Price';
+/**
+ * Displays the line item discount.
+ * Uses data-has-discount attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Discount className="text-green-500" />
+ * ```
+ */
+export const Discount = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem, currency } = usePaymentLineItemContext();
+    return (_jsx(CorePayment.LineItem, { lineItem: lineItem, currency: currency, children: ({ discount }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDiscount, "data-has-discount": discount !== null && discount.amount > 0, customElement: children, customElementProps: { discount }, children: discount ? _jsx(Money, { money: discount }) : null })) }));
+});
+Discount.displayName = 'PaymentLineItem.Discount';
+/**
+ * Displays the line item deposit amount.
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Deposit className="font-semibold" />
+ * ```
+ */
+export const Deposit = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem, currency } = usePaymentLineItemContext();
+    return (_jsx(CorePayment.LineItem, { lineItem: lineItem, currency: currency, children: ({ deposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDeposit, "data-has-deposit": deposit !== null && deposit.amount > 0, customElement: children, customElementProps: { deposit }, children: deposit ? _jsx(Money, { money: deposit }) : null })) }));
+});
+Deposit.displayName = 'PaymentLineItem.Deposit';
+/**
+ * Displays the custom price text (for CUSTOM rate type services).
+ * Uses data-has-price-text attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.PriceText className="text-foreground" />
+ * ```
+ */
+export const PriceText = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem, currency } = usePaymentLineItemContext();
+    return (_jsx(CorePayment.LineItem, { lineItem: lineItem, currency: currency, children: ({ priceText }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemPriceText, "data-has-price-text": !!priceText, customElement: children, customElementProps: { priceText }, children: priceText ? _jsx("span", { children: priceText }) : null })) }));
+});
+PriceText.displayName = 'PaymentLineItem.PriceText';

package/cjs/dist/react/service/Service.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import { MoneyData } from '@wix/headless-components/react';
 import { type Service, type Payment } from '@wix/auto_sdk_bookings_services';
+import * as ServiceMediaModule from './ServiceMedia.js';
 /**
  * Props for Service.Root component
  */
@@ -558,159 +559,6 @@ export interface StaffMemberRepeaterProps {
  * ```
  */
 export declare const StaffMemberRepeater: React.ForwardRefExoticComponent<StaffMemberRepeaterProps & React.RefAttributes<HTMLElement>>;
-/**
- * Props for Service MainMedia component
- */
-export interface MainMediaProps {
-    asChild?: boolean;
-    children?: AsChildChildren<{
-        media: {
-            image?: string;
-        };
-    }>;
-    className?: string;
-}
-/**
- * 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 declare const MainMedia: React.ForwardRefExoticComponent<MainMediaProps & React.RefAttributes<HTMLImageElement>>;
-/**
- * Props for Service CoverMedia component
- */
-export interface CoverMediaProps {
-    asChild?: boolean;
-    children?: AsChildChildren<{
-        media: {
-            image?: string;
-        };
-    }>;
-    className?: string;
-}
-/**
- * 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 declare const CoverMedia: React.ForwardRefExoticComponent<CoverMediaProps & React.RefAttributes<HTMLImageElement>>;
-/**
- * Props for Service MediaItems component
- */
-export interface MediaItemsProps {
-    children: React.ReactNode;
-    infinite?: boolean;
-    autoPlay?: {
-        direction?: 'forward' | 'backward';
-        intervalMs?: number;
-    };
-}
-/**
- * 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 declare const MediaItems: React.ForwardRefExoticComponent<MediaItemsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Props for Service Raw component
  */
@@ -1210,4 +1058,9 @@ export declare const StaffMembers: typeof StaffMembersBase & {
     List: typeof StaffMembersList;
     StaffMemberRepeater: typeof StaffMemberRepeater;
 };
-export {};
+export declare const MainMedia: React.ForwardRefExoticComponent<ServiceMediaModule.MainProps & React.RefAttributes<HTMLImageElement>>;
+export declare const CoverMedia: React.ForwardRefExoticComponent<ServiceMediaModule.CoverProps & React.RefAttributes<HTMLImageElement>>;
+export declare const MediaGallery: React.FC<ServiceMediaModule.GalleryProps>;
+export type { MainProps as MainMediaProps } from './ServiceMedia.js';
+export type { CoverProps as CoverMediaProps } from './ServiceMedia.js';
+export type { GalleryProps as MediaGalleryProps } from './ServiceMedia.js';

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

@@ -7,10 +7,9 @@ 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 { RateType, } from '@wix/auto_sdk_bookings_services';
 import * as Location from '../location/Location.js';
+import * as ServiceMediaModule from './ServiceMedia.js';
 var TestIds;
 (function (TestIds) {
     TestIds["serviceRoot"] = "service-root";
@@ -27,10 +26,6 @@ var TestIds;
     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";
@@ -538,148 +533,6 @@ export const StaffMemberRepeater = React.forwardRef((props, ref) => {
     return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: staffMemberItemWrapper, asChild: asChild, 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.
  *
@@ -1203,3 +1056,10 @@ export const StaffMembers = Object.assign(StaffMembersBase, {
     List: StaffMembersList,
     StaffMemberRepeater,
 });
+// Re-export media components under Service namespace
+export const MainMedia = ServiceMediaModule.Main;
+MainMedia.displayName = 'Service.MainMedia';
+export const CoverMedia = ServiceMediaModule.Cover;
+CoverMedia.displayName = 'Service.CoverMedia';
+export const MediaGallery = ServiceMediaModule.Gallery;
+MediaGallery.displayName = 'Service.MediaGallery';