@arquimedes.co/eureka-forms 3.0.48-test → 3.0.49-new-steps

package/dist/@Types/NumericFormSteps.js

@@ -0,0 +1,20 @@
+/**
+ * NumericFormSteps types
+ * Cubre el paso relacionado con números y sus múltiples subtipos.
+ */
+// ===========================================================================
+// NUMBER
+// ===========================================================================
+/** Subtipo del paso numérico — discriminante secundario */
+export var NumberStepType;
+(function (NumberStepType) {
+    NumberStepType["INTEGER"] = "INTEGER";
+    NumberStepType["DECIMAL"] = "DECIMAL";
+    NumberStepType["PERCENTAGE"] = "PERCENTAGE";
+    /** Monto de dinero en una divisa (ej: 1500 COP). */
+    NumberStepType["MONEY"] = "MONEY";
+    /** Magnitud con unidad de medida (ej: 5 kg). */
+    NumberStepType["MEASURE"] = "MEASURE";
+    /** Precio por unidad: divisa sobre unidad (ej: 20 USD / hora). */
+    NumberStepType["UNIT_PRICE"] = "UNIT_PRICE";
+})(NumberStepType || (NumberStepType = {}));

package/dist/@Types/PredefinedSelectorFormStep.d.ts

@@ -0,0 +1,51 @@
+/**
+ * DRAFT — PredefinedSelectorFormStep types
+ *
+ * Paso que reemplaza tener que configurar manualmente opciones de selectores
+ * para listas fijas y controladas por Capta (países, ciudades, monedas, etc.).
+ * Las opciones vienen de APIs internas — el formulario no necesita configurarlas.
+ *
+ * También resuelve la cascada Country → State → City via parentStepId.
+ */
+import { GSmartSelect } from './GenericFormSteps';
+export declare enum PredefinedOptionType {
+    /** ISO 3166-1 — lista de países */
+    COUNTRY = "COUNTRY",
+    /**
+     * Departamento / provincia / estado.
+     * Requiere parentStepId apuntando a un step COUNTRY.
+     */
+    STATE = "STATE",
+    /**
+     * Ciudad / municipio.
+     * Requiere parentStepId apuntando a un step STATE (o COUNTRY si no hay STATE).
+     */
+    CITY = "CITY",
+    /** ISO 4217 — monedas (USD, COP, EUR, etc.) */
+    CURRENCY = "CURRENCY",
+    /** BCP 47 — idiomas (es, en, pt, etc.) */
+    LANGUAGE = "LANGUAGE",
+    /** Tipos de canal de comunicación (WhatsApp, Email, Teléfono) */
+    COMMUNICATION_CHANNEL_TYPE = "COMMUNICATION_CHANNEL_TYPE",
+    /** Tipos de documento de identidad por país (CC, NIT, Pasaporte, etc.) */
+    DOCUMENT_TYPE = "DOCUMENT_TYPE",
+    /** Días de la semana */
+    DAY_OF_WEEK = "DAY_OF_WEEK",
+    /** Meses del año */
+    MONTH = "MONTH"
+}
+export interface PredefinedSelectorStep extends GSmartSelect {
+    type: 'PREDEFINED_SELECTOR';
+    predefinedType: PredefinedOptionType;
+    /**
+     * Solo para STATE y CITY: id del step padre que filtra las opciones.
+     *   - COUNTRY step → filtra estados del país seleccionado
+     *   - STATE step   → filtra ciudades del estado seleccionado
+     *
+     * Si no se especifica, se listan todas las opciones sin filtrar.
+     */
+    parentStepId?: string;
+    maxSize?: number;
+    defaultValue?: string;
+}
+export type PredefinedSelectorValue = string;

package/dist/@Types/PredefinedSelectorFormStep.js

@@ -0,0 +1,39 @@
+/**
+ * DRAFT — PredefinedSelectorFormStep types
+ *
+ * Paso que reemplaza tener que configurar manualmente opciones de selectores
+ * para listas fijas y controladas por Capta (países, ciudades, monedas, etc.).
+ * Las opciones vienen de APIs internas — el formulario no necesita configurarlas.
+ *
+ * También resuelve la cascada Country → State → City via parentStepId.
+ */
+// ===========================================================================
+// Tipos predefinidos disponibles
+// ===========================================================================
+export var PredefinedOptionType;
+(function (PredefinedOptionType) {
+    /** ISO 3166-1 — lista de países */
+    PredefinedOptionType["COUNTRY"] = "COUNTRY";
+    /**
+     * Departamento / provincia / estado.
+     * Requiere parentStepId apuntando a un step COUNTRY.
+     */
+    PredefinedOptionType["STATE"] = "STATE";
+    /**
+     * Ciudad / municipio.
+     * Requiere parentStepId apuntando a un step STATE (o COUNTRY si no hay STATE).
+     */
+    PredefinedOptionType["CITY"] = "CITY";
+    /** ISO 4217 — monedas (USD, COP, EUR, etc.) */
+    PredefinedOptionType["CURRENCY"] = "CURRENCY";
+    /** BCP 47 — idiomas (es, en, pt, etc.) */
+    PredefinedOptionType["LANGUAGE"] = "LANGUAGE";
+    /** Tipos de canal de comunicación (WhatsApp, Email, Teléfono) */
+    PredefinedOptionType["COMMUNICATION_CHANNEL_TYPE"] = "COMMUNICATION_CHANNEL_TYPE";
+    /** Tipos de documento de identidad por país (CC, NIT, Pasaporte, etc.) */
+    PredefinedOptionType["DOCUMENT_TYPE"] = "DOCUMENT_TYPE";
+    /** Días de la semana */
+    PredefinedOptionType["DAY_OF_WEEK"] = "DAY_OF_WEEK";
+    /** Meses del año */
+    PredefinedOptionType["MONTH"] = "MONTH";
+})(PredefinedOptionType || (PredefinedOptionType = {}));

package/dist/@Types/StepRef.d.ts

@@ -0,0 +1,135 @@
+/**
+ * DRAFT — Sistema de referencias dinámicas entre steps
+ *
+ * Permite que la configuración de un paso use el valor en tiempo de ejecución
+ * de otro step del mismo formulario, en lugar de un literal fijo.
+ *
+ * Patrón de uso:
+ *
+ *   // Valor fijo definido en la configuración del formulario
+ *   suffix: { type: 'FIXED', value: 'km' }
+ *
+ *   // Valor tomado del step 'step_unidad' cuando el usuario interactúa
+ *   suffix: { type: 'STEP_REF', idStep: 'step_unidad', fallback: 'm' }
+ *
+ * Se puede aplicar a cualquier campo de configuración cuyo valor deba
+ * responder a la selección previa del usuario: sufijos, unidades, monedas,
+ * títulos dinámicos, límites numéricos, etc.
+ */
+/**
+ * Representa un valor estático/literal configurado en tiempo de diseño.
+ * No cambia dinámicamente según las respuestas del usuario.
+ *
+ * @typeParam T - Tipo de dato del valor estático.
+ */
+export interface FixedRef<T> {
+    /**
+     * Indica que el valor es fijo.
+     */
+    type: 'FIXED';
+    /**
+     * El valor estático de tipo T.
+     * @example "km"
+     * @example 50
+     */
+    value: T;
+}
+/**
+ * Referencia dinámica al valor actual de otro step en el mismo formulario.
+ * El runtime del formulario sustituye esta referencia por el valor que el usuario
+ * haya ingresado en el step indicado.
+ *
+ * @typeParam TAllowed - Literal(es) de tipo de step permitidos como origen.
+ *   Por defecto es `string` (cualquier tipo de step). Pasar un literal union
+ *   permite al Form Builder filtrar la lista de steps disponibles en la UI.
+ *
+ * @example
+ * ```ts
+ * // Referencia a cualquier tipo de step
+ * const ref: StepRef = {
+ *   type: 'STEP_REF',
+ *   idStep: 'step_unidad_medida',
+ *   fallback: 'm'
+ * }
+ *
+ * // Referencia restringida únicamente a pasos de tipo LOCATION
+ * const refLocation: StepRef<'LOCATION'> = {
+ *   type: 'STEP_REF',
+ *   idStep: 'step_destino_cliente',
+ *   allowedStepTypes: ['LOCATION']
+ * }
+ * ```
+ */
+export interface StepRef<TAllowed extends string = string> {
+    /**
+     * Indica que el valor se toma dinámicamente de otro paso.
+     */
+    type: 'STEP_REF';
+    /**
+     * ID del paso origen en el formulario del cual se leerá el valor en tiempo de ejecución.
+     * @example "step_ubicacion_cliente"
+     */
+    idStep: string;
+    /**
+     * Valor de respaldo (fallback) en formato de texto a utilizar mientras el paso referenciado
+     * no contenga ningún valor (ej: porque el usuario aún no llega a ese paso).
+     * Si se omite, el campo referenciador se comportará como vacío o sin unidad.
+     *
+     * @example "m"
+     */
+    fallback?: string;
+    /**
+     * Lista de tipos de pasos permitidos para esta referencia.
+     * Ayuda al Form Builder a filtrar la interfaz de selección de campos y es
+     * validada por el backend al guardar la configuración del formulario.
+     * Si no se define, se permite referenciar cualquier tipo de paso.
+     *
+     * @example ["LOCATION"]
+     * @example ["PREDEFINED_SELECTOR", "CHECKBOX"]
+     */
+    allowedStepTypes?: TAllowed[];
+}
+/**
+ * Tipo genérico para campos que admiten tanto un valor estático como una referencia dinámica.
+ *
+ * @typeParam T - Tipo del valor cuando es FIXED (ej: `string`, `number`, `boolean`).
+ * @typeParam TAllowed - Tipos de paso de origen permitidos si es STEP_REF.
+ *
+ * @example
+ * ```ts
+ * // Un sufijo de texto dinámico:
+ * const sufijo: DynamicRef<string> = { type: 'FIXED', value: 'km' };
+ *
+ * // Una coordenada geográfica que debe venir de un paso de mapa:
+ * const origen: DynamicRef<LocationCoords, 'LOCATION'> = {
+ *   type: 'STEP_REF',
+ *   idStep: 'step_mapa_inicio',
+ *   allowedStepTypes: ['LOCATION']
+ * };
+ * ```
+ */
+export type DynamicRef<T, TAllowed extends string = string> = FixedRef<T> | StepRef<TAllowed>;
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo FIXED.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isFixedRef(miRef)) {
+ *   console.log("El valor es:", miRef.value);
+ * }
+ * ```
+ */
+export declare function isFixedRef<T, TAllowed extends string = string>(ref: DynamicRef<T, TAllowed>): ref is FixedRef<T>;
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo STEP_REF.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isStepRef(miRef)) {
+ *   console.log("Apunta al step:", miRef.idStep);
+ * }
+ * ```
+ */
+export declare function isStepRef<T, TAllowed extends string = string>(ref: DynamicRef<T, TAllowed>): ref is StepRef<TAllowed>;

package/dist/@Types/StepRef.js

@@ -0,0 +1,49 @@
+/**
+ * DRAFT — Sistema de referencias dinámicas entre steps
+ *
+ * Permite que la configuración de un paso use el valor en tiempo de ejecución
+ * de otro step del mismo formulario, en lugar de un literal fijo.
+ *
+ * Patrón de uso:
+ *
+ *   // Valor fijo definido en la configuración del formulario
+ *   suffix: { type: 'FIXED', value: 'km' }
+ *
+ *   // Valor tomado del step 'step_unidad' cuando el usuario interactúa
+ *   suffix: { type: 'STEP_REF', idStep: 'step_unidad', fallback: 'm' }
+ *
+ * Se puede aplicar a cualquier campo de configuración cuyo valor deba
+ * responder a la selección previa del usuario: sufijos, unidades, monedas,
+ * títulos dinámicos, límites numéricos, etc.
+ */
+// ---------------------------------------------------------------------------
+// Helpers de narrowing
+// ---------------------------------------------------------------------------
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo FIXED.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isFixedRef(miRef)) {
+ *   console.log("El valor es:", miRef.value);
+ * }
+ * ```
+ */
+export function isFixedRef(ref) {
+    return ref.type === 'FIXED';
+}
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo STEP_REF.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isStepRef(miRef)) {
+ *   console.log("Apunta al step:", miRef.idStep);
+ * }
+ * ```
+ */
+export function isStepRef(ref) {
+    return ref.type === 'STEP_REF';
+}

package/dist/App/App.js

@@ -13,7 +13,7 @@ import { nanoid } from '@reduxjs/toolkit';
 import { IdFormContext } from '../Contexts/FormContext';
 import { StoreContext } from '../Utils/StoreContext';
 function AppComponent({ formData, valuesData, ...props }) {
-    const [idForm] = React.useState(nanoid(20));
+    const [idForm] = React.useState(nanoid(6));
     return (_jsx(IdFormContext.Provider, { value: idForm, children: _jsx(Provider, { store: store, context: StoreContext, children: _jsx(App, { formData: formData, valuesData: valuesData, ...props }) }) }));
 }
 export default AppComponent;

package/dist/App/AppFunctions.js

@@ -14,11 +14,11 @@ export const calcValuesStore = async (orgInfo, form, originalValues = {}, postvi
     await Promise.all(Object.keys(originalValues).map(async (idValue) => {
         const step = form.steps[idValue];
         if (step) {
-            if (!values.sections[step.idSection])
-                values.sections[step.idSection] = {};
             const value = await mapOriginalValue(orgInfo, step, originalValues[step.id], values, form);
             if (value !== undefined) {
                 if (!form.hiddenSteps?.includes(step.id)) {
+                    if (!values.sections[step.idSection])
+                        values.sections[step.idSection] = {};
                     values.sections[step.idSection][step.id] = value;
                 }
                 else {
@@ -163,7 +163,7 @@ export const mapOriginalValue = async (orgInfo, step, value, values, form, path
         }
         case FormStepTypes.ENTITYVALUEPICKER: {
             if (!value._id) {
-                const params = typeof value !== 'string' ? new URLSearchParams(value) : new URLSearchParams();
+                const params = new URLSearchParams(value);
                 const url = `${orgInfo.idOrganization}/entities/${step.idEntity}?${params.toString()}`;
                 const entityValues = (await widgetInstance.get(url)).data;
                 if (entityValues.length === 1) {
@@ -172,11 +172,6 @@ export const mapOriginalValue = async (orgInfo, step, value, values, form, path
                         return undefined;
                     return entityValues[0];
                 }
-                if (typeof value === 'string') {
-                    if (step.options[value]?.type === EntityValueOptionTypes.HIDE)
-                        return undefined;
-                    return entityValues.find((ev) => ev._id === value);
-                }
                 return null;
             }
             return value;

package/dist/App/AppHooks.js

@@ -4,7 +4,6 @@ import { fetchOrganization } from '../Services/OrganizationService';
 import { fetchForm } from '../Services/FormService';
 import { calcCbrForm } from '../Utils/CBRFunctions';
 import { calcInitialSections, calcValuesStore } from './AppFunctions';
-import { jwtDecode } from 'jwt-decode';
 import { useAppDispatch } from '../hooks';
 import InternalFormStyle from '../constants/InternalFormStyle';
 import { calcDependencies } from '../Form/FormFunctions';
@@ -40,7 +39,6 @@ export const useSetupApp = (isEmbedded, props) => {
     const loadData = async () => {
         let idOrganization = others.idOrganization;
         let organization = null;
-        let user = null;
         let form = formData ?? null;
         if (form && preview && form.isStandAlone) {
             organization = await loadOrg();
@@ -92,24 +90,7 @@ export const useSetupApp = (isEmbedded, props) => {
             return;
         const dependencies = {};
         const values = await calcValuesStore({ idOrganization, countryCode }, form, valuesData, postview, customSteps);
-        if (form.hasLogin && !internal && !preview) {
-            const token = localStorage.getItem('token');
-            if (token) {
-                try {
-                    user = jwtDecode(token);
-                    if (user && Date.now() / 1000 >= user.exp) {
-                        user = null;
-                        localStorage.removeItem('token');
-                    }
-                }
-                catch {
-                    user = null;
-                    localStorage.removeItem('token');
-                }
-            }
-        }
         dispatch(reset({
-            user,
             apiKey,
             formStyle: internal
                 ? InternalFormStyle
@@ -123,7 +104,7 @@ export const useSetupApp = (isEmbedded, props) => {
             },
             internal: !!internal,
             idOrganization,
-            idCurrentAgent: user?._id ?? idCurrentAgent,
+            idCurrentAgent,
             preview: !!preview,
             partial: !!partial,
             postview: !!postview,

package/dist/Form/Form.js

@@ -17,10 +17,9 @@ import { useWidthStats } from './FormHooks';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import FormContext, { IdFormContext } from '../Contexts/FormContext';
 import { getAppState } from '../Utils/store';
-import LoginPage from '../Login/LoginPage';
 import { focusStep } from '../States/SiteSlice';
 function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, customConfirmation, }) {
-    const { idOrganization, internal, postview, user } = useAppSelector((state) => state.global);
+    const { idOrganization, internal, postview } = useAppSelector((state) => state.global);
     const formMethods = useForm({
         mode: 'onTouched',
         shouldFocusError: true,
@@ -101,11 +100,8 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
             }, children: _jsx("div", { className: styles.widgetFormContainer, ref: containerRef, children: renderForm() }) }));
     }
     else {
-        if (user === null && form.hasLogin) {
-            return (_jsx("div", { className: styles.loginContainer, children: _jsx(LoginPage, { form: form }) }));
-        }
         //Standalone cant have widget
-        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { apiKey: form.apiKey, logo: branding?.images.logoUrl, color: branding?.colors?.navbarColor ?? branding?.colors?.primaryColor }), _jsx("div", { className: styles.standAloneFormContainer, ref: containerRef, style: {
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: branding?.images.logoUrl, color: branding?.colors?.navbarColor ?? branding?.colors?.primaryColor }), _jsx("div", { className: styles.standAloneFormContainer, ref: containerRef, style: {
                         background: form.style?.standAloneBackgroundColor ?? '#ffffff',
                     }, children: _jsx("div", { className: isResponsive ? styles.fullScreenStandAloneForm : styles.standAloneFormCard, style: {
                             backgroundColor: form.style?.backgroundColor ?? InternalFormStyle.backgroundColor,

package/dist/Form/Form.module.css

@@ -1,48 +1,39 @@
-.standAloneFormContainer {
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    min-height: calc(100vh - 60px);
-    display: flex;
-    overflow-x: hidden;
-}
-
-.fullScreenStandAloneForm {
-    width: 100%;
-    padding: 20px;
-    min-height: 100%;
-    overflow: hidden;
-}
-
-.loginContainer {
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    min-height: 100vh;
-    display: flex;
-    overflow-x: hidden;
-}
-
-.standAloneFormCard {
-    -webkit-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
-    box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
-    margin-top: 30px;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
-    width: fit-content;
-    border-radius: 15px;
-    padding: 20px;
-    margin-bottom: 30px;
-}
-
-.widgetFormContainer {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
-    width: fit-content;
-    max-width: 100%;
-}
+.standAloneFormContainer {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    min-height: calc(100vh - 60px);
+    display: flex;
+    overflow-x: hidden;
+}
+
+.fullScreenStandAloneForm {
+    width: 100%;
+    padding: 20px;
+    min-height: 100%;
+    overflow: hidden;
+}
+
+.standAloneFormCard {
+    -webkit-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
+    width: fit-content;
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 30px;
+}
+
+.widgetFormContainer {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
+    width: fit-content;
+    max-width: 100%;
+}

package/dist/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.js

@@ -3,12 +3,13 @@ import React, { useContext, useMemo } from 'react';
 import FormStepTypes, { ApiSelectorOptionTypes, ApiSelectorParamTypes } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';
 import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
+import widgetInstance from '../../../Utils/AxiosWidget';
+import axiosInstance from '../../../Utils/AxiosAPI';
 import InputIcon from '../../../Shared/InputIcon/InputIcon';
 import FormContext from '../../../Contexts/FormContext';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import { recursivelyCalcConditionSteps } from '../../StepHooks';
 import { evaluateCondition } from '../../StepFunctions';
-import { fetchApiSelectorOptionsThrottled } from '../../../Services/ApiSelectorService';
 function ApiSelectorComponent({ step, editable, ...others }) {
     const form = useContext(FormContext);
     function calcOptionId(option) {
@@ -33,9 +34,6 @@ function ApiSelectorComponent({ step, editable, ...others }) {
                         }
                         else if (typeof currentValue === 'string')
                             params.set(filter.key, currentValue);
-                        else if (step.url.includes('capta.co') && currentValue._id) {
-                            params.set(filter.key, currentValue._id);
-                        }
                         else
                             params.set(filter.key, currentValue.label ?? currentValue.id);
                     }
@@ -56,10 +54,8 @@ function ApiSelectorComponent({ step, editable, ...others }) {
         if (!step.url.includes('?'))
             url += '?';
         url += params.toString();
-        // Use the throttled fetch function that limits concurrent requests per URL
-        const response = await fetchApiSelectorOptionsThrottled(url, idOrganization);
-        return response.filter((option) => calcOptionId(option) !== undefined &&
-            step.options[calcOptionId(option)]?.type !== ApiSelectorOptionTypes.HIDE);
+        const response = await (idOrganization ? widgetInstance.get(url) : axiosInstance.get(url));
+        return response.data.filter((option) => calcOptionId(option) && step.options[calcOptionId(option)]?.type !== ApiSelectorOptionTypes.HIDE);
     }, [form]);
     return (_jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { ...others, editable: editable, step: step, IconComponent: () => (step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined), getOptions: getApiOptions, getOptionSelected: (option, value) => calcOptionId(option) === calcOptionId(value), calcDepError: (steps) => {
                 for (const step of steps) {

package/dist/FormSteps/BookingStep/BookingStep.d.ts

@@ -0,0 +1,17 @@
+import { BookingStep } from '../../@Types/BookingFormStep';
+import { BookingSlot } from '../../@Types/BookingFormStep';
+import { StepProps } from '../Step';
+export interface BookingStepProps extends StepProps {
+    step: BookingStep;
+    /**
+     * Callback to fetch available slots for a given person + date.
+     * The form host wires this to their availability API.
+     * If omitted, the component shows an empty slot list.
+     */
+    fetchSlots?: (params: {
+        personId?: string;
+        date: string;
+    }) => Promise<BookingSlot[]>;
+}
+declare function BookingStepComponent(props: BookingStepProps): JSX.Element;
+export default BookingStepComponent;

package/dist/FormSteps/BookingStep/BookingStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialBookingStep from './MaterialBookingStep/MaterialBookingStep';
+import { useAppSelector } from '../../hooks';
+function BookingStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialBookingStep, { ...props });
+        }
+    }
+}
+export default BookingStepComponent;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts

@@ -0,0 +1,3 @@
+import { BookingStepProps } from '../BookingStep';
+declare function MaterialBookingStep({ step, editable, fetchSlots }: BookingStepProps): JSX.Element;
+export default MaterialBookingStep;