@m4l/styles 0.0.47 → 0.0.49

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.
@@ -21,7 +21,6 @@ export declare const M4LSplitLayout: (theme: Theme) => {
21
21
  width: string;
22
22
  height: string;
23
23
  '& .M4LStack-root': {
24
- gap: string;
25
24
  overflow: string;
26
25
  };
27
26
  };
@@ -6,6 +6,7 @@ export declare const M4LTab: (theme: Theme) => {
6
6
  width: string;
7
7
  background: string;
8
8
  borderRadius: string;
9
+ zIndex: string;
9
10
  "& .MuiButtonBase-root": {
10
11
  color: string;
11
12
  lineHeight: string;
@@ -24,6 +25,9 @@ export declare const M4LTab: (theme: Theme) => {
24
25
  minWidth: string;
25
26
  gap: string;
26
27
  };
28
+ "& .MuiTab-root": {
29
+ borderBottom: string;
30
+ };
27
31
  "& .MuiButtonBase-root:hover": {
28
32
  color: string;
29
33
  "& .M4LIcon-icon": {
@@ -44,7 +48,10 @@ export declare const M4LTab: (theme: Theme) => {
44
48
  position: string;
45
49
  };
46
50
  background: string;
47
- border: string;
51
+ borderTop: string;
52
+ borderLeft: string;
53
+ borderRight: string;
54
+ borderBottom: string;
48
55
  };
49
56
  };
50
57
  };
@@ -13,6 +13,17 @@ export declare const M4LTabContent: (theme: Theme) => {
13
13
  borderRadius: string;
14
14
  position: string;
15
15
  flex: number;
16
+ borderTop: string;
17
+ borderLeft: string;
18
+ borderRight: string;
19
+ borderBottom: string;
20
+ borderColor: string;
21
+ boxSizing: string;
22
+ zIndex: string;
23
+ top: string;
24
+ "& .M4LStack-root": {
25
+ gap: string;
26
+ };
16
27
  '&.M4LTabContent-root > div': {
17
28
  gap: string;
18
29
  };
@@ -8,6 +8,7 @@ export declare const M4LTabs: (_theme: Theme) => {
8
8
  position: string;
9
9
  minHeight: string;
10
10
  borderRadius: string;
11
+ zIndex: string;
11
12
  '& .MuiTabs-indicator': {
12
13
  display: string;
13
14
  };
@@ -28,7 +29,6 @@ export declare const M4LTabs: (_theme: Theme) => {
28
29
  '& .MuiTabs-flexContainer': {
29
30
  padding: string;
30
31
  backgroundColor: string;
31
- background: string;
32
32
  width: string;
33
33
  borderRadius: string;
34
34
  };
@@ -14,8 +14,7 @@ const c = (o) => ({
14
14
  padding: "0px",
15
15
  border: "1px solid",
16
16
  borderColor: o.palette.state.borderPrimary,
17
- minHeight: "32px",
18
- height: "32px",
17
+ height: "fit-content",
19
18
  [o.breakpoints.down("sm")]: {
20
19
  minHeight: "auto",
21
20
  height: "auto"
@@ -30,7 +29,8 @@ const c = (o) => ({
30
29
  "& .M4LDynamicFilter-wrapperApplyedFilters": {
31
30
  display: "flex",
32
31
  borderTop: "1px solid ",
33
- borderColor: o.palette.state.borderSecondary
32
+ borderColor: o.palette.state.borderSecondary,
33
+ height: "fit-content"
34
34
  }
35
35
  },
36
36
  "&.M4LDynamicFilter-isEmpty": {
@@ -129,7 +129,7 @@ const c = (o) => ({
129
129
  },
130
130
  "& .M4LDynamicFilter-wrapperApplyedFilters": {
131
131
  borderLeft: "none",
132
- height: "30px",
132
+ height: "fit-content",
133
133
  margin: "0px",
134
134
  padding: "0px 4px",
135
135
  [o.breakpoints.down("sm")]: {
@@ -140,7 +140,9 @@ const c = (o) => ({
140
140
  "& .M4LDynamicFilter-containerApplyedFilters": {
141
141
  padding: "2px",
142
142
  gap: "4px",
143
- height: "100%",
143
+ height: "fit-content",
144
+ display: "flex",
145
+ flexWrap: "wrap",
144
146
  [o.breakpoints.down("sm")]: {
145
147
  padding: "0px"
146
148
  }
@@ -208,6 +210,7 @@ const c = (o) => ({
208
210
  "& .M4LDynamicFilter-popoverFilterPaper": {
209
211
  padding: "0px",
210
212
  minWidth: "220px",
213
+ maxWidth: "100%",
211
214
  minHeight: "auto",
212
215
  boxShadow: o.customShadows.z3,
213
216
  "& .M4LPopover-arrowStyle": {
@@ -217,6 +220,7 @@ const c = (o) => ({
217
220
  gap: "0px",
218
221
  width: "max-content",
219
222
  minWidth: "220px",
223
+ maxWidth: "420px",
220
224
  height: "fit-content",
221
225
  "& .M4LDynamicFilter-popoverFilterHeader": {
222
226
  background: o.palette.state.default,
@@ -241,7 +245,8 @@ const c = (o) => ({
241
245
  [`& .M4LDynamicFilter-containerStringFilter,
242
246
  & .M4LDynamicFilter-containerBooleanFilter,
243
247
  & .M4LDynamicFilter-containerNumberFilter,
244
- & .M4LDynamicFilter-containerDateTimeFilter
248
+ & .M4LDynamicFilter-containerDateTimeFilter,
249
+ & .M4LDynamicFilter-containerSelectFilter
245
250
  `]: {
246
251
  display: "flex",
247
252
  height: "auto",
@@ -280,7 +285,8 @@ const c = (o) => ({
280
285
  [`& .M4LDynamicFilter-containerStringFilter,
281
286
  & .M4LDynamicFilter-containerBooleanFilter,
282
287
  & .M4LDynamicFilter-containerNumberFilter,
283
- & .M4LDynamicFilter-containerDateTimeFilter
288
+ & .M4LDynamicFilter-containerDateTimeFilter,
289
+ & .M4LDynamicFilter-containerSelectFilter
284
290
  `]: {
285
291
  display: "flex",
286
292
  height: "auto",
@@ -980,29 +986,21 @@ const c = (o) => ({
980
986
  borderColor: o.palette.state.borderPrimary,
981
987
  backgroundColor: o.palette.background.default,
982
988
  "& .M4LSideBar-contentGroups": {
989
+ padding: "32px 12px",
983
990
  "& .M4LSideBar-wrapperGroup": {
984
- overflow: "hidden",
985
- padding: "10px",
986
- borderTop: "unset",
991
+ overflow: "visible",
992
+ padding: "8px",
993
+ borderTop: "1px solid",
987
994
  borderBottom: "1px solid",
988
995
  borderColor: o.palette.state.borderSecondary,
989
- height: "100%",
996
+ height: "fit-content",
990
997
  width: "100%",
991
- flex: "1",
992
- "& .M4LSideBar-itemListMainRootContainer": {
993
- display: "flex",
994
- flexDirection: "column",
995
- width: "100%",
996
- height: "auto",
997
- overflow: "hidden"
998
- },
999
998
  "& .M4LSideBar-navItemRootContent": {
1000
999
  overflow: "hidden",
1001
1000
  height: "36px",
1002
1001
  padding: "0px 8px",
1003
1002
  display: "flex",
1004
- alignItems: "center",
1005
- position: "relative"
1003
+ alignItems: "center"
1006
1004
  }
1007
1005
  }
1008
1006
  },
@@ -1197,7 +1195,10 @@ const c = (o) => ({
1197
1195
  borderColor: o.palette.state.active12,
1198
1196
  boxShadow: o.shadows[1],
1199
1197
  "&:hover": {
1200
- background: t(o.palette.state.active || "#fff", 0.24),
1198
+ background: t(
1199
+ o.palette.state.active || "#fff",
1200
+ 0.24
1201
+ ),
1201
1202
  cursor: "pointer"
1202
1203
  }
1203
1204
  },
@@ -1226,10 +1227,10 @@ const c = (o) => ({
1226
1227
  "&::before": {
1227
1228
  content: '""',
1228
1229
  width: "3px",
1229
- height: "100%",
1230
- top: "0",
1231
- bottom: "0",
1232
- right: "0px",
1230
+ height: "50%",
1231
+ top: "25%",
1232
+ bottom: "25%",
1233
+ left: "0px",
1233
1234
  backgroundColor: o.palette.state.focus,
1234
1235
  borderRadius: "0px 4px 4px 0px",
1235
1236
  position: "absolute"
@@ -1491,7 +1492,10 @@ const c = (o) => ({
1491
1492
  "& .M4LSideBar-navItemMainRoot": {
1492
1493
  background: o.palette.state.active12,
1493
1494
  "&:hover": {
1494
- background: t(o.palette.state.active || "#fff", 0.24),
1495
+ background: t(
1496
+ o.palette.state.active || "#fff",
1497
+ 0.24
1498
+ ),
1495
1499
  cursor: "pointer"
1496
1500
  }
1497
1501
  },
@@ -1905,7 +1909,7 @@ const c = (o) => ({
1905
1909
  borderRadius: "4px 0px 0px 4px",
1906
1910
  justifyContent: "flex-start",
1907
1911
  flexDirection: "column",
1908
- marginBottom: "4px",
1912
+ paddingBottom: "4px",
1909
1913
  gap: "0px",
1910
1914
  height: "auto",
1911
1915
  "& .M4LSideBar-navItemMainRoot": {
@@ -1922,8 +1926,12 @@ const c = (o) => ({
1922
1926
  border: "1px solid",
1923
1927
  borderColor: o.palette.state.active12,
1924
1928
  "& .M4LSideBar-navItemMainRoot": {
1929
+ background: o.palette.state.active,
1925
1930
  "&:hover": {
1926
- background: t(o.palette.state.active || "#fff", 0.24),
1931
+ background: t(
1932
+ o.palette.state.active || "#fff",
1933
+ 0.24
1934
+ ),
1927
1935
  cursor: "pointer"
1928
1936
  }
1929
1937
  },
@@ -2196,7 +2204,10 @@ const c = (o) => ({
2196
2204
  "& .M4LSideBar-navItemMainRoot": {
2197
2205
  background: o.palette.state.active12,
2198
2206
  "&:hover": {
2199
- background: t(o.palette.state.active || "#fff", 0.24),
2207
+ background: t(
2208
+ o.palette.state.active || "#fff",
2209
+ 0.24
2210
+ ),
2200
2211
  cursor: "pointer"
2201
2212
  }
2202
2213
  },
@@ -2443,7 +2454,10 @@ const c = (o) => ({
2443
2454
  "& .M4LSideBar-navItemMainRoot": {
2444
2455
  background: o.palette.state.active12,
2445
2456
  "&:hover": {
2446
- background: t(o.palette.state.active || "#fff", 0.24),
2457
+ background: t(
2458
+ o.palette.state.active || "#fff",
2459
+ 0.24
2460
+ ),
2447
2461
  cursor: "pointer"
2448
2462
  }
2449
2463
  },
@@ -3321,7 +3335,7 @@ const c = (o) => ({
3321
3335
  flex: "1",
3322
3336
  overflow: "hidden",
3323
3337
  [o.breakpoints.up("sm")]: {
3324
- padding: "16px"
3338
+ padding: "12px"
3325
3339
  },
3326
3340
  "& .M4LAreasViewer-containerComponent": {
3327
3341
  display: "flex",
@@ -3472,7 +3486,7 @@ const c = (o) => ({
3472
3486
  },
3473
3487
  "& .M4LAreasViewer-windowContent": {
3474
3488
  background: o.palette.background.neutral,
3475
- padding: "24px"
3489
+ padding: "12px"
3476
3490
  }
3477
3491
  },
3478
3492
  "& .M4LAreasViewer-windowRoot": {
@@ -4231,7 +4245,6 @@ const c = (o) => ({
4231
4245
  width: "100%",
4232
4246
  height: "100%",
4233
4247
  "& .M4LStack-root": {
4234
- gap: "8px",
4235
4248
  overflow: "hidden"
4236
4249
  }
4237
4250
  },
@@ -4500,13 +4513,14 @@ const c = (o) => ({
4500
4513
  }
4501
4514
  }
4502
4515
  }
4503
- }), H = (o) => ({
4516
+ }), F = (o) => ({
4504
4517
  M4LTab: {
4505
4518
  styleOverrides: {
4506
4519
  "&.M4LTab-root": {
4507
4520
  width: "fit-content",
4508
4521
  background: o.palette.background.header,
4509
4522
  borderRadius: "4px 4px 0 0",
4523
+ zIndex: "3",
4510
4524
  "& .MuiButtonBase-root": {
4511
4525
  background: o.palette.background.header,
4512
4526
  height: "32px",
@@ -4524,8 +4538,15 @@ const c = (o) => ({
4524
4538
  borderRadius: "4px 4px 0 0",
4525
4539
  "& .M4LIcon-root": {
4526
4540
  marginBottom: "0"
4541
+ },
4542
+ [o.breakpoints.down("md")]: {
4543
+ height: "44px",
4544
+ minHeight: "fit-content"
4527
4545
  }
4528
4546
  },
4547
+ "& .MuiTab-root": {
4548
+ borderBottom: `1px solid ${o.palette.state.borderSecondary}`
4549
+ },
4529
4550
  "& .MuiButtonBase-root:hover": {
4530
4551
  color: o.palette.state.hover,
4531
4552
  "& .M4LIcon-icon": {
@@ -4534,7 +4555,10 @@ const c = (o) => ({
4534
4555
  },
4535
4556
  "& .Mui-selected": {
4536
4557
  background: o.palette.background.default,
4537
- border: "0px",
4558
+ borderTop: `1px solid ${o.palette.state.borderSecondary}`,
4559
+ borderLeft: `1px solid ${o.palette.state.borderSecondary}`,
4560
+ borderRight: `1px solid ${o.palette.state.borderSecondary}`,
4561
+ borderBottom: `1px solid ${o.palette.background.default}`,
4538
4562
  ...o.typography.bodyDens,
4539
4563
  color: o.palette.text.primary,
4540
4564
  lineHeight: "none",
@@ -4552,7 +4576,7 @@ const c = (o) => ({
4552
4576
  }
4553
4577
  }
4554
4578
  }
4555
- }), F = (o) => ({
4579
+ }), H = (o) => ({
4556
4580
  M4LAccordion: {
4557
4581
  styleOverrides: {
4558
4582
  "&.M4LAccordion-root": {
@@ -4987,7 +5011,6 @@ const c = (o) => ({
4987
5011
  flex: "1",
4988
5012
  overflow: "hidden",
4989
5013
  "& .M4LStack-root": {
4990
- gap: "8px",
4991
5014
  overflow: "hidden"
4992
5015
  }
4993
5016
  }
@@ -5658,6 +5681,7 @@ const c = (o) => ({
5658
5681
  position: "relative",
5659
5682
  minHeight: "32px",
5660
5683
  borderRadius: "4px 4px 0 0",
5684
+ zIndex: "2",
5661
5685
  "& .MuiTabs-indicator": {
5662
5686
  display: "none"
5663
5687
  },
@@ -5678,8 +5702,7 @@ const c = (o) => ({
5678
5702
  "& .MuiTabs-flexContainer": {
5679
5703
  padding: "0px",
5680
5704
  backgroundColor: "transparent",
5681
- background: o.palette.background.header,
5682
- width: "fit-content",
5705
+ width: "100%",
5683
5706
  borderRadius: "4px 4px 0 0"
5684
5707
  }
5685
5708
  },
@@ -5756,16 +5779,27 @@ const c = (o) => ({
5756
5779
  M4LTabContent: {
5757
5780
  styleOverrides: {
5758
5781
  "&.M4LTabContent-root": {
5759
- padding: "0px",
5782
+ padding: "12px",
5760
5783
  display: "flex",
5761
5784
  overflow: "hidden",
5762
5785
  height: "100%",
5763
5786
  flexDirection: "column",
5764
5787
  gap: "8px",
5765
5788
  background: o.palette.background.default,
5766
- borderRadius: "0 0 4px 4px",
5789
+ borderRadius: "0 4px 4px 4px",
5767
5790
  position: "relative",
5768
5791
  flex: 1,
5792
+ borderTop: "1px solid",
5793
+ borderLeft: "1px solid",
5794
+ borderRight: "1px solid",
5795
+ borderBottom: "1px solid",
5796
+ borderColor: o.palette.state.borderSecondary,
5797
+ boxSizing: "border-box",
5798
+ zIndex: "1",
5799
+ top: "-1px",
5800
+ "& .M4LStack-root": {
5801
+ gap: "8px !important"
5802
+ },
5769
5803
  "&.M4LTabContent-root > div": {
5770
5804
  gap: "8px"
5771
5805
  }
@@ -6546,8 +6580,8 @@ const c = (o) => ({
6546
6580
  }
6547
6581
  });
6548
6582
  export {
6549
- H as A,
6550
- F as B,
6583
+ F as A,
6584
+ H as B,
6551
6585
  z as C,
6552
6586
  V as D,
6553
6587
  O as E,
@@ -173,6 +173,19 @@ export declare const M4LRHFAutocomplete: (theme: Theme) => {
173
173
  };
174
174
  };
175
175
  };
176
+ '&.M4LRHFAutocomplete-multiple': {
177
+ '& .MuiAutocomplete-root': {
178
+ height: string;
179
+ };
180
+ '& .MuiAutocomplete-inputRoot': {
181
+ display: string;
182
+ flexWrap: string;
183
+ gap: string;
184
+ };
185
+ '& .MuiInputBase-root': {
186
+ padding: string;
187
+ };
188
+ };
176
189
  };
177
190
  };
178
191
  };
@@ -266,4 +279,28 @@ export declare const M4LRHFAutocomplete: (theme: Theme) => {
266
279
  };
267
280
  };
268
281
  };
282
+ M4LRHFAutocompleteChip: {
283
+ styleOverrides: {
284
+ '&.M4LRHFAutocomplete-sizeSmall': {
285
+ height: string;
286
+ minHeight: string;
287
+ '& .MuiChip-deleteIcon': {
288
+ fontSize: string;
289
+ };
290
+ '& .MuiChip-label': {
291
+ paddingRight: number;
292
+ };
293
+ };
294
+ '&.M4LRHFAutocomplete-sizeMedium': {
295
+ height: string;
296
+ minHeight: string;
297
+ '& .MuiChip-deleteIcon': {
298
+ fontSize: string;
299
+ };
300
+ '& .MuiChip-label': {
301
+ paddingRight: number;
302
+ };
303
+ };
304
+ };
305
+ };
269
306
  };
@@ -1,6 +1,6 @@
1
1
  import { alpha as o } from "@mui/system";
2
2
  import { alpha as e } from "@mui/material/styles";
3
- const a = (t) => ({
3
+ const r = (t) => ({
4
4
  M4LRHFTextFieldPassword: {
5
5
  styleOverrides: {
6
6
  "&.M4LRHFTextFieldPassword-root": {
@@ -8,7 +8,7 @@ const a = (t) => ({
8
8
  }
9
9
  }
10
10
  }
11
- }), n = (t) => ({
11
+ }), l = (t) => ({
12
12
  M4LRHFTextField: {
13
13
  styleOverrides: {
14
14
  "&.M4LRHFTextField-root": {
@@ -165,7 +165,7 @@ const a = (t) => ({
165
165
  }
166
166
  }
167
167
  }
168
- }), l = (t) => ({
168
+ }), n = (t) => ({
169
169
  M4LRHFCheckbox: {
170
170
  styleOverrides: {
171
171
  "&.M4LRHFCheckbox-root": {
@@ -413,6 +413,19 @@ const a = (t) => ({
413
413
  objectPosition: "left"
414
414
  }
415
415
  }
416
+ },
417
+ "&.M4LRHFAutocomplete-multiple": {
418
+ "& .MuiAutocomplete-root": {
419
+ height: "auto"
420
+ },
421
+ "& .MuiAutocomplete-inputRoot": {
422
+ display: "flex",
423
+ flexWrap: "wrap",
424
+ gap: "6px"
425
+ },
426
+ "& .MuiInputBase-root": {
427
+ padding: "2px !important"
428
+ }
416
429
  }
417
430
  }
418
431
  }
@@ -506,6 +519,30 @@ const a = (t) => ({
506
519
  }
507
520
  }
508
521
  }
522
+ },
523
+ M4LRHFAutocompleteChip: {
524
+ styleOverrides: {
525
+ "&.M4LRHFAutocomplete-sizeSmall": {
526
+ height: "18px",
527
+ minHeight: "18px !important",
528
+ "& .MuiChip-deleteIcon": {
529
+ fontSize: "16px"
530
+ },
531
+ "& .MuiChip-label": {
532
+ paddingRight: 0
533
+ }
534
+ },
535
+ "&.M4LRHFAutocomplete-sizeMedium": {
536
+ height: "24px",
537
+ minHeight: "24px !important",
538
+ "& .MuiChip-deleteIcon": {
539
+ fontSize: "20px"
540
+ },
541
+ "& .MuiChip-label": {
542
+ paddingRight: 0
543
+ }
544
+ }
545
+ }
509
546
  }
510
547
  }), d = (t) => ({
511
548
  M4LRHFAutocompleteAsync: {
@@ -1004,13 +1041,13 @@ const a = (t) => ({
1004
1041
  }
1005
1042
  });
1006
1043
  export {
1007
- n as M,
1008
- a,
1044
+ l as M,
1045
+ r as a,
1009
1046
  p as b,
1010
1047
  d as c,
1011
1048
  u as d,
1012
1049
  s as e,
1013
1050
  M as f,
1014
- l as g,
1051
+ n as g,
1015
1052
  c as h
1016
1053
  };
@@ -1,6 +1,6 @@
1
1
  import { F as s, C as o, M as r, L, I as M, a as n, R as i, B as p, b as c, T as l, P as d, S as u, c as g, d as B, A as F, e as P, D as A, f as T, g as b, h as C, i as y, j as S, k as I, l as R, m as v, n as H, o as k, p as D, q as f, r as x, s as w, t as G, u as V, v as j, w as E, x as N, y as O, z as q } from "./MUIComponents/index.d2b98b86.js";
2
- import { M as z, a as U, b as J, c as K, d as Q, e as W, f as X, g as Y, h as Z, i as _, j as $, k as t, l as m, m as e, n as h, o as aa, p as sa, q as oa, r as ra, s as La, t as Ma, u as na, v as ia, w as pa, x as ca, y as la, z as da, A as ua, B as ga, C as Ba, D as Fa, E as Pa, F as Aa, G as Ta, H as ba, I as Ca, J as ya, K as Sa, L as Ia, N as Ra, O as va, P as Ha, Q as ka, R as Da, S as fa, T as xa, U as wa, V as Ga, W as Va, X as ja, Y as Ea, Z as Na, _ as Oa } from "./M4LExtendedComponents/index.53575c95.js";
3
- import { M as qa, a as za, b as Ua, c as Ja, d as Ka, e as Qa, f as Wa, g as Xa, h as Ya } from "./M4LRHFComponents/index.02fada22.js";
2
+ import { M as z, a as U, b as J, c as K, d as Q, e as W, f as X, g as Y, h as Z, i as _, j as $, k as t, l as m, m as e, n as h, o as aa, p as sa, q as oa, r as ra, s as La, t as Ma, u as na, v as ia, w as pa, x as ca, y as la, z as da, A as ua, B as ga, C as Ba, D as Fa, E as Pa, F as Aa, G as Ta, H as ba, I as Ca, J as ya, K as Sa, L as Ia, N as Ra, O as va, P as Ha, Q as ka, R as Da, S as fa, T as xa, U as wa, V as Ga, W as Va, X as ja, Y as Ea, Z as Na, _ as Oa } from "./M4LExtendedComponents/index.0ba2f034.js";
3
+ import { M as qa, a as za, b as Ua, c as Ja, d as Ka, e as Qa, f as Wa, g as Xa, h as Ya } from "./M4LRHFComponents/index.f37c2406.js";
4
4
  function ta(a) {
5
5
  return Object.assign(
6
6
  s(a),