@movable/ui 4.0.3 → 4.0.4-five.0

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.
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material/Grid2';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type LayoutDetailsProps = GridProps & {
3
3
  Header: JSX.Element;
4
4
  children: React.ReactNode;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material/Grid2';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type IndexLayoutProps = GridProps & {
3
3
  Header: JSX.Element;
4
4
  children: React.ReactNode;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material/Grid2';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type WorkflowLayoutProps = GridProps & {
3
3
  Header: JSX.Element;
4
4
  children: React.ReactNode;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material/Grid2';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type EightColumnFullContentLayoutProps = {
3
3
  children: React.ReactNode;
4
4
  containerProps?: GridProps;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material/Grid2';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type FiveThreeSplitContentLayoutProps = {
3
3
  leftContent: React.ReactNode;
4
4
  rightContent: React.ReactNode;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type FourEightSplitContentLayoutProps = {
3
3
  leftContent: React.ReactNode;
4
4
  rightContent: React.ReactNode;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type FullContentLayoutProps = {
3
3
  children: React.ReactNode;
4
4
  containerProps?: GridProps;
@@ -1,5 +1,5 @@
1
1
  import { BoxProps } from '@mui/material';
2
- import { Grid2Props as GridProps } from '@mui/material/Grid2';
2
+ import { GridProps } from '@mui/material/Grid';
3
3
  type PanelWithPaperContentLayoutProps = React.PropsWithChildren<{
4
4
  panelContent: React.ReactNode;
5
5
  children: React.ReactNode;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material/Grid2';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type SevenThreeSplitContentLayoutProps = {
3
3
  leftContent: React.ReactNode;
4
4
  rightContent: React.ReactNode;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type BaseContentLayoutProps = {
3
3
  containerProps?: GridProps;
4
4
  leftContent: React.ReactNode;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material/Grid2';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type TenColumnFullContentLayoutProps = {
3
3
  children: React.ReactNode;
4
4
  containerProps?: GridProps;
@@ -1,4 +1,4 @@
1
- import { Grid2Props as GridProps } from '@mui/material';
1
+ import { GridProps } from '@mui/material/Grid';
2
2
  type TwelveColumnFullContentLayoutProps = {
3
3
  children: React.ReactNode;
4
4
  containerProps?: GridProps;
@@ -1,294 +1,284 @@
1
1
  declare const chip: {
2
2
  MuiChip: {
3
3
  styleOverrides: {
4
- filledDefault: {
5
- backgroundColor: "#eeeeee";
6
- color: "#212121";
7
- '&.MuiChip-clickable': {
8
- '&:hover, &:focus, &:active': {
9
- color: "#212121";
10
- backgroundColor: "#e0e0e0";
11
- };
12
- };
13
- '.MuiChip-deleteIcon': {
14
- color: "#616161";
15
- opacity: number;
16
- '&:hover, &:focus, &:active': {
17
- color: "#616161";
18
- };
19
- };
20
- };
21
- filledPrimary: {
22
- backgroundColor: "#e3f2fd";
23
- color: string;
24
- '&.MuiChip-clickable': {
25
- '&:hover, &:focus, &:active': {
4
+ root: {
5
+ variants: ({
6
+ props: {
7
+ variant: string;
26
8
  color: string;
27
- backgroundColor: "#bbdefb";
28
9
  };
29
- };
30
- '.MuiChip-deleteIcon': {
31
- color: string;
32
- opacity: number;
33
- '&:hover, &:focus, &:active': {
10
+ style: {
11
+ backgroundColor: "#eeeeee";
12
+ color: "#212121";
13
+ '&.MuiChip-clickable': {
14
+ '&:hover, &:focus, &:active': {
15
+ color: "#212121";
16
+ backgroundColor: "#e0e0e0";
17
+ };
18
+ };
19
+ '.MuiChip-deleteIcon': {
20
+ color: "#616161";
21
+ opacity: number;
22
+ '&:hover, &:focus, &:active': {
23
+ color: "#616161";
24
+ };
25
+ '&:hover,&:focus, &:active'?: undefined;
26
+ };
27
+ };
28
+ } | {
29
+ props: {
30
+ variant: string;
34
31
  color: string;
35
32
  };
36
- };
37
- };
38
- filledSecondary: {
39
- backgroundColor: "#f3e5f5";
40
- color: string;
41
- '&.MuiChip-clickable': {
42
- '&:hover, &:focus, &:active': {
33
+ style: {
34
+ backgroundColor: "#e3f2fd";
43
35
  color: string;
44
- backgroundColor: "#e1bee7";
45
- };
46
- };
47
- '.MuiChip-deleteIcon': {
48
- color: "#7b1fa2";
49
- opacity: number;
50
- '&:hover, &:focus, &:active': {
51
- color: "#7b1fa2";
52
- };
53
- };
54
- };
55
- filledError: {
56
- backgroundColor: "#ffebee";
57
- color: string;
58
- '&.MuiChip-clickable': {
59
- '&:hover, &:focus, &:active': {
36
+ '&.MuiChip-clickable': {
37
+ '&:hover, &:focus, &:active': {
38
+ color: string;
39
+ backgroundColor: "#bbdefb";
40
+ };
41
+ };
42
+ '.MuiChip-deleteIcon': {
43
+ color: string;
44
+ opacity: number;
45
+ '&:hover, &:focus, &:active': {
46
+ color: string;
47
+ };
48
+ '&:hover,&:focus, &:active'?: undefined;
49
+ };
50
+ };
51
+ } | {
52
+ props: {
53
+ variant: string;
60
54
  color: string;
61
- backgroundColor: "#ffcdd2";
62
- };
63
- };
64
- '.MuiChip-deleteIcon': {
65
- color: "#c62828";
66
- opacity: number;
67
- '&:hover, &:focus, &:active': {
68
- color: "#c62828";
69
55
  };
70
- };
71
- };
72
- filledWarning: {
73
- backgroundColor: "#fff3e0";
74
- color: string;
75
- '&.MuiChip-clickable': {
76
- '&:hover, &:focus, &:active': {
56
+ style: {
57
+ backgroundColor: "#f3e5f5";
77
58
  color: string;
78
- backgroundColor: "#ffe0b2";
79
- };
80
- };
81
- '.MuiChip-deleteIcon': {
82
- color: string;
83
- opacity: number;
84
- '&:hover, &:focus, &:active': {
59
+ '&.MuiChip-clickable': {
60
+ '&:hover, &:focus, &:active': {
61
+ color: string;
62
+ backgroundColor: "#e1bee7";
63
+ };
64
+ };
65
+ '.MuiChip-deleteIcon': {
66
+ color: "#7b1fa2";
67
+ opacity: number;
68
+ '&:hover, &:focus, &:active': {
69
+ color: "#7b1fa2";
70
+ };
71
+ '&:hover,&:focus, &:active'?: undefined;
72
+ };
73
+ };
74
+ } | {
75
+ props: {
76
+ variant: string;
85
77
  color: string;
86
78
  };
87
- };
88
- };
89
- filledInfo: {
90
- backgroundColor: "#e0f7fa";
91
- color: "#006064";
92
- '&.MuiChip-clickable': {
93
- '&:hover, &:focus, &:active': {
94
- color: "#006064";
95
- backgroundColor: "#b2ebf2";
96
- };
97
- };
98
- '.MuiChip-deleteIcon': {
99
- color: "#01579b";
100
- opacity: number;
101
- '&:hover, &:focus, &:active': {
102
- color: "#01579b";
103
- };
104
- };
105
- };
106
- filledSuccess: {
107
- backgroundColor: string;
108
- color: string;
109
- '&.MuiChip-clickable': {
110
- '&:hover, &:focus, &:active': {
79
+ style: {
80
+ backgroundColor: "#ffebee";
111
81
  color: string;
112
- backgroundColor: string;
113
- };
114
- };
115
- '.MuiChip-deleteIcon': {
116
- color: "#388e3c";
117
- opacity: number;
118
- '&:hover, &:focus, &:active': {
119
- color: "#388e3c";
120
- };
121
- };
122
- };
123
- filledAi: {
124
- backgroundColor: "#ede7f6";
125
- color: "#311b92";
126
- '&.MuiChip-clickable': {
127
- '&:hover, &:focus, &:active': {
128
- color: "#311b92";
129
- backgroundColor: "#d1c4e9";
130
- };
131
- };
132
- '.MuiChip-deleteIcon': {
133
- color: "#311b92";
134
- opacity: number;
135
- '&:hover, &:focus, &:active': {
136
- color: "#311b92";
137
- };
138
- };
139
- };
140
- contrastFilledDefault: {
141
- color: string;
142
- backgroundColor: "#616161";
143
- '&.MuiChip-clickable': {
144
- '&:hover, &:focus, &:active': {
82
+ '&.MuiChip-clickable': {
83
+ '&:hover, &:focus, &:active': {
84
+ color: string;
85
+ backgroundColor: "#ffcdd2";
86
+ };
87
+ };
88
+ '.MuiChip-deleteIcon': {
89
+ color: "#c62828";
90
+ opacity: number;
91
+ '&:hover, &:focus, &:active': {
92
+ color: "#c62828";
93
+ };
94
+ '&:hover,&:focus, &:active'?: undefined;
95
+ };
96
+ };
97
+ } | {
98
+ props: {
99
+ variant: string;
145
100
  color: string;
146
- backgroundColor: "#424242";
147
101
  };
148
- };
149
- '.MuiChip-deleteIcon': {
150
- color: string;
151
- opacity: number;
152
- '&:hover, &:focus, &:active': {
102
+ style: {
103
+ backgroundColor: "#fff3e0";
153
104
  color: string;
154
- };
155
- };
156
- };
157
- contrastFilledPrimary: {
158
- color: string;
159
- backgroundColor: "#0091ea";
160
- '&.MuiChip-clickable': {
161
- '&:hover, &:focus, &:active': {
162
- color: string;
163
- backgroundColor: "#01579b";
164
- };
165
- };
166
- '.MuiChip-deleteIcon': {
167
- color: string;
168
- opacity: number;
169
- '&:hover, &:focus, &:active': {
170
- color: string;
171
- };
172
- };
173
- };
174
- contrastFilledSecondary: {
175
- color: string;
176
- backgroundColor: "#aa00ff";
177
- '&.MuiChip-clickable': {
178
- '&:hover, &:focus, &:active': {
105
+ '&.MuiChip-clickable': {
106
+ '&:hover, &:focus, &:active': {
107
+ color: string;
108
+ backgroundColor: "#ffe0b2";
109
+ };
110
+ };
111
+ '.MuiChip-deleteIcon': {
112
+ color: string;
113
+ opacity: number;
114
+ '&:hover, &:focus, &:active': {
115
+ color: string;
116
+ };
117
+ '&:hover,&:focus, &:active'?: undefined;
118
+ };
119
+ };
120
+ } | {
121
+ props: {
122
+ variant: string;
179
123
  color: string;
180
- backgroundColor: "#7b1fa2";
181
124
  };
182
- };
183
- '.MuiChip-deleteIcon': {
184
- color: string;
185
- opacity: number;
186
- '&:hover, &:focus, &:active': {
125
+ style: {
126
+ backgroundColor: "#e0f7fa";
127
+ color: "#006064";
128
+ '&.MuiChip-clickable': {
129
+ '&:hover, &:focus, &:active': {
130
+ color: "#006064";
131
+ backgroundColor: "#b2ebf2";
132
+ };
133
+ };
134
+ '.MuiChip-deleteIcon': {
135
+ color: "#01579b";
136
+ opacity: number;
137
+ '&:hover, &:focus, &:active': {
138
+ color: "#01579b";
139
+ };
140
+ '&:hover,&:focus, &:active'?: undefined;
141
+ };
142
+ };
143
+ } | {
144
+ props: {
145
+ variant: string;
187
146
  color: string;
188
147
  };
189
- };
190
- };
191
- contrastFilledError: {
192
- color: string;
193
- backgroundColor: "#d50000";
194
- '&.MuiChip-clickable': {
195
- '&:hover, &:focus, &:active': {
148
+ style: {
149
+ backgroundColor: string;
196
150
  color: string;
197
- backgroundColor: "#c62828";
198
- };
199
- };
200
- '.MuiChip-deleteIcon': {
201
- color: string;
202
- opacity: number;
203
- '&:hover,&:focus, &:active': {
151
+ '&.MuiChip-clickable': {
152
+ '&:hover, &:focus, &:active': {
153
+ color: string;
154
+ backgroundColor: string;
155
+ };
156
+ };
157
+ '.MuiChip-deleteIcon': {
158
+ color: "#388e3c";
159
+ opacity: number;
160
+ '&:hover, &:focus, &:active': {
161
+ color: "#388e3c";
162
+ };
163
+ '&:hover,&:focus, &:active'?: undefined;
164
+ };
165
+ };
166
+ } | {
167
+ props: {
168
+ variant: string;
204
169
  color: string;
205
170
  };
206
- };
207
- };
208
- contrastFilledWarning: {
209
- color: string;
210
- backgroundColor: "#f9a825";
211
- '&.MuiChip-clickable': {
212
- '&:hover, &:focus, &:active': {
213
- color: string;
214
- backgroundColor: "#f57f17";
215
- };
216
- };
217
- '.MuiChip-deleteIcon': {
218
- color: string;
219
- opacity: number;
220
- '&:hover,&:focus, &:active': {
171
+ style: {
172
+ backgroundColor: "#ede7f6";
173
+ color: "#311b92";
174
+ '&.MuiChip-clickable': {
175
+ '&:hover, &:focus, &:active': {
176
+ color: "#311b92";
177
+ backgroundColor: "#d1c4e9";
178
+ };
179
+ };
180
+ '.MuiChip-deleteIcon': {
181
+ color: "#311b92";
182
+ opacity: number;
183
+ '&:hover, &:focus, &:active': {
184
+ color: "#311b92";
185
+ };
186
+ '&:hover,&:focus, &:active'?: undefined;
187
+ };
188
+ };
189
+ } | {
190
+ props: {
191
+ variant: string;
221
192
  color: string;
222
193
  };
223
- };
224
- };
225
- contrastFilledInfo: {
226
- color: string;
227
- backgroundColor: "#00b8d4";
228
- '&.MuiChip-clickable': {
229
- '&:hover, &:focus, &:active': {
194
+ style: {
230
195
  color: string;
231
- backgroundColor: "#0097a7";
232
- };
233
- };
234
- '.MuiChip-deleteIcon': {
235
- color: string;
236
- opacity: number;
237
- '&:hover,&:focus, &:active': {
196
+ backgroundColor: "#616161";
197
+ '&.MuiChip-clickable': {
198
+ '&:hover, &:focus, &:active': {
199
+ color: string;
200
+ backgroundColor: "#424242";
201
+ };
202
+ };
203
+ '.MuiChip-deleteIcon': {
204
+ color: string;
205
+ opacity: number;
206
+ '&:hover, &:focus, &:active': {
207
+ color: string;
208
+ };
209
+ '&:hover,&:focus, &:active'?: undefined;
210
+ };
211
+ };
212
+ } | {
213
+ props: {
214
+ variant: string;
238
215
  color: string;
239
216
  };
240
- };
241
- };
242
- contrastFilledSuccess: {
243
- color: string;
244
- backgroundColor: string;
245
- '&.MuiChip-clickable': {
246
- '&:hover, &:focus, &:active': {
217
+ style: {
247
218
  color: string;
248
- backgroundColor: "#388e3c";
249
- };
250
- };
251
- '.MuiChip-deleteIcon': {
252
- color: string;
253
- opacity: number;
254
- '&:hover,&:focus, &:active': {
219
+ backgroundColor: "#0091ea";
220
+ '&.MuiChip-clickable': {
221
+ '&:hover, &:focus, &:active': {
222
+ color: string;
223
+ backgroundColor: "#01579b";
224
+ };
225
+ };
226
+ '.MuiChip-deleteIcon': {
227
+ color: string;
228
+ opacity: number;
229
+ '&:hover, &:focus, &:active': {
230
+ color: string;
231
+ };
232
+ '&:hover,&:focus, &:active'?: undefined;
233
+ };
234
+ };
235
+ } | {
236
+ props: {
237
+ variant: string;
255
238
  color: string;
256
239
  };
257
- };
258
- };
259
- contrastFilledAi: {
260
- color: string;
261
- backgroundColor: "#6200ea";
262
- '&.MuiChip-clickable': {
263
- '&:hover, &:focus, &:active': {
240
+ style: {
264
241
  color: string;
265
- backgroundColor: "#6200ea";
266
- };
267
- };
268
- '.MuiChip-deleteIcon': {
269
- color: string;
270
- opacity: number;
271
- '&:hover,&:focus, &:active': {
242
+ backgroundColor: "#aa00ff";
243
+ '&.MuiChip-clickable': {
244
+ '&:hover, &:focus, &:active': {
245
+ color: string;
246
+ backgroundColor: "#7b1fa2";
247
+ };
248
+ };
249
+ '.MuiChip-deleteIcon': {
250
+ color: string;
251
+ opacity: number;
252
+ '&:hover, &:focus, &:active': {
253
+ color: string;
254
+ };
255
+ '&:hover,&:focus, &:active'?: undefined;
256
+ };
257
+ };
258
+ } | {
259
+ props: {
260
+ variant: string;
272
261
  color: string;
273
262
  };
274
- };
275
- };
276
- contrastFilledInProgress: {
277
- color: string;
278
- backgroundColor: string;
279
- '&.MuiChip-clickable': {
280
- '&:hover, &:focus, &:active': {
263
+ style: {
281
264
  color: string;
282
265
  backgroundColor: string;
283
- };
284
- };
285
- '.MuiChip-deleteIcon': {
286
- color: string;
287
- opacity: number;
288
- '&:hover,&:focus, &:active': {
289
- color: string;
290
- };
291
- };
266
+ '&.MuiChip-clickable': {
267
+ '&:hover, &:focus, &:active': {
268
+ color: string;
269
+ backgroundColor: string;
270
+ };
271
+ };
272
+ '.MuiChip-deleteIcon': {
273
+ color: string;
274
+ opacity: number;
275
+ '&:hover,&:focus, &:active': {
276
+ color: string;
277
+ };
278
+ '&:hover, &:focus, &:active'?: undefined;
279
+ };
280
+ };
281
+ })[];
292
282
  };
293
283
  };
294
284
  };
@@ -1,4 +1,4 @@
1
- import { InputProps } from '@mui/material';
1
+ import { InputBaseProps } from '@mui/material';
2
2
  import { Theme } from '@mui/material/styles';
3
3
  declare const form: {
4
4
  MuiFormControl: {
@@ -152,7 +152,7 @@ declare const form: {
152
152
  };
153
153
  input: ({ theme, ownerState, }: {
154
154
  theme: Theme;
155
- ownerState: InputProps;
155
+ ownerState: InputBaseProps;
156
156
  }) => {
157
157
  padding: string;
158
158
  '&:focus': {