@m4l/styles 0.0.21 → 0.0.23

package/theme/overrides/M4LExtendedComponents/{index.9ecb9eb5.js → index.566e183a.js}

@@ -1,5 +1,5 @@
 import { alpha as t } from "@mui/material/styles";
-import { alpha as e } from "@mui/system";
+import { alpha as r } from "@mui/system";
 const i = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {
@@ -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,
@@ -83,7 +87,7 @@ const i = (o) => ({
           height: "29px",
           [o.breakpoints.down("sm")]: {
             height: "100%",
-            padding: "4px 8px 4px 8px"
+            padding: "4px"
           }
         },
         "& .M4LDynamicFilter-containerApplyedFilters": {
@@ -154,6 +158,7 @@ const i = (o) => ({
             gap: "0px",
             widht: "max-content",
             minWidht: "220px",
+            height: "fit-content",
             "& .M4LDynamicFilter-popoverFilterHeader": {
               background: o.palette.state.default,
               display: "flex",
@@ -170,15 +175,20 @@ const i = (o) => ({
               }
             },
             "& .M4LDynamicFilter-popoverContainerFields": {
+              height: "fit-content",
               [`& .M4LDynamicFilter-containerStringFilter,
                                   & .M4LDynamicFilter-containerBooleanFilter,
                                   & .M4LDynamicFilter-containerNumberFilter,
                                   & .M4LDynamicFilter-containerDateTimeFilter
                                 `]: {
                 display: "flex",
+                height: "auto",
                 flexDirection: "column",
                 padding: "8px 8px 0 8px",
-                gap: "8px"
+                gap: "8px",
+                [o.breakpoints.down("sm")]: {
+                  gap: "12px"
+                }
               }
             },
             "& .M4LCommonActions-root": {
@@ -244,7 +254,7 @@ const i = (o) => ({
       }
     }
   }
-}), p = (o) => ({
+}), d = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -395,7 +405,7 @@ const i = (o) => ({
       }
     }
   }
-}), d = (o) => ({
+}), p = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {}
@@ -544,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",
@@ -1072,14 +1086,16 @@ const i = (o) => ({
                 "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
                   "&:hover": {
-                    background: o.palette.state.default
+                    background: o.palette.state.default,
+                    cursor: "pointer"
                   }
                 },
                 "&.M4LSideBar-itemMainActive": {
                   "& .M4LSideBar-navItemMainRoot": {
                     background: o.palette.state.active12,
                     "&:hover": {
-                      background: t(o.palette.state.active || "#fff", 0.18)
+                      background: t(o.palette.state.active || "#fff", 0.24),
+                      cursor: "pointer"
                     }
                   },
                   "& .M4LSideBar-navItemRootContent": {
@@ -1503,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",
@@ -1528,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,
@@ -1553,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",
@@ -1560,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": {},
@@ -1594,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"
+                    }
                   }
                 }
               },
@@ -1650,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"
@@ -1663,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",
@@ -1680,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
+                      }
                     }
                   }
                 },
@@ -1704,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
+                    }
                   }
                 }
               }
@@ -1715,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 +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",
@@ -1974,8 +2050,20 @@ const i = (o) => ({
                 "& .M4LTypography-root .MuiTypography-root": {
                   ...o.typography.paragraphDens
                 },
-                "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.primary
+                "& .MuiButtonBase-root": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: o.palette.text.primary
+                  }
+                },
+                "& .Mui-disabled": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: o.palette.text.disabled
+                  }
+                },
+                "& .MuiButtonBase-root:hover": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: o.palette.state.hover
+                  }
                 }
               }
             }
@@ -2105,7 +2193,7 @@ const i = (o) => ({
             boxShadow: o.customShadows.z2,
             "&.M4LAreasViewer-selected": {
               background: o.palette.state.active12,
-              boxShadow: `inset 1px 2px 3px 0 ${e(o.palette.patronus?.ashBlak[50] || "", 0.9)}`
+              boxShadow: `inset 1px 2px 3px 0 ${r(o.palette.patronus?.ashBlak[50] || "", 0.9)}`
             }
           }
         },
@@ -2232,7 +2320,7 @@ const i = (o) => ({
           }
         },
         "& .MuiBackdrop-root": {
-          background: e(`${o.palette.patronus?.ashBlak[60]}`, 0.8)
+          background: r(`${o.palette.patronus?.ashBlak[60]}`, 0.8)
         },
         "&:not(.M4LAreasViewer-loading)": {
           "& .M4LinearProgressIndeterminate-root": {
@@ -2401,14 +2489,17 @@ const i = (o) => ({
       overflow: "hidden"
     }
   }
-}), v = (o) => ({
+}), k = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
         "& .MuiAvatar-root": {
           width: "36px",
           height: "36px",
-          borderRadius: "4px"
+          borderRadius: "4px",
+          padding: "4px",
+          background: o.palette.state.active,
+          color: o.palette.patronus?.ashBlak[70]
         },
         test: "root"
       }
@@ -2417,57 +2508,82 @@ const i = (o) => ({
 }), h = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
-      "&.M4LAccountPopover-root": {}
+      "&.M4LAccountPopover-root": {
+        borderRadius: "6px"
+      }
     }
   },
   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: "16px"
-        },
-        "& .M4LAccountPopover-containerAppVersion": {
-          display: "flex",
-          borderBottom: "2px solid",
-          borderColor: o.palette.state.default,
-          paddingBottom: "8px"
-        },
-        "& .M4LAccountPopover-containerMenuItems": {
-          "& .M4LAccountPopover-menuItem": {
+          gap: "0px",
+          padding: "12px",
+          borderRadius: "6px",
+          boxShadow: o.customShadows.z3,
+          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": {
@@ -2500,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
         }
       }
     }
@@ -2735,20 +2857,20 @@ const i = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), T = (o) => ({
   M4LAccordion: {
     styleOverrides: {
       "&.M4LAccordion-root": {
         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": {
@@ -2756,6 +2878,7 @@ const i = (o) => ({
         }
       },
       "& .MuiButtonBase-root": {
+        padding: "4px 8px 4px 8px",
         "&.MuiAccordionSummary-root.Mui-expanded": {
           background: o.palette.state.active12,
           "& .M4LTypography-root": {
@@ -2787,7 +2910,7 @@ const i = (o) => ({
       }
     }
   }
-}), T = (o) => ({
+}), D = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -2798,7 +2921,7 @@ const i = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), m = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
@@ -3139,38 +3262,449 @@ const i = (o) => ({
       }
     }
   }
+}), O = (o) => ({
+  M4LDataGrid: {
+    styleOverrides: {
+      "&.M4LDataGrid-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.body,
+          left: "0px",
+          right: "0px",
+          top: "0px",
+          padding: "8px",
+          display: "flex",
+          flexDirection: "row",
+          borderRadius: "4px",
+          alignItems: "center",
+          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",
+            "& .M4LDataGrid-rowsCountLabel": {},
+            "& .M4LDataGrid-rowsCountValue": {
+              marginLeft: o.spacing(2),
+              paddingTop: "2px",
+              paddingBottom: "2px",
+              paddingLeft: "4px",
+              paddingRight: "4px",
+              border: `1px solid ${o.palette.divider}`
+            }
+          },
+          "& .M4LDataGrid-actionFilter": {},
+          "& .M4LDataGrid-actionSettings": {}
+        },
+        "& .M4LDataGrid-tableContaniner": {
+          display: "flex",
+          flexDirection: "column",
+          position: "absolute",
+          top: "40px",
+          bottom: "0px",
+          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: "relative",
+            height: "100%",
+            overflow: "hidden",
+            "& .rdg ": {
+              border: "none",
+              background: o.palette.background.default,
+              gridColumnGap: "0px",
+              gridRowGap: "0px",
+              userSelect: "initial",
+              height: "100%",
+              contentVisibility: "unset",
+              overflow: "auto",
+              borderRadius: "4px",
+              padding: "0px",
+              borderColor: "none",
+              "--rdg-grid-inline-size": "0px",
+              "--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.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": "none"
+            },
+            "& .rdg::-webkit-scrollbar": {
+              width: "6px",
+              height: "6px",
+              borderRadius: "3px",
+              backgroundColor: "transparent"
+            },
+            "& .rdg::-webkit-scrollbar-track": {
+              backgroundColor: "transparent",
+              border: "0px solid transparent"
+            },
+            "& .rdg::-webkit-scrollbar-corner": {
+              backgroundColor: "transparent"
+            },
+            "& ::-webkit-scrollbar-thumb": {
+              borderRadius: "10px",
+              backgroundColor: o.palette.divider,
+              border: "0px solid transparent"
+            },
+            '& [role="columnheader"]': {
+              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: "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": {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              "&:after": {
+                content: '""',
+                borderRight: `0px solid ${o.palette.divider}`,
+                position: "absolute",
+                right: "0px",
+                height: "100%"
+              },
+              "& .m4l_icon": {
+                height: "100%"
+              }
+            },
+            "& [aria-selected=true]": {
+              backgroundColor: o.palette.state.active12,
+              color: o.palette.text.primary
+            },
+            "& .rdg-cell.rdg-cell-align-left": {
+              textAlign: "center",
+              display: "inline",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            "& .rdg-cell.rdg-cell-align-center": {
+              textAlign: "center"
+            },
+            "& .rdg-cell.rdg-cell-align-right": {
+              textAlign: "right"
+            },
+            "& .rdg-row .rdg-cell-frozen-last:after": {
+              borderRight: "0px solid transparent",
+              boxShadow: "none"
+            },
+            "& .rdg-row :last-child:after": {
+              borderRight: "2px solid",
+              borderColor: o.palette.background.neutral
+            },
+            "& .rdg-header-row .rdg-cell": {
+              fontFamily: o.typography.subtitle,
+              fontWeight: o.typography.subtitle,
+              fontSize: o.typography.subtitle,
+              color: o.palette.text.primary,
+              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",
+                  borderColor: o.palette.background.neutral
+                },
+                boxShadow: "var(--rdg-frozen-cell-box-shadow)"
+              },
+              "& .rdg-sort-arrow": {
+                width: o.spacing(1),
+                margin: `0 ${o.spacing(0.5)}`
+              }
+            },
+            "& .rdg-header-row :last-child.rdg-cell": {
+              borderTopRightRadius: "4px",
+              "&:after": {
+                borderRight: "0px solid transparent"
+              }
+            },
+            "& .filter_cell_div": {
+              paddingLeft: o.spacing(0.5),
+              paddingRight: o.spacing(0.5)
+            },
+            "& .rdg-header-sort-cell": {
+              width: "100%",
+              flexGrow: "1",
+              alignItems: "center"
+            },
+            '& [aria-columnsort="ASC"]': {
+              borderTop: `2px solid ${o.palette.primary.main}`
+            },
+            '& [aria-columnsort="DESC"]': {
+              borderBottom: `2px solid ${o.palette.primary.main}`
+            }
+          }
+        },
+        "&.M4LDataGrid-withNoPager": {}
+      }
+    }
+  },
+  M4LDataGridDensityPopover: {
+    styleOverrides: {
+      "&.M4LDataGrid-actionDensityPopover": {
+        test: "root"
+      }
+    }
+  },
+  M4LDataGridActionsFormatter: {
+    styleOverrides: {
+      "&.M4LDataGrid-actionsFormatter": {
+        test: "root"
+      }
+    }
+  }
+}), 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",
+          justifyContent: "center",
+          alignItems: "center",
+          marginLeft: o.spacing(3),
+          "& .M4LPager-skeletonRowsPerPage": {
+            display: "grid",
+            gridTemplateColumns: "auto auto",
+            gridGap: o.spacing(1),
+            marginRight: o.spacing(3)
+          },
+          "& .M4LPager-skeletonButtonContainer": {
+            display: "flex",
+            marginLeft: o.spacing(3),
+            "& .M4LPager-skeletonIconButton": {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: o.spacing(3.75),
+              height: o.spacing(3.75)
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LPagerMenuPopover: {
+    styleOverrides: {
+      "&.M4LPager-selectMenuPopover": {
+        test: "root"
+      }
+    }
+  }
+}), W = (o) => ({
+  M4LCheckBox: {
+    styleOverrides: {
+      "&.M4LCheckBox-root": {
+        display: "flex",
+        flexDirection: "column",
+        gap: o.spacing(0.5),
+        "& .MuiTypography-root": {
+          color: o.palette.text.primary,
+          ...o.typography.body
+        },
+        ".M4LCheckBox-small .MuiButtonBase-root": {
+          width: "20px",
+          height: "20px"
+        },
+        ".MuiCheckbox-root .MuiSvgIcon-fontSizeSmall": {
+          width: "16px",
+          height: "16px"
+        },
+        ".M4LCheckBox-medium .MuiButtonBase-root": {
+          width: "24px",
+          height: "24px"
+        },
+        ".MuiCheckbox-root .MuiSvgIcon-fontSizeMedium": {
+          width: "20px",
+          height: "20px"
+        },
+        ".MuiButtonBase-root": {
+          borderRadius: "4px"
+        },
+        ".MuiButtonBase-root:hover": {
+          backgroundColor: o.palette.state?.active12
+        },
+        ".Mui-focusVisible": {
+          border: "1px solid",
+          borderColor: o.palette.state?.focus
+        },
+        ".MuiButtonBase-root:hover .MuiSvgIcon-root": {
+          fill: o.palette.state?.hover
+        },
+        ".M4LCheckBox-checkTypography .MuiTypography-root": {
+          ...o.typography.body
+        },
+        ".M4LCheckBox-stateDisabled .MuiSvgIcon-root": {
+          fill: o.palette.state?.default
+        },
+        ".M4LCheckBox-stateDisabled .MuiTypography-root": {
+          color: o.palette.text.disabled
+        },
+        ".MuiButtonBase-root .Mui-focusVisible:focus-visible": {
+          outline: "#fff00"
+        }
+      }
+    }
+  }
 });
 export {
-  m as A,
-  D as B,
-  z as C,
-  P as D,
-  V as E,
+  A,
+  T as B,
+  m as C,
+  z as D,
+  P as E,
+  V as F,
+  j as G,
+  W as H,
   b as M,
   i as a,
-  T as b,
+  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,
   F as i,
   c as j,
-  u as k,
-  x as l,
-  g as m,
-  y as n,
-  f as o,
-  L as p,
-  w as q,
-  v as r,
-  h as s,
-  k as t,
-  C as u,
-  I as v,
-  B as w,
-  S as x,
-  R as y,
-  A as z
+  O as k,
+  u as l,
+  x as m,
+  g as n,
+  y as o,
+  f as p,
+  L as q,
+  w as r,
+  k as s,
+  h as t,
+  v as u,
+  C as v,
+  I as w,
+  B as x,
+  S as y,
+  R as z
 };