@m4l/styles 0.0.22 → 0.0.23

package/theme/overrides/M4LExtendedComponents/{index.28d622ba.js → index.566e183a.js}

@@ -8,11 +8,14 @@ const i = (o) => ({
         background: o.palette.background.default,
         boxShadow: o.customShadows.z2,
         padding: "0px",
-        border: "1px solid",
-        borderColor: o.palette.background.background,
+        borderTop: "1.5px solid",
+        borderColor: o.palette.state.borderTop,
         overflow: "hidden",
+        height: "35px",
         [o.breakpoints.down("sm")]: {
-          gap: "0px"
+          gap: "0px",
+          height: "auto",
+          marginBottom: "8px"
         },
         "& .M4LDynamicFilter-containerFistRow": {
           height: "32px",
@@ -30,7 +33,8 @@ const i = (o) => ({
             alignItems: "center",
             maxWidth: "100%",
             [o.breakpoints.down("sm")]: {
-              height: "44px"
+              height: "100%",
+              padding: "8px"
             }
           }
         },
@@ -41,7 +45,7 @@ const i = (o) => ({
           display: "flex",
           flexDirection: "row",
           gap: "4px",
-          backgroundColor: o.palette.background.neutral,
+          backgroundColor: o.palette.background.background,
           padding: "4px",
           [o.breakpoints.down("sm")]: {
             gap: "12px",
@@ -52,15 +56,15 @@ const i = (o) => ({
           display: "flex",
           flexDirection: "row",
           gap: "8px",
-          padding: "4px",
-          backgroundColor: o.palette.background.neutral,
+          padding: "4px 6px 4px 4px",
+          backgroundColor: o.palette.background.background,
           height: "100%",
           maxWidth: "135px",
           width: "100%",
           alignItems: "center",
           "& > input": {
             border: "1px solid",
-            borderColor: o.palette.background.background,
+            borderColor: o.palette.background.default,
             background: "none",
             ...o.typography.body,
             color: o.palette.text.primary,
@@ -250,7 +254,7 @@ const i = (o) => ({
       }
     }
   }
-}), p = (o) => ({
+}), d = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -401,7 +405,7 @@ const i = (o) => ({
       }
     }
   }
-}), d = (o) => ({
+}), p = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {}
@@ -550,6 +554,10 @@ const i = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
+        "&.M4LButton-colorError .MuiButtonBase-root": {
+          backgroundColor: `${o.palette.state.error.normal}!important`,
+          test: "bruce button"
+        },
         width: "fit-content",
         display: "flex",
         justifyContent: "center",
@@ -1511,9 +1519,12 @@ const i = (o) => ({
         borderColor: o.palette.state.borderTop,
         [o.breakpoints.down("sm")]: {
           height: "auto",
-          background: "none",
+          background: o.palette.background.default,
+          boxShadow: o.customShadows.z2,
           width: "100%",
-          maxWidth: "100%"
+          maxWidth: "100%",
+          paddingRight: "0px",
+          borderRadius: "4px"
         },
         "*::-webkit-scrollbar": {
           width: "8px",
@@ -1536,7 +1547,11 @@ const i = (o) => ({
           overflow: "auto",
           height: "36px",
           borderRight: "1px solid",
-          borderColor: o.palette.state.overdefoult,
+          borderColor: o.palette.state.borderTop,
+          [o.breakpoints.down("sm")]: {
+            background: "none",
+            borderRight: "none"
+          },
           "& .M4LAreasAdmin-areaIconLayer": {
             background: o.palette.background.neutral,
             boxShadow: o.customShadows.z2,
@@ -1561,6 +1576,9 @@ const i = (o) => ({
             width: "fit-content",
             height: "auto",
             alignItems: "center",
+            [o.breakpoints.down("sm")]: {
+              background: "none"
+            },
             "& .M4LAreasAdmin-areaContainerContentChips": {
               display: "flex",
               flexDirection: "row",
@@ -1568,7 +1586,8 @@ const i = (o) => ({
               justifyContent: "space-between",
               [o.breakpoints.down("sm")]: {
                 justifyContent: "space-between",
-                width: "100%"
+                width: "100%",
+                background: "none"
               },
               "& .css-jjtu05": {
                 "& .css-16ugaun": {},
@@ -1602,37 +1621,64 @@ const i = (o) => ({
                   margin: "0px",
                   borderRadius: "4px",
                   overflow: "hidden",
-                  width: "fit-content"
+                  width: "fit-content",
+                  [o.breakpoints.down("sm")]: {
+                    background: "none"
+                  }
                 }
               },
               "& .M4LAreasAdmin-areaChipMobileRoot": {
                 display: "flex",
                 overflow: "hidden",
                 width: "100%",
-                backgroundColor: o.palette.state.active,
+                backgroundColor: o.palette.state.default,
+                boxShadow: o.customShadows.z2,
+                borderTop: "1.5px solid",
+                boderColor: o.palette.state.borderTop,
                 borderRadius: "4px",
+                [o.breakpoints.down("sm")]: {
+                  backgroundColor: o.palette.background.default,
+                  boxShadow: o.customShadows.z1
+                },
                 "& .M4LAreasAdmin-areaChipRoot ": {
                   margin: "0px",
                   borderRadius: "4px 0px 0px 4px",
                   overflow: "hidden",
-                  width: "100%"
+                  width: "100%",
+                  [o.breakpoints.down("sm")]: {
+                    background: "none"
+                  }
+                },
+                "& .M4LAreasAdmin-selected .": {
+                  [o.breakpoints.down("sm")]: {
+                    background: "none"
+                  }
                 }
               },
               "& .M4LAreasAdmin-areaChipMobileIconContainer": {
                 display: "flex",
                 width: "fit-content",
-                alignItems: "center",
-                borderRadius: "0px 4px 4px 0px",
-                background: o.palette.state.active,
+                borderRadius: "0px 0px 0px 0px",
+                boxShadow: o.customShadows.z2,
                 ...o.typography.body,
                 color: o.palette.text.primary,
                 "& .M4LIconButton-root": {
-                  backgroundColor: `${o.palette.state.active}!important`,
-                  borderLeft: "1px solid",
-                  borderColor: o.palette.patronus?.marbleLight[10],
-                  borderRadius: "0px",
+                  background: "transparent",
+                  backgroundColor: "transparent",
                   "& .M4LIcon-icon": {
-                    backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
+                    "&::before": {
+                      content: '""',
+                      width: "0px",
+                      top: "0px",
+                      bottom: "0px",
+                      right: "1px",
+                      backgroundColor: "none",
+                      borderRadius: "2px",
+                      position: "absolute",
+                      borderRight: "1px ",
+                      borderColor: o.palette.state.borderDefault,
+                      height: "20px"
+                    }
                   }
                 }
               },
@@ -1658,6 +1704,11 @@ const i = (o) => ({
                 border: "1px solid",
                 borderColor: o.palette.state.default,
                 background: o.palette.state.default,
+                [o.breakpoints.down("sm")]: {
+                  background: "none",
+                  border: "none",
+                  borderColor: "none"
+                },
                 "& .M4LAreasAdmin-areaContainerChipEditButton": {
                   display: "flex",
                   width: "fit-content"
@@ -1671,7 +1722,8 @@ const i = (o) => ({
                   color: o.palette.text.primary,
                   height: "22px",
                   [o.breakpoints.down("sm")]: {
-                    height: "auto"
+                    height: "auto",
+                    background: "none"
                   },
                   "& .M4LAreasAdmin-areaChipTitle": {
                     backgroundColor: "transparent",
@@ -1688,12 +1740,19 @@ const i = (o) => ({
                       textOverflow: "ellipsis",
                       overflow: "hidden",
                       whiteSpace: "nowrap",
-                      flex: "1"
+                      flex: "1",
+                      color: o.palette.text.primary
                     }
                   },
                   "& .M4LIconButton-root": {
+                    [o.breakpoints.down("sm")]: {
+                      color: o.palette.text.primary
+                    },
                     "& .M4LIcon-icon": {
-                      backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
+                      backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
+                      [o.breakpoints.down("sm")]: {
+                        color: o.palette.text.primary
+                      }
                     }
                   }
                 },
@@ -1712,8 +1771,14 @@ const i = (o) => ({
                   justifyContent: "center",
                   width: "20px",
                   height: "20px",
+                  [o.breakpoints.down("sm")]: {
+                    color: o.palette.text.primary
+                  },
                   "&.M4LIconButton-variantPrimary": {
-                    background: o.palette.state.active
+                    background: o.palette.state.active,
+                    [o.breakpoints.down("sm")]: {
+                      color: o.palette.text.primary
+                    }
                   }
                 }
               }
@@ -1723,7 +1788,10 @@ const i = (o) => ({
         "& .M4LAreasAdmin-areasAddButton": {
           backgroundColor: `${o.palette.state.active}!important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
+            backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
+            [o.breakpoints.down("sm")]: {
+              color: o.palette.text.primary
+            }
           }
         },
         "&.M4LAreasAdmin-isMobile": {
@@ -1770,7 +1838,7 @@ const i = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), w = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
@@ -1778,7 +1846,7 @@ const i = (o) => ({
         background: o.palette.background.background,
         "& .M4LAreasViewer-areaGridLayout": {
           "& .M4LAreasViewer-windowRoot": {
-            background: o.palette.background.neutral,
+            background: o.palette.state.default,
             border: "none",
             boxShadow: o.customShadows.z2,
             borderRadius: "4px",
@@ -1993,8 +2061,6 @@ const i = (o) => ({
                   }
                 },
                 "& .MuiButtonBase-root:hover": {
-                  background: o.palette.state.default,
-                  color: o.palette.state.hover,
                   "& .M4LIcon-icon": {
                     backgroundColor: o.palette.state.hover
                   }
@@ -2317,7 +2383,7 @@ const i = (o) => ({
       }
     }
   }
-}), w = (o) => ({
+}), f = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
@@ -2423,7 +2489,7 @@ const i = (o) => ({
       overflow: "hidden"
     }
   }
-}), h = (o) => ({
+}), k = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
@@ -2431,13 +2497,15 @@ const i = (o) => ({
           width: "36px",
           height: "36px",
           borderRadius: "4px",
-          background: o.palette.patronus?.blazeOrange[40]
+          padding: "4px",
+          background: o.palette.state.active,
+          color: o.palette.patronus?.ashBlak[70]
         },
         test: "root"
       }
     }
   }
-}), v = (o) => ({
+}), h = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -2448,55 +2516,74 @@ const i = (o) => ({
   M4LAccountPopoverPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-popover": {
-        test: "root",
         display: "flex",
         flexDirection: "column",
-        gap: "8px",
+        gap: "0px",
         borderRadius: "6px",
         "& .MuiPaper-root": {
           display: "flex",
           flexDirection: "column",
-          gap: "8px",
-          padding: "8px",
+          gap: "0px",
+          padding: "12px",
           borderRadius: "6px",
           boxShadow: o.customShadows.z3,
-          background: o.palette.background.background
-        },
-        "& .M4LAccountPopover-containerAppVersion": {
-          display: "flex",
-          borderBottom: "2px solid",
-          borderColor: o.palette.state.default,
-          padding: "4px 4px 8px 4px"
-        },
-        "& .M4LAccountPopover-containerMenuItems": {
-          "& .M4LAccountPopover-menuItem": {
+          background: o.palette.background.default,
+          "& .M4LAccountPopover-containerUserInfo": {
+            display: "flex",
+            flexDirection: "column",
+            "& .M4LAccountPopover-labelUserName": {
+              color: o.palette.text.primary,
+              ...o.typography.paragraphDens,
+              padding: "4px"
+            },
+            "& .M4LAccountPopover-labelUserEmail": {
+              color: o.palette.text.primary,
+              ...o.typography.paragraph,
+              padding: "4px"
+            }
+          },
+          "& .M4LAccountPopover-containerAppVersion": {
+            display: "flex",
+            padding: "4px 4px 4px 4px",
+            "& .M4LAccountPopover-labelVersion": {
+              color: o.palette.text.secondary,
+              ...o.typography.paragraph
+            }
+          },
+          "& .M4LAccountPopover-containerMenuItems": {
+            borderTop: "2px solid",
+            borderBottom: "2px solid",
+            borderColor: o.palette.state.default,
             padding: "4px",
-            borderRadius: "4px",
+            margin: "8px 0 8px 0",
+            "& .M4LAccountPopover-menuItem": {
+              padding: "4px",
+              borderRadius: "4px",
+              cursor: "pointer",
+              "&:hover": {
+                background: o.palette.state.default
+              }
+            }
+          },
+          "& .M4LAccountPopover-logOut": {
+            justifyContent: "center",
             cursor: "pointer",
+            color: o.palette.text.primary,
+            ...o.typography.paragraph,
+            padding: "4px",
+            borderRadius: "4px",
             "&:hover": {
               background: o.palette.state.default
             }
+          },
+          "& .M4LPopover-arrowStyle": {
+            display: "none"
           }
-        },
-        "& .M4LAccountPopover-logOut": {
-          borderTop: "2px solid",
-          borderColor: o.palette.state.default,
-          justifyContent: "center",
-          paddingTop: "8px",
-          cursor: "pointer",
-          padding: "4px",
-          borderRadius: "4px",
-          "&:hover": {
-            background: o.palette.state.default
-          }
-        },
-        "& .M4LPopover-arrowStyle": {
-          display: "none"
         }
       }
     }
   }
-}), k = (o) => ({
+}), v = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -2529,21 +2616,27 @@ const i = (o) => ({
           width: "100%",
           height: "100%",
           boxShadow: "none",
-          background: o.palette.background.neutral,
+          background: "none",
           border: "0px",
           borderColor: "transparent",
           borderRadius: "6px",
           overFlow: "visible"
         },
         "& .M4LSplitLayout-secondPart": {
-          background: o.palette.background.default,
+          background: o.palette.background.neutral,
           borderRadius: "6px",
-          padding: "8px"
+          padding: "8px",
+          boxShadow: o.customShadows.z2,
+          borderTop: "1.5px solid",
+          borderColor: o.palette.state.borderTop
         },
         "& .layout-pane-primary": {
-          background: o.palette.background.default,
+          background: o.palette.background.neutral,
           borderRadius: "6px",
-          padding: "8px"
+          padding: "8px",
+          boxShadow: o.customShadows.z2,
+          borderTop: "1.5px solid",
+          borderColor: o.palette.state.borderTop
         }
       }
     }
@@ -2771,13 +2864,13 @@ const i = (o) => ({
         width: "100%",
         background: o.palette.background.default,
         boxShadow: o.customShadows.z2,
-        borderTop: "1px solid",
-        borderColor: o.palette.state.default,
+        borderTop: "1.5px solid",
+        borderColor: o.palette.state.borderTop,
         borderRadius: "4px",
         "& .M4LTypography-root": {
           "& .MuiTypography-root": {
             ...o.typography.bodyDens,
-            color: o.palette.text.disabled
+            color: o.palette.text.secondary
           }
         },
         "& .MuiPaper-root": {
@@ -2785,6 +2878,7 @@ const i = (o) => ({
         }
       },
       "& .MuiButtonBase-root": {
+        padding: "4px 8px 4px 8px",
         "&.MuiAccordionSummary-root.Mui-expanded": {
           background: o.palette.state.active12,
           "& .M4LTypography-root": {
@@ -3135,7 +3229,7 @@ const i = (o) => ({
       }
     }
   }
-}), F = (o) => ({
+}), V = (o) => ({
   M4LTooltip: {
     styleOverrides: {
       "&.M4LTooltip-root": {
@@ -3160,7 +3254,7 @@ const i = (o) => ({
       }
     }
   }
-}), V = (o) => ({
+}), F = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "& .M4LBadge-root": {
@@ -3172,21 +3266,42 @@ const i = (o) => ({
   M4LDataGrid: {
     styleOverrides: {
       "&.M4LDataGrid-root": {
-        test: "root",
+        background: o.palette.background.default,
+        boxShadow: o.customShadows.z2,
+        borderRadius: "4px",
+        padding: "4px",
+        display: "flex",
+        position: "relative",
+        flexDirection: "column",
+        gap: "4px",
+        height: "100%",
+        borderTop: "1.5",
+        borderColor: o.palette.state.borderTop,
+        width: "100%",
         "& .M4LDataGrid-actions": {
-          ...o.typography.caption,
-          position: "absolute",
+          ...o.typography.body,
           left: "0px",
           right: "0px",
           top: "0px",
-          height: o.spacing(5.5),
-          padding: 0,
+          padding: "8px",
           display: "flex",
           flexDirection: "row",
+          borderRadius: "4px",
           alignItems: "center",
-          justifyContent: "flex-end",
-          [o.breakpoints.up("sm")]: {
-            padding: o.spacing(0, 1.5)
+          justifyContent: "space-between",
+          background: o.palette.state.default,
+          position: "absolute",
+          gap: "8px",
+          "& .M4LDataGrid-actionsConfigContainer": {
+            display: "flex",
+            flexDirection: "row",
+            gap: "8px",
+            "& .M4LIconButton-root": {
+              background: o.palette.state.default,
+              boxShadow: o.customShadows.z1,
+              borderTop: "1.5px solid",
+              borderColor: o.palette.state.borderTop
+            }
           },
           "& .M4LDataGrid-rowsCount": {
             display: "flex",
@@ -3212,31 +3327,43 @@ const i = (o) => ({
           left: "0px",
           right: "0px",
           overflow: "hidden",
+          borderRadius: "4px",
+          border: "none",
+          boxshadow: o.customShadows.z2,
+          background: o.palette.background.default,
+          padding: "4px",
+          [o.breakpoints.down("sm")]: {
+            top: "54px"
+          },
           "& .M4LDataGrid-wrapperDataGridCss": {
-            position: "absolute",
-            bottom: "0px",
-            top: "0px",
-            left: "0px",
-            right: "0px",
+            position: "relative",
+            height: "100%",
+            overflow: "hidden",
             "& .rdg ": {
+              border: "none",
+              background: o.palette.background.default,
+              gridColumnGap: "0px",
+              gridRowGap: "0px",
               userSelect: "initial",
               height: "100%",
               contentVisibility: "unset",
-              overflow: "scroll",
-              borderRadius: "5px",
+              overflow: "auto",
+              borderRadius: "4px",
+              padding: "0px",
+              borderColor: "none",
               "--rdg-grid-inline-size": "0px",
-              "--rdg-header-background-color": o.palette.grid?.sectionHeader,
-              "--rdg-row-selected-background-color": o.palette.state.hover,
-              "--rdg-row-hover-background-color": o.palette.grid?.rowHover,
+              "--rdg-header-background-color": o.palette.background.background,
+              "--rdg-row-selected-background-color": o.palette.state.active12,
+              "--rdg-row-hover-background-color": o.palette.state.active12,
               "--rdg-background-color": o.palette.background.default,
-              "--rdg-selection-color": o.palette.primary.main,
-              "--row-selected-hover-background-color": o.palette.mode === "light" ? o.palette.primary.LightSelectedHover : o.palette.primary.DarkSelectedHover,
+              "--rdg-selection-color": o.palette.state.active,
+              "--row-selected-hover-background-color": (o.palette.mode === "light", o.palette.state.active12),
               "--rdg-checkbox-color": o.palette.primary.main,
               "--rdg-checkbox-focus-color": t(
                 o.palette.primary.main,
                 o.palette.action.selectedOpacity
               ),
-              "--rdg-border-color": o.palette.divider
+              "--rdg-border-color": "none"
             },
             "& .rdg::-webkit-scrollbar": {
               width: "6px",
@@ -3260,34 +3387,64 @@ const i = (o) => ({
               justifyContent: "center",
               alignItems: "center"
             },
+            "& .rdg-row": {
+              '&[aria-selected="false"] .rdg-cell': {
+                backgroundColor: `${o.palette.background.default}`
+              },
+              "&:nth-child(odd)": {
+                "& .rdg-cell": {
+                  backgroundColor: o.palette.background.neutral
+                }
+              },
+              '&[aria-selected="true"] .rdg-cell': {
+                backgroundColor: `${o.palette.state.active12}`
+              },
+              "&:hover": {
+                "& .rdg-cell": {
+                  backgroundColor: `${o.palette.state.active12}!important`
+                }
+              },
+              backgroundColor: "transparent"
+            },
             "& .rdg-cell": {
               fontFamily: o.typography.body2.fontFamily,
               fontWeight: o.typography.body2.fontWeight,
               fontSize: o.typography.body2.fontSize,
               color: o.palette.text.secondary,
-              borderBottom: `1px solid ${o.palette.divider}`,
-              borderRight: "0px solid transparent",
-              position: "relative",
+              borderBottom: "2px solid transparent",
+              borderRight: "2px solid transparent",
+              borderColor: o.palette.background.background,
+              borderRadius: "2px",
+              display: "inline",
+              justifyContent: "center",
+              alignItems: "center",
+              textOverflow: "inline",
+              gridTemplateColumns: "auto",
               "&.rdg-cell-frozen": {
-                position: "sticky"
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
               },
               "&:after": {
                 content: '""',
-                borderRight: `1px solid ${o.palette.divider}`,
+                borderRight: `0px solid ${o.palette.divider}`,
                 position: "absolute",
                 right: "0px",
-                top: "25%",
-                bottom: "25%"
+                height: "100%"
               },
               "& .m4l_icon": {
                 height: "100%"
               }
             },
             "& [aria-selected=true]": {
-              backgroundColor: o.palette.state.active
+              backgroundColor: o.palette.state.active12,
+              color: o.palette.text.primary
             },
             "& .rdg-cell.rdg-cell-align-left": {
-              textAlign: "left"
+              textAlign: "center",
+              display: "inline",
+              justifyContent: "center",
+              alignItems: "center"
             },
             "& .rdg-cell.rdg-cell-align-center": {
               textAlign: "center"
@@ -3300,18 +3457,24 @@ const i = (o) => ({
               boxShadow: "none"
             },
             "& .rdg-row :last-child:after": {
-              borderRight: "0px solid transparent"
+              borderRight: "2px solid",
+              borderColor: o.palette.background.neutral
             },
             "& .rdg-header-row .rdg-cell": {
-              fontFamily: o.typography.subtitle2.fontFamily,
-              fontWeight: o.typography.subtitle2.fontWeight,
-              fontSize: o.typography.subtitle2.fontSize,
+              fontFamily: o.typography.subtitle,
+              fontWeight: o.typography.subtitle,
+              fontSize: o.typography.subtitle,
               color: o.palette.text.primary,
-              borderRight: "0px solid transparent",
+              borderRight: "2px solid",
+              borderColor: o.palette.background.default,
               boxShadow: "none",
+              gridTemplateColumns: "auto",
               "&.rdg-cell-frozen-last": {
+                borderRight: "2px solid",
+                borderColor: o.palette.background.default,
                 "&:after": {
-                  borderRight: "0px solid transparent"
+                  borderRight: "0px solid",
+                  borderColor: o.palette.background.neutral
                 },
                 boxShadow: "var(--rdg-frozen-cell-box-shadow)"
               },
@@ -3321,7 +3484,7 @@ const i = (o) => ({
               }
             },
             "& .rdg-header-row :last-child.rdg-cell": {
-              borderTopRightRadius: "5px",
+              borderTopRightRadius: "4px",
               "&:after": {
                 borderRight: "0px solid transparent"
               }
@@ -3361,11 +3524,63 @@ const i = (o) => ({
       }
     }
   }
-}), H = (o) => ({
+}), j = (o) => ({
   M4LPager: {
     styleOverrides: {
       "&.M4LPager-root": {
         test: "root",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "12px",
+        whiteSpace: "nowrap",
+        "& .M4LPager-pagerActions": {
+          display: "flex",
+          padding: "2px",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "2px",
+          width: "fit-content",
+          background: o.palette.state.default,
+          boxShadow: o.customShadows.z1,
+          borderRadius: "4px",
+          borderTop: "1.5px solid",
+          borderColor: o.palette.state.borderTop,
+          [o.breakpoints.down("sm")]: {
+            gap: "4px",
+            padding: "4px"
+          },
+          "& .M4LIconButton-root": {
+            width: "20px",
+            height: "20px",
+            minWidth: "20px",
+            minHeight: "20px",
+            [o.breakpoints.down("sm")]: {
+              width: "28px",
+              height: "28px",
+              minWidth: "28px",
+              minHeight: "28px"
+            }
+          }
+        },
+        "& .M4LPager-labelRowsPerPageContainer": {
+          display: "flex",
+          flexDirection: "row",
+          gap: "8px",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        "& .MuiInputBase-root": {
+          padding: "4px 2px 4px 6px",
+          borderRadius: "4px",
+          background: o.palette.background.background,
+          overflow: "hidden",
+          minWidth: "fit-content",
+          "& .MuiSvgIcon-root": {
+            background: o.palette.state.default
+          }
+        },
         "& .M4LPager-skeletonRoot": {
           width: "100%",
           display: "flex",
@@ -3392,6 +3607,13 @@ const i = (o) => ({
         }
       }
     }
+  },
+  M4LPagerMenuPopover: {
+    styleOverrides: {
+      "&.M4LPager-selectMenuPopover": {
+        test: "root"
+      }
+    }
   }
 }), W = (o) => ({
   M4LCheckBox: {
@@ -3455,31 +3677,31 @@ export {
   m as C,
   z as D,
   P as E,
-  F,
-  H as G,
+  V as F,
+  j as G,
   W as H,
   b as M,
   i as a,
   D as b,
   n as c,
-  p as d,
-  d as e,
+  d,
+  p as e,
   l as f,
   M as g,
   s as h,
-  V as i,
+  F as i,
   c as j,
   O as k,
   u as l,
   x as m,
   g as n,
   y as o,
-  w as p,
+  f as p,
   L as q,
-  f as r,
-  h as s,
-  v as t,
-  k as u,
+  w as r,
+  k as s,
+  h as t,
+  v as u,
   C as v,
   I as w,
   B as x,