@soyfri/shared-library 2.0.0-beta.1 → 2.0.0-beta.11

package/src/components/DatePicker/DatePicker.tsx

@@ -1,189 +0,0 @@
-import React, { useMemo } from 'react';
-import type { SxProps, Theme } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import {
-  DatePicker as MuiDatePicker,
-  type DatePickerProps as MuiDatePickerProps,
-} from '@mui/x-date-pickers/DatePicker';
-import { DateValidationError } from '@mui/x-date-pickers/models';
-import { Dayjs } from 'dayjs';
-import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
-import 'dayjs/locale/en-gb';
-
-import { buildDatePickerSx } from './DatePicker.sx';
-import { getDateValidationMessage } from './DatePicker.helpers';
-import { resolvePreset } from '../_shared/resolvePreset';
-
-// ── Tipos de dominio ─────────────────────────────────────────────────────
-export type LabelPosition = 'outside' | 'floating';
-export type DatePickerSize = 'small' | 'medium';
-
-// ── Props base ───────────────────────────────────────────────────────────
-export interface BaseDatePickerProps
-  extends Omit<MuiDatePickerProps, 'value' | 'onChange' | 'slotProps'> {
-  label?: string;
-  minDate?: Dayjs;
-  maxDate?: Dayjs;
-  disabled?: boolean;
-  readOnly?: boolean;
-  /** Border radius del input. Default: 10 */
-  borderRadius?: number | string;
-  /** "outside" = label arriba del campo (default). "floating" = label clásico MUI dentro del borde */
-  labelPosition?: LabelPosition;
-  /** Tamaño del TextField renderizado. Default: 'small' */
-  size?: DatePickerSize;
-  /** helperText pasado al TextField (se sobrescribe por el error de validación si hay). */
-  helperText?: string;
-  /** Error external override. */
-  error?: boolean;
-  /** sx que se mergea al TextField interno del picker. */
-  sx?: SxProps<Theme>;
-  className?: string;
-  /**
-   * Nombre del preset de estilo registrado en `theme.styles.DatePicker`.
-   * - `"default"` (o ausente) = estilo built-in del paquete.
-   * - Cualquier otro string = mergea el preset encima del estilo built-in.
-   */
-  preset?: string;
-  /** Locale para el adaptador dayjs. Default: 'en-gb'. */
-  adapterLocale?: string;
-  /** Passthrough a slotProps.textField. */
-  textFieldProps?: Record<string, any>;
-  /** Passthrough completo a slotProps del MuiDatePicker. */
-  slotProps?: MuiDatePickerProps['slotProps'];
-}
-
-// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
-export interface RHFDatePickerProps extends BaseDatePickerProps {
-  name: string;
-  control: Control<any>;
-  validation?: RegisterOptions;
-  selectedDate?: never;
-  onDateChange?: never;
-}
-
-export interface ControlledDatePickerProps extends BaseDatePickerProps {
-  name?: string;
-  control?: never;
-  validation?: never;
-  selectedDate: Dayjs | null;
-  onDateChange: (date: Dayjs | null) => void;
-}
-
-// ── API pública final ────────────────────────────────────────────────────
-export type DatePickerProps = RHFDatePickerProps | ControlledDatePickerProps;
-
-export const DatePicker: React.FC<DatePickerProps> = (props) => {
-  const {
-    label,
-    minDate,
-    maxDate,
-    disabled,
-    readOnly,
-    borderRadius = 10,
-    labelPosition = 'outside',
-    size = 'small',
-    helperText,
-    error: errorProp,
-    sx,
-    className,
-    preset,
-    adapterLocale = 'en-gb',
-    textFieldProps,
-    slotProps: slotPropsProp,
-    ...rest
-  } = props as ControlledDatePickerProps & {
-    control?: Control<any>;
-    validation?: RegisterOptions;
-  };
-
-  const [validationError, setValidationError] = React.useState<DateValidationError | null>(null);
-
-  const validationErrorMessage = useMemo(
-    () => getDateValidationMessage(validationError),
-    [validationError],
-  );
-
-  const theme = useTheme();
-  const presetSx = resolvePreset('DatePicker', preset, theme);
-
-  const mergedSx = [
-    buildDatePickerSx(borderRadius, labelPosition),
-    ...(presetSx ? [presetSx] : []),
-    ...(Array.isArray(sx) ? sx : [sx]),
-  ];
-
-  const renderPicker = (
-    value: Dayjs | null,
-    onChange: (date: Dayjs | null) => void,
-    onBlur?: () => void,
-    inputRef?: React.Ref<any>,
-    rhfError?: boolean,
-    rhfHelperText?: string,
-  ) => {
-    const finalError = rhfError || !!validationErrorMessage || !!errorProp;
-    const finalHelperText = rhfHelperText || validationErrorMessage || helperText;
-
-    return (
-      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={adapterLocale}>
-        <MuiDatePicker
-          label={label}
-          value={value}
-          onChange={onChange}
-          minDate={minDate}
-          maxDate={maxDate}
-          onError={setValidationError}
-          disabled={disabled}
-          readOnly={readOnly}
-          className={className}
-          sx={mergedSx}
-          slotProps={{
-            ...slotPropsProp,
-            textField: {
-              fullWidth: true,
-              size,
-              variant: 'outlined',
-              onBlur,
-              inputRef,
-              error: !!finalError,
-              helperText: finalHelperText,
-              ...(slotPropsProp?.textField as Record<string, any> | undefined),
-              ...textFieldProps,
-            } as any,
-          }}
-          {...(rest as any)}
-        />
-      </LocalizationProvider>
-    );
-  };
-
-  // --- RHF mode ---
-  if ('control' in props && props.control) {
-    const { name, control, validation } = props as RHFDatePickerProps;
-    return (
-      <Controller
-        name={name}
-        control={control}
-        rules={validation}
-        render={({ field, fieldState: { error: fieldError } }) =>
-          renderPicker(
-            field.value ?? null,
-            field.onChange,
-            field.onBlur,
-            field.ref,
-            !!fieldError,
-            fieldError?.message,
-          )
-        }
-      />
-    );
-  }
-
-  // --- Controlado ---
-  const { selectedDate, onDateChange } = props as ControlledDatePickerProps;
-  return renderPicker(selectedDate, onDateChange);
-};
-
-export default DatePicker;

package/src/components/DatePicker/DatePicker.types.ts

@@ -1,10 +0,0 @@
-// Re-export barrel para compatibilidad con imports antiguos.
-// Los tipos ahora viven dentro de DatePicker.tsx.
-export type {
-  LabelPosition,
-  DatePickerSize,
-  BaseDatePickerProps,
-  RHFDatePickerProps,
-  ControlledDatePickerProps,
-  DatePickerProps,
-} from './DatePicker';

package/src/components/DatePicker/index.ts

@@ -1,9 +0,0 @@
-export { DatePicker, default } from './DatePicker';
-export type {
-  DatePickerProps,
-  BaseDatePickerProps,
-  RHFDatePickerProps,
-  ControlledDatePickerProps,
-  LabelPosition,
-  DatePickerSize,
-} from './DatePicker.types';

package/src/components/DateRangePicker/DateRangePicker.definitions.ts

@@ -1,191 +0,0 @@
-export const BasicDateRangePickerDefinition = `
-import React, { useState } from 'react';
-import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const BasicDateRangePickerExample = () => {
-  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
-  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
-
-  const handleDateRangeChange = (start, end) => {
-    setStartDate(start);
-    setEndDate(end);
-  };
-
-  return (
-    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <DateRangePicker
-        label="Seleccionar Rango"
-        startDate={startDate}
-        endDate={endDate}
-        onDateRangeChange={handleDateRangeChange}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateRangePickerWithMinMaxDefinition = `
-import React, { useState } from 'react';
-import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateRangePickerWithMinMaxExample = () => {
-  const [startDate, setStartDate] = useState(dayjs('2023-06-10'));
-  const [endDate, setEndDate] = useState(dayjs('2023-06-20'));
-  const minDate = dayjs('2023-06-01');
-  const maxDate = dayjs('2023-06-30');
-
-  const handleDateRangeChange = (start, end) => {
-    setStartDate(start);
-    setEndDate(end);
-  };
-
-  return (
-    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <DateRangePicker
-        label="Rango de Junio"
-        startDate={startDate}
-        endDate={endDate}
-        onDateRangeChange={handleDateRangeChange}
-        minDate={minDate}
-        maxDate={maxDate}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-      </Typography>
-      <Typography variant="caption" color="text.secondary">
-        (Rango permitido: \${minDate.format('YYYY-MM-DD')} a \${maxDate.format('YYYY-MM-DD')})
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateRangePickerDisabledDefinition = `
-import React, { useState } from 'react';
-import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateRangePickerDisabledExample = () => {
-  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
-  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
-
-  return (
-    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <DateRangePicker
-        label="Rango Deshabilitado"
-        startDate={startDate}
-        endDate={endDate}
-        onDateRangeChange={() => {}}
-        disabled
-      />
-      <Typography sx={{ mt: 2 }}>
-        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateRangePickerReadOnlyDefinition = `
-import React, { useState } from 'react';
-import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateRangePickerReadOnlyExample = () => {
-  const [startDate, setStartDate] = useState(dayjs('2024-07-01'));
-  const [endDate, setEndDate] = useState(dayjs('2024-07-15'));
-
-  return (
-    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <DateRangePicker
-        label="Rango Solo Lectura"
-        startDate={startDate}
-        endDate={endDate}
-        onDateRangeChange={() => {}}
-        readOnly
-      />
-      <Typography sx={{ mt: 2 }}>
-        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateRangePickerWithInitialNullDefinition = `
-import React, { useState } from 'react';
-import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateRangePickerWithInitialNullExample = () => {
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
-
-  const handleDateRangeChange = (start, end) => {
-    setStartDate(start);
-    setEndDate(end);
-  };
-
-  return (
-    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <DateRangePicker
-        label="Rango Sin Selección Inicial"
-        startDate={startDate}
-        endDate={endDate}
-        onDateRangeChange={handleDateRangeChange}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateRangePickerWithSizeDefinition = `
-import React, { useState } from 'react';
-import { DateRangePicker } from './DateRangePicker'; // Adjust path if necessary
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateRangePickerWithSizeExample = () => {
-  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
-  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
-
-  const handleDateRangeChange = (start, end) => {
-    setStartDate(start);
-    setEndDate(end);
-  };
-
-  return (
-    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <DateRangePicker
-        label="Rango de Fechas (Tamaño Pequeño)"
-        startDate={startDate}
-        endDate={endDate}
-        onDateRangeChange={handleDateRangeChange}
-        slotProps={{ textField: { size: 'small' } }}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-      </Typography>
-    </Box>
-  );
-};
-`;

package/src/components/DateRangePicker/DateRangePicker.stories.tsx

@@ -1,252 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { Box, Typography } from '@mui/material';
-import { Dayjs } from 'dayjs';
-import dayjs from 'dayjs';
-
-import DateRangePicker from "./DateRangePicker";
-import { BasicDateRangePickerDefinition, DateRangePickerWithMinMaxDefinition, DateRangePickerDisabledDefinition, DateRangePickerReadOnlyDefinition, DateRangePickerWithInitialNullDefinition, DateRangePickerWithSizeDefinition } from './DateRangePicker.definitions';
-
-// =============================================================================
-const meta: Meta<typeof DateRangePicker> = {
-    title: 'Components/DateRangePicker',
-    component: DateRangePicker,
-    tags: ['autodocs'],
-    parameters: {
-      layout: 'centered',
-      docs: {
-        description: {
-          component: 'Un componente `DateRangePicker` personalizado que permite seleccionar un rango de fechas con un solo campo de entrada (visualmente dos inputs interconectados) y gestiona las fechas de inicio y fin.',
-        },
-      },
-    },
-    argTypes: {
-      label: { control: 'text', description: 'Etiqueta para el campo de entrada del rango de fechas.' },
-      startDate: { control: 'object', description: 'La fecha de inicio del rango.', type: { name: 'object', required: false, value: {} } },
-      endDate: { control: 'object', description: 'La fecha de fin del rango.', type: { name: 'object', required: false, value: {} } },
-      onDateRangeChange: { action: 'dateRangeChanged', description: 'Callback que se dispara cuando el rango de fechas cambia.' },
-      minDate: { control: 'object', description: 'La fecha mínima permitida para cualquier fecha en el rango.' },
-      maxDate: { control: 'object', description: 'La fecha máxima permitida para cualquier fecha en el rango.' },
-      disabled: { control: 'boolean', description: 'Si es verdadero, el selector de rango estará deshabilitado.' },
-      readOnly: { control: 'boolean', description: 'Si es verdadero, el selector de rango estará en modo de solo lectura.' },
-      slotProps: { control: 'object', description: 'Propiedades pasadas a los slots internos del DateRangePicker (e.g., `textField`).' },
-    },
-  };
-  
-  export default meta;
-  type Story = StoryObj<typeof DateRangePicker>;
-  
-  // =============================================================================
-  // Historias
-  // =============================================================================
-  
-  export const BasicDateRangePicker: Story = {
-    render: () => {
-      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
-      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
-  
-      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
-        setStartDate(start);
-        setEndDate(end);
-      };
-  
-      return (
-        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <DateRangePicker
-            label="Seleccionar Rango"
-            startDate={startDate}
-            endDate={endDate}
-            onDateRangeChange={handleDateRangeChange}
-          />
-          <Typography sx={{ mt: 2 }}>
-            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-          </Typography>
-        </Box>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Un `DateRangePicker` básico que permite seleccionar un rango de fechas."
-        },
-        source: { code: BasicDateRangePickerDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateRangePickerWithMinMax: Story = {
-    render: () => {
-      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-06-10'));
-      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-06-20'));
-      const minDate = dayjs('2023-06-01');
-      const maxDate = dayjs('2023-06-30');
-  
-      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
-        setStartDate(start);
-        setEndDate(end);
-      };
-  
-      return (
-        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <DateRangePicker
-            label="Rango de Junio"
-            startDate={startDate}
-            endDate={endDate}
-            onDateRangeChange={handleDateRangeChange}
-            minDate={minDate}
-            maxDate={maxDate}
-          />
-          <Typography sx={{ mt: 2 }}>
-            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-          </Typography>
-          <Typography variant="caption" color="text.secondary">
-            (Rango permitido: ${minDate.format('YYYY-MM-DD')} a ${maxDate.format('YYYY-MM-DD')})
-          </Typography>
-        </Box>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra un `DateRangePicker` con fechas mínimas y máximas permitidas para el rango completo."
-        },
-        source: { code: DateRangePickerWithMinMaxDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateRangePickerDisabled: Story = {
-    render: () => {
-      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
-      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
-  
-      return (
-        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <DateRangePicker
-            label="Rango Deshabilitado"
-            startDate={startDate}
-            endDate={endDate}
-            onDateRangeChange={() => {}}
-            disabled
-          />
-          <Typography sx={{ mt: 2 }}>
-            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-          </Typography>
-        </Box>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Demuestra un `DateRangePicker` en estado deshabilitado."
-        },
-        source: { code: DateRangePickerDisabledDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateRangePickerReadOnly: Story = {
-    render: () => {
-      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2024-07-01'));
-      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2024-07-15'));
-  
-      return (
-        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <DateRangePicker
-            label="Rango Solo Lectura"
-            startDate={startDate}
-            endDate={endDate}
-            onDateRangeChange={() => {}}
-            readOnly
-          />
-          <Typography sx={{ mt: 2 }}>
-            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-          </Typography>
-        </Box>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra el `DateRangePicker` en modo de solo lectura. El usuario puede ver el rango pero no modificarlo."
-        },
-        source: { code: DateRangePickerReadOnlyDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateRangePickerWithInitialNull: Story = {
-    render: () => {
-      const [startDate, setStartDate] = useState<Dayjs | null>(null);
-      const [endDate, setEndDate] = useState<Dayjs | null>(null);
-  
-      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
-        setStartDate(start);
-        setEndDate(end);
-      };
-  
-      return (
-        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <DateRangePicker
-            label="Rango Sin Selección Inicial"
-            startDate={startDate}
-            endDate={endDate}
-            onDateRangeChange={handleDateRangeChange}
-          />
-          <Typography sx={{ mt: 2 }}>
-            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-          </Typography>
-        </Box>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra un `DateRangePicker` sin fechas de inicio o fin seleccionadas inicialmente."
-        },
-        source: { code: DateRangePickerWithInitialNullDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateRangePickerWithSize: Story = {
-    render: () => {
-      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
-      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
-  
-      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
-        setStartDate(start);
-        setEndDate(end);
-      };
-  
-      return (
-        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <DateRangePicker
-            label="Rango de Fechas (Tamaño Pequeño)"
-            startDate={startDate}
-            endDate={endDate}
-            onDateRangeChange={handleDateRangeChange}
-            slotProps={{ textField: { size: 'small' } }} // Aplica el tamaño 'small' a los TextFields internos
-          />
-          <Typography sx={{ mt: 2 }}>
-            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
-            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
-          </Typography>
-        </Box>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Demuestra cómo aplicar diferentes tamaños (`small` o `medium`) a los campos de entrada del `DateRangePicker`."
-        },
-        source: { code: DateRangePickerWithSizeDefinition.trim() }
-      }
-    }
-  };
-