@wix/headless-bookings 0.0.23 → 0.0.24

package/cjs/dist/react/booking-form/BookingForm.d.ts

@@ -0,0 +1,156 @@
+/**
+ * BookingForm - High-level component for rendering booking forms
+ * Provides components for displaying and managing booking form fields
+ */
+import React from 'react';
+import { Form } from '@wix/headless-forms/react';
+type FieldMap = Parameters<typeof Form.Fields>[0]['fieldMap'];
+/**
+ * Props for BookingForm.Root component
+ */
+export interface RootProps {
+    /** The form ID to load (required - standalone mode) */
+    formId: string;
+    /** Optional additional metadata to pass to FormService */
+    additionalMetadata?: Record<string, string | string[]>;
+    /** Optional partial field map to override default booking field components */
+    fieldMap?: Partial<FieldMap>;
+    /** Child components - if not provided, Form.Fields is rendered with default field map */
+    children?: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the root element */
+    className?: string;
+    /** Row gap class name for Form.Fields when using default rendering */
+    rowGapClassname?: string;
+    /** Column gap class name for Form.Fields when using default rendering */
+    columnGapClassname?: string;
+}
+/**
+ * Root component for booking form that wraps CoreBookingForm.Root.
+ * Automatically loads form and handles submission in standalone mode.
+ * Uses DEFAULT_BOOKING_FIELD_MAP for field rendering with optional user overrides.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { BookingForm } from '@wix/headless-bookings/react';
+ *
+ * // Minimal usage - uses default field components
+ * <BookingForm.Root formId="your-form-id" />
+ *
+ * // With custom styling
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   className="my-form-container"
+ *   rowGapClassname="gap-y-6"
+ *   columnGapClassname="gap-x-4"
+ * />
+ *
+ * // With custom field overrides
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   fieldMap={{ TEXT_INPUT: MyCustomTextInput }}
+ * />
+ *
+ * // With full control over form structure
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="flex justify-center p-4" />
+ *   <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *   <BookingForm.Fields />
+ *   <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
+ *   <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
+ * </BookingForm.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for BookingForm.Fields component
+ */
+export interface FieldsProps {
+    /** Optional override for row gap class name */
+    rowGapClassname?: string;
+    /** Optional override for column gap class name */
+    columnGapClassname?: string;
+    /** CSS classes to apply */
+    className?: string;
+}
+/**
+ * Fields component that renders Form.Fields with the merged field map.
+ * Must be used within BookingForm.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="p-4" />
+ *   <BookingForm.Fields rowGapClassname="gap-y-6" />
+ *   <Form.Error className="text-destructive" />
+ * </BookingForm.Root>
+ * ```
+ */
+export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Render props for BookingForm.Data component
+ */
+export interface DataRenderProps {
+    /** The form ID being used */
+    formId: string;
+    /** Merged field map (DEFAULT_BOOKING_FIELD_MAP + user overrides) */
+    fields: FieldMap;
+    /** Current form values from FormService (live state of form fields) */
+    formValues: Record<string, unknown>;
+    /** Current form submission data */
+    formSubmission: Record<string, unknown> | null;
+    /** Action to store form submission data */
+    setFormSubmission: (formValues: Record<string, unknown>) => void;
+    /** Action to validate the form */
+    validateFormSubmission: () => Promise<{
+        valid: boolean;
+        validationFailures: string[];
+    }>;
+}
+/**
+ * Props for BookingForm.Data component
+ */
+export interface DataProps {
+    /** The form ID to load (required - standalone mode) */
+    formId: string;
+    /** Optional additional metadata to pass to FormService */
+    additionalMetadata?: Record<string, string | string[]>;
+    /** Optional partial field map to override default booking field components */
+    fieldMap?: Partial<FieldMap>;
+    /** Render prop function that receives form data and actions */
+    children: (data: DataRenderProps) => React.ReactNode;
+}
+/**
+ * Data component that provides booking form data via render props.
+ * Use this when you need programmatic access to form state and actions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Data formId="your-form-id">
+ *   {({ formId, fields, formValues, setFormSubmission, validateFormSubmission }) => (
+ *     <div>
+ *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <button onClick={async () => {
+ *         const result = await validateFormSubmission();
+ *         if (result.valid) {
+ *           // Store current form values before submission
+ *           setFormSubmission(formValues);
+ *         }
+ *       }}>
+ *         Validate & Submit
+ *       </button>
+ *     </div>
+ *   )}
+ * </BookingForm.Data>
+ * ```
+ */
+export declare function Data(props: DataProps): React.ReactNode;
+export declare namespace Data {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BookingForm - High-level component for rendering booking forms
+ * Provides components for displaying and managing booking form fields
+ */
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { Form } from '@wix/headless-forms/react';
+import * as CoreBookingForm from '../core/booking-form/BookingForm.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["bookingFormRoot"] = "booking-form-root";
+    TestIds["bookingFormFields"] = "booking-form-fields";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component for booking form that wraps CoreBookingForm.Root.
+ * Automatically loads form and handles submission in standalone mode.
+ * Uses DEFAULT_BOOKING_FIELD_MAP for field rendering with optional user overrides.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { BookingForm } from '@wix/headless-bookings/react';
+ *
+ * // Minimal usage - uses default field components
+ * <BookingForm.Root formId="your-form-id" />
+ *
+ * // With custom styling
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   className="my-form-container"
+ *   rowGapClassname="gap-y-6"
+ *   columnGapClassname="gap-x-4"
+ * />
+ *
+ * // With custom field overrides
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   fieldMap={{ TEXT_INPUT: MyCustomTextInput }}
+ * />
+ *
+ * // With full control over form structure
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="flex justify-center p-4" />
+ *   <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *   <BookingForm.Fields />
+ *   <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
+ *   <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
+ * </BookingForm.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, asChild, className, formId, additionalMetadata, fieldMap, rowGapClassname = 'gap-y-4', columnGapClassname = 'gap-x-2', ...otherProps } = props;
+    return (_jsx(CoreBookingForm.Root, { formId: formId, additionalMetadata: additionalMetadata, fieldMap: fieldMap, children: ({ fields }) => (_jsx(BookingFormContext.Provider, { value: { fields, rowGapClassname, columnGapClassname }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingFormRoot, ...otherProps, children: _jsx("div", { children: children ?? (_jsxs(_Fragment, { children: [_jsx(Form.Loading, { className: "flex justify-center p-4 text-foreground" }), _jsx(Form.LoadingError, { className: "bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-lg mb-4" }), _jsx(Form.Fields, { fieldMap: fields, rowGapClassname: rowGapClassname, columnGapClassname: columnGapClassname }), _jsx(Form.Error, { className: "mt-4 bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-lg" }), _jsx(Form.Submitted, { className: "mt-4 bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-3 rounded-lg" })] })) }) }) })) }));
+});
+Root.displayName = 'BookingForm.Root';
+const BookingFormContext = React.createContext(null);
+/**
+ * Hook to access BookingForm context
+ * @internal
+ */
+function useBookingFormContext() {
+    const context = React.useContext(BookingFormContext);
+    if (!context) {
+        throw new Error('useBookingFormContext must be used within a BookingForm.Root component');
+    }
+    return context;
+}
+/**
+ * Fields component that renders Form.Fields with the merged field map.
+ * Must be used within BookingForm.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="p-4" />
+ *   <BookingForm.Fields rowGapClassname="gap-y-6" />
+ *   <Form.Error className="text-destructive" />
+ * </BookingForm.Root>
+ * ```
+ */
+export const Fields = React.forwardRef((props, ref) => {
+    const context = useBookingFormContext();
+    const { rowGapClassname = context.rowGapClassname, columnGapClassname = context.columnGapClassname, className, ...otherProps } = props;
+    return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.bookingFormFields, ...otherProps, children: _jsx(Form.Fields, { fieldMap: context.fields, rowGapClassname: rowGapClassname, columnGapClassname: columnGapClassname }) }));
+});
+Fields.displayName = 'BookingForm.Fields';
+/**
+ * Data component that provides booking form data via render props.
+ * Use this when you need programmatic access to form state and actions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Data formId="your-form-id">
+ *   {({ formId, fields, formValues, setFormSubmission, validateFormSubmission }) => (
+ *     <div>
+ *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <button onClick={async () => {
+ *         const result = await validateFormSubmission();
+ *         if (result.valid) {
+ *           // Store current form values before submission
+ *           setFormSubmission(formValues);
+ *         }
+ *       }}>
+ *         Validate & Submit
+ *       </button>
+ *     </div>
+ *   )}
+ * </BookingForm.Data>
+ * ```
+ */
+export function Data(props) {
+    const { formId, additionalMetadata, fieldMap, children } = props;
+    return (_jsx(CoreBookingForm.Root, { formId: formId, additionalMetadata: additionalMetadata, fieldMap: fieldMap, children: ({ formId: id, fields, formValues, formSubmission, setFormSubmission, validateFormSubmission, }) => children({
+            formId: id,
+            fields,
+            formValues,
+            formSubmission,
+            setFormSubmission,
+            validateFormSubmission,
+        }) }));
+}
+Data.displayName = 'BookingForm.Data';

package/cjs/dist/react/core/booking-form/BookingForm.d.ts

@@ -0,0 +1,139 @@
+/**
+ * Core BookingForm Component
+ *
+ * Provides low-level access to booking form functionality via render props.
+ * Wraps CoreForm.Root and provides merged field map with booking defaults.
+ *
+ * Supports two modes:
+ * 1. Client-side: Provide formId to load the form dynamically
+ * 2. SSR/SSG: Provide a pre-loaded form object for server-side rendering
+ */
+import * as React from 'react';
+import type { FormValues } from '@wix/form-public';
+import { forms } from '@wix/forms';
+import { type ValidationResult } from '../../../services/booking-form/booking-form.js';
+import { Form } from '@wix/headless-forms/react';
+type FieldMap = Parameters<typeof Form.Fields>[0]['fieldMap'];
+/**
+ * Render props data provided to BookingForm children
+ */
+export interface BookingFormRenderProps {
+    /** The form ID being used */
+    formId: string;
+    /** Current form values from FormService (live state of form fields) */
+    formValues: FormValues;
+    /** Current form submission data (values stored before submission) */
+    formSubmission: FormValues | null;
+    /** Action to store form submission data */
+    setFormSubmission: (formValues: FormValues) => void;
+    /** Action to validate the form */
+    validateFormSubmission: () => Promise<ValidationResult>;
+    /** Merged field map (DEFAULT_BOOKING_FIELD_MAP + user overrides) */
+    fields: FieldMap;
+}
+/**
+ * Base props shared by all BookingForm config patterns
+ */
+interface BookingFormBaseProps {
+    /** Optional additional metadata to pass to FormService */
+    additionalMetadata?: Record<string, string | string[]>;
+    /** Optional partial field map to override default booking field components */
+    fieldMap?: Partial<FieldMap>;
+    /** Render prop function that receives form data and actions */
+    children: (data: BookingFormRenderProps) => React.ReactNode;
+}
+/**
+ * Props for BookingForm with formId (client-side loading)
+ */
+interface BookingFormWithFormIdProps extends BookingFormBaseProps {
+    /** The form ID to load (client-side loading) */
+    formId: string;
+    /** Pre-loaded form - not used in this mode */
+    form?: never;
+}
+/**
+ * Props for BookingForm with pre-loaded form (SSR/SSG)
+ */
+interface BookingFormWithFormProps extends BookingFormBaseProps {
+    /** Pre-loaded form object (SSR/SSG) - must be from bookings namespace */
+    form: forms.Form;
+    /** Form ID - not used in this mode (extracted from form) */
+    formId?: never;
+}
+/**
+ * Props for BookingForm render prop component.
+ * Supports two patterns:
+ * 1. Client-side: Provide formId to load form dynamically
+ * 2. SSR/SSG: Provide pre-loaded form object
+ */
+export type BookingFormProps = BookingFormWithFormIdProps | BookingFormWithFormProps;
+/**
+ * Core component that provides booking form data via render props.
+ * Uses BookingFormService to manage form submission state.
+ *
+ * Supports two modes:
+ * 1. Client-side: Provide formId to load the form dynamically
+ * 2. SSR/SSG: Provide a pre-loaded form object
+ *
+ * This component:
+ * - Sets up both FormService and BookingFormService in the same context
+ * - BookingFormService internally accesses FormService for formValues
+ * - Merges user's fieldMap with DEFAULT_BOOKING_FIELD_MAP
+ * - Provides form data and actions via render props
+ * - Form.* components (Form.Fields, Form.Loading, etc.) work because FormService is in context
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Pattern 1: Client-side loading
+ * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form';
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * <CoreBookingForm.Root formId="form-123">
+ *   {({ formId, setFormSubmission, fields }) => (
+ *     <Form.Fields
+ *       fieldMap={fields}
+ *       rowGapClassname="gap-y-4"
+ *       columnGapClassname="gap-x-2"
+ *     />
+ *   )}
+ * </CoreBookingForm.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Pattern 2: SSR with pre-loaded form
+ * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form';
+ * import { loadBookingFormConfig } from '@wix/headless-bookings/services';
+ *
+ * // Server-side: Load form
+ * const { form } = await loadBookingFormConfig('form-123');
+ *
+ * // Client-side: Render with pre-loaded form
+ * <CoreBookingForm.Root form={form}>
+ *   {({ formId, setFormSubmission, fields }) => (
+ *     <Form.Fields fieldMap={fields} />
+ *   )}
+ * </CoreBookingForm.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom field overrides and saving form values
+ * <CoreBookingForm.Root
+ *   formId="form-123"
+ *   fieldMap={{ TEXT_INPUT: MyCustomTextInput }}
+ * >
+ *   {({ fields, formValues, setFormSubmission }) => (
+ *     <>
+ *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <button onClick={() => setFormSubmission(formValues)}>
+ *         Save
+ *       </button>
+ *     </>
+ *   )}
+ * </CoreBookingForm.Root>
+ * ```
+ */
+export declare function Root(props: BookingFormProps): React.ReactNode;
+export {};

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

@@ -0,0 +1,181 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { WixServices, useService } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { BookingFormServiceDefinition, BookingFormService, BOOKING_FORM_NAMESPACE, } from '../../../services/booking-form/booking-form.js';
+import { FormServiceDefinition, FormService, } from '@wix/headless-forms/services';
+// TODO: remove this when form will be updated to support optional field map
+const DEFAULT_BOOKING_FIELD_MAP = {
+    TEXT_INPUT: () => null,
+    TEXT_AREA: () => null,
+    PHONE_INPUT: () => null,
+    EMAIL_INPUT: () => null,
+    NUMBER_INPUT: () => null,
+    CHECKBOX: () => null,
+    DROPDOWN: () => null,
+    DATE_PICKER: () => null,
+    SUBMIT_BUTTON: () => null,
+    RADIO_GROUP: () => null,
+    CHECKBOX_GROUP: () => null,
+    DATE_INPUT: () => null,
+    DATE_TIME_INPUT: () => null,
+    TIME_INPUT: () => null,
+    FILE_UPLOAD: () => null,
+    SIGNATURE: () => null,
+    TEXT: () => null,
+    MULTILINE_ADDRESS: () => null,
+    RATING_INPUT: () => null,
+    TAGS: () => null,
+    PRODUCT_LIST: () => null,
+    FIXED_PAYMENT: () => null,
+    PAYMENT_INPUT: () => null,
+    DONATION: () => null,
+    APPOINTMENT: () => null,
+    IMAGE_CHOICE: () => null,
+};
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Extracts the form ID from props (either directly or from form object)
+ */
+function extractFormIdFromProps(props) {
+    if ('formId' in props && props.formId) {
+        return props.formId;
+    }
+    if ('form' in props && props.form) {
+        const form = props.form;
+        const formId = form.id ||
+            form._id;
+        if (!formId) {
+            throw new Error('BookingForm: Could not extract form ID from provided form object.');
+        }
+        return formId;
+    }
+    throw new Error('BookingForm: Either formId or form must be provided.');
+}
+/**
+ * Core component that provides booking form data via render props.
+ * Uses BookingFormService to manage form submission state.
+ *
+ * Supports two modes:
+ * 1. Client-side: Provide formId to load the form dynamically
+ * 2. SSR/SSG: Provide a pre-loaded form object
+ *
+ * This component:
+ * - Sets up both FormService and BookingFormService in the same context
+ * - BookingFormService internally accesses FormService for formValues
+ * - Merges user's fieldMap with DEFAULT_BOOKING_FIELD_MAP
+ * - Provides form data and actions via render props
+ * - Form.* components (Form.Fields, Form.Loading, etc.) work because FormService is in context
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Pattern 1: Client-side loading
+ * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form';
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * <CoreBookingForm.Root formId="form-123">
+ *   {({ formId, setFormSubmission, fields }) => (
+ *     <Form.Fields
+ *       fieldMap={fields}
+ *       rowGapClassname="gap-y-4"
+ *       columnGapClassname="gap-x-2"
+ *     />
+ *   )}
+ * </CoreBookingForm.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Pattern 2: SSR with pre-loaded form
+ * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form';
+ * import { loadBookingFormConfig } from '@wix/headless-bookings/services';
+ *
+ * // Server-side: Load form
+ * const { form } = await loadBookingFormConfig('form-123');
+ *
+ * // Client-side: Render with pre-loaded form
+ * <CoreBookingForm.Root form={form}>
+ *   {({ formId, setFormSubmission, fields }) => (
+ *     <Form.Fields fieldMap={fields} />
+ *   )}
+ * </CoreBookingForm.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom field overrides and saving form values
+ * <CoreBookingForm.Root
+ *   formId="form-123"
+ *   fieldMap={{ TEXT_INPUT: MyCustomTextInput }}
+ * >
+ *   {({ fields, formValues, setFormSubmission }) => (
+ *     <>
+ *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <button onClick={() => setFormSubmission(formValues)}>
+ *         Save
+ *       </button>
+ *     </>
+ *   )}
+ * </CoreBookingForm.Root>
+ * ```
+ */
+export function Root(props) {
+    const { additionalMetadata, fieldMap: userFieldMap, children } = props;
+    // Determine if we have a pre-loaded form
+    const hasPreloadedForm = 'form' in props && props.form;
+    const preloadedForm = hasPreloadedForm ? props.form : null;
+    // Extract formId from props
+    const formId = extractFormIdFromProps(props);
+    // Merge user's partial field map with booking defaults
+    const fields = useMemo(() => ({
+        // ...DEFAULT_BOOKING_FIELD_MAP, // TODO: Add default field map
+        ...userFieldMap,
+    }), [userFieldMap]);
+    // Build formServiceConfig for FormService
+    // If we have a pre-loaded form, pass it directly; otherwise pass formId
+    const formServiceConfig = useMemo(() => {
+        if (preloadedForm) {
+            return { form: preloadedForm };
+        }
+        return {
+            formId,
+            namespace: BOOKING_FORM_NAMESPACE,
+            ...(additionalMetadata && { additionalMetadata }),
+        };
+    }, [formId, additionalMetadata, preloadedForm]);
+    // Build bookingFormServiceConfig
+    const bookingFormServiceConfig = useMemo(() => {
+        if (preloadedForm) {
+            return { form: preloadedForm };
+        }
+        return { formId };
+    }, [formId, preloadedForm]);
+    // Both FormService and BookingFormService are added to the same WixServices context
+    // This allows BookingFormService to access FormService via getService internally
+    return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(FormServiceDefinition, FormService, formServiceConfig)
+            .addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), children: _jsx(BookingFormContent, { formId: formId, fields: { ...DEFAULT_BOOKING_FIELD_MAP, ...fields }, children: children }) }));
+}
+/**
+ * Internal component that consumes BookingFormService and provides render props.
+ * Separated to ensure useService is called within the WixServices context.
+ *
+ * Note: BookingFormService internally accesses FormService to get formValues,
+ * so we only need to consume BookingFormService here.
+ */
+function BookingFormContent({ formId, fields, children, }) {
+    const bookingFormService = useService(BookingFormServiceDefinition);
+    const formSubmission = bookingFormService.formSubmission.get();
+    const formValues = bookingFormService.formValues.get();
+    return children({
+        formId,
+        formValues,
+        formSubmission,
+        setFormSubmission: bookingFormService.setFormSubmission,
+        validateFormSubmission: bookingFormService.validateFormSubmission,
+        fields,
+    });
+}

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

@@ -1,4 +1,5 @@
 export * as Booking from './booking/Booking.js';
+export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';

package/cjs/dist/react/index.js

@@ -1,4 +1,5 @@
 export * as Booking from './booking/Booking.js';
+export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';