@m4l/components 9.67.2 → 9.68.0

package/components/Stepper/Stepper.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Stepper/Stepper.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,aAAa,EAAE,aAmb3B,CAAC"}
+{"version":3,"file":"Stepper.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Stepper/Stepper.styles.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,aAAa,EAAE,MAAM,SAAS,CAAC;AAqB3D,eAAO,MAAM,aAAa,EAAE,aA6jB3B,CAAC"}

package/components/Stepper/Stepper.styles.js

@@ -1,52 +1,66 @@
-import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
-const c = {
+import { getSizeStyles as x } from "../../utils/getSizeStyles/getSizeStyles.js";
+const k = (e, i) => {
+  const s = i?.originalStepIndex, t = typeof s == "number" && i?.stepValidationStatus?.[s] === !1, r = i?.indicatorType === "number" && !t ? "base" : "case";
+  return e.vars.size.desktop[i?.size || "medium"][r];
+}, z = {
   /**
    *
    * Estilos para el contenedor principal del Stepper.
    */
-  stepperRoot: ({ theme: i }) => ({
+  stepperRoot: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
     justifyContent: "flex-start",
-    background: i.vars.palette.background.default,
+    background: e.vars.palette.background.default,
     width: "100%",
     height: "100%",
-    borderRadius: i.vars.size.borderRadius.r1
+    borderRadius: e.vars.size.borderRadius.r1
   }),
   /**
    * Estilos para la sección que contiene los pasos del Stepper.
    */
-  contentSection: ({ theme: i, ownerState: e }) => ({
+  contentSection: ({ theme: e, ownerState: i }) => ({
     display: "flex",
     flex: 1,
     height: "100%",
     overflow: "hidden",
-    gap: i.vars.size.baseSpacings.sp6,
-    ...e?.orientation === "vertical" || i.generalSettings.isMobile ? {
+    ...i?.orientation === "vertical" || e.generalSettings.isMobile ? {
+      gap: e.vars.size.baseSpacings.sp6,
       flexDirection: "column"
     } : {
+      gap: e.vars.size.baseSpacings.sp5,
       flexDirection: "row"
     }
   }),
   /**
    * Estilos para el contenido del paso dentro del Stepper.
    */
-  stepContent: ({ ownerState: i }) => ({
+  stepContent: ({ ownerState: e }) => ({
     height: "100%",
-    display: i?.isStepVisible ? "flex" : "none",
+    display: e?.isStepVisible ? "flex" : "none",
     flexDirection: "column"
   }),
   /**
    * Estilos para la sección que contiene los botones de acción del Stepper.
    */
-  stepArea: ({ theme: i, ownerState: e }) => ({
-    ...e?.orientation === "vertical" || i.generalSettings.isMobile ? {
+  stepArea: ({ theme: e, ownerState: i }) => ({
+    ...i?.orientation === "vertical" || e.generalSettings.isMobile ? {
       display: "flex",
       alignItems: "start",
       width: "100%",
       overflowX: "auto",
       overflowY: "hidden"
     } : {
+      display: "flex",
+      flexDirection: "column",
+      // The whole distance between two steps lives here, not in a padding of each step.
+      gap: e.vars.size.baseSpacings.sp5,
+      padding: e.vars.size.baseSpacings.sp3,
+      boxSizing: "border-box",
+      borderRadius: e.vars.size.borderRadius.r2,
+      background: e.vars.palette.background.base,
+      alignSelf: "flex-start",
+      maxHeight: "100%",
       maxWidth: "116px",
       overflowY: "auto"
     }
@@ -54,48 +68,98 @@ const c = {
   /**
    * Estilos para el área de contenido del Stepper.
    */
-  contentArea: ({ theme: i, ownerState: e }) => ({
+  contentArea: ({ theme: e, ownerState: i }) => ({
     flex: 1,
     display: "flex",
     flexDirection: "column",
     overflowY: "auto",
-    ...e?.orientation === "vertical" || i.generalSettings.isMobile ? {
+    ...i?.orientation === "vertical" || e.generalSettings.isMobile ? {
       // borderTop: '1px solid',
-      gap: i.vars.size.baseSpacings.sp4
+      gap: e.vars.size.baseSpacings.sp4
       // paddingTop: theme.vars.size.baseSpacings.sp8,
     } : {
-      gap: i.vars.size.baseSpacings.sp6,
-      borderLeft: "1px solid",
-      paddingLeft: i.vars.size.baseSpacings.sp8
-    },
-    borderColor: i.vars.palette?.border.disabled
+      gap: e.vars.size.baseSpacings.sp6
+    }
   }),
   /**
    * Estilos para cada paso del Stepper.
    */
-  step: ({ theme: i, ownerState: e }) => {
-    const t = e?.currentStep ?? 0, r = e?.step ?? 0, s = e?.totalSteps ?? 0, a = t > r, n = r === s - 1;
+  step: ({ theme: e, ownerState: i }) => {
+    const s = i?.currentStep ?? 0, t = i?.step ?? 0, r = i?.totalSteps ?? 0, a = s > t, n = t === r - 1, o = typeof i?.originalStepIndex == "number" ? i.originalStepIndex : t, l = i?.orientation === "vertical" && !e.generalSettings.isMobile, d = i?.orientation !== "vertical" && !e.generalSettings.isMobile, c = k(e, i), g = i?.indicatorType === "dot", v = `calc(${c} / 2)`, p = e.vars.size.desktop[i?.size || "medium"].case, b = `calc(${e.vars.size.baseSpacings["sp0-5"]} + ${p} / 2)`, y = g ? "50%" : `calc(50% + ${v})`, f = e.vars.size.desktop[i?.size || "medium"].case, u = d && !!i?.visibleTitle;
     return {
       cursor: "pointer",
-      display: e?.isStepVisible ? "flex" : "none",
-      flexDirection: e?.orientation === "vertical" || i.generalSettings.isMobile ? "column" : "row",
-      alignItems: e?.orientation === "vertical" || i.generalSettings.isMobile ? "center" : "start",
-      justifyContent: e?.visibleTitle ? "space-between" : "center",
-      gap: e?.orientation === "vertical" || i.generalSettings.isMobile ? i.vars.size.baseSpacings.sp1 : i.vars.size.baseSpacings.sp4,
+      display: i?.isStepVisible ? u || l ? "grid" : "flex" : "none",
+      ...u && {
+        gridTemplateColumns: `${f} minmax(0, 1fr)`
+      },
+      ...l && {
+        gridTemplateColumns: "minmax(0, 1fr)",
+        gridTemplateRows: `${p} auto`,
+        justifyItems: "center"
+      },
+      flexDirection: i?.orientation === "vertical" || e.generalSettings.isMobile ? "column" : "row",
+      alignItems: d ? "flex-start" : "center",
+      justifyContent: i?.visibleTitle ? i?.orientation === "vertical" || e.generalSettings.isMobile ? "space-between" : "flex-start" : "center",
+      gap: l ? 0 : i?.orientation === "vertical" || e.generalSettings.isMobile ? e.vars.size.baseSpacings.sp1 : e.vars.size.baseSpacings.sp2,
       width: "100%",
-      ...(e?.orientation === "vertical" || i.generalSettings.isMobile) && {
-        minWidth: i.vars.size.baseSpacings.sp10
+      ...(i?.orientation === "vertical" || e.generalSettings.isMobile) && {
+        minWidth: e.vars.size.baseSpacings.sp10
+      },
+      height: "auto",
+      ...l && {
+        paddingBlock: e.vars.size.baseSpacings["sp0-5"]
       },
-      height: e?.orientation === "vertical" || i.generalSettings.isMobile ? "auto" : i.vars.size.baseSpacings.sp13,
       position: "relative",
-      ...!n && (e?.orientation === "vertical" || i.generalSettings.isMobile) && {
+      ...l && {
+        ...t > 0 && {
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            top: b,
+            left: 0,
+            right: y,
+            // Width from the stroke token; only the style and the color change.
+            borderTop: e.vars.size.borderStroke.container,
+            borderTopStyle: s >= o ? "solid" : "dashed",
+            borderTopColor: s >= o ? e.vars.palette.primary.enabled : e.vars.palette.border.secondary
+          }
+        },
+        ...!n && {
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            top: b,
+            right: 0,
+            left: y,
+            // Right half: solid once the current step is past this one.
+            borderTop: e.vars.size.borderStroke.container,
+            borderTopStyle: s > o ? "solid" : "dashed",
+            borderTopColor: s > o ? e.vars.palette.primary.enabled : e.vars.palette.border.secondary
+          }
+        }
+      },
+      // The side-list connector is drawn by the step, not by the indicator: a fixed-height line hanging from the
+      // indicator cannot follow titles of different heights. It runs from the bottom of this indicator to the top
+      // of the next one (center to center for dots, see above); the negative bottom absorbs the gap of the list.
+      ...d && !n && {
         "&::after": {
           content: '""',
           position: "absolute",
-          top: e?.orientation === "horizontal" && i.generalSettings.isMobile ? "16px" : "10px",
+          top: g ? v : c,
+          bottom: g ? `calc(-1 * (${e.vars.size.baseSpacings.sp5} + ${f} / 2))` : `calc(-1 * ${e.vars.size.baseSpacings.sp5})`,
+          left: u ? `calc(${f} / 2)` : "50%",
+          transform: "translateX(-50%)",
+          borderLeft: `1px ${s > o ? "solid" : "dashed"} ${s > o ? e.vars.palette.primary.activeOpacity : e.vars.palette.default.activeOpacity}`
+        }
+      },
+      ...!n && e.generalSettings.isMobile && {
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          top: "10px",
           // Ajustado para coincidir con el centro del indicador cuando alignItems es start
           height: "1px",
-          borderTop: `1px ${a ? "solid" : "dashed"} ${a ? i.vars.palette.primary.enabled : i.vars.palette.border.default}`,
+          borderTop: `1px ${a ? "solid" : "dashed"} ${a ? e.vars.palette.primary.enabled : e.vars.palette.border.default}`,
           left: "50%",
           width: "100%"
         }
@@ -105,36 +169,50 @@ const c = {
   /**
    * Estilos para el nombre del paso dentro del Stepper.
    */
-  stepName: ({ theme: i, ownerState: e }) => ({
-    ...e?.orientation === "horizontal" && !i.generalSettings.isMobile && {
-      minHeight: i.vars.size.desktop.medium.action,
-      maxWidth: "120px",
-      width: "100%"
-    },
-    ...(e?.orientation === "vertical" || i.generalSettings.isMobile) && {
-      maxWidth: "120px",
-      width: "100%",
-      marginTop: i.vars.size.baseSpacings.sp1
-    },
-    alignContent: "center",
-    cursor: "pointer",
-    ...i.generalSettings.isMobile ? {
-      display: "none"
-    } : {
-      display: e?.visibleTitle ? "block" : "none"
-    },
-    flex: 1,
-    minWidth: 0,
-    order: e?.orientation === "vertical" || i.generalSettings.isMobile ? 1 : 0,
-    "&.M4LTypography-root": {
-      color: e?.originalStepIndex !== void 0 && typeof e.originalStepIndex == "number" ? (e.currentStep ?? 0) > e.originalStepIndex ? i.vars.palette.primary.semanticText : (e.currentStep ?? 0) === e.originalStepIndex ? i.vars.palette.text.primary : i.vars.palette.text.secondary : i.vars.palette.text.secondary,
-      textAlign: e?.orientation === "vertical" || i.generalSettings.isMobile ? "center" : "right"
-    }
-  }),
+  stepName: ({ theme: e, ownerState: i }) => {
+    const s = i?.orientation === "vertical" && !e.generalSettings.isMobile, t = i?.orientation !== "vertical" && !e.generalSettings.isMobile, r = i?.currentStep ?? 0, a = i?.originalStepIndex, n = typeof a == "number" && r > a, o = typeof a == "number" && r === a;
+    return {
+      ...i?.orientation !== "vertical" && !e.generalSettings.isMobile && {
+        maxWidth: "120px",
+        width: "100%"
+      },
+      ...s && {
+        maxWidth: `calc(${e.vars.size.baseSpacings.sp10} * 3)`,
+        // 120px = 3 × sp10
+        width: "100%",
+        minHeight: e.vars.size.baseSpacings.sp5
+      },
+      // Side list: the title box is as tall as the marker and centers its text, so a two-line title overflows evenly
+      // above and below it. The marker ends up centered on the text block and every step keeps the same pitch.
+      ...t && {
+        height: k(e, i),
+        alignItems: "center"
+      },
+      ...e.generalSettings.isMobile && {
+        maxWidth: "120px",
+        width: "100%",
+        marginTop: e.vars.size.baseSpacings.sp1
+      },
+      alignContent: "center",
+      cursor: "pointer",
+      ...e.generalSettings.isMobile ? {
+        display: "none"
+      } : {
+        display: i?.visibleTitle ? t ? "flex" : "block" : "none"
+      },
+      flex: 1,
+      minWidth: 0,
+      order: 1,
+      "&.M4LTypography-root": {
+        color: n || o ? e.vars.palette.text.primary : e.vars.palette.text.secondary,
+        textAlign: i?.orientation === "vertical" || e.generalSettings.isMobile ? "center" : "left"
+      }
+    };
+  },
   /**
    * Styles for the step name text with line clamp truncation.
    */
-  stepNameText: ({ theme: i, ownerState: e }) => ({
+  stepNameText: ({ theme: e, ownerState: i }) => ({
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: 2,
@@ -145,104 +223,105 @@ const c = {
     width: "100%",
     direction: "ltr",
     lineHeight: 1.2,
-    textAlign: e?.orientation === "vertical" || i.generalSettings.isMobile ? "center" : "left"
+    textAlign: i?.orientation === "vertical" || e.generalSettings.isMobile ? "center" : "left"
   }),
   /**
    * Estilos para el indicador numérico de cada paso del Stepper.
    */
-  indicator: ({ theme: i, ownerState: e }) => {
-    const t = e?.step ?? 0, r = e?.totalSteps ?? 0, s = e?.isCompleted ?? !1, a = e?.isCurrent ?? !1, n = e?.isValidStep ?? !0, p = t === r - 1;
-    return {
-      ...e?.orientation === "horizontal" ? {
-        marginTop: i.generalSettings.isMobile ? "6px" : i.vars.size.baseSpacings.sp1
-      } : {},
+  indicator: ({ theme: e, ownerState: i }) => {
+    const s = i?.isCompleted ?? !1, t = i?.isCurrent ?? !1, r = i?.isValidStep ?? !0, a = !r && i?.hasBeenValidated, n = s && r, o = i?.indicatorType === "number" && !e.generalSettings.isMobile, l = o && n, d = o && !a && !n, c = d || l, g = i?.indicatorType === "dot" || e.generalSettings.isMobile, v = i?.indicatorType === "dot" && i?.orientation !== "vertical" && !e.generalSettings.isMobile;
+    let p = e.vars.palette.default.enabled;
+    return a ? p = e.vars.palette.error.enabled : n ? p = l ? e.vars.palette.primary.enabledOpacity : e.vars.palette.background.default : d ? p = t ? e.vars.palette.primary.enabledOpacity : e.vars.palette.default.enabledOpacity : t ? p = i?.indicatorType === "dot" || e.generalSettings.isMobile ? e.vars.palette.background.default : e.vars.palette.primary.enabled : (i?.indicatorType === "dot" || e.generalSettings.isMobile) && (p = e.vars.palette.background.default), {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      ...!e.generalSettings.isMobile && i?.orientation !== "vertical" && i?.visibleTitle && { justifySelf: "center" },
       flexShrink: 0,
       zIndex: 1,
-      order: e?.orientation === "vertical" || i.generalSettings.isMobile ? 0 : 1,
-      background: !n && e?.hasBeenValidated ? i.vars.palette.error.enabled : s && n ? e?.indicatorType === "dot" || i.generalSettings.isMobile ? i.vars.palette.background.default : i.vars.palette.primary.toneOpacity : a ? e?.indicatorType === "dot" || i.generalSettings.isMobile ? i.vars.palette.background.default : i.vars.palette.primary.enabled : e?.indicatorType === "dot" || i.generalSettings.isMobile ? i.vars.palette.background.default : i.vars.palette.default.enabled,
-      borderRadius: i.vars.size.borderRadius.r2,
-      ...e?.indicatorType === "number" && !i.generalSettings.isMobile && {
-        boxShadow: a ? "0 2px 8px 0 rgb(0, 100, 255, 0.16)" : "none"
+      order: 0,
+      // Dot markers are transparent so the connector, which runs behind them, reaches the visible dot.
+      background: v || g && !a ? "transparent" : p,
+      borderRadius: c ? e.vars.size.borderRadius["r1-5"] : e.vars.size.borderRadius.r2,
+      ...c && {
+        boxSizing: "border-box",
+        border: e.vars.size.borderStroke.container,
+        // Figma's default opacity (0.08) equals the theme's default.hoverOpacity;
+        // default.opacity is 0.12.
+        borderColor: l || t ? e.vars.palette.primary.selectedOpacity : e.vars.palette.default.hoverOpacity
       },
-      position: "relative",
-      ...!p && e?.orientation === "horizontal" && !i.generalSettings.isMobile && {
-        "&::after": {
-          content: '""',
-          position: "absolute",
-          top: "100%",
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: "1px",
-          height: i.vars.size.baseSpacings.sp12,
-          borderLeft: `1px ${s ? "solid" : "dashed"} ${s ? i.vars.palette.primary.enabled : i.vars.palette.border.default}`
-        }
+      ...o && {
+        // Figma's 0.16 opacity maps to selectedOpacity because hoverOpacity is 0.12.
+        boxShadow: d && t ? `0 2px 8px 0 ${e.vars.palette.primary.selectedOpacity}` : "none"
       },
-      ...o(i, e?.size || "medium", "case", (l) => ({
-        width: l,
-        height: l
-      }))
+      position: "relative",
+      ...x(
+        e,
+        i?.size || "medium",
+        o && !a ? "base" : "case",
+        (b) => ({
+          width: b,
+          height: b
+        })
+      )
     };
   },
   /**
    * Estilos para el número de texto dentro del indicador numérico del Stepper.
    */
-  textNumber: ({ theme: i, ownerState: e }) => {
-    const t = e?.isCompleted ?? !1, r = e?.isCurrent ?? !1, s = e?.isValidStep ?? !0, a = e?.hasBeenValidated ?? !1;
+  textNumber: ({ theme: e, ownerState: i }) => {
+    const s = i?.isCompleted ?? !1, t = i?.isCurrent ?? !1, r = i?.isValidStep ?? !0, a = i?.hasBeenValidated ?? !1, n = i?.indicatorType === "number" && !e.generalSettings.isMobile && !(a && !r) && !(s && r);
     return {
       "&.M4LTypography-root": {
-        color: !s && a ? i.vars.palette.error.contrastText : t || r ? i.vars.palette.primary.contrastText : i.vars.palette.text.primary
+        color: !r && a ? e.vars.palette.error.contrastText : n ? t ? e.vars.palette.primary.semanticText : e.vars.palette.text.secondary : s || t ? e.vars.palette.primary.contrastText : e.vars.palette.text.primary
       }
     };
   },
   /**
    * Estilos para el área de contenido del Stepper.
    */
-  contentAreaHeader: ({ theme: i }) => ({
+  contentAreaHeader: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: i.size.baseSpacings.sp3,
+    gap: e.size.baseSpacings.sp3,
     position: "sticky",
     top: 0,
-    backgroundColor: i.vars.palette.background.default,
+    backgroundColor: e.vars.palette.background.default,
     zIndex: 10
     // paddingBottom: theme.vars.size.baseSpacings.sp2,
   }),
   /**
    * Estilos para el cuerpo del área de contenido del Stepper
    */
-  contentAreaBody: ({ theme: i }) => ({
+  contentAreaBody: ({ theme: e }) => ({
     flex: 1,
     overflowY: "auto",
     display: "flex",
     flexDirection: "column",
-    gap: i.vars.size.baseSpacings.sp6
+    gap: e.vars.size.baseSpacings.sp6
   }),
   /**
    * Estilos para el contenedor del icono del titulo del Stepper.
    */
-  wrapperIcon: ({ theme: i, ownerState: e }) => ({
+  wrapperIcon: ({ theme: e, ownerState: i }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
-    background: i.vars.palette.primary.enabledOpacity,
-    borderRadius: i.vars.size.borderRadius["r1-5"],
-    ...o(i, e?.size || "medium", "box", (t) => ({
-      width: t,
-      height: t
+    background: e.vars.palette.primary.enabledOpacity,
+    borderRadius: e.vars.size.borderRadius["r1-5"],
+    ...x(e, i?.size || "medium", "box", (s) => ({
+      width: s,
+      height: s
     }))
   }),
   /**
    * Estilos para el título del Stepper.
    */
-  wrapperTitle: ({ theme: i }) => ({
-    color: i.vars.palette.text.primary,
+  wrapperTitle: ({ theme: e }) => ({
+    color: e.vars.palette.text.primary,
     display: "flex",
     flexDirection: "column",
-    gap: i.vars.size.baseSpacings["sp0-5"],
+    gap: e.vars.size.baseSpacings["sp0-5"],
     flex: 1,
     minWidth: 0,
     overflow: "hidden"
@@ -250,10 +329,10 @@ const c = {
   /**
    * Estilos para el icono del Stepper.
    */
-  icon: ({ theme: i, ownerState: e }) => ({
-    ...o(i, e?.size || "medium", "case", (t) => ({
-      width: t,
-      height: t
+  icon: ({ theme: e, ownerState: i }) => ({
+    ...x(e, i?.size || "medium", "case", (s) => ({
+      width: s,
+      height: s
     }))
   }),
   /**
@@ -282,13 +361,13 @@ const c = {
   /**
    * Estilos para la descripción del Stepper.
    */
-  description: ({ theme: i }) => ({
+  description: ({ theme: e }) => ({
     minWidth: 0,
     overflow: "hidden",
     width: "100%",
     maxWidth: "100%",
     "&.M4LTypography-root": {
-      color: i.vars.palette.text.secondary,
+      color: e.vars.palette.text.secondary,
       overflow: "hidden",
       minWidth: 0,
       textOverflow: "ellipsis",
@@ -298,43 +377,43 @@ const c = {
   /**
    * Estilos para la sección de botones de acción del Stepper.
    */
-  stepperFooterSection: ({ theme: i }) => ({
+  stepperFooterSection: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     flexWrap: "wrap",
-    gap: i.vars.size.baseSpacings.sp2,
-    paddingTop: i.vars.size.baseSpacings.sp4,
+    gap: e.vars.size.baseSpacings.sp2,
+    paddingTop: e.vars.size.baseSpacings.sp4,
     position: "sticky",
     bottom: 0,
-    backgroundColor: i.vars.palette.background.default,
+    backgroundColor: e.vars.palette.background.default,
     marginTop: "auto",
     zIndex: 10
   }),
   /**
    * Estilos para las acciones del lado izquierdo del StepperFooter.
    */
-  stepperFooterLeftActions: ({ theme: i }) => ({
+  stepperFooterLeftActions: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: i.vars.size.baseSpacings.sp3
+    gap: e.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para las acciones del lado derecho del StepperFooter.
    */
-  stepperFooterRightActions: ({ theme: i }) => ({
+  stepperFooterRightActions: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: i.vars.size.baseSpacings.sp3
+    gap: e.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para el contenedor de los botones del Stepper.
    */
-  wrapperButtons: ({ theme: i }) => ({
+  wrapperButtons: ({ theme: e }) => ({
     display: "flex",
-    gap: i.size.baseSpacings.sp3
+    gap: e.size.baseSpacings.sp3
   })
 };
 export {
-  c as stepperStyles
+  z as stepperStyles
 };

package/components/Stepper/store/StepperContext/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/Stepper/store/StepperContext/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAI/C,QAAA,MAAM,cAAc;;;;;;;;UAA2C,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAM,eAAe,GAAI,OAAO,mBAAmB,qDAiIlD,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/Stepper/store/StepperContext/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAI/C,QAAA,MAAM,cAAc;;;;;;;;UAA2C,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAM,eAAe,GAAI,OAAO,mBAAmB,qDAoIlD,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC"}

package/components/Stepper/store/StepperContext/index.js

@@ -1,65 +1,65 @@
-import { jsx as y } from "@emotion/react/jsx-runtime";
-import { createContext as m, useRef as S, useEffect as p } from "react";
-import { createStepperStore as v } from "../StepperStore/index.js";
-import { findNextVisibleValidStep as h } from "../../helpers/findNextVisibleValidStep/index.js";
-const x = m(null), R = (l) => {
+import { jsx as m } from "@emotion/react/jsx-runtime";
+import { createContext as v, useRef as u, useEffect as l } from "react";
+import { createStepperStore as h } from "../StepperStore/index.js";
+import { findNextVisibleValidStep as x } from "../../helpers/findNextVisibleValidStep/index.js";
+const D = v(null), E = (f) => {
   const {
-    storeId: f,
-    storeDevtoolsEnabled: d,
-    steps: n,
+    storeId: d,
+    storeDevtoolsEnabled: g,
+    steps: r,
     visibleTitle: a = !0,
-    indicatorType: o = "number",
-    orientation: s = "horizontal",
-    visibilityData: r,
-    initialStepKey: g,
-    children: b
-  } = l, t = S(null), u = S(r);
-  return t.current || (t.current = v(
+    indicatorType: s = "number",
+    orientation: c = "horizontal",
+    visibilityData: e,
+    initialStepKey: b,
+    children: y
+  } = f, n = u(null), p = u(e);
+  n.current || (n.current = h(
     {
-      storeId: f,
-      steps: n,
+      storeId: d,
+      steps: r,
       visibleTitle: a,
       ownerState: {},
-      indicatorType: o,
-      orientation: s,
-      visibilityData: r,
-      initialStepKey: g
+      indicatorType: s,
+      orientation: c,
+      visibilityData: e,
+      initialStepKey: b
     },
-    d
-  ), t.current.getState().actions.init(n)), p(() => {
-    if (t.current) {
-      const i = t.current.getState();
-      i.visibleTitle !== a && t.current.setState((e) => ({
-        ...e,
-        visibleTitle: a
-      })), i.orientation !== s && t.current.setState((e) => ({
-        ...e,
-        orientation: s
-      })), i.indicatorType !== o && t.current.setState((e) => ({
-        ...e,
-        indicatorType: o
-      })), i.visibilityData !== r && t.current.setState((e) => ({
-        ...e,
-        visibilityData: r
-      }));
-    }
-  }, [a, s, o, r]), p(() => {
-    if (t.current && n) {
-      const i = t.current, e = i.getState();
-      if (i.getState().actions.init(n, !0), r && JSON.stringify(u.current) !== JSON.stringify(r)) {
-        const c = h(
-          e.currentStep,
-          n,
+    g
+  ), n.current.getState().actions.init(r));
+  const o = n.current;
+  return l(() => {
+    const i = o.getState();
+    i.visibleTitle !== a && o.setState((t) => ({
+      ...t,
+      visibleTitle: a
+    })), i.orientation !== c && o.setState((t) => ({
+      ...t,
+      orientation: c
+    })), i.indicatorType !== s && o.setState((t) => ({
+      ...t,
+      indicatorType: s
+    })), i.visibilityData !== e && o.setState((t) => ({
+      ...t,
+      visibilityData: e
+    }));
+  }, [o, a, c, s, e]), l(() => {
+    if (n.current && r) {
+      const i = n.current, t = i.getState();
+      if (i.getState().actions.init(r, !0), e && JSON.stringify(p.current) !== JSON.stringify(e)) {
+        const S = x(
+          t.currentStep,
+          r,
           {},
-          r
+          e
         );
-        c < n.length && c !== e.currentStep && (i.getState().actions.setCurrentStep(c), i.getState().actions.setStepValidationStatus(e.currentStep, !0));
+        S < r.length && S !== t.currentStep && (i.getState().actions.setCurrentStep(S), i.getState().actions.setStepValidationStatus(t.currentStep, !0));
       }
     }
-    u.current = r;
-  }, [n, r]), /* @__PURE__ */ y(x.Provider, { value: t.current, children: b });
+    p.current = e;
+  }, [r, e]), /* @__PURE__ */ m(D.Provider, { value: n.current, children: y });
 };
 export {
-  x as StepperContext,
-  R as StepperProvider
+  D as StepperContext,
+  E as StepperProvider
 };