@m4l/components 9.65.2-beta-m4lcom-783-rediseno-de-steps-del-componente-stepper.0 → 9.65.2-beta-update-switch-component-variable.0

package/components/DevicesPicker/slots/DevicesPickerSlots.d.ts

@@ -58,7 +58,7 @@ export declare const PanelStyled: import('@emotion/styled').StyledComponent<impo
 export declare const PanelHeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').DevicesPickerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const PanelSwitchStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../extended/mui/Switch/types').SwitchProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "color" | "content" | "translate" | "error" | "action" | "classes" | "className" | "sx" | "form" | "label" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "component" | "name" | "size" | "type" | "value" | "icon" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "checked" | keyof import('react').RefAttributes<HTMLButtonElement> | "readOnly" | "required" | "inputProps" | "inputRef" | "checkedIcon" | "labelPlacement"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+export declare const PanelSwitchStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../extended/mui/Switch/types').SwitchProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "color" | "content" | "translate" | "error" | "action" | "classes" | "className" | "sx" | "form" | "label" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "component" | "name" | "size" | "type" | "variant" | "value" | "icon" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "checked" | keyof import('react').RefAttributes<HTMLButtonElement> | "readOnly" | "showIcon" | "required" | "inputProps" | "inputRef" | "checkedIcon" | "labelPlacement" | "showStartText" | "startText" | "showDescription" | "descriptionText" | "showEndText" | "endText"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').DevicesPickerOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
 export declare const PanelListStyled: import('@emotion/styled').StyledComponent<Pick<import('../..').CheckableListProps, keyof import('../..').CheckableListProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {

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,aA+hB3B,CAAC"}
+{"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"}

package/components/Stepper/Stepper.styles.js

@@ -1,62 +1,52 @@
-import { getSizeStyles as f } from "../../utils/getSizeStyles/getSizeStyles.js";
-const S = {
+import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
+const c = {
   /**
    *
    * Estilos para el contenedor principal del Stepper.
    */
-  stepperRoot: ({ theme: e }) => ({
+  stepperRoot: ({ theme: i }) => ({
     display: "flex",
     flexDirection: "column",
     justifyContent: "flex-start",
-    background: e.vars.palette.background.default,
+    background: i.vars.palette.background.default,
     width: "100%",
     height: "100%",
-    borderRadius: e.vars.size.borderRadius.r1
+    borderRadius: i.vars.size.borderRadius.r1
   }),
   /**
    * Estilos para la sección que contiene los pasos del Stepper.
    */
-  contentSection: ({ theme: e, ownerState: i }) => ({
+  contentSection: ({ theme: i, ownerState: e }) => ({
     display: "flex",
     flex: 1,
     height: "100%",
     overflow: "hidden",
-    ...i?.orientation === "vertical" || e.generalSettings.isMobile ? {
-      gap: e.vars.size.baseSpacings.sp6,
+    gap: i.vars.size.baseSpacings.sp6,
+    ...e?.orientation === "vertical" || i.generalSettings.isMobile ? {
       flexDirection: "column"
     } : {
-      gap: e.vars.size.baseSpacings.sp5,
       flexDirection: "row"
     }
   }),
   /**
    * Estilos para el contenido del paso dentro del Stepper.
    */
-  stepContent: ({ ownerState: e }) => ({
+  stepContent: ({ ownerState: i }) => ({
     height: "100%",
-    display: e?.isStepVisible ? "flex" : "none",
+    display: i?.isStepVisible ? "flex" : "none",
     flexDirection: "column"
   }),
   /**
    * Estilos para la sección que contiene los botones de acción del Stepper.
    */
-  stepArea: ({ theme: e, ownerState: i }) => ({
-    ...i?.orientation === "vertical" || e.generalSettings.isMobile ? {
+  stepArea: ({ theme: i, ownerState: e }) => ({
+    ...e?.orientation === "vertical" || i.generalSettings.isMobile ? {
       display: "flex",
       alignItems: "start",
       width: "100%",
       overflowX: "auto",
       overflowY: "hidden"
     } : {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.vars.size.baseSpacings["sp0-5"],
-      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"
     }
@@ -64,79 +54,48 @@ const S = {
   /**
    * Estilos para el área de contenido del Stepper.
    */
-  contentArea: ({ theme: e, ownerState: i }) => ({
+  contentArea: ({ theme: i, ownerState: e }) => ({
     flex: 1,
     display: "flex",
     flexDirection: "column",
     overflowY: "auto",
-    ...i?.orientation === "vertical" || e.generalSettings.isMobile ? {
+    ...e?.orientation === "vertical" || i.generalSettings.isMobile ? {
       // borderTop: '1px solid',
-      gap: e.vars.size.baseSpacings.sp4
+      gap: i.vars.size.baseSpacings.sp4
       // paddingTop: theme.vars.size.baseSpacings.sp8,
     } : {
-      gap: e.vars.size.baseSpacings.sp6
-    }
+      gap: i.vars.size.baseSpacings.sp6,
+      borderLeft: "1px solid",
+      paddingLeft: i.vars.size.baseSpacings.sp8
+    },
+    borderColor: i.vars.palette?.border.disabled
   }),
   /**
    * Estilos para cada paso del Stepper.
    */
-  step: ({ theme: e, ownerState: i }) => {
-    const s = i?.currentStep ?? 0, t = i?.step ?? 0, a = i?.totalSteps ?? 0, r = s > t, o = t === a - 1, d = typeof i?.originalStepIndex == "number" ? i.originalStepIndex : t, n = i?.orientation === "vertical" && !e.generalSettings.isMobile, l = `calc(${e.vars.size.desktop[i?.size || "medium"].base} / 2)`, p = `calc(${e.vars.size.baseSpacings["sp0-5"]} + ${l})`;
+  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;
     return {
       cursor: "pointer",
-      display: i?.isStepVisible ? "flex" : "none",
-      flexDirection: i?.orientation === "vertical" || e.generalSettings.isMobile ? "column" : "row",
-      alignItems: "center",
-      justifyContent: i?.visibleTitle ? i?.orientation === "vertical" || e.generalSettings.isMobile ? "space-between" : "flex-start" : "center",
-      gap: n ? 0 : i?.orientation === "vertical" || e.generalSettings.isMobile ? e.vars.size.baseSpacings.sp1 : e.vars.size.baseSpacings.sp2,
+      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,
       width: "100%",
-      ...(i?.orientation === "vertical" || e.generalSettings.isMobile) && {
-        minWidth: e.vars.size.baseSpacings.sp10
-      },
-      height: "auto",
-      ...n && {
-        paddingBlock: e.vars.size.baseSpacings["sp0-5"]
-      },
-      ...!(i?.orientation === "vertical" || e.generalSettings.isMobile) && {
-        paddingBottom: `calc(${e.vars.size.baseSpacings["sp0-5"]} + ${e.vars.size.baseSpacings.sp3})`
+      ...(e?.orientation === "vertical" || i.generalSettings.isMobile) && {
+        minWidth: i.vars.size.baseSpacings.sp10
       },
+      height: e?.orientation === "vertical" || i.generalSettings.isMobile ? "auto" : i.vars.size.baseSpacings.sp13,
       position: "relative",
-      ...n && {
-        ...t > 0 && {
-          "&::before": {
-            content: '""',
-            position: "absolute",
-            top: p,
-            left: 0,
-            right: `calc(50% + ${l})`,
-            // Width from the stroke token; only the style and the color change.
-            borderTop: e.vars.size.borderStroke.container,
-            borderTopStyle: s >= d ? "solid" : "dashed",
-            borderTopColor: s >= d ? e.vars.palette.primary.enabled : e.vars.palette.border.secondary
-          }
-        },
-        ...!o && {
-          "&::after": {
-            content: '""',
-            position: "absolute",
-            top: p,
-            right: 0,
-            left: `calc(50% + ${l})`,
-            // Right half: solid once the current step is past this one.
-            borderTop: e.vars.size.borderStroke.container,
-            borderTopStyle: s > d ? "solid" : "dashed",
-            borderTopColor: s > d ? e.vars.palette.primary.enabled : e.vars.palette.border.secondary
-          }
-        }
-      },
-      ...!o && e.generalSettings.isMobile && {
+      ...!n && (e?.orientation === "vertical" || i.generalSettings.isMobile) && {
         "&::after": {
           content: '""',
           position: "absolute",
-          top: i?.orientation === "horizontal" && e.generalSettings.isMobile ? "16px" : "10px",
+          top: e?.orientation === "horizontal" && i.generalSettings.isMobile ? "16px" : "10px",
           // Ajustado para coincidir con el centro del indicador cuando alignItems es start
           height: "1px",
-          borderTop: `1px ${r ? "solid" : "dashed"} ${r ? e.vars.palette.primary.enabled : e.vars.palette.border.default}`,
+          borderTop: `1px ${a ? "solid" : "dashed"} ${a ? i.vars.palette.primary.enabled : i.vars.palette.border.default}`,
           left: "50%",
           width: "100%"
         }
@@ -146,44 +105,36 @@ const S = {
   /**
    * Estilos para el nombre del paso dentro del Stepper.
    */
-  stepName: ({ theme: e, ownerState: i }) => {
-    const s = i?.orientation === "vertical" && !e.generalSettings.isMobile, t = i?.currentStep ?? 0, a = i?.originalStepIndex, r = typeof a == "number" && t > a, o = typeof a == "number" && t === 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
-      },
-      ...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 ? "block" : "none"
-      },
-      flex: 1,
-      minWidth: 0,
-      order: 1,
-      "&.M4LTypography-root": {
-        color: r || o ? e.vars.palette.text.primary : e.vars.palette.text.secondary,
-        textAlign: i?.orientation === "vertical" || e.generalSettings.isMobile ? "center" : "left"
-      }
-    };
-  },
+  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"
+    }
+  }),
   /**
    * Styles for the step name text with line clamp truncation.
    */
-  stepNameText: ({ theme: e, ownerState: i }) => ({
+  stepNameText: ({ theme: i, ownerState: e }) => ({
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: 2,
@@ -194,118 +145,104 @@ const S = {
     width: "100%",
     direction: "ltr",
     lineHeight: 1.2,
-    textAlign: i?.orientation === "vertical" || e.generalSettings.isMobile ? "center" : "left"
+    textAlign: e?.orientation === "vertical" || i.generalSettings.isMobile ? "center" : "left"
   }),
   /**
    * Estilos para el indicador numérico de cada paso del Stepper.
    */
-  indicator: ({ theme: e, ownerState: i }) => {
-    const s = i?.step ?? 0, t = i?.totalSteps ?? 0, a = i?.isCompleted ?? !1, r = i?.isCurrent ?? !1, o = i?.isValidStep ?? !0, d = s === t - 1, n = !o && i?.hasBeenValidated, l = a && o, p = i?.indicatorType === "number" && !e.generalSettings.isMobile, g = p && l, b = p && !n && !l, v = b || g, u = i?.indicatorType === "dot" && i?.orientation !== "vertical" && !e.generalSettings.isMobile;
-    let c = e.vars.palette.default.enabled;
-    return n ? c = e.vars.palette.error.enabled : l ? c = g ? e.vars.palette.primary.enabledOpacity : e.vars.palette.background.default : b ? c = r ? e.vars.palette.primary.enabledOpacity : e.vars.palette.default.enabledOpacity : r ? c = i?.indicatorType === "dot" || e.generalSettings.isMobile ? e.vars.palette.background.default : e.vars.palette.primary.enabled : (i?.indicatorType === "dot" || e.generalSettings.isMobile) && (c = e.vars.palette.background.default), {
-      ...i?.orientation === "horizontal" ? {
-        marginTop: e.generalSettings.isMobile ? "6px" : e.vars.size.baseSpacings.sp1
+  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
       } : {},
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
       zIndex: 1,
-      order: 0,
-      background: u ? "transparent" : c,
-      borderRadius: v ? e.vars.size.borderRadius["r1-5"] : e.vars.size.borderRadius.r2,
-      ...v && {
-        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: g || r ? e.vars.palette.primary.selectedOpacity : e.vars.palette.default.hoverOpacity
-      },
-      ...p && {
-        // Figma's 0.16 opacity maps to selectedOpacity because hoverOpacity is 0.12.
-        boxShadow: b && r ? `0 2px 8px 0 ${e.vars.palette.primary.selectedOpacity}` : "none"
+      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"
       },
       position: "relative",
-      ...!d && i?.orientation !== "vertical" && !e.generalSettings.isMobile && {
+      ...!p && e?.orientation === "horizontal" && !i.generalSettings.isMobile && {
         "&::after": {
           content: '""',
           position: "absolute",
-          top: v ? `calc(100% + ${e.vars.size.baseSpacings["sp0-5"]} + 1px)` : `calc(100% + ${e.vars.size.baseSpacings["sp0-5"]})`,
+          top: "100%",
           left: "50%",
           transform: "translateX(-50%)",
           width: "1px",
-          height: e.vars.size.baseSpacings.sp3,
-          borderLeft: `1px ${a ? "solid" : "dashed"} ${a ? e.vars.palette.primary.activeOpacity : e.vars.palette.default.activeOpacity}`
+          height: i.vars.size.baseSpacings.sp12,
+          borderLeft: `1px ${s ? "solid" : "dashed"} ${s ? i.vars.palette.primary.enabled : i.vars.palette.border.default}`
         }
       },
-      ...f(
-        e,
-        i?.size || "medium",
-        p && !n ? "base" : "case",
-        (x) => ({
-          width: x,
-          height: x
-        })
-      )
+      ...o(i, e?.size || "medium", "case", (l) => ({
+        width: l,
+        height: l
+      }))
     };
   },
   /**
    * Estilos para el número de texto dentro del indicador numérico del Stepper.
    */
-  textNumber: ({ theme: e, ownerState: i }) => {
-    const s = i?.isCompleted ?? !1, t = i?.isCurrent ?? !1, a = i?.isValidStep ?? !0, r = i?.hasBeenValidated ?? !1, o = i?.indicatorType === "number" && !e.generalSettings.isMobile && !(r && !a) && !(s && a);
+  textNumber: ({ theme: i, ownerState: e }) => {
+    const t = e?.isCompleted ?? !1, r = e?.isCurrent ?? !1, s = e?.isValidStep ?? !0, a = e?.hasBeenValidated ?? !1;
     return {
       "&.M4LTypography-root": {
-        color: !a && r ? e.vars.palette.error.contrastText : o ? t ? e.vars.palette.primary.semanticText : e.vars.palette.text.secondary : s || t ? e.vars.palette.primary.contrastText : e.vars.palette.text.primary
+        color: !s && a ? i.vars.palette.error.contrastText : t || r ? i.vars.palette.primary.contrastText : i.vars.palette.text.primary
       }
     };
   },
   /**
    * Estilos para el área de contenido del Stepper.
    */
-  contentAreaHeader: ({ theme: e }) => ({
+  contentAreaHeader: ({ theme: i }) => ({
     display: "flex",
     alignItems: "center",
-    gap: e.size.baseSpacings.sp3,
+    gap: i.size.baseSpacings.sp3,
     position: "sticky",
     top: 0,
-    backgroundColor: e.vars.palette.background.default,
+    backgroundColor: i.vars.palette.background.default,
     zIndex: 10
     // paddingBottom: theme.vars.size.baseSpacings.sp2,
   }),
   /**
    * Estilos para el cuerpo del área de contenido del Stepper
    */
-  contentAreaBody: ({ theme: e }) => ({
+  contentAreaBody: ({ theme: i }) => ({
     flex: 1,
     overflowY: "auto",
     display: "flex",
     flexDirection: "column",
-    gap: e.vars.size.baseSpacings.sp6
+    gap: i.vars.size.baseSpacings.sp6
   }),
   /**
    * Estilos para el contenedor del icono del titulo del Stepper.
    */
-  wrapperIcon: ({ theme: e, ownerState: i }) => ({
+  wrapperIcon: ({ theme: i, ownerState: e }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
-    background: e.vars.palette.primary.enabledOpacity,
-    borderRadius: e.vars.size.borderRadius["r1-5"],
-    ...f(e, i?.size || "medium", "box", (s) => ({
-      width: s,
-      height: s
+    background: i.vars.palette.primary.enabledOpacity,
+    borderRadius: i.vars.size.borderRadius["r1-5"],
+    ...o(i, e?.size || "medium", "box", (t) => ({
+      width: t,
+      height: t
     }))
   }),
   /**
    * Estilos para el título del Stepper.
    */
-  wrapperTitle: ({ theme: e }) => ({
-    color: e.vars.palette.text.primary,
+  wrapperTitle: ({ theme: i }) => ({
+    color: i.vars.palette.text.primary,
     display: "flex",
     flexDirection: "column",
-    gap: e.vars.size.baseSpacings["sp0-5"],
+    gap: i.vars.size.baseSpacings["sp0-5"],
     flex: 1,
     minWidth: 0,
     overflow: "hidden"
@@ -313,10 +250,10 @@ const S = {
   /**
    * Estilos para el icono del Stepper.
    */
-  icon: ({ theme: e, ownerState: i }) => ({
-    ...f(e, i?.size || "medium", "case", (s) => ({
-      width: s,
-      height: s
+  icon: ({ theme: i, ownerState: e }) => ({
+    ...o(i, e?.size || "medium", "case", (t) => ({
+      width: t,
+      height: t
     }))
   }),
   /**
@@ -345,13 +282,13 @@ const S = {
   /**
    * Estilos para la descripción del Stepper.
    */
-  description: ({ theme: e }) => ({
+  description: ({ theme: i }) => ({
     minWidth: 0,
     overflow: "hidden",
     width: "100%",
     maxWidth: "100%",
     "&.M4LTypography-root": {
-      color: e.vars.palette.text.secondary,
+      color: i.vars.palette.text.secondary,
       overflow: "hidden",
       minWidth: 0,
       textOverflow: "ellipsis",
@@ -361,43 +298,43 @@ const S = {
   /**
    * Estilos para la sección de botones de acción del Stepper.
    */
-  stepperFooterSection: ({ theme: e }) => ({
+  stepperFooterSection: ({ theme: i }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     flexWrap: "wrap",
-    gap: e.vars.size.baseSpacings.sp2,
-    paddingTop: e.vars.size.baseSpacings.sp4,
+    gap: i.vars.size.baseSpacings.sp2,
+    paddingTop: i.vars.size.baseSpacings.sp4,
     position: "sticky",
     bottom: 0,
-    backgroundColor: e.vars.palette.background.default,
+    backgroundColor: i.vars.palette.background.default,
     marginTop: "auto",
     zIndex: 10
   }),
   /**
    * Estilos para las acciones del lado izquierdo del StepperFooter.
    */
-  stepperFooterLeftActions: ({ theme: e }) => ({
+  stepperFooterLeftActions: ({ theme: i }) => ({
     display: "flex",
     alignItems: "center",
-    gap: e.vars.size.baseSpacings.sp3
+    gap: i.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para las acciones del lado derecho del StepperFooter.
    */
-  stepperFooterRightActions: ({ theme: e }) => ({
+  stepperFooterRightActions: ({ theme: i }) => ({
     display: "flex",
     alignItems: "center",
-    gap: e.vars.size.baseSpacings.sp3
+    gap: i.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para el contenedor de los botones del Stepper.
    */
-  wrapperButtons: ({ theme: e }) => ({
+  wrapperButtons: ({ theme: i }) => ({
     display: "flex",
-    gap: e.size.baseSpacings.sp3
+    gap: i.size.baseSpacings.sp3
   })
 };
 export {
-  S as stepperStyles
+  c as stepperStyles
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/Stepper/subcomponents/StepArea/index.tsx"],"names":[],"mappings":"AAaA;;;;GAIG;AACH,wBAAgB,QAAQ,qDA2EvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/Stepper/subcomponents/StepArea/index.tsx"],"names":[],"mappings":"AAYA;;;;GAIG;AACH,wBAAgB,QAAQ,qDA8DvB"}