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

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.module.css

@@ -1,174 +0,0 @@
-/* =========================================================================
-   MaterialBookingStep — layout & typography only.
-   All colors use MUI theme via styled() in the .tsx file.
-   ========================================================================= */
-
-.container {
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    padding-bottom: 0;
-    padding-top: 5px;
-    box-sizing: border-box;
-    max-width: 100%;
-}
-
-/* =========================================================================
-   Read-only summary
-   ========================================================================= */
-
-.summaryDetails {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.summaryLabel {
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    opacity: 0.5;
-    font-weight: 600;
-}
-
-.summaryMain {
-    font-size: 14px;
-    font-weight: 500;
-}
-
-/* =========================================================================
-   Dialog header
-   ========================================================================= */
-
-.dialogTitleInner {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.dialogTitleText {
-    flex: 1;
-    font-weight: 600;
-    font-size: 17px;
-}
-
-/* =========================================================================
-   Person phase
-   ========================================================================= */
-
-.personList {
-    display: flex;
-    flex-direction: column;
-    padding: 8px 0;
-    flex: 1;
-    overflow-y: auto;
-    min-height: 0;
-}
-
-.personInfo {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex: 1;
-    min-width: 0;
-}
-
-.personName {
-    font-weight: 600;
-    font-size: 14px;
-}
-
-.personRole {
-    font-size: 12px;
-    opacity: 0.55;
-}
-
-.personDesc {
-    font-size: 12px;
-    opacity: 0.45;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-/* =========================================================================
-   Datetime phase
-   ========================================================================= */
-
-.datetimePhase {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-    min-height: 0;
-}
-
-.dateSectionTitle {
-    padding: 14px 20px 8px;
-    font-weight: 600;
-    font-size: 14px;
-}
-
-.dateStrip {
-    display: flex;
-    align-items: center;
-    padding: 0 8px 8px;
-    gap: 4px;
-}
-
-.dateChips {
-    display: flex;
-    flex: 1;
-    gap: 4px;
-    overflow-x: auto;
-    scrollbar-width: none;
-}
-
-.dateChips::-webkit-scrollbar {
-    display: none;
-}
-
-.chipDow {
-    font-size: 11px;
-    text-transform: lowercase;
-    opacity: 0.75;
-}
-
-.chipNum {
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 1.1;
-}
-
-.chipMonth {
-    font-size: 10px;
-    opacity: 0.65;
-    text-transform: lowercase;
-}
-
-/* =========================================================================
-   Slot list
-   ========================================================================= */
-
-.slotList {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 0 16px 20px;
-    flex: 1;
-    overflow-y: auto;
-    min-height: 0;
-}
-
-.slotsLoading {
-    display: flex;
-    justify-content: center;
-    padding: 24px 0;
-}
-
-.slotsEmpty {
-    padding: 20px 4px;
-    font-size: 13px;
-    opacity: 0.5;
-    text-align: center;
-}

package/dist/FormSteps/CalendarStep/CalendarStep.d.ts

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

package/dist/FormSteps/CalendarStep/CalendarStep.js

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

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.d.ts

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

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.js

@@ -1,269 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useState, useCallback, useRef, useMemo } from 'react';
-import { startOfWeek, endOfWeek, addWeeks, addDays, addMonths, startOfMonth, endOfMonth, isSameMonth, isSameDay, isToday, format, parse, startOfDay, } from 'date-fns';
-import { es } from 'date-fns/locale';
-import { Popover } from '@mui/material';
-import ArrowLeftIcon from '../../../Icons/ArrowLeftIcon';
-import ArrowRightIcon from '../../../Icons/ArrowRightIcon';
-import ViewWeekIcon from '../../../Icons/ViewWeekIcon';
-import ViewDayIcon from '../../../Icons/ViewDayIcon';
-import CalendarIcon from '../../../Icons/CalendarIcon';
-import AddIcon from '../../../Icons/AddIcon';
-import CloseIcon from '../../../Icons/CloseIcon';
-import DeleteIcon from '../../../Icons/DeleteIcon';
-import { CalendarEventCategory, CalendarDefaultView, } from '../../../@Types/CalendarFormStep';
-import { useFormStep } from '../../StepHooks';
-import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { calcStepWidth } from '../../StepFunctions';
-import styles from './MaterialCalendarStep.module.css';
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-const CELL_HEIGHT = 48; // px per hour
-const WEEK_START = 1; // Monday
-const CATEGORY_COLORS = {
-    [CalendarEventCategory.WORKING]: '#4CAF50',
-    [CalendarEventCategory.PHYSICAL]: '#2196F3',
-    [CalendarEventCategory.VIRTUAL]: '#9C27B0',
-    [CalendarEventCategory.SPECIFIC]: '#FF9800',
-    [CalendarEventCategory.MEETING]: '#E91E63',
-    [CalendarEventCategory.BUSY]: '#607D8B',
-    [CalendarEventCategory.CUSTOM]: '#795548',
-};
-const CATEGORY_LABELS = {
-    [CalendarEventCategory.WORKING]: 'Trabajo',
-    [CalendarEventCategory.PHYSICAL]: 'Presencial',
-    [CalendarEventCategory.VIRTUAL]: 'Virtual',
-    [CalendarEventCategory.SPECIFIC]: 'Específico',
-    [CalendarEventCategory.MEETING]: 'Reunión',
-    [CalendarEventCategory.BUSY]: 'Ocupado',
-    [CalendarEventCategory.CUSTOM]: 'Personalizado',
-};
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-function parseTime(hhmm) {
-    const [h, m] = hhmm.split(':').map(Number);
-    return { h: h ?? 0, m: m ?? 0 };
-}
-function toMinutes(hhmm) {
-    const { h, m } = parseTime(hhmm);
-    return h * 60 + m;
-}
-function minutesToHHMM(mins) {
-    const h = Math.floor(mins / 60);
-    const m = mins % 60;
-    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
-}
-function isoToHHMM(iso) {
-    // "2024-06-19T09:30:00" → "09:30"
-    return iso.slice(11, 16);
-}
-function dateAndTimeToISO(date, hhmm) {
-    const { h, m } = parseTime(hhmm);
-    const d = new Date(date);
-    d.setHours(h, m, 0, 0);
-    return d.toISOString().slice(0, 19);
-}
-function isoToDate(iso) {
-    // Treat as local time (no timezone shift)
-    return parse(iso.slice(0, 19), 'yyyy-MM-dd\'T\'HH:mm:ss', new Date());
-}
-function newEventId() {
-    return `evt-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-}
-function EventBlock({ event, minHour, template, onDelete, readOnly }) {
-    const startMins = toMinutes(isoToHHMM(event.start));
-    const endMins = toMinutes(isoToHHMM(event.end));
-    const top = (startMins - minHour * 60) * (CELL_HEIGHT / 60);
-    const height = Math.max((endMins - startMins) * (CELL_HEIGHT / 60), 18);
-    const color = template?.color ?? CATEGORY_COLORS[event.category] ?? '#607D8B';
-    const label = event.title ?? template?.name ?? CATEGORY_LABELS[event.category];
-    return (_jsxs("div", { className: styles.eventBlock, style: { top, height, backgroundColor: color }, title: `${label}  ${isoToHHMM(event.start)}–${isoToHHMM(event.end)}`, children: [_jsx("span", { className: styles.eventLabel, children: label }), _jsxs("span", { className: styles.eventTime, children: [isoToHHMM(event.start), "\u2013", isoToHHMM(event.end)] }), !readOnly && (_jsx("button", { type: "button", className: styles.eventDeleteBtn, onClick: (e) => { e.stopPropagation(); onDelete(event.id); }, "aria-label": "Eliminar", children: _jsx(DeleteIcon, { size: 13 }) }))] }));
-}
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
-function MaterialCalendarStep({ step, editable }) {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { postview } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const isReadOnly = !editable || postview;
-    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
-    // ------------------------------------------------------------------
-    // Resolve config
-    // ------------------------------------------------------------------
-    const minTimeStr = step.minTime ?? '00:00';
-    const maxTimeStr = step.maxTime ?? '23:00';
-    const minHour = parseTime(minTimeStr).h;
-    const maxHour = parseTime(maxTimeStr).h + 1;
-    const totalHours = maxHour - minHour;
-    const showWeekends = step.showWeekends ?? true;
-    const allowedCategories = (step.allowedCategories?.length ? step.allowedCategories : Object.values(CalendarEventCategory));
-    const defaultViewMode = (step.defaultView ?? CalendarDefaultView.WEEK);
-    // ------------------------------------------------------------------
-    // Form value
-    // ------------------------------------------------------------------
-    const { value, onChange } = useFormStep(step, {
-        defaultValue: null,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-    });
-    const events = useMemo(() => value?.events ?? [], [value?.events]);
-    const setEvents = useCallback((updater) => {
-        onChange({
-            type: 'CALENDAR_VALUE',
-            events: updater(events),
-            timezone: value?.timezone,
-        });
-    }, [events, value?.timezone, onChange]);
-    const deleteEvent = useCallback((id) => setEvents((prev) => prev.filter((e) => e.id !== id)), [setEvents]);
-    // ------------------------------------------------------------------
-    // Navigation state
-    // ------------------------------------------------------------------
-    const [viewMode, setViewMode] = useState(defaultViewMode);
-    const [current, setCurrent] = useState(() => startOfDay(new Date()));
-    const [createState, setCreate] = useState(null);
-    // Create form
-    const [newCategory, setNewCategory] = useState(allowedCategories[0] ?? CalendarEventCategory.WORKING);
-    const [newTitle, setNewTitle] = useState('');
-    const [newStart, setNewStart] = useState('09:00');
-    const [newEnd, setNewEnd] = useState('10:00');
-    const gridRef = useRef(null);
-    // ------------------------------------------------------------------
-    // Derived view dates
-    // ------------------------------------------------------------------
-    const weekStart = startOfWeek(current, { weekStartsOn: WEEK_START });
-    const weekEnd = endOfWeek(current, { weekStartsOn: WEEK_START });
-    const visibleDays = (() => {
-        if (viewMode === 'day')
-            return [current];
-        const days = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
-        return showWeekends ? days : days.filter((d) => d.getDay() !== 0 && d.getDay() !== 6);
-    })();
-    // ------------------------------------------------------------------
-    // Navigate
-    // ------------------------------------------------------------------
-    const prev = () => {
-        if (viewMode === 'month')
-            setCurrent((d) => addMonths(d, -1));
-        else if (viewMode === 'week')
-            setCurrent((d) => addWeeks(d, -1));
-        else
-            setCurrent((d) => addDays(d, -1));
-    };
-    const next = () => {
-        if (viewMode === 'month')
-            setCurrent((d) => addMonths(d, 1));
-        else if (viewMode === 'week')
-            setCurrent((d) => addWeeks(d, 1));
-        else
-            setCurrent((d) => addDays(d, 1));
-    };
-    const navLabel = () => {
-        if (viewMode === 'month')
-            return format(current, 'MMMM yyyy', { locale: es });
-        if (viewMode === 'week') {
-            const s = format(weekStart, 'd MMM', { locale: es });
-            const e = format(weekEnd, 'd MMM yyyy', { locale: es });
-            return `${s} – ${e}`;
-        }
-        return format(current, 'EEEE d \'de\' MMMM yyyy', { locale: es });
-    };
-    // ------------------------------------------------------------------
-    // Events per day (for time-grid views)
-    // ------------------------------------------------------------------
-    const eventsForDay = (day) => events.filter((e) => isSameDay(isoToDate(e.start), day));
-    // ------------------------------------------------------------------
-    // Create flow
-    // ------------------------------------------------------------------
-    const handleGridClick = (e, day) => {
-        if (isReadOnly)
-            return;
-        const rect = (e.currentTarget).getBoundingClientRect();
-        const relY = e.clientY - rect.top;
-        const clickedMins = Math.round((relY / CELL_HEIGHT) * 60) * 30; // snap to 30min
-        const startMins = minHour * 60 + clickedMins;
-        const startHHMM = minutesToHHMM(Math.min(startMins, (maxHour - 1) * 60));
-        const endHHMM = minutesToHHMM(Math.min(startMins + 60, maxHour * 60));
-        setNewStart(startHHMM);
-        setNewEnd(endHHMM);
-        setNewCategory(allowedCategories[0] ?? CalendarEventCategory.WORKING);
-        setNewTitle('');
-        setCreate({ anchorEl: e.currentTarget, date: day, startMins });
-    };
-    const handleMonthDayClick = (day) => {
-        setCurrent(day);
-        setViewMode('day');
-    };
-    const handleCreate = () => {
-        if (!createState)
-            return;
-        const startISO = dateAndTimeToISO(createState.date, newStart);
-        const endISO = dateAndTimeToISO(createState.date, newEnd);
-        const template = step.eventTemplates?.find((t) => t.category === newCategory);
-        const evt = {
-            id: newEventId(),
-            category: newCategory,
-            start: startISO,
-            end: endISO,
-            title: newTitle || undefined,
-            eventTemplateId: template?.id,
-        };
-        setEvents((prev) => [...prev, evt]);
-        setCreate(null);
-    };
-    // ------------------------------------------------------------------
-    // Hour labels column
-    // ------------------------------------------------------------------
-    const hourLabels = Array.from({ length: totalHours }, (_, i) => minHour + i);
-    // ------------------------------------------------------------------
-    // Time-grid view (week / day)
-    // ------------------------------------------------------------------
-    const renderTimeGrid = () => (_jsxs("div", { className: styles.gridWrapper, children: [_jsxs("div", { className: styles.gridHeader, style: { gridTemplateColumns: `48px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.cornerCell }), visibleDays.map((day) => (_jsxs("div", { className: `${styles.dayHeader} ${isToday(day) ? styles.dayHeaderToday : ''}`, onClick: () => { setCurrent(day); setViewMode('day'); }, children: [_jsx("span", { className: styles.dayHeaderDow, children: format(day, 'EEE', { locale: es }) }), _jsx("span", { className: `${styles.dayHeaderNum} ${isToday(day) ? styles.todayCircle : ''}`, children: format(day, 'd') })] }, day.toISOString())))] }), _jsx("div", { className: styles.gridBody, ref: gridRef, children: _jsxs("div", { className: styles.gridInner, style: { gridTemplateColumns: `48px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.hourLabels, children: hourLabels.map((h) => (_jsx("div", { className: styles.hourLabel, style: { height: CELL_HEIGHT }, children: h > 0 && `${String(h).padStart(2, '0')}:00` }, h))) }), visibleDays.map((day) => (_jsxs("div", { className: styles.dayColumn, style: { height: totalHours * CELL_HEIGHT }, onClick: (e) => handleGridClick(e, day), children: [hourLabels.map((h) => (_jsx("div", { className: styles.hourLine, style: { top: (h - minHour) * CELL_HEIGHT } }, h))), eventsForDay(day).map((evt) => (_jsx(EventBlock, { event: evt, minHour: minHour, template: step.eventTemplates?.find((t) => t.category === evt.category), onDelete: deleteEvent, readOnly: isReadOnly }, evt.id)))] }, day.toISOString())))] }) })] }));
-    // ------------------------------------------------------------------
-    // Month view
-    // ------------------------------------------------------------------
-    const renderMonth = () => {
-        const mStart = startOfMonth(current);
-        const mEnd = endOfMonth(current);
-        const gridStart = startOfWeek(mStart, { weekStartsOn: WEEK_START });
-        const gridEnd = endOfWeek(mEnd, { weekStartsOn: WEEK_START });
-        const days = [];
-        let d = gridStart;
-        while (d <= gridEnd) {
-            days.push(d);
-            d = addDays(d, 1);
-        }
-        const DOW_LABELS = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
-        return (_jsxs("div", { className: styles.monthGrid, children: [DOW_LABELS.map((lbl) => (_jsx("div", { className: styles.monthDowHeader, children: lbl }, lbl))), days.map((day) => {
-                    const dayEvts = eventsForDay(day);
-                    const outside = !isSameMonth(day, current);
-                    return (_jsxs("div", { className: [
-                            styles.monthCell,
-                            outside ? styles.monthCellOutside : '',
-                            isToday(day) ? styles.monthCellToday : '',
-                        ].filter(Boolean).join(' '), onClick: () => handleMonthDayClick(day), children: [_jsx("span", { className: `${styles.monthCellNum} ${isToday(day) ? styles.todayCircle : ''}`, children: format(day, 'd') }), dayEvts.slice(0, 3).map((evt) => {
-                                const color = CATEGORY_COLORS[evt.category] ?? '#607D8B';
-                                return (_jsx("div", { className: styles.monthEventDot, style: { backgroundColor: color }, children: evt.title ?? CATEGORY_LABELS[evt.category] }, evt.id));
-                            }), dayEvts.length > 3 && (_jsxs("div", { className: styles.monthMoreLabel, children: ["+", dayEvts.length - 3, " m\u00E1s"] }))] }, day.toISOString()));
-                })] }));
-    };
-    // ------------------------------------------------------------------
-    // Create popover
-    // ------------------------------------------------------------------
-    const needsTitle = newCategory === CalendarEventCategory.MEETING ||
-        newCategory === CalendarEventCategory.CUSTOM;
-    const renderCreatePopover = () => {
-        if (!createState)
-            return null;
-        return (_jsxs(Popover, { open: true, anchorEl: createState.anchorEl, onClose: () => setCreate(null), anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: { paper: { className: styles.popoverPaper } }, children: [_jsxs("div", { className: styles.popoverHeader, children: [_jsx("span", { className: styles.popoverTitle, children: "Nuevo evento" }), _jsx("button", { type: "button", className: styles.popoverClose, onClick: () => setCreate(null), children: _jsx(CloseIcon, { size: 16 }) })] }), _jsxs("div", { className: styles.popoverBody, children: [_jsx("div", { className: styles.popoverLabel, children: "Tipo" }), _jsx("div", { className: styles.categoryGrid, children: allowedCategories.map((cat) => (_jsxs("button", { type: "button", className: `${styles.categoryChip} ${newCategory === cat ? styles.categoryChipActive : ''}`, style: newCategory === cat ? { backgroundColor: CATEGORY_COLORS[cat], color: '#fff' } : {}, onClick: () => setNewCategory(cat), children: [_jsx("span", { className: styles.categoryDot, style: { backgroundColor: CATEGORY_COLORS[cat] } }), CATEGORY_LABELS[cat]] }, cat))) }), needsTitle && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.popoverLabel, children: "Nombre" }), _jsx("input", { className: styles.popoverInput, value: newTitle, onChange: (e) => setNewTitle(e.target.value), placeholder: "Ej: Standup, Visita cliente\u2026", autoFocus: true })] })), _jsxs("div", { className: styles.timeRow, children: [_jsxs("div", { children: [_jsx("div", { className: styles.popoverLabel, children: "Inicio" }), _jsx("input", { type: "time", className: styles.popoverInput, value: newStart, onChange: (e) => setNewStart(e.target.value) })] }), _jsx("span", { className: styles.timeDash, children: "\u2013" }), _jsxs("div", { children: [_jsx("div", { className: styles.popoverLabel, children: "Fin" }), _jsx("input", { type: "time", className: styles.popoverInput, value: newEnd, onChange: (e) => setNewEnd(e.target.value) })] })] }), _jsxs("button", { type: "button", className: styles.createBtn, style: { backgroundColor: CATEGORY_COLORS[newCategory] }, onClick: handleCreate, children: [_jsx(AddIcon, { size: 16 }), "Agregar bloque"] })] })] }));
-    };
-    // ------------------------------------------------------------------
-    // Render
-    // ------------------------------------------------------------------
-    return (_jsxs("div", { className: styles.container, style: { width: widthStyle }, children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.viewSwitcher, children: [_jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'day' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('day'), title: "D\u00EDa", children: _jsx(ViewDayIcon, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'week' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('week'), title: "Semana", children: _jsx(ViewWeekIcon, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'month' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('month'), title: "Mes", children: _jsx(CalendarIcon, { size: 18 }) })] }), _jsxs("div", { className: styles.navGroup, children: [_jsx("button", { type: "button", className: styles.navBtn, onClick: prev, children: _jsx(ArrowLeftIcon, { size: 20 }) }), _jsx("span", { className: styles.navLabel, children: navLabel() }), _jsx("button", { type: "button", className: styles.navBtn, onClick: next, children: _jsx(ArrowRightIcon, { size: 20 }) })] }), events.length > 0 && (_jsxs("span", { className: styles.eventBadge, children: [events.length, " evento", events.length !== 1 ? 's' : ''] })), !isReadOnly && viewMode !== 'month' && (_jsx("span", { className: styles.hintText, children: "Clic en el grid para agregar" }))] }), _jsx("div", { className: styles.calendarCard, children: viewMode === 'month' ? renderMonth() : renderTimeGrid() }), !isReadOnly && renderCreatePopover()] }));
-}
-export default MaterialCalendarStep;