@m4l/styles 0.0.45 → 0.0.47

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 (10) hide show
  1. package/index.js +3 -3
  2. package/package.json +1 -1
  3. package/theme/overrides/M4LExtendedComponents/M4LModalDialog.d.ts +20 -139
  4. package/theme/overrides/M4LExtendedComponents/M4LPager.d.ts +18 -3
  5. package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts +71 -9
  6. package/theme/overrides/M4LExtendedComponents/{index.21173919.js → index.53575c95.js} +102 -40
  7. package/theme/overrides/MUIComponents/{index.b3f5b7a7.js → index.d2b98b86.js} +41 -98
  8. package/theme/overrides/index.8e0b0233.js +110 -0
  9. package/theme/overrides/MUIComponents/Dialog.d.ts +0 -55
  10. package/theme/overrides/index.1864049e.js +0 -111
package/theme/overrides/M4LExtendedComponents/{index.21173919.js → index.53575c95.js} RENAMED
@@ -963,11 +963,13 @@ const c = (o) => ({
963
963
  zIndex: "1",
964
964
  height: "100%",
965
965
  transition: "all 0.3s",
966
+ width: "240px",
966
967
  "& .M4LSideBar-contentDesktop": {
967
968
  display: "flex",
968
969
  width: "100%",
969
970
  height: "100%",
970
971
  boxShadow: o.customShadows.z2,
972
+ transition: "all 0.3s",
971
973
  "& .M4LSideBar-containerContentGroupsFooter": {
972
974
  flexGrow: "1",
973
975
  display: "flex",
@@ -1045,6 +1047,7 @@ const c = (o) => ({
1045
1047
  minWidth: "20px",
1046
1048
  minHeight: "20px",
1047
1049
  "& .MuiButtonBase-root": {
1050
+ padding: "0px",
1048
1051
  width: "20px",
1049
1052
  height: "20px"
1050
1053
  }
@@ -1070,6 +1073,7 @@ const c = (o) => ({
1070
1073
  transition: "all 0.3s"
1071
1074
  },
1072
1075
  "& .M4LSideBar-subItemActive": {
1076
+ padding: "0px",
1073
1077
  "& .M4LIcon-icon": {
1074
1078
  backgroundColor: `${o.palette.state.focus}!important`
1075
1079
  }
@@ -1163,7 +1167,8 @@ const c = (o) => ({
1163
1167
  textOverflow: "ellipsis",
1164
1168
  textWrap: "nowrap",
1165
1169
  ...o.typography.paragraphDens,
1166
- textTransform: "capitalize"
1170
+ textTransform: "capitalize",
1171
+ fontWeight: "700"
1167
1172
  }
1168
1173
  }
1169
1174
  },
@@ -1172,7 +1177,7 @@ const c = (o) => ({
1172
1177
  borderRadius: "4px 0px 0px 4px",
1173
1178
  justifyContent: "flex-start",
1174
1179
  flexDirection: "column",
1175
- gap: "2px",
1180
+ gap: "4px",
1176
1181
  height: "auto",
1177
1182
  marginBottom: "2px",
1178
1183
  "& .M4LSideBar-navItemMainRoot": {
@@ -1184,11 +1189,13 @@ const c = (o) => ({
1184
1189
  }
1185
1190
  },
1186
1191
  "&.M4LSideBar-itemMainActive": {
1187
- background: o.palette.state.active12,
1188
1192
  borderRadius: "4px",
1189
1193
  height: "auto",
1190
1194
  "& .M4LSideBar-navItemMainRoot": {
1191
1195
  background: o.palette.state.active12,
1196
+ border: "1px solid",
1197
+ borderColor: o.palette.state.active12,
1198
+ boxShadow: o.shadows[1],
1192
1199
  "&:hover": {
1193
1200
  background: t(o.palette.state.active || "#fff", 0.24),
1194
1201
  cursor: "pointer"
@@ -1224,7 +1231,7 @@ const c = (o) => ({
1224
1231
  bottom: "0",
1225
1232
  right: "0px",
1226
1233
  backgroundColor: o.palette.state.focus,
1227
- borderRadius: "4px 0px 0px 4px",
1234
+ borderRadius: "0px 4px 4px 0px",
1228
1235
  position: "absolute"
1229
1236
  }
1230
1237
  }
@@ -1272,9 +1279,10 @@ const c = (o) => ({
1272
1279
  paddingLeft: "0px"
1273
1280
  },
1274
1281
  "& .M4LSideBar-navListSubItemRoot": {
1275
- gap: "12px",
1282
+ gap: "8px",
1276
1283
  padding: "0px",
1277
1284
  "& .M4LSideBar-navSubItemContentRoot ": {
1285
+ padding: "0px 8px",
1278
1286
  width: "100%",
1279
1287
  height: "32px",
1280
1288
  borderRadius: "4px",
@@ -1282,7 +1290,10 @@ const c = (o) => ({
1282
1290
  "&.M4LSideBar-subItemCollapseActive": {
1283
1291
  backgroundColor: o.palette.state.active12,
1284
1292
  gap: "8px",
1293
+ border: "1px solid",
1294
+ borderColor: o.palette.state.active12,
1285
1295
  "& .MuiButtonBase-root": {
1296
+ padding: "0px",
1286
1297
  "& .M4LIcon-root": {
1287
1298
  "& .M4LIcon-icon": {
1288
1299
  backgroundColor: o.palette.state.focus
@@ -1292,6 +1303,7 @@ const c = (o) => ({
1292
1303
  },
1293
1304
  "& .M4LSideBar-subItemActive": {
1294
1305
  "& .MuiButtonBase-root": {
1306
+ padding: "0px",
1295
1307
  "& .M4LIcon-root": {
1296
1308
  "& .M4LIcon-icon": {}
1297
1309
  },
@@ -1312,7 +1324,7 @@ const c = (o) => ({
1312
1324
  }
1313
1325
  },
1314
1326
  "& .M4LSideBar-navSubItemContentRoot": {
1315
- gap: "12px",
1327
+ gap: "8px",
1316
1328
  margin: "0px 0px 0px 0px",
1317
1329
  "& .M4LSideBar-navSubItemContentBullet": {
1318
1330
  minWidth: "5px",
@@ -1343,7 +1355,7 @@ const c = (o) => ({
1343
1355
  }
1344
1356
  },
1345
1357
  "& .MuiCollapse-root": {
1346
- marginLeft: "18px"
1358
+ marginLeft: "8px"
1347
1359
  }
1348
1360
  }
1349
1361
  },
@@ -1432,6 +1444,7 @@ const c = (o) => ({
1432
1444
  flexGrow: "1",
1433
1445
  display: "flex",
1434
1446
  flexDirection: "column",
1447
+ gap: "8px",
1435
1448
  "& .M4LSideBar-contentGroupsLine": {
1436
1449
  display: "flex",
1437
1450
  height: "2px",
@@ -1461,7 +1474,7 @@ const c = (o) => ({
1461
1474
  justifyContent: "center",
1462
1475
  flexDirection: "column",
1463
1476
  padding: "0px 0px 8px 0px",
1464
- gap: "4px",
1477
+ gap: "0px",
1465
1478
  "& .M4LSideBar-navItemMainRoot": {
1466
1479
  backgroundColor: "transparent",
1467
1480
  borderRadius: "4px",
@@ -1473,6 +1486,8 @@ const c = (o) => ({
1473
1486
  "&.M4LSideBar-itemMainActive": {
1474
1487
  background: o.palette.state.active12,
1475
1488
  borderRadius: "4px",
1489
+ border: "1px solid",
1490
+ borderColor: o.palette.state.borderDisable,
1476
1491
  "& .M4LSideBar-navItemMainRoot": {
1477
1492
  background: o.palette.state.active12,
1478
1493
  "&:hover": {
@@ -1568,6 +1583,8 @@ const c = (o) => ({
1568
1583
  backgroundColor: o.palette.state.active12,
1569
1584
  gap: "8px",
1570
1585
  "& .MuiButtonBase-root": {
1586
+ paddingLeft: "0",
1587
+ padding: "0px",
1571
1588
  "& .M4LIcon-root": {
1572
1589
  "& .M4LIcon-icon": {
1573
1590
  backgroundColor: o.palette.state.focus
@@ -1577,6 +1594,8 @@ const c = (o) => ({
1577
1594
  },
1578
1595
  "& .M4LSideBar-subItemActive": {
1579
1596
  "& .MuiButtonBase-root": {
1597
+ paddingLeft: "0px",
1598
+ padding: "0px",
1580
1599
  "& .M4LIcon-root": {
1581
1600
  "& .M4LIcon-icon": {
1582
1601
  backgroundColor: `${o.palette.state.focus}!important`
@@ -1591,6 +1610,7 @@ const c = (o) => ({
1591
1610
  }
1592
1611
  },
1593
1612
  "&:hover": {
1613
+ padding: "0 8px",
1594
1614
  background: o.palette.state.default
1595
1615
  }
1596
1616
  },
@@ -1681,6 +1701,7 @@ const c = (o) => ({
1681
1701
  "& .M4LSideBar-navListSubItemRoot": {
1682
1702
  "& .M4LSideBar-subItemActive": {
1683
1703
  "& .MuiButtonBase-root": {
1704
+ padding: "0px",
1684
1705
  "& .M4LIcon-root": {
1685
1706
  "& .M4LIcon-icon": {
1686
1707
  backgroundColor: o.palette.state.focus
@@ -1693,6 +1714,7 @@ const c = (o) => ({
1693
1714
  "& .M4LSideBar-subItemActive": {
1694
1715
  height: "fit-content",
1695
1716
  "& .MuiButtonBase-root": {
1717
+ padding: "0px",
1696
1718
  "& .M4LIcon-root": {
1697
1719
  "& .M4LIcon-icon": {
1698
1720
  backgroundColor: `${o.palette.state.focus}!important`
@@ -1712,6 +1734,7 @@ const c = (o) => ({
1712
1734
  backgroundColor: o.palette.text.primary
1713
1735
  },
1714
1736
  "&:hover": {
1737
+ padding: "0 8px",
1715
1738
  background: o.palette.state.default
1716
1739
  }
1717
1740
  }
@@ -1751,6 +1774,7 @@ const c = (o) => ({
1751
1774
  "& .M4LSideBar-navListSubItemRoot": {
1752
1775
  "& .M4LSideBar-subItemActive": {
1753
1776
  "& .MuiButtonBase-root": {
1777
+ padding: "0px",
1754
1778
  "& .M4LIcon-root": {
1755
1779
  "& .M4LIcon-icon": {
1756
1780
  backgroundColor: o.palette.state.focus
@@ -1763,6 +1787,7 @@ const c = (o) => ({
1763
1787
  "& .M4LSideBar-subItemActive": {
1764
1788
  height: "fit-content",
1765
1789
  "& .MuiButtonBase-root": {
1790
+ padding: "0px",
1766
1791
  "& .M4LIcon-root": {
1767
1792
  "& .M4LIcon-icon": {
1768
1793
  backgroundColor: `${o.palette.state.focus}!important`
@@ -1782,6 +1807,7 @@ const c = (o) => ({
1782
1807
  backgroundColor: o.palette.text.primary
1783
1808
  },
1784
1809
  "&:hover": {
1810
+ padding: "0 8px",
1785
1811
  background: o.palette.state.default
1786
1812
  }
1787
1813
  }
@@ -1893,6 +1919,8 @@ const c = (o) => ({
1893
1919
  "&.M4LSideBar-itemMainActive": {
1894
1920
  borderRadius: "4px",
1895
1921
  background: o.palette.state.active12,
1922
+ border: "1px solid",
1923
+ borderColor: o.palette.state.active12,
1896
1924
  "& .M4LSideBar-navItemMainRoot": {
1897
1925
  "&:hover": {
1898
1926
  background: t(o.palette.state.active || "#fff", 0.24),
@@ -1984,10 +2012,13 @@ const c = (o) => ({
1984
2012
  height: "32px",
1985
2013
  borderRadius: "4px",
1986
2014
  gap: "8px",
2015
+ padding: "0px",
1987
2016
  "&.M4LSideBar-subItemCollapseActive": {
1988
2017
  backgroundColor: o.palette.state.active12,
1989
2018
  gap: "8px",
2019
+ padding: "0px",
1990
2020
  "& .MuiButtonBase-root": {
2021
+ padding: "0px",
1991
2022
  "& .M4LIcon-root": {
1992
2023
  "& .M4LIcon-icon": {
1993
2024
  backgroundColor: o.palette.state.focus
@@ -1997,6 +2028,7 @@ const c = (o) => ({
1997
2028
  },
1998
2029
  "& .M4LSideBar-subItemActive": {
1999
2030
  "& .MuiButtonBase-root": {
2031
+ padding: "0px",
2000
2032
  "& .M4LIcon-root": {
2001
2033
  "& .M4LIcon-icon": {
2002
2034
  backgroundColor: `${o.palette.state.focus}!important`
@@ -2011,13 +2043,14 @@ const c = (o) => ({
2011
2043
  }
2012
2044
  },
2013
2045
  "&:hover": {
2046
+ padding: "0 8px",
2014
2047
  background: o.palette.state.default
2015
2048
  }
2016
2049
  },
2017
2050
  "& .M4LSideBar-navSubItemContentRoot": {
2018
2051
  gap: "12px",
2019
2052
  margin: "0px 0px 0px 0px",
2020
- padding: "16px",
2053
+ padding: "8px",
2021
2054
  "& .M4LIcon-root": {
2022
2055
  minHeight: "24px",
2023
2056
  minWwidth: "24px",
@@ -2047,7 +2080,7 @@ const c = (o) => ({
2047
2080
  }
2048
2081
  },
2049
2082
  "& .MuiCollapse-root": {
2050
- marginLeft: "18px"
2083
+ marginLeft: "0px"
2051
2084
  }
2052
2085
  }
2053
2086
  },
@@ -2135,7 +2168,7 @@ const c = (o) => ({
2135
2168
  overflow: "hidden",
2136
2169
  textOverflow: "ellipsis",
2137
2170
  textWrap: "nowrap",
2138
- fontWeight: "400",
2171
+ fontWeight: "700",
2139
2172
  fontSize: "14px !important"
2140
2173
  }
2141
2174
  }
@@ -2146,7 +2179,7 @@ const c = (o) => ({
2146
2179
  justifyContent: "center",
2147
2180
  flexDirection: "column",
2148
2181
  padding: "0px 0px 8px 0px",
2149
- gap: "4px",
2182
+ gap: "0",
2150
2183
  "& .M4LSideBar-navItemMainRoot": {
2151
2184
  backgroundColor: "transparent",
2152
2185
  borderRadius: "4px",
@@ -2158,6 +2191,8 @@ const c = (o) => ({
2158
2191
  "&.M4LSideBar-itemMainActive": {
2159
2192
  borderRadius: "4px",
2160
2193
  background: o.palette.state.active12,
2194
+ border: "1px solid",
2195
+ borderColor: o.palette.state.active12,
2161
2196
  "& .M4LSideBar-navItemMainRoot": {
2162
2197
  background: o.palette.state.active12,
2163
2198
  "&:hover": {
@@ -2251,10 +2286,12 @@ const c = (o) => ({
2251
2286
  height: "32px",
2252
2287
  borderRadius: "4px",
2253
2288
  gap: "8px",
2289
+ padding: "0px",
2254
2290
  "&.M4LSideBar-subItemCollapseActive": {
2255
2291
  backgroundColor: o.palette.state.active12,
2256
2292
  gap: "8px",
2257
2293
  "& .MuiButtonBase-root": {
2294
+ padding: "0px",
2258
2295
  "& .M4LIcon-root": {
2259
2296
  "& .M4LIcon-icon": {
2260
2297
  backgroundColor: o.palette.state.focus
@@ -2264,6 +2301,7 @@ const c = (o) => ({
2264
2301
  },
2265
2302
  "& .M4LSideBar-subItemActive": {
2266
2303
  "& .MuiButtonBase-root": {
2304
+ padding: "0px",
2267
2305
  "& .M4LIcon-root": {
2268
2306
  "& .M4LIcon-icon": {
2269
2307
  backgroundColor: `${o.palette.state.focus}!important`
@@ -2278,13 +2316,14 @@ const c = (o) => ({
2278
2316
  }
2279
2317
  },
2280
2318
  "&:hover": {
2319
+ padding: "0 8px",
2281
2320
  background: o.palette.state.default
2282
2321
  }
2283
2322
  },
2284
2323
  "& .M4LSideBar-navSubItemContentRoot": {
2285
2324
  gap: "12px",
2286
2325
  margin: "0px 0px 0px 0px",
2287
- padding: "16px",
2326
+ padding: "0px",
2288
2327
  "& .M4LSideBar-navSubItemContentBullet": {
2289
2328
  minWidth: "5px",
2290
2329
  minHeight: "5px",
@@ -2399,6 +2438,8 @@ const c = (o) => ({
2399
2438
  "&.M4LSideBar-itemMainActive": {
2400
2439
  borderRadius: "4px",
2401
2440
  background: o.palette.state.active12,
2441
+ border: "1px solid",
2442
+ borderColor: o.palette.state.active12,
2402
2443
  "& .M4LSideBar-navItemMainRoot": {
2403
2444
  background: o.palette.state.active12,
2404
2445
  "&:hover": {
@@ -2490,10 +2531,12 @@ const c = (o) => ({
2490
2531
  height: "32px",
2491
2532
  borderRadius: "4px",
2492
2533
  gap: "8px",
2534
+ padding: "0px",
2493
2535
  "&.M4LSideBar-subItemCollapseActive": {
2494
2536
  backgroundColor: o.palette.state.active12,
2495
2537
  gap: "8px",
2496
2538
  "& .MuiButtonBase-root": {
2539
+ padding: "0px",
2497
2540
  "& .M4LIcon-root": {
2498
2541
  "& .M4LIcon-icon": {
2499
2542
  backgroundColor: o.palette.state.focus
@@ -2503,6 +2546,7 @@ const c = (o) => ({
2503
2546
  },
2504
2547
  "& .M4LSideBar-subItemActive": {
2505
2548
  "& .MuiButtonBase-root": {
2549
+ padding: "0px",
2506
2550
  "& .M4LIcon-root": {
2507
2551
  "& .M4LIcon-icon": {
2508
2552
  backgroundColor: `${o.palette.state.focus}!important`
@@ -2517,13 +2561,14 @@ const c = (o) => ({
2517
2561
  }
2518
2562
  },
2519
2563
  "&:hover": {
2520
- background: o.palette.state.default
2564
+ background: o.palette.state.default,
2565
+ padding: "0 8px"
2521
2566
  }
2522
2567
  },
2523
2568
  "& .M4LSideBar-navSubItemContentRoot": {
2524
2569
  gap: "12px",
2525
2570
  margin: "0px 0px 0px 0px",
2526
- padding: "16px",
2571
+ padding: "0px",
2527
2572
  "& .M4LSideBar-navSubItemContentBullet": {
2528
2573
  minWidth: "5px",
2529
2574
  minHeight: "5px",
@@ -4848,26 +4893,7 @@ const c = (o) => ({
4848
4893
  styleOverrides: {
4849
4894
  "&.M4LModal-root": {
4850
4895
  test: "root",
4851
- "& .MuiPaper-root.MuiDialog-paper": {
4852
- display: "flex",
4853
- flexDirection: "column",
4854
- overflow: "hidden",
4855
- borderRadius: "4px",
4856
- margin: "0px",
4857
- width: "auto",
4858
- height: "auto",
4859
- maxWidth: "unset",
4860
- maxHeight: "unset",
4861
- background: o.palette.state.active12,
4862
- border: "2px solid",
4863
- borderColor: o.palette.state.borderPrimary,
4864
- boxShadow: o.customShadows.z4,
4865
- [o.breakpoints.down("sm")]: {
4866
- width: "100%",
4867
- height: "100%",
4868
- maxHeight: "100%",
4869
- borderColor: "transparent"
4870
- },
4896
+ "& .MuiPaper-root": {
4871
4897
  "& .M4LModal-windowBaseRoot": {
4872
4898
  display: "flex",
4873
4899
  flexDirection: "column",
@@ -4967,6 +4993,25 @@ const c = (o) => ({
4967
4993
  }
4968
4994
  }
4969
4995
  }
4996
+ },
4997
+ "& .MuiPaper-root.MuiDialog-paperFullScreen": {
4998
+ width: "100%",
4999
+ height: "100%"
5000
+ },
5001
+ "& .MuiPaper-root:not(.MuiDialog-paperFullScreen).MuiDialog-paper": {
5002
+ display: "flex",
5003
+ flexDirection: "column",
5004
+ overflow: "hidden",
5005
+ borderRadius: "4px",
5006
+ margin: "0px",
5007
+ maxWidth: "unset",
5008
+ maxHeight: "unset",
5009
+ background: o.palette.state.active12,
5010
+ border: "2px solid",
5011
+ borderColor: o.palette.state.borderPrimary,
5012
+ boxShadow: o.customShadows.z4,
5013
+ width: "auto",
5014
+ height: "auto"
4970
5015
  }
4971
5016
  }
4972
5017
  }
@@ -5421,7 +5466,6 @@ const c = (o) => ({
5421
5466
  display: "flex",
5422
5467
  flexDirection: "row",
5423
5468
  alignItems: "center",
5424
- gap: "12px",
5425
5469
  whiteSpace: "nowrap",
5426
5470
  width: "100%",
5427
5471
  justifyContent: "space-between",
@@ -5455,9 +5499,22 @@ const c = (o) => ({
5455
5499
  "& .M4LPager-labelRowsPerPageContainer": {
5456
5500
  display: "flex",
5457
5501
  flexDirection: "row",
5458
- gap: "8px",
5459
5502
  justifyContent: "center",
5460
- alignItems: "center"
5503
+ alignItems: "center",
5504
+ "& .M4LPager-select": {
5505
+ "& .MuiSelect-select": {
5506
+ ...o.typography.body,
5507
+ color: o.palette.text.primary
5508
+ },
5509
+ "& .MuiSelect-icon": {
5510
+ right: "0",
5511
+ top: "0",
5512
+ bottom: "0"
5513
+ }
5514
+ }
5515
+ },
5516
+ "& .M4LPager-labelDisplayRows": {
5517
+ marginLeft: "12px"
5461
5518
  },
5462
5519
  "& .MuiInputBase-root": {
5463
5520
  padding: "4px 2px 4px 6px",
@@ -5499,7 +5556,12 @@ const c = (o) => ({
5499
5556
  M4LPagerMenuPopover: {
5500
5557
  styleOverrides: {
5501
5558
  "&.M4LPager-selectMenuPopover": {
5502
- test: "root"
5559
+ "& .MuiList-root": {
5560
+ "& .MuiMenuItem-root": {
5561
+ ...o.typography.body,
5562
+ color: o.palette.text.primary
5563
+ }
5564
+ }
5503
5565
  }
5504
5566
  }
5505
5567
  }
@@ -6470,7 +6532,7 @@ const c = (o) => ({
6470
6532
  "& .M4LFieldLabel-mandatory": {
6471
6533
  marginLeft: "2px",
6472
6534
  "& .MuiTypography-root": {
6473
- color: o.palette.error.main
6535
+ color: o.palette.text.secondary
6474
6536
  }
6475
6537
  },
6476
6538
  "& .M4LFieldLabel-tooltip": {