@wix/headless-bookings 0.0.91 → 0.0.93

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

@@ -182,7 +182,7 @@ export const Actions = {
  * Uses the core DateRange component to access service data.
  * Both dates are set together and trigger a single fetch.
  *
- * Default rendering provides two native date inputs.
+ * Default rendering provides a native date input.
  *
  * @component
  * @example
@@ -203,18 +203,19 @@ export const Actions = {
  * ```
  */
 const DateRangeInput = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...otherProps } = props;
+    const { asChild, children, className, onChange, ...rest } = props;
     return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange, timezone }) => {
-            const defaultContent = (_jsx("input", { ref: ref, type: "date", className: className, "data-testid": TestIds.timeSlotListDateRangeInput, value: toISODateString(startDate, timezone), required: true, onChange: (e) => {
-                    const date = parse(e.target.value, 'yyyy-MM-dd', new Date());
-                    setDateRange(startOfDay(date), endOfDay(date));
-                } }));
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
+            const handleChange = (e) => {
+                const date = parse(e.target.value, 'yyyy-MM-dd', new Date());
+                setDateRange(startOfDay(date), endOfDay(date));
+                onChange?.(e);
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onChange: handleChange, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
                     startDate,
                     endDate,
                     onChange: setDateRange,
                     timezone,
-                }, ...otherProps, children: defaultContent }));
+                }, children: _jsx("input", { ref: ref, type: "date", value: toISODateString(startDate, timezone) }) }));
         } }));
 });
 DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';

package/dist/react/booking/Book.d.ts

@@ -11,7 +11,7 @@ export interface BookProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEle
     asChild?: boolean;
     children?: React.ReactNode | ((props: BookChildProps) => React.ReactNode);
     label?: string;
-    loadingState?: string;
+    loadingState?: React.ReactNode;
     disabled?: boolean;
     /**
      * Called when checkout is required for payment.

package/dist/react/booking/Book.js

@@ -57,7 +57,7 @@ var TestIds;
  * ```
  */
 export const Book = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, loadingState, disabled, onCheckout, onComplete, onError, onClick, ...buttonProps } = props;
+    const { asChild, children, label, loadingState, disabled, onCheckout, onComplete, onError, onClick, ...rest } = props;
     return (_jsx(CoreBook.Book, { onCheckout: (result) => {
             // Create navigateToCheckout with checkoutId captured
             const navigateToCheckout = (options) => navigateToCheckoutUtil({
@@ -68,12 +68,15 @@ export const Book = React.forwardRef((props, ref) => {
             return onCheckout?.(navigateToCheckout);
         }, onComplete: (result) => {
             return onComplete?.({ orderId: result.orderId });
-        }, onError: onError, disabled: disabled, children: (childProps) => {
-            const handleClick = () => {
-                childProps.onClick();
-                onClick?.(childProps);
+        }, onError: onError, disabled: disabled, children: (coreBookProps) => {
+            const handleClick = async () => {
+                await coreBookProps.onClick();
+                onClick?.(coreBookProps);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingActionBook, "data-in-progress": childProps.isLoading, customElement: children, customElementProps: childProps, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: childProps.disabled, children: childProps.isLoading
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, onClick: handleClick, disabled: coreBookProps.disabled, "data-testid": TestIds.bookingActionBook, "data-in-progress": coreBookProps.isLoading, "data-can-book": coreBookProps.canBook, customElement: children, customElementProps: {
+                    ...coreBookProps,
+                    onClick: handleClick,
+                }, children: _jsx("button", { children: coreBookProps.isLoading
                         ? loadingState
                         : children || label }) }));
         } }));

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

@@ -5,7 +5,6 @@
 import React from 'react';
 import * as CoreBooking from '../core/booking/Booking.js';
 import type { BookingServiceConfig } from '../../services/booking/booking.js';
-import * as BookingItemComponents from './BookingItem.js';
 export type { BookingData, DataProps, BookingItem, } from '../core/booking/Booking.js';
 /**
  * Props for Booking.Root component
@@ -57,9 +56,9 @@ export declare const Actions: {
 };
 /**
  * Hook to access the current BookingItem from context.
- * Must be used within Booking.ItemRepeater.
+ * Must be used within Booking.BookingItemRepeater.
  *
- * @throws Error if used outside of ItemRepeater context
+ * @throws Error if used outside of BookingItemRepeater context
  */
 export declare const useBookingItem: typeof CoreBooking.useBookingItemContext;
 /**
@@ -88,10 +87,6 @@ export interface BookingItemsProps {
  * ```
  */
 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.BookingItemRepeater component
  */
@@ -121,12 +116,6 @@ export interface BookingItemRepeaterProps {
  * ```
  */
 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
  */
@@ -182,5 +171,3 @@ export interface BookingLocationProps {
  * ```
  */
 export declare function Location(props: BookingLocationProps): React.ReactNode;
-/** @deprecated Use BookingItem.StaffName instead */
-export declare const StaffName: React.ForwardRefExoticComponent<BookingItemComponents.StaffNameProps & React.RefAttributes<HTMLElement>>;

package/dist/react/booking/Booking.js

@@ -9,8 +9,6 @@ import { Book } from './Book.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
 // ============================================================================
@@ -75,9 +73,9 @@ export const Actions = {
 // ============================================================================
 /**
  * Hook to access the current BookingItem from context.
- * Must be used within Booking.ItemRepeater.
+ * Must be used within Booking.BookingItemRepeater.
  *
- * @throws Error if used outside of ItemRepeater context
+ * @throws Error if used outside of BookingItemRepeater context
  */
 export const useBookingItem = CoreBooking.useBookingItemContext;
 /**
@@ -104,10 +102,6 @@ export const BookingItems = React.forwardRef((props, ref) => {
             })), hasMore: false, isLoading: false, "data-testid": TestIds.bookingItems, ...otherProps, children: _jsx(GenericList.Items, { emptyState: emptyState, children: children }) })) }));
 });
 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,15 +135,6 @@ export const BookingItemRepeater = React.forwardRef((props, ref) => {
     return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item }) => (_jsx(BookingItemWrapper, { item: item, children: children }, item.instanceId)), children: undefined }));
 });
 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.
@@ -194,5 +179,3 @@ export function Location(props) {
     const { children } = props;
     return (_jsx(CoreBooking.Data, { children: ({ location }) => location ? (_jsx(CoreLocation.Root, { location: location, children: children })) : null }));
 }
-/** @deprecated Use BookingItem.StaffName instead */
-export const StaffName = BookingItemComponents.StaffName;

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

@@ -44,12 +44,11 @@ export declare function TimeSlot(props: TimeSlotProps): React.ReactNode;
 export declare namespace TimeSlot {
     var displayName: string;
 }
-export interface StaffNameProps {
+export interface StaffNameProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         name: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the staff member's name from the current booking item.

package/dist/react/booking/BookingItem.js

@@ -61,11 +61,11 @@ TimeSlot.displayName = 'BookingItem.TimeSlot';
  * ```
  */
 export const StaffName = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, ...rest } = 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 }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.bookingItemStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
         } }));
 });
 StaffName.displayName = 'BookingItem.StaffName';

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

@@ -171,7 +171,7 @@ Fields.displayName = 'BookingForm.Fields';
  * ```
  */
 export const ValidateFormSubmission = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, onValidationComplete, onClick, ...buttonProps } = props;
+    const { asChild, children, label, onValidationComplete, onClick, ...rest } = props;
     const [valid, setValid] = React.useState(null);
     const [validationFailures, setValidationFailures] = React.useState([]);
     return (_jsx(CoreBookingForm.Actions, { children: ({ validateFormSubmission }) => {
@@ -184,11 +184,11 @@ export const ValidateFormSubmission = React.forwardRef((props, ref) => {
                 }
                 onClick?.(result);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingFormActionValidateFormSubmission, "data-valid": valid, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, onClick: handleClick, "data-testid": TestIds.bookingFormActionValidateFormSubmission, "data-valid": valid, customElement: children, customElementProps: {
                     onClick: handleClick,
                     valid,
                     validationFailures,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+                }, children: _jsx("button", { children: children || label }) }));
         } }));
 });
 ValidateFormSubmission.displayName =

package/dist/react/location/Location.d.ts

@@ -58,12 +58,11 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
 /**
  * Props for Location.Name component
  */
-export interface NameProps {
+export interface NameProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: React.ReactNode | AsChildChildren<{
         name: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the location name.
@@ -90,14 +89,13 @@ export declare const Name: React.ForwardRefExoticComponent<NameProps & React.Ref
 /**
  * Props for Location.Type component
  */
-export interface TypeProps {
+export interface TypeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: React.ReactNode | AsChildChildren<{
         locationType: LocationType;
         isCustomerLocation: boolean;
         isCustomLocation: boolean;
     }>;
-    className?: string;
 }
 /**
  * Displays the location type.

package/dist/react/location/Location.js

@@ -93,9 +93,9 @@ Root.displayName = 'Location.Root';
  * ```
  */
 export const Name = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attrs } = props;
+    const { asChild, children, ...rest } = props;
     const { name } = useLocationContext();
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationName, customElement: children, customElementProps: { name: name ?? '' }, ...attrs, children: name ? _jsx("span", { children: name }) : null }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.locationName, customElement: children, customElementProps: { name: name ?? '' }, children: name ? _jsx("span", { children: name }) : null }));
 });
 Name.displayName = 'Location.Name';
 /**
@@ -117,13 +117,13 @@ Name.displayName = 'Location.Name';
  * ```
  */
 export const Type = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attrs } = props;
+    const { asChild, children, ...rest } = props;
     const { locationType, isCustomerLocation, isCustomLocation } = useLocationContext();
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationType, customElement: children, customElementProps: {
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.locationType, customElement: children, customElementProps: {
             locationType,
             isCustomerLocation,
             isCustomLocation,
-        }, ...attrs, children: locationType ? _jsx("span", { children: locationType }) : null }));
+        }, children: locationType ? _jsx("span", { children: locationType }) : null }));
 });
 Type.displayName = 'Location.Type';
 /**
@@ -150,9 +150,9 @@ Type.displayName = 'Location.Type';
  * ```
  */
 export const LocationAddress = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attrs } = props;
+    const { asChild, children, ...rest } = props;
     const { address } = useLocationContext();
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationAddress, customElement: children, customElementProps: { address }, ...attrs, children: address ? (_jsx("span", { children: _jsx(Address.Root, { address: address, children: _jsx(Address.Formatted, {}) }) })) : null }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.locationAddress, customElement: children, customElementProps: { address }, children: address ? (_jsx("span", { children: _jsx(Address.Root, { address: address, children: _jsx(Address.Formatted, {}) }) })) : null }));
 });
 LocationAddress.displayName = 'Location.Address';
 // Export as Address (avoiding name collision with imported Address)
@@ -173,9 +173,9 @@ export { LocationAddress as Address };
  * ```
  */
 export const Phone = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attrs } = props;
+    const { asChild, children, ...rest } = props;
     const { phone } = useLocationContext();
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationPhone, customElement: children, customElementProps: { phone }, ...attrs, children: phone ? _jsx("span", { children: phone }) : null }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.locationPhone, customElement: children, customElementProps: { phone }, children: phone ? _jsx("span", { children: phone }) : null }));
 });
 Phone.displayName = 'Location.Phone';
 /**
@@ -194,9 +194,9 @@ Phone.displayName = 'Location.Phone';
  * ```
  */
 export const Email = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attrs } = props;
+    const { asChild, children, ...rest } = props;
     const { email } = useLocationContext();
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationEmail, customElement: children, customElementProps: { email }, ...attrs, children: email ? _jsx("span", { children: email }) : null }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.locationEmail, customElement: children, customElementProps: { email }, children: email ? _jsx("span", { children: email }) : null }));
 });
 Email.displayName = 'Location.Email';
 /**
@@ -244,7 +244,7 @@ Raw.displayName = 'Location.Raw';
  * ```
  */
 const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, onClick, label, className, ...buttonProps } = props;
+    const { asChild, children, onClick, label, className, ...rest } = props;
     return (_jsx(CoreLocation.Actions, { children: ({ select, selected, rawLocation }) => {
             const handleClick = () => {
                 select();
@@ -252,11 +252,11 @@ const Select = React.forwardRef((props, ref) => {
                     onClick?.(rawLocation);
                 }
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationActionSelect, "data-selected": selected, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, "data-testid": TestIds.locationActionSelect, "data-selected": selected, customElement: children, customElementProps: {
                     onClick: handleClick,
                     selected,
                     location: rawLocation,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+                }, children: _jsx("button", { children: children || label }) }));
         } }));
 });
 Select.displayName = 'Location.Actions.Select';

package/dist/react/location/LocationList.d.ts

@@ -77,13 +77,12 @@ export declare const LocationRepeater: React.ForwardRefExoticComponent<LocationR
 /**
  * Props for LocationList.Totals component
  */
-export interface TotalsProps {
+export interface TotalsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: React.ReactNode | AsChildChildren<{
         count: number;
         hasLocations: boolean;
     }>;
-    className?: string;
 }
 /**
  * Displays the total count of locations.

package/dist/react/location/LocationList.js

@@ -43,6 +43,7 @@ var TestIds;
     TestIds["locationListLocations"] = "location-list-locations";
     TestIds["locationListLocation"] = "location-list-location";
     TestIds["locationListActionClear"] = "location-list-action-clear";
+    TestIds["locationListTotals"] = "location-list-totals";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the LocationList service context for rendering locations lists.
@@ -133,10 +134,10 @@ LocationRepeater.displayName = 'LocationList.LocationRepeater';
  * ```
  */
 export const Totals = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attrs } = props;
+    const { asChild, children, ...rest } = props;
     return (_jsx(CoreLocationList.Locations, { children: ({ displayLocations, hasLocations }) => {
             const count = displayLocations.length;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { count, hasLocations }, ...attrs, children: _jsx("span", { children: count }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.locationListTotals, customElement: children, customElementProps: { count, hasLocations }, children: _jsx("span", { children: count }) }));
         } }));
 });
 Totals.displayName = 'LocationList.Totals';
@@ -170,7 +171,7 @@ Totals.displayName = 'LocationList.Totals';
  * ```
  */
 const Clear = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    const { asChild, children, className, label, onClick, ...rest } = props;
     return (_jsx(CoreLocationList.Actions, { children: ({ selectedLocation }) => {
             let bookingService = null;
             try {
@@ -183,9 +184,9 @@ const Clear = React.forwardRef((props, ref) => {
                 bookingService?.actions.clearLocation();
                 onClick?.(selectedLocation);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationListActionClear, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, "data-testid": TestIds.locationListActionClear, customElement: children, customElementProps: {
                     onClick: handleClick,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+                }, children: _jsx("button", { children: children || label }) }));
         } }));
 });
 Clear.displayName = 'LocationList.Actions.Clear';

package/dist/react/payment/Payment.d.ts

@@ -59,13 +59,12 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
 /**
  * Props for Payment.Subtotal component
  */
-export interface SubtotalProps {
+export interface SubtotalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         subtotal: MoneyData | null;
         customPrice: string | null;
     }>;
-    className?: string;
 }
 /**
  * Displays the payment subtotal.
@@ -91,12 +90,11 @@ export declare const Subtotal: React.ForwardRefExoticComponent<SubtotalProps & R
 /**
  * Props for Payment.Tax component
  */
-export interface TaxProps {
+export interface TaxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         tax: MoneyData | null;
     }>;
-    className?: string;
 }
 /**
  * Displays the payment tax.
@@ -112,13 +110,12 @@ export declare const Tax: React.ForwardRefExoticComponent<TaxProps & React.RefAt
 /**
  * Props for Payment.Total component
  */
-export interface TotalProps {
+export interface TotalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         total: MoneyData | null;
         customPrice: string | null;
     }>;
-    className?: string;
 }
 /**
  * Displays the payment total.
@@ -144,13 +141,12 @@ export declare const Total: React.ForwardRefExoticComponent<TotalProps & React.R
 /**
  * Props for Payment.PayNow component
  */
-export interface PayNowProps {
+export interface PayNowProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         payNow: MoneyData | null;
         isDeposit: boolean;
     }>;
-    className?: string;
 }
 /**
  * Displays the pay now amount (amount to pay upfront in deposit scenarios).
@@ -166,13 +162,12 @@ export declare const PayNow: React.ForwardRefExoticComponent<PayNowProps & React
 /**
  * Props for Payment.PayLater component
  */
-export interface PayLaterProps {
+export interface PayLaterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         payLater: MoneyData | null;
         isDeposit: boolean;
     }>;
-    className?: string;
 }
 /**
  * Displays the pay later amount (for deposit scenarios).
@@ -266,13 +261,12 @@ export declare const LineItemRepeater: React.ForwardRefExoticComponent<LineItemR
 /**
  * Props for Payment.LineItemTotal component
  */
-export interface LineItemTotalProps {
+export interface LineItemTotalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         totalPrice: MoneyData | null;
         customPrice: string | null;
     }>;
-    className?: string;
 }
 /**
  * Displays the line item total (total price after tax).
@@ -288,13 +282,12 @@ export declare const LineItemTotal: React.ForwardRefExoticComponent<LineItemTota
 /**
  * Props for Payment.LineItemSubtotal component
  */
-export interface LineItemSubtotalProps {
+export interface LineItemSubtotalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         subtotal: MoneyData | null;
         customPrice: string | null;
     }>;
-    className?: string;
 }
 /**
  * Displays the line item subtotal (full price before discounts).
@@ -310,12 +303,11 @@ export declare const LineItemSubtotal: React.ForwardRefExoticComponent<LineItemS
 /**
  * Props for Payment.LineItemDeposit component
  */
-export interface LineItemDepositProps {
+export interface LineItemDepositProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         deposit: MoneyData | null;
     }>;
-    className?: string;
 }
 /**
  * Displays the line item deposit amount.

package/dist/react/payment/Payment.js

@@ -83,10 +83,10 @@ Root.displayName = 'Payment.Root';
  */
 export const Subtotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ subtotal, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: {
+    return (_jsx(CorePayment.Data, { children: ({ subtotal, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: {
                 subtotal,
                 customPrice,
-            }, children: subtotal && _jsx(Money, { money: subtotal }) })) }));
+            }, "data-testid": TestIds.paymentSubtotal, "data-has-custom-price": !!customPrice, children: subtotal && _jsx(Money, { money: subtotal }) })) }));
 });
 Subtotal.displayName = 'Payment.Subtotal';
 /**
@@ -101,7 +101,7 @@ Subtotal.displayName = 'Payment.Subtotal';
  */
 export const Tax = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ tax, hasTax }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTax, "data-has-tax": hasTax, customElement: children, customElementProps: { tax }, children: hasTax && _jsx(Money, { money: tax }) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ tax, hasTax }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { tax }, "data-testid": TestIds.paymentTax, "data-has-tax": hasTax, children: hasTax && _jsx(Money, { money: tax }) })) }));
 });
 Tax.displayName = 'Payment.Tax';
 /**
@@ -126,10 +126,10 @@ Tax.displayName = 'Payment.Tax';
  */
 export const Total = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ total, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: {
+    return (_jsx(CorePayment.Data, { children: ({ total, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: {
                 total,
                 customPrice,
-            }, children: total && _jsx(Money, { money: total }) })) }));
+            }, "data-testid": TestIds.paymentTotal, "data-has-custom-price": !!customPrice, children: total && _jsx(Money, { money: total }) })) }));
 });
 Total.displayName = 'Payment.Total';
 /**
@@ -144,7 +144,7 @@ Total.displayName = 'Payment.Total';
  */
 export const PayNow = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ payNow, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payNow, isDeposit }, children: isDeposit && payNow && payNow.amount > 0 && (_jsx(Money, { money: payNow })) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ payNow, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { payNow, isDeposit }, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, children: isDeposit && payNow && payNow.amount > 0 && (_jsx(Money, { money: payNow })) })) }));
 });
 PayNow.displayName = 'Payment.PayNow';
 /**
@@ -159,7 +159,7 @@ PayNow.displayName = 'Payment.PayNow';
  */
 export const PayLater = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ payLater, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payLater, isDeposit }, children: isDeposit && payLater && payLater.amount > 0 && (_jsx(Money, { money: payLater })) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ payLater, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { payLater, isDeposit }, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, children: isDeposit && payLater && payLater.amount > 0 && (_jsx(Money, { money: payLater })) })) }));
 });
 PayLater.displayName = 'Payment.PayLater';
 /**
@@ -184,8 +184,8 @@ PayLater.displayName = 'Payment.PayLater';
  * ```
  */
 export const LineItems = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attributes } = props;
-    return (_jsx(CorePayment.LineItems, { children: ({ lineItems, currency, isLoading, error }) => (_jsx(GenericList.Root, { items: lineItems, isLoading: isLoading, error: error, children: _jsx(LineItemsContext.Provider, { value: { currency }, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItems, "data-loading": isLoading, "data-error": !!error, customElement: children, customElementProps: { lineItems, currency, isLoading, error }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }) })) }));
+    const { asChild, children, className, ...rest } = props;
+    return (_jsx(CorePayment.LineItems, { children: ({ lineItems, currency, isLoading, error }) => (_jsx(GenericList.Root, { items: lineItems, isLoading: isLoading, error: error, children: _jsx(LineItemsContext.Provider, { value: { currency }, children: _jsx(AsChildSlot, { ...rest, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItems, "data-loading": isLoading, "data-error": !!error, customElement: children, customElementProps: { lineItems, currency, isLoading, error }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }) })) }));
 });
 LineItems.displayName = 'Payment.LineItems';
 // Context for line items currency
@@ -252,8 +252,8 @@ LineItemRepeater.displayName = 'Payment.LineItemRepeater';
  * ```
  */
 export const LineItemTotal = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CorePayment.LineItemInfo, { children: ({ totalPrice, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemTotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: { totalPrice, customPrice }, children: customPrice ? (_jsx("span", { children: customPrice })) : (totalPrice && _jsx(Money, { money: totalPrice })) })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ totalPrice, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.paymentLineItemTotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: { totalPrice, customPrice }, children: customPrice ? (_jsx("span", { children: customPrice })) : (totalPrice && _jsx(Money, { money: totalPrice })) })) }));
 });
 LineItemTotal.displayName = 'Payment.LineItemTotal';
 /**
@@ -267,8 +267,8 @@ LineItemTotal.displayName = 'Payment.LineItemTotal';
  * ```
  */
 export const LineItemSubtotal = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CorePayment.LineItemInfo, { children: ({ subtotal, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemSubtotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: { subtotal, customPrice }, children: customPrice ? (_jsx("span", { children: customPrice })) : (subtotal && _jsx(Money, { money: subtotal })) })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ subtotal, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.paymentLineItemSubtotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: { subtotal, customPrice }, children: customPrice ? (_jsx("span", { children: customPrice })) : (subtotal && _jsx(Money, { money: subtotal })) })) }));
 });
 LineItemSubtotal.displayName = 'Payment.LineItemSubtotal';
 /**
@@ -283,6 +283,6 @@ LineItemSubtotal.displayName = 'Payment.LineItemSubtotal';
  */
 export const LineItemDeposit = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.LineItemInfo, { children: ({ deposit, hasDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDeposit, "data-has-deposit": hasDeposit, customElement: children, customElementProps: { deposit }, children: hasDeposit && _jsx(Money, { money: deposit }) })) }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ deposit, hasDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { deposit }, "data-testid": TestIds.paymentLineItemDeposit, "data-has-deposit": hasDeposit, children: hasDeposit && _jsx(Money, { money: deposit }) })) }));
 });
 LineItemDeposit.displayName = 'Payment.LineItemDeposit';