@m4l/styles 0.0.24 → 0.0.25

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 (35) hide show
  1. package/index.js +10 -10
  2. package/package.json +1 -1
  3. package/theme/{defaultThemeOptions.d50c50f1.js → defaultThemeOptions.ce206b4e.js} +5 -5
  4. package/theme/index.8bbc9635.js +7 -0
  5. package/theme/overrides/M4LExtendedComponents/M4LAccordion.d.ts +2 -4
  6. package/theme/overrides/M4LExtendedComponents/M4LAccountPopover.d.ts +12 -4
  7. package/theme/overrides/M4LExtendedComponents/M4LAppBar.d.ts +2 -4
  8. package/theme/overrides/M4LExtendedComponents/M4LAreasAdmin.d.ts +12728 -5576
  9. package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.d.ts +19 -7
  10. package/theme/overrides/M4LExtendedComponents/M4LAvatar.d.ts +1 -4
  11. package/theme/overrides/M4LExtendedComponents/M4LBadge.d.ts +1 -1
  12. package/theme/overrides/M4LExtendedComponents/M4LDataGrid.d.ts +0 -3
  13. package/theme/overrides/M4LExtendedComponents/M4LDynamicFilter.d.ts +113 -8
  14. package/theme/overrides/M4LExtendedComponents/M4LGridLayout.d.ts +10 -0
  15. package/theme/overrides/M4LExtendedComponents/M4LMasterDetailLayout.d.ts +2 -8
  16. package/theme/overrides/M4LExtendedComponents/M4LNoItemSelected.d.ts +22 -0
  17. package/theme/overrides/M4LExtendedComponents/M4LPager.d.ts +2 -3
  18. package/theme/overrides/M4LExtendedComponents/M4LPopover.d.ts +1 -1
  19. package/theme/overrides/M4LExtendedComponents/M4LScrollBar.d.ts +17 -0
  20. package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts +150 -43
  21. package/theme/overrides/M4LExtendedComponents/M4LSplitLayout.d.ts +31 -0
  22. package/theme/overrides/M4LExtendedComponents/M4LStack.d.ts +14 -0
  23. package/theme/overrides/M4LExtendedComponents/M4LTabs.d.ts +16 -0
  24. package/theme/overrides/M4LExtendedComponents/{index.83dad55c.js → index.a0dbf03e.js} +632 -391
  25. package/theme/overrides/M4LRHFComponents/M4LRHFAutocomplete.d.ts +2 -0
  26. package/theme/overrides/M4LRHFComponents/{index.0e107243.js → index.3df47466.js} +2 -0
  27. package/theme/overrides/MUIComponents/{index.1489876d.js → index.56b4e9b3.js} +9 -9
  28. package/theme/overrides/index.5c0e3013.js +98 -0
  29. package/theme/{palette.d06284f6.js → palette.b6e02e1c.js} +1 -1
  30. package/theme/{shadows.7ecb0e23.js → shadows.386e7ef4.js} +1 -1
  31. package/theme/{typography.b693a0c9.js → typography.248c39d2.js} +4 -4
  32. package/utils/{getColorPresets.826b8bc5.js → getColorPresets.241c5bac.js} +1 -1
  33. package/utils/{getColorState.c9741929.js → getColorState.2c0892d1.js} +18 -18
  34. package/theme/index.5e193e78.js +0 -7
  35. package/theme/overrides/index.03494fe3.js +0 -93
package/theme/overrides/M4LExtendedComponents/{index.83dad55c.js → index.a0dbf03e.js} RENAMED
@@ -10,11 +10,15 @@ const i = (o) => ({
10
10
  padding: "0px",
11
11
  border: "none",
12
12
  overflow: "hidden",
13
- height: "35px",
14
- marginBottom: "8px",
13
+ height: "36px",
15
14
  [o.breakpoints.down("sm")]: {
16
15
  gap: "0px",
17
- height: "auto"
16
+ height: "auto",
17
+ minHeight: "auto",
18
+ overflow: "initial"
19
+ },
20
+ "& .simplebar-content": {
21
+ height: "100%"
18
22
  },
19
23
  "& .M4LDynamicFilter-containerFistRow": {
20
24
  height: "32px",
@@ -44,13 +48,16 @@ const i = (o) => ({
44
48
  display: "flex",
45
49
  flexDirection: "row",
46
50
  gap: "4px",
47
- backgroundColor: o.palette.background.background,
51
+ backgroundColor: o.palette.background.neutral,
48
52
  padding: "4px",
49
53
  height: "100%",
50
54
  alignItems: "center",
51
55
  [o.breakpoints.down("sm")]: {
52
- gap: "12px",
56
+ gap: "8px",
53
57
  padding: "8px"
58
+ },
59
+ "& .M4LIconButton-root .M4LDynamicFilter-filterButton": {
60
+ background: o.palette.state.focus
54
61
  }
55
62
  },
56
63
  "& .M4LDynamicFilter-containerInputFilter": {
@@ -58,14 +65,14 @@ const i = (o) => ({
58
65
  flexDirection: "row",
59
66
  gap: "8px",
60
67
  padding: "4px 6px 4px 4px",
61
- backgroundColor: o.palette.background.background,
68
+ backgroundColor: o.palette.background.neutral,
62
69
  height: "100%",
63
70
  maxWidth: "135px",
64
71
  width: "100%",
65
72
  alignItems: "center",
66
73
  "& > input": {
67
74
  border: "1px solid",
68
- borderColor: o.palette.background.default,
75
+ borderColor: o.palette.state.overdefoult,
69
76
  background: "none",
70
77
  ...o.typography.body,
71
78
  color: o.palette.text.primary,
@@ -81,27 +88,44 @@ const i = (o) => ({
81
88
  BorderRadius: "2px",
82
89
  outline: "none",
83
90
  padding: "0px 4px"
91
+ },
92
+ "& input:hover": {
93
+ border: "1px solid",
94
+ borderColor: o.palette.state.toneOp,
95
+ background: o.palette.state.overdefoult
84
96
  }
85
97
  },
86
98
  "& .M4LDynamicFilter-wrapperApplyedFilters": {
87
99
  borderLeft: "none",
88
- height: "29px",
100
+ height: "30px",
101
+ margin: "0px",
102
+ padding: "0px 4px",
103
+ borderRight: "1px solid",
104
+ borderColor: o.palette.state.default,
89
105
  [o.breakpoints.down("sm")]: {
90
- height: "100%",
106
+ height: "auto",
91
107
  padding: "4px"
92
108
  }
93
109
  },
94
110
  "& .M4LDynamicFilter-containerApplyedFilters": {
95
- padding: "2px"
111
+ padding: "2px",
112
+ gap: "4px",
113
+ height: "auto"
96
114
  },
97
115
  "& .M4LDynamicFilter-applyedFilter": {
116
+ height: "24px",
117
+ display: "flex",
118
+ alignItems: "center",
98
119
  borderRadius: "4px",
99
120
  background: o.palette.state.default,
100
- boxShadow: o.customShadows.z2,
121
+ boxShadow: o.customShadows.z1,
101
122
  color: o.palette.text.secondary,
102
123
  ...o.typography.body,
103
- border: "none",
124
+ border: "1px solid",
104
125
  borderColor: o.palette.state.default,
126
+ [o.breakpoints.down("sm")]: {
127
+ height: "fit-content"
128
+ },
105
129
  "& .css-5ca9fi": {
106
130
  ...o.typography.body
107
131
  },
@@ -151,6 +175,7 @@ const i = (o) => ({
151
175
  "& .M4LDynamicFilter-popoverFilterPaper": {
152
176
  padding: "0px",
153
177
  minWidth: "220px",
178
+ minHeight: "215px",
154
179
  "& .M4LPopover-arrowStyle": {
155
180
  background: "none"
156
181
  },
@@ -494,13 +519,13 @@ const i = (o) => ({
494
519
  M4LPopover: {
495
520
  styleOverrides: {
496
521
  "&.M4LPopover-root": {
497
- zIndex: "unset",
498
522
  ".MuiPaper-root": {
499
523
  background: o.palette.background.default,
500
524
  borderRadius: "6px",
501
525
  padding: "8px",
502
526
  boxShadow: o.customShadows.z3,
503
- width: "auto"
527
+ width: "auto",
528
+ zIndex: "10000"
504
529
  },
505
530
  "& .M4LanguagePopover-containerItems": {
506
531
  "& .M4LanguagePopover-labelItem": {
@@ -541,7 +566,7 @@ const i = (o) => ({
541
566
  }
542
567
  }
543
568
  }
544
- }), x = (o) => ({
569
+ }), g = (o) => ({
545
570
  M4LTypography: {
546
571
  styleOverrides: {
547
572
  ["&.M4LTypography-root"]: {
@@ -553,7 +578,7 @@ const i = (o) => ({
553
578
  }
554
579
  }
555
580
  }
556
- }), g = (o) => ({
581
+ }), x = (o) => ({
557
582
  M4LButton: {
558
583
  styleOverrides: {
559
584
  "&.M4LButton-root": {
@@ -1019,7 +1044,7 @@ const i = (o) => ({
1019
1044
  }
1020
1045
  }
1021
1046
  }
1022
- }), y = (o) => ({
1047
+ }), L = (o) => ({
1023
1048
  M4LSideBar: {
1024
1049
  styleOverrides: {
1025
1050
  "&.M4LSideBar-root": {
@@ -1028,7 +1053,11 @@ const i = (o) => ({
1028
1053
  background: o.palette.background.neutral,
1029
1054
  paddingLeft: "0",
1030
1055
  paddingBottom: "14px",
1031
- boxShadow: o.customShadows.z3,
1056
+ "& .M4LSideBar-subItemActive": {
1057
+ "& .M4LIcon-icon": {
1058
+ backgroundColor: `${o.palette.state.focus}!important`
1059
+ }
1060
+ },
1032
1061
  "&.M4LSideBar-collapsed": {
1033
1062
  "& .M4LSideBar-wrapperSideBar": {
1034
1063
  width: "50px",
@@ -1166,7 +1195,7 @@ const i = (o) => ({
1166
1195
  },
1167
1196
  "&::before": {
1168
1197
  content: '""',
1169
- width: "5px",
1198
+ width: "4px",
1170
1199
  top: "0px",
1171
1200
  bottom: "0px",
1172
1201
  right: "0px",
@@ -1217,25 +1246,35 @@ const i = (o) => ({
1217
1246
  }
1218
1247
  },
1219
1248
  "& .M4LSideBar-containerListSubItem": {
1220
- paddingLeft: "0px",
1221
- "&:hover": {
1222
- background: o.palette.state.overdefoult,
1223
- borderRadius: "4px"
1224
- }
1249
+ paddingLeft: "0px"
1225
1250
  },
1226
1251
  "& .M4LSideBar-navListSubItemRoot": {
1227
1252
  gap: "12px",
1228
1253
  padding: "0px",
1229
1254
  "& .M4LSideBar-navSubItemContentRoot ": {
1230
1255
  width: "100%",
1231
- height: "36px",
1256
+ height: "32px",
1232
1257
  borderRadius: "4px",
1233
1258
  gap: "8px",
1234
1259
  "&.M4LSideBar-subItemCollapseActive": {
1235
1260
  backgroundColor: o.palette.state.active12,
1236
- gap: "8px"
1261
+ gap: "8px",
1262
+ "& .MuiButtonBase-root": {
1263
+ "& .M4LIcon-root": {
1264
+ "& .M4LIcon-icon": {
1265
+ backgroundColor: o.palette.state.focus
1266
+ }
1267
+ }
1268
+ }
1237
1269
  },
1238
- "&.M4LSideBar-subItemActive": {
1270
+ "& .M4LSideBar-subItemActive": {
1271
+ "& .MuiButtonBase-root": {
1272
+ "& .M4LIcon-root": {
1273
+ "& .M4LIcon-icon": {
1274
+ backgroundColor: o.palette.state.focus
1275
+ }
1276
+ }
1277
+ },
1239
1278
  "& .M4LSideBar-navSubItemContentBullet": {
1240
1279
  height: "14px",
1241
1280
  borderRadius: "4px",
@@ -1282,14 +1321,16 @@ const i = (o) => ({
1282
1321
  },
1283
1322
  "& .M4LSideBar-collapseButton": {
1284
1323
  display: "flex",
1285
- paddingTop: "14px",
1324
+ paddingTop: "12px",
1286
1325
  borderTop: "2px solid",
1287
- borderColor: o.palette.state.overdefoult,
1326
+ borderColor: o.palette.state.default,
1288
1327
  justifyContent: "center",
1289
1328
  marginRight: "14px",
1290
1329
  marginLeft: "14px",
1291
1330
  gap: "20px",
1292
1331
  alignItems: "center",
1332
+ height: "48px",
1333
+ minHeight: "48px",
1293
1334
  "& .M4LSideBar-containerLogoButton": {
1294
1335
  display: "flex",
1295
1336
  gap: "14px",
@@ -1297,7 +1338,7 @@ const i = (o) => ({
1297
1338
  },
1298
1339
  "& .M4LSideBar-containerLogoButtonLogo": {
1299
1340
  width: "120px",
1300
- height: "40px",
1341
+ height: "32px",
1301
1342
  "& .M4LSideBar-containerLogoButtonIcon": {
1302
1343
  display: "flex",
1303
1344
  alignItems: "center"
@@ -1344,8 +1385,15 @@ const i = (o) => ({
1344
1385
  textWrap: "nowrap"
1345
1386
  }
1346
1387
  },
1347
- "&.M4LSideBar-subItemActive": {
1388
+ "& .M4LSideBar-subItemActive": {
1348
1389
  height: "fit-content",
1390
+ "& .MuiButtonBase-root": {
1391
+ "& .M4LIcon-root": {
1392
+ "& .M4LIcon-icon": {
1393
+ backgroundColor: o.palette.state.focus
1394
+ }
1395
+ }
1396
+ },
1349
1397
  "& .M4LSideBar-navSubItemContentBullet": {
1350
1398
  height: "14px",
1351
1399
  borderRadius: "10px",
@@ -1375,22 +1423,21 @@ const i = (o) => ({
1375
1423
  display: "flex",
1376
1424
  flexDirection: "column",
1377
1425
  "& .M4LSideBar-containerSideBarLogo": {
1378
- marginRight: "14px",
1379
- marginTop: "0px",
1426
+ display: "flex",
1427
+ justifyContent: "flex-start",
1428
+ marginTop: "12px",
1380
1429
  "& .M4LSideBar-containerLogo": {
1381
- height: "128px",
1382
1430
  display: "flex",
1383
- flexDirection: "column",
1384
1431
  justifyContent: "center",
1385
1432
  alignItems: "center",
1386
1433
  fitContent: "100%",
1387
1434
  boxSizing: "contentBox",
1388
- paddingTop: "24px",
1389
- paddingBottom: "28px",
1390
- gap: "12px",
1435
+ paddingTop: "8px",
1436
+ paddingBottom: "8px",
1437
+ gap: "16px",
1438
+ paddingLeft: "24px",
1391
1439
  "& .M4LTypography-root": {
1392
1440
  display: "flex",
1393
- justifyContent: "center",
1394
1441
  width: "100%",
1395
1442
  "& .MuiTypography-root": {
1396
1443
  with: "100%",
@@ -1404,7 +1451,9 @@ const i = (o) => ({
1404
1451
  background: o.palette.background.default,
1405
1452
  boxShadow: o.customShadows.z3,
1406
1453
  padding: "6px",
1407
- borderRadius: "6px"
1454
+ borderRadius: "6px",
1455
+ minWidth: "50px !important",
1456
+ minHeight: "50px !important"
1408
1457
  }
1409
1458
  }
1410
1459
  },
@@ -1416,15 +1465,14 @@ const i = (o) => ({
1416
1465
  "& .M4LSideBar-contentGroupsLine": {
1417
1466
  display: "flex",
1418
1467
  height: "2px",
1419
- marginRight: "8px",
1420
- marginLeft: "8px",
1421
- backgroundColor: o.palette.background.background
1468
+ marginRight: "14px",
1469
+ marginLeft: "14px",
1470
+ backgroundColor: "none"
1422
1471
  },
1423
1472
  "& .M4LSideBar-wrapperGroup": {
1424
1473
  height: "100%",
1425
- paddingLeft: "16px",
1474
+ paddingLeft: "10px",
1426
1475
  "& .M4LSideBar-wrapperGroupTitle": {
1427
- padding: "20px",
1428
1476
  height: "60px",
1429
1477
  "& .M4LTypography-root": {
1430
1478
  display: "flex",
@@ -1444,44 +1492,47 @@ const i = (o) => ({
1444
1492
  flexDirection: "column",
1445
1493
  padding: "0px 0px 8px 0px",
1446
1494
  gap: "4px",
1447
- "&.M4LSideBar-navItemMainRoot": {
1448
- borderRadius: "4px 0px 0px 4px",
1449
- "& .M4LSideBar-navItemMainRoot": {
1450
- backgroundColor: "transparent",
1451
- "&:hover": {
1452
- background: o.palette.state.default
1453
- }
1495
+ "& .M4LSideBar-navItemMainRoot": {
1496
+ backgroundColor: "transparent",
1497
+ borderRadius: "4px",
1498
+ "&:hover": {
1499
+ background: o.palette.state.default,
1500
+ cursor: "pointer"
1454
1501
  }
1455
1502
  },
1456
1503
  "&.M4LSideBar-itemMainActive": {
1457
- color: o.palette.state.active12,
1458
- gap: "4px",
1504
+ borderRadius: "4px",
1459
1505
  "& .M4LSideBar-navItemMainRoot": {
1460
1506
  background: o.palette.state.active12,
1461
- padding: "40px",
1462
1507
  "&:hover": {
1463
- background: t(o.palette.state.active || "#fff", 0.18)
1508
+ background: t(o.palette.state.active || "#fff", 0.24),
1509
+ cursor: "pointer"
1464
1510
  }
1465
1511
  },
1466
1512
  "& .M4LSideBar-navItemRootContent": {
1467
1513
  "& .M4LSideBar-navItemRootContentIconTypo": {
1468
- display: "flex",
1469
- gap: "8px",
1470
- width: "100%",
1471
- alignItems: "center",
1472
1514
  "& .M4LIcon-icon": {
1473
1515
  backgroundColor: o.palette.state.focus
1474
1516
  },
1475
- "& .MuiTypography-root": {
1476
- color: o.palette.state.focus
1517
+ "& .M4LTypography-root": {
1518
+ "& .MuiTypography-root": {
1519
+ color: o.palette.state.focus
1520
+ }
1477
1521
  },
1478
1522
  "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
1479
1523
  backgroundColor: o.palette.state.focus
1480
1524
  }
1481
1525
  },
1526
+ "& .M4LSideBar-arrowIconRoot": {
1527
+ "& .M4LIcon-root": {
1528
+ "& .M4LIcon-icon": {
1529
+ backgroundColor: o.palette.state.focus
1530
+ }
1531
+ }
1532
+ },
1482
1533
  "&::before": {
1483
1534
  content: '""',
1484
- width: "5px",
1535
+ width: "4px",
1485
1536
  top: "0px",
1486
1537
  bottom: "0px",
1487
1538
  right: "0px",
@@ -1502,31 +1553,55 @@ const i = (o) => ({
1502
1553
  gap: "8px",
1503
1554
  width: "100%",
1504
1555
  "& .M4LIcon-icon": {
1505
- backgroundColor: o.palette.text.secondary
1556
+ backgroundColor: o.palette.text.primary,
1557
+ width: "18px",
1558
+ height: "18px"
1506
1559
  },
1507
- "& .MuiTypography-root": {
1508
- ...o.typography.paragraphDens,
1509
- color: o.palette.text.secondary,
1510
- textWrap: "nowrap",
1511
- textOverflow: "ellipsis",
1512
- display: "block",
1513
- overflow: "hidden"
1560
+ "& .M4LTypography-root": {
1561
+ display: "flex",
1562
+ flexGrow: "1",
1563
+ overflow: "hidden",
1564
+ "& .MuiTypography-root": {
1565
+ ...o.typography.paragraph,
1566
+ color: o.palette.text.primary,
1567
+ textWrap: "nowrap",
1568
+ textOverflow: "ellipsis",
1569
+ display: "block",
1570
+ overflow: "hidden"
1571
+ }
1514
1572
  },
1515
1573
  "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
1516
- backgroundColor: o.palette.text.secondary
1574
+ backgroundColor: o.palette.text.primary
1575
+ }
1576
+ },
1577
+ "& .M4LSideBar-arrowIconRoot": {
1578
+ "& .M4LIcon-root": {
1579
+ "& .M4LIcon-icon": {
1580
+ background: o.palette.text.primary
1581
+ }
1517
1582
  }
1518
1583
  }
1519
1584
  },
1585
+ "& .M4LSideBar-containerListSubItem": {
1586
+ paddingLeft: "0px"
1587
+ },
1520
1588
  "& .M4LSideBar-navListSubItemRoot": {
1589
+ gap: "12px",
1590
+ padding: "0px",
1521
1591
  "& .M4LSideBar-navSubItemContentRoot ": {
1592
+ width: "100%",
1593
+ height: "32px",
1594
+ borderRadius: "4px",
1595
+ gap: "8px",
1522
1596
  "&.M4LSideBar-subItemCollapseActive": {
1523
- backgroundColor: o.palette.state.active12
1524
- },
1525
- "&.M4LSideBar-subItemActive": {
1526
- "& .M4LSideBar-navSubItemContentBullet": {
1527
- height: "14px",
1528
- borderRadius: "10px",
1529
- backgroundColor: o.palette.state.focus
1597
+ backgroundColor: o.palette.state.active12,
1598
+ gap: "8px",
1599
+ "& .MuiButtonBase-root": {
1600
+ "& .M4LIcon-root": {
1601
+ "& .M4LIcon-icon": {
1602
+ backgroundColor: o.palette.state.focus
1603
+ }
1604
+ }
1530
1605
  }
1531
1606
  },
1532
1607
  "&:hover": {
@@ -1535,7 +1610,7 @@ const i = (o) => ({
1535
1610
  },
1536
1611
  "& .M4LSideBar-navSubItemContentRoot": {
1537
1612
  gap: "12px",
1538
- margin: "0px 0px 1px 0px",
1613
+ margin: "0px 0px 0px 0px",
1539
1614
  padding: "16px",
1540
1615
  "& .M4LSideBar-navSubItemContentBullet": {
1541
1616
  minWidth: "5px",
@@ -1546,7 +1621,6 @@ const i = (o) => ({
1546
1621
  "& .M4LTypography-root": {
1547
1622
  display: "flex",
1548
1623
  width: "100%",
1549
- flexGrow: "1",
1550
1624
  "& .MuiTypography-root": {
1551
1625
  ...o.typography.paragraph,
1552
1626
  color: o.palette.text.primary,
@@ -1559,19 +1633,45 @@ const i = (o) => ({
1559
1633
  }
1560
1634
  },
1561
1635
  "& .MuiCollapse-root": {
1562
- marginLeft: "12px"
1636
+ marginLeft: "18px"
1563
1637
  }
1564
1638
  }
1565
1639
  },
1566
1640
  "& .M4LIcon-root .M4LIcon-icon": {
1567
- backgroundColor: o.palette.text.disabled
1641
+ backgroundColor: o.palette.text.primary
1642
+ }
1643
+ },
1644
+ "& .M4LSideBar-collapseButton": {
1645
+ display: "flex",
1646
+ paddingTop: "12px",
1647
+ borderTop: "2px solid",
1648
+ borderColor: o.palette.state.default,
1649
+ justifyContent: "center",
1650
+ marginRight: "14px",
1651
+ marginLeft: "14px",
1652
+ gap: "20px",
1653
+ alignItems: "center",
1654
+ height: "48px",
1655
+ minHeight: "48px",
1656
+ "& .M4LSideBar-containerLogoButton": {
1657
+ display: "flex",
1658
+ gap: "14px",
1659
+ width: "120px"
1660
+ },
1661
+ "& .M4LSideBar-containerLogoButtonLogo": {
1662
+ width: "120px",
1663
+ height: "32px",
1664
+ "& .M4LSideBar-containerLogoButtonIcon": {
1665
+ display: "flex",
1666
+ alignItems: "center"
1667
+ }
1568
1668
  }
1569
1669
  }
1570
1670
  }
1571
1671
  }
1572
1672
  }
1573
1673
  }
1574
- }), L = (o) => ({
1674
+ }), y = (o) => ({
1575
1675
  M4LAreasAdmin: {
1576
1676
  styleOverrides: {
1577
1677
  "&.M4LAreasAdmin-root": {
@@ -1585,223 +1685,277 @@ const i = (o) => ({
1585
1685
  alignItems: "center",
1586
1686
  background: o.palette.background.default,
1587
1687
  justifyContent: "space-between",
1588
- width: "fit-content",
1688
+ width: "70%",
1589
1689
  maxWidth: "fit-content",
1590
1690
  gap: "8px",
1591
1691
  border: "1px solid",
1592
1692
  borderColor: "transparent",
1593
- boxShadow: o.customShadows.z2,
1594
- [o.breakpoints.down("sm")]: {
1595
- boxShadow: o.customShadows.z2
1596
- },
1597
- "&.M4LAreasAdmin-isFocus": {
1598
- border: "1px solid",
1599
- borderColor: o.palette.primary.main
1600
- },
1693
+ boxShadow: o.customShadows.z1,
1601
1694
  [o.breakpoints.down("sm")]: {
1602
- height: "auto",
1603
- background: o.palette.background.default,
1604
- boxShadow: o.customShadows.z2,
1695
+ boxShadow: o.customShadows.z1,
1696
+ paddingRight: "0px",
1605
1697
  width: "100%",
1606
1698
  maxWidth: "100%",
1607
- paddingRight: "0px",
1608
- borderRadius: "4px"
1609
- },
1610
- "*::-webkit-scrollbar": {
1611
- width: "8px",
1612
- maxWidth: "12px",
1613
- height: "6px",
1614
- background: o.palette.state.default,
1615
- position: "absolute",
1616
- zIndex: "10000"
1617
- },
1618
- "*::-webkit-scrollbar-thumb": {
1619
- background: o.palette.text.disabled,
1620
- position: "absolute",
1621
- borderRadius: "4px",
1622
- zIndex: "10000"
1699
+ gap: "0px"
1623
1700
  },
1624
- "& .M4LAreasAdmin-areaContainerChipsIcon": {
1701
+ "& .M4LAreasAdmin-rootContent": {
1625
1702
  display: "flex",
1626
- flexDirection: "row",
1627
- width: "100%",
1703
+ width: "fit-content",
1704
+ maxWidth: "100%",
1628
1705
  overflow: "auto",
1629
- height: "36px",
1630
- borderRight: "1px solid",
1631
- borderColor: o.palette.state.overdefoult,
1706
+ justifyContent: "center",
1707
+ alignItems: "center",
1708
+ gap: "8px",
1632
1709
  [o.breakpoints.down("sm")]: {
1633
- background: "none",
1634
- borderRight: "none",
1635
- paddingLeft: "0px"
1710
+ gap: "0px"
1636
1711
  },
1637
- "& .M4LAreasAdmin-areaIconLayer": {
1638
- background: o.palette.background.neutral,
1712
+ "&.M4LAreasAdmin-isFocus": {
1713
+ border: "1px solid",
1714
+ borderColor: o.palette.primary.main,
1715
+ gap: "0px"
1716
+ },
1717
+ [o.breakpoints.down("sm")]: {
1718
+ height: "auto",
1719
+ background: o.palette.background.default,
1639
1720
  boxShadow: o.customShadows.z2,
1721
+ width: "100%",
1722
+ maxWidth: "100%",
1723
+ paddingRight: "0px",
1724
+ borderRadius: "4px",
1725
+ gap: "0px"
1726
+ },
1727
+ "*::-webkit-scrollbar": {
1728
+ width: "8px",
1729
+ maxWidth: "12px",
1730
+ height: "6px",
1731
+ background: o.palette.state.default,
1732
+ position: "absolute",
1733
+ zIndex: "10000"
1734
+ },
1735
+ "*::-webkit-scrollbar-thumb": {
1736
+ background: o.palette.text.disabled,
1737
+ position: "absolute",
1738
+ borderRadius: "4px",
1739
+ zIndex: "10000"
1740
+ },
1741
+ "& .M4LAreasAdmin-areaContainerChipsIcon": {
1640
1742
  display: "flex",
1641
- justifyContent: "center",
1642
- width: "36px",
1743
+ flexDirection: "row",
1744
+ width: "100%",
1745
+ overflow: "auto",
1643
1746
  height: "36px",
1747
+ borderRight: "1px solid",
1748
+ paddingLeft: "4px",
1749
+ borderColor: o.palette.state.overdefoult,
1644
1750
  [o.breakpoints.down("sm")]: {
1645
- height: "36px",
1646
- width: "36px"
1751
+ background: "none",
1752
+ borderRight: "none",
1753
+ paddingLeft: "0px"
1647
1754
  },
1648
- "& .M4LIcon-root": {
1755
+ "& .M4LAreasAdmin-areaIconLayer": {
1756
+ background: o.palette.background.neutral,
1757
+ boxShadow: o.customShadows.z2,
1758
+ display: "flex",
1759
+ justifyContent: "center",
1649
1760
  width: "36px",
1650
- height: "100%"
1651
- }
1652
- },
1653
- "& .M4LAreasAdmin-areaContainerChips": {
1654
- display: "flex",
1655
- overflow: "auto",
1656
- gap: "8px",
1657
- paddingLeft: "0px",
1658
- paddingRight: "0PX",
1659
- width: "fit-content",
1660
- height: "auto",
1661
- alignItems: "center",
1662
- [o.breakpoints.down("sm")]: {
1663
- background: "none"
1761
+ height: "36px",
1762
+ [o.breakpoints.down("sm")]: {
1763
+ height: "36px",
1764
+ width: "36px"
1765
+ },
1766
+ "& .M4LIcon-root": {
1767
+ width: "36px",
1768
+ height: "100%"
1769
+ }
1664
1770
  },
1665
- "& .M4LAreasAdmin-areaContainerContentChips": {
1771
+ "& .M4LAreasAdmin-areaContainerChips": {
1666
1772
  display: "flex",
1667
- flexDirection: "row",
1773
+ overflow: "auto",
1774
+ gap: "8px",
1775
+ paddingLeft: "0px",
1776
+ paddingRight: "0PX",
1668
1777
  width: "fit-content",
1669
- justifyContent: "space-between",
1778
+ height: "auto",
1779
+ alignItems: "center",
1670
1780
  [o.breakpoints.down("sm")]: {
1671
- justifyContent: "space-between",
1672
- width: "100%",
1673
- background: "none"
1781
+ background: "none",
1782
+ overflow: "auto hidden",
1783
+ width: "100%"
1674
1784
  },
1675
- "& .css-jjtu05": {
1676
- "& .css-16ugaun": {},
1677
- "& .simplebar-wrapper": {
1678
- width: "fit-content",
1679
- maxWidth: "100%",
1680
- "& .simplebar-height-auto-observer-wrapper": {
1785
+ "& .M4LAreasAdmin-areaContainerContentChips": {
1786
+ display: "flex",
1787
+ flexDirection: "row",
1788
+ width: "fit-content",
1789
+ justifyContent: "space-between",
1790
+ [o.breakpoints.down("sm")]: {
1791
+ justifyContent: "space-between",
1792
+ width: "100%",
1793
+ background: "none"
1794
+ },
1795
+ "& .css-jjtu05": {
1796
+ "& .css-16ugaun": {},
1797
+ "& .simplebar-wrapper": {
1681
1798
  width: "fit-content",
1682
1799
  maxWidth: "100%",
1683
- overflow: "auto"
1684
- },
1685
- "& .simplebar-mask": {
1686
- "& .simplebar-offset": {
1687
- "& .simplebar-content-wrapper": {
1688
- width: "fit-content",
1689
- maxWidth: "100%",
1690
- overflow: "auto",
1691
- "& .simplebar-content": {
1800
+ "& .simplebar-height-auto-observer-wrapper": {
1801
+ width: "fit-content",
1802
+ maxWidth: "100%",
1803
+ overflow: "auto"
1804
+ },
1805
+ "& .simplebar-mask": {
1806
+ "& .simplebar-offset": {
1807
+ "& .simplebar-content-wrapper": {
1692
1808
  width: "fit-content",
1809
+ maxWidth: "100%",
1693
1810
  overflow: "auto",
1694
- gap: "4px"
1811
+ "& .simplebar-content": {
1812
+ width: "fit-content",
1813
+ overflow: "auto",
1814
+ gap: "4px"
1815
+ }
1695
1816
  }
1696
1817
  }
1697
1818
  }
1698
1819
  }
1699
- }
1700
- },
1701
- "& .simplebar-content-wrapper": {
1702
- width: "fit-content",
1703
- "& .M4LAreasAdmin-areaChipRoot ": {
1704
- margin: "0px",
1705
- borderRadius: "4px",
1706
- overflow: "hidden",
1820
+ },
1821
+ "& .simplebar-content-wrapper": {
1707
1822
  width: "fit-content",
1708
- [o.breakpoints.down("sm")]: {
1709
- background: "none",
1710
- border: "none",
1711
- boxShadow: "none"
1823
+ "& .M4LAreasAdmin-areaChipRoot ": {
1824
+ margin: "0px",
1825
+ borderRadius: "4px",
1826
+ overflow: "hidden",
1827
+ width: "fit-content",
1828
+ [o.breakpoints.down("sm")]: {
1829
+ background: "none",
1830
+ border: "none",
1831
+ boxShadow: "none"
1832
+ }
1712
1833
  }
1713
- }
1714
- },
1715
- "& .M4LAreasAdmin-areaChipMobileRoot": {
1716
- display: "flex",
1717
- overflow: "hidden",
1718
- width: "100%",
1719
- backgroundColor: o.palette.state.default,
1720
- boxShadow: o.customShadows.z2,
1721
- borderTop: "1.5px solid",
1722
- borderColor: o.palette.state.borderTop,
1723
- borderRadius: "4px",
1724
- [o.breakpoints.down("sm")]: {
1725
- backgroundColor: o.palette.background.default,
1726
- boxShadow: o.customShadows.z1
1727
- },
1728
- "&:hover": {
1729
- background: o.palette.state.active12
1730
1834
  },
1731
- "& .M4LAreasAdmin-areaChipRoot ": {
1732
- margin: "0px",
1733
- borderRadius: "4px 0px 0px 4px",
1835
+ "& .M4LAreasAdmin-areaChipMobileRoot": {
1836
+ display: "flex",
1734
1837
  overflow: "hidden",
1735
1838
  width: "100%",
1736
- position: "relative",
1839
+ backgroundColor: o.palette.state.default,
1840
+ boxShadow: o.customShadows.z2,
1841
+ borderTop: "1.5px solid",
1842
+ borderColor: o.palette.state.borderTop,
1843
+ borderRadius: "4px",
1844
+ [o.breakpoints.down("sm")]: {
1845
+ backgroundColor: o.palette.background.default,
1846
+ boxShadow: o.customShadows.z1
1847
+ },
1848
+ "&:hover": {
1849
+ background: o.palette.state.active12
1850
+ },
1851
+ "& .M4LAreasAdmin-areaChipRoot ": {
1852
+ margin: "0px",
1853
+ borderRadius: "4px 0px 0px 4px",
1854
+ overflow: "hidden",
1855
+ width: "100%",
1856
+ position: "relative",
1857
+ [o.breakpoints.down("sm")]: {
1858
+ background: "none",
1859
+ border: "none",
1860
+ boxShadow: "none"
1861
+ }
1862
+ },
1863
+ "& .M4LAreasAdmin-selected .": {
1864
+ [o.breakpoints.down("sm")]: {
1865
+ background: "none"
1866
+ }
1867
+ }
1868
+ },
1869
+ "& .M4LAreasAdmin-areaChipMobileIconContainer": {
1870
+ display: "flex",
1871
+ width: "fit-content",
1872
+ borderRadius: "0px 0px 0px 0px",
1873
+ boxShadow: o.customShadows.z2,
1874
+ ...o.typography.body,
1875
+ color: o.palette.text.primary,
1737
1876
  [o.breakpoints.down("sm")]: {
1738
- background: "none",
1739
- border: "none",
1740
1877
  boxShadow: "none"
1878
+ },
1879
+ "& .M4LIconButton-root": {
1880
+ background: "transparent",
1881
+ backgroundColor: "transparent",
1882
+ "& .M4LIcon-icon": {}
1741
1883
  }
1742
1884
  },
1743
- "& .M4LAreasAdmin-selected .": {
1744
- [o.breakpoints.down("sm")]: {
1745
- background: "none"
1746
- }
1747
- }
1748
- },
1749
- "& .M4LAreasAdmin-areaChipMobileIconContainer": {
1750
- display: "flex",
1751
- width: "fit-content",
1752
- borderRadius: "0px 0px 0px 0px",
1753
- boxShadow: o.customShadows.z2,
1754
- ...o.typography.body,
1755
- color: o.palette.text.primary,
1756
- "& .M4LIconButton-root": {
1757
- background: "transparent",
1758
- backgroundColor: "transparent",
1759
- "& .M4LIcon-icon": {}
1760
- }
1761
- },
1762
- "& .MuiBox-root": {
1763
- display: "flex",
1764
- alignItems: "center",
1765
- height: "100%"
1766
- },
1767
- "& .simplebar-content": {
1768
- display: "flex",
1769
- alignItems: "center"
1770
- },
1771
- "& .M4LAreasAdmin-areaChipRoot ": {
1772
- display: "flex",
1773
- boxShadow: o.customShadows.z1,
1774
- borderRadius: "4px 4px 4px 4px",
1775
- marginRight: "8px",
1776
- height: "22px",
1777
- width: "fit-content",
1778
- gap: "8px",
1779
- paddingLeft: "8px",
1780
- alignItems: "center",
1781
- border: "1px solid",
1782
- borderColor: o.palette.state.default,
1783
- background: o.palette.state.default,
1784
- [o.breakpoints.down("sm")]: {
1785
- background: "none",
1786
- border: "none",
1787
- borderColor: "none",
1788
- boxShadow: "none"
1789
- },
1790
- "& .M4LAreasAdmin-areaContainerChipEditButton": {
1885
+ "& .MuiBox-root": {
1791
1886
  display: "flex",
1792
- width: "fit-content"
1887
+ alignItems: "center",
1888
+ height: "100%"
1793
1889
  },
1794
- [o.breakpoints.down("sm")]: {
1795
- height: "auto"
1890
+ "& .simplebar-content": {
1891
+ display: "flex",
1892
+ alignItems: "center"
1796
1893
  },
1797
- "&.M4LAreasAdmin-selected": {
1798
- background: o.palette.state.active,
1799
- ...o.typography.body,
1800
- color: o.palette.text.primary,
1894
+ "& .M4LAreasAdmin-areaChipRoot ": {
1895
+ display: "flex",
1896
+ boxShadow: o.customShadows.z1,
1897
+ borderRadius: "4px 4px 4px 4px",
1898
+ marginRight: "8px",
1801
1899
  height: "22px",
1900
+ width: "fit-content",
1901
+ gap: "8px",
1902
+ paddingLeft: "8px",
1903
+ alignItems: "center",
1904
+ border: "1px solid",
1905
+ borderColor: o.palette.state.default,
1906
+ background: o.palette.state.default,
1907
+ [o.breakpoints.down("sm")]: {
1908
+ background: "none",
1909
+ border: "none",
1910
+ borderColor: "none",
1911
+ boxShadow: "none"
1912
+ },
1913
+ "& .M4LAreasAdmin-areaContainerChipEditButton": {
1914
+ display: "flex",
1915
+ width: "fit-content"
1916
+ },
1802
1917
  [o.breakpoints.down("sm")]: {
1803
- height: "auto",
1804
- background: "none"
1918
+ height: "auto"
1919
+ },
1920
+ "&.M4LAreasAdmin-selected": {
1921
+ background: o.palette.state.active,
1922
+ ...o.typography.body,
1923
+ color: o.palette.text.primary,
1924
+ height: "22px",
1925
+ [o.breakpoints.down("sm")]: {
1926
+ height: "auto",
1927
+ background: "none"
1928
+ },
1929
+ "& .M4LAreasAdmin-areaChipTitle": {
1930
+ backgroundColor: "transparent",
1931
+ border: "none",
1932
+ textWrap: "nowrap",
1933
+ width: "auto",
1934
+ display: "flex",
1935
+ alignItems: "center",
1936
+ color: o.palette.patronus?.marbleLight[10],
1937
+ ...o.typography.action,
1938
+ [o.breakpoints.down("sm")]: {
1939
+ display: "inline",
1940
+ fontSize: "14px",
1941
+ textOverflow: "ellipsis",
1942
+ overflow: "hidden",
1943
+ whiteSpace: "nowrap",
1944
+ flex: "1",
1945
+ color: o.palette.text.primary
1946
+ }
1947
+ },
1948
+ "& .M4LIconButton-root": {
1949
+ [o.breakpoints.down("sm")]: {
1950
+ color: o.palette.text.primary
1951
+ },
1952
+ "& .M4LIcon-icon": {
1953
+ backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
1954
+ [o.breakpoints.down("sm")]: {
1955
+ color: o.palette.text.primary
1956
+ }
1957
+ }
1958
+ }
1805
1959
  },
1806
1960
  "& .M4LAreasAdmin-areaChipTitle": {
1807
1961
  backgroundColor: "transparent",
@@ -1810,77 +1964,53 @@ const i = (o) => ({
1810
1964
  width: "auto",
1811
1965
  display: "flex",
1812
1966
  alignItems: "center",
1813
- color: o.palette.patronus?.marbleLight[10],
1814
- ...o.typography.action,
1815
- [o.breakpoints.down("sm")]: {
1816
- display: "inline",
1817
- fontSize: "14px",
1818
- textOverflow: "ellipsis",
1819
- overflow: "hidden",
1820
- whiteSpace: "nowrap",
1821
- flex: "1",
1822
- color: o.palette.text.primary
1823
- }
1967
+ color: o.palette.text.secondary,
1968
+ ...o.typography.body
1824
1969
  },
1825
1970
  "& .M4LIconButton-root": {
1971
+ display: "flex",
1972
+ justifyContent: "center",
1973
+ width: "20px",
1974
+ height: "20px",
1826
1975
  [o.breakpoints.down("sm")]: {
1827
1976
  color: o.palette.text.primary
1828
1977
  },
1829
- "& .M4LIcon-icon": {
1830
- backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
1978
+ "&.M4LIconButton-variantPrimary": {
1979
+ background: o.palette.state.active,
1831
1980
  [o.breakpoints.down("sm")]: {
1832
1981
  color: o.palette.text.primary
1833
1982
  }
1834
1983
  }
1835
1984
  }
1836
- },
1837
- "& .M4LAreasAdmin-areaChipTitle": {
1838
- backgroundColor: "transparent",
1839
- border: "none",
1840
- textWrap: "nowrap",
1841
- width: "auto",
1842
- display: "flex",
1843
- alignItems: "center",
1844
- color: o.palette.text.secondary,
1845
- ...o.typography.body
1846
- },
1847
- "& .M4LIconButton-root": {
1848
- display: "flex",
1849
- justifyContent: "center",
1850
- width: "20px",
1851
- height: "20px",
1852
- [o.breakpoints.down("sm")]: {
1853
- color: o.palette.text.primary
1854
- },
1855
- "&.M4LIconButton-variantPrimary": {
1856
- background: o.palette.state.active,
1857
- [o.breakpoints.down("sm")]: {
1858
- color: o.palette.text.primary
1859
- }
1860
- }
1861
1985
  }
1862
1986
  }
1863
1987
  }
1864
- }
1865
- },
1866
- "& .M4LAreasAdmin-areasAddButton": {
1867
- backgroundColor: `${o.palette.state.active}!important`,
1868
- "& .M4LIcon-icon": {
1869
- backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
1870
- [o.breakpoints.down("sm")]: {
1871
- color: o.palette.text.primary
1988
+ },
1989
+ "& .M4LAreasAdmin-areasPopoverListWindowsIcon": {
1990
+ boxShadow: o.customShadows.z1,
1991
+ borderLeft: "1px solid",
1992
+ borderRadius: "0px 4px 4px 0px",
1993
+ borderColor: o.palette.background.background
1994
+ },
1995
+ "& .M4LAreasAdmin-areasAddButton": {
1996
+ backgroundColor: `${o.palette.state.active}!important`,
1997
+ "& .M4LIcon-icon": {
1998
+ backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
1999
+ [o.breakpoints.down("sm")]: {
2000
+ color: o.palette.text.primary
2001
+ }
1872
2002
  }
1873
- }
1874
- },
1875
- "&.M4LAreasAdmin-isMobile": {
1876
- overflow: "hidden",
1877
- boxShadow: o.customShadows.z1,
1878
- width: "100%",
1879
- "& .M4LAreasAdmin-areaContainerChips": {
1880
- width: "100%",
2003
+ },
2004
+ "&.M4LAreasAdmin-isMobile": {
1881
2005
  overflow: "hidden",
1882
- background: "none",
1883
- boxShadow: "none"
2006
+ boxShadow: o.customShadows.z1,
2007
+ width: "100%",
2008
+ "& .M4LAreasAdmin-areaContainerChips": {
2009
+ width: "100%",
2010
+ overflow: "hidden",
2011
+ background: "none",
2012
+ boxShadow: "none"
2013
+ }
1884
2014
  }
1885
2015
  }
1886
2016
  }
@@ -1925,9 +2055,16 @@ const i = (o) => ({
1925
2055
  test: "root",
1926
2056
  background: o.palette.background.background,
1927
2057
  "& .M4LAreasViewer-areaGridLayout": {
2058
+ "& .M4LAreasViewer-resizeHandle": {
2059
+ test: "test",
2060
+ "& .M4LImage-root .M4LImage-img": {
2061
+ opacity: "0.5",
2062
+ filter: "invert(0.4) hue-rotate(20deg) saturate(1000%)"
2063
+ }
2064
+ },
1928
2065
  "& .M4LAreasViewer-windowRoot": {
1929
- background: o.palette.state.default,
1930
- border: "none",
2066
+ background: o.palette.background.neutral,
2067
+ border: "1px solid transparent",
1931
2068
  boxShadow: o.customShadows.z2,
1932
2069
  borderRadius: "4px",
1933
2070
  display: "flex",
@@ -1958,7 +2095,7 @@ const i = (o) => ({
1958
2095
  minHeight: "36px",
1959
2096
  borderRadius: "4px",
1960
2097
  border: "none",
1961
- boxShadow: o.customShadows.z2,
2098
+ boxShadow: o.customShadows.z1,
1962
2099
  borderTop: "1px solid",
1963
2100
  borderColor: o.palette.state.default,
1964
2101
  "& .M4LAreasViewer-windowHeaderContent": {
@@ -2100,13 +2237,15 @@ const i = (o) => ({
2100
2237
  }
2101
2238
  },
2102
2239
  "& .M4LAreasViewer-windowContent": {
2103
- margin: "8px 6px 6px 6px",
2104
- background: "none",
2105
- borderRadius: "4px",
2240
+ padding: "8px",
2241
+ backgroundColor: o.palette.background.background,
2106
2242
  display: "flex",
2107
2243
  flexDirection: "column",
2108
2244
  alignItems: "center",
2109
- justifyContent: "center"
2245
+ justifyContent: "center",
2246
+ width: "100%",
2247
+ flex: "1",
2248
+ overflow: "hidden"
2110
2249
  },
2111
2250
  "&.M4LAreasViewer-selectedWindow": {
2112
2251
  border: "1px solid",
@@ -2187,7 +2326,7 @@ const i = (o) => ({
2187
2326
  }
2188
2327
  },
2189
2328
  "& .M4LAreasViewer-windowRootContainer": {
2190
- background: o.palette.background.background,
2329
+ background: o.palette.background.neutral,
2191
2330
  borderRadius: "4px",
2192
2331
  "& .M4LAreasViewer-windowHeader": {
2193
2332
  height: "28px",
@@ -2211,11 +2350,10 @@ const i = (o) => ({
2211
2350
  },
2212
2351
  "& .M4LAreasViewer-windowRoot": {
2213
2352
  padding: "4px",
2214
- background: o.palette.state.default,
2353
+ background: o.palette.background.neutral,
2215
2354
  borderRadius: "4px",
2216
2355
  border: "1px solid",
2217
2356
  borderColor: o.palette.state.default,
2218
- backdropFilter: "blur(8px)",
2219
2357
  "&:not(.M4LAreasViewer-loading)": {
2220
2358
  "& .M4LinearProgressIndeterminate-root": {
2221
2359
  opacity: 0
@@ -2283,19 +2421,23 @@ const i = (o) => ({
2283
2421
  "& .M4LAreasViewer-panelWindowsRoot": {
2284
2422
  background: o.palette.background.neutral,
2285
2423
  boxShadow: o.customShadows.z2,
2286
- borderRadius: "4px",
2287
2424
  display: "flex",
2288
2425
  alignItems: "center",
2289
- margin: "4px",
2290
- padding: "4px",
2426
+ padding: "10px",
2291
2427
  gap: "8px",
2292
2428
  "& .M4LAreasViewer-panelWindowsButtonContainer": {
2293
2429
  borderRadius: "2px",
2294
2430
  background: o.palette.background.default,
2295
2431
  boxShadow: o.customShadows.z2,
2296
2432
  "&.M4LAreasViewer-selected": {
2297
- background: o.palette.state.active12,
2298
- boxShadow: `inset 1px 2px 3px 0 ${r(o.palette.patronus?.ashBlak[50] || "", 0.9)}`
2433
+ background: o.palette.state.active,
2434
+ "& .M4LIconButton-root": {
2435
+ "& .M4LIcon-root": {
2436
+ "& .M4LIcon-icon": {
2437
+ backgroundColor: o.palette.primary.contrastText
2438
+ }
2439
+ }
2440
+ }
2299
2441
  }
2300
2442
  }
2301
2443
  },
@@ -2494,30 +2636,29 @@ const i = (o) => ({
2494
2636
  overflow: "hidden",
2495
2637
  height: "52px",
2496
2638
  alignItems: "center",
2497
- borderRadius: "6px",
2498
- padding: "4px 8px 4px 8px",
2639
+ padding: "4px",
2499
2640
  borderColor: o.palette.state.borderTop,
2500
2641
  background: o.palette.background.neutral,
2501
2642
  justifyContent: "space-between",
2502
- marginLeft: "4px",
2503
2643
  [o.breakpoints.down("sm")]: {
2504
2644
  width: "100%",
2505
- marginLeft: "0"
2645
+ marginLeft: "0",
2646
+ gap: "12px"
2506
2647
  },
2507
2648
  "& .M4LAppBar-containerIconMenuToggle": {
2508
2649
  display: "flex",
2509
2650
  alingItems: "center",
2510
- width: "52px",
2511
- height: "52px",
2512
- minWidth: "52px",
2513
- minHeight: "52px",
2651
+ width: "36px",
2652
+ height: "36px",
2653
+ minWidth: "36px",
2654
+ minHeight: "36px",
2514
2655
  alignItems: "center",
2515
2656
  borderRadius: "4px",
2516
2657
  borderColor: o.palette.state.default,
2517
2658
  justifyContent: "space-between",
2518
2659
  "& .M4LAppBar-iconMenuToggle": {
2519
2660
  background: o.palette.background.default,
2520
- boxShadow: o.customShadows.z2,
2661
+ boxShadow: o.customShadows.z1,
2521
2662
  borderTop: "1px solid",
2522
2663
  borderColor: o.palette.state.default,
2523
2664
  width: "36px",
@@ -2526,7 +2667,7 @@ const i = (o) => ({
2526
2667
  minHeight: "36px",
2527
2668
  [o.breakpoints.down("sm")]: {
2528
2669
  background: o.palette.background.default,
2529
- boxShadow: o.customShadows.z2,
2670
+ boxShadow: o.customShadows.z1,
2530
2671
  borderTop: "1px solid",
2531
2672
  borderColor: o.palette.state.default,
2532
2673
  width: "36px",
@@ -2599,12 +2740,10 @@ const i = (o) => ({
2599
2740
  padding: "4px",
2600
2741
  background: o.palette.background.default,
2601
2742
  color: o.palette.state.active,
2602
- boxShadow: o.customShadows.z2,
2743
+ boxShadow: o.customShadows.z1,
2603
2744
  borderTop: "1.5px solid",
2604
- borderColor: o.palette.state.borderTop,
2605
- [o.breakpoints.down("sm")]: {
2606
- boxShadow: o.customShadows.z1
2607
- }
2745
+ ...o.typography.subtitle,
2746
+ borderColor: o.palette.state.borderTop
2608
2747
  },
2609
2748
  test: "root"
2610
2749
  }
@@ -2673,7 +2812,7 @@ const i = (o) => ({
2673
2812
  "& .M4LAccountPopover-containerMenuItems": {
2674
2813
  borderTop: "2px solid",
2675
2814
  borderBottom: "2px solid",
2676
- borderColor: o.palette.state.overdefoult,
2815
+ borderColor: o.palette.state.default,
2677
2816
  padding: "4px",
2678
2817
  margin: "12px 0 12px 0",
2679
2818
  display: "flex",
@@ -2696,15 +2835,23 @@ const i = (o) => ({
2696
2835
  }
2697
2836
  }
2698
2837
  },
2699
- "& .M4LAccountPopover-logOut": {
2700
- justifyContent: "center",
2701
- cursor: "pointer",
2702
- color: o.palette.text.primary,
2703
- ...o.typography.paragraph,
2704
- padding: "4px",
2838
+ "& .M4LAccountPopover-containerlogOut": {
2839
+ display: "flex",
2840
+ flexDirection: "row",
2841
+ gap: "4px",
2842
+ padding: "0px 12px",
2705
2843
  borderRadius: "4px",
2844
+ width: "100%",
2845
+ alignItems: "center",
2706
2846
  "&:hover": {
2707
2847
  background: o.palette.state.default
2848
+ },
2849
+ "& .M4LAccountPopover-logOut": {
2850
+ padding: "4px",
2851
+ borderRadius: "4px",
2852
+ cursor: "pointer",
2853
+ color: o.palette.text.primary,
2854
+ ...o.typography.paragraph
2708
2855
  }
2709
2856
  },
2710
2857
  "& .M4LPopover-arrowStyle": {
@@ -2769,14 +2916,8 @@ const i = (o) => ({
2769
2916
  borderRadius: "6px",
2770
2917
  overFlow: "visible"
2771
2918
  },
2772
- "& .M4LSplitLayout-secondPart": {
2773
- borderRadius: "6px",
2774
- padding: "0"
2775
- },
2776
- "& .layout-pane-primary": {
2777
- borderRadius: "6px",
2778
- padding: "0"
2779
- }
2919
+ "& .M4LSplitLayout-secondPart": {},
2920
+ "& .layout-pane-primary": {}
2780
2921
  }
2781
2922
  }
2782
2923
  }
@@ -2789,6 +2930,16 @@ const i = (o) => ({
2789
2930
  position: "relative",
2790
2931
  flexGrow: 1,
2791
2932
  overflow: "hidden",
2933
+ "& .M4LSplitLayout-firstPart": {
2934
+ position: "relative",
2935
+ width: "100%",
2936
+ height: "100%"
2937
+ },
2938
+ "& .M4LSplitLayout-secondPart": {
2939
+ position: "relative",
2940
+ width: "100%",
2941
+ height: "100%"
2942
+ },
2792
2943
  "& .splitter-layout": {
2793
2944
  position: "absolute",
2794
2945
  display: "flex",
@@ -2800,7 +2951,7 @@ const i = (o) => ({
2800
2951
  "& .splitter-layout .layout-pane": {
2801
2952
  position: "relative",
2802
2953
  flex: "0 0 auto",
2803
- overflow: "auto"
2954
+ overflow: "hidden"
2804
2955
  },
2805
2956
  "& .splitter-layout .layout-pane.layout-pane-primary": {
2806
2957
  flex: "1 1 auto"
@@ -2829,7 +2980,8 @@ const i = (o) => ({
2829
2980
  top: "calc(50% - 22.5px)",
2830
2981
  position: "absolute",
2831
2982
  background: o.palette.state.active,
2832
- borderRadius: "1px"
2983
+ borderRadius: "1px",
2984
+ margin: "1px 0px"
2833
2985
  },
2834
2986
  "& .splitter-layout > .layout-splitter:hover": {
2835
2987
  borderRadius: "2px",
@@ -2843,7 +2995,7 @@ const i = (o) => ({
2843
2995
  "& .splitter-layout.splitter-layout-vertical > .layout-splitter": {
2844
2996
  height: "8px !important",
2845
2997
  width: "100% !important",
2846
- margin: "4px 0",
2998
+ margin: "1px 0",
2847
2999
  borderTop: "4px solid hsla(0, 0%, 2%, 0)",
2848
3000
  borderBottom: "4px solid hsla(0, 0%, 2%, 0)",
2849
3001
  cursor: "row-resize"
@@ -2854,13 +3006,33 @@ const i = (o) => ({
2854
3006
  left: "calc(50% - 22.5px)",
2855
3007
  top: "unset",
2856
3008
  background: o.palette.state.active,
2857
- borderRadius: "2px"
3009
+ borderRadius: "2px",
3010
+ zIndex: "1"
2858
3011
  },
2859
3012
  "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing > .layout-splitter:before": {
2860
3013
  background: o.palette.state.focus
2861
3014
  },
2862
3015
  "& .splitter-layout.splitter-layout-vertical": {
2863
- flexDirection: "column"
3016
+ flexDirection: "column",
3017
+ position: "relative",
3018
+ "& .layout-splitter:after": {
3019
+ content: '""',
3020
+ height: "2px",
3021
+ left: "0",
3022
+ right: "0",
3023
+ position: "absolute",
3024
+ background: o.palette.state.overdefoult
3025
+ }
3026
+ },
3027
+ "& .splitter-layout:not(.splitter-layout-vertical)": {
3028
+ "& .layout-splitter:after": {
3029
+ content: '""',
3030
+ width: "2px",
3031
+ top: "0",
3032
+ bottom: "0",
3033
+ position: "absolute",
3034
+ background: o.palette.state.overdefoult
3035
+ }
2864
3036
  },
2865
3037
  "& .splitter-layout.splitter-layout-vertical > .layout-splitter:hover": {
2866
3038
  borderTop: "2px",
@@ -3003,18 +3175,17 @@ const i = (o) => ({
3003
3175
  "&.M4LAccordion-root": {
3004
3176
  width: "100%",
3005
3177
  background: o.palette.background.default,
3006
- boxShadow: o.customShadows.z2,
3007
- borderTop: "1.5px solid",
3008
- borderColor: o.palette.state.borderTop,
3009
3178
  borderRadius: "4px",
3010
3179
  "& .M4LTypography-root": {
3011
3180
  "& .MuiTypography-root": {
3012
- ...o.typography.bodyDens,
3013
- color: o.palette.text.secondary
3181
+ ...o.typography.body,
3182
+ color: o.palette.text.primary
3014
3183
  }
3015
3184
  },
3016
3185
  "& .MuiPaper-root": {
3017
- marginBottom: "0px"
3186
+ background: o.palette.background.neutral,
3187
+ marginBottom: "0px",
3188
+ borderRadius: "4px"
3018
3189
  }
3019
3190
  },
3020
3191
  "& .MuiButtonBase-root": {
@@ -3023,6 +3194,7 @@ const i = (o) => ({
3023
3194
  background: o.palette.state.active12,
3024
3195
  "& .M4LTypography-root": {
3025
3196
  "& .MuiTypography-root": {
3197
+ ...o.typography.bodyDens,
3026
3198
  color: o.palette.text?.primary
3027
3199
  }
3028
3200
  },
@@ -3038,10 +3210,9 @@ const i = (o) => ({
3038
3210
  },
3039
3211
  "& .MuiCollapse-root": {
3040
3212
  background: o.palette.background.default,
3041
- boxShadow: o.customShadows.z2,
3042
3213
  borderTop: "1px solid",
3043
3214
  borderColor: o.palette.state.default,
3044
- borderRadius: "4px",
3215
+ borderRadius: "0px 0px 4px 4px",
3045
3216
  padding: "8px",
3046
3217
  "& .MuiCollapse-wrapper": {
3047
3218
  padding: "8px",
@@ -3387,7 +3558,7 @@ const i = (o) => ({
3387
3558
  }
3388
3559
  }
3389
3560
  }
3390
- }), F = (o) => ({
3561
+ }), V = (o) => ({
3391
3562
  M4LTooltip: {
3392
3563
  styleOverrides: {
3393
3564
  "&.M4LTooltip-root": {
@@ -3412,10 +3583,10 @@ const i = (o) => ({
3412
3583
  }
3413
3584
  }
3414
3585
  }
3415
- }), V = (o) => ({
3586
+ }), F = (o) => ({
3416
3587
  M4LBadge: {
3417
3588
  styleOverrides: {
3418
- "& .M4LBadge-root": {
3589
+ "&.M4LBadge-root": {
3419
3590
  test: "root"
3420
3591
  }
3421
3592
  }
@@ -3456,10 +3627,7 @@ const i = (o) => ({
3456
3627
  gap: "8px",
3457
3628
  marginLeft: "12px",
3458
3629
  "& .M4LIconButton-root": {
3459
- background: o.palette.state.default,
3460
- boxShadow: o.customShadows.z1,
3461
- borderTop: "1.5px solid",
3462
- borderColor: o.palette.state.borderTop
3630
+ background: o.palette.state.default
3463
3631
  }
3464
3632
  },
3465
3633
  "& .M4LDataGrid-rowsCount": {
@@ -3688,7 +3856,7 @@ const i = (o) => ({
3688
3856
  }
3689
3857
  }
3690
3858
  }
3691
- }), W = (o) => ({
3859
+ }), H = (o) => ({
3692
3860
  M4LPager: {
3693
3861
  styleOverrides: {
3694
3862
  "&.M4LPager-root": {
@@ -3707,10 +3875,7 @@ const i = (o) => ({
3707
3875
  gap: "2px",
3708
3876
  width: "fit-content",
3709
3877
  background: o.palette.state.default,
3710
- boxShadow: o.customShadows.z1,
3711
3878
  borderRadius: "4px",
3712
- borderTop: "1.5px solid",
3713
- borderColor: o.palette.state.borderTop,
3714
3879
  [o.breakpoints.down("sm")]: {
3715
3880
  gap: "4px",
3716
3881
  padding: "4px"
@@ -3742,7 +3907,9 @@ const i = (o) => ({
3742
3907
  overflow: "hidden",
3743
3908
  minWidth: "fit-content",
3744
3909
  "& .MuiSvgIcon-root": {
3745
- background: o.palette.state.default
3910
+ background: o.palette.background.neutral,
3911
+ borderRight: "1px solid",
3912
+ borderColor: o.palette.background.background
3746
3913
  }
3747
3914
  },
3748
3915
  "& .M4LPager-skeletonRoot": {
@@ -3779,7 +3946,7 @@ const i = (o) => ({
3779
3946
  }
3780
3947
  }
3781
3948
  }
3782
- }), H = (o) => ({
3949
+ }), W = (o) => ({
3783
3950
  M4LCheckBox: {
3784
3951
  styleOverrides: {
3785
3952
  "&.M4LCheckBox-root": {
@@ -3834,6 +4001,75 @@ const i = (o) => ({
3834
4001
  }
3835
4002
  }
3836
4003
  }
4004
+ }), j = (o) => ({
4005
+ M4LStack: {
4006
+ styleOverrides: {
4007
+ "&.M4LStack-root": {
4008
+ width: "100%",
4009
+ height: "100%",
4010
+ position: "relative",
4011
+ overflow: "auto",
4012
+ flex: "1"
4013
+ }
4014
+ }
4015
+ }
4016
+ }), G = (o) => ({
4017
+ M4LTabs: {
4018
+ styleOverrides: {
4019
+ "&.M4LTabs-root": {
4020
+ width: "100%",
4021
+ height: "auto",
4022
+ position: "relative",
4023
+ minHeight: "37px",
4024
+ "&:not(:last-of-type)": {
4025
+ margin: "unset"
4026
+ }
4027
+ }
4028
+ }
4029
+ }
4030
+ }), E = (o) => ({
4031
+ M4LNoItemSelected: {
4032
+ styleOverrides: {
4033
+ "&.M4LNoItemSelected-root": {
4034
+ width: "100%",
4035
+ height: "100%",
4036
+ maxWidth: "400px",
4037
+ minWidth: "300px",
4038
+ display: "flex",
4039
+ flexDirection: "column",
4040
+ alignItems: "center",
4041
+ justifyContent: "center",
4042
+ padding: "24px",
4043
+ "& .M4LImage-root": {
4044
+ minHeight: "200px",
4045
+ maxHeight: "200px"
4046
+ }
4047
+ }
4048
+ }
4049
+ }
4050
+ }), $ = (o) => ({
4051
+ M4LScrollBar: {
4052
+ styleOverrides: {
4053
+ "&.M4LScrollBar-root": {
4054
+ minHeight: "inherit",
4055
+ "& .ScrollbarsCustom-Content": {
4056
+ position: "relative",
4057
+ "& .M4LScrollBar-content": {
4058
+ position: "absolute",
4059
+ inset: 0
4060
+ }
4061
+ }
4062
+ }
4063
+ }
4064
+ }
4065
+ }), _ = (o) => ({
4066
+ M4LGridLayout: {
4067
+ styleOverrides: {
4068
+ "&.M4LGridLayout-root": {
4069
+ test: "root"
4070
+ }
4071
+ }
4072
+ }
3837
4073
  });
3838
4074
  export {
3839
4075
  A,
@@ -3841,10 +4077,15 @@ export {
3841
4077
  D as C,
3842
4078
  P as D,
3843
4079
  z as E,
3844
- F,
3845
- W as G,
3846
- H,
4080
+ V as F,
4081
+ H as G,
4082
+ W as H,
4083
+ j as I,
4084
+ G as J,
4085
+ E as K,
4086
+ $ as L,
3847
4087
  b as M,
4088
+ _ as N,
3848
4089
  i as a,
3849
4090
  T as b,
3850
4091
  n as c,
@@ -3853,15 +4094,15 @@ export {
3853
4094
  l as f,
3854
4095
  M as g,
3855
4096
  s as h,
3856
- V as i,
4097
+ F as i,
3857
4098
  c as j,
3858
4099
  O as k,
3859
4100
  u as l,
3860
- x as m,
3861
- g as n,
3862
- y as o,
4101
+ g as m,
4102
+ x as n,
4103
+ L as o,
3863
4104
  f as p,
3864
- L as q,
4105
+ y as q,
3865
4106
  w as r,
3866
4107
  h as s,
3867
4108
  k as t,