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

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/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,3 +0,0 @@
-import { BookingStepProps } from '../BookingStep';
-declare function MaterialBookingStep({ step, editable, fetchSlots }: BookingStepProps): JSX.Element;
-export default MaterialBookingStep;

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

@@ -1,362 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useState, useCallback, useEffect, useId } from 'react';
-import { Dialog, DialogTitle, DialogContent, Avatar, CircularProgress, InputAdornment, styled, } from '@mui/material';
-import { alpha, useTheme } from '@mui/material/styles';
-import { format, addDays, startOfDay, isSameDay, isToday } from 'date-fns';
-import { es } from 'date-fns/locale';
-import { PersonSelectionMode } from '../../../@Types/BookingFormStep';
-import { useFormStep } from '../../StepHooks';
-import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { calcStepWidth } from '../../StepFunctions';
-import { StyledTextField } from '../../../Shared/ErkTextField/ErkTextField';
-import ErkButton from '../../../Shared/ErkButton/ErkButton';
-import CalendarIcon from '../../../Icons/CalendarIcon';
-import CloseIcon from '../../../Icons/CloseIcon';
-import ArrowLeftIcon from '../../../Icons/ArrowLeftIcon';
-import ArrowRightIcon from '../../../Icons/ArrowRightIcon';
-import PersonIcon from '../../../Icons/PersonIcon';
-import styles from './MaterialBookingStep.module.css';
-// ---------------------------------------------------------------------------
-// Theme-aware styled components
-// ---------------------------------------------------------------------------
-const SummaryCard = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-    padding: '12px 16px',
-    border: `1px solid ${theme.palette.outline.main}`,
-    borderRadius: 10,
-    backgroundColor: theme.palette.stepBackgroundColor.default,
-}));
-const EmptyReadOnly = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: 10,
-    padding: '14px 16px',
-    border: `1px solid ${theme.palette.outline.main}`,
-    borderRadius: 10,
-    backgroundColor: theme.palette.stepBackgroundColor.default,
-    color: alpha(theme.palette.text.primary, 0.45),
-    fontSize: 14,
-}));
-const PersonCard = styled('div')(({ theme, active }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: 14,
-    padding: '14px 20px',
-    cursor: 'pointer',
-    borderBottom: `1px solid ${alpha(theme.palette.text.primary, 0.06)}`,
-    backgroundColor: active ? alpha(theme.palette.primary.main, 0.05) : 'transparent',
-    transition: 'background 0.15s',
-    '&:last-child': { borderBottom: 'none' },
-    '&:hover': { backgroundColor: alpha(theme.palette.text.primary, 0.03) },
-}));
-const PersonChip = styled('button')(({ theme }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 8,
-    marginTop: 10,
-    padding: '6px 12px 6px 8px',
-    border: `1px solid ${theme.palette.outline.main}`,
-    borderRadius: 10,
-    background: 'none',
-    cursor: 'pointer',
-    fontSize: 13,
-    fontWeight: 500,
-    color: 'inherit',
-    fontFamily: 'inherit',
-    transition: 'border-color 0.2s, background 0.2s',
-    '&:hover': {
-        borderColor: theme.palette.primary.main,
-        background: alpha(theme.palette.primary.main, 0.04),
-    },
-}));
-const DateChipButton = styled('button', {
-    shouldForwardProp: (p) => p !== 'selected' && p !== 'todayHighlight',
-})(({ theme, selected, todayHighlight }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-    minWidth: 0,
-    padding: '8px 4px',
-    border: `1px solid ${selected || todayHighlight ? theme.palette.primary.main : theme.palette.outline.main}`,
-    borderRadius: 10,
-    cursor: 'pointer',
-    background: selected ? theme.palette.primary.main : 'transparent',
-    color: selected ? theme.palette.primary.contrastText ?? '#fff' : 'inherit',
-    fontFamily: 'inherit',
-    transition: 'border-color 0.15s, background 0.15s, color 0.15s',
-    gap: 1,
-    '&:hover:not(:disabled)': {
-        borderColor: theme.palette.primary.main,
-        background: selected ? theme.palette.primary.main : alpha(theme.palette.primary.main, 0.05),
-    },
-    '&:disabled': {
-        opacity: 0.35,
-        cursor: 'default',
-    },
-}));
-const SlotRowButton = styled('button')(({ theme }) => ({
-    padding: '12px 16px',
-    border: `1.5px solid ${theme.palette.outline.main}`,
-    borderRadius: 10,
-    cursor: 'pointer',
-    background: 'transparent',
-    fontSize: 15,
-    fontWeight: 500,
-    textAlign: 'left',
-    color: theme.palette.text.primary,
-    fontFamily: 'inherit',
-    transition: 'border-color 0.15s, background 0.15s, color 0.15s',
-    '&:hover': {
-        borderColor: theme.palette.primary.main,
-        background: alpha(theme.palette.primary.main, 0.04),
-        color: theme.palette.primary.main,
-    },
-}));
-const IconBtn = styled('button')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 6,
-    border: 'none',
-    borderRadius: '50%',
-    background: 'none',
-    cursor: 'pointer',
-    color: 'inherit',
-    opacity: 0.6,
-    flexShrink: 0,
-    transition: 'opacity 0.15s, background 0.15s',
-    '&:hover': {
-        opacity: 1,
-        background: alpha(theme.palette.text.primary, 0.06),
-    },
-}));
-const StripArrowBtn = styled('button')(({ theme }) => ({
-    flexShrink: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 4,
-    border: 'none',
-    borderRadius: '50%',
-    background: 'none',
-    cursor: 'pointer',
-    color: 'inherit',
-    opacity: 0.6,
-    transition: 'opacity 0.15s, background 0.15s',
-    '&:hover:not(:disabled)': {
-        opacity: 1,
-        background: alpha(theme.palette.text.primary, 0.06),
-    },
-    '&:disabled': { opacity: 0.2, cursor: 'default' },
-}));
-const ClearBtn = styled('button')(({ theme }) => ({
-    flexShrink: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 4,
-    border: 'none',
-    borderRadius: '50%',
-    background: 'none',
-    cursor: 'pointer',
-    color: 'inherit',
-    opacity: 0.45,
-    transition: 'opacity 0.15s, background 0.15s',
-    '&:hover': {
-        opacity: 1,
-        background: alpha(theme.palette.text.primary, 0.06),
-    },
-}));
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-function formatDate(date) {
-    return format(date, 'yyyy-MM-dd');
-}
-function formatDisplayDate(date) {
-    return format(date, 'd \'de\' MMMM', { locale: es });
-}
-function initials(name) {
-    return name
-        .split(' ')
-        .slice(0, 2)
-        .map((w) => w[0])
-        .join('')
-        .toUpperCase();
-}
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-function MaterialBookingStep({ step, editable, fetchSlots }) {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { postview } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const theme = useTheme();
-    const triggerId = useId();
-    const isReadOnly = !editable || postview;
-    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
-    const needsPerson = step.personSelectionMode && step.personSelectionMode !== PersonSelectionMode.NONE;
-    const personsOptional = step.personSelectionMode === PersonSelectionMode.OPTIONAL;
-    // ------------------------------------------------------------------
-    // Form state
-    // ------------------------------------------------------------------
-    const { ref, value, onChange, error } = useFormStep(step, {
-        defaultValue: null,
-        rules: {
-            required: step.required ? 'Selecciona una cita' : undefined,
-        },
-    });
-    // ------------------------------------------------------------------
-    // Dialog state
-    // ------------------------------------------------------------------
-    const [open, setOpen] = useState(false);
-    const [phase, setPhase] = useState(needsPerson ? 'person' : 'datetime');
-    const [selectedPersonId, setSelectedPersonId] = useState(undefined);
-    const [selectedPerson, setSelectedPerson] = useState(undefined);
-    const [weekStart, setWeekStart] = useState(() => startOfDay(new Date()));
-    const [selectedDate, setSelectedDate] = useState(() => startOfDay(new Date()));
-    const [slots, setSlots] = useState([]);
-    const [loadingSlots, setLoadingSlots] = useState(false);
-    const STRIP_DAYS = 7;
-    const days = Array.from({ length: STRIP_DAYS }, (_, i) => addDays(weekStart, i));
-    // ------------------------------------------------------------------
-    // Fetch slots when date or person changes
-    // ------------------------------------------------------------------
-    const loadSlots = useCallback(async (date, personId) => {
-        if (!fetchSlots)
-            return;
-        setLoadingSlots(true);
-        setSlots([]);
-        try {
-            const result = await fetchSlots({ personId, date: formatDate(date) });
-            setSlots(result);
-        }
-        catch {
-            setSlots([]);
-        }
-        finally {
-            setLoadingSlots(false);
-        }
-    }, [fetchSlots]);
-    useEffect(() => {
-        if (open && phase === 'datetime') {
-            void loadSlots(selectedDate, selectedPersonId);
-        }
-    }, [open, phase, selectedDate, selectedPersonId, loadSlots]);
-    // ------------------------------------------------------------------
-    // Handlers
-    // ------------------------------------------------------------------
-    const handleOpen = () => {
-        if (isReadOnly)
-            return;
-        setPhase(needsPerson ? 'person' : 'datetime');
-        setSelectedDate(startOfDay(new Date()));
-        setWeekStart(startOfDay(new Date()));
-        setSlots([]);
-        setOpen(true);
-    };
-    const handleClose = () => setOpen(false);
-    const handleSelectPerson = (person) => {
-        setSelectedPersonId(person?.id);
-        setSelectedPerson(person);
-        setPhase('datetime');
-    };
-    const handleSkipPerson = () => {
-        setSelectedPersonId(undefined);
-        setSelectedPerson(undefined);
-        setPhase('datetime');
-    };
-    const handleSelectDate = (date) => {
-        setSelectedDate(date);
-    };
-    const handleSelectSlot = (slot) => {
-        const bookingValue = {
-            type: 'BOOKING_VALUE',
-            slotId: slot.id,
-            date: formatDate(selectedDate),
-            startTime: slot.startTime,
-            endTime: slot.endTime,
-            personId: selectedPersonId,
-            personName: selectedPerson?.name,
-            status: 'PENDING',
-        };
-        onChange(bookingValue);
-        handleClose();
-    };
-    const handleClear = (e) => {
-        e.stopPropagation();
-        onChange(null);
-    };
-    // ------------------------------------------------------------------
-    // Display value for the trigger field
-    // ------------------------------------------------------------------
-    const displayValue = value
-        ? [
-            value.personName,
-            formatDisplayDate(new Date(value.date + 'T00:00:00')),
-            `${value.startTime}–${value.endTime}`,
-        ]
-            .filter(Boolean)
-            .join(' · ')
-        : '';
-    // ------------------------------------------------------------------
-    // Render: Read-only summary
-    // ------------------------------------------------------------------
-    if (isReadOnly) {
-        return (_jsx("div", { className: styles.container, style: { width: widthStyle }, children: value ? (_jsxs(SummaryCard, { children: [_jsx(CalendarIcon, { size: 26, style: { color: theme.palette.primary.main, flexShrink: 0 } }), _jsxs("div", { className: styles.summaryDetails, children: [_jsx("span", { className: styles.summaryLabel, children: step.label }), _jsxs("span", { className: styles.summaryMain, children: [value.personName && (_jsxs("span", { style: { color: theme.palette.primary.main, fontWeight: 600 }, children: [value.personName, " \u00B7", ' '] })), formatDisplayDate(new Date(value.date + 'T00:00:00')), " \u00B7 ", value.startTime, "\u2013", value.endTime] })] })] })) : (_jsxs(EmptyReadOnly, { children: [_jsx(CalendarIcon, { size: 20, style: { flexShrink: 0 } }), _jsx("span", { children: step.label })] })) }));
-    }
-    // ------------------------------------------------------------------
-    // Render: Trigger + Dialog
-    // ------------------------------------------------------------------
-    return (_jsxs("div", { ref: ref, className: styles.container, style: { width: widthStyle }, children: [_jsx(StyledTextField, { id: triggerId, label: step.label, value: displayValue, variant: "outlined", fullWidth: true, required: step.required, error: !!error, errorBorder: !!error, helperText: error?.message ?? step.description ?? ' ', onClick: handleOpen, sx: { '& input': { cursor: 'pointer', caretColor: 'transparent', userSelect: 'none' } }, slotProps: {
-                    inputLabel: { shrink: !!value },
-                    input: {
-                        readOnly: true,
-                        notched: !!value,
-                        endAdornment: (_jsx(InputAdornment, { position: "end", children: value ? (_jsx(ClearBtn, { type: "button", onClick: handleClear, tabIndex: -1, "aria-label": "Limpiar", children: _jsx(CloseIcon, { size: 16 }) })) : (_jsx(CalendarIcon, { size: 20, style: {
-                                    fill: alpha(theme.palette.text.primary, 0.45),
-                                    flexShrink: 0,
-                                } })) })),
-                    },
-                } }), _jsxs(Dialog, { open: open, onClose: handleClose, maxWidth: "sm", fullWidth: true, slotProps: {
-                    paper: {
-                        sx: {
-                            borderRadius: '20px',
-                            height: '580px',
-                            maxHeight: '90vh',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            backgroundColor: theme.palette.background.paper,
-                        },
-                    },
-                }, children: [_jsxs(DialogTitle, { sx: {
-                            padding: '16px 20px 8px',
-                            borderBottom: `1px solid ${alpha(theme.palette.text.primary, 0.08)}`,
-                        }, children: [_jsxs("div", { className: styles.dialogTitleInner, children: [phase === 'datetime' && needsPerson && (_jsx(IconBtn, { type: "button", onClick: () => setPhase('person'), "aria-label": "Volver", children: _jsx(ArrowLeftIcon, { size: 20 }) })), _jsx("span", { className: styles.dialogTitleText, children: phase === 'person' ? 'Seleccionar profesional' : 'Seleccionar fecha y hora' }), _jsx(IconBtn, { type: "button", onClick: handleClose, "aria-label": "Cerrar", children: _jsx(CloseIcon, { size: 18 }) })] }), phase === 'datetime' && needsPerson && (_jsxs(PersonChip, { type: "button", onClick: () => setPhase('person'), children: [selectedPerson ? (_jsxs(_Fragment, { children: [_jsx(Avatar, { src: selectedPerson.avatarUrl, sx: { width: 22, height: 22, fontSize: 10 }, children: initials(selectedPerson.name) }), _jsx("span", { children: selectedPerson.name })] })) : (_jsxs(_Fragment, { children: [_jsx(PersonIcon, { size: 16 }), _jsx("span", { children: "Sin preferencia" })] })), _jsx(ArrowRightIcon, { size: 14, style: { opacity: 0.4 } })] }))] }), _jsxs(DialogContent, { sx: { padding: '0 !important', display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', minHeight: 0 }, children: [phase === 'person' && (_jsxs("div", { className: styles.personList, children: [personsOptional && (_jsxs(PersonCard, { active: !selectedPersonId, onClick: handleSkipPerson, role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && handleSkipPerson(), children: [_jsx(Avatar, { sx: {
-                                                    width: 48,
-                                                    height: 48,
-                                                    bgcolor: alpha(theme.palette.text.primary, 0.08),
-                                                    color: alpha(theme.palette.text.primary, 0.45),
-                                                }, children: _jsx(PersonIcon, { size: 24 }) }), _jsxs("div", { className: styles.personInfo, children: [_jsx("span", { className: styles.personName, children: "Sin preferencia" }), _jsx("span", { className: styles.personRole, children: "M\u00E1xima disponibilidad" })] }), _jsx(ErkButton, { variant: "outlined", size: "small", children: "Seleccionar" })] })), (step.persons ?? []).map((person) => (_jsxs(PersonCard, { active: selectedPersonId === person.id, onClick: () => handleSelectPerson(person), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && handleSelectPerson(person), children: [_jsx(Avatar, { src: person.avatarUrl, sx: {
-                                                    width: 48,
-                                                    height: 48,
-                                                    bgcolor: theme.palette.primary.main,
-                                                    fontSize: 16,
-                                                }, children: initials(person.name) }), _jsxs("div", { className: styles.personInfo, children: [_jsx("span", { className: styles.personName, children: person.name }), person.role && _jsx("span", { className: styles.personRole, children: person.role }), person.description && (_jsx("span", { className: styles.personDesc, children: person.description }))] }), _jsx(ErkButton, { variant: "outlined", size: "small", children: "Seleccionar" })] }, person.id)))] })), phase === 'datetime' && (_jsxs("div", { className: styles.datetimePhase, children: [_jsx("div", { className: styles.dateSectionTitle, children: "Selecciona una fecha" }), _jsxs("div", { className: styles.dateStrip, children: [_jsx(StripArrowBtn, { type: "button", onClick: () => setWeekStart((d) => {
-                                                    const next = addDays(d, -STRIP_DAYS);
-                                                    return next < startOfDay(new Date()) ? startOfDay(new Date()) : next;
-                                                }), disabled: weekStart <= startOfDay(new Date()), children: _jsx(ArrowLeftIcon, { size: 20 }) }), _jsx("div", { className: styles.dateChips, children: days.map((day) => {
-                                                    const isPast = day < startOfDay(new Date());
-                                                    const isSelected = isSameDay(day, selectedDate);
-                                                    return (_jsxs(DateChipButton, { type: "button", disabled: isPast, onClick: () => handleSelectDate(day), selected: isSelected, todayHighlight: isToday(day) && !isSelected, children: [_jsx("span", { className: styles.chipDow, children: format(day, 'EEE', { locale: es }) }), _jsx("span", { className: styles.chipNum, children: format(day, 'd') }), _jsx("span", { className: styles.chipMonth, children: format(day, 'MMM', { locale: es }) })] }, day.toISOString()));
-                                                }) }), _jsx(StripArrowBtn, { type: "button", onClick: () => setWeekStart((d) => addDays(d, STRIP_DAYS)), children: _jsx(ArrowRightIcon, { size: 20 }) })] }), _jsx("div", { className: styles.dateSectionTitle, children: "Escoge una hora" }), _jsxs("div", { className: styles.slotList, children: [loadingSlots && (_jsx("div", { className: styles.slotsLoading, children: _jsx(CircularProgress, { size: 24 }) })), !loadingSlots && slots.length === 0 && (_jsx("div", { className: styles.slotsEmpty, children: "No hay horarios disponibles para este d\u00EDa." })), !loadingSlots &&
-                                                slots
-                                                    .filter((s) => s.available)
-                                                    .map((slot) => (_jsx(SlotRowButton, { type: "button", onClick: () => handleSelectSlot(slot), children: slot.startTime }, slot.id)))] })] }))] })] })] }));
-}
-export default MaterialBookingStep;