@m4l/styles 0.0.22 → 0.0.24

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 (41) hide show
  1. package/index.js +17 -17
  2. package/package.json +1 -1
  3. package/theme/{defaultThemeOptions.733652aa.js → defaultThemeOptions.d50c50f1.js} +5 -5
  4. package/theme/index.5e193e78.js +7 -0
  5. package/theme/overrides/M4LExtendedComponents/M4LAccordion.d.ts +1 -0
  6. package/theme/overrides/M4LExtendedComponents/M4LAccountPopover.d.ts +85 -25
  7. package/theme/overrides/M4LExtendedComponents/M4LAppBar.d.ts +2 -4
  8. package/theme/overrides/M4LExtendedComponents/M4LAreasAdmin.d.ts +5965 -218
  9. package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.d.ts +22 -2
  10. package/theme/overrides/M4LExtendedComponents/M4LAvatar.d.ts +9 -1
  11. package/theme/overrides/M4LExtendedComponents/M4LButton.d.ts +26 -1
  12. package/theme/overrides/M4LExtendedComponents/M4LDataGrid.d.ts +287 -821
  13. package/theme/overrides/M4LExtendedComponents/M4LDynamicFilter.d.ts +17 -12
  14. package/theme/overrides/M4LExtendedComponents/M4LMasterDetailLayout.d.ts +1 -3
  15. package/theme/overrides/M4LExtendedComponents/M4LModalDialog.d.ts +955 -4
  16. package/theme/overrides/M4LExtendedComponents/M4LModuleLayout.d.ts +0 -3
  17. package/theme/overrides/M4LExtendedComponents/M4LPager.d.ts +76 -0
  18. package/theme/overrides/M4LExtendedComponents/M4LPeriod.d.ts +14 -1
  19. package/theme/overrides/M4LExtendedComponents/M4LPopover.d.ts +4 -1
  20. package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts +158 -53
  21. package/theme/overrides/M4LExtendedComponents/M4LTab.d.ts +2 -1
  22. package/theme/overrides/M4LExtendedComponents/{index.28d622ba.js → index.83dad55c.js} +626 -240
  23. package/theme/overrides/MUIComponents/Avatar.d.ts +2 -0
  24. package/theme/overrides/MUIComponents/Button.d.ts +7 -0
  25. package/theme/overrides/MUIComponents/DataGrid.d.ts +1 -1616
  26. package/theme/overrides/MUIComponents/Input.d.ts +1 -1
  27. package/theme/overrides/MUIComponents/Menu.d.ts +1 -0
  28. package/theme/overrides/MUIComponents/{index.d308ce65.js → index.1489876d.js} +33 -22
  29. package/theme/overrides/{index.76becad2.js → index.03494fe3.js} +3 -3
  30. package/theme/palette.d.ts +10 -6
  31. package/theme/{palette.a914c187.js → palette.d06284f6.js} +53 -33
  32. package/theme/{shadows.3dfe77c2.js → shadows.7ecb0e23.js} +1 -1
  33. package/theme/{typography.dd335f0f.js → typography.b693a0c9.js} +4 -4
  34. package/types/augmentations.d.ts +1 -1
  35. package/types/types.d.ts +1 -1
  36. package/utils/getColorPresets.826b8bc5.js +70 -0
  37. package/utils/getColorPresets.d.ts +1 -1
  38. package/utils/{getColorState.184e9d10.js → getColorState.c9741929.js} +39 -27
  39. package/utils/getColorState.d.ts +1 -0
  40. package/theme/index.fa6b03ae.js +0 -7
  41. package/utils/getColorPresets.9c103b85.js +0 -70
package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts CHANGED
@@ -4,10 +4,22 @@ export declare const M4LSideBar: (theme: Theme) => {
4
4
  styleOverrides: {
5
5
  '&.M4LSideBar-root': {
6
6
  [x: string]: string | {
7
- '& .M4LImage-root': {
8
- minWidth: string;
9
- minHeight: string;
10
- background: string;
7
+ "& .M4LSideBar-wrapperSideBar": {
8
+ width: string;
9
+ "& .M4LSideBar-contentDesktop": {
10
+ "& .M4LSideBar-containerSideBarLogo": {
11
+ marginTop: string;
12
+ "& .M4LSideBar-containerLogo": {
13
+ gap: string;
14
+ paddingLeft: string;
15
+ width: string;
16
+ '& .M4LImage-root': {
17
+ minWidth: string;
18
+ minHeight: string;
19
+ };
20
+ };
21
+ };
22
+ };
11
23
  };
12
24
  width?: undefined;
13
25
  height?: undefined;
@@ -18,22 +30,26 @@ export declare const M4LSideBar: (theme: Theme) => {
18
30
  display?: undefined;
19
31
  flexDirection?: undefined;
20
32
  paddingLeft?: undefined;
33
+ gap?: undefined;
21
34
  } | {
22
35
  width: string;
23
36
  height: string;
24
37
  padding: string;
25
- '& .M4LImage-root'?: undefined;
38
+ "& .M4LSideBar-wrapperSideBar"?: undefined;
26
39
  '& .M4LSideBar-containerSideBarLogo'?: undefined;
27
40
  '& .M4LSideBar-contentGroups'?: undefined;
28
41
  '& .M4LSideBar-collapseButton'?: undefined;
29
42
  display?: undefined;
30
43
  flexDirection?: undefined;
31
44
  paddingLeft?: undefined;
45
+ gap?: undefined;
32
46
  } | {
33
47
  height: string;
48
+ width: string;
34
49
  '& .M4LSideBar-containerSideBarLogo': {
35
50
  display: string;
36
51
  justifyContent: string;
52
+ marginTop: string;
37
53
  '& .M4LSideBar-containerLogo': {
38
54
  display: string;
39
55
  justifyContent: string;
@@ -43,6 +59,7 @@ export declare const M4LSideBar: (theme: Theme) => {
43
59
  paddingTop: string;
44
60
  paddingBottom: string;
45
61
  gap: string;
62
+ paddingLeft: string;
46
63
  '& .M4LTypography-root': {
47
64
  display: string;
48
65
  width: string;
@@ -59,6 +76,8 @@ export declare const M4LSideBar: (theme: Theme) => {
59
76
  boxShadow: string;
60
77
  padding: string;
61
78
  borderRadius: string;
79
+ minWidth: string;
80
+ minHeight: string;
62
81
  };
63
82
  };
64
83
  };
@@ -71,12 +90,13 @@ export declare const M4LSideBar: (theme: Theme) => {
71
90
  display: string;
72
91
  height: string;
73
92
  marginRight: string;
93
+ marginLeft: string;
74
94
  backgroundColor: string;
75
95
  };
76
96
  '& .M4LSideBar-wrapperGroup': {
77
97
  height: string;
98
+ paddingLeft: string;
78
99
  '& .M4LSideBar-wrapperGroupTitle': {
79
- padding: string;
80
100
  height: string;
81
101
  '& .M4LTypography-root': {
82
102
  display: string;
@@ -95,14 +115,17 @@ export declare const M4LSideBar: (theme: Theme) => {
95
115
  justifyContent: string;
96
116
  flexDirection: string;
97
117
  padding: string;
118
+ gap: string;
98
119
  '& .M4LSideBar-navItemMainRoot': {
99
120
  backgroundColor: string;
121
+ borderRadius: string;
100
122
  '&:hover': {
101
123
  background: string;
102
124
  cursor: string;
103
125
  };
104
126
  };
105
127
  '&.M4LSideBar-itemMainActive': {
128
+ borderRadius: string;
106
129
  '& .M4LSideBar-navItemMainRoot': {
107
130
  background: string;
108
131
  '&:hover': {
@@ -115,13 +138,22 @@ export declare const M4LSideBar: (theme: Theme) => {
115
138
  '& .M4LIcon-icon': {
116
139
  backgroundColor: string;
117
140
  };
118
- '& .MuiTypography-root': {
119
- color: string;
141
+ '& .M4LTypography-root': {
142
+ '& .MuiTypography-root': {
143
+ color: string;
144
+ };
120
145
  };
121
146
  '& .M4LSideBar-arrowIconRoot .M4LIcon-icon': {
122
147
  backgroundColor: string;
123
148
  };
124
149
  };
150
+ '& .M4LSideBar-arrowIconRoot': {
151
+ "& .M4LIcon-root": {
152
+ "& .M4LIcon-icon": {
153
+ backgroundColor: string;
154
+ };
155
+ };
156
+ };
125
157
  '&::before': {
126
158
  content: string;
127
159
  width: string;
@@ -146,6 +178,8 @@ export declare const M4LSideBar: (theme: Theme) => {
146
178
  width: string;
147
179
  '& .M4LIcon-icon': {
148
180
  backgroundColor: string;
181
+ width: string;
182
+ height: string;
149
183
  };
150
184
  '& .M4LTypography-root': {
151
185
  display: string;
@@ -163,8 +197,24 @@ export declare const M4LSideBar: (theme: Theme) => {
163
197
  backgroundColor: string;
164
198
  };
165
199
  };
200
+ '& .M4LSideBar-arrowIconRoot': {
201
+ "& .M4LIcon-root": {
202
+ "& .M4LIcon-icon": {
203
+ background: string;
204
+ };
205
+ };
206
+ };
207
+ };
208
+ '& .M4LSideBar-containerListSubItem': {
209
+ paddingLeft: string;
210
+ '&:hover': {
211
+ background: string;
212
+ borderRadius: string;
213
+ };
166
214
  };
167
215
  '& .M4LSideBar-navListSubItemRoot': {
216
+ gap: string;
217
+ padding: string;
168
218
  '& .M4LSideBar-navSubItemContentRoot ': {
169
219
  width: string;
170
220
  height: string;
@@ -225,40 +275,45 @@ export declare const M4LSideBar: (theme: Theme) => {
225
275
  borderColor: string;
226
276
  justifyContent: string;
227
277
  marginRight: string;
278
+ marginLeft: string;
228
279
  gap: string;
280
+ alignItems: string;
229
281
  '& .M4LSideBar-containerLogoButton': {
230
282
  display: string;
231
283
  gap: string;
232
- '& .M4LSideBar-containerLogoButtonLogo': {
233
- width: string;
234
- height: string;
235
- };
284
+ width: string;
285
+ };
286
+ '& .M4LSideBar-containerLogoButtonLogo': {
287
+ width: string;
288
+ height: string;
236
289
  '& .M4LSideBar-containerLogoButtonIcon': {
237
290
  display: string;
238
291
  alignItems: string;
239
292
  };
240
293
  };
241
294
  };
242
- '& .M4LImage-root'?: undefined;
243
- width?: undefined;
295
+ "& .M4LSideBar-wrapperSideBar"?: undefined;
244
296
  padding?: undefined;
245
297
  display?: undefined;
246
298
  flexDirection?: undefined;
247
299
  paddingLeft?: undefined;
300
+ gap?: undefined;
248
301
  } | {
249
302
  width: string;
250
303
  display: string;
251
304
  flexDirection: string;
252
305
  paddingLeft: string;
253
- '& .M4LImage-root'?: undefined;
306
+ "& .M4LSideBar-wrapperSideBar"?: undefined;
254
307
  height?: undefined;
255
308
  padding?: undefined;
256
309
  '& .M4LSideBar-containerSideBarLogo'?: undefined;
257
310
  '& .M4LSideBar-contentGroups'?: undefined;
258
311
  '& .M4LSideBar-collapseButton'?: undefined;
312
+ gap?: undefined;
259
313
  } | {
260
314
  display: string;
261
- '& .M4LImage-root'?: undefined;
315
+ gap: string;
316
+ "& .M4LSideBar-wrapperSideBar"?: undefined;
262
317
  width?: undefined;
263
318
  height?: undefined;
264
319
  padding?: undefined;
@@ -275,17 +330,31 @@ export declare const M4LSideBar: (theme: Theme) => {
275
330
  paddingBottom: string;
276
331
  boxShadow: string;
277
332
  '&.M4LSideBar-collapsed': {
278
- '& .M4LImage-root': {
279
- minWidth: string;
280
- minHeight: string;
281
- background: string;
333
+ "& .M4LSideBar-wrapperSideBar": {
334
+ width: string;
335
+ "& .M4LSideBar-contentDesktop": {
336
+ "& .M4LSideBar-containerSideBarLogo": {
337
+ marginTop: string;
338
+ "& .M4LSideBar-containerLogo": {
339
+ gap: string;
340
+ paddingLeft: string;
341
+ width: string;
342
+ '& .M4LImage-root': {
343
+ minWidth: string;
344
+ minHeight: string;
345
+ };
346
+ };
347
+ };
348
+ };
282
349
  };
283
350
  };
284
351
  '& .M4LSideBar-wrapperSideBar': {
285
352
  height: string;
353
+ width: string;
286
354
  '& .M4LSideBar-containerSideBarLogo': {
287
355
  display: string;
288
356
  justifyContent: string;
357
+ marginTop: string;
289
358
  '& .M4LSideBar-containerLogo': {
290
359
  display: string;
291
360
  justifyContent: string;
@@ -295,6 +364,7 @@ export declare const M4LSideBar: (theme: Theme) => {
295
364
  paddingTop: string;
296
365
  paddingBottom: string;
297
366
  gap: string;
367
+ paddingLeft: string;
298
368
  '& .M4LTypography-root': {
299
369
  display: string;
300
370
  width: string;
@@ -311,6 +381,8 @@ export declare const M4LSideBar: (theme: Theme) => {
311
381
  boxShadow: string;
312
382
  padding: string;
313
383
  borderRadius: string;
384
+ minWidth: string;
385
+ minHeight: string;
314
386
  };
315
387
  };
316
388
  };
@@ -323,12 +395,13 @@ export declare const M4LSideBar: (theme: Theme) => {
323
395
  display: string;
324
396
  height: string;
325
397
  marginRight: string;
398
+ marginLeft: string;
326
399
  backgroundColor: string;
327
400
  };
328
401
  '& .M4LSideBar-wrapperGroup': {
329
402
  height: string;
403
+ paddingLeft: string;
330
404
  '& .M4LSideBar-wrapperGroupTitle': {
331
- padding: string;
332
405
  height: string;
333
406
  '& .M4LTypography-root': {
334
407
  display: string;
@@ -347,14 +420,17 @@ export declare const M4LSideBar: (theme: Theme) => {
347
420
  justifyContent: string;
348
421
  flexDirection: string;
349
422
  padding: string;
423
+ gap: string;
350
424
  '& .M4LSideBar-navItemMainRoot': {
351
425
  backgroundColor: string;
426
+ borderRadius: string;
352
427
  '&:hover': {
353
428
  background: string;
354
429
  cursor: string;
355
430
  };
356
431
  };
357
432
  '&.M4LSideBar-itemMainActive': {
433
+ borderRadius: string;
358
434
  '& .M4LSideBar-navItemMainRoot': {
359
435
  background: string;
360
436
  '&:hover': {
@@ -367,13 +443,22 @@ export declare const M4LSideBar: (theme: Theme) => {
367
443
  '& .M4LIcon-icon': {
368
444
  backgroundColor: string;
369
445
  };
370
- '& .MuiTypography-root': {
371
- color: string;
446
+ '& .M4LTypography-root': {
447
+ '& .MuiTypography-root': {
448
+ color: string;
449
+ };
372
450
  };
373
451
  '& .M4LSideBar-arrowIconRoot .M4LIcon-icon': {
374
452
  backgroundColor: string;
375
453
  };
376
454
  };
455
+ '& .M4LSideBar-arrowIconRoot': {
456
+ "& .M4LIcon-root": {
457
+ "& .M4LIcon-icon": {
458
+ backgroundColor: string;
459
+ };
460
+ };
461
+ };
377
462
  '&::before': {
378
463
  content: string;
379
464
  width: string;
@@ -398,6 +483,8 @@ export declare const M4LSideBar: (theme: Theme) => {
398
483
  width: string;
399
484
  '& .M4LIcon-icon': {
400
485
  backgroundColor: string;
486
+ width: string;
487
+ height: string;
401
488
  };
402
489
  '& .M4LTypography-root': {
403
490
  display: string;
@@ -415,8 +502,24 @@ export declare const M4LSideBar: (theme: Theme) => {
415
502
  backgroundColor: string;
416
503
  };
417
504
  };
505
+ '& .M4LSideBar-arrowIconRoot': {
506
+ "& .M4LIcon-root": {
507
+ "& .M4LIcon-icon": {
508
+ background: string;
509
+ };
510
+ };
511
+ };
512
+ };
513
+ '& .M4LSideBar-containerListSubItem': {
514
+ paddingLeft: string;
515
+ '&:hover': {
516
+ background: string;
517
+ borderRadius: string;
518
+ };
418
519
  };
419
520
  '& .M4LSideBar-navListSubItemRoot': {
521
+ gap: string;
522
+ padding: string;
420
523
  '& .M4LSideBar-navSubItemContentRoot ': {
421
524
  width: string;
422
525
  height: string;
@@ -477,14 +580,17 @@ export declare const M4LSideBar: (theme: Theme) => {
477
580
  borderColor: string;
478
581
  justifyContent: string;
479
582
  marginRight: string;
583
+ marginLeft: string;
480
584
  gap: string;
585
+ alignItems: string;
481
586
  '& .M4LSideBar-containerLogoButton': {
482
587
  display: string;
483
588
  gap: string;
484
- '& .M4LSideBar-containerLogoButtonLogo': {
485
- width: string;
486
- height: string;
487
- };
589
+ width: string;
590
+ };
591
+ '& .M4LSideBar-containerLogoButtonLogo': {
592
+ width: string;
593
+ height: string;
488
594
  '& .M4LSideBar-containerLogoButtonIcon': {
489
595
  display: string;
490
596
  alignItems: string;
@@ -500,6 +606,7 @@ export declare const M4LSideBar: (theme: Theme) => {
500
606
  };
501
607
  '& .M4LSideBar-contentDesktop': {
502
608
  display: string;
609
+ gap: string;
503
610
  };
504
611
  };
505
612
  };
@@ -508,10 +615,13 @@ export declare const M4LSideBar: (theme: Theme) => {
508
615
  styleOverrides: {
509
616
  '&.M4LSideBar-popover': {
510
617
  '& .M4LSideBar-navListSubItemRoot': {
618
+ width: string;
619
+ height: string;
511
620
  '& .M4LSideBar-navSubItemContentRoot': {
512
621
  gap: string;
513
- margin: string;
514
622
  padding: string;
623
+ height: string;
624
+ borderRadius: string;
515
625
  '&.M4LSideBar-subItemCollapseActive': {
516
626
  backgroundColor: string;
517
627
  };
@@ -527,6 +637,7 @@ export declare const M4LSideBar: (theme: Theme) => {
527
637
  };
528
638
  };
529
639
  '&.M4LSideBar-subItemActive': {
640
+ height: string;
530
641
  '& .M4LSideBar-navSubItemContentBullet': {
531
642
  height: string;
532
643
  borderRadius: string;
@@ -557,6 +668,7 @@ export declare const M4LSideBar: (theme: Theme) => {
557
668
  flexDirection: string;
558
669
  '& .M4LSideBar-containerSideBarLogo': {
559
670
  marginRight: string;
671
+ marginTop: string;
560
672
  '& .M4LSideBar-containerLogo': {
561
673
  height: string;
562
674
  display: string;
@@ -597,10 +709,12 @@ export declare const M4LSideBar: (theme: Theme) => {
597
709
  display: string;
598
710
  height: string;
599
711
  marginRight: string;
712
+ marginLeft: string;
600
713
  backgroundColor: string;
601
714
  };
602
715
  '& .M4LSideBar-wrapperGroup': {
603
716
  height: string;
717
+ paddingLeft: string;
604
718
  '& .M4LSideBar-wrapperGroupTitle': {
605
719
  padding: string;
606
720
  height: string;
@@ -621,21 +735,32 @@ export declare const M4LSideBar: (theme: Theme) => {
621
735
  justifyContent: string;
622
736
  flexDirection: string;
623
737
  padding: string;
624
- '& .M4LSideBar-navItemMainRoot': {
625
- backgroundColor: string;
626
- '&:hover': {
627
- background: string;
738
+ gap: string;
739
+ '&.M4LSideBar-navItemMainRoot': {
740
+ borderRadius: string;
741
+ '& .M4LSideBar-navItemMainRoot': {
742
+ backgroundColor: string;
743
+ '&:hover': {
744
+ background: string;
745
+ };
628
746
  };
629
747
  };
630
748
  '&.M4LSideBar-itemMainActive': {
749
+ color: string;
750
+ gap: string;
631
751
  '& .M4LSideBar-navItemMainRoot': {
632
752
  background: string;
753
+ padding: string;
633
754
  '&:hover': {
634
755
  background: string;
635
756
  };
636
757
  };
637
758
  '& .M4LSideBar-navItemRootContent': {
638
759
  '& .M4LSideBar-navItemRootContentIconTypo': {
760
+ display: string;
761
+ gap: string;
762
+ width: string;
763
+ alignItems: string;
639
764
  '& .M4LIcon-icon': {
640
765
  backgroundColor: string;
641
766
  };
@@ -712,6 +837,7 @@ export declare const M4LSideBar: (theme: Theme) => {
712
837
  '& .M4LTypography-root': {
713
838
  display: string;
714
839
  width: string;
840
+ flexGrow: string;
715
841
  '& .MuiTypography-root': {
716
842
  color: string;
717
843
  with: string;
@@ -731,27 +857,6 @@ export declare const M4LSideBar: (theme: Theme) => {
731
857
  backgroundColor: string;
732
858
  };
733
859
  };
734
- '& .M4LSideBar-collapseButton': {
735
- display: string;
736
- paddingTop: string;
737
- borderTop: string;
738
- borderColor: string;
739
- justifyContent: string;
740
- marginRight: string;
741
- gap: string;
742
- '& .M4LSideBar-containerLogoButton': {
743
- display: string;
744
- gap: string;
745
- '& .M4LSideBar-containerLogoButtonLogo': {
746
- width: string;
747
- height: string;
748
- };
749
- '& .M4LSideBar-containerLogoButtonIcon': {
750
- display: string;
751
- alignItems: string;
752
- };
753
- };
754
- };
755
860
  };
756
861
  };
757
862
  };
package/theme/overrides/M4LExtendedComponents/M4LTab.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const M4LTab: (theme: Theme) => {
4
4
  styleOverrides: {
5
5
  '&.M4LTab-root': {
6
6
  width: string;
7
+ borderRadius: string;
7
8
  "& .MuiButtonBase-root": {
8
9
  color: string;
9
10
  lineHeight: string;
@@ -36,6 +37,7 @@ export declare const M4LTab: (theme: Theme) => {
36
37
  width: string;
37
38
  height: string;
38
39
  left: string;
40
+ bottom: string;
39
41
  backgroundColor: string;
40
42
  borderRadius: string;
41
43
  position: string;
@@ -43,7 +45,6 @@ export declare const M4LTab: (theme: Theme) => {
43
45
  background: string;
44
46
  border: string;
45
47
  borderColor: string;
46
- boxShadow: string;
47
48
  };
48
49
  };
49
50
  };