@m4l/components 9.3.19-BE093025-beta.1 → 9.3.19-BE101025-beta.2

package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.js

@@ -21,15 +21,6 @@ function Indicator(props) {
   );
   const { host_static_assets, environment_assets } = useEnvironment();
   const { currentSize } = useComponentSize(size);
-  const ownerState = {
-    size: currentSize,
-    currentStep,
-    step,
-    totalSteps,
-    orientation,
-    indicatorType,
-    stepValidationStatus
-  };
   const isMobile = useIsMobile();
   const effectiveIndicatorType = useMemo(() => {
     return isMobile ? "dot" : indicatorType;
@@ -45,6 +36,20 @@ function Indicator(props) {
       hasBeenValidated: validated
     };
   }, [currentStep, originalStepIndex, stepValidationStatus]);
+  const ownerState = {
+    size: currentSize,
+    currentStep,
+    step,
+    totalSteps,
+    orientation,
+    indicatorType,
+    stepValidationStatus,
+    originalStepIndex,
+    isCompleted,
+    isCurrent: currentStep === originalStepIndex,
+    isValidStep,
+    hasBeenValidated
+  };
   return /* @__PURE__ */ jsx(IndicatorStyled, { ownerState, children: hasBeenValidated && !isValidStep ? (
     // Mostrar error solo si ha sido validado y es inválido
     /* @__PURE__ */ jsx(
@@ -67,7 +72,10 @@ function Indicator(props) {
     )
   ) : (
     // Mostrar estado normal (número o dot) para pasos no validados o actuales
-    /* @__PURE__ */ jsx(TextNumberStyled, { variant: "body", ownerState: { currentStep, step }, children: effectiveIndicatorType === "number" ? step + 1 : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TextNumberStyled, { variant: "body", ownerState, children: effectiveIndicatorType === "number" ? (
+      // Solo mostrar número si el step es visible (step >= 0)
+      step >= 0 ? step + 1 : ""
+    ) : /* @__PURE__ */ jsx(
       Icon,
       {
         src: `${host_static_assets}/${environment_assets}/${currentStep === originalStepIndex ? pathIcons.dotSelected : pathIcons.dotOutline}`,

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.d.ts

@@ -1,4 +1,5 @@
+import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para cancelar el proceso del Stepper
  */
-export declare function StepperCancelButton(): import("react/jsx-runtime").JSX.Element;
+export declare function StepperCancelButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js

@@ -1,22 +1,55 @@
 import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useFormContext, useFormState } from "react-hook-form";
 import { u as useStepperActions } from "../../../hooks/useStepperActions/index.js";
-import { D as DICTIONARY } from "../../../dictionary.js";
+import { D as DICTIONARY$1 } from "../../../dictionary.js";
+import { D as DICTIONARY } from "../../../../CommonActions/dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
+import { u as useModal } from "../../../../../hooks/useModal/index.js";
+import { u as useWindowToolsMF } from "../../../../WindowBase/hooks/useWindowToolsMF/index.js";
+import { W as WindowConfirm } from "../../../../WindowConfirm/WindowConfirm.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperCancelButton() {
+function StepperCancelButton(props) {
+  const { label, ...rest } = props;
   const { getLabel } = useModuleDictionary();
   const { cancelAction } = useStepperActions();
-  const handleCancel = () => {
+  const { openModal } = useModal();
+  const { close: closeWindow } = useWindowToolsMF();
+  const { control } = useFormContext();
+  const { isDirty } = useFormState({
+    control
+  });
+  const onConfirmQuit = useCallback(() => {
     cancelAction();
-  };
+    closeWindow();
+  }, [cancelAction, closeWindow]);
+  const handleCancel = useCallback(() => {
+    if (isDirty) {
+      openModal({
+        window: /* @__PURE__ */ jsx(
+          WindowConfirm,
+          {
+            variant: "warning",
+            title: getLabel(DICTIONARY.CONFIRM_QUIT_TITLE),
+            msg: getLabel(DICTIONARY.CONFIRM_QUIT_MSG),
+            onClickIntro: onConfirmQuit
+          }
+        ),
+        variant: "warning"
+      });
+    } else {
+      onConfirmQuit();
+    }
+  }, [getLabel, isDirty, openModal, onConfirmQuit]);
   return /* @__PURE__ */ jsx(
     Button,
     {
       type: "button",
-      label: getLabel(DICTIONARY.LABEL_CANCEL_BUTTON),
+      label: label || getLabel(DICTIONARY$1.LABEL_CANCEL_BUTTON),
       variant: "outlined",
       color: "default",
       onClick: handleCancel,
+      ...rest,
       "data-testid": "stepper-cancel-button"
     }
   );

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.d.ts

@@ -1,4 +1,5 @@
+import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para avanzar al siguiente step del Stepper
  */
-export declare function StepperNextButton(): import("react/jsx-runtime").JSX.Element;
+export declare function StepperNextButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js

@@ -6,7 +6,8 @@ import { D as DICTIONARY } from "../../../dictionary.js";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperNextButton() {
+function StepperNextButton(props) {
+  const { label, ...rest } = props;
   const { nextStepAction } = useStepperActions();
   const isMobile = useIsMobile();
   const { getLabel } = useModuleDictionary();
@@ -28,12 +29,13 @@ function StepperNextButton() {
     Button,
     {
       type: "button",
-      label: getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
+      label: label || getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
       variant: "contained",
       color: "primary",
       onClick: handleNext,
       endIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowRight}`,
-      "data-testid": "stepper-next-button"
+      "data-testid": "stepper-next-button",
+      ...rest
     }
   );
 }

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.d.ts

@@ -1,4 +1,5 @@
+import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para ir al step anterior del Stepper
  */
-export declare function StepperPrevButton(): import("react/jsx-runtime").JSX.Element | null;
+export declare function StepperPrevButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js

@@ -7,7 +7,8 @@ import { useIsMobile } from "@m4l/graphics";
 import { D as DICTIONARY } from "../../../dictionary.js";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperPrevButton() {
+function StepperPrevButton(props) {
+  const { label, ...rest } = props;
   const { currentStep } = useStepper((state) => ({
     currentStep: state.currentStep
   }));
@@ -35,12 +36,13 @@ function StepperPrevButton() {
     Button,
     {
       type: "button",
-      label: !isMobile ? getLabel(DICTIONARY.LABEL_PREV_BUTTON) : "",
+      label: label || getLabel(DICTIONARY.LABEL_PREV_BUTTON),
       variant: "outlined",
       color: "default",
       onClick: handlePrev,
       startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowLeft}`,
-      "data-testid": "stepper-prev-button"
+      "data-testid": "stepper-prev-button",
+      ...rest
     }
   );
 }

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.d.ts

@@ -1,4 +1,5 @@
+import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para finalizar el Stepper y ejecutar onFinalSubmit
  */
-export declare function StepperSubmitButton(): import("react/jsx-runtime").JSX.Element;
+export declare function StepperSubmitButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js

@@ -2,16 +2,18 @@ import { jsx } from "react/jsx-runtime";
 import { D as DICTIONARY } from "../../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperSubmitButton() {
+function StepperSubmitButton(props) {
+  const { label, ...rest } = props;
   const { getLabel } = useModuleDictionary();
   return /* @__PURE__ */ jsx(
     Button,
     {
       type: "submit",
-      label: getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
+      label: label || getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
       variant: "contained",
       color: "primary",
-      "data-testid": "stepper-submit-button"
+      "data-testid": "stepper-submit-button",
+      ...rest
     }
   );
 }

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js

@@ -12,28 +12,47 @@ function Step(props) {
     steps: state.steps,
     visibilityData: state.visibilityData
   }));
-  const currentStepConfig = useMemo(() => {
-    return steps[currentStep];
-  }, [steps, currentStep]);
   const stepConfig = useMemo(() => {
     return steps.find((step) => step.key === stepKey);
   }, [steps, stepKey]);
   const isStepVisible = useMemo(() => {
-    if (!currentStepConfig) {
-      return false;
-    }
-    if (stepKey !== currentStepConfig.key) {
+    if (!stepConfig) {
       return false;
     }
-    if (stepConfig && !evaluateVisibilityStepCondition(
+    const meetsVisibilityCondition = evaluateVisibilityStepCondition(
       stepConfig,
       formValues || {},
       visibilityData
-    )) {
+    );
+    if (!meetsVisibilityCondition) {
+      return false;
+    }
+    const currentStepConfig = steps[currentStep];
+    if (!currentStepConfig) {
+      return false;
+    }
+    if (evaluateVisibilityStepCondition(currentStepConfig, formValues || {}, visibilityData)) {
+      return stepKey === currentStepConfig.key;
+    }
+    const visibleStepsUpToCurrent = [];
+    for (let i = 0; i <= currentStep; i++) {
+      const step = steps[i];
+      if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)) {
+        visibleStepsUpToCurrent.push(step);
+      }
+    }
+    if (visibleStepsUpToCurrent.length === 0) {
+      for (let i = currentStep + 1; i < steps.length; i++) {
+        const step = steps[i];
+        if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)) {
+          return stepKey === step.key;
+        }
+      }
       return false;
     }
-    return true;
-  }, [currentStepConfig, stepKey, stepConfig, formValues, visibilityData]);
+    const activeVisibleStep = visibleStepsUpToCurrent[visibleStepsUpToCurrent.length - 1];
+    return stepKey === activeVisibleStep.key;
+  }, [currentStep, stepKey, stepConfig, steps, formValues, visibilityData]);
   return /* @__PURE__ */ jsx(StepContentStyled, { ownerState: { isStepVisible }, children });
 }
 export {

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js

@@ -1,19 +1,29 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useMemo } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
 import { m as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
-import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
 import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
+import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
 function StepperFooterRightActions(props) {
   const { children } = props;
   const isLastVisibleValidStep = useIsLastVisibleValidStep();
-  const childrenWithoutNextButton = useMemo(() => {
-    if (!isLastVisibleValidStep) {
-      return children;
-    }
+  const [hasCustomSubmitButton, setHasCustomSubmitButton] = useState(false);
+  useEffect(() => {
+    const hasCustomButton = React.Children.toArray(children).some((child) => {
+      if (React.isValidElement(child)) {
+        return child.type === StepperSubmitButton;
+      }
+      return false;
+    });
+    setHasCustomSubmitButton(hasCustomButton);
+  }, [children]);
+  const filteredChildren = useMemo(() => {
     return React.Children.toArray(children).filter((child) => {
       if (React.isValidElement(child)) {
-        if (child.type === StepperNextButton) {
+        if (!isLastVisibleValidStep && child.type === StepperSubmitButton) {
+          return false;
+        }
+        if (isLastVisibleValidStep && child.type === StepperNextButton) {
           return false;
         }
       }
@@ -21,10 +31,10 @@ function StepperFooterRightActions(props) {
     });
   }, [children, isLastVisibleValidStep]);
   const submitButton = useMemo(() => {
-    return isLastVisibleValidStep ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
-  }, [isLastVisibleValidStep]);
+    return isLastVisibleValidStep && !hasCustomSubmitButton ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
+  }, [isLastVisibleValidStep, hasCustomSubmitButton]);
   return /* @__PURE__ */ jsxs(StepperFooterRightActionsStyled, { children: [
-    childrenWithoutNextButton,
+    filteredChildren,
     submitButton
   ] });
 }

package/components/Stepper/types.d.ts

@@ -5,6 +5,7 @@ import { ContentAreaSlots, ContentSlots, StepperFooterSlots, StepperSlots } from
 import { STEPPER_PREFIX_NAME } from './constants';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { Step as StepComponent } from './subcomponents/StepperContent/subcomponents/Step';
+import { ButtonProps } from '../mui_extended/Button';
 export type Orientation = 'horizontal' | 'vertical';
 export type IndicatorType = 'number' | 'dot';
 export type FormData = Record<string, string | number | boolean | null | undefined>;
@@ -145,6 +146,12 @@ export interface StepperFooterProps {
 export interface StepperFooterLeftActionsProps {
     children?: ReactNode;
 }
+/**
+ * Props para los botones del Stepper que extienden las props de Button de mui_extended
+ */
+export interface StepperButtonProps extends Omit<ButtonProps, 'label'> {
+    label?: string;
+}
 /**
  * Props del StepperFooterRightActions
  */

package/components/WindowBase/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-export declare const WINDOW_BASE_CLASSES: Record<string, string>;
+export declare const WINDOW_BASE_CLASSES: Record<"wrapperWindowBase" | "contentWindowBase" | "headerContentWindowBase" | "headerTitleWindowBase" | "headerSubTitleWindowBase" | "pointIcon" | "containerTitleSubtitle" | "headerIconWindowBase" | "menuActionsWindowBase" | "iconsWrapperWindowBase" | "headerWindowComponent" | "linearProgressIndeterminate" | "contentEditionInfo" | "windowContainerComponent" | "toastContainer" | "containerLeftActions", string>;

package/components/extended/React-Json-Viewer/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const REACT_JSON_VIEWER_KEY_COMPONENT = "M4LReactJsonViewer";
-export declare const REACT_JSON_VIEWER_CLASSES: Record<string, string>;
+export declare const REACT_JSON_VIEWER_CLASSES: Record<"root", string>;

package/components/extended/React-resizable-panels/SplitLayout.js

@@ -32,7 +32,7 @@ const SplitLayout = (props) => {
               splitPosition
             },
             defaultSize: defaultMasterSize,
-            className: classes.master,
+            className: classes.splitMaster,
             children: firstPartMemo
           }
         ),

package/components/formatters/ChipStatusFormatter/constants.d.ts

@@ -2,4 +2,4 @@
  * Clave del componente ChipStatusFormatter
  */
 export declare const CHIP_STATUS_FORMATTER_KEY_COMPONENT = "M4LChipStatusFormatter";
-export declare const CHIP_STATUS_FORMATTER_CLASSES: Record<string, string>;
+export declare const CHIP_STATUS_FORMATTER_CLASSES: Record<"root" | "columnWrapper", string>;

package/components/formatters/EditLabelFormatter/EditLabelFormatter.d.ts

@@ -0,0 +1,5 @@
+import { EditLabelFormatterProps } from './types';
+/**
+ * Formatter para mostrar un chip en función del estado determinado por el status
+ */
+export declare const EditLabelFormatter: (props: EditLabelFormatterProps) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/EditLabelFormatter/EditLabelFormatter.styles.d.ts

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

package/components/formatters/EditLabelFormatter/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Clave del componente ChipStatusFormatter
+ */
+export declare const EDIT_LABEL_FORMATTER_KEY_COMPONENT = "M4LEditLabelFormatter";
+export declare const EDIT_LABEL_FORMATTER_CLASSES: Record<"root" | "columnWrapper", string>;

package/components/formatters/EditLabelFormatter/index.d.ts

@@ -0,0 +1,2 @@
+export { EditLabelFormatter } from './EditLabelFormatter';
+export type { EditLabelFormatterProps } from './types';

package/components/formatters/EditLabelFormatter/slots/EditLabelFormatterEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum EditLabelFormatterSlots {
+    root = "root",
+    columnWrapper = "columnWrapper"
+}

package/components/formatters/EditLabelFormatter/slots/EditLabelFormatterSlots.d.ts

@@ -0,0 +1,5 @@
+/**
+ * componente root del ChipStatusFormatter
+ */
+export declare const EditLabelFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../EditLabel').EditLabelProps, keyof import('../../../EditLabel').EditLabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const EditLabelFormatterColumnWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/formatters/EditLabelFormatter/test/EditLabelFormatter.test.d.ts

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

package/components/formatters/EditLabelFormatter/types.d.ts

@@ -0,0 +1,23 @@
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { EDIT_LABEL_FORMATTER_KEY_COMPONENT } from './constants';
+import { EditLabelFormatterSlots as Slots } from './slots/EditLabelFormatterEnum';
+import { Theme } from '@mui/material';
+import { EditLabelProps } from '../../EditLabel/types';
+export type ChipStatusKey = string | number;
+export interface EditLabelFormatterProps extends Pick<EditLabelProps, 'label' | 'onChange' | 'size' | 'fieldWidth' | 'className'> {
+    /**
+     * Componente personalizado
+     */
+    Component?: React.ElementType;
+    /**
+     * Clase CSS del componente root
+     */
+    className?: string;
+    /**
+     * ID de prueba del componente
+     */
+    dataTestid?: string;
+}
+export type EditLabelFormatterOwnerState = {};
+export type EditLabelFormatterSlotsType = keyof typeof Slots;
+export type EditLabelFormatterStyles = M4LOverridesStyleRules<keyof typeof Slots, typeof EDIT_LABEL_FORMATTER_KEY_COMPONENT, Theme>;

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

@@ -21,7 +21,10 @@ function RHFAutocomplete(props) {
     mandatory,
     mandatoryMessage,
     multiple,
-    refresh
+    refresh,
+    startAdornment,
+    getOptionalStartAdornment,
+    getOptionalEndAdornment
     // onChange: onChangeRHF,
   } = props;
   const htmlForId = useId();
@@ -112,7 +115,10 @@ function RHFAutocomplete(props) {
                   onClose: onCloseLocal,
                   size,
                   value,
-                  htmlFor: htmlForId
+                  htmlFor: htmlForId,
+                  startAdornment,
+                  getOptionalStartAdornment: getOptionalStartAdornment ? (option) => getOptionalStartAdornment(option) : () => null,
+                  getOptionalEndAdornment: getOptionalEndAdornment ? (option) => getOptionalEndAdornment(option) : () => null
                 }
               ),
               error?.message ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -5,6 +5,7 @@ import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { RFHAutocompleteSlots } from './slots';
 import { LabelProps } from '../../Label/types';
+import { AutocompleteProps } from '../../mui_extended/Autocomplete/types';
 export type GetOptionString<T> = (option: T | null) => string;
 export type RHFAutocompleteVariants = 'outlined' | 'text';
 export type RHFAutocompleteType = 'text' | 'image';
@@ -46,6 +47,18 @@ export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefi
         message: string;
     };
     renderInput?: MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'];
+    /**
+     * Icono o adorno que se muestra al inicio del autocomplete.
+     */
+    startAdornment?: AutocompleteProps<T, Multiple>['startAdornment'];
+    /**
+     * Icono o adorno inicial que se muestra en cada opción del autocomplete.
+     */
+    getOptionalEndAdornment?: AutocompleteProps<T, Multiple>['getOptionalEndAdornment'];
+    /**
+     * Icono o adorno final que se muestra en cada opción del autocomplete.
+     */
+    getOptionalStartAdornment?: AutocompleteProps<T, Multiple>['getOptionalStartAdornment'];
 }
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.

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

@@ -22,7 +22,10 @@ function RHFAutocompleteAsync(props) {
     multiple,
     disabled,
     skeletonWidth,
-    responseToCamelCase
+    responseToCamelCase,
+    startAdornment,
+    getOptionalStartAdornment,
+    getOptionalEndAdornment
   } = props;
   const [state, dispatch] = useReducer(
     RHFAutocompleteAsyncReducer(onChangeFilterParms),
@@ -87,7 +90,10 @@ function RHFAutocompleteAsync(props) {
       multiple,
       disabled,
       onClose: onCloseLocal,
-      skeletonWidth
+      skeletonWidth,
+      startAdornment,
+      getOptionalStartAdornment,
+      getOptionalEndAdornment
     }
   );
 }

package/components/hook-form/RHFCheckbox/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const RHF_CHECKBOX_KEY_COMPONENT = "M4LRHFCheckbox";
-export declare const TEXT_FIELD_CLASSES: Record<string, string>;
+export declare const TEXT_FIELD_CLASSES: Record<"root" | "checkBox" | "containerCheckTypography" | "labelComponent", string>;

package/components/hook-form/RHFSelect/constants.d.ts

@@ -5,4 +5,4 @@ export declare const RHFSELECT_COMPONENT_KEY = "RHFSelect";
 /**
  * Clases CSS generadas dinámicamente para el componente RHFSelect.
  */
-export declare const RHFSELECT_CLASSES: Record<string, string>;
+export declare const RHFSELECT_CLASSES: Record<"select" | "root" | "label" | "helperError", string>;

package/components/hook-form/RHFUpload/RHFUploadSingleFile/constants.d.ts

@@ -1,5 +1,29 @@
+import { RHFUploadSingleFileSlots } from './slots/RHFUploadSingleFileEnum';
 export declare const RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT = "M4LRHFUploadSingleFile";
-export declare const RHF_UPLOAD_SINGLE_FILE_CLASSES: Record<string, string>;
+export declare const RHF_UPLOAD_SINGLE_FILE_COMPLEMENTARY_CLASSES: {
+    root: RHFUploadSingleFileSlots.root;
+    label: RHFUploadSingleFileSlots.label;
+    helperError: RHFUploadSingleFileSlots.helperError;
+    containerDropZone: RHFUploadSingleFileSlots.containerDropZone;
+    dropZone: RHFUploadSingleFileSlots.dropZone;
+    image: RHFUploadSingleFileSlots.image;
+    containerBlockContent: RHFUploadSingleFileSlots.containerBlockContent;
+    blockContentGroup: RHFUploadSingleFileSlots.blockContentGroup;
+    illustrationUpload: RHFUploadSingleFileSlots.illustrationUpload;
+    title: RHFUploadSingleFileSlots.title;
+    description: RHFUploadSingleFileSlots.description;
+    divider: RHFUploadSingleFileSlots.divider;
+    dividerText: RHFUploadSingleFileSlots.dividerText;
+    button: RHFUploadSingleFileSlots.button;
+    containerPreview: RHFUploadSingleFileSlots.containerPreview;
+    containerNameSize: RHFUploadSingleFileSlots.containerNameSize;
+    imagePreview: RHFUploadSingleFileSlots.imagePreview;
+    namePreview: RHFUploadSingleFileSlots.namePreview;
+    sizePreview: RHFUploadSingleFileSlots.sizePreview;
+    closePreview: RHFUploadSingleFileSlots.closePreview;
+    linearProgress: string;
+};
+export declare const RHF_UPLOAD_SINGLE_FILE_CLASSES: Record<"title" | "divider" | "button" | "root" | "label" | "image" | "description" | "helperError" | "containerDropZone" | "dropZone" | "containerBlockContent" | "blockContentGroup" | "illustrationUpload" | "dividerText" | "containerPreview" | "containerNameSize" | "imagePreview" | "namePreview" | "sizePreview" | "closePreview" | "linearProgress", string>;
 export declare const DEFAULT_MAX_FILE_SIZE: number;
 export declare const FILES_ICONS: {
     readonly 'application/pdf': "frontend/components/RHF_upload_single_file/assets/icons/application_pdf.svg";

package/components/hook-form/RHFUpload/RHFUploadSingleFile/constants.js

@@ -1,7 +1,11 @@
 import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
 import { R as RHFUploadSingleFileSlots } from "./slots/RHFUploadSingleFileEnum.js";
 const RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT = "M4LRHFUploadSingleFile";
-const RHF_UPLOAD_SINGLE_FILE_CLASSES = getComponentClasses(RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT, RHFUploadSingleFileSlots);
+const RHF_UPLOAD_SINGLE_FILE_COMPLEMENTARY_CLASSES = {
+  linearProgress: "linearProgress-linearProgress",
+  ...RHFUploadSingleFileSlots
+};
+const RHF_UPLOAD_SINGLE_FILE_CLASSES = getComponentClasses(RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT, RHF_UPLOAD_SINGLE_FILE_COMPLEMENTARY_CLASSES);
 const DEFAULT_MAX_FILE_SIZE = 100 * 1024 * 1024;
 const PATH_ICONS = "frontend/components/RHF_upload_single_file/assets/icons";
 const FILES_ICONS = {