@m4l/components 9.3.13-JT02092025.beta.1 → 9.3.13-JT02092025.beta.3

package/components/Stepper/Stepper.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useMemo, Children, isValidElement, cloneElement } from "react";
+import clsx from "clsx";
 import { useFlagsPresent, CommonFlags } from "@m4l/core";
 import { S as StepperRootStyled, C as ContentSectionStyled } from "./slots/StepperSlot.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
@@ -12,7 +13,7 @@ import { S as StepperContent } from "./subcomponents/StepperContent/index.js";
 import { u as useStickyStepperFooter } from "./hooks/useStickyStepperFooter/index.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 function Stepper(props) {
-  const { orientation, size, children } = props;
+  const { orientation, size, children, className } = props;
   const { currentSize } = useComponentSize(size);
   const containerRef = useRef(null);
   const contentSectionRef = useRef(null);
@@ -64,7 +65,7 @@ function Stepper(props) {
   if (!hasPresentFlags) {
     return null;
   }
-  return /* @__PURE__ */ jsx(StepperProvider, { ...props, children: /* @__PURE__ */ jsxs(StepperRootStyled, { className: classRoot, children: [
+  return /* @__PURE__ */ jsx(StepperProvider, { ...props, children: /* @__PURE__ */ jsxs(StepperRootStyled, { className: clsx(classRoot, className), children: [
     /* @__PURE__ */ jsxs(ContentSectionStyled, { ownerState, children: [
       /* @__PURE__ */ jsx(StepArea, {}),
       /* @__PURE__ */ jsx(ContentArea, { children: stepperContent })

package/components/Stepper/Stepper.styles.js

@@ -8,7 +8,7 @@ const stepperStyles = {
     display: "flex",
     flexDirection: "column",
     justifyContent: ownerState?.stepperFooterSticky ? "flex-start" : "space-between",
-    background: "red",
+    background: theme.vars.palette.background.default,
     width: "100%",
     height: "100%",
     borderRadius: theme.vars.size.borderRadius.r1
@@ -138,12 +138,6 @@ const stepperStyles = {
     const isLastStep = step === totalSteps - 1;
     const isValidStep = ownerState?.stepValidationStatus?.[step] ?? true;
     return {
-      ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => {
-        return {
-          width: size,
-          height: size
-        };
-      }),
       ...ownerState?.orientation === "horizontal" ? {
         marginTop: theme.generalSettings.isMobile ? "6px" : theme.vars.size.baseSpacings.sp1
       } : {},
@@ -169,7 +163,11 @@ const stepperStyles = {
           height: theme.vars.size.baseSpacings.sp12,
           borderLeft: `1px ${isCompleted ? "solid" : "dashed"} ${isCompleted ? theme.vars.palette.primary.enabled : theme.vars.palette.border.default}`
         }
-      }
+      },
+      ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => ({
+        width: size,
+        height: size
+      }))
     };
   },
   /**
@@ -213,17 +211,15 @@ const stepperStyles = {
    * Estilos para el contenedor del icono del titulo del Stepper.
    */
   wrapperIcon: ({ theme, ownerState }) => ({
-    ...getSizeStyles(theme, ownerState?.size || "medium", "box", (size) => {
-      return {
-        width: size,
-        height: size
-      };
-    }),
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     background: theme.vars.palette.primary.enabledOpacity,
-    borderRadius: theme.vars.size.borderRadius["r1-5"]
+    borderRadius: theme.vars.size.borderRadius["r1-5"],
+    ...getSizeStyles(theme, ownerState?.size || "medium", "box", (size) => ({
+      width: size,
+      height: size
+    }))
   }),
   /**
    * Estilos para el título del Stepper.
@@ -238,12 +234,10 @@ const stepperStyles = {
    * Estilos para el icono del Stepper.
    */
   icon: ({ theme, ownerState }) => ({
-    ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => {
-      return {
-        width: size,
-        height: size
-      };
-    })
+    ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => ({
+      width: size,
+      height: size
+    }))
   }),
   /**
    * Estilos para el título del Stepper.

package/components/Stepper/types.d.ts

@@ -78,6 +78,10 @@ export interface StepperProps {
      * Tamaño del componente, puede ser uno de los valores definidos en 'small' , 'medium'
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Clase personalizada para el Stepper.
+     */
+    className?: string;
 }
 /**
  * Props del StepperContent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.13-JT02092025.beta.1",
+  "version": "9.3.13-JT02092025.beta.3",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {