@m4l/components 9.1.78 → 9.1.79

package/components/Label/Label.styles.js

@@ -8,8 +8,8 @@ const labelStyles = {
    * @returns {object} - Los estilos aplicados al root del Label.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   root: ({ theme, ownerState }) => ({
     display: "flex",
@@ -17,6 +17,16 @@ const labelStyles = {
     alignItems: "center",
     flexWrap: "wrap",
     width: "fit-content",
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "small",
+      "base",
+      (height) => ({
+        minHeight: height,
+        height: "auto",
+        maxHeight: "none"
+      })
+    ),
     gap: theme.size.baseSpacings.sp1,
     /** Estilos para el estado disabled del Label 😶‍🌫️ */
     ...ownerState.disabled && {
@@ -24,10 +34,11 @@ const labelStyles = {
     }
   }),
   /**
-   * Estilos para el slot Typography del Label 📝
-   * @param {object} theme - El tema de MUI.
-   * @param {object} ownerState - El estado del componente.
-   * @returns {object} - Los estilos aplicados al Typography del Label.
+   * Estilos para el slot Typography del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyStyled: ({ theme, ownerState }) => ({
     "&.MuiTypography-root": {
@@ -50,10 +61,11 @@ const labelStyles = {
     }
   }),
   /**
-   * Estilos para el slot Typography del mensaje obligatorio del Label ❗
-   * @param {object} theme - El tema de MUI.
-   * @param {object} ownerState - El estado del componente.
-   * @returns {object} - Los estilos aplicados al Typography del mensaje obligatorio del Label.
+   * Estilos para el slot Typography del mensaje obligatorio del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyMandatoryMessageStyled: ({ theme, ownerState }) => ({
     "&.MuiTypography-root": {
@@ -76,10 +88,11 @@ const labelStyles = {
     }
   }),
   /**
-   * Estilos para el slot Icon del Label 🛠️
-   * @param {object} theme - El tema de MUI.
-   * @param {object} ownerState - El estado del componente.
-   * @returns {object} - Los estilos aplicados al Icon del Label.
+   * Estilos para el slot Icon del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   iconHelperMessageStyled: ({ theme, ownerState }) => ({
     borderRadius: theme.vars.size.borderRadius.r1,
@@ -101,10 +114,11 @@ const labelStyles = {
     )
   }),
   /**
-   * Estilos para el slot Skeleton del Label 💀
-   * @param {object} theme - El tema de MUI.
-   * @param {object} ownerState - El estado del componente.
-   * @returns {object} - Los estilos aplicados al Skeleton del Label.
+   * Estilos para el slot Skeleton del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   skeletonStyled: ({ ownerState, theme }) => ({
     width: "100%",

package/components/NumberInput/NumberInput.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { u as useNumberInput } from "./hooks/useNumberInput/useNumberInput.js";
+import { S as SkeletonStyled, R as RootStyled, I as InputStyled, C as ContainButtonsAdornmentStyled, a as ContainerButtonsStyled, b as IncrementButtonStyled, D as DecrementButtonStyled } from "./slots/NumberInputSlots.js";
+import { N as NUMBER_INPUT_KEY_COMPONENT } from "./constants.js";
+import { N as NumberInputSlots } from "./slots/NumberInputEnum.js";
+const NumberInput = forwardRef(function NumberInput2(props, forwardedRef) {
+  const {
+    className,
+    defaultValue,
+    value,
+    disabled = false,
+    endAdornment,
+    error,
+    id,
+    max,
+    min,
+    onBlur,
+    onInputChange,
+    onFocus,
+    onChange,
+    required,
+    readOnly = false,
+    shiftMultiplier,
+    startAdornment,
+    step,
+    size = "medium",
+    variant = "outlined",
+    withDecimal = false,
+    dataTestId
+  } = props;
+  const {
+    getRootProps,
+    getInputProps,
+    getIncrementButtonProps,
+    getDecrementButtonProps,
+    focusError
+  } = useNumberInput({
+    min,
+    max,
+    step,
+    withDecimal,
+    shiftMultiplier,
+    defaultValue,
+    disabled,
+    error,
+    onFocus,
+    onInputChange,
+    onBlur,
+    onChange,
+    required,
+    readOnly,
+    value,
+    inputId: id,
+    componentName: NUMBER_INPUT_KEY_COMPONENT
+  });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const ownerState = {
+    disabled,
+    error,
+    size,
+    variant,
+    focusError,
+    noButtons: withDecimal
+  };
+  const isSkeleton = useModuleSkeleton();
+  const classes = getComponentClasses(NUMBER_INPUT_KEY_COMPONENT, NumberInputSlots);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      SkeletonStyled,
+      {
+        ownerState,
+        className: clsx(classes.skeleton, className),
+        ...getPropDataTestId(NUMBER_INPUT_KEY_COMPONENT, NumberInputSlots.skeleton, dataTestId)
+      }
+    );
+  }
+  const ICON_INCREMENT = `${host_static_assets}/${environment_assets}/frontend/components/ControlIncrement/assets/icons/chevron_up_sm.svg`;
+  const ICON_DECREMENT = `${host_static_assets}/${environment_assets}/frontend/components/ControlIncrement/assets/icons/chevron_down_sm.svg`;
+  return /* @__PURE__ */ jsxs(
+    RootStyled,
+    {
+      ...getPropDataTestId(NUMBER_INPUT_KEY_COMPONENT, NumberInputSlots.root, dataTestId),
+      className: clsx(classes.root, className),
+      ref: forwardedRef,
+      ownerState,
+      ...getRootProps(),
+      children: [
+        startAdornment,
+        /* @__PURE__ */ jsx(InputStyled, { className: clsx(classes.input, className), ownerState, ...getInputProps() }),
+        /* @__PURE__ */ jsxs(ContainButtonsAdornmentStyled, { ownerState, children: [
+          endAdornment,
+          !withDecimal && /* @__PURE__ */ jsxs(ContainerButtonsStyled, { className: clsx(classes.containerButtons, className), ownerState, children: [
+            /* @__PURE__ */ jsx(
+              IncrementButtonStyled,
+              {
+                icon: ICON_INCREMENT,
+                className: clsx(classes.increment, className),
+                ownerState,
+                ...getIncrementButtonProps()
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DecrementButtonStyled,
+              {
+                icon: ICON_DECREMENT,
+                className: clsx(classes.decrement, className),
+                ownerState,
+                ...getDecrementButtonProps()
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  NumberInput as N
+};

package/components/NumberInput/NumberInput.styles.js

@@ -0,0 +1,199 @@
+import { g as getHeightSizeStyles } from "../../utils/getHeightSizeStyles.js";
+const numberInputStyles = {
+  /**
+   * Estilos aplicados al contenedor principal (root).
+   */
+  root: ({ theme, ownerState }) => ({
+    //Estilos generales
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    height: "auto",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingRight: ownerState.noButtons && theme.vars.size.baseSpacings.sp1,
+    boxSizing: "border-box",
+    //Variantes (Outlined y Text)
+    ...ownerState.variant === "outlined" && {
+      border: theme.vars.size.borderStroke.container,
+      borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.border.default,
+      borderRadius: theme.vars.size.borderRadius.r1
+    },
+    ...ownerState.variant === "text" && {
+      borderBottom: theme.vars.size.borderStroke.container,
+      borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.border.default,
+      borderRadius: theme.vars.size.borderRadius.r1
+    },
+    // Estados (Pseudo-classes)
+    ...ownerState.disabled === false && {
+      "&:hover": {
+        background: ownerState.error ? theme.vars.palette.error.hoverOpacity : theme.vars.palette.primary.hoverOpacity,
+        borderColor: ownerState.error ? theme.vars.palette.error.hover : theme.vars.palette.primary.hover,
+        "& button": {
+          background: ownerState.error ? theme.vars.palette.error.hoverOpacity : theme.vars.palette.primary.hoverOpacity,
+          "&:hover": {
+            // background: theme.vars.palette?.default.hover,
+          }
+        }
+      },
+      "&:focus-within": {
+        borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+      },
+      "&:active": {
+        background: "transparent",
+        borderColor: ownerState.error ? theme.vars.palette.error.active : theme.vars.palette.primary.active
+      }
+    },
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action"
+    )
+  }),
+  /**
+   * Estilos aplicados al campo de entrada (input).
+   */
+  input: ({ theme, ownerState }) => ({
+    //Estilos generales
+    background: "transparent",
+    border: 0,
+    outline: 0,
+    color: ownerState.disabled ? theme.vars.palette.text.disabled : theme.vars.palette.text.primary,
+    height: "max-content ",
+    width: "100%",
+    ...ownerState.focusError && {
+      color: theme.vars.palette.error.main
+    }
+  }),
+  /**
+   * Estilos para envoltorio de boton y endAdornment
+   */
+  ContainButtonsAdornment: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignContent: "center",
+    height: "100%",
+    gap: theme.vars.size.baseSpacings.sp2,
+    "span": {
+      alignSelf: "center"
+    }
+  }),
+  /**
+   * Estilos aplicados al div que contiene los botones de incremento/decremento.
+   */
+  containerButtons: () => ({
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  }),
+  /**
+   * Estilos de increment
+   */
+  increment: ({ theme, ownerState }) => ({
+    //Estilos generales
+    height: "50%",
+    background: theme.vars.palette.default.main,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: `calc(${theme.vars.size.borderRadius.r1} - 1px)`,
+    outlineOffset: 0,
+    //Sizes
+    ...ownerState.sizes === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.medium.action
+      } : {
+        width: theme.vars.size.desktop.medium.action
+      }
+    },
+    ...ownerState.sizes === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action
+      }
+    },
+    //Estados (Pseudo-classes)
+    "&:focus-visible": {
+      zIndex: 1,
+      outline: `1px solid ${theme.vars.palette?.primary.main}`
+    },
+    "&:active": {
+      background: `${theme.vars.palette?.default.active} !important`
+    },
+    "& div": {
+      height: "100%",
+      width: "100%",
+      "& div": {
+        height: "100%",
+        width: "50%",
+        minHeight: "min-content",
+        maskPosition: "center center"
+      }
+    }
+  }),
+  /**
+   * Estilos Decrement
+   */
+  decrement: ({ theme, ownerState }) => ({
+    //Estilos generales
+    height: "50%",
+    background: theme.vars.palette.default.main,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: `calc(${theme.vars.size.borderRadius.r1} - 1px)`,
+    outlineOffset: 0,
+    //Sizes
+    ...ownerState.sizes === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.medium.action
+      } : {
+        width: theme.vars.size.desktop.medium.action
+      }
+    },
+    ...ownerState.sizes === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action
+      }
+    },
+    // Estados (Pseudo-classes)
+    "&:focus-visible": {
+      zIndex: 1,
+      outline: `1px solid ${theme.vars.palette?.primary.main}`
+    },
+    "&:active": {
+      background: `${theme.vars.palette?.default.active} !important`
+    },
+    "& div": {
+      height: "100%",
+      width: "100%",
+      "& div": {
+        height: "100%",
+        width: "50%",
+        minHeight: "min-content",
+        maskPosition: "center center"
+      }
+    }
+  }),
+  /**
+   * Estilos aplicados al skeleton.
+   */
+  skeleton: ({ theme, ownerState }) => ({
+    "&.M4lclassCssSpecificity": {
+      width: "100%",
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "medium",
+        "action"
+      )
+    }
+  })
+};
+export {
+  numberInputStyles as n
+};

package/components/NumberInput/constants.js

@@ -0,0 +1,4 @@
+const NUMBER_INPUT_KEY_COMPONENT = "M4LNumberInput";
+export {
+  NUMBER_INPUT_KEY_COMPONENT as N
+};

package/components/NumberInput/hooks/useNumberInput/NumberInputActions.js

@@ -0,0 +1,12 @@
+const NumberInputActionTypes = {
+  clamp: "numberInput:clamp",
+  inputChange: "numberInput:inputChange",
+  increment: "numberInput:increment",
+  decrement: "numberInput:decrement",
+  decrementToMin: "numberInput:decrementToMin",
+  incrementToMax: "numberInput:incrementToMax",
+  resetInputValue: "numberInput:resetInputValue"
+};
+export {
+  NumberInputActionTypes as N
+};

package/components/NumberInput/hooks/useNumberInput/NumberInputReducer.js

@@ -0,0 +1,106 @@
+import { c as clampStepwise, i as isNumber } from "../../utils.js";
+import { N as NumberInputActionTypes } from "./NumberInputActions.js";
+function getClampedValues(rawValue, context) {
+  const { min, max, step, withDecimal } = context;
+  const clampedValue = rawValue === null ? null : clampStepwise(rawValue, min, max, step, withDecimal);
+  const newInputValue = clampedValue === null ? "" : String(clampedValue);
+  return {
+    value: clampedValue,
+    inputValue: newInputValue
+  };
+}
+function roundToDecimals(value, decimals = 6) {
+  const factor = Math.pow(10, decimals);
+  return Math.round(value * factor) / factor;
+}
+function stepValue(state, context, direction, multiplier) {
+  const { value } = state;
+  const { step = 1, min, max } = context;
+  if (isNumber(value)) {
+    return {
+      up: roundToDecimals(value + (step ?? 1) * multiplier),
+      down: roundToDecimals(value - (step ?? 1) * multiplier)
+    }[direction];
+  }
+  return {
+    up: min ?? 1,
+    down: max ?? -1
+  }[direction];
+}
+function handleClamp(state, context, inputValue) {
+  const { getInputValueAsString } = context;
+  const numberValueAsString = getInputValueAsString(inputValue);
+  const intermediateValue = numberValueAsString === "" || numberValueAsString === "-" ? null : Number(numberValueAsString);
+  const clampedValues = getClampedValues(intermediateValue, context);
+  return {
+    ...state,
+    ...clampedValues,
+    noControlledValue: clampedValues.value
+  };
+}
+function handleInputChange(state, context, inputValue) {
+  const { getInputValueAsString, min, max, step, withDecimal } = context;
+  const numberValueAsString = getInputValueAsString(inputValue);
+  if (numberValueAsString.match(withDecimal ? /^-?(?:\d+(\.\d*)?|\.\d+)$/ : /^-?\d+?$/) || numberValueAsString === "" || numberValueAsString === "." || numberValueAsString === "-") {
+    const intermediateValue = numberValueAsString === "" || numberValueAsString === "-" || numberValueAsString === "." ? null : Number(numberValueAsString);
+    const clampedValue = intermediateValue === null ? null : clampStepwise(intermediateValue, min, max, step, withDecimal);
+    const value = intermediateValue !== null && clampedValue === Number(numberValueAsString) ? clampedValue : state.value;
+    const ret = {
+      ...state,
+      value,
+      inputValue: numberValueAsString,
+      noControlledValue: value
+    };
+    return ret;
+  }
+  return state;
+}
+function handleStep(state, context, applyMultiplier, direction) {
+  const multiplier = applyMultiplier ? context.shiftMultiplier : 1;
+  const newValue = stepValue(state, context, direction, multiplier);
+  const clampedValues = getClampedValues(newValue, context);
+  return {
+    ...state,
+    ...clampedValues,
+    noControlledValue: clampedValues.value
+  };
+}
+function handleToMinOrMax(state, context, to) {
+  const newValue = context[to];
+  if (!isNumber(newValue)) {
+    return state;
+  }
+  return {
+    ...state,
+    value: newValue,
+    inputValue: String(newValue),
+    noControlledValue: newValue
+  };
+}
+function numberInputReducer(state, action) {
+  const { type, context } = action;
+  switch (type) {
+    case NumberInputActionTypes.clamp:
+      return handleClamp(state, context, action.inputValue);
+    case NumberInputActionTypes.inputChange:
+      return handleInputChange(state, context, action.inputValue);
+    case NumberInputActionTypes.increment:
+      return handleStep(state, context, action.applyMultiplier, "up");
+    case NumberInputActionTypes.decrement:
+      return handleStep(state, context, action.applyMultiplier, "down");
+    case NumberInputActionTypes.incrementToMax:
+      return handleToMinOrMax(state, context, "max");
+    case NumberInputActionTypes.decrementToMin:
+      return handleToMinOrMax(state, context, "min");
+    case NumberInputActionTypes.resetInputValue:
+      return {
+        ...state,
+        inputValue: String(state.value)
+      };
+    default:
+      return state;
+  }
+}
+export {
+  numberInputReducer as n
+};

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -0,0 +1,364 @@
+import { useRef, useCallback, useState, useMemo, useEffect } from "react";
+import { useFormControlContext, extractEventHandlers } from "@mui/base";
+import { useForkRef } from "@mui/material";
+import useId from "@mui/material/utils/useId";
+import { useControllableReducer } from "@mui/base/utils/useControllableReducer";
+import { i as isNumber } from "../../utils.js";
+import { N as NUMBER_INPUT_KEY_COMPONENT } from "../../constants.js";
+import { N as NumberInputActionTypes } from "./NumberInputActions.js";
+import { n as numberInputReducer } from "./NumberInputReducer.js";
+const STEP_KEYS = ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Enter"];
+const SUPPORTED_KEYS = [...STEP_KEYS, "Home", "End"];
+function getInputValueAsString(v) {
+  return v ? String(v.trim()) : String(v);
+}
+const useNumberInput = (parameters) => {
+  const {
+    min,
+    max,
+    step,
+    withDecimal,
+    shiftMultiplier = 10,
+    value: valueProp,
+    inputRef: inputRefProp,
+    inputId: inputIdProp,
+    onChange,
+    disabled: disabledProp = false,
+    onBlur,
+    onFocus,
+    onInputChange,
+    defaultValue: defaultValueProp,
+    componentName = NUMBER_INPUT_KEY_COMPONENT,
+    error: errorProp = false,
+    required: requiredProp = false,
+    readOnly: readOnlyProp = false
+  } = parameters;
+  const formControlContext = useFormControlContext();
+  const { current: isControlled } = useRef(valueProp !== null);
+  const handleInputRefWarning = useCallback((instance) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (instance && instance.nodeName !== "INPUT" && !instance.focus) {
+        console.error(
+          [
+            "MUI: You have provided a `slots.input` to the input component",
+            "that does not correctly handle the `ref` prop.",
+            "Make sure the `ref` prop is called with a HTMLInputElement."
+          ].join("\n")
+        );
+      }
+    }
+  }, []);
+  const inputRef = useRef(null);
+  const handleInputRef = useForkRef(inputRef, inputRefProp, handleInputRefWarning);
+  const inputId = useId(inputIdProp);
+  const [focused, setFocused] = useState(false);
+  const handleStateChange = useCallback(
+    (event, field, fieldValue, reason) => {
+      if (field === "value" && typeof fieldValue !== "string") {
+        switch (reason) {
+          case "numberInput:inputChange":
+            onChange?.(event, fieldValue);
+            break;
+          case "numberInput:clamp":
+            onChange?.(event, fieldValue);
+            break;
+          case "numberInput:increment":
+          case "numberInput:decrement":
+          case "numberInput:incrementToMax":
+          case "numberInput:decrementToMin":
+            onChange?.(event, fieldValue);
+            break;
+        }
+      }
+    },
+    [onChange]
+  );
+  const numberInputActionContext = useMemo(() => {
+    return {
+      min,
+      max,
+      step,
+      withDecimal,
+      shiftMultiplier,
+      getInputValueAsString
+    };
+  }, [min, max, step, withDecimal, shiftMultiplier]);
+  const initialValue = valueProp ?? defaultValueProp ?? null;
+  const initialState = {
+    value: initialValue,
+    inputValue: initialValue ? String(initialValue) : "",
+    noControlledValue: initialValue
+  };
+  const controlledState = useMemo(
+    () => ({
+      value: valueProp
+    }),
+    [valueProp]
+  );
+  const [state, dispatch] = useControllableReducer({
+    reducer: numberInputReducer,
+    controlledProps: controlledState,
+    initialState,
+    onStateChange: handleStateChange,
+    actionContext: useMemo(() => numberInputActionContext, [numberInputActionContext]),
+    componentName
+  });
+  const { value, inputValue, noControlledValue } = state;
+  const focusError = focused && inputValue !== "" ? noControlledValue !== Number(inputValue) : false;
+  useEffect(() => {
+    if (!formControlContext && disabledProp && focused) {
+      setFocused(false);
+      onBlur?.();
+    }
+  }, [formControlContext, disabledProp, focused, onBlur]);
+  useEffect(() => {
+    if (isControlled && isNumber(value)) {
+      dispatch({
+        type: NumberInputActionTypes.resetInputValue
+      });
+    }
+  }, [value, dispatch, isControlled]);
+  const createHandleFocus = (otherHandlers) => (event) => {
+    otherHandlers.onFocus?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    if (formControlContext && formControlContext.onFocus) {
+      formControlContext?.onFocus?.();
+    }
+    setFocused(true);
+  };
+  const createHandleInputChange = (otherHandlers) => (event) => {
+    if (!isControlled && event.target === null) {
+      throw (
+        /* minify-error */
+        new Error(
+          "MUI: Expected valid input target. Did you use a custom `slots.input` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info."
+        )
+      );
+    }
+    formControlContext?.onChange?.(event);
+    otherHandlers.onInputChange?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    dispatch({
+      type: NumberInputActionTypes.inputChange,
+      event,
+      inputValue: event.currentTarget.value
+    });
+  };
+  const createHandleBlur = (otherHandlers) => (event) => {
+    formControlContext?.onBlur();
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    dispatch({
+      type: NumberInputActionTypes.clamp,
+      event,
+      inputValue: event.currentTarget.value
+    });
+    setFocused(false);
+  };
+  const createHandleClick = (otherHandlers) => (event) => {
+    otherHandlers.onClick?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    if (inputRef.current && event.currentTarget === event.target) {
+      inputRef.current.focus();
+    }
+  };
+  const handleStep = (direction) => (event) => {
+    const applyMultiplier = Boolean(event.shiftKey);
+    const actionType = {
+      up: NumberInputActionTypes.increment,
+      down: NumberInputActionTypes.decrement
+    }[direction];
+    dispatch({
+      type: actionType,
+      event,
+      applyMultiplier
+    });
+  };
+  const createHandleKeyDown = (otherHandlers) => (event) => {
+    otherHandlers.onKeyDown?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    if (SUPPORTED_KEYS.includes(event.key)) {
+      event.preventDefault();
+    }
+    switch (event.key) {
+      case "ArrowUp":
+        dispatch({
+          type: NumberInputActionTypes.increment,
+          event,
+          applyMultiplier: !!event.shiftKey
+        });
+        break;
+      case "ArrowDown":
+        dispatch({
+          type: NumberInputActionTypes.decrement,
+          event,
+          applyMultiplier: !!event.shiftKey
+        });
+        break;
+      case "PageUp":
+        dispatch({
+          type: NumberInputActionTypes.increment,
+          event,
+          applyMultiplier: true
+        });
+        break;
+      case "PageDown":
+        dispatch({
+          type: NumberInputActionTypes.decrement,
+          event,
+          applyMultiplier: true
+        });
+        break;
+      case "Home":
+        dispatch({
+          type: NumberInputActionTypes.decrementToMin,
+          event
+        });
+        break;
+      case "Enter":
+        dispatch({
+          type: NumberInputActionTypes.clamp,
+          event,
+          inputValue: event.currentTarget.value
+        });
+        break;
+      case "End":
+        dispatch({
+          type: NumberInputActionTypes.incrementToMax,
+          event
+        });
+        break;
+    }
+  };
+  const getRootProps = (externalProps = {}) => {
+    const propsEventHandlers = extractEventHandlers(parameters, [
+      // these are handled by the input slot
+      "onBlur",
+      "onInputChange",
+      "onFocus",
+      "onChange"
+    ]);
+    const externalEventHandlers = {
+      ...propsEventHandlers,
+      ...extractEventHandlers(externalProps)
+    };
+    return {
+      ...externalProps,
+      ...externalEventHandlers,
+      onClick: createHandleClick(externalEventHandlers)
+    };
+  };
+  const getInputProps = (externalProps = {}) => {
+    const propsEventHandlers = {
+      onBlur,
+      onFocus,
+      // onChange from normal props is the custom onChange so we ignore it here
+      onChange: onInputChange
+    };
+    const externalEventHandlers = {
+      ...propsEventHandlers,
+      ...extractEventHandlers(externalProps, [
+        // onClick is handled by the root slot
+        "onClick"
+        // do not ignore 'onInputChange', we want slotProps.input.onInputChange to enter the DOM and throw
+      ])
+    };
+    const mergedEventHandlers = {
+      ...externalEventHandlers,
+      onFocus: createHandleFocus(externalEventHandlers),
+      // slotProps.onChange is renamed to onInputChange and passed to createHandleInputChange
+      onChange: createHandleInputChange({
+        ...externalEventHandlers,
+        onInputChange: externalEventHandlers.onChange
+      }),
+      onBlur: createHandleBlur(externalEventHandlers),
+      onKeyDown: createHandleKeyDown(externalEventHandlers)
+    };
+    const displayValue = (focused ? inputValue : value) ?? "";
+    delete externalProps.onInputChange;
+    return {
+      type: "text",
+      id: inputId,
+      "aria-invalid": errorProp || void 0,
+      defaultValue: void 0,
+      value: displayValue,
+      "aria-valuenow": displayValue,
+      "aria-valuetext": String(displayValue),
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      required: !!requiredProp,
+      readOnly: readOnlyProp,
+      "aria-disabled": disabledProp,
+      disabled: disabledProp,
+      ...externalProps,
+      ref: handleInputRef,
+      ...mergedEventHandlers
+    };
+  };
+  const handleStepperButtonMouseDown = (event) => {
+    event.preventDefault();
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  const stepperButtonCommonProps = {
+    "aria-controls": inputId,
+    tabIndex: -1
+  };
+  const isIncrementDisabled = disabledProp || (isNumber(value) ? value >= (max ?? Number.MAX_SAFE_INTEGER) : false);
+  const getIncrementButtonProps = (externalProps = {}) => {
+    return {
+      ...externalProps,
+      ...stepperButtonCommonProps,
+      disabled: isIncrementDisabled,
+      tabIndex: 0,
+      "aria-disabled": isIncrementDisabled,
+      onMouseDown: handleStepperButtonMouseDown,
+      onClick: handleStep("up")
+    };
+  };
+  const isDecrementDisabled = disabledProp || (isNumber(value) ? value <= (min ?? Number.MIN_SAFE_INTEGER) : false);
+  const getDecrementButtonProps = (externalProps = {}) => {
+    return {
+      ...externalProps,
+      ...stepperButtonCommonProps,
+      disabled: isDecrementDisabled,
+      tabIndex: 0,
+      "aria-disabled": isDecrementDisabled,
+      onMouseDown: handleStepperButtonMouseDown,
+      onClick: handleStep("down")
+    };
+  };
+  return {
+    disabled: disabledProp,
+    error: errorProp,
+    focused,
+    formControlContext,
+    getInputProps,
+    getIncrementButtonProps,
+    getDecrementButtonProps,
+    getRootProps,
+    required: requiredProp,
+    value,
+    inputValue,
+    isIncrementDisabled,
+    isDecrementDisabled,
+    focusError
+  };
+};
+export {
+  useNumberInput as u
+};

package/components/NumberInput/slots/NumberInputEnum.js

@@ -0,0 +1,13 @@
+var NumberInputSlots = /* @__PURE__ */ ((NumberInputSlots2) => {
+  NumberInputSlots2["root"] = "root";
+  NumberInputSlots2["input"] = "input";
+  NumberInputSlots2["containButtonsAdornment"] = "ContainButtonsAdornment";
+  NumberInputSlots2["containerButtons"] = "containerButtons";
+  NumberInputSlots2["increment"] = "increment";
+  NumberInputSlots2["decrement"] = "decrement";
+  NumberInputSlots2["skeleton"] = "skeleton";
+  return NumberInputSlots2;
+})(NumberInputSlots || {});
+export {
+  NumberInputSlots as N
+};

package/components/NumberInput/slots/NumberInputSlots.js

@@ -0,0 +1,43 @@
+import { styled } from "@mui/material/styles";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
+import { n as numberInputStyles } from "../NumberInput.styles.js";
+import { N as NUMBER_INPUT_KEY_COMPONENT } from "../constants.js";
+import { N as NumberInputSlots } from "./NumberInputEnum.js";
+import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+const RootStyled = styled("div", {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.root
+})(numberInputStyles?.root);
+const InputStyled = styled("input", {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.input
+})(numberInputStyles?.input);
+const ContainerButtonsStyled = styled("div", {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.containerButtons
+})(numberInputStyles?.containerButtons);
+const ContainButtonsAdornmentStyled = styled("div", {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.containButtonsAdornment
+})(numberInputStyles?.ContainButtonsAdornment);
+const IncrementButtonStyled = styled(IconButton, {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.increment
+})(numberInputStyles?.increment);
+const DecrementButtonStyled = styled(IconButton, {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.decrement
+})(numberInputStyles?.decrement);
+const SkeletonStyled = styled(Skeleton, {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.skeleton
+})(numberInputStyles?.skeleton);
+export {
+  ContainButtonsAdornmentStyled as C,
+  DecrementButtonStyled as D,
+  InputStyled as I,
+  RootStyled as R,
+  SkeletonStyled as S,
+  ContainerButtonsStyled as a,
+  IncrementButtonStyled as b
+};

package/components/NumberInput/utils.js

@@ -0,0 +1,23 @@
+import { clamp } from "@mui/utils";
+function clampStepwise(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, stepProp = NaN, withDecimal = false) {
+  if (Number.isNaN(stepProp)) {
+    return clamp(val, min, max);
+  }
+  if (withDecimal) {
+    return clamp(val, min, max);
+  }
+  const step = stepProp || 1;
+  const remainder = val % step;
+  const positivity = Math.sign(remainder);
+  if (Math.abs(remainder) > step / 2) {
+    return clamp(val + positivity * (step - Math.abs(remainder)), min, max);
+  }
+  return clamp(val - positivity * Math.abs(remainder), min, max);
+}
+function isNumber(val) {
+  return typeof val === "number" && !Number.isNaN(val) && Number.isFinite(val);
+}
+export {
+  clampStepwise as c,
+  isNumber as i
+};

package/components/PropertyValue/PropertyValue.d.ts

@@ -3,7 +3,7 @@ import { PropertyValueProps } from './types';
  * PropertyValue component is used to display a property and its value in a form or not.
  * @author cesar - automatic
  * @createdAt 2024-12-19 14:44:17 - automatic
- * @updatedAt 2025-01-08 11:15:49 - automatic
+ * @updatedAt 2025-01-21 09:09:02 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function PropertyValue(props: PropertyValueProps): import("react/jsx-runtime").JSX.Element;

package/components/PropertyValue/PropertyValue.js

@@ -6,8 +6,8 @@ import { g as getPropDataTestId, a as getNameDataTestId } from "../../test/getNa
 import { P as PropertyValueRootStyled, a as PropertyStyled, V as ValueStyled } from "./slots/PropertyValueSlots.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import React from "react";
 import { L as Label } from "../Label/Label.js";
-import { T as TextField } from "../mui_extended/TextField/TextField.js";
 import { T as Typography } from "../mui_extended/Typography/Typography.js";
 import { I as Icon } from "../Icon/Icon.js";
 function PropertyValue(props) {
@@ -47,23 +47,11 @@ function PropertyValue(props) {
     return startAdornment;
   };
   const renderValue = () => {
-    if (isForm) {
-      if (typeof value === "string" || typeof value === "number") {
-        return /* @__PURE__ */ jsx(
-          TextField,
-          {
-            size: normalizedSize,
-            defaultValue: value,
-            disabled,
-            helperText: helperMessage,
-            fullWidth: true
-          }
-        );
-      }
-      return value;
+    if (typeof value === "string" || typeof value === "number") {
+      return /* @__PURE__ */ jsx(Typography, { size: normalizedSize, variant: "body", children: value });
     }
-    if (typeof value === "string") {
-      return /* @__PURE__ */ jsx(Typography, { size: normalizedSize, variant: "bodyDens", children: value });
+    if (React.isValidElement(value)) {
+      return React.cloneElement(value, { size: normalizedSize });
     }
     return value;
   };

package/components/PropertyValue/PropertyValue.styles.js

@@ -4,8 +4,8 @@ const propertyValueStyles = {
    * Property Value Root Styles
    * @author cesar - automatic
    * @createdAt 2024-12-19 14:44:17 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   Root: ({ theme, ownerState }) => {
     const createSemanticStyle = (minWidth, maxWidth) => ({
@@ -67,8 +67,8 @@ const propertyValueStyles = {
    * Property Styles
    * @author cesar - automatic
    * @createdAt 2024-12-26 11:44:46 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   property: ({ theme, ownerState }) => ({
     display: "flex",
@@ -82,8 +82,8 @@ const propertyValueStyles = {
    * Value Styles (Form and No Form Combined)
    * @author cesar - automatic
    * @createdAt 2024-12-26 11:44:46 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   value: ({ theme, ownerState }) => ({
     width: "100%",

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

@@ -0,0 +1,89 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import useId from "@mui/material/utils/useId";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { L as Label } from "../../Label/Label.js";
+import { H as HelperError } from "../../HelperError/HelperError.js";
+import { N as NumberInput } from "../../NumberInput/NumberInput.js";
+import { R as RHFNumberInputSlots } from "./slots/RHFNumberInputEnum.js";
+import { R as RHF_NUMBER_INPUT_KEY_COMPONENT } from "./constants.js";
+import { R as RootStyled } from "./slots/RHFNumberInputSlots.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const RHFNumberInput = (props) => {
+  const {
+    name,
+    max,
+    min,
+    step,
+    disabled,
+    size = "medium",
+    variant = "outlined",
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    startAdornment,
+    endAdornment,
+    ...others
+  } = props;
+  const { control } = useFormContext();
+  const { currentSize } = useComponentSize(size);
+  const ownerState = {
+    iconSize: currentSize
+  };
+  const htmlForId = useId();
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ownerState: { ...ownerState },
+      ...getPropDataTestId(RHF_NUMBER_INPUT_KEY_COMPONENT, RHFNumberInputSlots.root),
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          render: ({ field: { value, onChange }, fieldState: { error } }) => {
+            const onChangeLocal = (_event, newValue) => {
+              onChange(newValue);
+            };
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: htmlForId,
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage,
+                  size
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberInput,
+                {
+                  id: htmlForId,
+                  size,
+                  step,
+                  max,
+                  min,
+                  value,
+                  onChange: onChangeLocal,
+                  variant,
+                  disabled,
+                  startAdornment,
+                  endAdornment,
+                  error: !!error,
+                  ...others
+                }
+              ),
+              error?.message && /* @__PURE__ */ jsx(HelperError, { htmlFor: htmlForId, size, message: error.message })
+            ] });
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  RHFNumberInput as R
+};

package/components/hook-form/RHFNumberInput/RHFNumberInput.styles.js

@@ -0,0 +1,16 @@
+const rhfNumberInputStyles = {
+  /**
+   * Estilos para el slot `root`.
+   *
+   * Se utiliza para aplicar estilos personalizados al contenedor principal
+   * del componente `RHFInputNumberSpinner`.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1
+  })
+};
+export {
+  rhfNumberInputStyles as r
+};

package/components/hook-form/RHFNumberInput/constants.js

@@ -0,0 +1,4 @@
+const RHF_NUMBER_INPUT_KEY_COMPONENT = "M4LRHFNumberInput";
+export {
+  RHF_NUMBER_INPUT_KEY_COMPONENT as R
+};

package/components/hook-form/RHFNumberInput/slots/RHFNumberInputEnum.js

@@ -0,0 +1,7 @@
+var RHFNumberInputSlots = /* @__PURE__ */ ((RHFNumberInputSlots2) => {
+  RHFNumberInputSlots2["root"] = "root";
+  return RHFNumberInputSlots2;
+})(RHFNumberInputSlots || {});
+export {
+  RHFNumberInputSlots as R
+};

package/components/hook-form/RHFNumberInput/slots/RHFNumberInputSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material";
+import { R as RHF_NUMBER_INPUT_KEY_COMPONENT } from "../constants.js";
+import { r as rhfNumberInputStyles } from "../RHFNumberInput.styles.js";
+import { R as RHFNumberInputSlots } from "./RHFNumberInputEnum.js";
+const RootStyled = styled("div", {
+  name: RHF_NUMBER_INPUT_KEY_COMPONENT,
+  slot: RHFNumberInputSlots.root
+})(rhfNumberInputStyles?.root);
+export {
+  RootStyled as R
+};

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

@@ -13,4 +13,5 @@ export * from './RHFTextFieldPassword';
 export { RHFPeriod } from './RHFPeriod/RHFPeriod';
 export { getPeriodComponetsDictionary } from '../Period/dictionary';
 export { RHFRadioGroup } from './RHFRadioGroup';
+export { RHFNumberInput } from './RHFNumberInput/RHFNumberInput';
 export * from './RHFUpload';

package/index.js

@@ -36,11 +36,12 @@ import { R as R6 } from "./components/hook-form/RHFHelperError/index.js";
 import { R as R7 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
 import { g as g6 } from "./components/Period/dictionary.js";
 import { R as R8 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
-import { R as R9 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
-import { R as R10 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
-import { R as R11 } from "./components/hook-form/RHFTextField/RHFTextField.js";
-import { R as R12 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
-import { R as R13 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
+import { R as R9 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
+import { R as R10 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
+import { R as R11 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
+import { R as R12 } from "./components/hook-form/RHFTextField/RHFTextField.js";
+import { R as R13 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
+import { R as R14 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { B } from "./components/formatters/BooleanFormatter/BooleanFormatter.js";
 import { D as D2, u as u4 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g7 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
@@ -73,7 +74,7 @@ import { d, g as g13 } from "./components/CommonActions/dictionary.js";
 import { D as D5 } from "./components/DragResizeWindow/DragResizeWindow.js";
 import { d as d2 } from "./components/DragResizeWindow/classes/index.js";
 import { G } from "./components/GridLayout/GridLayout.js";
-import { R as R14 } from "./components/GridLayout/subcomponents/Responsive/index.js";
+import { R as R15 } from "./components/GridLayout/subcomponents/Responsive/index.js";
 import { c as c3, d as d3, e } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { i, k } from "./components/GridLayout/utils.js";
 import { w } from "./components/GridLayout/subcomponents/withSizeProvider/index.js";
@@ -127,8 +128,8 @@ import { H as H4 } from "./components/HelmetPage/index.js";
 import { P as P11 } from "./components/PropertyValue/PropertyValue.js";
 import { a as a9 } from "./components/MenuActions/dictionary.js";
 import { a as a10, M as M11 } from "./components/MenuActions/MenuActions.js";
-import { R as R15 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
-import { R as R16 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
+import { R as R16 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
+import { R as R17 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
 import { S as S3 } from "./components/ScrollBar/index.js";
 import { S as S4 } from "./components/SplitLayout/SplitLayout.js";
 import { T as T3 } from "./components/ToastContainer/ToastContainer.js";
@@ -182,12 +183,12 @@ import { T as T17 } from "./components/mui_extended/ToggleIconButton/constants.j
 import { T as T18 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonEnum.js";
 import { T as T19 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
 import { a as a13, D as D6, M as M13 } from "./components/areas/contexts/DynamicMFParmsContext/index.js";
-import { F, R as R17, u as u9 } from "./components/hook-form/RHFormContext/index.js";
+import { F, R as R18, u as u9 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g26 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u10 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a14, M as M14 } from "./contexts/ModalContext/index.js";
-import { a as a15, R as R18 } from "./contexts/RealTimeContext/RealTimeContext.js";
+import { a as a15, R as R19 } from "./contexts/RealTimeContext/RealTimeContext.js";
 import { u as u11 } from "./hooks/useFormAddEdit/index.js";
 import { u as u12 } from "./hooks/useModal/index.js";
 import { u as u13 } from "./hooks/useTab/index.js";
@@ -310,23 +311,24 @@ export {
   P11 as PropertyValue,
   R as RHFAutocomplete,
   R2 as RHFAutocompleteAsync,
-  R10 as RHFCheckbox,
-  R9 as RHFColorPicker,
+  R11 as RHFCheckbox,
+  R10 as RHFColorPicker,
   R3 as RHFDateTime,
   R6 as RHFHelperError,
   R4 as RHFMultiCheckbox,
+  R9 as RHFNumberInput,
   R7 as RHFPeriod,
   R8 as RHFRadioGroup,
   R5 as RHFSelect,
-  R11 as RHFTextField,
-  R12 as RHFTextFieldPassword,
-  R13 as RHFUploadImage,
-  R17 as RHFormProvider,
+  R12 as RHFTextField,
+  R13 as RHFTextFieldPassword,
+  R14 as RHFUploadImage,
+  R18 as RHFormProvider,
   a15 as RealTimeContext,
-  R18 as RealTimeProvider,
-  R15 as Resizable,
-  R16 as ResizableBox,
-  R14 as Responsive,
+  R19 as RealTimeProvider,
+  R16 as Resizable,
+  R17 as ResizableBox,
+  R15 as Responsive,
   S3 as ScrollBar,
   S as ScrollToTop,
   S6 as SectionCommercial,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.78",
+  "version": "9.1.79",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"