@movable/ui 4.0.4-five.0 → 4.1.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.
Files changed (21) hide show
  1. package/lib/components/InkDrawer/InkDrawer.d.ts +2 -0
  2. package/lib/components/InkTextField/InkTextField.d.ts +2 -2
  3. package/lib/index.d.ts +33 -30
  4. package/lib/index.mjs +13059 -12076
  5. package/lib/index.mjs.map +1 -1
  6. package/lib/layouts/DetailsLayout.d.ts +1 -1
  7. package/lib/layouts/IndexLayout.d.ts +1 -1
  8. package/lib/layouts/WorkflowLayout.d.ts +1 -1
  9. package/lib/layouts/content-layouts/EightColumnFullContentLayout.d.ts +1 -1
  10. package/lib/layouts/content-layouts/FiveThreeSplitContentLayout.d.ts +1 -1
  11. package/lib/layouts/content-layouts/FourEightSplitContentLayout.d.ts +1 -1
  12. package/lib/layouts/content-layouts/FullContentLayout.d.ts +1 -1
  13. package/lib/layouts/content-layouts/PanelWithPaperContentLayout.d.ts +1 -1
  14. package/lib/layouts/content-layouts/SevenThreeSplitContentLayout.d.ts +1 -1
  15. package/lib/layouts/content-layouts/SplitContentLayout.d.ts +1 -1
  16. package/lib/layouts/content-layouts/TenColumnFullContentLayout.d.ts +1 -1
  17. package/lib/layouts/content-layouts/TwelveColumnFullContentLayout.d.ts +1 -1
  18. package/lib/theme/components/chip.d.ts +254 -244
  19. package/lib/theme/components/form.d.ts +2 -2
  20. package/lib/theme/components/stepper.d.ts +925 -2
  21. package/package.json +7 -7
package/lib/layouts/DetailsLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material/Grid2';
2
2
  type LayoutDetailsProps = GridProps & {
3
3
  Header: JSX.Element;
4
4
  children: React.ReactNode;
package/lib/layouts/IndexLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material/Grid2';
2
2
  type IndexLayoutProps = GridProps & {
3
3
  Header: JSX.Element;
4
4
  children: React.ReactNode;
package/lib/layouts/WorkflowLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material/Grid2';
2
2
  type WorkflowLayoutProps = GridProps & {
3
3
  Header: JSX.Element;
4
4
  children: React.ReactNode;
package/lib/layouts/content-layouts/EightColumnFullContentLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material/Grid2';
2
2
  type EightColumnFullContentLayoutProps = {
3
3
  children: React.ReactNode;
4
4
  containerProps?: GridProps;
package/lib/layouts/content-layouts/FiveThreeSplitContentLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material/Grid2';
2
2
  type FiveThreeSplitContentLayoutProps = {
3
3
  leftContent: React.ReactNode;
4
4
  rightContent: React.ReactNode;
package/lib/layouts/content-layouts/FourEightSplitContentLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material';
2
2
  type FourEightSplitContentLayoutProps = {
3
3
  leftContent: React.ReactNode;
4
4
  rightContent: React.ReactNode;
package/lib/layouts/content-layouts/FullContentLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material';
2
2
  type FullContentLayoutProps = {
3
3
  children: React.ReactNode;
4
4
  containerProps?: GridProps;
package/lib/layouts/content-layouts/PanelWithPaperContentLayout.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { BoxProps } from '@mui/material';
2
- import { GridProps } from '@mui/material/Grid';
2
+ import { Grid2Props as GridProps } from '@mui/material/Grid2';
3
3
  type PanelWithPaperContentLayoutProps = React.PropsWithChildren<{
4
4
  panelContent: React.ReactNode;
5
5
  children: React.ReactNode;
package/lib/layouts/content-layouts/SevenThreeSplitContentLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material/Grid2';
2
2
  type SevenThreeSplitContentLayoutProps = {
3
3
  leftContent: React.ReactNode;
4
4
  rightContent: React.ReactNode;
package/lib/layouts/content-layouts/SplitContentLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material';
2
2
  type BaseContentLayoutProps = {
3
3
  containerProps?: GridProps;
4
4
  leftContent: React.ReactNode;
package/lib/layouts/content-layouts/TenColumnFullContentLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material/Grid2';
2
2
  type TenColumnFullContentLayoutProps = {
3
3
  children: React.ReactNode;
4
4
  containerProps?: GridProps;
package/lib/layouts/content-layouts/TwelveColumnFullContentLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridProps } from '@mui/material/Grid';
1
+ import { Grid2Props as GridProps } from '@mui/material';
2
2
  type TwelveColumnFullContentLayoutProps = {
3
3
  children: React.ReactNode;
4
4
  containerProps?: GridProps;
package/lib/theme/components/chip.d.ts CHANGED
@@ -1,284 +1,294 @@
1
1
  declare const chip: {
2
2
  MuiChip: {
3
3
  styleOverrides: {
4
- root: {
5
- variants: ({
6
- props: {
7
- variant: string;
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': {
8
26
  color: string;
27
+ backgroundColor: "#bbdefb";
9
28
  };
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;
29
+ };
30
+ '.MuiChip-deleteIcon': {
31
+ color: string;
32
+ opacity: number;
33
+ '&:hover, &:focus, &:active': {
31
34
  color: string;
32
35
  };
33
- style: {
34
- backgroundColor: "#e3f2fd";
36
+ };
37
+ };
38
+ filledSecondary: {
39
+ backgroundColor: "#f3e5f5";
40
+ color: string;
41
+ '&.MuiChip-clickable': {
42
+ '&:hover, &:focus, &:active': {
35
43
  color: string;
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;
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': {
54
60
  color: string;
61
+ backgroundColor: "#ffcdd2";
62
+ };
63
+ };
64
+ '.MuiChip-deleteIcon': {
65
+ color: "#c62828";
66
+ opacity: number;
67
+ '&:hover, &:focus, &:active': {
68
+ color: "#c62828";
55
69
  };
56
- style: {
57
- backgroundColor: "#f3e5f5";
70
+ };
71
+ };
72
+ filledWarning: {
73
+ backgroundColor: "#fff3e0";
74
+ color: string;
75
+ '&.MuiChip-clickable': {
76
+ '&:hover, &:focus, &:active': {
58
77
  color: string;
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;
78
+ backgroundColor: "#ffe0b2";
79
+ };
80
+ };
81
+ '.MuiChip-deleteIcon': {
82
+ color: string;
83
+ opacity: number;
84
+ '&:hover, &:focus, &:active': {
77
85
  color: string;
78
86
  };
79
- style: {
80
- backgroundColor: "#ffebee";
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': {
81
111
  color: string;
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;
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': {
100
145
  color: string;
146
+ backgroundColor: "#424242";
101
147
  };
102
- style: {
103
- backgroundColor: "#fff3e0";
148
+ };
149
+ '.MuiChip-deleteIcon': {
150
+ color: string;
151
+ opacity: number;
152
+ '&:hover, &:focus, &:active': {
104
153
  color: string;
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;
154
+ };
155
+ };
156
+ };
157
+ contrastFilledPrimary: {
158
+ color: string;
159
+ backgroundColor: "#0091ea";
160
+ '&.MuiChip-clickable': {
161
+ '&:hover, &:focus, &:active': {
123
162
  color: string;
163
+ backgroundColor: "#01579b";
124
164
  };
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;
165
+ };
166
+ '.MuiChip-deleteIcon': {
167
+ color: string;
168
+ opacity: number;
169
+ '&:hover, &:focus, &:active': {
146
170
  color: string;
147
171
  };
148
- style: {
149
- backgroundColor: string;
172
+ };
173
+ };
174
+ contrastFilledSecondary: {
175
+ color: string;
176
+ backgroundColor: "#aa00ff";
177
+ '&.MuiChip-clickable': {
178
+ '&:hover, &:focus, &:active': {
150
179
  color: string;
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;
180
+ backgroundColor: "#7b1fa2";
181
+ };
182
+ };
183
+ '.MuiChip-deleteIcon': {
184
+ color: string;
185
+ opacity: number;
186
+ '&:hover, &:focus, &:active': {
169
187
  color: string;
170
188
  };
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;
189
+ };
190
+ };
191
+ contrastFilledError: {
192
+ color: string;
193
+ backgroundColor: "#d50000";
194
+ '&.MuiChip-clickable': {
195
+ '&:hover, &:focus, &:active': {
192
196
  color: string;
197
+ backgroundColor: "#c62828";
193
198
  };
194
- style: {
199
+ };
200
+ '.MuiChip-deleteIcon': {
201
+ color: string;
202
+ opacity: number;
203
+ '&:hover,&:focus, &:active': {
195
204
  color: string;
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;
205
+ };
206
+ };
207
+ };
208
+ contrastFilledWarning: {
209
+ color: string;
210
+ backgroundColor: "#f9a825";
211
+ '&.MuiChip-clickable': {
212
+ '&:hover, &:focus, &:active': {
215
213
  color: string;
214
+ backgroundColor: "#f57f17";
216
215
  };
217
- style: {
216
+ };
217
+ '.MuiChip-deleteIcon': {
218
+ color: string;
219
+ opacity: number;
220
+ '&:hover,&:focus, &:active': {
218
221
  color: string;
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;
222
+ };
223
+ };
224
+ };
225
+ contrastFilledInfo: {
226
+ color: string;
227
+ backgroundColor: "#00b8d4";
228
+ '&.MuiChip-clickable': {
229
+ '&:hover, &:focus, &:active': {
238
230
  color: string;
231
+ backgroundColor: "#0097a7";
239
232
  };
240
- style: {
233
+ };
234
+ '.MuiChip-deleteIcon': {
235
+ color: string;
236
+ opacity: number;
237
+ '&:hover,&:focus, &:active': {
241
238
  color: string;
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;
239
+ };
240
+ };
241
+ };
242
+ contrastFilledSuccess: {
243
+ color: string;
244
+ backgroundColor: string;
245
+ '&.MuiChip-clickable': {
246
+ '&:hover, &:focus, &:active': {
247
+ color: string;
248
+ backgroundColor: "#388e3c";
249
+ };
250
+ };
251
+ '.MuiChip-deleteIcon': {
252
+ color: string;
253
+ opacity: number;
254
+ '&:hover,&:focus, &:active': {
255
+ color: string;
256
+ };
257
+ };
258
+ };
259
+ contrastFilledAi: {
260
+ color: string;
261
+ backgroundColor: "#6200ea";
262
+ '&.MuiChip-clickable': {
263
+ '&:hover, &:focus, &:active': {
261
264
  color: string;
265
+ backgroundColor: "#6200ea";
262
266
  };
263
- style: {
267
+ };
268
+ '.MuiChip-deleteIcon': {
269
+ color: string;
270
+ opacity: number;
271
+ '&:hover,&:focus, &:active': {
272
+ color: string;
273
+ };
274
+ };
275
+ };
276
+ contrastFilledInProgress: {
277
+ color: string;
278
+ backgroundColor: string;
279
+ '&.MuiChip-clickable': {
280
+ '&:hover, &:focus, &:active': {
264
281
  color: string;
265
282
  backgroundColor: string;
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
- })[];
283
+ };
284
+ };
285
+ '.MuiChip-deleteIcon': {
286
+ color: string;
287
+ opacity: number;
288
+ '&:hover,&:focus, &:active': {
289
+ color: string;
290
+ };
291
+ };
282
292
  };
283
293
  };
284
294
  };
package/lib/theme/components/form.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { InputBaseProps } from '@mui/material';
1
+ import { InputProps } 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: InputBaseProps;
155
+ ownerState: InputProps;
156
156
  }) => {
157
157
  padding: string;
158
158
  '&:focus': {