@m4l/styles 0.0.20 → 0.0.21

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 (26) hide show
  1. package/index.js +10 -10
  2. package/package.json +1 -1
  3. package/theme/{defaultThemeOptions.dd98806d.js → defaultThemeOptions.81e20130.js} +5 -5
  4. package/theme/index.38ad102a.js +7 -0
  5. package/theme/overrides/M4LExtendedComponents/M4LAppBar.d.ts +237 -67
  6. package/theme/overrides/M4LExtendedComponents/M4LAreasAdmin.d.ts +1151 -336
  7. package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.d.ts +116 -63
  8. package/theme/overrides/M4LExtendedComponents/M4LCommonActions.d.ts +1 -0
  9. package/theme/overrides/M4LExtendedComponents/M4LDynamicFilter.d.ts +25 -7
  10. package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts +16 -14
  11. package/theme/overrides/M4LExtendedComponents/M4LTab.d.ts +8 -4
  12. package/theme/overrides/M4LExtendedComponents/{index.ead1a06a.js → index.9ecb9eb5.js} +476 -274
  13. package/theme/overrides/M4LRHFComponents/M4LRHFAutocomplete.d.ts +17 -3
  14. package/theme/overrides/M4LRHFComponents/{index.1406e2ed.js → index.e3118e8b.js} +25 -11
  15. package/theme/overrides/MUIComponents/Button.d.ts +3 -1
  16. package/theme/overrides/MUIComponents/Input.d.ts +16 -3
  17. package/theme/overrides/MUIComponents/Tabs.d.ts +2 -0
  18. package/theme/overrides/MUIComponents/{index.e3d060c3.js → index.25926753.js} +50 -32
  19. package/theme/overrides/{index.0d219399.js → index.05460ef6.js} +3 -3
  20. package/theme/{palette.6e480083.js → palette.ad96498c.js} +3 -3
  21. package/theme/{shadows.0d04d424.js → shadows.c56e8ae9.js} +1 -1
  22. package/theme/{typography.8b60719b.js → typography.39389e10.js} +4 -4
  23. package/utils/{getColorPresets.4a88b0ed.js → getColorPresets.82f91ceb.js} +1 -1
  24. package/utils/{getColorState.1cdd7909.js → getColorState.0e5b3a7c.js} +38 -26
  25. package/utils/getColorState.d.ts +1 -0
  26. package/theme/index.7512919c.js +0 -7
package/theme/overrides/M4LExtendedComponents/{index.ead1a06a.js → index.9ecb9eb5.js} RENAMED
@@ -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
  },
@@ -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
  }
@@ -141,11 +157,13 @@ const i = (o) => ({
141
157
  "& .M4LDynamicFilter-popoverFilterHeader": {
142
158
  background: o.palette.state.default,
143
159
  display: "flex",
144
- gap: "4px",
145
- padding: "4px 8px 4px 8px",
160
+ gap: "8px",
161
+ padding: "6px 8px 6px 8px",
146
162
  borderRadius: "4px",
147
- boxShadow: o.customShadows.z2,
163
+ boxShadow: o.customShadows.z1,
148
164
  borderBottom: "0px",
165
+ borderTop: "1.5px solid",
166
+ borderColor: o.palette.state.borderTop,
149
167
  "& .MuiTypography-root": {
150
168
  ...o.typography.bodyDens,
151
169
  color: o.palette.text.primary
@@ -163,11 +181,11 @@ const i = (o) => ({
163
181
  gap: "8px"
164
182
  }
165
183
  },
166
- "& .M4LCommonActions-wrapperActions": {
184
+ "& .M4LCommonActions-root": {
167
185
  display: "flex",
168
186
  flexDirection: "row",
169
187
  gap: "12px",
170
- padding: "20px 8px 12px 0px",
188
+ padding: "20px 8px 8px 0px",
171
189
  ".M4LButton-root": {
172
190
  width: "fit-content"
173
191
  }
@@ -963,7 +981,7 @@ const i = (o) => ({
963
981
  }
964
982
  }
965
983
  }
966
- }), L = (o) => ({
984
+ }), y = (o) => ({
967
985
  M4LSideBar: {
968
986
  styleOverrides: {
969
987
  "&.M4LSideBar-root": {
@@ -1050,7 +1068,7 @@ const i = (o) => ({
1050
1068
  borderRadius: "4px 0px 0px 4px",
1051
1069
  justifyContent: "center",
1052
1070
  flexDirection: "column",
1053
- gap: "8px",
1071
+ padding: "0px 0px 8px 0px",
1054
1072
  "& .M4LSideBar-navItemMainRoot": {
1055
1073
  backgroundColor: "transparent",
1056
1074
  "&:hover": {
@@ -1121,27 +1139,29 @@ const i = (o) => ({
1121
1139
  },
1122
1140
  "& .M4LSideBar-navListSubItemRoot": {
1123
1141
  "& .M4LSideBar-navSubItemContentRoot ": {
1142
+ width: "100%",
1143
+ height: "36px",
1144
+ borderRadius: "4px",
1145
+ gap: "8px",
1124
1146
  "&.M4LSideBar-subItemCollapseActive": {
1125
1147
  backgroundColor: o.palette.state.active12,
1126
- width: "100%",
1127
- height: "28px"
1148
+ gap: "8px"
1128
1149
  },
1129
1150
  "&.M4LSideBar-subItemActive": {
1130
1151
  "& .M4LSideBar-navSubItemContentBullet": {
1131
1152
  height: "14px",
1132
1153
  borderRadius: "4px",
1133
- backgroundColor: o.palette.state.focus
1154
+ backgroundColor: o.palette.state.focus,
1155
+ gap: "8px"
1134
1156
  }
1135
1157
  },
1136
1158
  "&:hover": {
1137
- background: o.palette.state.default,
1138
- width: "100%",
1139
- height: "28px"
1159
+ background: o.palette.state.default
1140
1160
  }
1141
1161
  },
1142
1162
  "& .M4LSideBar-navSubItemContentRoot": {
1143
1163
  gap: "12px",
1144
- margin: "0px 0px 1px 0px",
1164
+ margin: "0px 0px 8px 0px",
1145
1165
  padding: "16px",
1146
1166
  "& .M4LSideBar-navSubItemContentBullet": {
1147
1167
  minWidth: "5px",
@@ -1210,9 +1230,9 @@ const i = (o) => ({
1210
1230
  styleOverrides: {
1211
1231
  "&.M4LSideBar-popover": {
1212
1232
  "& .M4LSideBar-navListSubItemRoot": {
1213
- "& .M4LSideBar-navSubItemContentRoot ": {
1233
+ "& .M4LSideBar-navSubItemContentRoot": {
1214
1234
  gap: "12px",
1215
- margin: "0px 0px 1px 0px",
1235
+ margin: "0px 0px 8px 0px",
1216
1236
  padding: "16px",
1217
1237
  "&.M4LSideBar-subItemCollapseActive": {
1218
1238
  backgroundColor: o.palette.state.active12
@@ -1243,9 +1263,7 @@ const i = (o) => ({
1243
1263
  backgroundColor: o.palette.text.primary
1244
1264
  },
1245
1265
  "&:hover": {
1246
- background: o.palette.state.default,
1247
- width: "100%",
1248
- height: "18px"
1266
+ background: o.palette.state.default
1249
1267
  }
1250
1268
  }
1251
1269
  }
@@ -1325,7 +1343,7 @@ const i = (o) => ({
1325
1343
  borderRadius: "4px 0px 0px 4px",
1326
1344
  justifyContent: "center",
1327
1345
  flexDirection: "column",
1328
- gap: "8px",
1346
+ padding: "0px 0px 8px 0px",
1329
1347
  "& .M4LSideBar-navItemMainRoot": {
1330
1348
  backgroundColor: "transparent",
1331
1349
  "&:hover": {
@@ -1463,160 +1481,252 @@ const i = (o) => ({
1463
1481
  }
1464
1482
  }
1465
1483
  }
1466
- }), y = (o) => ({
1484
+ }), L = (o) => ({
1467
1485
  M4LAreasAdmin: {
1468
1486
  styleOverrides: {
1469
1487
  "&.M4LAreasAdmin-root": {
1470
1488
  flex: 1,
1489
+ display: "flex",
1490
+ flexDirection: "row",
1471
1491
  overflow: "auto",
1472
1492
  height: "auto",
1473
1493
  borderRadius: "6px",
1474
- paddingRight: "4px",
1494
+ paddingRight: "6px",
1475
1495
  alignItems: "center",
1476
1496
  background: o.palette.background.default,
1477
1497
  boxShadow: o.customShadows.z2,
1498
+ justifyContent: "space-between",
1499
+ width: "fit-content",
1500
+ maxWidth: "fit-content",
1501
+ gap: "8px",
1502
+ borderTop: "1.5px solid",
1503
+ borderColor: o.palette.state.borderTop,
1478
1504
  [o.breakpoints.down("sm")]: {
1479
- height: "auto"
1505
+ height: "auto",
1506
+ background: "none",
1507
+ width: "100%",
1508
+ maxWidth: "100%"
1480
1509
  },
1481
- "& .M4LAreasAdmin-areasAddButton": {
1482
- backgroundColor: `${o.palette.state.active}!important`,
1483
- "& .M4LIcon-icon": {
1484
- backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1485
- }
1510
+ "*::-webkit-scrollbar": {
1511
+ width: "8px",
1512
+ maxWidth: "12px",
1513
+ height: "6px",
1514
+ background: o.palette.state.default,
1515
+ position: "absolute",
1516
+ zIndex: "10000"
1486
1517
  },
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
- }
1518
+ "*::-webkit-scrollbar-thumb": {
1519
+ background: o.palette.text.disabled,
1520
+ position: "absolute",
1521
+ borderRadius: "4px",
1522
+ zIndex: "10000"
1501
1523
  },
1502
- "& .M4LAreasAdmin-areaContainerChips": {
1524
+ "& .M4LAreasAdmin-areaContainerChipsIcon": {
1503
1525
  display: "flex",
1526
+ flexDirection: "row",
1527
+ width: "100%",
1504
1528
  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": {
1529
+ height: "36px",
1530
+ borderRight: "1px solid",
1531
+ borderColor: o.palette.state.overdefoult,
1532
+ "& .M4LAreasAdmin-areaIconLayer": {
1533
+ background: o.palette.background.neutral,
1534
+ boxShadow: o.customShadows.z2,
1524
1535
  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
- }
1536
+ justifyContent: "center",
1537
+ width: "36px",
1538
+ height: "36px",
1539
+ [o.breakpoints.down("sm")]: {
1540
+ height: "36px",
1541
+ width: "36px"
1542
+ },
1543
+ "& .M4LIcon-root": {
1544
+ width: "36px",
1545
+ height: "100%"
1538
1546
  }
1539
1547
  },
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 ": {
1548
+ "& .M4LAreasAdmin-areaContainerChips": {
1550
1549
  display: "flex",
1551
- boxShadow: o.customShadows.z1,
1552
- borderRadius: "4px 4px 4px 4px",
1553
- marginRight: "8px",
1554
- height: "auto",
1555
- width: "auto",
1550
+ overflow: "auto",
1556
1551
  gap: "8px",
1557
- paddingLeft: "8px",
1552
+ padding: "0",
1553
+ width: "fit-content",
1554
+ height: "auto",
1558
1555
  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",
1556
+ "& .M4LAreasAdmin-areaContainerContentChips": {
1557
+ display: "flex",
1558
+ flexDirection: "row",
1559
+ width: "fit-content",
1560
+ justifyContent: "space-between",
1561
+ [o.breakpoints.down("sm")]: {
1562
+ justifyContent: "space-between",
1563
+ width: "100%"
1564
+ },
1565
+ "& .css-jjtu05": {
1566
+ "& .css-16ugaun": {},
1567
+ "& .simplebar-wrapper": {
1568
+ width: "fit-content",
1569
+ maxWidth: "100%",
1570
+ "& .simplebar-height-auto-observer-wrapper": {
1571
+ width: "fit-content",
1572
+ maxWidth: "100%",
1573
+ overflow: "auto"
1574
+ },
1575
+ "& .simplebar-mask": {
1576
+ "& .simplebar-offset": {
1577
+ "& .simplebar-content-wrapper": {
1578
+ width: "fit-content",
1579
+ maxWidth: "100%",
1580
+ overflow: "auto",
1581
+ "& .simplebar-content": {
1582
+ width: "fit-content",
1583
+ overflow: "auto",
1584
+ gap: "4px"
1585
+ }
1586
+ }
1587
+ }
1588
+ }
1589
+ }
1590
+ },
1591
+ "& .simplebar-content-wrapper": {
1592
+ width: "fit-content",
1593
+ "& .M4LAreasAdmin-areaChipRoot ": {
1594
+ margin: "0px",
1595
+ borderRadius: "4px",
1596
+ overflow: "hidden",
1597
+ width: "fit-content"
1598
+ }
1599
+ },
1600
+ "& .M4LAreasAdmin-areaChipMobileRoot": {
1577
1601
  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",
1602
+ overflow: "hidden",
1603
+ width: "100%",
1604
+ backgroundColor: o.palette.state.active,
1605
+ borderRadius: "4px",
1606
+ "& .M4LAreasAdmin-areaChipRoot ": {
1607
+ margin: "0px",
1608
+ borderRadius: "4px 0px 0px 4px",
1585
1609
  overflow: "hidden",
1586
- whiteSpace: "nowrap",
1587
- flex: "1"
1610
+ width: "100%"
1588
1611
  }
1589
1612
  },
1590
- "& .M4LIconButton-root": {
1591
- "& .M4LIcon-icon": {
1592
- backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1613
+ "& .M4LAreasAdmin-areaChipMobileIconContainer": {
1614
+ display: "flex",
1615
+ width: "fit-content",
1616
+ alignItems: "center",
1617
+ borderRadius: "0px 4px 4px 0px",
1618
+ background: o.palette.state.active,
1619
+ ...o.typography.body,
1620
+ color: o.palette.text.primary,
1621
+ "& .M4LIconButton-root": {
1622
+ backgroundColor: `${o.palette.state.active}!important`,
1623
+ borderLeft: "1px solid",
1624
+ borderColor: o.palette.patronus?.marbleLight[10],
1625
+ borderRadius: "0px",
1626
+ "& .M4LIcon-icon": {
1627
+ backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1628
+ }
1629
+ }
1630
+ },
1631
+ "& .MuiBox-root": {
1632
+ display: "flex",
1633
+ alignItems: "center",
1634
+ height: "100%"
1635
+ },
1636
+ "& .simplebar-content": {
1637
+ display: "flex",
1638
+ alignItems: "center"
1639
+ },
1640
+ "& .M4LAreasAdmin-areaChipRoot ": {
1641
+ display: "flex",
1642
+ boxShadow: o.customShadows.z1,
1643
+ borderRadius: "4px 4px 4px 4px",
1644
+ marginRight: "8px",
1645
+ height: "22px",
1646
+ width: "fit-content",
1647
+ gap: "8px",
1648
+ paddingLeft: "8px",
1649
+ alignItems: "center",
1650
+ border: "1px solid",
1651
+ borderColor: o.palette.state.default,
1652
+ background: o.palette.state.default,
1653
+ "& .M4LAreasAdmin-areaContainerChipEditButton": {
1654
+ display: "flex",
1655
+ width: "fit-content"
1656
+ },
1657
+ [o.breakpoints.down("sm")]: {
1658
+ height: "auto"
1659
+ },
1660
+ "&.M4LAreasAdmin-selected": {
1661
+ background: o.palette.state.active,
1662
+ ...o.typography.body,
1663
+ color: o.palette.text.primary,
1664
+ height: "22px",
1665
+ [o.breakpoints.down("sm")]: {
1666
+ height: "auto"
1667
+ },
1668
+ "& .M4LAreasAdmin-areaChipTitle": {
1669
+ backgroundColor: "transparent",
1670
+ border: "none",
1671
+ textWrap: "nowrap",
1672
+ width: "auto",
1673
+ display: "flex",
1674
+ alignItems: "center",
1675
+ color: o.palette.patronus?.marbleLight[10],
1676
+ ...o.typography.action,
1677
+ [o.breakpoints.down("sm")]: {
1678
+ display: "inline",
1679
+ fontSize: "14px",
1680
+ textOverflow: "ellipsis",
1681
+ overflow: "hidden",
1682
+ whiteSpace: "nowrap",
1683
+ flex: "1"
1684
+ }
1685
+ },
1686
+ "& .M4LIconButton-root": {
1687
+ "& .M4LIcon-icon": {
1688
+ backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1689
+ }
1690
+ }
1691
+ },
1692
+ "& .M4LAreasAdmin-areaChipTitle": {
1693
+ backgroundColor: "transparent",
1694
+ border: "none",
1695
+ textWrap: "nowrap",
1696
+ width: "auto",
1697
+ display: "flex",
1698
+ alignItems: "center",
1699
+ color: o.palette.text.secondary,
1700
+ ...o.typography.body
1701
+ },
1702
+ "& .M4LIconButton-root": {
1703
+ display: "flex",
1704
+ justifyContent: "center",
1705
+ width: "20px",
1706
+ height: "20px",
1707
+ "&.M4LIconButton-variantPrimary": {
1708
+ background: o.palette.state.active
1709
+ }
1593
1710
  }
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
1711
  }
1614
1712
  }
1615
1713
  }
1616
1714
  },
1715
+ "& .M4LAreasAdmin-areasAddButton": {
1716
+ backgroundColor: `${o.palette.state.active}!important`,
1717
+ "& .M4LIcon-icon": {
1718
+ backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
1719
+ }
1720
+ },
1617
1721
  "&.M4LAreasAdmin-isMobile": {
1722
+ overflow: "hidden",
1723
+ boxShadow: "none",
1724
+ width: "100%",
1618
1725
  "& .M4LAreasAdmin-areaContainerChips": {
1619
- width: "100%"
1726
+ width: "100%",
1727
+ overflow: "hidden",
1728
+ background: "none",
1729
+ boxShadow: "none"
1620
1730
  }
1621
1731
  }
1622
1732
  }
@@ -1626,7 +1736,7 @@ const i = (o) => ({
1626
1736
  styleOverrides: {
1627
1737
  "&.M4LAreasAdmin-areaEditPopover": {
1628
1738
  "& .MuiPaper-root": {
1629
- width: "200px"
1739
+ width: "100%"
1630
1740
  }
1631
1741
  }
1632
1742
  }
@@ -1652,7 +1762,7 @@ const i = (o) => ({
1652
1762
  }
1653
1763
  }
1654
1764
  }
1655
- }), f = (o) => ({
1765
+ }), w = (o) => ({
1656
1766
  M4LAreasViewer: {
1657
1767
  styleOverrides: {
1658
1768
  "&.M4LAreasViewer-root": {
@@ -1673,6 +1783,10 @@ const i = (o) => ({
1673
1783
  "& .react-resizable-handle": {
1674
1784
  backgroundColor: "transparent"
1675
1785
  },
1786
+ "&.react-colapsed": {
1787
+ border: "1px solid",
1788
+ borderColor: o.palette.state.borderDefault
1789
+ },
1676
1790
  "& .M4LAreasViewer-windowRootContainer": {
1677
1791
  display: "flex",
1678
1792
  flexDirection: "column",
@@ -1831,7 +1945,7 @@ const i = (o) => ({
1831
1945
  },
1832
1946
  "& .M4LAreasViewer-windowContent": {
1833
1947
  margin: "8px",
1834
- background: o.palette.background.background,
1948
+ background: "none",
1835
1949
  borderRadius: "4px",
1836
1950
  display: "flex",
1837
1951
  flexDirection: "column",
@@ -1852,8 +1966,8 @@ const i = (o) => ({
1852
1966
  padding: "4px 4px 4px 8px",
1853
1967
  justifyContent: "end",
1854
1968
  minHeight: "36px",
1855
- borderBottom: "1px solid",
1856
- borderColor: o.palette.divider,
1969
+ borderTop: "1px solid",
1970
+ borderColor: o.palette.state.borderTop,
1857
1971
  overflow: "hidden",
1858
1972
  cursor: "move",
1859
1973
  height: "36px",
@@ -1865,56 +1979,27 @@ const i = (o) => ({
1865
1979
  }
1866
1980
  }
1867
1981
  }
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
1982
  },
1903
- "& .M4LAreasViewer-windowRoot": {
1983
+ "& .M4LAreasViewer-windowPopupRoot": {
1984
+ boxShadow: o.customShadows.z3,
1904
1985
  padding: "4px",
1905
1986
  background: o.palette.state.default,
1906
1987
  borderRadius: "4px",
1907
1988
  border: "1px solid",
1908
1989
  borderColor: o.palette.state.default,
1909
1990
  backdropFilter: "blur(8px)",
1910
- "&:not(.M4LAreasViewer-loading)": {
1911
- "& .M4LinearProgressIndeterminate-root": {
1912
- opacity: 0
1991
+ "& .M4LIcon-root.custom-handle": {
1992
+ "& .M4LIcon-icon": {
1993
+ backgroundColor: o.palette.state.skeleton.default,
1994
+ width: "11px",
1995
+ height: "11px",
1996
+ minWidth: "11px",
1997
+ minHeight: "11px",
1998
+ boxShadow: o.customShadows.z1,
1999
+ border: "1px solid",
2000
+ borderColor: o.palette.opacity.cool[24]
1913
2001
  }
1914
2002
  },
1915
- "& > .react-resizable-handle": {
1916
- backgroundColor: "transparent"
1917
- },
1918
2003
  "& .M4LAreasViewer-windowRootContainer": {
1919
2004
  background: o.palette.background.background,
1920
2005
  borderRadius: "4px",
@@ -1922,34 +2007,108 @@ const i = (o) => ({
1922
2007
  height: "28px",
1923
2008
  minHeight: "28px",
1924
2009
  boxShadow: "none",
1925
- background: o.palette.background.neutral,
2010
+ background: o.palette.state.default,
2011
+ "& .M4LIcon-root": {
2012
+ "& .M4LIcon-icon": {
2013
+ backgroundColor: o.palette.text.secondary
2014
+ }
2015
+ },
1926
2016
  "& .M4LTypography-root .MuiTypography-root": {
1927
2017
  ...o.typography.body,
1928
2018
  color: o.palette.text.secondary
1929
2019
  }
1930
2020
  }
1931
2021
  },
2022
+ "& .M4LAreasViewer-windowRoot": {
2023
+ padding: "4px",
2024
+ background: o.palette.state.default,
2025
+ borderRadius: "4px",
2026
+ border: "1px solid",
2027
+ borderColor: o.palette.state.default,
2028
+ backdropFilter: "blur(8px)",
2029
+ "&:not(.M4LAreasViewer-loading)": {
2030
+ "& .M4LinearProgressIndeterminate-root": {
2031
+ opacity: 0
2032
+ }
2033
+ },
2034
+ "& > .react-resizable-handle": {
2035
+ backgroundColor: "transparent"
2036
+ },
2037
+ "&.M4LAreasViewer-selectedWindow": {
2038
+ border: "1px solid",
2039
+ borderColor: o.palette.state.active12,
2040
+ background: o.palette.state.active12,
2041
+ boxShadow: o.customShadows.z3,
2042
+ padding: "4px",
2043
+ "& .M4LAreasViewer-windowRootContainer": {
2044
+ "& .M4LAreasViewer-windowHeader": {
2045
+ background: o.palette.background.neutral,
2046
+ height: "28px",
2047
+ borderRadius: "4px",
2048
+ boxShadow: o.customShadows.z1,
2049
+ borderTop: "2px solid",
2050
+ borderColor: o.palette.state.default,
2051
+ "& .M4LIcon-root": {
2052
+ "& .M4LIcon-icon": {
2053
+ backgroundColor: o.palette.text.primary
2054
+ }
2055
+ },
2056
+ "& .M4LTypography-root .MuiTypography-root": {
2057
+ ...o.typography.body,
2058
+ color: o.palette.text.primary
2059
+ }
2060
+ }
2061
+ }
2062
+ }
2063
+ },
1932
2064
  "&.M4LAreasViewer-selectedWindow": {
1933
2065
  border: "1px solid",
1934
- borderColor: o.palette.state.active12,
2066
+ borderColor: o.palette.state.active,
1935
2067
  background: o.palette.state.active12,
1936
2068
  boxShadow: o.customShadows.z3,
1937
- 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
2069
+ padding: "6px",
2070
+ "& .M4LAreasViewer-windowRootContainer": {
2071
+ boxShadow: o.customShadows.z2,
2072
+ "& .M4LAreasViewer-windowHeader": {
2073
+ background: o.palette.state.skeleton,
2074
+ height: "28px",
2075
+ borderRadius: "4px",
2076
+ boxShadow: o.customShadows.z1,
2077
+ borderTop: "1.5px solid",
2078
+ borderColor: o.palette.state.borderTop,
2079
+ "& .M4LIcon-root": {
2080
+ "& .M4LIcon-icon": {
2081
+ backgroundColor: o.palette.text.primary
2082
+ }
2083
+ },
2084
+ "& .M4LTypography-root .MuiTypography-root": {
2085
+ ...o.typography.body,
2086
+ color: o.palette.text.primary
2087
+ }
1948
2088
  }
1949
2089
  }
1950
2090
  }
1951
2091
  }
1952
2092
  },
2093
+ "& .M4LAreasViewer-panelWindowsRoot": {
2094
+ background: o.palette.background.neutral,
2095
+ boxShadow: o.customShadows.z2,
2096
+ borderRadius: "4px",
2097
+ display: "flex",
2098
+ alignItems: "center",
2099
+ margin: "4px",
2100
+ padding: "4px",
2101
+ gap: "8px",
2102
+ "& .M4LAreasViewer-panelWindowsButtonContainer": {
2103
+ borderRadius: "2px",
2104
+ background: o.palette.background.default,
2105
+ boxShadow: o.customShadows.z2,
2106
+ "&.M4LAreasViewer-selected": {
2107
+ background: o.palette.state.active12,
2108
+ boxShadow: `inset 1px 2px 3px 0 ${e(o.palette.patronus?.ashBlak[50] || "", 0.9)}`
2109
+ }
2110
+ }
2111
+ },
1953
2112
  "& .M4LAreasViewer-areasLoadingErrorRoot": {
1954
2113
  display: "flex",
1955
2114
  flexDirection: "column",
@@ -2009,23 +2168,14 @@ const i = (o) => ({
2009
2168
  },
2010
2169
  M4LAreasViewerModal: {
2011
2170
  styleOverrides: {
2012
- "&.M4LAreasViewer-windowModalRoot": {
2171
+ "&.M4LAreasViewer-windowModalRoot .M4LAreasViewer-windowRoot": {
2013
2172
  borderRadius: "4px",
2014
2173
  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
- }
2174
+ background: o.palette.background.background,
2175
+ "& .M4LAreasViewer-windowContent": {
2176
+ borderRadius: "4px",
2177
+ boxShadow: o.customShadows.z4,
2178
+ background: o.palette.background.neutral
2029
2179
  },
2030
2180
  "& .M4LAreasViewer-areasLoadingErrorRoot": {
2031
2181
  display: "flex",
@@ -2096,7 +2246,9 @@ const i = (o) => ({
2096
2246
  display: "flex",
2097
2247
  flexDirection: "column",
2098
2248
  height: "100%",
2099
- background: o.palette.background.neutral,
2249
+ background: o.palette.background.background,
2250
+ borderRadius: "4px",
2251
+ boxShadow: o.customShadows.z4,
2100
2252
  "& .M4LAreasViewer-windowHeader": {
2101
2253
  cursor: "all-scroll",
2102
2254
  display: "flex",
@@ -2118,7 +2270,7 @@ const i = (o) => ({
2118
2270
  },
2119
2271
  "& .M4LAreasViewer-windowContent": {
2120
2272
  margin: "0 8px 8px 8px",
2121
- background: o.palette.background.default,
2273
+ background: o.palette.background.background,
2122
2274
  borderRadius: "4px",
2123
2275
  display: "flex",
2124
2276
  flexDirection: "column",
@@ -2128,28 +2280,44 @@ const i = (o) => ({
2128
2280
  height: "100%"
2129
2281
  }
2130
2282
  }
2283
+ },
2284
+ "& .M4LIcon-root.custom-handle": {
2285
+ "& .M4LIcon-icon": {
2286
+ backgroundColor: o.palette.state.skeleton.default,
2287
+ width: "11px",
2288
+ height: "11px",
2289
+ minWidth: "11px",
2290
+ minHeight: "11px",
2291
+ boxShadow: o.customShadows.z2,
2292
+ border: "1px solid",
2293
+ borderColor: o.palette.state.overdefoult
2294
+ }
2131
2295
  }
2132
2296
  }
2133
2297
  }
2134
- }), w = (o) => ({
2298
+ }), f = (o) => ({
2135
2299
  M4LAppBar: {
2136
2300
  styleOverrides: {
2137
2301
  "&.M4LAppBar-root": {
2138
- test: "root",
2139
2302
  display: "flex",
2140
- width: "100%",
2303
+ width: "auto",
2141
2304
  overflow: "hidden",
2142
- height: "48px",
2305
+ height: "52px",
2143
2306
  alignItems: "center",
2144
2307
  borderRadius: "6px",
2145
- padding: "8px",
2146
- borderTop: "1px solid",
2147
- borderColor: o.palette.state.default,
2308
+ padding: "4px 8px 4px 8px",
2309
+ borderTop: "1.5px solid",
2310
+ borderColor: o.palette.state.borderTop,
2148
2311
  background: o.palette.background.neutral,
2149
2312
  boxShadow: o.customShadows.z2,
2313
+ justifyContent: "space-between",
2314
+ marginLeft: "4px",
2315
+ [o.breakpoints.down("sm")]: {
2316
+ width: "100%",
2317
+ marginLeft: "0"
2318
+ },
2150
2319
  "& .M4LAppBar-containerIconMenuToggle": {
2151
2320
  display: "flex",
2152
- justifyContent: "center",
2153
2321
  alingItems: "center",
2154
2322
  width: "52px",
2155
2323
  height: "52px",
@@ -2158,6 +2326,7 @@ const i = (o) => ({
2158
2326
  alignItems: "center",
2159
2327
  borderRadius: "4px",
2160
2328
  borderColor: o.palette.state.default,
2329
+ justifyContent: "space-between",
2161
2330
  "& .M4LAppBar-iconMenuToggle": {
2162
2331
  background: o.palette.background.default,
2163
2332
  boxShadow: o.customShadows.z2,
@@ -2166,43 +2335,70 @@ const i = (o) => ({
2166
2335
  width: "36px",
2167
2336
  height: "36px",
2168
2337
  minWidth: "36px",
2169
- minHeight: "36px"
2338
+ minHeight: "36px",
2339
+ [o.breakpoints.down("sm")]: {
2340
+ background: o.palette.background.default,
2341
+ boxShadow: o.customShadows.z2,
2342
+ borderTop: "1px solid",
2343
+ borderColor: o.palette.state.default,
2344
+ width: "36px",
2345
+ height: "36px",
2346
+ minWidth: "36px",
2347
+ minHeight: "36px"
2348
+ }
2170
2349
  }
2171
2350
  },
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
2351
  "& .M4LAppBar-containerChilds": {
2184
2352
  display: "flex",
2185
- width: "70%",
2186
- overflow: "visible",
2187
- alignItems: "center",
2188
- borderRadius: "4px",
2353
+ flexDirection: "row",
2354
+ gap: "12px",
2355
+ width: "100%",
2356
+ justifyContent: "space-between",
2189
2357
  [o.breakpoints.down("sm")]: {
2190
- width: "100%",
2358
+ display: "flex",
2191
2359
  alignItems: "center",
2192
- gap: "8px",
2193
- borderRadius: "4px 0px 0px 4px",
2194
- display: "flex"
2360
+ width: "100%",
2361
+ borderTop: "0",
2362
+ borderColor: "none",
2363
+ background: "none",
2364
+ boxShadow: "none",
2365
+ paddingRight: "0px",
2366
+ borderRadius: "6px",
2367
+ overflow: "hidden"
2195
2368
  },
2196
- "& .M4LAvatar-root": {
2197
- width: "36px",
2198
- height: "36px",
2199
- "& .MuiAvatar-root": {
2369
+ "& .M4LAppBar-containerChilds": {
2370
+ display: "flex",
2371
+ width: "100%",
2372
+ overflow: "visible",
2373
+ alignItems: "center",
2374
+ borderRadius: "4px",
2375
+ background: "none",
2376
+ boxShadow: "none",
2377
+ justifyContent: "space-between",
2378
+ [o.breakpoints.down("sm")]: {
2379
+ width: "100%",
2380
+ alignItems: "center",
2381
+ gap: "8px",
2382
+ borderRadius: "4px 0px 0px 4px",
2383
+ display: "flex",
2384
+ background: "none",
2385
+ boxShadow: "none",
2386
+ borderTop: "0px"
2387
+ },
2388
+ "& .M4LAvatar-root": {
2200
2389
  width: "36px",
2201
- height: "36px"
2390
+ height: "36px",
2391
+ "& .MuiAvatar-root": {
2392
+ width: "36px",
2393
+ height: "36px"
2394
+ }
2202
2395
  }
2203
2396
  }
2204
2397
  }
2205
2398
  }
2399
+ },
2400
+ "*css-1gn3ygk": {
2401
+ overflow: "hidden"
2206
2402
  }
2207
2403
  }
2208
2404
  }), v = (o) => ({
@@ -2210,8 +2406,8 @@ const i = (o) => ({
2210
2406
  styleOverrides: {
2211
2407
  "&.M4LAvatar-root": {
2212
2408
  "& .MuiAvatar-root": {
2213
- width: "32px",
2214
- height: "32px",
2409
+ width: "36px",
2410
+ height: "36px",
2215
2411
  borderRadius: "4px"
2216
2412
  },
2217
2413
  test: "root"
@@ -2417,11 +2613,12 @@ const i = (o) => ({
2417
2613
  M4LCommonActions: {
2418
2614
  styleOverrides: {
2419
2615
  "&.M4LCommonActions-root": {
2420
- padding: "14px",
2616
+ padding: "16px 0px 8px 0px",
2421
2617
  display: "flex",
2422
2618
  gap: "14px",
2423
2619
  justifyContent: "flex-end",
2424
- width: "100%"
2620
+ width: "100%",
2621
+ overflow: "visible"
2425
2622
  }
2426
2623
  }
2427
2624
  }
@@ -2491,6 +2688,7 @@ const i = (o) => ({
2491
2688
  M4LTab: {
2492
2689
  styleOverrides: {
2493
2690
  "&.M4LTab-root": {
2691
+ width: "fit-content",
2494
2692
  "& .MuiButtonBase-root": {
2495
2693
  borderRadius: "4px",
2496
2694
  display: "flex",
@@ -2502,8 +2700,9 @@ const i = (o) => ({
2502
2700
  minHeight: "fit-content",
2503
2701
  minWidth: "fit-content",
2504
2702
  gap: "8px",
2505
- ...o.typography.paragraph,
2506
- color: o.palette.text.primary,
2703
+ ...o.typography.body,
2704
+ color: o.palette.text.secondary,
2705
+ lineHeight: "none",
2507
2706
  "& .M4LIcon-root": {
2508
2707
  marginBottom: "0"
2509
2708
  }
@@ -2520,6 +2719,9 @@ const i = (o) => ({
2520
2719
  border: "1px solid",
2521
2720
  borderColor: o.palette.state.active12,
2522
2721
  boxShadow: o.customShadows.z2,
2722
+ ...o.typography.bodyDens,
2723
+ color: o.palette.text.primary,
2724
+ lineHeight: "none",
2523
2725
  "&::before": {
2524
2726
  content: '""',
2525
2727
  width: "3px",
@@ -2740,7 +2942,7 @@ const i = (o) => ({
2740
2942
  }
2741
2943
  }
2742
2944
  }
2743
- }), P = (o) => ({
2945
+ }), z = (o) => ({
2744
2946
  M4LModalDialog: {
2745
2947
  styleOverrides: {
2746
2948
  "&.M4LModal-root": {
@@ -2863,7 +3065,7 @@ const i = (o) => ({
2863
3065
  }
2864
3066
  }
2865
3067
  }
2866
- }), z = (o) => ({
3068
+ }), P = (o) => ({
2867
3069
  M4LPaperForm: {
2868
3070
  styleOverrides: {
2869
3071
  "&.M4LPaperForm-root": {
@@ -2922,8 +3124,8 @@ const i = (o) => ({
2922
3124
  margin: "4px 2px 2px 2px",
2923
3125
  marginTop: "0px",
2924
3126
  color: o.palette.text.primary,
2925
- borderTop: "1px solid",
2926
- borderColor: o.palette.background.background,
3127
+ borderTop: "1.5px solid",
3128
+ borderColor: o.palette.state.borderTop,
2927
3129
  ...o.typography.body
2928
3130
  }
2929
3131
  }
@@ -2941,8 +3143,8 @@ const i = (o) => ({
2941
3143
  export {
2942
3144
  m as A,
2943
3145
  D as B,
2944
- P as C,
2945
- z as D,
3146
+ z as C,
3147
+ P as D,
2946
3148
  V as E,
2947
3149
  b as M,
2948
3150
  i as a,
@@ -2958,10 +3160,10 @@ export {
2958
3160
  u as k,
2959
3161
  x as l,
2960
3162
  g as m,
2961
- L as n,
2962
- w as o,
2963
- y as p,
2964
- f as q,
3163
+ y as n,
3164
+ f as o,
3165
+ L as p,
3166
+ w as q,
2965
3167
  v as r,
2966
3168
  h as s,
2967
3169
  k as t,