@m4l/styles 0.0.20 → 0.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/index.js +10 -10
  2. package/package.json +1 -1
  3. package/theme/{defaultThemeOptions.dd98806d.js → defaultThemeOptions.733652aa.js} +5 -5
  4. package/theme/index.fa6b03ae.js +7 -0
  5. package/theme/overrides/M4LExtendedComponents/M4LAccountPopover.d.ts +8 -2
  6. package/theme/overrides/M4LExtendedComponents/M4LAppBar.d.ts +237 -67
  7. package/theme/overrides/M4LExtendedComponents/M4LAreasAdmin.d.ts +1151 -336
  8. package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.d.ts +132 -65
  9. package/theme/overrides/M4LExtendedComponents/M4LAvatar.d.ts +2 -1
  10. package/theme/overrides/M4LExtendedComponents/M4LCheckBox.d.ts +56 -0
  11. package/theme/overrides/M4LExtendedComponents/M4LCommonActions.d.ts +1 -0
  12. package/theme/overrides/M4LExtendedComponents/M4LDataGrid.d.ts +988 -0
  13. package/theme/overrides/M4LExtendedComponents/M4LDynamicFilter.d.ts +31 -7
  14. package/theme/overrides/M4LExtendedComponents/M4LPager.d.ts +34 -0
  15. package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts +20 -14
  16. package/theme/overrides/M4LExtendedComponents/M4LTab.d.ts +8 -4
  17. package/theme/overrides/M4LExtendedComponents/{index.ead1a06a.js → index.28d622ba.js} +823 -309
  18. package/theme/overrides/M4LRHFComponents/M4LRHFAutocomplete.d.ts +77 -29
  19. package/theme/overrides/M4LRHFComponents/M4LRHFAutocompleteAsync.d.ts +1 -0
  20. package/theme/overrides/M4LRHFComponents/{index.1406e2ed.js → index.0e107243.js} +79 -36
  21. package/theme/overrides/MUIComponents/Autocomplete.d.ts +13 -2
  22. package/theme/overrides/MUIComponents/Button.d.ts +3 -1
  23. package/theme/overrides/MUIComponents/Input.d.ts +16 -3
  24. package/theme/overrides/MUIComponents/Tabs.d.ts +2 -0
  25. package/theme/overrides/MUIComponents/{index.e3d060c3.js → index.d308ce65.js} +68 -39
  26. package/theme/overrides/index.76becad2.js +93 -0
  27. package/theme/{palette.6e480083.js → palette.a914c187.js} +5 -5
  28. package/theme/{shadows.0d04d424.js → shadows.3dfe77c2.js} +1 -1
  29. package/theme/{typography.8b60719b.js → typography.dd335f0f.js} +4 -4
  30. package/utils/{getColorPresets.4a88b0ed.js → getColorPresets.9c103b85.js} +1 -1
  31. package/utils/{getColorState.1cdd7909.js → getColorState.184e9d10.js} +40 -28
  32. package/utils/getColorState.d.ts +1 -0
  33. package/theme/index.7512919c.js +0 -7
  34. package/theme/overrides/index.0d219399.js +0 -90
package/theme/overrides/M4LExtendedComponents/{index.ead1a06a.js → index.28d622ba.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { alpha as t } from "@mui/material/styles";
2
- import { alpha as e } from "@mui/system";
2
+ import { alpha as r } from "@mui/system";
3
3
  const i = (o) => ({
4
4
  M4LDynamicFilter: {
5
5
  styleOverrides: {
@@ -10,6 +10,7 @@ const i = (o) => ({
10
10
  padding: "0px",
11
11
  border: "1px solid",
12
12
  borderColor: o.palette.background.background,
13
+ overflow: "hidden",
13
14
  [o.breakpoints.down("sm")]: {
14
15
  gap: "0px"
15
16
  },
@@ -82,7 +83,7 @@ const i = (o) => ({
82
83
  height: "29px",
83
84
  [o.breakpoints.down("sm")]: {
84
85
  height: "100%",
85
- padding: "4px 8px 4px 8px"
86
+ padding: "4px"
86
87
  }
87
88
  },
88
89
  "& .M4LDynamicFilter-containerApplyedFilters": {
@@ -111,14 +112,29 @@ const i = (o) => ({
111
112
  styleOverrides: {
112
113
  "&.M4LDynamicFilter-popoverMenuFields": {
113
114
  "& .M4LDynamicFilter-popoverMenuFieldsPaper": {
114
- "& .M4LDynamicFilter-classespopoverLabelMemuItem": {
115
- ...o.typography.body,
116
- color: o.palette.text.secondary
117
- },
118
- "& .M4LDynamicFilter-popoverMenuFieldsItem:hover": {
119
- ...o.typography.body,
120
- color: o.palette.state.hover,
121
- background: o.palette.state.default
115
+ display: "flex",
116
+ flexDirection: "column",
117
+ padding: "4px",
118
+ gap: "4px",
119
+ borderRadius: "6px",
120
+ borderTop: "1.5px solid",
121
+ borderColor: o.palette.state.borderTop,
122
+ "& .M4LDynamicFilter-popoverMenuFieldsItem": {
123
+ paddingLeft: "8px",
124
+ paddingRight: "12px",
125
+ borderRadius: "4px",
126
+ "& .M4LDynamicFilter-classespopoverLabelMemuItem": {
127
+ ...o.typography.body,
128
+ color: o.palette.text.primary
129
+ },
130
+ "& .M4LDynamicFilter-popoverMenuFieldsItem:hover": {
131
+ ...o.typography.body,
132
+ color: o.palette.state.hover,
133
+ background: o.palette.state.default,
134
+ borderRadius: "4px",
135
+ padding: "4px 12px 4px 8px",
136
+ boxShadow: o.customShadows.z2
137
+ }
122
138
  }
123
139
  }
124
140
  }
@@ -138,36 +154,44 @@ const i = (o) => ({
138
154
  gap: "0px",
139
155
  widht: "max-content",
140
156
  minWidht: "220px",
157
+ height: "fit-content",
141
158
  "& .M4LDynamicFilter-popoverFilterHeader": {
142
159
  background: o.palette.state.default,
143
160
  display: "flex",
144
- gap: "4px",
145
- padding: "4px 8px 4px 8px",
161
+ gap: "8px",
162
+ padding: "6px 8px 6px 8px",
146
163
  borderRadius: "4px",
147
- boxShadow: o.customShadows.z2,
164
+ boxShadow: o.customShadows.z1,
148
165
  borderBottom: "0px",
166
+ borderTop: "1.5px solid",
167
+ borderColor: o.palette.state.borderTop,
149
168
  "& .MuiTypography-root": {
150
169
  ...o.typography.bodyDens,
151
170
  color: o.palette.text.primary
152
171
  }
153
172
  },
154
173
  "& .M4LDynamicFilter-popoverContainerFields": {
174
+ height: "fit-content",
155
175
  [`& .M4LDynamicFilter-containerStringFilter,
156
176
  & .M4LDynamicFilter-containerBooleanFilter,
157
177
  & .M4LDynamicFilter-containerNumberFilter,
158
178
  & .M4LDynamicFilter-containerDateTimeFilter
159
179
  `]: {
160
180
  display: "flex",
181
+ height: "auto",
161
182
  flexDirection: "column",
162
183
  padding: "8px 8px 0 8px",
163
- gap: "8px"
184
+ gap: "8px",
185
+ [o.breakpoints.down("sm")]: {
186
+ gap: "12px"
187
+ }
164
188
  }
165
189
  },
166
- "& .M4LCommonActions-wrapperActions": {
190
+ "& .M4LCommonActions-root": {
167
191
  display: "flex",
168
192
  flexDirection: "row",
169
193
  gap: "12px",
170
- padding: "20px 8px 12px 0px",
194
+ padding: "20px 8px 8px 0px",
171
195
  ".M4LButton-root": {
172
196
  width: "fit-content"
173
197
  }
@@ -963,7 +987,7 @@ const i = (o) => ({
963
987
  }
964
988
  }
965
989
  }
966
- }), L = (o) => ({
990
+ }), y = (o) => ({
967
991
  M4LSideBar: {
968
992
  styleOverrides: {
969
993
  "&.M4LSideBar-root": {
@@ -1050,18 +1074,20 @@ const i = (o) => ({
1050
1074
  borderRadius: "4px 0px 0px 4px",
1051
1075
  justifyContent: "center",
1052
1076
  flexDirection: "column",
1053
- gap: "8px",
1077
+ padding: "0px 0px 8px 0px",
1054
1078
  "& .M4LSideBar-navItemMainRoot": {
1055
1079
  backgroundColor: "transparent",
1056
1080
  "&:hover": {
1057
- background: o.palette.state.default
1081
+ background: o.palette.state.default,
1082
+ cursor: "pointer"
1058
1083
  }
1059
1084
  },
1060
1085
  "&.M4LSideBar-itemMainActive": {
1061
1086
  "& .M4LSideBar-navItemMainRoot": {
1062
1087
  background: o.palette.state.active12,
1063
1088
  "&:hover": {
1064
- background: t(o.palette.state.active || "#fff", 0.18)
1089
+ background: t(o.palette.state.active || "#fff", 0.24),
1090
+ cursor: "pointer"
1065
1091
  }
1066
1092
  },
1067
1093
  "& .M4LSideBar-navItemRootContent": {
@@ -1121,27 +1147,29 @@ const i = (o) => ({
1121
1147
  },
1122
1148
  "& .M4LSideBar-navListSubItemRoot": {
1123
1149
  "& .M4LSideBar-navSubItemContentRoot ": {
1150
+ width: "100%",
1151
+ height: "36px",
1152
+ borderRadius: "4px",
1153
+ gap: "8px",
1124
1154
  "&.M4LSideBar-subItemCollapseActive": {
1125
1155
  backgroundColor: o.palette.state.active12,
1126
- width: "100%",
1127
- height: "28px"
1156
+ gap: "8px"
1128
1157
  },
1129
1158
  "&.M4LSideBar-subItemActive": {
1130
1159
  "& .M4LSideBar-navSubItemContentBullet": {
1131
1160
  height: "14px",
1132
1161
  borderRadius: "4px",
1133
- backgroundColor: o.palette.state.focus
1162
+ backgroundColor: o.palette.state.focus,
1163
+ gap: "8px"
1134
1164
  }
1135
1165
  },
1136
1166
  "&:hover": {
1137
- background: o.palette.state.default,
1138
- width: "100%",
1139
- height: "28px"
1167
+ background: o.palette.state.default
1140
1168
  }
1141
1169
  },
1142
1170
  "& .M4LSideBar-navSubItemContentRoot": {
1143
1171
  gap: "12px",
1144
- margin: "0px 0px 1px 0px",
1172
+ margin: "0px 0px 8px 0px",
1145
1173
  padding: "16px",
1146
1174
  "& .M4LSideBar-navSubItemContentBullet": {
1147
1175
  minWidth: "5px",
@@ -1210,9 +1238,9 @@ const i = (o) => ({
1210
1238
  styleOverrides: {
1211
1239
  "&.M4LSideBar-popover": {
1212
1240
  "& .M4LSideBar-navListSubItemRoot": {
1213
- "& .M4LSideBar-navSubItemContentRoot ": {
1241
+ "& .M4LSideBar-navSubItemContentRoot": {
1214
1242
  gap: "12px",
1215
- margin: "0px 0px 1px 0px",
1243
+ margin: "0px 0px 8px 0px",
1216
1244
  padding: "16px",
1217
1245
  "&.M4LSideBar-subItemCollapseActive": {
1218
1246
  backgroundColor: o.palette.state.active12
@@ -1243,9 +1271,7 @@ const i = (o) => ({
1243
1271
  backgroundColor: o.palette.text.primary
1244
1272
  },
1245
1273
  "&:hover": {
1246
- background: o.palette.state.default,
1247
- width: "100%",
1248
- height: "18px"
1274
+ background: o.palette.state.default
1249
1275
  }
1250
1276
  }
1251
1277
  }
@@ -1325,7 +1351,7 @@ const i = (o) => ({
1325
1351
  borderRadius: "4px 0px 0px 4px",
1326
1352
  justifyContent: "center",
1327
1353
  flexDirection: "column",
1328
- gap: "8px",
1354
+ padding: "0px 0px 8px 0px",
1329
1355
  "& .M4LSideBar-navItemMainRoot": {
1330
1356
  backgroundColor: "transparent",
1331
1357
  "&:hover": {
@@ -1463,160 +1489,252 @@ const i = (o) => ({
1463
1489
  }
1464
1490
  }
1465
1491
  }
1466
- }), y = (o) => ({
1492
+ }), L = (o) => ({
1467
1493
  M4LAreasAdmin: {
1468
1494
  styleOverrides: {
1469
1495
  "&.M4LAreasAdmin-root": {
1470
1496
  flex: 1,
1497
+ display: "flex",
1498
+ flexDirection: "row",
1471
1499
  overflow: "auto",
1472
1500
  height: "auto",
1473
1501
  borderRadius: "6px",
1474
- paddingRight: "4px",
1502
+ paddingRight: "6px",
1475
1503
  alignItems: "center",
1476
1504
  background: o.palette.background.default,
1477
1505
  boxShadow: o.customShadows.z2,
1506
+ justifyContent: "space-between",
1507
+ width: "fit-content",
1508
+ maxWidth: "fit-content",
1509
+ gap: "8px",
1510
+ borderTop: "1.5px solid",
1511
+ borderColor: o.palette.state.borderTop,
1478
1512
  [o.breakpoints.down("sm")]: {
1479
- height: "auto"
1513
+ height: "auto",
1514
+ background: "none",
1515
+ width: "100%",
1516
+ maxWidth: "100%"
1480
1517
  },
1481
- "& .M4LAreasAdmin-areasAddButton": {
1482
- backgroundColor: `${o.palette.state.active}!important`,
1483
- "& .M4LIcon-icon": {
1484
- backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1485
- }
1518
+ "*::-webkit-scrollbar": {
1519
+ width: "8px",
1520
+ maxWidth: "12px",
1521
+ height: "6px",
1522
+ background: o.palette.state.default,
1523
+ position: "absolute",
1524
+ zIndex: "10000"
1486
1525
  },
1487
- "& .M4LAreasAdmin-areaIconLayer": {
1488
- background: o.palette.background.neutral,
1489
- boxShadow: o.customShadows.z2,
1490
- display: "flex",
1491
- justifyContent: "center",
1492
- width: "36px",
1493
- height: "36px",
1494
- [o.breakpoints.down("sm")]: {
1495
- height: "36px",
1496
- width: "36px"
1497
- },
1498
- "& .M4LIcon-root": {
1499
- width: "36px"
1500
- }
1526
+ "*::-webkit-scrollbar-thumb": {
1527
+ background: o.palette.text.disabled,
1528
+ position: "absolute",
1529
+ borderRadius: "4px",
1530
+ zIndex: "10000"
1501
1531
  },
1502
- "& .M4LAreasAdmin-areaContainerChips": {
1532
+ "& .M4LAreasAdmin-areaContainerChipsIcon": {
1503
1533
  display: "flex",
1534
+ flexDirection: "row",
1535
+ width: "100%",
1504
1536
  overflow: "auto",
1505
- gap: "8px",
1506
- padding: "4px 8px 4px 8px",
1507
- width: "70%",
1508
- height: "auto",
1509
- alignItems: "center",
1510
- "& .M4LAreasAdmin-areaChipMobileRoot": {
1511
- display: "flex",
1512
- overflow: "hidden",
1513
- width: "100%",
1514
- backgroundColor: o.palette.state.active,
1515
- borderRadius: "4px",
1516
- "& .M4LAreasAdmin-areaChipRoot ": {
1517
- margin: "0px",
1518
- borderRadius: "4px 0px 0px 4px",
1519
- overflow: "hidden",
1520
- width: "100%"
1521
- }
1522
- },
1523
- "& .M4LAreasAdmin-areaChipMobileIconContainer": {
1537
+ height: "36px",
1538
+ borderRight: "1px solid",
1539
+ borderColor: o.palette.state.overdefoult,
1540
+ "& .M4LAreasAdmin-areaIconLayer": {
1541
+ background: o.palette.background.neutral,
1542
+ boxShadow: o.customShadows.z2,
1524
1543
  display: "flex",
1525
- alignItems: "center",
1526
- borderRadius: "0px 4px 4px 0px",
1527
- background: o.palette.state.active,
1528
- ...o.typography.body,
1529
- color: o.palette.text.primary,
1530
- "& .M4LIconButton-root": {
1531
- backgroundColor: `${o.palette.state.active}!important`,
1532
- borderLeft: "1px solid",
1533
- borderColor: o.palette.patronus?.marbleLight[10],
1534
- borderRadius: "0px",
1535
- "& .M4LIcon-icon": {
1536
- backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1537
- }
1544
+ justifyContent: "center",
1545
+ width: "36px",
1546
+ height: "36px",
1547
+ [o.breakpoints.down("sm")]: {
1548
+ height: "36px",
1549
+ width: "36px"
1550
+ },
1551
+ "& .M4LIcon-root": {
1552
+ width: "36px",
1553
+ height: "100%"
1538
1554
  }
1539
1555
  },
1540
- "& .MuiBox-root": {
1541
- display: "flex",
1542
- alignItems: "center",
1543
- height: "100%"
1544
- },
1545
- "& .simplebar-content": {
1546
- display: "flex",
1547
- alignItems: "center"
1548
- },
1549
- "& .M4LAreasAdmin-areaChipRoot ": {
1556
+ "& .M4LAreasAdmin-areaContainerChips": {
1550
1557
  display: "flex",
1551
- boxShadow: o.customShadows.z1,
1552
- borderRadius: "4px 4px 4px 4px",
1553
- marginRight: "8px",
1554
- height: "auto",
1555
- width: "auto",
1558
+ overflow: "auto",
1556
1559
  gap: "8px",
1557
- paddingLeft: "8px",
1560
+ padding: "0",
1561
+ width: "fit-content",
1562
+ height: "auto",
1558
1563
  alignItems: "center",
1559
- borderTop: "1px solid",
1560
- borderColor: o.palette.state.default,
1561
- background: o.palette.state.default,
1562
- "& .M4LAreasAdmin-areaContainerChipEditButton": {
1563
- display: "flex"
1564
- },
1565
- [o.breakpoints.down("sm")]: {
1566
- height: "auto"
1567
- },
1568
- "&.M4LAreasAdmin-selected": {
1569
- background: o.palette.state.active,
1570
- ...o.typography.body,
1571
- color: o.palette.text.primary,
1572
- "& .M4LAreasAdmin-areaChipTitle": {
1573
- backgroundColor: "transparent",
1574
- border: "none",
1575
- textWrap: "nowrap",
1576
- width: "auto",
1564
+ "& .M4LAreasAdmin-areaContainerContentChips": {
1565
+ display: "flex",
1566
+ flexDirection: "row",
1567
+ width: "fit-content",
1568
+ justifyContent: "space-between",
1569
+ [o.breakpoints.down("sm")]: {
1570
+ justifyContent: "space-between",
1571
+ width: "100%"
1572
+ },
1573
+ "& .css-jjtu05": {
1574
+ "& .css-16ugaun": {},
1575
+ "& .simplebar-wrapper": {
1576
+ width: "fit-content",
1577
+ maxWidth: "100%",
1578
+ "& .simplebar-height-auto-observer-wrapper": {
1579
+ width: "fit-content",
1580
+ maxWidth: "100%",
1581
+ overflow: "auto"
1582
+ },
1583
+ "& .simplebar-mask": {
1584
+ "& .simplebar-offset": {
1585
+ "& .simplebar-content-wrapper": {
1586
+ width: "fit-content",
1587
+ maxWidth: "100%",
1588
+ overflow: "auto",
1589
+ "& .simplebar-content": {
1590
+ width: "fit-content",
1591
+ overflow: "auto",
1592
+ gap: "4px"
1593
+ }
1594
+ }
1595
+ }
1596
+ }
1597
+ }
1598
+ },
1599
+ "& .simplebar-content-wrapper": {
1600
+ width: "fit-content",
1601
+ "& .M4LAreasAdmin-areaChipRoot ": {
1602
+ margin: "0px",
1603
+ borderRadius: "4px",
1604
+ overflow: "hidden",
1605
+ width: "fit-content"
1606
+ }
1607
+ },
1608
+ "& .M4LAreasAdmin-areaChipMobileRoot": {
1577
1609
  display: "flex",
1578
- alignItems: "center",
1579
- color: o.palette.patronus?.marbleLight[10],
1580
- ...o.typography.action,
1581
- [o.breakpoints.down("sm")]: {
1582
- display: "inline",
1583
- fontSize: "14px",
1584
- textOverflow: "ellipsis",
1610
+ overflow: "hidden",
1611
+ width: "100%",
1612
+ backgroundColor: o.palette.state.active,
1613
+ borderRadius: "4px",
1614
+ "& .M4LAreasAdmin-areaChipRoot ": {
1615
+ margin: "0px",
1616
+ borderRadius: "4px 0px 0px 4px",
1585
1617
  overflow: "hidden",
1586
- whiteSpace: "nowrap",
1587
- flex: "1"
1618
+ width: "100%"
1588
1619
  }
1589
1620
  },
1590
- "& .M4LIconButton-root": {
1591
- "& .M4LIcon-icon": {
1592
- backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1621
+ "& .M4LAreasAdmin-areaChipMobileIconContainer": {
1622
+ display: "flex",
1623
+ width: "fit-content",
1624
+ alignItems: "center",
1625
+ borderRadius: "0px 4px 4px 0px",
1626
+ background: o.palette.state.active,
1627
+ ...o.typography.body,
1628
+ color: o.palette.text.primary,
1629
+ "& .M4LIconButton-root": {
1630
+ backgroundColor: `${o.palette.state.active}!important`,
1631
+ borderLeft: "1px solid",
1632
+ borderColor: o.palette.patronus?.marbleLight[10],
1633
+ borderRadius: "0px",
1634
+ "& .M4LIcon-icon": {
1635
+ backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1636
+ }
1637
+ }
1638
+ },
1639
+ "& .MuiBox-root": {
1640
+ display: "flex",
1641
+ alignItems: "center",
1642
+ height: "100%"
1643
+ },
1644
+ "& .simplebar-content": {
1645
+ display: "flex",
1646
+ alignItems: "center"
1647
+ },
1648
+ "& .M4LAreasAdmin-areaChipRoot ": {
1649
+ display: "flex",
1650
+ boxShadow: o.customShadows.z1,
1651
+ borderRadius: "4px 4px 4px 4px",
1652
+ marginRight: "8px",
1653
+ height: "22px",
1654
+ width: "fit-content",
1655
+ gap: "8px",
1656
+ paddingLeft: "8px",
1657
+ alignItems: "center",
1658
+ border: "1px solid",
1659
+ borderColor: o.palette.state.default,
1660
+ background: o.palette.state.default,
1661
+ "& .M4LAreasAdmin-areaContainerChipEditButton": {
1662
+ display: "flex",
1663
+ width: "fit-content"
1664
+ },
1665
+ [o.breakpoints.down("sm")]: {
1666
+ height: "auto"
1667
+ },
1668
+ "&.M4LAreasAdmin-selected": {
1669
+ background: o.palette.state.active,
1670
+ ...o.typography.body,
1671
+ color: o.palette.text.primary,
1672
+ height: "22px",
1673
+ [o.breakpoints.down("sm")]: {
1674
+ height: "auto"
1675
+ },
1676
+ "& .M4LAreasAdmin-areaChipTitle": {
1677
+ backgroundColor: "transparent",
1678
+ border: "none",
1679
+ textWrap: "nowrap",
1680
+ width: "auto",
1681
+ display: "flex",
1682
+ alignItems: "center",
1683
+ color: o.palette.patronus?.marbleLight[10],
1684
+ ...o.typography.action,
1685
+ [o.breakpoints.down("sm")]: {
1686
+ display: "inline",
1687
+ fontSize: "14px",
1688
+ textOverflow: "ellipsis",
1689
+ overflow: "hidden",
1690
+ whiteSpace: "nowrap",
1691
+ flex: "1"
1692
+ }
1693
+ },
1694
+ "& .M4LIconButton-root": {
1695
+ "& .M4LIcon-icon": {
1696
+ backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1697
+ }
1698
+ }
1699
+ },
1700
+ "& .M4LAreasAdmin-areaChipTitle": {
1701
+ backgroundColor: "transparent",
1702
+ border: "none",
1703
+ textWrap: "nowrap",
1704
+ width: "auto",
1705
+ display: "flex",
1706
+ alignItems: "center",
1707
+ color: o.palette.text.secondary,
1708
+ ...o.typography.body
1709
+ },
1710
+ "& .M4LIconButton-root": {
1711
+ display: "flex",
1712
+ justifyContent: "center",
1713
+ width: "20px",
1714
+ height: "20px",
1715
+ "&.M4LIconButton-variantPrimary": {
1716
+ background: o.palette.state.active
1717
+ }
1593
1718
  }
1594
- }
1595
- },
1596
- "& .M4LAreasAdmin-areaChipTitle": {
1597
- backgroundColor: "transparent",
1598
- border: "none",
1599
- textWrap: "nowrap",
1600
- width: "auto",
1601
- display: "flex",
1602
- alignItems: "center",
1603
- color: o.palette.text.secondary,
1604
- ...o.typography.body
1605
- },
1606
- "& .M4LIconButton-root": {
1607
- display: "flex",
1608
- justifyContent: "center",
1609
- width: "20px",
1610
- height: "20px",
1611
- "&.M4LIconButton-variantPrimary": {
1612
- background: o.palette.state.active
1613
1719
  }
1614
1720
  }
1615
1721
  }
1616
1722
  },
1723
+ "& .M4LAreasAdmin-areasAddButton": {
1724
+ backgroundColor: `${o.palette.state.active}!important`,
1725
+ "& .M4LIcon-icon": {
1726
+ backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1727
+ }
1728
+ },
1617
1729
  "&.M4LAreasAdmin-isMobile": {
1730
+ overflow: "hidden",
1731
+ boxShadow: "none",
1732
+ width: "100%",
1618
1733
  "& .M4LAreasAdmin-areaContainerChips": {
1619
- width: "100%"
1734
+ width: "100%",
1735
+ overflow: "hidden",
1736
+ background: "none",
1737
+ boxShadow: "none"
1620
1738
  }
1621
1739
  }
1622
1740
  }
@@ -1626,7 +1744,7 @@ const i = (o) => ({
1626
1744
  styleOverrides: {
1627
1745
  "&.M4LAreasAdmin-areaEditPopover": {
1628
1746
  "& .MuiPaper-root": {
1629
- width: "200px"
1747
+ width: "100%"
1630
1748
  }
1631
1749
  }
1632
1750
  }
@@ -1673,6 +1791,10 @@ const i = (o) => ({
1673
1791
  "& .react-resizable-handle": {
1674
1792
  backgroundColor: "transparent"
1675
1793
  },
1794
+ "&.react-colapsed": {
1795
+ border: "1px solid",
1796
+ borderColor: o.palette.state.borderDefault
1797
+ },
1676
1798
  "& .M4LAreasViewer-windowRootContainer": {
1677
1799
  display: "flex",
1678
1800
  flexDirection: "column",
@@ -1831,7 +1953,7 @@ const i = (o) => ({
1831
1953
  },
1832
1954
  "& .M4LAreasViewer-windowContent": {
1833
1955
  margin: "8px",
1834
- background: o.palette.background.background,
1956
+ background: "none",
1835
1957
  borderRadius: "4px",
1836
1958
  display: "flex",
1837
1959
  flexDirection: "column",
@@ -1852,69 +1974,54 @@ const i = (o) => ({
1852
1974
  padding: "4px 4px 4px 8px",
1853
1975
  justifyContent: "end",
1854
1976
  minHeight: "36px",
1855
- borderBottom: "1px solid",
1856
- borderColor: o.palette.divider,
1977
+ borderTop: "1px solid",
1978
+ borderColor: o.palette.state.borderTop,
1857
1979
  overflow: "hidden",
1858
1980
  cursor: "move",
1859
1981
  height: "36px",
1860
1982
  "& .M4LTypography-root .MuiTypography-root": {
1861
1983
  ...o.typography.paragraphDens
1862
1984
  },
1863
- "& .M4LIcon-icon": {
1864
- backgroundColor: o.palette.text.primary
1985
+ "& .MuiButtonBase-root": {
1986
+ "& .M4LIcon-icon": {
1987
+ backgroundColor: o.palette.text.primary
1988
+ }
1989
+ },
1990
+ "& .Mui-disabled": {
1991
+ "& .M4LIcon-icon": {
1992
+ backgroundColor: o.palette.text.disabled
1993
+ }
1994
+ },
1995
+ "& .MuiButtonBase-root:hover": {
1996
+ background: o.palette.state.default,
1997
+ color: o.palette.state.hover,
1998
+ "& .M4LIcon-icon": {
1999
+ backgroundColor: o.palette.state.hover
2000
+ }
1865
2001
  }
1866
2002
  }
1867
2003
  }
1868
- }
1869
- },
1870
- "& .M4LAreasViewer-panelWindowsRoot": {
1871
- background: o.palette.background.neutral,
1872
- boxShadow: o.customShadows.z2,
1873
- borderRadius: "4px",
1874
- display: "flex",
1875
- alignItems: "center",
1876
- margin: "4px",
1877
- padding: "4px",
1878
- gap: "8px",
1879
- "& .M4LAreasViewer-panelWindowsButtonContainer": {
1880
- borderRadius: "2px",
1881
- background: o.palette.background.default,
1882
- boxShadow: o.customShadows.z2,
1883
- "&.M4LAreasViewer-selected": {
1884
- background: o.palette.state.active12,
1885
- boxShadow: `inset 1px 2px 3px 0 ${e(o.palette.patronus?.ashBlak[50] || "", 0.9)}`
1886
- }
1887
- }
1888
- },
1889
- "& .M4LAreasViewer-windowPopupRoot": {
1890
- boxShadow: o.customShadows.z3,
1891
- "& .M4LIcon-root.custom-handle": {
1892
- "& .M4LIcon-icon": {
1893
- backgroundColor: o.palette.state.skeleton.default,
1894
- width: "11px",
1895
- height: "11px",
1896
- minWidth: "11px",
1897
- minHeight: "11px",
1898
- boxShadow: o.customShadows.z1,
1899
- border: "1px solid",
1900
- borderColor: o.palette.opacity.cool[24]
1901
- }
1902
2004
  },
1903
- "& .M4LAreasViewer-windowRoot": {
2005
+ "& .M4LAreasViewer-windowPopupRoot": {
2006
+ boxShadow: o.customShadows.z3,
1904
2007
  padding: "4px",
1905
2008
  background: o.palette.state.default,
1906
2009
  borderRadius: "4px",
1907
2010
  border: "1px solid",
1908
2011
  borderColor: o.palette.state.default,
1909
2012
  backdropFilter: "blur(8px)",
1910
- "&:not(.M4LAreasViewer-loading)": {
1911
- "& .M4LinearProgressIndeterminate-root": {
1912
- opacity: 0
2013
+ "& .M4LIcon-root.custom-handle": {
2014
+ "& .M4LIcon-icon": {
2015
+ backgroundColor: o.palette.state.skeleton.default,
2016
+ width: "11px",
2017
+ height: "11px",
2018
+ minWidth: "11px",
2019
+ minHeight: "11px",
2020
+ boxShadow: o.customShadows.z1,
2021
+ border: "1px solid",
2022
+ borderColor: o.palette.opacity.cool[24]
1913
2023
  }
1914
2024
  },
1915
- "& > .react-resizable-handle": {
1916
- backgroundColor: "transparent"
1917
- },
1918
2025
  "& .M4LAreasViewer-windowRootContainer": {
1919
2026
  background: o.palette.background.background,
1920
2027
  borderRadius: "4px",
@@ -1922,31 +2029,105 @@ const i = (o) => ({
1922
2029
  height: "28px",
1923
2030
  minHeight: "28px",
1924
2031
  boxShadow: "none",
1925
- background: o.palette.background.neutral,
2032
+ background: o.palette.state.default,
2033
+ "& .M4LIcon-root": {
2034
+ "& .M4LIcon-icon": {
2035
+ backgroundColor: o.palette.text.secondary
2036
+ }
2037
+ },
1926
2038
  "& .M4LTypography-root .MuiTypography-root": {
1927
2039
  ...o.typography.body,
1928
2040
  color: o.palette.text.secondary
1929
2041
  }
1930
2042
  }
1931
2043
  },
1932
- "&.M4LAreasViewer-selectedWindow": {
1933
- border: "1px solid",
1934
- borderColor: o.palette.state.active12,
1935
- background: o.palette.state.active12,
1936
- boxShadow: o.customShadows.z3,
2044
+ "& .M4LAreasViewer-windowRoot": {
1937
2045
  padding: "4px",
1938
- "& .M4LAreasViewer-windowHeader": {
1939
- background: o.palette.background.neutral,
1940
- height: "28px",
1941
- borderRadius: "4px",
1942
- boxShadow: o.customShadows.z1,
1943
- borderTop: "2px solid",
1944
- borderColor: o.palette.state.default,
1945
- "& .M4LTypography-root .MuiTypography-root": {
1946
- ...o.typography.body,
1947
- color: o.palette.text.primary
2046
+ background: o.palette.state.default,
2047
+ borderRadius: "4px",
2048
+ border: "1px solid",
2049
+ borderColor: o.palette.state.default,
2050
+ backdropFilter: "blur(8px)",
2051
+ "&:not(.M4LAreasViewer-loading)": {
2052
+ "& .M4LinearProgressIndeterminate-root": {
2053
+ opacity: 0
2054
+ }
2055
+ },
2056
+ "& > .react-resizable-handle": {
2057
+ backgroundColor: "transparent"
2058
+ },
2059
+ "&.M4LAreasViewer-selectedWindow": {
2060
+ border: "1px solid",
2061
+ borderColor: o.palette.state.active12,
2062
+ background: o.palette.state.active12,
2063
+ boxShadow: o.customShadows.z3,
2064
+ padding: "4px",
2065
+ "& .M4LAreasViewer-windowRootContainer": {
2066
+ "& .M4LAreasViewer-windowHeader": {
2067
+ background: o.palette.background.neutral,
2068
+ height: "28px",
2069
+ borderRadius: "4px",
2070
+ boxShadow: o.customShadows.z1,
2071
+ borderTop: "2px solid",
2072
+ borderColor: o.palette.state.default,
2073
+ "& .M4LIcon-root": {
2074
+ "& .M4LIcon-icon": {
2075
+ backgroundColor: o.palette.text.primary
2076
+ }
2077
+ },
2078
+ "& .M4LTypography-root .MuiTypography-root": {
2079
+ ...o.typography.body,
2080
+ color: o.palette.text.primary
2081
+ }
2082
+ }
1948
2083
  }
1949
2084
  }
2085
+ },
2086
+ "&.M4LAreasViewer-selectedWindow": {
2087
+ border: "1px solid",
2088
+ borderColor: o.palette.state.active,
2089
+ background: o.palette.state.active12,
2090
+ boxShadow: o.customShadows.z3,
2091
+ padding: "6px",
2092
+ "& .M4LAreasViewer-windowRootContainer": {
2093
+ boxShadow: o.customShadows.z2,
2094
+ "& .M4LAreasViewer-windowHeader": {
2095
+ background: o.palette.state.skeleton,
2096
+ height: "28px",
2097
+ borderRadius: "4px",
2098
+ boxShadow: o.customShadows.z1,
2099
+ borderTop: "1.5px solid",
2100
+ borderColor: o.palette.state.borderTop,
2101
+ "& .M4LIcon-root": {
2102
+ "& .M4LIcon-icon": {
2103
+ backgroundColor: o.palette.text.primary
2104
+ }
2105
+ },
2106
+ "& .M4LTypography-root .MuiTypography-root": {
2107
+ ...o.typography.body,
2108
+ color: o.palette.text.primary
2109
+ }
2110
+ }
2111
+ }
2112
+ }
2113
+ }
2114
+ },
2115
+ "& .M4LAreasViewer-panelWindowsRoot": {
2116
+ background: o.palette.background.neutral,
2117
+ boxShadow: o.customShadows.z2,
2118
+ borderRadius: "4px",
2119
+ display: "flex",
2120
+ alignItems: "center",
2121
+ margin: "4px",
2122
+ padding: "4px",
2123
+ gap: "8px",
2124
+ "& .M4LAreasViewer-panelWindowsButtonContainer": {
2125
+ borderRadius: "2px",
2126
+ background: o.palette.background.default,
2127
+ boxShadow: o.customShadows.z2,
2128
+ "&.M4LAreasViewer-selected": {
2129
+ background: o.palette.state.active12,
2130
+ boxShadow: `inset 1px 2px 3px 0 ${r(o.palette.patronus?.ashBlak[50] || "", 0.9)}`
1950
2131
  }
1951
2132
  }
1952
2133
  },
@@ -2009,23 +2190,14 @@ const i = (o) => ({
2009
2190
  },
2010
2191
  M4LAreasViewerModal: {
2011
2192
  styleOverrides: {
2012
- "&.M4LAreasViewer-windowModalRoot": {
2193
+ "&.M4LAreasViewer-windowModalRoot .M4LAreasViewer-windowRoot": {
2013
2194
  borderRadius: "4px",
2014
2195
  boxShadow: o.customShadows.z4,
2015
- "& .M4LAreasViewer-windowRoot": {
2016
- borderRadius: "4px"
2017
- },
2018
- "& .M4LIcon-root.custom-handle": {
2019
- "& .M4LIcon-icon": {
2020
- backgroundColor: o.palette.state.skeleton.default,
2021
- width: "11px",
2022
- height: "11px",
2023
- minWidth: "11px",
2024
- minHeight: "11px",
2025
- boxShadow: o.customShadows.z1,
2026
- border: "1px solid",
2027
- borderColor: o.palette.opacity.cool[24]
2028
- }
2196
+ background: o.palette.background.background,
2197
+ "& .M4LAreasViewer-windowContent": {
2198
+ borderRadius: "4px",
2199
+ boxShadow: o.customShadows.z4,
2200
+ background: o.palette.background.neutral
2029
2201
  },
2030
2202
  "& .M4LAreasViewer-areasLoadingErrorRoot": {
2031
2203
  display: "flex",
@@ -2082,7 +2254,7 @@ const i = (o) => ({
2082
2254
  }
2083
2255
  },
2084
2256
  "& .MuiBackdrop-root": {
2085
- background: e(`${o.palette.patronus?.ashBlak[60]}`, 0.8)
2257
+ background: r(`${o.palette.patronus?.ashBlak[60]}`, 0.8)
2086
2258
  },
2087
2259
  "&:not(.M4LAreasViewer-loading)": {
2088
2260
  "& .M4LinearProgressIndeterminate-root": {
@@ -2096,7 +2268,9 @@ const i = (o) => ({
2096
2268
  display: "flex",
2097
2269
  flexDirection: "column",
2098
2270
  height: "100%",
2099
- background: o.palette.background.neutral,
2271
+ background: o.palette.background.background,
2272
+ borderRadius: "4px",
2273
+ boxShadow: o.customShadows.z4,
2100
2274
  "& .M4LAreasViewer-windowHeader": {
2101
2275
  cursor: "all-scroll",
2102
2276
  display: "flex",
@@ -2118,7 +2292,7 @@ const i = (o) => ({
2118
2292
  },
2119
2293
  "& .M4LAreasViewer-windowContent": {
2120
2294
  margin: "0 8px 8px 8px",
2121
- background: o.palette.background.default,
2295
+ background: o.palette.background.background,
2122
2296
  borderRadius: "4px",
2123
2297
  display: "flex",
2124
2298
  flexDirection: "column",
@@ -2128,6 +2302,18 @@ const i = (o) => ({
2128
2302
  height: "100%"
2129
2303
  }
2130
2304
  }
2305
+ },
2306
+ "& .M4LIcon-root.custom-handle": {
2307
+ "& .M4LIcon-icon": {
2308
+ backgroundColor: o.palette.state.skeleton.default,
2309
+ width: "11px",
2310
+ height: "11px",
2311
+ minWidth: "11px",
2312
+ minHeight: "11px",
2313
+ boxShadow: o.customShadows.z2,
2314
+ border: "1px solid",
2315
+ borderColor: o.palette.state.overdefoult
2316
+ }
2131
2317
  }
2132
2318
  }
2133
2319
  }
@@ -2135,21 +2321,25 @@ const i = (o) => ({
2135
2321
  M4LAppBar: {
2136
2322
  styleOverrides: {
2137
2323
  "&.M4LAppBar-root": {
2138
- test: "root",
2139
2324
  display: "flex",
2140
- width: "100%",
2325
+ width: "auto",
2141
2326
  overflow: "hidden",
2142
- height: "48px",
2327
+ height: "52px",
2143
2328
  alignItems: "center",
2144
2329
  borderRadius: "6px",
2145
- padding: "8px",
2146
- borderTop: "1px solid",
2147
- borderColor: o.palette.state.default,
2330
+ padding: "4px 8px 4px 8px",
2331
+ borderTop: "1.5px solid",
2332
+ borderColor: o.palette.state.borderTop,
2148
2333
  background: o.palette.background.neutral,
2149
2334
  boxShadow: o.customShadows.z2,
2335
+ justifyContent: "space-between",
2336
+ marginLeft: "4px",
2337
+ [o.breakpoints.down("sm")]: {
2338
+ width: "100%",
2339
+ marginLeft: "0"
2340
+ },
2150
2341
  "& .M4LAppBar-containerIconMenuToggle": {
2151
2342
  display: "flex",
2152
- justifyContent: "center",
2153
2343
  alingItems: "center",
2154
2344
  width: "52px",
2155
2345
  height: "52px",
@@ -2158,6 +2348,7 @@ const i = (o) => ({
2158
2348
  alignItems: "center",
2159
2349
  borderRadius: "4px",
2160
2350
  borderColor: o.palette.state.default,
2351
+ justifyContent: "space-between",
2161
2352
  "& .M4LAppBar-iconMenuToggle": {
2162
2353
  background: o.palette.background.default,
2163
2354
  boxShadow: o.customShadows.z2,
@@ -2166,62 +2357,92 @@ const i = (o) => ({
2166
2357
  width: "36px",
2167
2358
  height: "36px",
2168
2359
  minWidth: "36px",
2169
- minHeight: "36px"
2360
+ minHeight: "36px",
2361
+ [o.breakpoints.down("sm")]: {
2362
+ background: o.palette.background.default,
2363
+ boxShadow: o.customShadows.z2,
2364
+ borderTop: "1px solid",
2365
+ borderColor: o.palette.state.default,
2366
+ width: "36px",
2367
+ height: "36px",
2368
+ minWidth: "36px",
2369
+ minHeight: "36px"
2370
+ }
2170
2371
  }
2171
2372
  },
2172
- [o.breakpoints.down("sm")]: {
2173
- display: "flex",
2174
- alignItems: "center",
2175
- width: "100%",
2176
- borderTop: "1px solid",
2177
- borderColor: o.palette.state.default,
2178
- background: o.palette.background.neutral,
2179
- boxShadow: o.customShadows.z2,
2180
- paddingRight: "8px",
2181
- borderRadius: "6px"
2182
- },
2183
2373
  "& .M4LAppBar-containerChilds": {
2184
2374
  display: "flex",
2185
- width: "70%",
2186
- overflow: "visible",
2187
- alignItems: "center",
2188
- borderRadius: "4px",
2375
+ flexDirection: "row",
2376
+ gap: "12px",
2377
+ width: "100%",
2378
+ justifyContent: "space-between",
2189
2379
  [o.breakpoints.down("sm")]: {
2190
- width: "100%",
2380
+ display: "flex",
2191
2381
  alignItems: "center",
2192
- gap: "8px",
2193
- borderRadius: "4px 0px 0px 4px",
2194
- display: "flex"
2382
+ width: "100%",
2383
+ borderTop: "0",
2384
+ borderColor: "none",
2385
+ background: "none",
2386
+ boxShadow: "none",
2387
+ paddingRight: "0px",
2388
+ borderRadius: "6px",
2389
+ overflow: "hidden"
2195
2390
  },
2196
- "& .M4LAvatar-root": {
2197
- width: "36px",
2198
- height: "36px",
2199
- "& .MuiAvatar-root": {
2391
+ "& .M4LAppBar-containerChilds": {
2392
+ display: "flex",
2393
+ width: "100%",
2394
+ overflow: "visible",
2395
+ alignItems: "center",
2396
+ borderRadius: "4px",
2397
+ background: "none",
2398
+ boxShadow: "none",
2399
+ justifyContent: "space-between",
2400
+ [o.breakpoints.down("sm")]: {
2401
+ width: "100%",
2402
+ alignItems: "center",
2403
+ gap: "8px",
2404
+ borderRadius: "4px 0px 0px 4px",
2405
+ display: "flex",
2406
+ background: "none",
2407
+ boxShadow: "none",
2408
+ borderTop: "0px"
2409
+ },
2410
+ "& .M4LAvatar-root": {
2200
2411
  width: "36px",
2201
- height: "36px"
2412
+ height: "36px",
2413
+ "& .MuiAvatar-root": {
2414
+ width: "36px",
2415
+ height: "36px"
2416
+ }
2202
2417
  }
2203
2418
  }
2204
2419
  }
2205
2420
  }
2421
+ },
2422
+ "*css-1gn3ygk": {
2423
+ overflow: "hidden"
2206
2424
  }
2207
2425
  }
2208
- }), v = (o) => ({
2426
+ }), h = (o) => ({
2209
2427
  M4LAvatar: {
2210
2428
  styleOverrides: {
2211
2429
  "&.M4LAvatar-root": {
2212
2430
  "& .MuiAvatar-root": {
2213
- width: "32px",
2214
- height: "32px",
2215
- borderRadius: "4px"
2431
+ width: "36px",
2432
+ height: "36px",
2433
+ borderRadius: "4px",
2434
+ background: o.palette.patronus?.blazeOrange[40]
2216
2435
  },
2217
2436
  test: "root"
2218
2437
  }
2219
2438
  }
2220
2439
  }
2221
- }), h = (o) => ({
2440
+ }), v = (o) => ({
2222
2441
  M4LAccountPopover: {
2223
2442
  styleOverrides: {
2224
- "&.M4LAccountPopover-root": {}
2443
+ "&.M4LAccountPopover-root": {
2444
+ borderRadius: "6px"
2445
+ }
2225
2446
  }
2226
2447
  },
2227
2448
  M4LAccountPopoverPopover: {
@@ -2231,17 +2452,21 @@ const i = (o) => ({
2231
2452
  display: "flex",
2232
2453
  flexDirection: "column",
2233
2454
  gap: "8px",
2455
+ borderRadius: "6px",
2234
2456
  "& .MuiPaper-root": {
2235
2457
  display: "flex",
2236
2458
  flexDirection: "column",
2237
2459
  gap: "8px",
2238
- padding: "16px"
2460
+ padding: "8px",
2461
+ borderRadius: "6px",
2462
+ boxShadow: o.customShadows.z3,
2463
+ background: o.palette.background.background
2239
2464
  },
2240
2465
  "& .M4LAccountPopover-containerAppVersion": {
2241
2466
  display: "flex",
2242
2467
  borderBottom: "2px solid",
2243
2468
  borderColor: o.palette.state.default,
2244
- paddingBottom: "8px"
2469
+ padding: "4px 4px 8px 4px"
2245
2470
  },
2246
2471
  "& .M4LAccountPopover-containerMenuItems": {
2247
2472
  "& .M4LAccountPopover-menuItem": {
@@ -2417,11 +2642,12 @@ const i = (o) => ({
2417
2642
  M4LCommonActions: {
2418
2643
  styleOverrides: {
2419
2644
  "&.M4LCommonActions-root": {
2420
- padding: "14px",
2645
+ padding: "16px 0px 8px 0px",
2421
2646
  display: "flex",
2422
2647
  gap: "14px",
2423
2648
  justifyContent: "flex-end",
2424
- width: "100%"
2649
+ width: "100%",
2650
+ overflow: "visible"
2425
2651
  }
2426
2652
  }
2427
2653
  }
@@ -2491,6 +2717,7 @@ const i = (o) => ({
2491
2717
  M4LTab: {
2492
2718
  styleOverrides: {
2493
2719
  "&.M4LTab-root": {
2720
+ width: "fit-content",
2494
2721
  "& .MuiButtonBase-root": {
2495
2722
  borderRadius: "4px",
2496
2723
  display: "flex",
@@ -2502,8 +2729,9 @@ const i = (o) => ({
2502
2729
  minHeight: "fit-content",
2503
2730
  minWidth: "fit-content",
2504
2731
  gap: "8px",
2505
- ...o.typography.paragraph,
2506
- color: o.palette.text.primary,
2732
+ ...o.typography.body,
2733
+ color: o.palette.text.secondary,
2734
+ lineHeight: "none",
2507
2735
  "& .M4LIcon-root": {
2508
2736
  marginBottom: "0"
2509
2737
  }
@@ -2520,6 +2748,9 @@ const i = (o) => ({
2520
2748
  border: "1px solid",
2521
2749
  borderColor: o.palette.state.active12,
2522
2750
  boxShadow: o.customShadows.z2,
2751
+ ...o.typography.bodyDens,
2752
+ color: o.palette.text.primary,
2753
+ lineHeight: "none",
2523
2754
  "&::before": {
2524
2755
  content: '""',
2525
2756
  width: "3px",
@@ -2533,7 +2764,7 @@ const i = (o) => ({
2533
2764
  }
2534
2765
  }
2535
2766
  }
2536
- }), m = (o) => ({
2767
+ }), T = (o) => ({
2537
2768
  M4LAccordion: {
2538
2769
  styleOverrides: {
2539
2770
  "&.M4LAccordion-root": {
@@ -2585,7 +2816,7 @@ const i = (o) => ({
2585
2816
  }
2586
2817
  }
2587
2818
  }
2588
- }), T = (o) => ({
2819
+ }), D = (o) => ({
2589
2820
  M4LRHFormProvider: {
2590
2821
  styleOverrides: {
2591
2822
  "&.M4LRHFormProvider-root": {
@@ -2596,7 +2827,7 @@ const i = (o) => ({
2596
2827
  }
2597
2828
  }
2598
2829
  }
2599
- }), D = (o) => ({
2830
+ }), m = (o) => ({
2600
2831
  M4LPeriod: {
2601
2832
  styleOverrides: {
2602
2833
  "&.M4LPeriod-root": {
@@ -2740,7 +2971,7 @@ const i = (o) => ({
2740
2971
  }
2741
2972
  }
2742
2973
  }
2743
- }), P = (o) => ({
2974
+ }), z = (o) => ({
2744
2975
  M4LModalDialog: {
2745
2976
  styleOverrides: {
2746
2977
  "&.M4LModal-root": {
@@ -2863,7 +3094,7 @@ const i = (o) => ({
2863
3094
  }
2864
3095
  }
2865
3096
  }
2866
- }), z = (o) => ({
3097
+ }), P = (o) => ({
2867
3098
  M4LPaperForm: {
2868
3099
  styleOverrides: {
2869
3100
  "&.M4LPaperForm-root": {
@@ -2904,7 +3135,7 @@ const i = (o) => ({
2904
3135
  }
2905
3136
  }
2906
3137
  }
2907
- }), V = (o) => ({
3138
+ }), F = (o) => ({
2908
3139
  M4LTooltip: {
2909
3140
  styleOverrides: {
2910
3141
  "&.M4LTooltip-root": {
@@ -2922,14 +3153,14 @@ const i = (o) => ({
2922
3153
  margin: "4px 2px 2px 2px",
2923
3154
  marginTop: "0px",
2924
3155
  color: o.palette.text.primary,
2925
- borderTop: "1px solid",
2926
- borderColor: o.palette.background.background,
3156
+ borderTop: "1.5px solid",
3157
+ borderColor: o.palette.state.borderTop,
2927
3158
  ...o.typography.body
2928
3159
  }
2929
3160
  }
2930
3161
  }
2931
3162
  }
2932
- }), F = (o) => ({
3163
+ }), V = (o) => ({
2933
3164
  M4LBadge: {
2934
3165
  styleOverrides: {
2935
3166
  "& .M4LBadge-root": {
@@ -2937,38 +3168,321 @@ const i = (o) => ({
2937
3168
  }
2938
3169
  }
2939
3170
  }
3171
+ }), O = (o) => ({
3172
+ M4LDataGrid: {
3173
+ styleOverrides: {
3174
+ "&.M4LDataGrid-root": {
3175
+ test: "root",
3176
+ "& .M4LDataGrid-actions": {
3177
+ ...o.typography.caption,
3178
+ position: "absolute",
3179
+ left: "0px",
3180
+ right: "0px",
3181
+ top: "0px",
3182
+ height: o.spacing(5.5),
3183
+ padding: 0,
3184
+ display: "flex",
3185
+ flexDirection: "row",
3186
+ alignItems: "center",
3187
+ justifyContent: "flex-end",
3188
+ [o.breakpoints.up("sm")]: {
3189
+ padding: o.spacing(0, 1.5)
3190
+ },
3191
+ "& .M4LDataGrid-rowsCount": {
3192
+ display: "flex",
3193
+ "& .M4LDataGrid-rowsCountLabel": {},
3194
+ "& .M4LDataGrid-rowsCountValue": {
3195
+ marginLeft: o.spacing(2),
3196
+ paddingTop: "2px",
3197
+ paddingBottom: "2px",
3198
+ paddingLeft: "4px",
3199
+ paddingRight: "4px",
3200
+ border: `1px solid ${o.palette.divider}`
3201
+ }
3202
+ },
3203
+ "& .M4LDataGrid-actionFilter": {},
3204
+ "& .M4LDataGrid-actionSettings": {}
3205
+ },
3206
+ "& .M4LDataGrid-tableContaniner": {
3207
+ display: "flex",
3208
+ flexDirection: "column",
3209
+ position: "absolute",
3210
+ top: "40px",
3211
+ bottom: "0px",
3212
+ left: "0px",
3213
+ right: "0px",
3214
+ overflow: "hidden",
3215
+ "& .M4LDataGrid-wrapperDataGridCss": {
3216
+ position: "absolute",
3217
+ bottom: "0px",
3218
+ top: "0px",
3219
+ left: "0px",
3220
+ right: "0px",
3221
+ "& .rdg ": {
3222
+ userSelect: "initial",
3223
+ height: "100%",
3224
+ contentVisibility: "unset",
3225
+ overflow: "scroll",
3226
+ borderRadius: "5px",
3227
+ "--rdg-grid-inline-size": "0px",
3228
+ "--rdg-header-background-color": o.palette.grid?.sectionHeader,
3229
+ "--rdg-row-selected-background-color": o.palette.state.hover,
3230
+ "--rdg-row-hover-background-color": o.palette.grid?.rowHover,
3231
+ "--rdg-background-color": o.palette.background.default,
3232
+ "--rdg-selection-color": o.palette.primary.main,
3233
+ "--row-selected-hover-background-color": o.palette.mode === "light" ? o.palette.primary.LightSelectedHover : o.palette.primary.DarkSelectedHover,
3234
+ "--rdg-checkbox-color": o.palette.primary.main,
3235
+ "--rdg-checkbox-focus-color": t(
3236
+ o.palette.primary.main,
3237
+ o.palette.action.selectedOpacity
3238
+ ),
3239
+ "--rdg-border-color": o.palette.divider
3240
+ },
3241
+ "& .rdg::-webkit-scrollbar": {
3242
+ width: "6px",
3243
+ height: "6px",
3244
+ borderRadius: "3px",
3245
+ backgroundColor: "transparent"
3246
+ },
3247
+ "& .rdg::-webkit-scrollbar-track": {
3248
+ backgroundColor: "transparent",
3249
+ border: "0px solid transparent"
3250
+ },
3251
+ "& .rdg::-webkit-scrollbar-corner": {
3252
+ backgroundColor: "transparent"
3253
+ },
3254
+ "& ::-webkit-scrollbar-thumb": {
3255
+ borderRadius: "10px",
3256
+ backgroundColor: o.palette.divider,
3257
+ border: "0px solid transparent"
3258
+ },
3259
+ '& [role="columnheader"]': {
3260
+ justifyContent: "center",
3261
+ alignItems: "center"
3262
+ },
3263
+ "& .rdg-cell": {
3264
+ fontFamily: o.typography.body2.fontFamily,
3265
+ fontWeight: o.typography.body2.fontWeight,
3266
+ fontSize: o.typography.body2.fontSize,
3267
+ color: o.palette.text.secondary,
3268
+ borderBottom: `1px solid ${o.palette.divider}`,
3269
+ borderRight: "0px solid transparent",
3270
+ position: "relative",
3271
+ "&.rdg-cell-frozen": {
3272
+ position: "sticky"
3273
+ },
3274
+ "&:after": {
3275
+ content: '""',
3276
+ borderRight: `1px solid ${o.palette.divider}`,
3277
+ position: "absolute",
3278
+ right: "0px",
3279
+ top: "25%",
3280
+ bottom: "25%"
3281
+ },
3282
+ "& .m4l_icon": {
3283
+ height: "100%"
3284
+ }
3285
+ },
3286
+ "& [aria-selected=true]": {
3287
+ backgroundColor: o.palette.state.active
3288
+ },
3289
+ "& .rdg-cell.rdg-cell-align-left": {
3290
+ textAlign: "left"
3291
+ },
3292
+ "& .rdg-cell.rdg-cell-align-center": {
3293
+ textAlign: "center"
3294
+ },
3295
+ "& .rdg-cell.rdg-cell-align-right": {
3296
+ textAlign: "right"
3297
+ },
3298
+ "& .rdg-row .rdg-cell-frozen-last:after": {
3299
+ borderRight: "0px solid transparent",
3300
+ boxShadow: "none"
3301
+ },
3302
+ "& .rdg-row :last-child:after": {
3303
+ borderRight: "0px solid transparent"
3304
+ },
3305
+ "& .rdg-header-row .rdg-cell": {
3306
+ fontFamily: o.typography.subtitle2.fontFamily,
3307
+ fontWeight: o.typography.subtitle2.fontWeight,
3308
+ fontSize: o.typography.subtitle2.fontSize,
3309
+ color: o.palette.text.primary,
3310
+ borderRight: "0px solid transparent",
3311
+ boxShadow: "none",
3312
+ "&.rdg-cell-frozen-last": {
3313
+ "&:after": {
3314
+ borderRight: "0px solid transparent"
3315
+ },
3316
+ boxShadow: "var(--rdg-frozen-cell-box-shadow)"
3317
+ },
3318
+ "& .rdg-sort-arrow": {
3319
+ width: o.spacing(1),
3320
+ margin: `0 ${o.spacing(0.5)}`
3321
+ }
3322
+ },
3323
+ "& .rdg-header-row :last-child.rdg-cell": {
3324
+ borderTopRightRadius: "5px",
3325
+ "&:after": {
3326
+ borderRight: "0px solid transparent"
3327
+ }
3328
+ },
3329
+ "& .filter_cell_div": {
3330
+ paddingLeft: o.spacing(0.5),
3331
+ paddingRight: o.spacing(0.5)
3332
+ },
3333
+ "& .rdg-header-sort-cell": {
3334
+ width: "100%",
3335
+ flexGrow: "1",
3336
+ alignItems: "center"
3337
+ },
3338
+ '& [aria-columnsort="ASC"]': {
3339
+ borderTop: `2px solid ${o.palette.primary.main}`
3340
+ },
3341
+ '& [aria-columnsort="DESC"]': {
3342
+ borderBottom: `2px solid ${o.palette.primary.main}`
3343
+ }
3344
+ }
3345
+ },
3346
+ "&.M4LDataGrid-withNoPager": {}
3347
+ }
3348
+ }
3349
+ },
3350
+ M4LDataGridDensityPopover: {
3351
+ styleOverrides: {
3352
+ "&.M4LDataGrid-actionDensityPopover": {
3353
+ test: "root"
3354
+ }
3355
+ }
3356
+ },
3357
+ M4LDataGridActionsFormatter: {
3358
+ styleOverrides: {
3359
+ "&.M4LDataGrid-actionsFormatter": {
3360
+ test: "root"
3361
+ }
3362
+ }
3363
+ }
3364
+ }), H = (o) => ({
3365
+ M4LPager: {
3366
+ styleOverrides: {
3367
+ "&.M4LPager-root": {
3368
+ test: "root",
3369
+ "& .M4LPager-skeletonRoot": {
3370
+ width: "100%",
3371
+ display: "flex",
3372
+ justifyContent: "center",
3373
+ alignItems: "center",
3374
+ marginLeft: o.spacing(3),
3375
+ "& .M4LPager-skeletonRowsPerPage": {
3376
+ display: "grid",
3377
+ gridTemplateColumns: "auto auto",
3378
+ gridGap: o.spacing(1),
3379
+ marginRight: o.spacing(3)
3380
+ },
3381
+ "& .M4LPager-skeletonButtonContainer": {
3382
+ display: "flex",
3383
+ marginLeft: o.spacing(3),
3384
+ "& .M4LPager-skeletonIconButton": {
3385
+ display: "flex",
3386
+ justifyContent: "center",
3387
+ alignItems: "center",
3388
+ width: o.spacing(3.75),
3389
+ height: o.spacing(3.75)
3390
+ }
3391
+ }
3392
+ }
3393
+ }
3394
+ }
3395
+ }
3396
+ }), W = (o) => ({
3397
+ M4LCheckBox: {
3398
+ styleOverrides: {
3399
+ "&.M4LCheckBox-root": {
3400
+ display: "flex",
3401
+ flexDirection: "column",
3402
+ gap: o.spacing(0.5),
3403
+ "& .MuiTypography-root": {
3404
+ color: o.palette.text.primary,
3405
+ ...o.typography.body
3406
+ },
3407
+ ".M4LCheckBox-small .MuiButtonBase-root": {
3408
+ width: "20px",
3409
+ height: "20px"
3410
+ },
3411
+ ".MuiCheckbox-root .MuiSvgIcon-fontSizeSmall": {
3412
+ width: "16px",
3413
+ height: "16px"
3414
+ },
3415
+ ".M4LCheckBox-medium .MuiButtonBase-root": {
3416
+ width: "24px",
3417
+ height: "24px"
3418
+ },
3419
+ ".MuiCheckbox-root .MuiSvgIcon-fontSizeMedium": {
3420
+ width: "20px",
3421
+ height: "20px"
3422
+ },
3423
+ ".MuiButtonBase-root": {
3424
+ borderRadius: "4px"
3425
+ },
3426
+ ".MuiButtonBase-root:hover": {
3427
+ backgroundColor: o.palette.state?.active12
3428
+ },
3429
+ ".Mui-focusVisible": {
3430
+ border: "1px solid",
3431
+ borderColor: o.palette.state?.focus
3432
+ },
3433
+ ".MuiButtonBase-root:hover .MuiSvgIcon-root": {
3434
+ fill: o.palette.state?.hover
3435
+ },
3436
+ ".M4LCheckBox-checkTypography .MuiTypography-root": {
3437
+ ...o.typography.body
3438
+ },
3439
+ ".M4LCheckBox-stateDisabled .MuiSvgIcon-root": {
3440
+ fill: o.palette.state?.default
3441
+ },
3442
+ ".M4LCheckBox-stateDisabled .MuiTypography-root": {
3443
+ color: o.palette.text.disabled
3444
+ },
3445
+ ".MuiButtonBase-root .Mui-focusVisible:focus-visible": {
3446
+ outline: "#fff00"
3447
+ }
3448
+ }
3449
+ }
3450
+ }
2940
3451
  });
2941
3452
  export {
2942
- m as A,
2943
- D as B,
2944
- P as C,
3453
+ A,
3454
+ T as B,
3455
+ m as C,
2945
3456
  z as D,
2946
- V as E,
3457
+ P as E,
3458
+ F,
3459
+ H as G,
3460
+ W as H,
2947
3461
  b as M,
2948
3462
  i as a,
2949
- T as b,
3463
+ D as b,
2950
3464
  n as c,
2951
3465
  p as d,
2952
3466
  d as e,
2953
3467
  l as f,
2954
3468
  M as g,
2955
3469
  s as h,
2956
- F as i,
3470
+ V as i,
2957
3471
  c as j,
2958
- u as k,
2959
- x as l,
2960
- g as m,
2961
- L as n,
2962
- w as o,
2963
- y as p,
2964
- f as q,
2965
- v as r,
3472
+ O as k,
3473
+ u as l,
3474
+ x as m,
3475
+ g as n,
3476
+ y as o,
3477
+ w as p,
3478
+ L as q,
3479
+ f as r,
2966
3480
  h as s,
2967
- k as t,
2968
- C as u,
2969
- I as v,
2970
- B as w,
2971
- S as x,
2972
- R as y,
2973
- A as z
3481
+ v as t,
3482
+ k as u,
3483
+ C as v,
3484
+ I as w,
3485
+ B as x,
3486
+ S as y,
3487
+ R as z
2974
3488
  };