@m4l/components 9.3.11 → 9.3.12-JT270825.beta.1

package/components/Stepper/store/types.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { Step, StepperOwnerState, StepperProps } from '../types';
+export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTitle' | 'steps' | 'indicatorType' | 'orientation' | 'size' | 'visibilityData'> {
+    /**
+     *  "ownerState" estado a nivel de clases del componente
+     */
+    ownerState: StepperOwnerState;
+    /**
+     * "currentStep" step actual
+     */
+    currentStep: number;
+    /**
+     * "host_static_assets" ruta base de los assets estáticos
+     */
+    host_static_assets: string;
+    /**
+     * "environment_assets" ruta del entorno de assets
+     */
+    environment_assets: string;
+    /**
+     * "completedSteps" pasos completados
+     */
+    completedSteps: number[];
+    /**
+     * "stepValidationStatus" estado de validación por cada step
+     * - true: el paso es válido
+     */
+    stepValidationStatus: Record<number, boolean>;
+    /**
+     * "isValidating" indica si el stepper está en proceso de validación
+     */
+    isValidating: boolean;
+}
+export interface StepperStateWithActions extends StepperState {
+    actions: {
+        /**
+         * inicializa el estado del componente con los steps que provienen desde afuera
+         */
+        init: (steps: Array<Step>) => void;
+        /**
+         * Establece el paso actual
+         * @param currentStep - Índice del paso actual
+         */
+        setCurrentStep: (currentStep: number) => void;
+        /**
+         * Marca un paso como completado
+         * @param stepIndex - Índice del paso
+         */
+        setCompletedStep: (stepIndex: number) => void;
+        /**
+         * Establece el estado de validación de un paso
+         * @param stepIndex - Índice del paso
+         * @param isValid - Estado de validación del paso
+         */
+        setStepValidationStatus: (stepIndex: number, isValid: boolean) => void;
+        /**
+         * Retrocede al paso anterior válido
+         * @param formData - Datos del formulario para evaluar conditions
+         * @param visibilityData - Datos adicionales para evaluar conditions
+         */
+        prevStep: (formData?: Record<string, any>, visibilityData?: any) => void;
+        /**
+         * Valida el paso actual y avanza al siguiente si es válido
+         * @param validateFn - Función de validación
+         * @param formData - Datos del formulario para evaluar conditions
+         * @param visibilityData - Datos adicionales para evaluar conditions
+         */
+        nextStep: (validateFn: () => Promise<boolean>, formData?: Record<string, any>, visibilityData?: any) => Promise<boolean>;
+        /**
+         * resetStepper - Resetea el Stepper a su estado inicial
+         */
+        resetStepper: () => void;
+    };
+}
+export interface StepperContextProps extends StepperProps {
+    children: ReactNode;
+}
+export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'host_static_assets' | 'environment_assets' | 'indicatorType' | 'orientation' | 'visibilityData'>;

package/components/Stepper/subcomponents/ContentArea/index.d.ts

@@ -0,0 +1,6 @@
+import { ContentAreaProps } from '../../types';
+/**
+ * El componente ContentArea renderiza el área de contenido del Stepper.
+ * Contiene el encabezado con un icono, titulo y descripción, y el contenido del step actual.
+ */
+export declare function ContentArea(props: ContentAreaProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente WrapperIcon renderiza el icono del título del Stepper.
+ */
+export declare function WrapperIcon(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * El componente WrapperTitle renderiza el título y la descripción del step en el Stepper.
+ */
+export declare function WrapperTitle(): import("react/jsx-runtime").JSX.Element | null;

package/components/Stepper/subcomponents/StepArea/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * El componente StepArea renderiza el área de pasos del Stepper.
+ * Muestra solo los pasos que cumplen su condition según los datos del formulario.
+ * Utiliza el hook useStepper para obtener el estado actual y los pasos definidos.
+ */
+export declare function StepArea(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.d.ts

@@ -0,0 +1,5 @@
+import { IndicatorProps } from '../../../../types';
+/**
+ * El componente Indicator renderiza el indicador del paso actual
+ */
+export declare function Indicator(props: IndicatorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para cancelar el proceso del Stepper
+ */
+export declare function StepperCancelButton(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para avanzar al siguiente step del Stepper
+ */
+export declare function StepperNextButton(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para finalizar el Stepper y ejecutar onFinalSubmit
+ */
+export declare function StepperSubmitButton(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { StepperNextButton } from './StepperNextButton';
+export { StepperPrevButton } from './StepperPrevButton';
+export { StepperCancelButton } from './StepperCancelButton';
+export { StepperSubmitButton } from './StepperSubmitButton';

package/components/Stepper/subcomponents/StepperContent/index.d.ts

@@ -0,0 +1,7 @@
+import { StepperContentProps } from '../../types';
+/**
+ * Componente StepperContent - Contenedor que renderiza todos los Steps
+ * Cada Step maneja su propia lógica de renderizado condicional
+ * SOLO acepta componentes Step como hijos.
+ */
+export declare function StepperContent(props: StepperContentProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.d.ts

@@ -0,0 +1,6 @@
+import { StepProps } from '../../../../types';
+/**
+ * Componente Step - Representa un paso individual en el Stepper
+ * Solo se renderiza cuando el step actual coincide con stepKey Y la condition es true
+ */
+export declare function Step(props: StepProps): import("react/jsx-runtime").JSX.Element | null;

package/components/Stepper/subcomponents/StepperFooter/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperFooterProps } from '../../types';
+/**
+ * StepperFooter es el componente footer del Stepper que contiene las acciones de navegación.
+ * Puede incluir LeftActions y RightActions como children.
+ */
+export declare function StepperFooter(props: StepperFooterProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperFooterLeftActionsProps } from '../../../../types';
+/**
+ * StepperFooterLeftActions es un componente de guía de estilos para acciones del lado izquierdo del footer del Stepper.
+ * Puede recibir children para renderizar contenido personalizado.
+ */
+export declare function StepperFooterLeftActions(props: StepperFooterLeftActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperFooterRightActionsProps } from '../../../../types';
+/**
+ * StepperFooterRightActions es un componente de guía de estilos para acciones del lado derecho del footer del Stepper.
+ * Puede recibir children para renderizar contenido personalizado.
+ */
+export declare function StepperFooterRightActions(props: StepperFooterRightActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/types.d.ts

@@ -0,0 +1,156 @@
+import { ReactElement, ReactNode } from 'react';
+import { Theme } from '@mui/material/styles';
+import { Sizes } from '@m4l/styles';
+import { ContentAreaSlots, ContentSlots, StepperFooterSlots, StepperSlots } from './slots/StepperEnum';
+import { STEPPER_PREFIX_NAME } from './constants';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { Step as StepComponent } from './subcomponents/StepperContent/subcomponents/Step';
+export type Orientation = 'horizontal' | 'vertical';
+export type IndicatorType = 'number' | 'dot';
+export type FormData = Record<string, string | number | boolean | null | undefined>;
+export type VisibilityData = Record<string, string | number | boolean | null | undefined>;
+export type Step = {
+    /**
+     * Clave única que identifica el step.
+     */
+    key: string;
+    /**
+     * Título del step.
+     */
+    title: string;
+    /**
+     * Descripción del step.
+     */
+    description?: string;
+    /**
+     * Array con los campos que se deben validar en el step.
+     */
+    validationFields?: string[];
+    /**
+     * Función que determina si el step se debe mostrar.
+     * @param formData - Datos del formulario.
+     * @param visibilityData - Datos adicionales para evaluar visibilidad (ej: objectId).
+     * @returns true si el step se debe mostrar, false en caso contrario.
+     * Si no se proporciona, el step siempre se muestra.
+     */
+    visibilityCondition?: (formData?: FormData, visibilityData?: VisibilityData) => boolean;
+};
+export interface StepperProps {
+    /**
+     * Children opcional para inyectar componentes adicionales
+     */
+    children?: React.ReactNode;
+    /**
+     *  "storeId" identificador del store
+     */
+    storeId?: string;
+    /**
+     *  "storeDevtoolsEnabled" determina si se debe usar devtools para el store
+     */
+    storeDevtoolsEnabled?: boolean;
+    /**
+     * "visibleTitle": Propiedad que ejecuta condición para visualizar los titulos en el SteppArea
+     */
+    visibleTitle?: boolean;
+    /**
+     * Array con la configuración de cada step.
+     */
+    steps: Step[];
+    /**
+     * Datos adicionales para evaluar visibilityCondition de los steps.
+     * Por ejemplo, objectId para determinar si mostrar steps después del submit inicial.
+     */
+    visibilityData?: VisibilityData;
+    /**
+     * Indica que tipo de indicador se usará en el Stepper.
+     * Puede ser 'number' para números o 'dot' para puntos.
+     */
+    indicatorType?: IndicatorType;
+    /**
+     * "orientation" define la orientación del Stepper.
+     */
+    orientation?: Orientation;
+    /**
+     * Tamaño del componente, puede ser uno de los valores definidos en 'small' , 'medium'
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+/**
+ * Props del StepperContent
+ */
+export interface StepperContentProps {
+    /**
+     * Array de componentes Step
+     */
+    children: ReactElement<typeof StepComponent>[];
+}
+/**
+ * Props del Step
+ */
+export interface StepProps {
+    /**
+     * Clave única del step que determina cuándo se renderiza
+     */
+    stepKey: string;
+    /**
+     * Contenido del step
+     */
+    children: ReactNode;
+}
+/**
+ * Props del ContentArea
+ */
+export interface ContentAreaProps {
+    children: ReactNode;
+}
+/**
+ * Props del Indicator
+ */
+export interface IndicatorProps {
+    /**
+     * El número del paso actual.
+     */
+    step: number;
+    /**
+     * Indica si el paso es el actual.
+     */
+    currentStep: number;
+    /**
+     * El número total de pasos.
+     */
+    totalSteps: number;
+    /**
+     * El índice original del paso en el array completo de pasos.
+     * Se usa para buscar el estado de validación en stepValidationStatus.
+     */
+    originalStepIndex: number;
+}
+/**
+ * Props del StepperFooter
+ */
+export interface StepperFooterProps {
+    children?: ReactNode;
+}
+/**
+ * Props del StepperFooterLeftActions
+ */
+export interface StepperFooterLeftActionsProps {
+    children?: ReactNode;
+}
+/**
+ * Props del StepperFooterRightActions
+ */
+export interface StepperFooterRightActionsProps {
+    children?: ReactNode;
+}
+export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'> {
+    step?: number;
+    currentStep?: number;
+    totalSteps?: number;
+    orientation?: Orientation;
+    indicatorType?: IndicatorType;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    stepValidationStatus?: Record<number, boolean>;
+}
+export type StepperSlotsType = StepperSlots | ContentSlots | ContentAreaSlots | StepperFooterSlots;
+export type StepperStyles = M4LOverridesStyleRules<StepperSlotsType, typeof STEPPER_PREFIX_NAME, Theme>;

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

@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
 /**
  * TODO: Documentar
  */
-export declare function useCustomForm({ validationSchema, values, statusLoad }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
+export declare function useCustomForm({ validationSchema, values, statusLoad, mode }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
 /**
  * TODO: Documentar
  */

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

@@ -6,10 +6,11 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { F as FormProviderRoot } from "./styles.js";
 import { R as RHFormProviderUtilityClasses } from "./classes/index.js";
 const classes = RHFormProviderUtilityClasses();
-function useCustomForm({ validationSchema, values, statusLoad }) {
+function useCustomForm({ validationSchema, values, statusLoad, mode }) {
   const formMethods = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues: values
+    defaultValues: values,
+    ...mode && { mode }
   });
   useEffect(() => {
     if (statusLoad === "reload_values_provider") {
@@ -41,8 +42,8 @@ function FormProviderCustom(props) {
   return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(FormProviderRoot, { className: clsx(classes.root, className), onSubmit: handleSubmit(onSubmit), children }) });
 }
 function RHFormProvider(props) {
-  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className } = props;
-  const formMethods = useCustomForm({ validationSchema, statusLoad, values });
+  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
+  const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
   return /* @__PURE__ */ jsx(
     FormProviderCustom,
     {

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FieldValues, FormProviderProps as RHFormProviderProps } from 'react-hook-form';
+import { FieldValues, FormProviderProps as RHFormProviderProps, Mode } from 'react-hook-form';
 export type FormStatusLoad = 'initial' | 'new' | 'edit' | 'reload_values_provider' | 'ready' | 'error';
 export type FormInitialValues = FieldValues;
 export interface FormProviderProps {
@@ -9,10 +9,12 @@ export interface FormProviderProps {
     validationSchema: any;
     statusLoad?: FormStatusLoad;
     className?: string;
+    mode?: Mode;
 }
 export type FormProviderCustomProps = RHFormProviderProps & FormProviderProps;
 export interface CustomFormArguments {
     values: FormInitialValues;
     validationSchema: any;
     statusLoad?: FormStatusLoad;
+    mode?: Mode;
 }

package/components/mui_extended/Select/Select.js

@@ -176,6 +176,7 @@ const Select = forwardRef(
               paddingBottom: theme.vars.size.baseSpacings.sp3,
               paddingLeft: 0,
               paddingRight: 0,
+              maxHeight: "200px",
               "& .MuiList-root": {
                 padding: 0,
                 display: "flex",

package/components/mui_extended/Select/Select.styles.js

@@ -35,7 +35,12 @@ const selectStyles = {
         },
         "& .MuiSelect-select": {
           padding: `${theme.vars.size.baseSpacings.sp1}!important`,
-          minHeight: "unset"
+          minHeight: "unset",
+          maxHeight: "80px",
+          overflow: "auto",
+          boxSizing: "border-box",
+          display: "flex",
+          flexDirection: "column"
         },
         // Estilos para la variante text
         [`&.${SELECT_CLASSES.text}`]: {
@@ -69,7 +74,8 @@ const selectStyles = {
           (height) => {
             return {
               minHeight: height,
-              maxHeight: height
+              height: "fit-content",
+              maxHeight: "80px"
             };
           }
         )
@@ -88,7 +94,9 @@ const selectStyles = {
     display: "flex",
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1,
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    overflow: "auto",
+    flexShrink: 1
   }),
   arrowDown: {},
   renderValueTypography: () => ({

package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.d.ts

@@ -0,0 +1,11 @@
+import { Step } from '../../components/Stepper/types';
+import { GetStepsAndValidationSchemaProps } from './types';
+import * as Yup from 'yup';
+/**
+ * Hook personalizado que recibe un array de steps con validaciones y regresa todo listo para el Stepper
+ * Una sola configuración genera: validationSchema + steps + validationFields automáticamente
+ */
+export declare function getStepsAndValidationSchema({ steps, visibilityData, }: GetStepsAndValidationSchemaProps): {
+    validationSchema: Yup.ObjectSchema<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>, import('yup/lib/object').AssertsShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>>;
+    steps: Step[];
+};

package/helpers/getStepsAndValidationSchema/index.d.ts

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

package/helpers/getStepsAndValidationSchema/types.d.ts

@@ -0,0 +1,21 @@
+import { Step } from '../../components/Stepper/types';
+/**
+ * Configuración completa de un step con validaciones incluidas
+ */
+export interface StepWithValidation extends Omit<Step, 'validationFields'> {
+    /**
+     * Función de validación que retorna un objeto con esquemas Yup
+     * Ejemplo: ContactDataValidation
+     */
+    validationFunction?: () => Record<string, any>;
+}
+export interface GetStepsAndValidationSchemaProps {
+    /**
+     * Array de steps con sus validaciones incluidas
+     */
+    steps: StepWithValidation[];
+    /**
+     * Datos adicionales para visibilityCondition (ej: objectId)
+     */
+    visibilityData?: any;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.11",
+  "version": "9.3.12-JT270825.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/Stepper/Stepper.stories.d.ts

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StepperDecorator } from './subcomponents/StepperDecorator';
+declare const meta: Meta<typeof StepperDecorator>;
+type Story = StoryObj<typeof StepperDecorator>;
+/**
+ * Historia por default - Stepper básico sin visibilityConditions
+ */
+export declare const Default: Story;
+/**
+ * Historia con visibilityConditions - Stepper completo con submit intermedio y visibilityCondition
+ */
+export declare const WithVisibilityConditions: Story;
+/**
+ * Story que demuestra automáticamente errores de validación
+ * Play para mostrar errores cuando se hace submit sin llenar campos
+ */
+export declare const PVStepperValidationErrors: Story;
+/**
+ * Story que demuestra automáticamente el flujo de submit intermedio
+ * Play para llenar cada formulario, hacer submit y mostrar cómo aparecen los siguientes pasos
+ */
+export declare const PVStepperIntermediateSubmitFlow: Story;
+/**
+ * Story que demuestra automáticamente la navegación entre steps
+ * Play para mostrar el flujo de navegación con botones Siguiente y Anterior
+ */
+export declare const PVStepperNavigationFlow: Story;
+export default meta;

package/storybook/components/Stepper/api/userApi.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Simula la creación de un nuevo usuario
+ * @param formData - Datos del formulario de usuario
+ * @returns Promise con el usuario creado incluyendo el ID generado
+ */
+export declare const createUser: (formData: any) => Promise<any>;

package/storybook/components/Stepper/components/AdminPermissionsStep.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente para permisos de administración.
+ */
+export declare function AdminPermissionsStep(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/Stepper/components/CompanySocialMediaStep.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente para redes sociales de la empresa.
+ */
+export declare function CompanySocialMediaStep(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/Stepper/components/CompanyStep.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Paso de datos de empresa para el Stepper que contiene campos de formulario para información empresarial.
+ */
+export declare function CompanyStep(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/Stepper/components/ContactStep.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Paso de contacto para el Stepper que contiene campos de formulario para datos de contacto.
+ */
+export declare function ContactStep(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/Stepper/components/ExtraInformationStep.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Paso de información adicional para el Stepper que contiene campos de formulario para exta información del usuario
+ */
+export declare function ExtraInformationStep(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/Stepper/components/ModulePermissionsStep.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente para permisos de módulos.
+ */
+export declare function ModulePermissionsStep(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/Stepper/components/PrivilegesStep.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Paso de privilegios para el Stepper que contiene campos de formulario para los privilegios del usuario.
+ */
+export declare function PrivilegesStep(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/Stepper/helpers/useSteps.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Hook personalizado para manejar la configuración de steps del Stepper en Storybook
+ */
+export declare function useSteps(withVisibilityConditions?: boolean): {
+    validationSchema: import('yup').ObjectSchema<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>, import('yup/lib/object').AssertsShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>>;
+    steps: import('../../../../src/components/Stepper/types').Step[];
+    visibilityData: {
+        objectId: any;
+    };
+    onSubmit: (data: any) => Promise<void>;
+    formValues: {
+        first_name: string;
+        last_name: string;
+        email: string;
+        first_phone: string;
+        second_phone: string;
+        requires_permissions: boolean;
+        user_type: string;
+        role: string;
+        can_manage_users: boolean;
+        can_manage_roles: boolean;
+        can_access_system_config: boolean;
+        can_view_reports: boolean;
+        can_edit_content: boolean;
+        can_delete_records: boolean;
+        address: string;
+        country: string;
+        city: string;
+        postal_code: string;
+        company_name: string;
+        company_position: string;
+        company_department: string;
+        company_phone: string;
+        company_email: string;
+        company_website: string;
+        company_facebook: string;
+        company_twitter: string;
+        company_linkedin: string;
+        company_instagram: string;
+        company_youtube: string;
+        company_tiktok: string;
+    };
+};

package/storybook/components/Stepper/subcomponents/StepperDecorator.d.ts

@@ -0,0 +1,9 @@
+import { StepperProps } from '../../../../src/components/Stepper/types';
+interface StepperDecoratorProps extends Omit<StepperProps, 'steps'> {
+    withVisibilityConditions?: boolean;
+}
+/**
+ * Decorator para Storybook
+ */
+export declare function StepperDecorator({ withVisibilityConditions, }: StepperDecoratorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/storybook/components/Stepper/validations/CompanyData.d.ts

@@ -0,0 +1,18 @@
+import * as Yup from 'yup';
+/**
+ * Validaciones para el formulario de datos de empresa
+ */
+export declare function CompanyDataValidation(): {
+    company_name: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+    company_position: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+    company_department: Yup.StringSchema<string | null | undefined, import('yup/lib/types').AnyObject, string | null | undefined>;
+    company_phone: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+    company_email: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+    company_website: Yup.StringSchema<string | null | undefined, import('yup/lib/types').AnyObject, string | null | undefined>;
+    company_facebook: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+    company_twitter: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+    company_linkedin: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+    company_instagram: Yup.StringSchema<string | null | undefined, import('yup/lib/types').AnyObject, string | null | undefined>;
+    company_youtube: Yup.StringSchema<string | null | undefined, import('yup/lib/types').AnyObject, string | null | undefined>;
+    company_tiktok: Yup.StringSchema<string | null | undefined, import('yup/lib/types').AnyObject, string | null | undefined>;
+};