@m4l/components 9.4.22 → 9.4.24

package/components/DaysOfMonthPicker/DaysOfMonthPicker.d.ts

@@ -0,0 +1,6 @@
+import { DaysOfMonthPickerProps } from './types';
+/**
+ * Componente DaysOfMonthPicker que permite seleccionar uno o varios días del mes (1-31).
+ * Utiliza una estrategia de slots con overrides CSS de Button para cada día.
+ */
+export declare const DaysOfMonthPicker: import('react').ForwardRefExoticComponent<DaysOfMonthPickerProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/DaysOfMonthPicker/DaysOfMonthPicker.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
+import { D as DaysOfMonthPickerRootStyled, a as DaysOfMonthPickerDaysStyled, S as SkeletonDayStyled } from "./slots/DaysOfMonthPickerSlots.js";
+import { D as DAYS_OF_MONTH_PICKER_CLASSES } from "./constants.js";
+import { u as useDaysOfMonthPicker } from "./hooks/useDaysOfMonthPicker/useDaysOfMonthPicker.js";
+const DaysOfMonthPicker = forwardRef((props, ref) => {
+  const { className, dataTestId, disabled } = props;
+  const { days, ownerState, currentSize, isSkeleton, renderDay } = useDaysOfMonthPicker(props);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      DaysOfMonthPickerRootStyled,
+      {
+        ref,
+        className: clsx(className, DAYS_OF_MONTH_PICKER_CLASSES.root),
+        ownerState,
+        role: "group",
+        "aria-label": "Selector de días del mes",
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: dataTestId } : {},
+        children: /* @__PURE__ */ jsx(
+          DaysOfMonthPickerDaysStyled,
+          {
+            className: DAYS_OF_MONTH_PICKER_CLASSES.days,
+            role: "grid",
+            "aria-label": "Días del mes",
+            children: days.map((day) => /* @__PURE__ */ jsx(
+              SkeletonDayStyled,
+              {
+                variant: "rounded",
+                className: DAYS_OF_MONTH_PICKER_CLASSES.skeletonDay,
+                ownerState: { size: currentSize }
+              },
+              day
+            ))
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DaysOfMonthPickerRootStyled,
+    {
+      ref,
+      className: clsx(className, DAYS_OF_MONTH_PICKER_CLASSES.root),
+      ownerState,
+      role: "group",
+      "aria-label": "Selector de días del mes",
+      "aria-disabled": disabled || void 0,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: dataTestId } : {},
+      children: /* @__PURE__ */ jsx(
+        DaysOfMonthPickerDaysStyled,
+        {
+          className: DAYS_OF_MONTH_PICKER_CLASSES.days,
+          role: "grid",
+          "aria-label": "Días del mes",
+          children: days.map(renderDay)
+        }
+      )
+    }
+  );
+});
+DaysOfMonthPicker.displayName = "DaysOfMonthPicker";
+export {
+  DaysOfMonthPicker as D
+};

package/components/DaysOfMonthPicker/DaysOfMonthPicker.styles.d.ts

@@ -0,0 +1,2 @@
+import { DaysOfMonthPickerStyles } from './types';
+export declare const daysOfMonthPickerStyles: DaysOfMonthPickerStyles;

package/components/DaysOfMonthPicker/DaysOfMonthPicker.styles.js

@@ -0,0 +1,111 @@
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+const daysOfMonthPickerStyles = {
+  /**
+   * Estilos para el elemento raíz del componente.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "fit-content"
+  }),
+  /**
+   * Estilos para el contenedor de días.
+   */
+  days: ({ theme }) => ({
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "100%"
+  }),
+  /**
+   * Estilos para cada día individual (slot con overrides de Button).
+   */
+  day: ({ theme, ownerState }) => {
+    const dayOwnerState = ownerState;
+    const isSelected = dayOwnerState?.selected;
+    const isDisabled = dayOwnerState?.disabled;
+    const isReadOnly = dayOwnerState?.readOnly;
+    const backgroundColor = isSelected ? theme.vars.palette.primary.enabledOpacity : "transparent";
+    let textColor = theme.vars.palette.default.semanticText;
+    if (isSelected) {
+      textColor = theme.vars.palette.primary.enabled;
+    }
+    if (isDisabled) {
+      textColor = theme.vars.palette.text.disabled;
+    }
+    const borderRadius = theme.vars.size.borderRadius.r2;
+    const shouldHaveInteractiveStates = !isDisabled && !isReadOnly;
+    return {
+      "&&&": {
+        ...getSizeStyles(theme, dayOwnerState?.size || "medium", "action", (size) => ({
+          minWidth: size,
+          width: size,
+          height: size,
+          minHeight: size
+        })),
+        ...getTypographyStyles(theme.generalSettings.isMobile, dayOwnerState?.size || "medium", "body"),
+        padding: 0,
+        borderRadius,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "none",
+        // Usar !important cuando está selected para sobrescribir el backgroundColor: 'unset' del Button base (variante text)
+        backgroundColor: isSelected ? `${theme.vars.palette.primary.enabledOpacity}!important` : backgroundColor,
+        // Usar !important cuando está selected para sobrescribir el color del texto del Button base (especialmente cuando está disabled)
+        color: `${textColor}!important`,
+        cursor: !shouldHaveInteractiveStates ? "default" : "pointer",
+        transition: "background-color 0.2s ease, color 0.2s ease",
+        pointerEvents: !shouldHaveInteractiveStates ? "none" : "auto",
+        // Estado hover: mantener el backgroundColor actual si está disabled o readOnly
+        "&:hover": {
+          backgroundColor: shouldHaveInteractiveStates ? isSelected ? `${theme.vars.palette.primary.enabledOpacity}!important` : theme.vars.palette.default.hoverOpacity : `${backgroundColor}!important`
+          // Mantener el estado base si no hay estados interactivos
+        },
+        // Estado active: mantener el backgroundColor actual si está disabled o readOnly
+        "&:active": {
+          backgroundColor: shouldHaveInteractiveStates ? isSelected ? `${theme.vars.palette.primary.activeOpacity}!important` : theme.vars.palette.default.activeOpacity : `${backgroundColor}!important`
+          // Mantener el estado base si no hay estados interactivos
+        },
+        // Estado focus visible (solo si no está deshabilitado ni en readOnly)
+        ...shouldHaveInteractiveStates && {
+          "&:focus-visible": {
+            outline: `${theme.vars.size.borderStroke.container} solid ${theme.vars.palette.primary.focusVisible}`,
+            outlineOffset: "2px"
+          }
+        },
+        // Override del texto del botón
+        "& .M4LButton-textButton": {
+          // Usar !important cuando está selected para sobrescribir el color del Button base (especialmente cuando está disabled)
+          color: `${textColor}!important`,
+          padding: 0,
+          fontSize: theme.typography.bodyDens.fontSize,
+          fontWeight: isSelected ? 600 : 400,
+          minWidth: "auto",
+          width: "auto",
+          cursor: "inherit"
+          // Heredar el cursor del contenedor
+        }
+      }
+    };
+  },
+  /**
+   * Estilos para cada día individual en modo skeleton.
+   */
+  skeletonDay: ({ theme, ownerState }) => {
+    const dayOwnerState = ownerState;
+    return {
+      ...getSizeStyles(theme, dayOwnerState?.size || "medium", "action", (size) => ({
+        minWidth: size,
+        width: size,
+        height: size,
+        minHeight: size
+      }))
+    };
+  }
+};
+export {
+  daysOfMonthPickerStyles as d
+};

package/components/DaysOfMonthPicker/DaysOfMonthPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DaysOfMonthPicker/constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Clave de identificación del componente DaysOfMonthPicker dentro del sistema.
+ *
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
+ * relacionadas con el componente `DaysOfMonthPicker` dentro del sistema de temas y estilos.
+ * @default 'M4LDaysOfMonthPicker'
+ */
+export declare const DAYS_OF_MONTH_PICKER_KEY_COMPONENT = "M4LDaysOfMonthPicker";
+/**
+ * Inventario de clases CSS para el componente DaysOfMonthPicker
+ */
+export declare const DAYS_OF_MONTH_PICKER_CLASSES: Record<"root" | "days" | "day" | "skeletonDay", string>;

package/components/DaysOfMonthPicker/constants.js

@@ -0,0 +1,11 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { D as DaysOfMonthPickerSlots } from "./slots/DaysOfMonthPickerEnum.js";
+const DAYS_OF_MONTH_PICKER_KEY_COMPONENT = "M4LDaysOfMonthPicker";
+const DAYS_OF_MONTH_PICKER_CLASSES = getComponentClasses(
+  DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  DaysOfMonthPickerSlots
+);
+export {
+  DAYS_OF_MONTH_PICKER_CLASSES as D,
+  DAYS_OF_MONTH_PICKER_KEY_COMPONENT as a
+};

package/components/DaysOfMonthPicker/constants.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { useDaysOfMonthPicker } from './useDaysOfMonthPicker';
+export * from './types';

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/index.js

@@ -0,0 +1 @@
+

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/types.d.ts

@@ -0,0 +1,27 @@
+import { DaysOfMonthPickerOwnerState } from '../../types';
+import { ReactNode } from 'react';
+/**
+ * Valores retornados por el hook useDaysOfMonthPicker
+ */
+export interface UseDaysOfMonthPickerReturn {
+    /**
+     * Array de días del mes (1-31, siempre en orden consecutivo)
+     */
+    days: number[];
+    /**
+     * Owner state del componente principal
+     */
+    ownerState: DaysOfMonthPickerOwnerState;
+    /**
+     * Tamaño actual del componente
+     */
+    currentSize: 'small' | 'medium';
+    /**
+     * Indica si el componente está en modo skeleton
+     */
+    isSkeleton: boolean;
+    /**
+     * Función para renderizar un día individual
+     */
+    renderDay: (day: number) => ReactNode;
+}

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/types.js

@@ -0,0 +1 @@
+

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/useDaysOfMonthPicker.d.ts

@@ -0,0 +1,8 @@
+import { DaysOfMonthPickerProps } from '../../types';
+import { UseDaysOfMonthPickerReturn } from './types';
+/**
+ * Hook personalizado que maneja toda la lógica del componente DaysOfMonthPicker
+ * @param props - Propiedades del componente DaysOfMonthPicker
+ * @returns Objeto con los valores y funciones necesarias para el render
+ */
+export declare const useDaysOfMonthPicker: (props: DaysOfMonthPickerProps) => UseDaysOfMonthPickerReturn;

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/useDaysOfMonthPicker.js

@@ -0,0 +1,121 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleSkeleton } from "@m4l/core";
+import { useMemo, useCallback } from "react";
+import { D as DAYS_OF_MONTH_PICKER_CLASSES } from "../../constants.js";
+import { b as DayButtonStyled } from "../../slots/DaysOfMonthPickerSlots.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+const useDaysOfMonthPicker = (props) => {
+  const {
+    value,
+    onChange,
+    multiple = false,
+    disabledDays = [],
+    disabled = false,
+    readOnly = false,
+    size
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const { currentSize } = useComponentSize(size);
+  const ownerState = useMemo(
+    () => ({
+      disabled,
+      readOnly
+    }),
+    [disabled, readOnly]
+  );
+  const days = useMemo(() => {
+    const daysArray = [];
+    for (let day = 1; day <= 31; day++) {
+      daysArray.push(day);
+    }
+    return daysArray;
+  }, []);
+  const isDaySelected = useCallback(
+    (day) => {
+      if (value === void 0) {
+        return false;
+      }
+      if (multiple) {
+        return Array.isArray(value) && value.includes(day);
+      }
+      return value === day;
+    },
+    [value, multiple]
+  );
+  const isDayDisabled = useCallback(
+    (day) => {
+      return disabled || disabledDays.includes(day);
+    },
+    [disabled, disabledDays]
+  );
+  const handleDayClick = useCallback(
+    (day) => {
+      if (isDayDisabled(day) || readOnly || isSkeleton) {
+        return;
+      }
+      if (multiple) {
+        const currentValue = Array.isArray(value) ? value : [];
+        const isSelected = currentValue.includes(day);
+        if (isSelected) {
+          const newValue = currentValue.filter((d) => d !== day);
+          onChange?.(newValue);
+        } else {
+          const newValue = [...currentValue, day];
+          onChange?.(newValue);
+        }
+      } else {
+        const newValue = value === day ? void 0 : day;
+        onChange?.(newValue);
+      }
+    },
+    [multiple, value, onChange, isDayDisabled, readOnly, isSkeleton]
+  );
+  const renderDay = useCallback(
+    (day) => {
+      const selected = isDaySelected(day);
+      const dayDisabled = isDayDisabled(day);
+      const dayOwnerState = {
+        selected,
+        disabled: dayDisabled,
+        readOnly,
+        size: currentSize
+      };
+      const dayLabel = day.toString().padStart(2, "0");
+      const ariaLabel = selected ? `Día ${day} seleccionado` : `Día ${day} no seleccionado`;
+      return /* @__PURE__ */ jsx(
+        DayButtonStyled,
+        {
+          label: dayLabel,
+          variant: "text",
+          disabled: dayDisabled,
+          onClick: () => handleDayClick(day),
+          ownerState: dayOwnerState,
+          "aria-label": ariaLabel,
+          "aria-pressed": selected,
+          "aria-disabled": dayDisabled || readOnly,
+          role: "button",
+          tabIndex: dayDisabled || readOnly ? -1 : 0,
+          className: DAYS_OF_MONTH_PICKER_CLASSES.day
+        },
+        day
+      );
+    },
+    [
+      isDaySelected,
+      isDayDisabled,
+      readOnly,
+      handleDayClick,
+      currentSize
+    ]
+  );
+  return {
+    days,
+    ownerState,
+    currentSize,
+    isSkeleton,
+    renderDay
+  };
+};
+export {
+  useDaysOfMonthPicker as u
+};

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/useDaysOfMonthPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DaysOfMonthPicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DaysOfMonthPicker';
+export * from './types';

package/components/DaysOfMonthPicker/index.js

@@ -0,0 +1 @@
+

package/components/DaysOfMonthPicker/slots/DaysOfMonthPickerEnum.d.ts

@@ -0,0 +1,6 @@
+export declare enum DaysOfMonthPickerSlots {
+    root = "root",
+    days = "days",
+    day = "day",
+    skeletonDay = "skeletonDay"
+}

package/components/DaysOfMonthPicker/slots/DaysOfMonthPickerEnum.js

@@ -0,0 +1,10 @@
+var DaysOfMonthPickerSlots = /* @__PURE__ */ ((DaysOfMonthPickerSlots2) => {
+  DaysOfMonthPickerSlots2["root"] = "root";
+  DaysOfMonthPickerSlots2["days"] = "days";
+  DaysOfMonthPickerSlots2["day"] = "day";
+  DaysOfMonthPickerSlots2["skeletonDay"] = "skeletonDay";
+  return DaysOfMonthPickerSlots2;
+})(DaysOfMonthPickerSlots || {});
+export {
+  DaysOfMonthPickerSlots as D
+};

package/components/DaysOfMonthPicker/slots/DaysOfMonthPickerSlots.d.ts

@@ -0,0 +1,4 @@
+export declare const DaysOfMonthPickerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DaysOfMonthPickerDaysStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DayButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "disabled" | "action" | "variant" | "color" | "content" | "translate" | "className" | "style" | "classes" | "sx" | "form" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "skeletonWidth" | "startIcon" | "endIcon" | keyof import('react').RefAttributes<HTMLButtonElement> | "fullWidth" | "disableElevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const SkeletonDayStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/DaysOfMonthPicker/slots/DaysOfMonthPickerSlots.js

@@ -0,0 +1,28 @@
+import { styled } from "@mui/material/styles";
+import { d as daysOfMonthPickerStyles } from "../DaysOfMonthPicker.styles.js";
+import { a as DAYS_OF_MONTH_PICKER_KEY_COMPONENT } from "../constants.js";
+import { D as DaysOfMonthPickerSlots } from "./DaysOfMonthPickerEnum.js";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
+import { B as Button } from "../../mui_extended/Button/Button.js";
+const DaysOfMonthPickerRootStyled = styled("div", {
+  name: DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  slot: DaysOfMonthPickerSlots.root
+})(daysOfMonthPickerStyles?.root);
+const DaysOfMonthPickerDaysStyled = styled("div", {
+  name: DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  slot: DaysOfMonthPickerSlots.days
+})(daysOfMonthPickerStyles?.days);
+const DayButtonStyled = styled(Button, {
+  name: DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  slot: DaysOfMonthPickerSlots.day
+})(daysOfMonthPickerStyles?.day);
+const SkeletonDayStyled = styled(Skeleton, {
+  name: DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  slot: DaysOfMonthPickerSlots.skeletonDay
+})(daysOfMonthPickerStyles?.skeletonDay);
+export {
+  DaysOfMonthPickerRootStyled as D,
+  SkeletonDayStyled as S,
+  DaysOfMonthPickerDaysStyled as a,
+  DayButtonStyled as b
+};

package/components/DaysOfMonthPicker/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DaysOfMonthPickerEnum';
+export * from './DaysOfMonthPickerSlots';

package/components/DaysOfMonthPicker/types.d.ts

@@ -0,0 +1,82 @@
+import { Theme } from '@mui/material/styles';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { DAYS_OF_MONTH_PICKER_KEY_COMPONENT } from './constants';
+import { DaysOfMonthPickerSlots } from './slots/DaysOfMonthPickerEnum';
+import { Sizes } from '@m4l/styles';
+/**
+ * Propiedades del componente `DaysOfMonthPicker`.
+ */
+export interface DaysOfMonthPickerProps {
+    /**
+     * Valor seleccionado. Puede ser un número (día único) o un array de números (múltiples días).
+     */
+    value?: number | number[];
+    /**
+     * Callback que se ejecuta cuando cambia la selección.
+     */
+    onChange?: (value: number | number[]) => void;
+    /**
+     * Si es true, permite seleccionar múltiples días. Si es false, solo permite seleccionar un día modo single.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Array de días que están deshabilitados y no se pueden seleccionar.
+     */
+    disabledDays?: number[];
+    /**
+     * Si es true, el componente está completamente deshabilitado.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Si es true, el componente está en modo solo lectura.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Class name para el componente.
+     */
+    className?: string;
+    /**
+     * Tamaño del componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Test id para el componente.
+     */
+    dataTestId?: string;
+}
+/**
+ * Owner state del componente `DaysOfMonthPicker` usado para definir propiedades internas de estilo y comportamiento.
+ */
+export interface DaysOfMonthPickerOwnerState {
+    disabled?: boolean;
+    readOnly?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * Owner state para cada día individual.
+ */
+export interface DayOwnerState {
+    selected: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    size: Extract<Sizes, 'small' | 'medium'>;
+    [key: string]: unknown;
+}
+/**
+ * Owner state para cada header de día individual.
+ */
+export interface DayHeaderOwnerState {
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    [key: string]: unknown;
+}
+/**
+ * Define los tipos de Slots disponibles para el componente `DaysOfMonthPicker`.
+ */
+export type DaysOfMonthPickerSlotsType = keyof typeof DaysOfMonthPickerSlots;
+/**
+ * Estilos aplicables al componente `DaysOfMonthPicker` usando temas y slots personalizados.
+ */
+export type DaysOfMonthPickerStyles = M4LOverridesStyleRules<DaysOfMonthPickerSlotsType, typeof DAYS_OF_MONTH_PICKER_KEY_COMPONENT, Theme>;

package/components/DaysOfMonthPicker/types.js

@@ -0,0 +1 @@
+

package/components/Stepper/helpers/delay/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Espera un tiempo determinado antes de continuar.
+ * Útil para esperar actualizaciones de estado de React o coordinar animaciones.
+ * @param ms - Tiempo en milisegundos a esperar
+ * @returns Promise que se resuelve después del tiempo especificado
+ */
+export declare const delay: (ms: number) => Promise<void>;

package/components/Stepper/helpers/delay/index.js

@@ -0,0 +1,4 @@
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+export {
+  delay as d
+};

package/components/Stepper/helpers/focusFirstErrorField/index.d.ts

@@ -0,0 +1,10 @@
+import { FieldValues, UseFormSetFocus, UseFormGetFieldState } from 'react-hook-form';
+/**
+ * Enfoca el primer campo con error y hace scroll suave hacia él.
+ * Usa setFocus de react-hook-form que internamente tiene los refs registrados
+ * por los componentes Controller.
+ * @param fieldsToValidate - Array de nombres de campos a verificar (en orden de prioridad)
+ * @param getFieldState - Función getFieldState de useFormContext() para obtener estado actualizado
+ * @param setFocus - Función setFocus de useFormContext()
+ */
+export declare function focusFirstErrorField(fieldsToValidate: string[], getFieldState: UseFormGetFieldState<FieldValues>, setFocus: UseFormSetFocus<FieldValues>): Promise<void>;

package/components/Stepper/helpers/focusFirstErrorField/index.js

@@ -0,0 +1,24 @@
+import { d as delay } from "../delay/index.js";
+import { i as isElementInViewport } from "../isElementInViewport/index.js";
+const DELAY_FOR_ERROR_STATE_UPDATE = 0;
+const DELAY_FOR_SCROLL_AFTER_FOCUS = 50;
+async function focusFirstErrorField(fieldsToValidate, getFieldState, setFocus) {
+  await delay(DELAY_FOR_ERROR_STATE_UPDATE);
+  for (const fieldName of fieldsToValidate) {
+    const fieldState = getFieldState(fieldName);
+    if (fieldState.error) {
+      setFocus(fieldName, { shouldSelect: true });
+      await delay(DELAY_FOR_SCROLL_AFTER_FOCUS);
+      if (!isElementInViewport(document.activeElement)) {
+        document.activeElement?.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+      return;
+    }
+  }
+}
+export {
+  focusFirstErrorField as f
+};

package/components/Stepper/helpers/index.d.ts

@@ -1,6 +1,8 @@
 export { evaluateVisibilityStepCondition } from './evaluateVisibilityStepCondition';
 export { findNextVisibleValidStep } from './findNextVisibleValidStep';
 export { findPrevVisibleValidStep } from './findPrevVisibleValidStep';
+export { focusFirstErrorField } from './focusFirstErrorField';
+export { isElementInViewport } from './isElementInViewport';
 export { isLastVisibleValidStep } from './isLastVisibleValidStep';
 export { parseWatchedValues } from './parseWatchedValues';
 export { getInitialFieldValues } from './getInitialFieldValues';

package/components/Stepper/helpers/isElementInViewport/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Verifica si un elemento se ve completo en la pantalla del usuario.
+ * @param element - Elemento a verificar
+ * @returns true si el elemento está completamente visible
+ */
+export declare function isElementInViewport(element: Element | null): boolean;

package/components/Stepper/helpers/isElementInViewport/index.js

@@ -0,0 +1,14 @@
+function isElementInViewport(element) {
+  if (!element) {
+    return false;
+  }
+  const rect = element.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+  const isInsideVertically = rect.top >= 0 && rect.bottom <= windowHeight;
+  const isInsideHorizontally = rect.left >= 0 && rect.right <= windowWidth;
+  return isInsideVertically && isInsideHorizontally;
+}
+export {
+  isElementInViewport as i
+};

package/components/Stepper/hooks/useStepperActions/index.js

@@ -3,8 +3,9 @@ import { u as useStepper } from "../useStepper/index.js";
 import { useFormContext } from "react-hook-form";
 import { shallow } from "zustand/shallow";
 import { u as useDynamicValidation } from "../useDynamicValidation/index.js";
+import { f as focusFirstErrorField } from "../../helpers/focusFirstErrorField/index.js";
 function useStepperActions() {
-  const { trigger, clearErrors, getValues, reset } = useFormContext();
+  const { trigger, clearErrors, getValues, reset, setFocus, getFieldState } = useFormContext();
   const { activateFieldsValidation, clearAllValidation } = useDynamicValidation();
   const {
     nextStep,
@@ -46,6 +47,7 @@ function useStepperActions() {
       const result = await trigger(fieldsToValidate);
       if (!result) {
         activateFieldsValidation(fieldsToValidate);
+        focusFirstErrorField(fieldsToValidate, getFieldState, setFocus);
       }
       return result;
     };
@@ -77,7 +79,9 @@ function useStepperActions() {
     trigger,
     getValues,
     activateFieldsValidation,
-    clearAllValidation
+    clearAllValidation,
+    setFocus,
+    getFieldState
   ]);
   const cancelAction = useCallback(() => {
     reset();

package/components/Stepper/subcomponents/StepArea/hooks/useStepArea.js

@@ -2,10 +2,11 @@ import { useCallback, useMemo } from "react";
 import { useFormContext } from "react-hook-form";
 import { u as useStepper } from "../../../hooks/useStepper/index.js";
 import { u as useDynamicValidation } from "../../../hooks/useDynamicValidation/index.js";
+import { f as focusFirstErrorField } from "../../../helpers/focusFirstErrorField/index.js";
 import { d as deepShallow } from "../../../../../utils/deepShallow.js";
 function useStepArea(props) {
   const { visibleSteps } = props;
-  const { trigger, clearErrors } = useFormContext();
+  const { trigger, clearErrors, setFocus, getFieldState } = useFormContext();
   const {
     activateFieldsValidation,
     startExternalValidation,
@@ -59,6 +60,7 @@ function useStepArea(props) {
           setCurrentStep(stepOriginalIndex);
           setStepValidationStatus(stepOriginalIndex, false);
           activateFieldsValidation(step.validationFields || []);
+          focusFirstErrorField(step.validationFields || [], getFieldState, setFocus);
           return;
         }
         setStepValidationStatus(stepOriginalIndex, true);
@@ -74,6 +76,7 @@ function useStepArea(props) {
       if (!isCurrentValid) {
         setStepValidationStatus(currentStepOriginalIndex, false);
         activateFieldsValidation(currentStepData.validationFields || []);
+        focusFirstErrorField(currentStepData.validationFields || [], getFieldState, setFocus);
         return;
       }
       setStepValidationStatus(currentStepOriginalIndex, true);
@@ -97,7 +100,7 @@ function useStepArea(props) {
         }
       }
     }
-  }, [visibleSteps, steps, setCurrentStep, currentStep, startExternalValidation, trigger, endExternalValidation, setStepValidationStatus, activateFieldsValidation, stepValidationStatus, clearErrors]);
+  }, [visibleSteps, steps, setCurrentStep, currentStep, startExternalValidation, trigger, endExternalValidation, setStepValidationStatus, activateFieldsValidation, stepValidationStatus, clearErrors, getFieldState, setFocus]);
   return useMemo(() => ({
     visibleTitle,
     orientation,

package/components/hook-form/RHFDaysOfMonthPicker/RHFDaysOfMonthPicker.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Componente RHFDaysOfMonthPicker que integra DaysOfMonthPicker con react-hook-form.
+ *
+ * Este componente permite seleccionar días del mes (1-31) en un formulario controlado
+ * por react-hook-form, proporcionando validación automática y manejo de estados.
+ *
+ * ### Características:
+ * - **Integración con RHF**: Se integra automáticamente con react-hook-form mediante el HOC withRHFController
+ * - **Validación**: Soporta validación mediante esquemas de validación (Yup, Zod, etc.)
+ * - **Estados del formulario**: Se deshabilita automáticamente durante el envío del formulario
+ * - **Label y errores**: El HOC maneja automáticamente el Label y los mensajes de error
+ * - **Modo single/multiple**: Permite seleccionar un día único o múltiples días
+ * - **Atajos**: Soporta atajos de selección rápida cuando está en modo multiple
+ * @example
+ * ```tsx
+ * const schema = Yup.object({
+ *   days: Yup.array().min(1, 'Debe seleccionar al menos un día').required('Campo requerido'),
+ * });
+ *
+ * <RHFDaysOfMonthPicker
+ *   name="days"
+ *   label="Días del mes"
+ *   mandatory
+ *   multiple
+ *   disabledDays={[1, 15]} // Deshabilita día 1 y 15
+ * />
+ * ```
+ */
+export declare const RHFDaysOfMonthPicker: import('react').ForwardRefExoticComponent<Omit<import('../../DaysOfMonthPicker').DaysOfMonthPickerProps & import('react').RefAttributes<HTMLDivElement> & import('../../../hocs').BaseRHFProps<import('react-hook-form').FieldValues>, "ref"> & import('react').RefAttributes<any>>;

package/components/hook-form/RHFDaysOfMonthPicker/RHFDaysOfMonthPicker.js

@@ -0,0 +1,6 @@
+import { w as withRHFController } from "../../../hocs/withRHFController/index.js";
+import { D as DaysOfMonthPicker } from "../../DaysOfMonthPicker/DaysOfMonthPicker.js";
+const RHFDaysOfMonthPicker = withRHFController(DaysOfMonthPicker);
+export {
+  RHFDaysOfMonthPicker as R
+};

package/components/hook-form/RHFDaysOfMonthPicker/index.d.ts

@@ -0,0 +1 @@
+export { RHFDaysOfMonthPicker } from './RHFDaysOfMonthPicker';

package/components/hook-form/RHFDaysOfMonthPicker/index.js

@@ -0,0 +1 @@
+

package/components/hook-form/index.d.ts

@@ -9,6 +9,7 @@ export { RHFDateTime } from './RHFDateTime';
 export { RHFDateTimePicker } from './RHFDateTimePicker';
 export { RHFDatePicker } from './RHFDatePicker';
 export * from './RHFDaysOfWeekPicker';
+export * from './RHFDaysOfMonthPicker';
 export { RHFMultiCheckbox } from './RHFMultiCheckbox';
 export { RHFSelect } from './RHFSelect';
 export { RHFHelperError } from './RHFHelperError';

package/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './CommonActions/dictionary';
 export * from './datagrids';
 export * from './DaysOfWeekPicker';
 export * from './DragResizeWindowRND';
+export * from './DaysOfMonthPicker';
 export * from './DynamicFilter';
 export * from './DynamicSort';
 export * from './extended';

package/index.js

@@ -86,14 +86,15 @@ import { g as g8 } from "./components/DaysOfWeekPicker/dictionary.js";
 import { D as D4 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
 import { W } from "./components/DragResizeWindowRND/constants.js";
+import { D as D5 } from "./components/DaysOfMonthPicker/DaysOfMonthPicker.js";
 import { g as g9 } from "./components/DynamicFilter/dictionary.js";
 import { a as a5, g as g10 } from "./components/DynamicFilter/helpers/frontEndHelpers.js";
 import { g as g11 } from "./components/DynamicFilter/helpers/getRawFiltersForNetwork.js";
-import { D as D5 } from "./components/DynamicFilter/DynamicFilter.js";
+import { D as D6 } from "./components/DynamicFilter/DynamicFilter.js";
 import { a as a6 } from "./components/DynamicSort/dictionary.js";
 import { S as S2 } from "./components/DynamicSort/helpers/frontEndHelpers.js";
 import { g as g12 } from "./components/DynamicSort/helpers/getRawSortsForNetwork.js";
-import { D as D6 } from "./components/DynamicSort/DynamicSort.js";
+import { D as D7 } from "./components/DynamicSort/DynamicSort.js";
 import { R } from "./components/extended/React-Resizable/Resizable/Resizable.js";
 import { R as R2 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
 import { S as S3 } from "./components/extended/React-resizable-panels/SplitLayout.js";
@@ -137,11 +138,11 @@ import { a as a8, T as T15 } from "./components/mui_extended/ToggleIconButton/co
 import { T as T16 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonEnum.js";
 import { T as T17 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
 import { N as N2 } from "./components/mui_extended/NavLink/NavLink.js";
-import { D as D7 } from "./components/mui_extended/Dialog/Dialog.js";
-import { D as D8 } from "./components/mui_extended/Divider/Divider.js";
-import { D as D9 } from "./components/mui_extended/DatePicker/DatePicker.js";
+import { D as D8 } from "./components/mui_extended/Dialog/Dialog.js";
+import { D as D9 } from "./components/mui_extended/Divider/Divider.js";
+import { D as D10 } from "./components/mui_extended/DatePicker/DatePicker.js";
 import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatter.js";
-import { D as D10, g as g14 } from "./components/formatters/DateFormatter/DateFormatter.js";
+import { D as D11, g as g14 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g15 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g16 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
 import { C as C33, g as g17 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
@@ -152,7 +153,7 @@ import { C as C34 } from "./components/formatters/ColorFormatter/ColorFormatter.
 import { I as I4 } from "./components/formatters/ImageFormatter/ImageFormatter.js";
 import { C as C35 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g19 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
-import { D as D11 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
+import { D as D12 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { u as u17 } from "./components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js";
 import { g as g20 } from "./components/formatters/dictionary.js";
 import { F as F2 } from "./components/FormContainer/FormContainer.js";
@@ -179,20 +180,21 @@ import { R as R16 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.j
 import { R as R17 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
 import { R as R18 } from "./components/hook-form/RHFCheckableList/RHFCheckableList.js";
 import { R as R19 } from "./components/hook-form/RHFDaysOfWeekPicker/RHFDaysOfWeekPicker.js";
-import { R as R20 } from "./components/hook-form/RHFTextField/RHFTextField.js";
-import { R as R21 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
+import { R as R20 } from "./components/hook-form/RHFDaysOfMonthPicker/RHFDaysOfMonthPicker.js";
+import { R as R21 } from "./components/hook-form/RHFTextField/RHFTextField.js";
+import { R as R22 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
 import { g as g23 } from "./components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js";
 import { r } from "./components/hook-form/RHFPeriod/RHFPeriod.styles.js";
-import { R as R22 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
-import { R as R23 } from "./components/hook-form/RHFPeriod/constants.js";
-import { R as R24 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
-import { N as N3, P as P6, R as R25, S as S7 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
-import { R as R26 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
-import { R as R27 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
+import { R as R23 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
+import { R as R24 } from "./components/hook-form/RHFPeriod/constants.js";
+import { R as R25 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
+import { N as N3, P as P6, R as R26, S as S7 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
+import { R as R27 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
+import { R as R28 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { V as V2, b as b4, a as a9 } from "./components/hook-form/RHFormProvider/types.js";
-import { F as F3, R as R28, u as u18 } from "./components/hook-form/RHFormProvider/RHFormProvider.js";
+import { F as F3, R as R29, u as u18 } from "./components/hook-form/RHFormProvider/RHFormProvider.js";
 import { d as d4, a as a10, b as b5, c as c3 } from "./components/hook-form/RHFormProvider/schema.js";
-import { R as R29 } from "./components/hook-form/RHFActionsGroup/RHFActionsGroup.js";
+import { R as R30 } from "./components/hook-form/RHFActionsGroup/RHFActionsGroup.js";
 import { I as I5 } from "./components/Icon/Icon.js";
 import { I as I6 } from "./components/Image/Image.js";
 import { L as L6 } from "./components/Label/Label.js";
@@ -232,7 +234,7 @@ import { u as u20 } from "./components/WindowBase/hooks/useWindowToolsMF/index.j
 import { u as u21, a as a14 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
 import { M as M7, W as W3, a as a15 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { c as c4 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
-import { D as D12, a as a16, M as M8 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
+import { D as D13, a as a16, M as M8 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 import { W as W4 } from "./components/WindowConfirm/WindowConfirm.js";
 import { a as a17, g as g30 } from "./components/ModalDialog/dictionary.js";
 import { M as M9 } from "./components/ModalDialog/ModalDialog.js";
@@ -354,17 +356,18 @@ export {
   e as DATAGRID_SEMANTIC_WIDTHS,
   D as DICTIONARY,
   D2 as DataGrid,
-  D10 as DateFormatter,
-  D9 as DatePicker,
+  D11 as DateFormatter,
+  D10 as DatePicker,
+  D5 as DaysOfMonthPicker,
   D3 as DaysOfWeekPicker,
-  D7 as Dialog,
-  D11 as DistanceToNowFormatter,
-  D8 as Divider,
+  D8 as Dialog,
+  D12 as DistanceToNowFormatter,
+  D9 as Divider,
   D4 as DragResizeWindowRND,
-  D5 as DynamicFilter,
-  D12 as DynamicMFParmsContext,
+  D6 as DynamicFilter,
+  D13 as DynamicMFParmsContext,
   a16 as DynamicMFParmsProvider,
-  D6 as DynamicSort,
+  D7 as DynamicSort,
   F as FixedSizeList,
   F2 as FormContainer,
   F3 as FormProviderCustom,
@@ -423,7 +426,7 @@ export {
   P11 as PrintingSystem,
   P as PropagateLoaderSpinner,
   P12 as PropertyValue,
-  R29 as RHFActionsGroup,
+  R30 as RHFActionsGroup,
   R6 as RHFAutocomplete,
   R7 as RHFAutocompleteAsync,
   R18 as RHFCheckableList,
@@ -432,21 +435,22 @@ export {
   R10 as RHFDatePicker,
   R8 as RHFDateTime,
   R9 as RHFDateTimePicker,
+  R20 as RHFDaysOfMonthPicker,
   R19 as RHFDaysOfWeekPicker,
   R13 as RHFHelperError,
   R11 as RHFMultiCheckbox,
-  R26 as RHFNumberInput,
-  R22 as RHFPeriod,
-  R25 as RHFPeriodRootStyled,
-  R24 as RHFPeriodSlots,
+  R27 as RHFNumberInput,
+  R23 as RHFPeriod,
+  R26 as RHFPeriodRootStyled,
+  R25 as RHFPeriodSlots,
   R14 as RHFRadioGroup,
   R12 as RHFSelect,
-  R20 as RHFTextField,
-  R21 as RHFTextFieldPassword,
-  R27 as RHFUploadImage,
+  R21 as RHFTextField,
+  R22 as RHFTextFieldPassword,
+  R28 as RHFUploadImage,
   R15 as RHFUploadSingleFile,
-  R23 as RHF_PERIOD_KEY_COMPONENT,
-  R28 as RHFormProvider,
+  R24 as RHF_PERIOD_KEY_COMPONENT,
+  R29 as RHFormProvider,
   R4 as Radio,
   R3 as ReactJsonViewer,
   R as Resizable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.22",
+  "version": "9.4.24",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {