@m4l/components 9.5.1 → 9.5.2-beta-improvement-606-typography-leveling.0

package/components/extended/mui/DateTimePicker/DateTimePicker.styles.js

@@ -1,52 +1,52 @@
 import { getTypographyStyles as s } from "../../../../utils/getTypographyStyles.js";
 import { getHeightSizeStyles as o } from "../../../../utils/getSizeStyles/getSizeStyles.js";
-const t = {
+const n = {
   /**
    * Estilos para el root cuando esta en Desktop 💻
    */
-  rootDesktop: ({ theme: i, ownerState: r }) => ({
+  rootDesktop: ({ theme: a, ownerState: r }) => ({
     // ↴ Overrides sizes ❌
     ...o(
-      i.generalSettings.isMobile,
+      a.generalSettings.isMobile,
       r?.size || "medium",
       "action",
-      (a) => ({
-        height: `${a} !important`,
-        minHeight: `${a} !important`,
-        maxHeight: `${a} !important`
+      (i) => ({
+        height: `${i} !important`,
+        minHeight: `${i} !important`,
+        maxHeight: `${i} !important`
       })
     ),
     // Estilos globales del Input DateTimePicker en Desktop 🌎
     "& .MuiInputBase-root": {
       height: "100%",
       padding: 0,
-      borderRadius: i.vars.size.borderRadius.r2,
-      paddingLeft: i.vars.size.baseSpacings.sp1,
+      borderRadius: a.vars.size.borderRadius.r2,
+      paddingLeft: a.vars.size.baseSpacings.sp1,
       "& input": {
         padding: 0,
-        paddingLeft: i.vars.size.baseSpacings.sp1,
-        paddingRight: i.vars.size.baseSpacings.sp3,
+        paddingLeft: a.vars.size.baseSpacings.sp1,
+        paddingRight: a.vars.size.baseSpacings.sp3,
         ...s(
-          i.generalSettings.isMobile,
+          a.generalSettings.isMobile,
           r?.size || "medium",
-          "body"
+          "bodyStandard"
         ),
         "&::placeholder": {
-          color: i.vars.palette.text.disabled,
+          color: a.vars.palette.text.disabled,
           opacity: 1
         }
       },
       "& .MuiInputAdornment-root": {
         margin: 0,
         ...o(
-          i.generalSettings.isMobile,
+          a.generalSettings.isMobile,
           r?.size || "medium",
           "action",
-          (a) => ({
-            height: a,
-            minHeight: a,
-            maxHeight: a,
-            minWidth: `${a} !important`
+          (i) => ({
+            height: i,
+            minHeight: i,
+            maxHeight: i,
+            minWidth: `${i} !important`
           })
         )
       },
@@ -55,39 +55,39 @@ const t = {
         outline: 0,
         minHeight: 0,
         ...r?.variant === "outlined" && {
-          border: i.vars.size.borderStroke.actionInput
+          border: a.vars.size.borderStroke.actionInput
         },
         ...r?.variant === "text" && {
           border: 0,
-          borderBottom: i.vars.size.borderStroke.actionInput
+          borderBottom: a.vars.size.borderStroke.actionInput
         },
-        borderColor: r?.error ? i.vars.palette.error.hover : i.vars.palette.border.secondary,
-        borderRadius: i.vars.size.borderRadius.r1,
+        borderColor: r?.error ? a.vars.palette.error.hover : a.vars.palette.border.secondary,
+        borderRadius: a.vars.size.borderRadius.r1,
         borderWidth: 1
       },
       // ↴ Overrides ❌
       "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
         outline: 0,
         ...r?.variant === "outlined" && {
-          border: i.vars.size.borderStroke.actionInput
+          border: a.vars.size.borderStroke.actionInput
         },
         ...r?.variant === "text" && {
           border: 0,
-          borderBottom: i.vars.size.borderStroke.actionInput
+          borderBottom: a.vars.size.borderStroke.actionInput
         },
-        borderColor: r?.error ? i.vars.palette.error.active : i.vars.palette.primary.enabled
+        borderColor: r?.error ? a.vars.palette.error.active : a.vars.palette.primary.enabled
       },
       // ↴ Overrides ❌
       "&.MuiOutlinedInput-root.Mui-focused .M4LIcon-icon": {
-        backgroundColor: r?.error ? i.vars.palette.error.active : i.vars.palette.primary.enabled
+        backgroundColor: r?.error ? a.vars.palette.error.active : a.vars.palette.primary.enabled
       },
       // ↴ Overrides ❌
       ...!r?.disabled && {
         "&:hover": {
-          background: r?.error ? i.vars.palette.error.hoverOpacity : i.vars.palette.primary.hoverOpacity
+          background: r?.error ? a.vars.palette.error.hoverOpacity : a.vars.palette.primary.hoverOpacity
         },
         "&:active": {
-          background: i.vars.palette.background.default
+          background: a.vars.palette.background.default
         }
       }
     }
@@ -95,32 +95,32 @@ const t = {
   /**
    * Estilos para el root cuando esta en Mobile 📱
    */
-  rootMobile: ({ theme: i, ownerState: r }) => ({
+  rootMobile: ({ theme: a, ownerState: r }) => ({
     // ↴ Overrides sizes ❌
     ...o(
-      i.generalSettings.isMobile,
+      a.generalSettings.isMobile,
       r?.size || "medium",
       "action",
-      (a) => ({
-        height: `${a} !important`,
-        minHeight: `${a} !important`,
-        maxHeight: `${a} !important`
+      (i) => ({
+        height: `${i} !important`,
+        minHeight: `${i} !important`,
+        maxHeight: `${i} !important`
       })
     ),
     // Estilos globales del Input DateTimePicker en Desktop 🌎
     "& .MuiInputBase-root": {
       height: "100%",
       padding: 0,
-      borderRadius: i.vars.size.borderRadius.r2,
-      paddingLeft: i.vars.size.baseSpacings.sp1,
+      borderRadius: a.vars.size.borderRadius.r2,
+      paddingLeft: a.vars.size.baseSpacings.sp1,
       "& input": {
         padding: 0,
-        paddingLeft: i.vars.size.baseSpacings.sp1,
-        paddingRight: i.vars.size.baseSpacings.sp3,
+        paddingLeft: a.vars.size.baseSpacings.sp1,
+        paddingRight: a.vars.size.baseSpacings.sp3,
         ...s(
-          i.generalSettings.isMobile,
+          a.generalSettings.isMobile,
           r?.size || "medium",
-          "body"
+          "bodyStandard"
         )
       },
       // ↴ Overrides ❌
@@ -128,34 +128,34 @@ const t = {
         outline: 0,
         minHeight: 0,
         ...r?.variant === "outlined" && {
-          border: i.vars.size.borderStroke.actionInput
+          border: a.vars.size.borderStroke.actionInput
         },
         ...r?.variant === "text" && {
           border: 0,
-          borderBottom: i.vars.size.borderStroke.actionInput
+          borderBottom: a.vars.size.borderStroke.actionInput
         },
-        borderColor: r?.error ? i.vars.palette.error.hover : r?.disabled ? `${i.vars.palette.border.secondary}` : i.vars.palette.border.default,
-        borderRadius: i.vars.size.borderRadius.r1
+        borderColor: r?.error ? a.vars.palette.error.hover : r?.disabled ? `${a.vars.palette.border.secondary}` : a.vars.palette.border.default,
+        borderRadius: a.vars.size.borderRadius.r1
       },
       // ↴ Overrides ❌
       "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
         outline: 0,
         ...r?.variant === "outlined" && {
-          border: i.vars.size.borderStroke.actionInput
+          border: a.vars.size.borderStroke.actionInput
         },
         ...r?.variant === "text" && {
           border: 0,
-          borderBottom: i.vars.size.borderStroke.actionInput
+          borderBottom: a.vars.size.borderStroke.actionInput
         },
-        borderColor: r?.error ? i.vars.palette.error.active : i.vars.palette.primary.enabled
+        borderColor: r?.error ? a.vars.palette.error.active : a.vars.palette.primary.enabled
       },
       // ↴ Overrides ❌
       ...!r?.disabled && {
         "&:hover": {
-          background: r?.error ? i.vars.palette.error.hoverOpacity : i.vars.palette.primary.hoverOpacity
+          background: r?.error ? a.vars.palette.error.hoverOpacity : a.vars.palette.primary.hoverOpacity
         },
         "&:active": {
-          background: i.vars.palette.background.default
+          background: a.vars.palette.background.default
         }
       }
     }
@@ -163,44 +163,44 @@ const t = {
   /**
    * Estilos para el popper de Material UI
    */
-  popper: ({ theme: i, ownerState: r }) => ({
+  popper: ({ theme: a, ownerState: r }) => ({
     "&&&": {
-      zIndex: i.vars.zIndex.modal,
-      marginTop: `${i.vars.size.baseSpacings.sp2} !important`,
+      zIndex: a.vars.zIndex.modal,
+      marginTop: `${a.vars.size.baseSpacings.sp2} !important`,
       "& .MuiPickersDay-root.Mui-selected": {
-        backgroundColor: i.vars.palette.primary.enabled,
+        backgroundColor: a.vars.palette.primary.enabled,
         "&:hover": {
-          backgroundColor: i.vars.palette.primary.hover
+          backgroundColor: a.vars.palette.primary.hover
         },
         "&:active": {
-          backgroundColor: i.vars.palette.primary.active
+          backgroundColor: a.vars.palette.primary.active
         }
       },
       "& .MuiMultiSectionDigitalClockSection-item": {
-        borderRadius: i.vars.size.borderRadius.r1,
+        borderRadius: a.vars.size.borderRadius.r1,
         "&.Mui-selected": {
-          backgroundColor: i.vars.palette.primary.enabled,
+          backgroundColor: a.vars.palette.primary.enabled,
           "&:hover": {
-            backgroundColor: i.vars.palette.primary.hover
+            backgroundColor: a.vars.palette.primary.hover
           },
           "&:active": {
-            backgroundColor: i.vars.palette.primary.active
+            backgroundColor: a.vars.palette.primary.active
           }
         }
       },
       "& .MuiDivider-root": {
-        borderColor: i.vars.palette.border.secondary
+        borderColor: a.vars.palette.border.secondary
       },
       // Estilos globales del MuiPickersLayout-root 🌎
       "& .MuiPaper-root": {
-        paddingTop: i.vars.size.baseSpacings.sp3,
-        borderRadius: i.vars.size.borderRadius.r2,
-        backgroundColor: i.vars.palette.background.default,
-        boxShadow: i.vars.customShadows.z4
+        paddingTop: a.vars.size.baseSpacings.sp3,
+        borderRadius: a.vars.size.borderRadius.r2,
+        backgroundColor: a.vars.palette.background.default,
+        boxShadow: a.vars.customShadows.z4
       },
       // Estilos globales del MuiPickersLayout-root 🌎
       "& .MuiPickersLayout-root": {
-        gap: `0px 0px ${i.vars.size.baseSpacings.sp1} 0px`,
+        gap: `0px 0px ${a.vars.size.baseSpacings.sp1} 0px`,
         "& .MuiPickersLayout-contentWrapper": {
           // ↴ Overrides ❌
           // paddingLeft: theme.vars.size.baseSpacings.sp3,
@@ -217,8 +217,8 @@ const t = {
         width: "fit-content",
         position: "relative",
         top: -1,
-        gap: i.vars.size.baseSpacings.sp3,
-        padding: i.vars.size.baseSpacings.sp1,
+        gap: a.vars.size.baseSpacings.sp3,
+        padding: a.vars.size.baseSpacings.sp1,
         // ↴ Overrides ❌
         "& .MuiYearCalendar-root": {
           // Fix en el height
@@ -226,37 +226,37 @@ const t = {
           "& .MuiPickersYear-root": {
             "& .MuiPickersYear-yearButton": {
               width: "fit-content",
-              padding: `0px ${i.vars.size.baseSpacings.sp3}`,
-              borderRadius: i.vars.size.borderRadius.r1,
+              padding: `0px ${a.vars.size.baseSpacings.sp3}`,
+              borderRadius: a.vars.size.borderRadius.r1,
               "&:hover": {
-                background: i.vars.palette.default.hoverOpacity
+                background: a.vars.palette.default.hoverOpacity
               },
               "&:active": {
-                background: i.vars.palette.default.active
+                background: a.vars.palette.default.active
               },
               "&.Mui-selected": {
-                background: i.vars.palette.primary.enabled,
+                background: a.vars.palette.primary.enabled,
                 "&:hover": {
-                  background: i.vars.palette.primary.hover
+                  background: a.vars.palette.primary.hover
                 },
                 "&:active": {
-                  background: i.vars.palette.primary.active
+                  background: a.vars.palette.primary.active
                 }
               },
               ...o(
-                i.generalSettings.isMobile,
+                a.generalSettings.isMobile,
                 r?.size || "small",
                 "action",
-                (a) => ({
-                  minHeight: a,
-                  height: a,
-                  maxHeight: a
+                (i) => ({
+                  minHeight: i,
+                  height: i,
+                  maxHeight: i
                 })
               ),
               ...s(
-                i.generalSettings.isMobile,
+                a.generalSettings.isMobile,
                 r?.size || "medium",
-                "body"
+                "bodyStandard"
               )
             }
           }
@@ -264,28 +264,28 @@ const t = {
         // ↴ Overrides ❌
         "& .MuiDayCalendar-root": {
           width: "fit-content",
-          padding: i.vars.size.baseSpacings.sp2,
+          padding: a.vars.size.baseSpacings.sp2,
           "& .MuiDayCalendar-header": {
             display: "flex",
-            gap: i.vars.size.baseSpacings.sp1,
+            gap: a.vars.size.baseSpacings.sp1,
             "& .MuiTypography-root": {
               margin: 0,
               ...s(
-                i.generalSettings.isMobile,
+                a.generalSettings.isMobile,
                 r?.size || "medium",
-                "body"
+                "bodyStandard"
               ),
               ...o(
-                i.generalSettings.isMobile,
+                a.generalSettings.isMobile,
                 r?.size || "small",
                 "action",
-                (a) => ({
-                  minHeight: a,
-                  height: a,
-                  maxHeight: a,
-                  minWidth: a,
-                  width: a,
-                  maxWidth: a
+                (i) => ({
+                  minHeight: i,
+                  height: i,
+                  maxHeight: i,
+                  minWidth: i,
+                  width: i,
+                  maxWidth: i
                 })
               )
             }
@@ -293,70 +293,70 @@ const t = {
           "& .MuiDayCalendar-weekContainer": {
             display: "flex",
             margin: 0,
-            paddingTop: i.vars.size.baseSpacings.sp1,
-            gap: i.vars.size.baseSpacings.sp1
+            paddingTop: a.vars.size.baseSpacings.sp1,
+            gap: a.vars.size.baseSpacings.sp1
           }
         }
       },
       // Estilos globales del MuiMultiSectionDigitalClock-root 🌎
       "& .MuiMultiSectionDigitalClock-root": {
-        padding: i.vars.size.baseSpacings.sp1,
+        padding: a.vars.size.baseSpacings.sp1,
         // ↴ Overrides ❌
         "& .MuiList-root": {
           display: "flex",
           width: "fit-content",
           flexDirection: "column",
           overflow: "overlay",
-          borderColor: i.vars.palette.border.secondary,
-          paddingRight: i.vars.size.baseSpacings.sp2,
-          paddingLeft: i.vars.size.baseSpacings.sp2,
-          gap: i.vars.size.baseSpacings.sp2,
+          borderColor: a.vars.palette.border.secondary,
+          paddingRight: a.vars.size.baseSpacings.sp2,
+          paddingLeft: a.vars.size.baseSpacings.sp2,
+          gap: a.vars.size.baseSpacings.sp2,
           "& .MuiButtonBase-root": {
             margin: 0,
             ...o(
-              i.generalSettings.isMobile,
+              a.generalSettings.isMobile,
               r?.size || "small",
               "action",
-              (a) => ({
-                minHeight: a,
-                height: a,
-                maxHeight: a,
-                minWidth: a,
-                width: a,
-                maxWidth: a
+              (i) => ({
+                minHeight: i,
+                height: i,
+                maxHeight: i,
+                minWidth: i,
+                width: i,
+                maxWidth: i
               })
             ),
             ...s(
-              i.generalSettings.isMobile,
+              a.generalSettings.isMobile,
               r?.size || "medium",
-              "body"
+              "bodyStandard"
             )
           }
         }
       },
       // Estilos globales del MuiDialogActions-root 🌎
       "& .MuiDialogActions-root": {
-        paddingRight: i.vars.size.baseSpacings.sp3,
+        paddingRight: a.vars.size.baseSpacings.sp3,
         // ↴ Overrides ❌
         "& .MuiButtonBase-root": {
           margin: 0,
           ...o(
-            i.generalSettings.isMobile,
+            a.generalSettings.isMobile,
             r?.size || "small",
             "action",
-            (a) => ({
-              minHeight: a,
-              height: a,
-              maxHeight: a,
-              minWidth: a,
-              width: a,
-              maxWidth: a
+            (i) => ({
+              minHeight: i,
+              height: i,
+              maxHeight: i,
+              minWidth: i,
+              width: i,
+              maxWidth: i
             })
           ),
           ...s(
-            i.generalSettings.isMobile,
+            a.generalSettings.isMobile,
             r?.size || "medium",
-            "body"
+            "bodyStandard"
           )
         }
       }
@@ -365,12 +365,12 @@ const t = {
   /**
    * estilos para paper de Material UI
    */
-  paper: ({ theme: i, ownerState: r }) => ({
+  paper: ({ theme: a, ownerState: r }) => ({
     minWidth: "0 !important",
-    padding: i.vars.size.baseSpacings.sp3,
-    borderRadius: i.vars.size.borderRadius.r1,
+    padding: a.vars.size.baseSpacings.sp3,
+    borderRadius: a.vars.size.borderRadius.r1,
     "& .MuiPickersLayout-root": {
-      gap: i.vars.size.baseSpacings.sp2
+      gap: a.vars.size.baseSpacings.sp2
     },
     // Estilos globales del MuiPickersLayout-root 🌎
     "& .MuiPickersToolbar-root": {
@@ -379,41 +379,41 @@ const t = {
       // ↴ Overrides ❌
       "& > span:first-of-type": {
         ...s(
-          i.generalSettings.isMobile,
+          a.generalSettings.isMobile,
           r?.size || "medium",
-          "body"
+          "bodyStandard"
         )
       },
       // ↴ Overrides ❌
       "& .MuiPickersToolbar-content": {
         "& .MuiDateTimePickerToolbar-dateContainer": {
           "& button > span": {
-            color: i.vars.palette.text.primary,
+            color: a.vars.palette.text.primary,
             "&.Mui-selected": {
-              color: i.vars.palette.primary.selected
+              color: a.vars.palette.primary.selected
             }
           },
           "& button:nth-of-type(1) > span": {
             ...s(
-              i.generalSettings.isMobile,
+              a.generalSettings.isMobile,
               r?.size || "medium",
-              "body"
+              "bodyStandard"
             )
           },
           "& button:nth-of-type(2) > span": {
             ...s(
-              i.generalSettings.isMobile,
+              a.generalSettings.isMobile,
               r?.size || "medium",
-              "subtitle"
+              "subtitleStandard"
             )
           }
         },
         "& .MuiDateTimePickerToolbar-timeContainer": {
-          gap: i.vars.size.baseSpacings.sp2,
+          gap: a.vars.size.baseSpacings.sp2,
           "& button > span": {
-            color: i.vars.palette.text.primary,
+            color: a.vars.palette.text.primary,
             "&.Mui-selected": {
-              color: i.vars.palette.primary.selected
+              color: a.vars.palette.primary.selected
             }
           },
           "& .MuiDateTimePickerToolbar-timeDigitsContainer": {
@@ -423,9 +423,9 @@ const t = {
             },
             "& button:nth-of-type(1) > span, & button:nth-of-type(2) > span": {
               ...s(
-                i.generalSettings.isMobile,
+                a.generalSettings.isMobile,
                 r?.size || "medium",
-                "subtitle"
+                "subtitleStandard"
               )
             }
           },
@@ -434,9 +434,9 @@ const t = {
             justifyContent: "center",
             alignSelf: "center",
             ...s(
-              i.generalSettings.isMobile,
+              a.generalSettings.isMobile,
               r?.size || "medium",
-              "subtitle"
+              "subtitleStandard"
             )
           },
           "& .MuiDateTimePickerToolbar-ampmSelection": {
@@ -447,19 +447,19 @@ const t = {
               display: "flex",
               alignItems: "center",
               ...o(
-                i.generalSettings.isMobile,
+                a.generalSettings.isMobile,
                 r?.size || "small",
                 "action",
-                (a) => ({
-                  height: a,
-                  minHeight: a,
-                  maxHeight: a
+                (i) => ({
+                  height: i,
+                  minHeight: i,
+                  maxHeight: i
                 })
               ),
               ...s(
-                i.generalSettings.isMobile,
+                a.generalSettings.isMobile,
                 r?.size || "medium",
-                "body"
+                "bodyStandard"
               )
             }
           }
@@ -474,28 +474,28 @@ const t = {
         minHeight: "auto",
         width: "fit-content",
         boxShadow: "none",
-        background: i.vars.palette.default.enabled,
-        paddingBottom: i.vars.size.baseSpacings.sp0,
-        gap: i.vars.size.baseSpacings.sp0,
-        borderRadius: i.vars.size.borderRadius.r1,
-        borderBottomLeftRadius: i.vars.size.borderRadius.r0,
-        borderBottomRightRadius: i.vars.size.borderRadius.r0,
+        background: a.vars.palette.default.enabled,
+        paddingBottom: a.vars.size.baseSpacings.sp0,
+        gap: a.vars.size.baseSpacings.sp0,
+        borderRadius: a.vars.size.borderRadius.r1,
+        borderBottomLeftRadius: a.vars.size.borderRadius.r0,
+        borderBottomRightRadius: a.vars.size.borderRadius.r0,
         "& .MuiTab-root": {
-          border: i.vars.size.borderStroke.container,
-          borderColor: i.vars.palette.default.enabled,
-          borderTopLeftRadius: `calc(${i.vars.size.borderRadius.r1} - 1px)`,
-          borderTopRightRadius: `calc(${i.vars.size.borderRadius.r1} - 1px)`,
+          border: a.vars.size.borderStroke.container,
+          borderColor: a.vars.palette.default.enabled,
+          borderTopLeftRadius: `calc(${a.vars.size.borderRadius.r1} - 1px)`,
+          borderTopRightRadius: `calc(${a.vars.size.borderRadius.r1} - 1px)`,
           ...o(
-            i.generalSettings.isMobile,
+            a.generalSettings.isMobile,
             r?.size || "small",
             "container",
-            (a) => ({
-              minHeight: a,
-              height: a,
-              maxHeight: a,
-              minWidth: a,
-              width: a,
-              maxWidth: a
+            (i) => ({
+              minHeight: i,
+              height: i,
+              maxHeight: i,
+              minWidth: i,
+              width: i,
+              maxWidth: i
             })
           ),
           "& .MuiTouchRipple-root": {
@@ -503,17 +503,17 @@ const t = {
           }
         },
         "& .MuiTab-root.Mui-selected": {
-          background: i.vars.palette.background.default,
+          background: a.vars.palette.background.default,
           "&::after": {
             content: '""',
             width: "70%",
             transform: "translateX(20%)",
-            height: i.vars.size.borderRadius["r0-5"],
+            height: a.vars.size.borderRadius["r0-5"],
             left: 0,
             top: 0,
-            backgroundColor: r?.tabSkeleton ? i.vars.palette.skeleton.default : r?.tabDisabled ? i.vars.palette.text.disabled : i.vars.palette.primary.enabled,
-            borderEndStartRadius: i.vars.size.borderRadius.r1,
-            borderEndEndRadius: i.vars.size.borderRadius.r1,
+            backgroundColor: r?.tabSkeleton ? a.vars.palette.skeleton.default : r?.tabDisabled ? a.vars.palette.text.disabled : a.vars.palette.primary.enabled,
+            borderEndStartRadius: a.vars.size.borderRadius.r1,
+            borderEndEndRadius: a.vars.size.borderRadius.r1,
             position: "absolute"
           }
         },
@@ -525,48 +525,48 @@ const t = {
         display: "flex",
         width: "fit-content",
         height: "fit-content",
-        gap: i.vars.size.baseSpacings.sp3,
-        padding: i.vars.size.baseSpacings.sp3,
-        border: i.vars.size.borderStroke.container,
-        borderRadius: i.vars.size.borderRadius.r1,
+        gap: a.vars.size.baseSpacings.sp3,
+        padding: a.vars.size.baseSpacings.sp3,
+        border: a.vars.size.borderStroke.container,
+        borderRadius: a.vars.size.borderRadius.r1,
         borderTopLeftRadius: 0,
-        borderColor: i.vars.palette.border.default,
+        borderColor: a.vars.palette.border.default,
         margin: 0,
         "& .MuiYearCalendar-root": {
           // Fix en el height
           height: "218px",
           "& .MuiPickersYear-yearButton": {
             margin: 0,
-            borderRadius: i.vars.size.borderRadius.r1,
+            borderRadius: a.vars.size.borderRadius.r1,
             "&:hover": {
-              background: i.vars.palette.default.hoverOpacity
+              background: a.vars.palette.default.hoverOpacity
             },
             "&:active": {
-              background: i.vars.palette.default.active
+              background: a.vars.palette.default.active
             },
             "&.Mui-selected": {
-              background: i.vars.palette.primary.enabled,
+              background: a.vars.palette.primary.enabled,
               "&:hover": {
-                background: i.vars.palette.primary.hover
+                background: a.vars.palette.primary.hover
               },
               "&:active": {
-                background: i.vars.palette.primary.active
+                background: a.vars.palette.primary.active
               }
             },
             ...o(
-              i.generalSettings.isMobile,
+              a.generalSettings.isMobile,
               r?.size || "small",
               "action",
-              (a) => ({
-                minHeight: a,
-                height: a,
-                maxHeight: a
+              (i) => ({
+                minHeight: i,
+                height: i,
+                maxHeight: i
               })
             ),
             ...s(
-              i.generalSettings.isMobile,
+              a.generalSettings.isMobile,
               r?.size || "medium",
-              "body"
+              "bodyStandard"
             )
           }
         }
@@ -574,28 +574,28 @@ const t = {
       // ↴ Overrides ❌
       "& .MuiDayCalendar-root": {
         width: "fit-content",
-        padding: i.vars.size.baseSpacings.sp2,
+        padding: a.vars.size.baseSpacings.sp2,
         "& .MuiDayCalendar-header": {
           display: "flex",
-          gap: i.vars.size.baseSpacings.sp1,
+          gap: a.vars.size.baseSpacings.sp1,
           "& .MuiTypography-root": {
             margin: 0,
             ...s(
-              i.generalSettings.isMobile,
+              a.generalSettings.isMobile,
               r?.size || "medium",
-              "body"
+              "bodyStandard"
             ),
             ...o(
-              i.generalSettings.isMobile,
+              a.generalSettings.isMobile,
               r?.size || "small",
               "action",
-              (a) => ({
-                minHeight: a,
-                height: a,
-                maxHeight: a,
-                minWidth: a,
-                width: a,
-                maxWidth: a
+              (i) => ({
+                minHeight: i,
+                height: i,
+                maxHeight: i,
+                minWidth: i,
+                width: i,
+                maxWidth: i
               })
             )
           }
@@ -603,18 +603,18 @@ const t = {
         "& .MuiDayCalendar-weekContainer": {
           display: "flex",
           margin: 0,
-          paddingTop: i.vars.size.baseSpacings.sp1,
-          gap: i.vars.size.baseSpacings.sp1
+          paddingTop: a.vars.size.baseSpacings.sp1,
+          gap: a.vars.size.baseSpacings.sp1
         }
       },
       "& .MuiTimeClock-root": {
         width: "fit-content",
-        border: i.vars.size.borderStroke.container,
-        borderRadius: i.vars.size.borderRadius.r1,
-        borderColor: i.vars.palette.border.default,
-        padding: i.vars.size.baseSpacings.sp1,
+        border: a.vars.size.borderStroke.container,
+        borderRadius: a.vars.size.borderRadius.r1,
+        borderColor: a.vars.palette.border.default,
+        padding: a.vars.size.baseSpacings.sp1,
         "& .MuiClock-clock": {
-          background: i.vars.palette.default.enabled
+          background: a.vars.palette.default.enabled
         }
       },
       "& .MuiPickersArrowSwitcher-root": {
@@ -625,7 +625,7 @@ const t = {
         position: "relative"
       },
       "& .MuiPickersLayout-actionBar": {
-        padding: `${i.vars.size.baseSpacings.sp1} 0px`
+        padding: `${a.vars.size.baseSpacings.sp1} 0px`
       }
     },
     // Estilos globales del MuiDialogActions-root 🌎
@@ -634,24 +634,24 @@ const t = {
       "& .MuiButtonBase-root": {
         margin: 0,
         ...o(
-          i.generalSettings.isMobile,
+          a.generalSettings.isMobile,
           r?.size || "small",
           "action",
-          (a) => ({
-            minHeight: a,
-            height: a,
-            maxHeight: a,
-            minWidth: a
+          (i) => ({
+            minHeight: i,
+            height: i,
+            maxHeight: i,
+            minWidth: i
           })
         ),
         ...s(
-          i.generalSettings.isMobile,
+          a.generalSettings.isMobile,
           r?.size || "medium",
-          "body"
+          "bodyStandard"
         )
       },
       "& .MuiButtonBase-root:nth-of-type(1)": {
-        color: i.vars.palette.text.secondary,
+        color: a.vars.palette.text.secondary,
         textTransform: "lowercase"
       },
       "& .MuiButtonBase-root:nth-of-type(2)": {
@@ -662,71 +662,71 @@ const t = {
   /**
    * Estilos de pickersDay de Mui x
    */
-  pickersDay: ({ theme: i, ownerState: r }) => ({
+  pickersDay: ({ theme: a, ownerState: r }) => ({
     margin: 0,
-    borderRadius: i.vars.size.borderRadius.r1,
+    borderRadius: a.vars.size.borderRadius.r1,
     "&:hover": {
-      background: i.vars.palette.default.hoverOpacity
+      background: a.vars.palette.default.hoverOpacity
     },
     "&:active": {
-      background: i.vars.palette.default.active
+      background: a.vars.palette.default.active
     },
     "&.Mui-selected": {
-      background: i.vars.palette.primary.enabled,
+      background: a.vars.palette.primary.enabled,
       "&:hover": {
-        background: i.vars.palette.primary.hover
+        background: a.vars.palette.primary.hover
       },
       "&:active": {
-        background: i.vars.palette.primary.active
+        background: a.vars.palette.primary.active
       }
     },
     ...o(
-      i.generalSettings.isMobile,
+      a.generalSettings.isMobile,
       r?.size || "small",
       "action",
-      (a) => ({
-        minHeight: a,
-        height: a,
-        maxHeight: a,
-        minWidth: a,
-        width: a,
-        maxWidth: a
+      (i) => ({
+        minHeight: i,
+        height: i,
+        maxHeight: i,
+        minWidth: i,
+        width: i,
+        maxWidth: i
       })
     )
   }),
   /**
    *Estilos de pickersCalendarHeader de Mui x
    */
-  pickersCalendarHeader: ({ theme: i, ownerState: r }) => ({
+  pickersCalendarHeader: ({ theme: a, ownerState: r }) => ({
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
     margin: 0,
-    padding: `0px ${i.vars.size.baseSpacings.sp2}`,
+    padding: `0px ${a.vars.size.baseSpacings.sp2}`,
     "& .MuiPickersCalendarHeader-labelContainer": {
-      border: i.vars.size.borderStroke.actionInput,
-      borderColor: i.vars.palette.border.default,
+      border: a.vars.size.borderStroke.actionInput,
+      borderColor: a.vars.palette.border.default,
       ...o(
-        i.generalSettings.isMobile,
+        a.generalSettings.isMobile,
         r?.size || "medium",
         "action",
-        (a) => ({
-          height: a,
-          minHeight: a,
-          maxHeight: a
+        (i) => ({
+          height: i,
+          minHeight: i,
+          maxHeight: i
         })
       ),
       margin: 0,
-      paddingLeft: i.vars.size.baseSpacings.sp1,
-      borderRadius: i.vars.size.borderRadius.r1,
+      paddingLeft: a.vars.size.baseSpacings.sp1,
+      borderRadius: a.vars.size.borderRadius.r1,
       "& .MuiPickersCalendarHeader-label": {
         margin: 0,
-        paddingLeft: i.vars.size.baseSpacings.sp1,
-        paddingRight: i.vars.size.baseSpacings.sp3,
+        paddingLeft: a.vars.size.baseSpacings.sp1,
+        paddingRight: a.vars.size.baseSpacings.sp3,
         ...s(
-          i.generalSettings.isMobile,
+          a.generalSettings.isMobile,
           r?.size || "medium",
-          "body"
+          "bodyStandard"
         )
       }
     }
@@ -736,19 +736,19 @@ const t = {
   /**
    * estilos para el skeleton 🦴
    */
-  skeleton: ({ theme: i, ownerState: r }) => ({
+  skeleton: ({ theme: a, ownerState: r }) => ({
     ...o(
-      i.generalSettings.isMobile,
+      a.generalSettings.isMobile,
       r?.size || "small",
       "action",
-      (a) => ({
-        height: a,
-        minHeight: a,
-        maxHeight: a
+      (i) => ({
+        height: i,
+        minHeight: i,
+        maxHeight: i
       })
     )
   })
 };
 export {
-  t as dateTimePickerStyles
+  n as dateTimePickerStyles
 };