@arquimedes.co/eureka-forms 3.0.57-new-steps → 3.0.57

package/dist/@Types/PredefinedSelectorFormStep.js

@@ -1,39 +0,0 @@
-/**
- * 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

@@ -1,135 +0,0 @@
-/**
- * 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

@@ -1,49 +0,0 @@
-/**
- * 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/FormSteps/AvailabilityStep/AvailabilityStep.d.ts

@@ -1,7 +0,0 @@
-import { AvailabilityStep } from '../../@Types/CalendarFormStep';
-import { StepProps } from '../Step';
-export interface AvailabilityStepProps extends StepProps {
-    step: AvailabilityStep;
-}
-declare function AvailabilityStepComponent(props: AvailabilityStepProps): JSX.Element;
-export default AvailabilityStepComponent;

package/dist/FormSteps/AvailabilityStep/AvailabilityStep.js

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

package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.d.ts

@@ -1,8 +0,0 @@
-import { AvailabilityStepProps } from '../AvailabilityStep';
-/**
- * Conector del paso AVAILABILITY: pregunta de disponibilidad compacta
- * (grid semanal día × hora). El calendario completo vive en el admin; el form
- * solo captura ventanas disponibles que un paso BOOKING puede consumir.
- */
-declare function MaterialAvailabilityStep({ step, editable }: AvailabilityStepProps): JSX.Element;
-export default MaterialAvailabilityStep;

package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { useFormStep } from '../../StepHooks';
-import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { calcStepWidth } from '../../StepFunctions';
-import ErkAvailabilityPicker from '../../../Shared/ErkAvailabilityPicker/ErkAvailabilityPicker';
-/**
- * Conector del paso AVAILABILITY: pregunta de disponibilidad compacta
- * (grid semanal día × hora). El calendario completo vive en el admin; el form
- * solo captura ventanas disponibles que un paso BOOKING puede consumir.
- */
-function MaterialAvailabilityStep({ step, editable }) {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { postview, formStyle } = useAppSelector((state) => state.global);
-    const formCtx = useContext(FormContext);
-    const isReadOnly = !editable || postview;
-    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
-    const cssVars = {
-        width: widthStyle,
-        '--eureka-outline': formStyle.outlineColor,
-        '--eureka-primary': formStyle.primaryColor,
-        '--eureka-text': formStyle.textColor,
-        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
-    };
-    const { ref, value, onChange, error } = useFormStep(step, {
-        defaultValue: null,
-        rules: { required: step.required ? 'Marca tu disponibilidad' : undefined },
-    });
-    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkAvailabilityPicker, { value: value, onChange: onChange, label: step.label, description: step.description, minTime: step.minTime, maxTime: step.maxTime, showWeekends: step.showWeekends, timezone: step.timezone, readOnly: isReadOnly, error: error?.message }) }));
-}
-export default MaterialAvailabilityStep;

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

@@ -1,17 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,7 +0,0 @@
-import { BookingStepProps } from '../BookingStep';
-/**
- * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
- * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
- */
-declare function MaterialBookingStep({ step, editable, fetchSlots }: BookingStepProps): JSX.Element;
-export default MaterialBookingStep;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { useFormStep } from '../../StepHooks';
-import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { calcStepWidth } from '../../StepFunctions';
-import ErkBookingPicker from '../../../Shared/ErkBookingPicker/ErkBookingPicker';
-/**
- * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
- * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
- */
-function MaterialBookingStep({ step, editable, fetchSlots }) {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { postview, formStyle } = useAppSelector((state) => state.global);
-    const formCtx = useContext(FormContext);
-    const isReadOnly = !editable || postview;
-    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
-    const cssVars = {
-        width: widthStyle,
-        '--eureka-outline': formStyle.outlineColor,
-        '--eureka-primary': formStyle.primaryColor,
-        '--eureka-text': formStyle.textColor,
-        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
-        '--booking-accent': formStyle.secondaryContrastColor,
-    };
-    const { ref, value, onChange, error } = useFormStep(step, {
-        defaultValue: null,
-        rules: { required: step.required ? 'Selecciona una cita' : undefined },
-    });
-    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: onChange, label: step.label, description: step.description, durationMinutes: step.durationMinutes, bufferMinutes: step.bufferMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: step.personSelectionMode, persons: step.persons, collectContact: step.collectContact, fetchSlots: fetchSlots, readOnly: isReadOnly, error: error?.message }) }));
-}
-export default MaterialBookingStep;

package/dist/FormSteps/LocationStep/LocationStep.d.ts

@@ -1,10 +0,0 @@
-import { LocationStep } from '../../@Types/LocationFormStep';
-import { StepProps } from '../Step';
-export interface LocationStepProps extends StepProps {
-    /** The LocationStep to display */
-    step: LocationStep;
-    /** The icon to display */
-    IconComponent?: React.ElementType;
-}
-declare function LocationStepComponent(props: LocationStepProps): JSX.Element;
-export default LocationStepComponent;

package/dist/FormSteps/LocationStep/LocationStep.js

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

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.d.ts

@@ -1,3 +0,0 @@
-import { LocationStepProps } from '../LocationStep';
-declare function MaterialLocationStep({ step, editable }: LocationStepProps): JSX.Element;
-export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { AddressFieldMode, LocationInputMode } from '../../../@Types/LocationFormStep';
-import { useFormStep } from '../../StepHooks';
-import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { calcStepWidth } from '../../StepFunctions';
-import ErkLocationField from '../../../Shared/ErkLocationField/ErkLocationField';
-import { fieldConfig } from '../../../Shared/ErkLocationField/addressFields';
-import { validateRestrictions } from '../../../Shared/ErkLocationField/locationRestrictions';
-import styles from './MaterialLocationStep.module.css';
-function MaterialLocationStep({ step, editable }) {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { postview, formStyle } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const isReadOnly = !editable || postview;
-    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
-    const { ref, value, onChange, error } = useFormStep(step, {
-        defaultValue: step.defaultValue ?? null,
-        rules: {
-            required: step.required ? 'La ubicación es obligatoria' : undefined,
-            validate: (val) => {
-                if (!val)
-                    return step.required ? 'La ubicación es obligatoria' : true;
-                if (val.source === LocationInputMode.MANUAL) {
-                    // Un campo es obligatorio en manual solo si no está omitido (FIXED lo llena solo).
-                    const detail = val.addressDetail;
-                    const isRequired = (key) => fieldConfig(step.addressFields, key).mode !== AddressFieldMode.OMIT;
-                    if (step.required && isRequired('street') && !detail?.street)
-                        return 'Por favor completa la calle en el formulario manual.';
-                    if (step.required && isRequired('city') && !detail?.city)
-                        return 'Por favor completa la ciudad en el formulario manual.';
-                    if (step.required && isRequired('country') && !detail?.country)
-                        return 'Por favor completa el país en el formulario manual.';
-                    return true;
-                }
-                if (val.latitude === undefined || val.longitude === undefined) {
-                    return step.required ? 'Coordenadas geográficas no capturadas.' : true;
-                }
-                // Restricciones geográficas (radio / geofence).
-                return validateRestrictions(val.latitude, val.longitude, step.restrictions) ?? true;
-            },
-        },
-    });
-    return (_jsxs("div", { className: styles.container, style: {
-            width: widthStyle,
-            '--eureka-outline': formStyle.outlineColor,
-            '--eureka-primary': formStyle.primaryColor,
-            '--eureka-text': formStyle.textColor,
-            '--eureka-error': formStyle.errorColor,
-            '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
-        }, children: [step.label && _jsxs("div", { className: styles.label, children: [step.label, step.required && _jsx("span", { className: styles.required, children: " *" })] }), _jsx(ErkLocationField, { value: value, onChange: onChange, allowedModes: step.allowedModes, defaultMode: step.defaultMode, addressFields: step.addressFields, helperText: error?.message ?? step.description, required: step.required, error: !!error, readOnly: isReadOnly, inputRef: ref })] }));
-}
-export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.module.css

@@ -1,18 +0,0 @@
-.container {
-    max-width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 5px 10px 0;
-    box-sizing: border-box;
-}
-
-.label {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--eureka-text, #333);
-}
-
-.required {
-    color: var(--eureka-error, #e53935);
-}

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.d.ts

@@ -1,3 +0,0 @@
-import { NumberStepProps } from '../NumberStep';
-declare function MaterialNumberStep({ step, editable }: NumberStepProps): JSX.Element;
-export default MaterialNumberStep;

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.js

@@ -1,168 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState, useEffect } from 'react';
-import { NumberStepType, } from '../../../@Types/NumericFormSteps';
-import { useFormStep } from '../../StepHooks';
-import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { calcStepWidth } from '../../StepFunctions';
-import ErkNumberField from '../../../Shared/ErkNumberField/ErkNumberField';
-import ErkSelect from '../../../Shared/ErkSelect/ErkSelect';
-import ErkMenuItem from '../../../Shared/ErkMenuItem';
-import styles from './MaterialNumberStep.module.css';
-const DEFAULT_CURRENCIES = ['COP', 'USD', 'EUR', 'MXN', 'CLP', 'BRL'];
-const DEFAULT_UNITS = ['unidades', 'kg', 'g', 'm', 'cm', 'l', 'ml', 'hrs', 'mes', 'año'];
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-function getNumericValue(value) {
-    if (value === null || value === undefined)
-        return null;
-    if (typeof value === 'number')
-        return value;
-    return value.value;
-}
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-function MaterialNumberStep({ step, editable }) {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { postview, formStyle } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const isReadOnly = !editable || postview;
-    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
-    const isComposite = step.numberType === NumberStepType.MONEY ||
-        step.numberType === NumberStepType.MEASURE ||
-        step.numberType === NumberStepType.UNIT_PRICE;
-    // Narrowed views — only used after the corresponding numberType check
-    const asMoney = step;
-    const asMeasure = step;
-    const asUnitPrice = step;
-    const { ref, value, onChange, error } = useFormStep(step, {
-        defaultValue: step.defaultValue ?? null,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-            validate: (val) => {
-                if (!step.required && (val === null || val === undefined || val === ''))
-                    return true;
-                if (step.required && (val === null || val === undefined || val === ''))
-                    return 'Este campo es obligatorio';
-                const numVal = getNumericValue(val);
-                if (numVal === null)
-                    return 'Formato numérico inválido';
-                if (step.min !== undefined && numVal < step.min)
-                    return `El valor mínimo es ${step.min}`;
-                if (step.max !== undefined && numVal > step.max)
-                    return `El valor máximo es ${step.max}`;
-                return true;
-            },
-        },
-    });
-    // Currency/unit selectors
-    const [selectedCurrency, setSelectedCurrency] = useState(() => {
-        const v = value;
-        return v?.currency ?? asMoney.currency ?? asUnitPrice.currency ?? 'COP';
-    });
-    const [selectedUnit, setSelectedUnit] = useState(() => {
-        const v = value;
-        return v?.unit ?? asMeasure.unit ?? asUnitPrice.unit ?? 'unidades';
-    });
-    // Sync when value changes externally
-    useEffect(() => {
-        if (value && typeof value === 'object') {
-            if ('currency' in value && value.currency && value.currency !== selectedCurrency) {
-                void Promise.resolve().then(() => setSelectedCurrency(value.currency));
-            }
-            if ('unit' in value && value.unit && value.unit !== selectedUnit) {
-                void Promise.resolve().then(() => setSelectedUnit(value.unit));
-            }
-        }
-    }, [value, selectedCurrency, selectedUnit]);
-    // ---------------------------------------------------------------------------
-    // Handlers: wrap ErkNumberField's (number | null) into the step value shape
-    // ---------------------------------------------------------------------------
-    const handleNumberChange = (num) => {
-        if (num === null) {
-            onChange(null);
-            return;
-        }
-        if (step.numberType === NumberStepType.MONEY) {
-            onChange({ value: num, currency: selectedCurrency });
-        }
-        else if (step.numberType === NumberStepType.MEASURE) {
-            onChange({ value: num, unit: selectedUnit });
-        }
-        else if (step.numberType === NumberStepType.UNIT_PRICE) {
-            onChange({ value: num, currency: selectedCurrency, unit: selectedUnit });
-        }
-        else {
-            onChange(num);
-        }
-    };
-    const handleCurrencyChange = (curr) => {
-        const next = curr ?? 'USD';
-        setSelectedCurrency(next);
-        const num = getNumericValue(value);
-        if (num !== null) {
-            onChange(step.numberType === NumberStepType.UNIT_PRICE
-                ? { value: num, currency: next, unit: selectedUnit }
-                : { value: num, currency: next });
-        }
-    };
-    const handleUnitChange = (u) => {
-        const next = u ?? 'unidades';
-        setSelectedUnit(next);
-        const num = getNumericValue(value);
-        if (num !== null) {
-            onChange(step.numberType === NumberStepType.UNIT_PRICE
-                ? { value: num, currency: selectedCurrency, unit: next }
-                : { value: num, unit: next });
-        }
-    };
-    // ---------------------------------------------------------------------------
-    // Static suffix text shown inside ErkNumberField
-    // ---------------------------------------------------------------------------
-    const staticSuffix = () => {
-        if (step.numberType === NumberStepType.PERCENTAGE)
-            return '%';
-        if (step.numberType === NumberStepType.MONEY && !asMoney.allowCurrencyChange)
-            return asMoney.currency ?? 'USD';
-        if (step.numberType === NumberStepType.MEASURE && !asMeasure.allowUnitChange)
-            return asMeasure.unit ?? 'unidades';
-        // UNIT_PRICE renders its adornment fully inside the field only when neither part is editable.
-        if (step.numberType === NumberStepType.UNIT_PRICE && !asUnitPrice.allowCurrencyChange && !asUnitPrice.allowUnitChange)
-            return `${asUnitPrice.currency ?? 'USD'} / ${asUnitPrice.unit ?? 'unidades'}`;
-        if (!isComposite && step.suffix)
-            return step.suffix;
-        return undefined;
-    };
-    // ---------------------------------------------------------------------------
-    // Resolved selector lists
-    // ---------------------------------------------------------------------------
-    const currenciesList = step.numberType === NumberStepType.MONEY || step.numberType === NumberStepType.UNIT_PRICE
-        ? (step.availableCurrencies ?? DEFAULT_CURRENCIES)
-        : [];
-    const unitsList = step.numberType === NumberStepType.MEASURE || step.numberType === NumberStepType.UNIT_PRICE
-        ? (step.availableUnits ?? DEFAULT_UNITS)
-        : [];
-    const isMoneyDynamic = step.numberType === NumberStepType.MONEY && asMoney.allowCurrencyChange;
-    const isMeasureDynamic = step.numberType === NumberStepType.MEASURE && asMeasure.allowUnitChange;
-    // UNIT_PRICE has two independent toggles: currency and unit can each be fixed or selectable.
-    const isUnitPriceCurrencyDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowCurrencyChange;
-    const isUnitPriceUnitDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowUnitChange;
-    const isUnitPriceDynamic = isUnitPriceCurrencyDynamic || isUnitPriceUnitDynamic;
-    // ---------------------------------------------------------------------------
-    // Shared CSS vars
-    // ---------------------------------------------------------------------------
-    const cssVars = {
-        width: widthStyle,
-        '--eureka-outline': formStyle.outlineColor,
-        '--eureka-primary': formStyle.primaryColor,
-        '--eureka-text': formStyle.textColor,
-        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
-    };
-    // ---------------------------------------------------------------------------
-    // Read-only view
-    // ---------------------------------------------------------------------------
-    return (_jsx("div", { className: styles.container, style: cssVars, children: _jsxs("div", { className: styles.inputRow, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(ErkNumberField, { label: step.label, value: getNumericValue(value), onChange: handleNumberChange, error: !!error, errorBorder: true, required: step.required, helperText: error?.message ?? step.description ?? undefined, inputRef: ref, min: step.min, max: step.max, decimals: step.numberType === NumberStepType.INTEGER ? 0 : (step.decimals ?? 2), suffix: staticSuffix(), readOnly: isReadOnly, spinner: step.spinner, step: step.step, placeholder: step.placeholder }) }), isMoneyDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })), isMeasureDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })), isUnitPriceDynamic && (_jsxs(_Fragment, { children: [isUnitPriceCurrencyDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.currency ?? 'USD' })), _jsx("span", { className: styles.dividerSlash, children: "/" }), isUnitPriceUnitDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.unit ?? 'unidades' }))] }))] }) }));
-}
-export default MaterialNumberStep;