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

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

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

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

@@ -0,0 +1,174 @@
+/* =========================================================================
+   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/CBRStepMapper.js

@@ -54,7 +54,7 @@ function CBRStepMapper(props) {
         case CBRFormStepTypes.CBR_EMAIL:
             return (_jsx(TextInputStep, { ...props, step: props.step, validation: {
                     type: 'EMAIL',
-                    value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(?!(gmal|gmai|gmil|hotmil|hotmal|hotmai|yaho|yhoo|yahoo|outlok|outloo|outluk)\.)((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+                    value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                         .source,
                     message: 'El correo no es válido',
                 } }));

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

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

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

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