@carto/meridian-ds 1.4.3-alpha-tag.1 → 1.4.3-alpha-codemirror.6
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.
- package/CHANGELOG.md +3 -1
- package/dist/Alert-ChcvNOU6.cjs +133 -0
- package/dist/Alert-CpgfD3bq.js +134 -0
- package/dist/ArrowDown-8fLj23Ge.cjs +31 -0
- package/dist/ArrowDown-CY_wMVJT.js +32 -0
- package/dist/MenuItem-Br2jY2lt.cjs +164 -0
- package/dist/MenuItem-CXnnE5lK.js +165 -0
- package/dist/OpenDiagonallyRight-5HZXh46V.js +59 -0
- package/dist/OpenDiagonallyRight-BrRyCV4Q.cjs +58 -0
- package/dist/SwatchSquare-DDi0beUM.js +51 -0
- package/dist/SwatchSquare-w-U8-O-P.cjs +50 -0
- package/dist/components/index.cjs +4402 -1
- package/dist/components/index.js +3233 -2012
- package/dist/custom-icons/index.cjs +5857 -1
- package/dist/custom-icons/index.js +2658 -2326
- package/dist/palette-CD5ph5A-.cjs +5872 -0
- package/dist/{TablePaginationActions-WZ3P4O35.js → palette-DI1CmQ2J.js} +1297 -656
- package/dist/paletteUtils-DEHchy2r.cjs +93 -0
- package/dist/paletteUtils-DTaXyq2Z.js +77 -0
- package/dist/theme/index.cjs +3135 -1
- package/dist/theme/index.js +1049 -1011
- package/dist/types/components/molecules/index.d.ts +0 -2
- package/dist/types/components/molecules/index.d.ts.map +1 -1
- package/dist/types/components/organisms/CodeArea/CodeAreaDialog/CodeAreaDialog.d.ts +16 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaDialog/CodeAreaDialog.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaDialog/CodeAreaDialogConfirmation.d.ts +16 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaDialog/CodeAreaDialogConfirmation.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaDialog/CodeAreaDialogContent.d.ts +10 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaDialog/CodeAreaDialogContent.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaDialog/CodeAreaDialogError.d.ts +8 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaDialog/CodeAreaDialogError.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaField.d.ts +4 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaField.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaFooter.d.ts +12 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaFooter.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaHeader.d.ts +9 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaHeader.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaInput.d.ts +26 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaInput.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaTheme.d.ts +7 -0
- package/dist/types/components/organisms/CodeArea/CodeAreaTheme.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/index.d.ts +9 -0
- package/dist/types/components/organisms/CodeArea/index.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/types.d.ts +38 -0
- package/dist/types/components/organisms/CodeArea/types.d.ts.map +1 -0
- package/dist/types/components/organisms/CodeArea/utils.d.ts +5 -0
- package/dist/types/components/organisms/CodeArea/utils.d.ts.map +1 -0
- package/dist/types/components/organisms/index.d.ts +2 -0
- package/dist/types/components/organisms/index.d.ts.map +1 -1
- package/dist/types/localization/en.d.ts +6 -0
- package/dist/types/localization/en.d.ts.map +1 -1
- package/dist/types/localization/es.d.ts +6 -0
- package/dist/types/localization/es.d.ts.map +1 -1
- package/dist/types/localization/id.d.ts +6 -0
- package/dist/types/localization/id.d.ts.map +1 -1
- package/dist/types/localization/index.d.ts +18 -0
- package/dist/types/localization/index.d.ts.map +1 -1
- package/dist/types/utils/chartConstants.d.ts +3 -3
- package/dist/types/utils/chartConstants.d.ts.map +1 -1
- package/dist/types/widgets/CategoryWidgetUI/CategoryWidgetUI.d.ts +2 -2
- package/dist/types/widgets/CategoryWidgetUI/CategoryWidgetUI.d.ts.map +1 -1
- package/dist/types/widgets/PieWidgetUI/PieWidgetUI.d.ts +2 -2
- package/dist/types/widgets/PieWidgetUI/PieWidgetUI.d.ts.map +1 -1
- package/dist/types/widgets/PieWidgetUI/usePieCategories.d.ts +2 -2
- package/dist/types/widgets/PieWidgetUI/usePieCategories.d.ts.map +1 -1
- package/dist/types/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.d.ts +2 -2
- package/dist/types/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.d.ts.map +1 -1
- package/dist/types/widgets/comparative/ComparativeCategoryWidgetUI/transposeCategoryData.d.ts +2 -2
- package/dist/types/widgets/comparative/ComparativeCategoryWidgetUI/transposeCategoryData.d.ts.map +1 -1
- package/dist/types/widgets/index.d.ts +1 -0
- package/dist/types/widgets/index.d.ts.map +1 -1
- package/dist/widgets/index.cjs +7180 -21
- package/dist/widgets/index.js +5159 -3791
- package/package.json +6 -1
- package/dist/Alert-BAvr1f31.js +0 -130
- package/dist/Alert-DPGMxifE.cjs +0 -4
- package/dist/ArrowDown-BD0WmQR3.cjs +0 -1
- package/dist/ArrowDown-CMhYkZ2p.js +0 -31
- package/dist/MenuItem-Cd34y6F3.js +0 -165
- package/dist/MenuItem-Dbss-WG1.cjs +0 -1
- package/dist/SwatchSquare-C34ayL4L.cjs +0 -1
- package/dist/SwatchSquare-CVpwEFFV.js +0 -48
- package/dist/TablePaginationActions-Bp1DCaIE.cjs +0 -9
- package/dist/paletteUtils-BEwZhrLg.js +0 -262
- package/dist/paletteUtils-DLQVT9qo.cjs +0 -1
- package/dist/types/components/molecules/Tag.d.ts +0 -20
- package/dist/types/components/molecules/Tag.d.ts.map +0 -1
package/dist/theme/index.js
CHANGED
|
@@ -1,80 +1,86 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import { g
|
|
11
|
-
const
|
|
1
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2
|
+
import { alpha, Tooltip, responsiveFontSizes, createTheme } from "@mui/material";
|
|
3
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
4
|
+
import { T as Typography, a as TablePaginationActions, I as ICON_SIZE_LARGE, b as ICON_SIZE_MEDIUM, c as ICON_SIZE_SMALL, g as getSpacing, d as commonPalette, A as APPBAR_SIZE, B as BREAKPOINTS, S as SPACING } from "../palette-DI1CmQ2J.js";
|
|
5
|
+
import { N } from "../palette-DI1CmQ2J.js";
|
|
6
|
+
import { Cancel, EventOutlined, ChevronRightOutlined, ChevronLeftOutlined, ExpandMoreOutlined, CheckCircleOutlined } from "@mui/icons-material";
|
|
7
|
+
import { A as ArrowDown } from "../ArrowDown-CY_wMVJT.js";
|
|
8
|
+
import { renderDigitalClockTimeView } from "@mui/x-date-pickers";
|
|
9
|
+
import { M as MenuItem } from "../MenuItem-CXnnE5lK.js";
|
|
10
|
+
import { g } from "../paletteUtils-DTaXyq2Z.js";
|
|
11
|
+
const tooltipArrowSize = 1;
|
|
12
|
+
const tooltipSeparation = 0.5;
|
|
13
|
+
const tooltipMargin = tooltipArrowSize + tooltipSeparation;
|
|
14
|
+
const avatarFallbackImage = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z";
|
|
15
|
+
const avatarCircularRadius = "50%";
|
|
16
|
+
const avatarRoundedRadius = 0.5;
|
|
17
|
+
const dataDisplayOverrides = {
|
|
12
18
|
// Divider
|
|
13
19
|
MuiDivider: {
|
|
14
20
|
defaultProps: {
|
|
15
21
|
role: "separator"
|
|
16
22
|
},
|
|
17
23
|
styleOverrides: {
|
|
18
|
-
root: ({ theme:
|
|
24
|
+
root: ({ theme: theme2 }) => ({
|
|
19
25
|
backgroundColor: "transparent",
|
|
20
|
-
borderColor:
|
|
26
|
+
borderColor: theme2.palette.divider
|
|
21
27
|
}),
|
|
22
|
-
light: ({ theme:
|
|
23
|
-
borderColor:
|
|
28
|
+
light: ({ theme: theme2 }) => ({
|
|
29
|
+
borderColor: theme2.palette.white[12]
|
|
24
30
|
})
|
|
25
31
|
}
|
|
26
32
|
},
|
|
27
33
|
// Tooltip
|
|
28
34
|
MuiTooltip: {
|
|
29
35
|
defaultProps: {
|
|
30
|
-
arrow:
|
|
36
|
+
arrow: true,
|
|
31
37
|
placement: "top",
|
|
32
38
|
enterDelay: 1e3,
|
|
33
39
|
leaveDelay: 200
|
|
34
40
|
},
|
|
35
41
|
styleOverrides: {
|
|
36
|
-
tooltip: ({ theme:
|
|
37
|
-
...
|
|
42
|
+
tooltip: ({ theme: theme2 }) => ({
|
|
43
|
+
...theme2.typography.caption,
|
|
38
44
|
fontWeight: 500,
|
|
39
45
|
maxWidth: "240px",
|
|
40
|
-
backgroundColor:
|
|
46
|
+
backgroundColor: theme2.palette.black[90],
|
|
41
47
|
'.MuiTooltip-popper[data-popper-placement*="top"] &': {
|
|
42
|
-
marginBottom:
|
|
48
|
+
marginBottom: theme2.spacing(tooltipSeparation),
|
|
43
49
|
"&.MuiTooltip-tooltipArrow": {
|
|
44
|
-
marginBottom:
|
|
50
|
+
marginBottom: theme2.spacing(tooltipMargin)
|
|
45
51
|
}
|
|
46
52
|
},
|
|
47
53
|
'.MuiTooltip-popper[data-popper-placement*="right"] &': {
|
|
48
|
-
marginLeft:
|
|
54
|
+
marginLeft: theme2.spacing(tooltipSeparation),
|
|
49
55
|
"&.MuiTooltip-tooltipArrow": {
|
|
50
|
-
marginLeft:
|
|
56
|
+
marginLeft: theme2.spacing(tooltipMargin)
|
|
51
57
|
}
|
|
52
58
|
},
|
|
53
59
|
'.MuiTooltip-popper[data-popper-placement*="bottom"] &': {
|
|
54
|
-
marginTop:
|
|
60
|
+
marginTop: theme2.spacing(tooltipSeparation),
|
|
55
61
|
"&.MuiTooltip-tooltipArrow": {
|
|
56
|
-
marginTop:
|
|
62
|
+
marginTop: theme2.spacing(tooltipMargin)
|
|
57
63
|
}
|
|
58
64
|
},
|
|
59
65
|
'.MuiTooltip-popper[data-popper-placement*="left"] &': {
|
|
60
|
-
marginRight:
|
|
66
|
+
marginRight: theme2.spacing(tooltipSeparation),
|
|
61
67
|
"&.MuiTooltip-tooltipArrow": {
|
|
62
|
-
marginRight:
|
|
68
|
+
marginRight: theme2.spacing(tooltipMargin)
|
|
63
69
|
}
|
|
64
70
|
}
|
|
65
71
|
}),
|
|
66
|
-
arrow: ({ theme:
|
|
67
|
-
height:
|
|
68
|
-
color:
|
|
72
|
+
arrow: ({ theme: theme2 }) => ({
|
|
73
|
+
height: theme2.spacing(tooltipArrowSize),
|
|
74
|
+
color: theme2.palette.black[90]
|
|
69
75
|
})
|
|
70
76
|
}
|
|
71
77
|
},
|
|
72
78
|
// Popper
|
|
73
79
|
MuiPopper: {
|
|
74
80
|
styleOverrides: {
|
|
75
|
-
root: ({ theme:
|
|
81
|
+
root: ({ theme: theme2 }) => ({
|
|
76
82
|
"& .MuiPaper-root": {
|
|
77
|
-
marginTop:
|
|
83
|
+
marginTop: theme2.spacing(0.5)
|
|
78
84
|
}
|
|
79
85
|
})
|
|
80
86
|
}
|
|
@@ -82,9 +88,9 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
82
88
|
// Popover
|
|
83
89
|
MuiPopover: {
|
|
84
90
|
styleOverrides: {
|
|
85
|
-
root: ({ theme:
|
|
91
|
+
root: ({ theme: theme2 }) => ({
|
|
86
92
|
"& .MuiPaper-root": {
|
|
87
|
-
marginTop:
|
|
93
|
+
marginTop: theme2.spacing(0.5)
|
|
88
94
|
}
|
|
89
95
|
})
|
|
90
96
|
}
|
|
@@ -100,16 +106,16 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
100
106
|
variant: "subtitle1"
|
|
101
107
|
},
|
|
102
108
|
styleOverrides: {
|
|
103
|
-
root: ({ theme:
|
|
104
|
-
padding:
|
|
109
|
+
root: ({ theme: theme2 }) => ({
|
|
110
|
+
padding: theme2.spacing(3, 3, 2)
|
|
105
111
|
})
|
|
106
112
|
}
|
|
107
113
|
},
|
|
108
114
|
MuiDialogContent: {
|
|
109
115
|
styleOverrides: {
|
|
110
|
-
root: ({ theme:
|
|
116
|
+
root: ({ theme: theme2 }) => ({
|
|
111
117
|
"& .MuiFormGroup-root": {
|
|
112
|
-
padding:
|
|
118
|
+
padding: theme2.spacing(1, 0)
|
|
113
119
|
}
|
|
114
120
|
})
|
|
115
121
|
}
|
|
@@ -119,8 +125,8 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
119
125
|
variant: "body2"
|
|
120
126
|
},
|
|
121
127
|
styleOverrides: {
|
|
122
|
-
root: ({ theme:
|
|
123
|
-
color:
|
|
128
|
+
root: ({ theme: theme2 }) => ({
|
|
129
|
+
color: theme2.palette.text.primary
|
|
124
130
|
})
|
|
125
131
|
}
|
|
126
132
|
},
|
|
@@ -131,61 +137,63 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
131
137
|
variant: "outlined",
|
|
132
138
|
size: "small"
|
|
133
139
|
},
|
|
134
|
-
labelDisplayedRows: ({ from
|
|
135
|
-
/* @__PURE__ */
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
140
|
+
labelDisplayedRows: ({ from, to, count }) => {
|
|
141
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
142
|
+
/* @__PURE__ */ jsx(
|
|
143
|
+
Typography,
|
|
144
|
+
{
|
|
145
|
+
component: "span",
|
|
146
|
+
variant: "inherit",
|
|
147
|
+
weight: "strong",
|
|
148
|
+
color: "textPrimary",
|
|
149
|
+
children: `${from}-${to}`
|
|
150
|
+
}
|
|
151
|
+
),
|
|
152
|
+
` of ${count}`
|
|
153
|
+
] });
|
|
154
|
+
},
|
|
155
|
+
ActionsComponent: TablePaginationActions
|
|
148
156
|
},
|
|
149
157
|
styleOverrides: {
|
|
150
158
|
root: () => ({
|
|
151
159
|
borderBottom: 0
|
|
152
160
|
}),
|
|
153
|
-
toolbar: ({ theme:
|
|
161
|
+
toolbar: ({ theme: theme2 }) => ({
|
|
154
162
|
minHeight: "0 !important",
|
|
155
163
|
padding: "0 !important",
|
|
156
|
-
height:
|
|
164
|
+
height: theme2.spacing(6)
|
|
157
165
|
}),
|
|
158
|
-
selectLabel: ({ theme:
|
|
166
|
+
selectLabel: ({ theme: theme2 }) => ({
|
|
159
167
|
margin: 0,
|
|
160
|
-
...
|
|
161
|
-
fontWeight:
|
|
168
|
+
...theme2.typography.caption,
|
|
169
|
+
fontWeight: theme2.typography.fontWeightMedium
|
|
162
170
|
}),
|
|
163
|
-
selectIcon: ({ theme:
|
|
171
|
+
selectIcon: ({ theme: theme2 }) => ({
|
|
164
172
|
"&.MuiSvgIcon-root": {
|
|
165
|
-
right:
|
|
173
|
+
right: theme2.spacing(1)
|
|
166
174
|
}
|
|
167
175
|
}),
|
|
168
|
-
input: ({ theme:
|
|
169
|
-
marginRight:
|
|
170
|
-
marginLeft:
|
|
176
|
+
input: ({ theme: theme2 }) => ({
|
|
177
|
+
marginRight: theme2.spacing(2),
|
|
178
|
+
marginLeft: theme2.spacing(1),
|
|
171
179
|
width: "auto",
|
|
172
|
-
paddingRight:
|
|
180
|
+
paddingRight: theme2.spacing(3)
|
|
173
181
|
}),
|
|
174
|
-
displayedRows: ({ theme:
|
|
175
|
-
color:
|
|
182
|
+
displayedRows: ({ theme: theme2 }) => ({
|
|
183
|
+
color: theme2.palette.text.secondary
|
|
176
184
|
})
|
|
177
185
|
}
|
|
178
186
|
},
|
|
179
187
|
MuiTable: {
|
|
180
188
|
defaultProps: {
|
|
181
|
-
stickyHeader:
|
|
189
|
+
stickyHeader: true
|
|
182
190
|
}
|
|
183
191
|
},
|
|
184
192
|
MuiTableRow: {
|
|
185
193
|
styleOverrides: {
|
|
186
|
-
root: ({ theme:
|
|
194
|
+
root: ({ theme: theme2 }) => ({
|
|
187
195
|
transition: "background-color 0.25s ease",
|
|
188
|
-
borderColor:
|
|
196
|
+
borderColor: theme2.palette.divider,
|
|
189
197
|
"&.MuiTableRow-hover:hover": {
|
|
190
198
|
cursor: "pointer"
|
|
191
199
|
}
|
|
@@ -194,26 +202,26 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
194
202
|
},
|
|
195
203
|
MuiTableCell: {
|
|
196
204
|
styleOverrides: {
|
|
197
|
-
root: ({ theme:
|
|
198
|
-
padding:
|
|
199
|
-
height:
|
|
205
|
+
root: ({ theme: theme2 }) => ({
|
|
206
|
+
padding: theme2.spacing(0.5, 2),
|
|
207
|
+
height: theme2.spacing(6),
|
|
200
208
|
"&.MuiTableCell-sizeSmall": {
|
|
201
|
-
height:
|
|
209
|
+
height: theme2.spacing(4)
|
|
202
210
|
},
|
|
203
211
|
"&.MuiTableCell-footer": {
|
|
204
212
|
padding: 0
|
|
205
213
|
}
|
|
206
214
|
}),
|
|
207
|
-
head: ({ theme:
|
|
208
|
-
...
|
|
209
|
-
fontWeight:
|
|
210
|
-
color:
|
|
215
|
+
head: ({ theme: theme2 }) => ({
|
|
216
|
+
...theme2.typography.caption,
|
|
217
|
+
fontWeight: theme2.typography.fontWeightMedium,
|
|
218
|
+
color: theme2.palette.text.primary
|
|
211
219
|
}),
|
|
212
|
-
stickyHeader: ({ theme:
|
|
213
|
-
backgroundColor:
|
|
220
|
+
stickyHeader: ({ theme: theme2 }) => ({
|
|
221
|
+
backgroundColor: theme2.palette.common.white
|
|
214
222
|
}),
|
|
215
|
-
paddingCheckbox: ({ theme:
|
|
216
|
-
padding:
|
|
223
|
+
paddingCheckbox: ({ theme: theme2 }) => ({
|
|
224
|
+
padding: theme2.spacing(0.5, 1)
|
|
217
225
|
}),
|
|
218
226
|
paddingNone: () => ({
|
|
219
227
|
padding: 0
|
|
@@ -226,163 +234,163 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
226
234
|
color: "primary"
|
|
227
235
|
},
|
|
228
236
|
styleOverrides: {
|
|
229
|
-
root: ({ theme:
|
|
237
|
+
root: ({ theme: theme2 }) => ({
|
|
230
238
|
maxWidth: "192px",
|
|
231
|
-
padding:
|
|
239
|
+
padding: theme2.spacing(0, 0.5),
|
|
232
240
|
"& .MuiAvatar-root": {
|
|
233
|
-
width:
|
|
234
|
-
minWidth:
|
|
235
|
-
height:
|
|
241
|
+
width: ICON_SIZE_LARGE,
|
|
242
|
+
minWidth: ICON_SIZE_LARGE,
|
|
243
|
+
height: ICON_SIZE_LARGE,
|
|
236
244
|
margin: 0,
|
|
237
|
-
color:
|
|
238
|
-
backgroundColor:
|
|
239
|
-
border: `1px solid ${
|
|
245
|
+
color: theme2.palette.secondary.contrastText,
|
|
246
|
+
backgroundColor: theme2.palette.background.paper,
|
|
247
|
+
border: `1px solid ${theme2.palette.action.hover}`
|
|
240
248
|
},
|
|
241
249
|
"& .MuiChip-icon": {
|
|
242
250
|
margin: 0,
|
|
243
|
-
marginLeft:
|
|
251
|
+
marginLeft: theme2.spacing(0.5)
|
|
244
252
|
},
|
|
245
253
|
"& img": {
|
|
246
|
-
width:
|
|
247
|
-
minWidth:
|
|
248
|
-
height:
|
|
254
|
+
width: ICON_SIZE_LARGE,
|
|
255
|
+
minWidth: ICON_SIZE_LARGE,
|
|
256
|
+
height: ICON_SIZE_LARGE
|
|
249
257
|
},
|
|
250
258
|
"&.MuiChip-root.Mui-disabled": {
|
|
251
|
-
color:
|
|
252
|
-
backgroundColor:
|
|
259
|
+
color: theme2.palette.text.disabled,
|
|
260
|
+
backgroundColor: theme2.palette.action.disabledBackground,
|
|
253
261
|
opacity: 1,
|
|
254
262
|
"& .MuiChip-deleteIcon, & .MuiChip-icon": {
|
|
255
|
-
color:
|
|
263
|
+
color: theme2.palette.action.disabled
|
|
256
264
|
},
|
|
257
265
|
"& .MuiAvatar-root": {
|
|
258
266
|
opacity: 0.6
|
|
259
267
|
}
|
|
260
268
|
},
|
|
261
269
|
"& .MuiChip-deleteIcon": {
|
|
262
|
-
color:
|
|
270
|
+
color: theme2.palette.text.hint
|
|
263
271
|
}
|
|
264
272
|
}),
|
|
265
273
|
// Variants
|
|
266
|
-
filled: ({ theme:
|
|
274
|
+
filled: ({ theme: theme2 }) => ({
|
|
267
275
|
border: 0,
|
|
268
|
-
backgroundColor:
|
|
276
|
+
backgroundColor: theme2.palette.default.main,
|
|
269
277
|
"& .MuiChip-iconColorPrimary": {
|
|
270
|
-
color:
|
|
278
|
+
color: theme2.palette.primary.contrastText
|
|
271
279
|
},
|
|
272
280
|
"& .MuiChip-deleteIcon:hover": {
|
|
273
|
-
color:
|
|
281
|
+
color: theme2.palette.text.primary
|
|
274
282
|
}
|
|
275
283
|
}),
|
|
276
|
-
filledPrimary: ({ theme:
|
|
277
|
-
backgroundColor:
|
|
284
|
+
filledPrimary: ({ theme: theme2 }) => ({
|
|
285
|
+
backgroundColor: theme2.palette.primary.main,
|
|
278
286
|
"& .MuiChip-deleteIcon": {
|
|
279
|
-
color:
|
|
287
|
+
color: theme2.palette.white[60],
|
|
280
288
|
"&:hover": {
|
|
281
|
-
color:
|
|
289
|
+
color: theme2.palette.common.white
|
|
282
290
|
}
|
|
283
291
|
}
|
|
284
292
|
}),
|
|
285
|
-
filledSecondary: ({ theme:
|
|
286
|
-
backgroundColor:
|
|
293
|
+
filledSecondary: ({ theme: theme2 }) => ({
|
|
294
|
+
backgroundColor: theme2.palette.secondary.main
|
|
287
295
|
}),
|
|
288
|
-
outlined: ({ theme:
|
|
289
|
-
borderColor:
|
|
296
|
+
outlined: ({ theme: theme2 }) => ({
|
|
297
|
+
borderColor: theme2.palette.default.outlinedBorder,
|
|
290
298
|
"&.MuiChip-root.Mui-disabled": {
|
|
291
|
-
borderColor:
|
|
299
|
+
borderColor: theme2.palette.default.outlinedBorder,
|
|
292
300
|
backgroundColor: "transparent"
|
|
293
301
|
},
|
|
294
302
|
"& .MuiChip-deleteIcon:hover": {
|
|
295
|
-
color:
|
|
303
|
+
color: theme2.palette.text.primary
|
|
296
304
|
}
|
|
297
305
|
}),
|
|
298
|
-
outlinedPrimary: ({ theme:
|
|
299
|
-
borderColor:
|
|
306
|
+
outlinedPrimary: ({ theme: theme2 }) => ({
|
|
307
|
+
borderColor: theme2.palette.primary.main
|
|
300
308
|
}),
|
|
301
|
-
outlinedSecondary: ({ theme:
|
|
302
|
-
borderColor:
|
|
309
|
+
outlinedSecondary: ({ theme: theme2 }) => ({
|
|
310
|
+
borderColor: theme2.palette.secondary.main
|
|
303
311
|
}),
|
|
304
312
|
// Status colors
|
|
305
|
-
colorSuccess: ({ theme:
|
|
313
|
+
colorSuccess: ({ theme: theme2 }) => ({
|
|
306
314
|
"&.MuiChip-outlined": {
|
|
307
|
-
color:
|
|
308
|
-
borderColor:
|
|
315
|
+
color: theme2.palette.success.dark,
|
|
316
|
+
borderColor: theme2.palette.success.main
|
|
309
317
|
},
|
|
310
318
|
"&.MuiChip-filled": {
|
|
311
|
-
color:
|
|
312
|
-
backgroundColor:
|
|
319
|
+
color: theme2.palette.success.dark,
|
|
320
|
+
backgroundColor: theme2.palette.success.relatedLight
|
|
313
321
|
},
|
|
314
322
|
"& .MuiChip-icon": {
|
|
315
|
-
color:
|
|
323
|
+
color: theme2.palette.success.main
|
|
316
324
|
}
|
|
317
325
|
}),
|
|
318
|
-
colorInfo: ({ theme:
|
|
326
|
+
colorInfo: ({ theme: theme2 }) => ({
|
|
319
327
|
"&.MuiChip-outlined": {
|
|
320
|
-
color:
|
|
321
|
-
borderColor:
|
|
328
|
+
color: theme2.palette.primary.dark,
|
|
329
|
+
borderColor: theme2.palette.primary.main
|
|
322
330
|
},
|
|
323
331
|
"&.MuiChip-filled": {
|
|
324
|
-
color:
|
|
325
|
-
backgroundColor:
|
|
332
|
+
color: theme2.palette.primary.dark,
|
|
333
|
+
backgroundColor: theme2.palette.primary.relatedLight
|
|
326
334
|
},
|
|
327
335
|
"& .MuiChip-icon": {
|
|
328
|
-
color:
|
|
336
|
+
color: theme2.palette.info.main
|
|
329
337
|
}
|
|
330
338
|
}),
|
|
331
|
-
colorError: ({ theme:
|
|
339
|
+
colorError: ({ theme: theme2 }) => ({
|
|
332
340
|
"&.MuiChip-outlined": {
|
|
333
|
-
color:
|
|
334
|
-
borderColor:
|
|
341
|
+
color: theme2.palette.error.dark,
|
|
342
|
+
borderColor: theme2.palette.error.main
|
|
335
343
|
},
|
|
336
344
|
"&.MuiChip-filled": {
|
|
337
|
-
color:
|
|
338
|
-
backgroundColor:
|
|
345
|
+
color: theme2.palette.error.dark,
|
|
346
|
+
backgroundColor: theme2.palette.error.relatedLight
|
|
339
347
|
},
|
|
340
348
|
"& .MuiChip-icon": {
|
|
341
|
-
color:
|
|
349
|
+
color: theme2.palette.error.main
|
|
342
350
|
}
|
|
343
351
|
}),
|
|
344
|
-
colorWarning: ({ theme:
|
|
352
|
+
colorWarning: ({ theme: theme2 }) => ({
|
|
345
353
|
"&.MuiChip-outlined": {
|
|
346
|
-
color:
|
|
347
|
-
borderColor:
|
|
354
|
+
color: theme2.palette.warning.relatedDark,
|
|
355
|
+
borderColor: theme2.palette.warning.main
|
|
348
356
|
},
|
|
349
357
|
"&.MuiChip-filled": {
|
|
350
|
-
color:
|
|
351
|
-
backgroundColor:
|
|
358
|
+
color: theme2.palette.warning.relatedDark,
|
|
359
|
+
backgroundColor: theme2.palette.warning.relatedLight
|
|
352
360
|
},
|
|
353
361
|
"& .MuiChip-icon": {
|
|
354
|
-
color:
|
|
362
|
+
color: theme2.palette.warning.main
|
|
355
363
|
}
|
|
356
364
|
}),
|
|
357
365
|
// Sizes
|
|
358
|
-
sizeSmall: ({ theme:
|
|
366
|
+
sizeSmall: ({ theme: theme2 }) => ({
|
|
359
367
|
"& img": {
|
|
360
|
-
width:
|
|
361
|
-
minWidth:
|
|
362
|
-
height:
|
|
368
|
+
width: ICON_SIZE_MEDIUM,
|
|
369
|
+
minWidth: ICON_SIZE_MEDIUM,
|
|
370
|
+
height: ICON_SIZE_MEDIUM
|
|
363
371
|
},
|
|
364
372
|
"& .MuiAvatar-root": {
|
|
365
|
-
width:
|
|
366
|
-
minWidth:
|
|
367
|
-
height:
|
|
373
|
+
width: ICON_SIZE_MEDIUM,
|
|
374
|
+
minWidth: ICON_SIZE_MEDIUM,
|
|
375
|
+
height: ICON_SIZE_MEDIUM
|
|
368
376
|
},
|
|
369
377
|
"& .MuiChip-icon": {
|
|
370
|
-
marginLeft:
|
|
378
|
+
marginLeft: theme2.spacing(0.25)
|
|
371
379
|
}
|
|
372
380
|
}),
|
|
373
381
|
// Inner elements
|
|
374
|
-
label: ({ theme:
|
|
375
|
-
...
|
|
376
|
-
padding:
|
|
382
|
+
label: ({ theme: theme2 }) => ({
|
|
383
|
+
...theme2.typography.button,
|
|
384
|
+
padding: theme2.spacing(0, 0.75)
|
|
377
385
|
}),
|
|
378
|
-
labelSmall: ({ theme:
|
|
379
|
-
...
|
|
386
|
+
labelSmall: ({ theme: theme2 }) => ({
|
|
387
|
+
...theme2.typography.caption,
|
|
380
388
|
fontWeight: 500,
|
|
381
|
-
padding:
|
|
389
|
+
padding: theme2.spacing(0, 0.5)
|
|
382
390
|
}),
|
|
383
391
|
deleteIcon: () => ({
|
|
384
|
-
width:
|
|
385
|
-
height:
|
|
392
|
+
width: ICON_SIZE_MEDIUM,
|
|
393
|
+
height: ICON_SIZE_MEDIUM,
|
|
386
394
|
margin: 0,
|
|
387
395
|
marginLeft: "2px",
|
|
388
396
|
// Forced to a non-standard value to meet with design
|
|
@@ -390,12 +398,12 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
390
398
|
// Forced to a non-standard value to meet with design
|
|
391
399
|
transition: "color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
|
|
392
400
|
}),
|
|
393
|
-
deleteIconSmall: ({ theme:
|
|
394
|
-
width:
|
|
395
|
-
height:
|
|
401
|
+
deleteIconSmall: ({ theme: theme2 }) => ({
|
|
402
|
+
width: theme2.spacing(2),
|
|
403
|
+
height: theme2.spacing(2),
|
|
396
404
|
marginRight: 0
|
|
397
405
|
}),
|
|
398
|
-
clickable: ({ theme:
|
|
406
|
+
clickable: ({ theme: theme2 }) => ({
|
|
399
407
|
"&:active": {
|
|
400
408
|
boxShadow: "none"
|
|
401
409
|
},
|
|
@@ -406,53 +414,53 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
406
414
|
"&:hover": {
|
|
407
415
|
backgroundColor: "transparent",
|
|
408
416
|
"&.MuiChip-colorPrimary": {
|
|
409
|
-
color:
|
|
410
|
-
borderColor:
|
|
417
|
+
color: theme2.palette.primary.dark,
|
|
418
|
+
borderColor: theme2.palette.primary.dark
|
|
411
419
|
},
|
|
412
420
|
"&.MuiChip-colorSecondary": {
|
|
413
|
-
color:
|
|
414
|
-
borderColor:
|
|
421
|
+
color: theme2.palette.secondary.dark,
|
|
422
|
+
borderColor: theme2.palette.secondary.dark
|
|
415
423
|
},
|
|
416
424
|
"&.MuiChip-colorDefault": {
|
|
417
|
-
borderColor:
|
|
425
|
+
borderColor: theme2.palette.default.dark
|
|
418
426
|
},
|
|
419
427
|
"&.MuiChip-colorSuccess": {
|
|
420
|
-
color:
|
|
421
|
-
borderColor:
|
|
428
|
+
color: theme2.palette.success.dark,
|
|
429
|
+
borderColor: theme2.palette.success.dark
|
|
422
430
|
},
|
|
423
431
|
"&.MuiChip-colorInfo": {
|
|
424
|
-
color:
|
|
425
|
-
borderColor:
|
|
432
|
+
color: theme2.palette.info.dark,
|
|
433
|
+
borderColor: theme2.palette.info.dark
|
|
426
434
|
},
|
|
427
435
|
"&.MuiChip-colorError": {
|
|
428
|
-
color:
|
|
429
|
-
borderColor:
|
|
436
|
+
color: theme2.palette.error.dark,
|
|
437
|
+
borderColor: theme2.palette.error.dark
|
|
430
438
|
},
|
|
431
439
|
"&.MuiChip-colorWarning": {
|
|
432
|
-
color:
|
|
433
|
-
borderColor:
|
|
440
|
+
color: theme2.palette.warning.dark,
|
|
441
|
+
borderColor: theme2.palette.warning.dark
|
|
434
442
|
}
|
|
435
443
|
}
|
|
436
444
|
},
|
|
437
445
|
"&.MuiChip-filled": {
|
|
438
446
|
"&:hover": {
|
|
439
447
|
"&.MuiChip-colorSecondary": {
|
|
440
|
-
backgroundColor:
|
|
448
|
+
backgroundColor: theme2.palette.secondary.light
|
|
441
449
|
},
|
|
442
450
|
"&.MuiChip-colorDefault": {
|
|
443
|
-
backgroundColor:
|
|
451
|
+
backgroundColor: theme2.palette.default.dark
|
|
444
452
|
},
|
|
445
453
|
"&.MuiChip-colorSuccess": {
|
|
446
|
-
backgroundColor:
|
|
454
|
+
backgroundColor: alpha(theme2.palette.success.main, 0.25)
|
|
447
455
|
},
|
|
448
456
|
"&.MuiChip-colorInfo": {
|
|
449
|
-
backgroundColor:
|
|
457
|
+
backgroundColor: alpha(theme2.palette.info.main, 0.12)
|
|
450
458
|
},
|
|
451
459
|
"&.MuiChip-colorError": {
|
|
452
|
-
backgroundColor:
|
|
460
|
+
backgroundColor: alpha(theme2.palette.error.main, 0.12)
|
|
453
461
|
},
|
|
454
462
|
"&.MuiChip-colorWarning": {
|
|
455
|
-
backgroundColor:
|
|
463
|
+
backgroundColor: alpha(theme2.palette.warning.main, 0.25)
|
|
456
464
|
}
|
|
457
465
|
}
|
|
458
466
|
}
|
|
@@ -462,31 +470,31 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
462
470
|
// Avatar
|
|
463
471
|
MuiAvatar: {
|
|
464
472
|
styleOverrides: {
|
|
465
|
-
root: ({ theme:
|
|
473
|
+
root: ({ theme: theme2 }) => ({
|
|
466
474
|
overflow: "initial",
|
|
467
|
-
color:
|
|
468
|
-
backgroundColor:
|
|
475
|
+
color: theme2.palette.secondary.contrastText,
|
|
476
|
+
backgroundColor: theme2.palette.secondary.main,
|
|
469
477
|
// Default fallback image override
|
|
470
478
|
// https://github.com/mui/material-ui/issues/33229
|
|
471
479
|
"& .MuiAvatar-fallback": {
|
|
472
480
|
path: {
|
|
473
|
-
d: `path('${
|
|
481
|
+
d: `path('${avatarFallbackImage}') !important`
|
|
474
482
|
}
|
|
475
483
|
}
|
|
476
484
|
}),
|
|
477
|
-
img: ({ theme:
|
|
478
|
-
boxShadow: `0 0 0 1px ${
|
|
485
|
+
img: ({ theme: theme2 }) => ({
|
|
486
|
+
boxShadow: `0 0 0 1px ${theme2.palette.default.outlinedBorder}`
|
|
479
487
|
}),
|
|
480
488
|
circular: () => ({
|
|
481
|
-
borderRadius:
|
|
489
|
+
borderRadius: avatarCircularRadius,
|
|
482
490
|
"& img": {
|
|
483
|
-
borderRadius:
|
|
491
|
+
borderRadius: avatarCircularRadius
|
|
484
492
|
}
|
|
485
493
|
}),
|
|
486
|
-
rounded: ({ theme:
|
|
487
|
-
borderRadius:
|
|
494
|
+
rounded: ({ theme: theme2 }) => ({
|
|
495
|
+
borderRadius: theme2.spacing(avatarRoundedRadius),
|
|
488
496
|
"& img": {
|
|
489
|
-
borderRadius:
|
|
497
|
+
borderRadius: theme2.spacing(avatarRoundedRadius)
|
|
490
498
|
}
|
|
491
499
|
})
|
|
492
500
|
}
|
|
@@ -512,30 +520,36 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
512
520
|
MuiSvgIcon: {
|
|
513
521
|
styleOverrides: {
|
|
514
522
|
root: () => ({
|
|
515
|
-
fontSize:
|
|
523
|
+
fontSize: ICON_SIZE_MEDIUM
|
|
516
524
|
}),
|
|
517
525
|
fontSizeSmall: () => ({
|
|
518
|
-
fontSize:
|
|
526
|
+
fontSize: ICON_SIZE_SMALL
|
|
519
527
|
}),
|
|
520
528
|
fontSizeLarge: () => ({
|
|
521
|
-
fontSize:
|
|
529
|
+
fontSize: ICON_SIZE_LARGE
|
|
522
530
|
})
|
|
523
531
|
}
|
|
524
532
|
}
|
|
525
|
-
}
|
|
533
|
+
};
|
|
534
|
+
const sizeXsmall = getSpacing(2);
|
|
535
|
+
const sizeSmall = getSpacing(3);
|
|
536
|
+
const sizeMedium = getSpacing(4);
|
|
537
|
+
const sizeLarge = getSpacing(6);
|
|
538
|
+
const radius = getSpacing(0.5);
|
|
539
|
+
const buttonsOverrides = {
|
|
526
540
|
// Button Base
|
|
527
541
|
MuiButtonBase: {
|
|
528
542
|
defaultProps: {
|
|
529
|
-
disableRipple:
|
|
543
|
+
disableRipple: true
|
|
530
544
|
},
|
|
531
545
|
styleOverrides: {
|
|
532
546
|
root: () => ({
|
|
533
547
|
"& .MuiSvgIcon-root, & svg": {
|
|
534
548
|
display: "flex",
|
|
535
|
-
fontSize:
|
|
536
|
-
width:
|
|
537
|
-
minWidth:
|
|
538
|
-
height:
|
|
549
|
+
fontSize: ICON_SIZE_MEDIUM,
|
|
550
|
+
width: ICON_SIZE_MEDIUM,
|
|
551
|
+
minWidth: ICON_SIZE_MEDIUM,
|
|
552
|
+
height: ICON_SIZE_MEDIUM
|
|
539
553
|
}
|
|
540
554
|
})
|
|
541
555
|
}
|
|
@@ -543,26 +557,26 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
543
557
|
// Button
|
|
544
558
|
MuiButton: {
|
|
545
559
|
defaultProps: {
|
|
546
|
-
disableElevation:
|
|
560
|
+
disableElevation: true
|
|
547
561
|
},
|
|
548
562
|
styleOverrides: {
|
|
549
|
-
root: ({ ownerState
|
|
563
|
+
root: ({ ownerState, theme: theme2 }) => ({
|
|
550
564
|
// maxWidth: '192px', TODO temporary disabled waiting for a design definition
|
|
551
565
|
"&:hover, &:focus-visible": {
|
|
552
|
-
boxShadow:
|
|
553
|
-
...
|
|
554
|
-
...
|
|
555
|
-
backgroundColor:
|
|
566
|
+
boxShadow: theme2.shadows[0],
|
|
567
|
+
...ownerState.variant !== "contained" && {
|
|
568
|
+
...ownerState.color === "primary" && {
|
|
569
|
+
backgroundColor: theme2.palette.primary.background
|
|
556
570
|
},
|
|
557
|
-
...
|
|
558
|
-
backgroundColor:
|
|
571
|
+
...ownerState.color === "secondary" && {
|
|
572
|
+
backgroundColor: theme2.palette.secondary.background
|
|
559
573
|
},
|
|
560
|
-
...
|
|
561
|
-
background:
|
|
574
|
+
...ownerState.color === "error" && {
|
|
575
|
+
background: theme2.palette.error.relatedLight
|
|
562
576
|
}
|
|
563
577
|
},
|
|
564
|
-
...
|
|
565
|
-
backgroundColor:
|
|
578
|
+
...ownerState.variant === "contained" && ownerState.color === "secondary" && {
|
|
579
|
+
backgroundColor: theme2.palette.secondary.light
|
|
566
580
|
}
|
|
567
581
|
},
|
|
568
582
|
"& svg:not(.doNotFillIcon) path": {
|
|
@@ -570,98 +584,98 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
570
584
|
},
|
|
571
585
|
// Pairing buttons separation
|
|
572
586
|
"& + .MuiButtonBase-root": {
|
|
573
|
-
marginLeft:
|
|
587
|
+
marginLeft: theme2.spacing(1)
|
|
574
588
|
}
|
|
575
589
|
}),
|
|
576
|
-
contained: ({ theme:
|
|
590
|
+
contained: ({ theme: theme2 }) => ({
|
|
577
591
|
boxShadow: "none",
|
|
578
592
|
"&.Mui-disabled": {
|
|
579
|
-
color:
|
|
580
|
-
backgroundColor:
|
|
593
|
+
color: theme2.palette.text.disabled,
|
|
594
|
+
backgroundColor: theme2.palette.action.disabledBackground
|
|
581
595
|
}
|
|
582
596
|
}),
|
|
583
|
-
text: ({ theme:
|
|
584
|
-
minWidth:
|
|
597
|
+
text: ({ theme: theme2 }) => ({
|
|
598
|
+
minWidth: theme2.spacing(7)
|
|
585
599
|
}),
|
|
586
|
-
outlined: ({ theme:
|
|
600
|
+
outlined: ({ theme: theme2 }) => ({
|
|
587
601
|
"&.Mui-disabled": {
|
|
588
|
-
color:
|
|
589
|
-
borderColor:
|
|
602
|
+
color: theme2.palette.text.disabled,
|
|
603
|
+
borderColor: theme2.palette.default.outlinedBorder
|
|
590
604
|
}
|
|
591
605
|
}),
|
|
592
|
-
outlinedPrimary: ({ theme:
|
|
593
|
-
borderColor:
|
|
606
|
+
outlinedPrimary: ({ theme: theme2 }) => ({
|
|
607
|
+
borderColor: theme2.palette.primary.main
|
|
594
608
|
}),
|
|
595
|
-
outlinedSecondary: ({ theme:
|
|
596
|
-
borderColor:
|
|
609
|
+
outlinedSecondary: ({ theme: theme2 }) => ({
|
|
610
|
+
borderColor: theme2.palette.secondary.main
|
|
597
611
|
}),
|
|
598
|
-
outlinedError: ({ theme:
|
|
599
|
-
borderColor:
|
|
612
|
+
outlinedError: ({ theme: theme2 }) => ({
|
|
613
|
+
borderColor: theme2.palette.error.main
|
|
600
614
|
}),
|
|
601
|
-
containedPrimary: ({ theme:
|
|
615
|
+
containedPrimary: ({ theme: theme2 }) => ({
|
|
602
616
|
"&:hover, &:focus-visible": {
|
|
603
|
-
backgroundColor:
|
|
617
|
+
backgroundColor: theme2.palette.primary.dark
|
|
604
618
|
}
|
|
605
619
|
}),
|
|
606
|
-
containedError: ({ theme:
|
|
620
|
+
containedError: ({ theme: theme2 }) => ({
|
|
607
621
|
"&:hover, &:focus-visible": {
|
|
608
|
-
backgroundColor:
|
|
622
|
+
backgroundColor: theme2.palette.error.dark
|
|
609
623
|
}
|
|
610
624
|
}),
|
|
611
|
-
startIcon: ({ theme:
|
|
612
|
-
marginRight:
|
|
625
|
+
startIcon: ({ theme: theme2 }) => ({
|
|
626
|
+
marginRight: theme2.spacing(0.75),
|
|
613
627
|
"& .MuiSvgIcon-root, & svg": {
|
|
614
|
-
fontSize:
|
|
615
|
-
width:
|
|
616
|
-
minWidth:
|
|
617
|
-
height:
|
|
628
|
+
fontSize: ICON_SIZE_MEDIUM,
|
|
629
|
+
width: ICON_SIZE_MEDIUM,
|
|
630
|
+
minWidth: ICON_SIZE_MEDIUM,
|
|
631
|
+
height: ICON_SIZE_MEDIUM
|
|
618
632
|
},
|
|
619
633
|
"&.MuiButton-iconSizeSmall": {
|
|
620
|
-
marginRight:
|
|
621
|
-
marginLeft:
|
|
634
|
+
marginRight: theme2.spacing(0.5),
|
|
635
|
+
marginLeft: theme2.spacing(-0.5)
|
|
622
636
|
}
|
|
623
637
|
}),
|
|
624
|
-
endIcon: ({ theme:
|
|
625
|
-
marginLeft:
|
|
638
|
+
endIcon: ({ theme: theme2 }) => ({
|
|
639
|
+
marginLeft: theme2.spacing(0.75),
|
|
626
640
|
"& .MuiSvgIcon-root, & svg": {
|
|
627
|
-
fontSize:
|
|
628
|
-
width:
|
|
629
|
-
minWidth:
|
|
630
|
-
height:
|
|
641
|
+
fontSize: ICON_SIZE_MEDIUM,
|
|
642
|
+
width: ICON_SIZE_MEDIUM,
|
|
643
|
+
minWidth: ICON_SIZE_MEDIUM,
|
|
644
|
+
height: ICON_SIZE_MEDIUM
|
|
631
645
|
},
|
|
632
646
|
"&.MuiButton-iconSizeSmall": {
|
|
633
|
-
marginLeft:
|
|
634
|
-
marginRight:
|
|
647
|
+
marginLeft: theme2.spacing(0.5),
|
|
648
|
+
marginRight: theme2.spacing(-0.5)
|
|
635
649
|
}
|
|
636
650
|
}),
|
|
637
|
-
sizeSmall: ({ theme:
|
|
638
|
-
height:
|
|
639
|
-
padding:
|
|
640
|
-
...
|
|
641
|
-
lineHeight:
|
|
651
|
+
sizeSmall: ({ theme: theme2, ownerState }) => ({
|
|
652
|
+
height: sizeSmall,
|
|
653
|
+
padding: theme2.spacing(0, 1.5),
|
|
654
|
+
...theme2.typography.caption,
|
|
655
|
+
lineHeight: sizeSmall,
|
|
642
656
|
fontWeight: 500,
|
|
643
657
|
letterSpacing: "0.4px",
|
|
644
|
-
...
|
|
645
|
-
padding:
|
|
658
|
+
...ownerState.variant === "text" && {
|
|
659
|
+
padding: theme2.spacing(0, 1)
|
|
646
660
|
}
|
|
647
661
|
}),
|
|
648
|
-
sizeMedium: ({ theme:
|
|
649
|
-
height:
|
|
650
|
-
padding:
|
|
651
|
-
lineHeight:
|
|
652
|
-
...
|
|
653
|
-
padding:
|
|
662
|
+
sizeMedium: ({ theme: theme2, ownerState }) => ({
|
|
663
|
+
height: sizeMedium,
|
|
664
|
+
padding: theme2.spacing(0, 2),
|
|
665
|
+
lineHeight: sizeMedium,
|
|
666
|
+
...ownerState.variant === "text" && {
|
|
667
|
+
padding: theme2.spacing(0, 1)
|
|
654
668
|
}
|
|
655
669
|
}),
|
|
656
|
-
sizeLarge: ({ theme:
|
|
657
|
-
height:
|
|
658
|
-
padding:
|
|
659
|
-
...
|
|
660
|
-
lineHeight:
|
|
670
|
+
sizeLarge: ({ theme: theme2, ownerState }) => ({
|
|
671
|
+
height: sizeLarge,
|
|
672
|
+
padding: theme2.spacing(0, 2.5),
|
|
673
|
+
...theme2.typography.body1,
|
|
674
|
+
lineHeight: sizeLarge,
|
|
661
675
|
fontWeight: 500,
|
|
662
676
|
letterSpacing: "0.25px",
|
|
663
|
-
...
|
|
664
|
-
padding:
|
|
677
|
+
...ownerState.variant === "text" && {
|
|
678
|
+
padding: theme2.spacing(0, 2)
|
|
665
679
|
}
|
|
666
680
|
})
|
|
667
681
|
},
|
|
@@ -669,43 +683,43 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
669
683
|
// Custom color and its variants
|
|
670
684
|
{
|
|
671
685
|
props: { variant: "contained", color: "default" },
|
|
672
|
-
style: ({ theme:
|
|
673
|
-
color:
|
|
674
|
-
backgroundColor:
|
|
675
|
-
borderColor:
|
|
686
|
+
style: ({ theme: theme2 }) => ({
|
|
687
|
+
color: theme2.palette.text.primary,
|
|
688
|
+
backgroundColor: theme2.palette.default.main,
|
|
689
|
+
borderColor: theme2.palette.text.primary,
|
|
676
690
|
"&.Mui-disabled": {
|
|
677
|
-
color:
|
|
678
|
-
backgroundColor:
|
|
691
|
+
color: theme2.palette.text.disabled,
|
|
692
|
+
backgroundColor: theme2.palette.action.disabledBackground
|
|
679
693
|
},
|
|
680
694
|
"&:hover, &:focus-visible": {
|
|
681
|
-
backgroundColor:
|
|
695
|
+
backgroundColor: theme2.palette.default.dark
|
|
682
696
|
}
|
|
683
697
|
})
|
|
684
698
|
},
|
|
685
699
|
{
|
|
686
700
|
props: { variant: "outlined", color: "default" },
|
|
687
|
-
style: ({ theme:
|
|
688
|
-
color:
|
|
689
|
-
borderColor:
|
|
701
|
+
style: ({ theme: theme2 }) => ({
|
|
702
|
+
color: theme2.palette.text.primary,
|
|
703
|
+
borderColor: theme2.palette.text.primary,
|
|
690
704
|
"&.Mui-disabled": {
|
|
691
|
-
color:
|
|
692
|
-
borderColor:
|
|
705
|
+
color: theme2.palette.text.disabled,
|
|
706
|
+
borderColor: theme2.palette.default.outlinedBorder
|
|
693
707
|
},
|
|
694
708
|
"&:hover, &:focus-visible": {
|
|
695
|
-
backgroundColor:
|
|
696
|
-
borderColor:
|
|
709
|
+
backgroundColor: theme2.palette.action.hover,
|
|
710
|
+
borderColor: theme2.palette.text.primary
|
|
697
711
|
}
|
|
698
712
|
})
|
|
699
713
|
},
|
|
700
714
|
{
|
|
701
715
|
props: { variant: "text", color: "default" },
|
|
702
|
-
style: ({ theme:
|
|
703
|
-
color:
|
|
716
|
+
style: ({ theme: theme2 }) => ({
|
|
717
|
+
color: theme2.palette.text.primary,
|
|
704
718
|
"&.Mui-disabled": {
|
|
705
|
-
color:
|
|
719
|
+
color: theme2.palette.text.disabled
|
|
706
720
|
},
|
|
707
721
|
"&:hover, &:focus-visible": {
|
|
708
|
-
backgroundColor:
|
|
722
|
+
backgroundColor: theme2.palette.action.hover
|
|
709
723
|
}
|
|
710
724
|
})
|
|
711
725
|
}
|
|
@@ -714,50 +728,50 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
714
728
|
// Mui Button Group
|
|
715
729
|
MuiButtonGroup: {
|
|
716
730
|
defaultProps: {
|
|
717
|
-
disableRipple:
|
|
718
|
-
disableElevation:
|
|
731
|
+
disableRipple: true,
|
|
732
|
+
disableElevation: true
|
|
719
733
|
},
|
|
720
734
|
styleOverrides: {
|
|
721
|
-
root: ({ ownerState
|
|
735
|
+
root: ({ ownerState, theme: theme2 }) => ({
|
|
722
736
|
"& .MuiButton-root + .MuiButton-root": {
|
|
723
737
|
marginLeft: 0
|
|
724
738
|
},
|
|
725
|
-
...
|
|
726
|
-
boxShadow:
|
|
727
|
-
borderColor:
|
|
739
|
+
...ownerState.variant === "text" && {
|
|
740
|
+
boxShadow: theme2.shadows[1],
|
|
741
|
+
borderColor: theme2.palette.default.dark,
|
|
728
742
|
"& .MuiButtonGroup-grouped:not(:last-of-type)": {
|
|
729
|
-
borderColor:
|
|
743
|
+
borderColor: theme2.palette.default.dark
|
|
730
744
|
}
|
|
731
745
|
},
|
|
732
|
-
...
|
|
733
|
-
...
|
|
746
|
+
...ownerState.variant === "outlined" && {
|
|
747
|
+
...ownerState.color === "default" && {
|
|
734
748
|
"& .MuiButtonBase-root.Mui-disabled": {
|
|
735
|
-
borderColor:
|
|
749
|
+
borderColor: theme2.palette.text.primary
|
|
736
750
|
}
|
|
737
751
|
},
|
|
738
|
-
...
|
|
752
|
+
...ownerState.color === "primary" && {
|
|
739
753
|
"& .MuiButtonBase-root.Mui-disabled": {
|
|
740
|
-
borderColor:
|
|
754
|
+
borderColor: theme2.palette.primary.main
|
|
741
755
|
}
|
|
742
756
|
},
|
|
743
|
-
...
|
|
757
|
+
...ownerState.color === "secondary" && {
|
|
744
758
|
"& .MuiButtonBase-root.Mui-disabled": {
|
|
745
|
-
borderColor:
|
|
759
|
+
borderColor: theme2.palette.secondary.main
|
|
746
760
|
}
|
|
747
761
|
},
|
|
748
|
-
...
|
|
762
|
+
...ownerState.orientation !== "vertical" && {
|
|
749
763
|
"& .MuiButtonGroup-grouped:not(:last-of-type):hover, & .Mui-disabled:not(:last-of-type)": {
|
|
750
764
|
borderRightColor: "transparent"
|
|
751
765
|
}
|
|
752
766
|
}
|
|
753
767
|
},
|
|
754
|
-
...
|
|
755
|
-
...
|
|
768
|
+
...ownerState.variant === "contained" && {
|
|
769
|
+
...ownerState.color === "default" && {
|
|
756
770
|
"& .MuiButtonGroup-grouped:not(:last-of-type)": {
|
|
757
|
-
borderRightColor:
|
|
771
|
+
borderRightColor: theme2.palette.default.dark,
|
|
758
772
|
"&.Mui-disabled": {
|
|
759
|
-
...
|
|
760
|
-
borderColor:
|
|
773
|
+
...ownerState.color === "default" && {
|
|
774
|
+
borderColor: theme2.palette.default.dark
|
|
761
775
|
}
|
|
762
776
|
}
|
|
763
777
|
}
|
|
@@ -769,18 +783,18 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
769
783
|
// Icon Button
|
|
770
784
|
MuiIconButton: {
|
|
771
785
|
styleOverrides: {
|
|
772
|
-
root: ({ ownerState
|
|
786
|
+
root: ({ ownerState, theme: theme2 }) => ({
|
|
773
787
|
position: "relative",
|
|
774
788
|
overflow: "hidden",
|
|
775
|
-
borderRadius:
|
|
776
|
-
...
|
|
777
|
-
color:
|
|
789
|
+
borderRadius: theme2.spacing(0.5),
|
|
790
|
+
...ownerState.color === "default" && {
|
|
791
|
+
color: theme2.palette.text.secondary
|
|
778
792
|
},
|
|
779
793
|
"& .MuiSvgIcon-root, & svg": {
|
|
780
|
-
fontSize:
|
|
781
|
-
width:
|
|
782
|
-
minWidth:
|
|
783
|
-
height:
|
|
794
|
+
fontSize: ICON_SIZE_MEDIUM,
|
|
795
|
+
width: ICON_SIZE_MEDIUM,
|
|
796
|
+
minWidth: ICON_SIZE_MEDIUM,
|
|
797
|
+
height: ICON_SIZE_MEDIUM
|
|
784
798
|
},
|
|
785
799
|
"& svg": {
|
|
786
800
|
fill: "currentColor",
|
|
@@ -792,37 +806,37 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
792
806
|
fill: "currentColor"
|
|
793
807
|
},
|
|
794
808
|
"&.Mui-disabled svg:not(.doNotFillIcon) path": {
|
|
795
|
-
fill:
|
|
809
|
+
fill: theme2.palette.text.disabled
|
|
796
810
|
},
|
|
797
811
|
"&:hover, &:focus-visible": {
|
|
798
|
-
...
|
|
799
|
-
backgroundColor:
|
|
812
|
+
...ownerState.color === "default" && {
|
|
813
|
+
backgroundColor: theme2.palette.action.hover
|
|
800
814
|
},
|
|
801
|
-
...
|
|
802
|
-
backgroundColor:
|
|
815
|
+
...ownerState.color === "primary" && {
|
|
816
|
+
backgroundColor: theme2.palette.primary.background
|
|
803
817
|
},
|
|
804
|
-
...
|
|
805
|
-
backgroundColor:
|
|
818
|
+
...ownerState.color === "secondary" && {
|
|
819
|
+
backgroundColor: theme2.palette.secondary.background
|
|
806
820
|
},
|
|
807
|
-
...
|
|
808
|
-
backgroundColor:
|
|
821
|
+
...ownerState.color === "error" && {
|
|
822
|
+
backgroundColor: theme2.palette.error.relatedLight
|
|
809
823
|
},
|
|
810
|
-
...
|
|
811
|
-
backgroundColor:
|
|
824
|
+
...ownerState.color === "warning" && {
|
|
825
|
+
backgroundColor: theme2.palette.warning.relatedLight
|
|
812
826
|
}
|
|
813
827
|
}
|
|
814
828
|
}),
|
|
815
829
|
sizeSmall: () => ({
|
|
816
|
-
width:
|
|
817
|
-
height:
|
|
830
|
+
width: sizeSmall,
|
|
831
|
+
height: sizeSmall
|
|
818
832
|
}),
|
|
819
833
|
sizeMedium: () => ({
|
|
820
|
-
width:
|
|
821
|
-
height:
|
|
834
|
+
width: sizeMedium,
|
|
835
|
+
height: sizeMedium
|
|
822
836
|
}),
|
|
823
837
|
sizeLarge: () => ({
|
|
824
|
-
width:
|
|
825
|
-
height:
|
|
838
|
+
width: sizeLarge,
|
|
839
|
+
height: sizeLarge
|
|
826
840
|
})
|
|
827
841
|
},
|
|
828
842
|
variants: [
|
|
@@ -830,99 +844,99 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
830
844
|
{
|
|
831
845
|
props: { size: "xsmall" },
|
|
832
846
|
style: () => ({
|
|
833
|
-
width:
|
|
834
|
-
height:
|
|
847
|
+
width: sizeXsmall,
|
|
848
|
+
height: sizeXsmall,
|
|
835
849
|
"& .MuiSvgIcon-root, & svg": {
|
|
836
|
-
fontSize:
|
|
837
|
-
width:
|
|
838
|
-
minWidth:
|
|
839
|
-
height:
|
|
850
|
+
fontSize: ICON_SIZE_SMALL,
|
|
851
|
+
width: ICON_SIZE_SMALL,
|
|
852
|
+
minWidth: ICON_SIZE_SMALL,
|
|
853
|
+
height: ICON_SIZE_SMALL
|
|
840
854
|
}
|
|
841
855
|
})
|
|
842
856
|
},
|
|
843
857
|
{
|
|
844
858
|
props: { variant: "contained" },
|
|
845
|
-
style: ({ theme:
|
|
859
|
+
style: ({ theme: theme2 }) => ({
|
|
846
860
|
// Default
|
|
847
|
-
color:
|
|
848
|
-
backgroundColor:
|
|
861
|
+
color: theme2.palette.text.primary,
|
|
862
|
+
backgroundColor: theme2.palette.default.main,
|
|
849
863
|
"&:hover": {
|
|
850
|
-
backgroundColor:
|
|
864
|
+
backgroundColor: theme2.palette.default.dark
|
|
851
865
|
},
|
|
852
866
|
"&.MuiIconButton-colorSecondary": {
|
|
853
|
-
color:
|
|
854
|
-
backgroundColor:
|
|
867
|
+
color: theme2.palette.secondary.contrastText,
|
|
868
|
+
backgroundColor: theme2.palette.secondary.main,
|
|
855
869
|
"&:hover": {
|
|
856
|
-
backgroundColor:
|
|
870
|
+
backgroundColor: theme2.palette.secondary.light
|
|
857
871
|
}
|
|
858
872
|
},
|
|
859
873
|
"&.MuiIconButton-colorPrimary": {
|
|
860
|
-
color:
|
|
861
|
-
backgroundColor:
|
|
874
|
+
color: theme2.palette.primary.contrastText,
|
|
875
|
+
backgroundColor: theme2.palette.primary.main,
|
|
862
876
|
"&:hover": {
|
|
863
|
-
backgroundColor:
|
|
877
|
+
backgroundColor: theme2.palette.primary.dark
|
|
864
878
|
}
|
|
865
879
|
},
|
|
866
880
|
"&.MuiIconButton-colorError": {
|
|
867
|
-
color:
|
|
868
|
-
backgroundColor:
|
|
881
|
+
color: theme2.palette.error.contrastText,
|
|
882
|
+
backgroundColor: theme2.palette.error.main,
|
|
869
883
|
"&:hover": {
|
|
870
|
-
backgroundColor:
|
|
884
|
+
backgroundColor: theme2.palette.error.dark
|
|
871
885
|
}
|
|
872
886
|
},
|
|
873
887
|
"&.MuiIconButton-colorWarning": {
|
|
874
|
-
color:
|
|
875
|
-
backgroundColor:
|
|
888
|
+
color: theme2.palette.warning.contrastText,
|
|
889
|
+
backgroundColor: theme2.palette.warning.main,
|
|
876
890
|
"&:hover": {
|
|
877
|
-
backgroundColor:
|
|
891
|
+
backgroundColor: theme2.palette.warning.light
|
|
878
892
|
}
|
|
879
893
|
},
|
|
880
894
|
"&[disabled]": {
|
|
881
|
-
color:
|
|
882
|
-
backgroundColor:
|
|
895
|
+
color: theme2.palette.text.disabled,
|
|
896
|
+
backgroundColor: theme2.palette.action.disabledBackground
|
|
883
897
|
}
|
|
884
898
|
})
|
|
885
899
|
},
|
|
886
900
|
{
|
|
887
901
|
props: { variant: "outlined" },
|
|
888
|
-
style: ({ theme:
|
|
902
|
+
style: ({ theme: theme2 }) => ({
|
|
889
903
|
// Default
|
|
890
|
-
color:
|
|
891
|
-
border: `1px solid ${
|
|
904
|
+
color: theme2.palette.text.primary,
|
|
905
|
+
border: `1px solid ${theme2.palette.text.primary}`,
|
|
892
906
|
"&:hover": {
|
|
893
|
-
backgroundColor:
|
|
907
|
+
backgroundColor: theme2.palette.action.hover
|
|
894
908
|
},
|
|
895
909
|
"&.MuiIconButton-colorSecondary": {
|
|
896
|
-
color:
|
|
897
|
-
borderColor:
|
|
910
|
+
color: theme2.palette.secondary.main,
|
|
911
|
+
borderColor: theme2.palette.secondary.main,
|
|
898
912
|
"&:hover": {
|
|
899
|
-
backgroundColor:
|
|
913
|
+
backgroundColor: theme2.palette.secondary.background
|
|
900
914
|
}
|
|
901
915
|
},
|
|
902
916
|
"&.MuiIconButton-colorPrimary": {
|
|
903
|
-
color:
|
|
904
|
-
borderColor:
|
|
917
|
+
color: theme2.palette.primary.main,
|
|
918
|
+
borderColor: theme2.palette.primary.main,
|
|
905
919
|
"&:hover": {
|
|
906
|
-
backgroundColor:
|
|
920
|
+
backgroundColor: theme2.palette.primary.background
|
|
907
921
|
}
|
|
908
922
|
},
|
|
909
923
|
"&.MuiIconButton-colorError": {
|
|
910
|
-
color:
|
|
911
|
-
borderColor:
|
|
924
|
+
color: theme2.palette.error.main,
|
|
925
|
+
borderColor: theme2.palette.error.main,
|
|
912
926
|
"&:hover": {
|
|
913
|
-
backgroundColor:
|
|
927
|
+
backgroundColor: theme2.palette.error.relatedLight
|
|
914
928
|
}
|
|
915
929
|
},
|
|
916
930
|
"&.MuiIconButton-colorWarning": {
|
|
917
|
-
color:
|
|
918
|
-
borderColor:
|
|
931
|
+
color: theme2.palette.warning.main,
|
|
932
|
+
borderColor: theme2.palette.warning.main,
|
|
919
933
|
"&:hover": {
|
|
920
|
-
backgroundColor:
|
|
934
|
+
backgroundColor: theme2.palette.warning.relatedLight
|
|
921
935
|
}
|
|
922
936
|
},
|
|
923
937
|
"&[disabled]": {
|
|
924
|
-
color:
|
|
925
|
-
borderColor:
|
|
938
|
+
color: theme2.palette.text.disabled,
|
|
939
|
+
borderColor: theme2.palette.default.outlinedBorder
|
|
926
940
|
}
|
|
927
941
|
})
|
|
928
942
|
}
|
|
@@ -931,44 +945,44 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
931
945
|
// MuiToggleButton
|
|
932
946
|
MuiToggleButton: {
|
|
933
947
|
styleOverrides: {
|
|
934
|
-
root: ({ theme:
|
|
935
|
-
minWidth:
|
|
936
|
-
height:
|
|
937
|
-
padding:
|
|
938
|
-
color:
|
|
948
|
+
root: ({ theme: theme2 }) => ({
|
|
949
|
+
minWidth: sizeMedium,
|
|
950
|
+
height: sizeMedium,
|
|
951
|
+
padding: theme2.spacing(0, 1),
|
|
952
|
+
color: theme2.palette.text.secondary,
|
|
939
953
|
border: "none",
|
|
940
|
-
borderRadius:
|
|
954
|
+
borderRadius: radius,
|
|
941
955
|
transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
942
956
|
"&:hover": {
|
|
943
|
-
backgroundColor:
|
|
957
|
+
backgroundColor: theme2.palette.action.hover
|
|
944
958
|
},
|
|
945
959
|
// Pairing buttons separation
|
|
946
960
|
"& + &": {
|
|
947
|
-
marginLeft:
|
|
961
|
+
marginLeft: theme2.spacing(0.5)
|
|
948
962
|
},
|
|
949
963
|
".MuiSvgIcon-root, & svg": {
|
|
950
|
-
margin:
|
|
964
|
+
margin: theme2.spacing(0, -0.75)
|
|
951
965
|
},
|
|
952
966
|
"&.Mui-selected": {
|
|
953
|
-
color:
|
|
954
|
-
backgroundColor:
|
|
967
|
+
color: theme2.palette.primary.main,
|
|
968
|
+
backgroundColor: theme2.palette.primary.background,
|
|
955
969
|
"&:hover": {
|
|
956
|
-
backgroundColor:
|
|
970
|
+
backgroundColor: theme2.palette.action.hover
|
|
957
971
|
}
|
|
958
972
|
},
|
|
959
973
|
"&.Mui-disabled": {
|
|
960
974
|
border: "none"
|
|
961
975
|
}
|
|
962
976
|
}),
|
|
963
|
-
sizeLarge: ({ theme:
|
|
964
|
-
minWidth:
|
|
965
|
-
height:
|
|
966
|
-
...
|
|
977
|
+
sizeLarge: ({ theme: theme2 }) => ({
|
|
978
|
+
minWidth: sizeLarge,
|
|
979
|
+
height: sizeLarge,
|
|
980
|
+
...theme2.typography.body1
|
|
967
981
|
}),
|
|
968
|
-
sizeSmall: ({ theme:
|
|
969
|
-
minWidth:
|
|
970
|
-
height:
|
|
971
|
-
...
|
|
982
|
+
sizeSmall: ({ theme: theme2 }) => ({
|
|
983
|
+
minWidth: sizeSmall,
|
|
984
|
+
height: sizeSmall,
|
|
985
|
+
...theme2.typography.caption,
|
|
972
986
|
fontWeight: 500
|
|
973
987
|
})
|
|
974
988
|
}
|
|
@@ -977,81 +991,81 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
977
991
|
MuiToggleButtonGroup: {
|
|
978
992
|
defaultProps: {
|
|
979
993
|
orientation: "horizontal",
|
|
980
|
-
exclusive:
|
|
994
|
+
exclusive: true
|
|
981
995
|
},
|
|
982
996
|
styleOverrides: {
|
|
983
|
-
root: ({ theme:
|
|
997
|
+
root: ({ theme: theme2 }) => ({
|
|
984
998
|
alignItems: "center",
|
|
985
999
|
justifyContent: "center",
|
|
986
|
-
borderRadius:
|
|
987
|
-
boxShadow:
|
|
988
|
-
backgroundColor:
|
|
1000
|
+
borderRadius: theme2.spacing(1),
|
|
1001
|
+
boxShadow: theme2.shadows[1],
|
|
1002
|
+
backgroundColor: theme2.palette.background.paper,
|
|
989
1003
|
"& .MuiToggleButtonGroup-grouped:not(:first-of-type), &.Mui-Selected, & .MuiToggleButtonGroup-grouped:not(:last-of-type)": {
|
|
990
|
-
borderRadius:
|
|
1004
|
+
borderRadius: radius
|
|
991
1005
|
},
|
|
992
1006
|
".MuiDivider-root": {
|
|
993
1007
|
"&.MuiDivider-vertical": {
|
|
994
|
-
height:
|
|
995
|
-
margin:
|
|
996
|
-
marginLeft:
|
|
1008
|
+
height: sizeLarge,
|
|
1009
|
+
margin: theme2.spacing(0, 1),
|
|
1010
|
+
marginLeft: theme2.spacing(0.5)
|
|
997
1011
|
},
|
|
998
1012
|
"&.MuiDivider-horizontal": {
|
|
999
|
-
width:
|
|
1000
|
-
margin:
|
|
1001
|
-
marginTop:
|
|
1013
|
+
width: sizeLarge,
|
|
1014
|
+
margin: theme2.spacing(1, 0),
|
|
1015
|
+
marginTop: theme2.spacing(0.5)
|
|
1002
1016
|
}
|
|
1003
1017
|
},
|
|
1004
1018
|
".MuiToggleButton-sizeSmall": {
|
|
1005
1019
|
"& + .MuiDivider-root.MuiDivider-vertical": {
|
|
1006
|
-
height:
|
|
1020
|
+
height: sizeMedium
|
|
1007
1021
|
},
|
|
1008
1022
|
"& + .MuiDivider-root.MuiDivider-horizontal": {
|
|
1009
|
-
width:
|
|
1023
|
+
width: sizeMedium
|
|
1010
1024
|
}
|
|
1011
1025
|
}
|
|
1012
1026
|
}),
|
|
1013
1027
|
// Styles applied to the children if orientation="horizontal"
|
|
1014
|
-
groupedHorizontal: ({ theme:
|
|
1015
|
-
height:
|
|
1016
|
-
margin:
|
|
1028
|
+
groupedHorizontal: ({ theme: theme2 }) => ({
|
|
1029
|
+
height: sizeMedium,
|
|
1030
|
+
margin: theme2.spacing(1),
|
|
1017
1031
|
"&:not(:last-of-type)": {
|
|
1018
|
-
marginRight:
|
|
1032
|
+
marginRight: theme2.spacing(0.5),
|
|
1019
1033
|
marginLeft: 0,
|
|
1020
1034
|
borderLeft: "none"
|
|
1021
1035
|
},
|
|
1022
1036
|
"&:first-of-type:not(.MuiDivider-root)": {
|
|
1023
|
-
marginLeft:
|
|
1037
|
+
marginLeft: theme2.spacing(1)
|
|
1024
1038
|
},
|
|
1025
1039
|
"&:last-of-type:not(.MuiDivider-root)": {
|
|
1026
1040
|
marginLeft: 0
|
|
1027
1041
|
},
|
|
1028
1042
|
"&.MuiToggleButton-sizeSmall:not(.MuiDivider-root)": {
|
|
1029
|
-
height:
|
|
1030
|
-
margin:
|
|
1043
|
+
height: sizeSmall,
|
|
1044
|
+
margin: theme2.spacing(0.5),
|
|
1031
1045
|
"&:not(:first-of-type)": {
|
|
1032
1046
|
marginLeft: 0
|
|
1033
1047
|
}
|
|
1034
1048
|
}
|
|
1035
1049
|
}),
|
|
1036
1050
|
// Styles applied to the children if orientation="vertical"
|
|
1037
|
-
groupedVertical: ({ theme:
|
|
1038
|
-
width:
|
|
1039
|
-
margin:
|
|
1051
|
+
groupedVertical: ({ theme: theme2 }) => ({
|
|
1052
|
+
width: sizeMedium,
|
|
1053
|
+
margin: theme2.spacing(1),
|
|
1040
1054
|
"&.MuiToggleButton-root": {
|
|
1041
|
-
marginLeft:
|
|
1042
|
-
marginBottom:
|
|
1055
|
+
marginLeft: theme2.spacing(1),
|
|
1056
|
+
marginBottom: theme2.spacing(0.5),
|
|
1043
1057
|
"&:last-of-type": {
|
|
1044
|
-
marginBottom:
|
|
1058
|
+
marginBottom: theme2.spacing(1)
|
|
1045
1059
|
},
|
|
1046
1060
|
"&:not(:first-of-type)": {
|
|
1047
1061
|
marginTop: 0
|
|
1048
1062
|
}
|
|
1049
1063
|
},
|
|
1050
1064
|
"&.MuiToggleButton-sizeSmall": {
|
|
1051
|
-
width:
|
|
1052
|
-
margin:
|
|
1065
|
+
width: sizeSmall,
|
|
1066
|
+
margin: theme2.spacing(0.5),
|
|
1053
1067
|
"&:last-of-type": {
|
|
1054
|
-
marginBottom:
|
|
1068
|
+
marginBottom: theme2.spacing(0.5)
|
|
1055
1069
|
}
|
|
1056
1070
|
}
|
|
1057
1071
|
})
|
|
@@ -1063,116 +1077,123 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1063
1077
|
color: "primary"
|
|
1064
1078
|
},
|
|
1065
1079
|
styleOverrides: {
|
|
1066
|
-
root: ({ ownerState
|
|
1080
|
+
root: ({ ownerState, theme: theme2 }) => ({
|
|
1067
1081
|
"&:focus": {
|
|
1068
|
-
boxShadow:
|
|
1082
|
+
boxShadow: theme2.shadows[6]
|
|
1069
1083
|
},
|
|
1070
1084
|
"& .MuiSvgIcon-root, & svg": {
|
|
1071
|
-
fontSize:
|
|
1072
|
-
width:
|
|
1073
|
-
minWidth:
|
|
1074
|
-
height:
|
|
1085
|
+
fontSize: ICON_SIZE_LARGE,
|
|
1086
|
+
width: ICON_SIZE_LARGE,
|
|
1087
|
+
minWidth: ICON_SIZE_LARGE,
|
|
1088
|
+
height: ICON_SIZE_LARGE
|
|
1075
1089
|
},
|
|
1076
1090
|
"&.MuiFab-extended": {
|
|
1077
|
-
...
|
|
1091
|
+
...theme2.typography.body1,
|
|
1078
1092
|
fontWeight: 500,
|
|
1079
1093
|
width: "auto",
|
|
1080
|
-
height:
|
|
1081
|
-
paddingRight:
|
|
1082
|
-
borderRadius:
|
|
1094
|
+
height: theme2.spacing(7),
|
|
1095
|
+
paddingRight: theme2.spacing(3),
|
|
1096
|
+
borderRadius: theme2.spacing(8),
|
|
1083
1097
|
"& .MuiSvgIcon-root": {
|
|
1084
|
-
marginRight:
|
|
1098
|
+
marginRight: theme2.spacing(1.5)
|
|
1085
1099
|
}
|
|
1086
1100
|
},
|
|
1087
|
-
...
|
|
1088
|
-
color:
|
|
1089
|
-
backgroundColor:
|
|
1101
|
+
...ownerState.color === "default" && {
|
|
1102
|
+
color: theme2.palette.text.primary,
|
|
1103
|
+
backgroundColor: theme2.palette.background.paper,
|
|
1090
1104
|
"&:hover, &:focus-visible": {
|
|
1091
|
-
backgroundColor:
|
|
1105
|
+
backgroundColor: theme2.palette.default.light
|
|
1092
1106
|
}
|
|
1093
1107
|
}
|
|
1094
1108
|
}),
|
|
1095
|
-
sizeSmall: ({ theme:
|
|
1096
|
-
width:
|
|
1097
|
-
height:
|
|
1098
|
-
minHeight:
|
|
1109
|
+
sizeSmall: ({ theme: theme2 }) => ({
|
|
1110
|
+
width: theme2.spacing(4),
|
|
1111
|
+
height: theme2.spacing(4),
|
|
1112
|
+
minHeight: theme2.spacing(4),
|
|
1099
1113
|
"& .MuiSvgIcon-root, & svg": {
|
|
1100
|
-
fontSize:
|
|
1101
|
-
width:
|
|
1102
|
-
minWidth:
|
|
1103
|
-
height:
|
|
1114
|
+
fontSize: ICON_SIZE_MEDIUM,
|
|
1115
|
+
width: ICON_SIZE_MEDIUM,
|
|
1116
|
+
minWidth: ICON_SIZE_MEDIUM,
|
|
1117
|
+
height: ICON_SIZE_MEDIUM
|
|
1104
1118
|
},
|
|
1105
1119
|
"&.MuiFab-extended": {
|
|
1106
|
-
...
|
|
1120
|
+
...theme2.typography.caption,
|
|
1107
1121
|
width: "auto",
|
|
1108
|
-
height:
|
|
1109
|
-
paddingRight:
|
|
1122
|
+
height: theme2.spacing(4),
|
|
1123
|
+
paddingRight: theme2.spacing(2),
|
|
1110
1124
|
"& .MuiSvgIcon-root": {
|
|
1111
|
-
marginRight:
|
|
1125
|
+
marginRight: theme2.spacing(1)
|
|
1112
1126
|
}
|
|
1113
1127
|
}
|
|
1114
1128
|
}),
|
|
1115
|
-
sizeMedium: ({ theme:
|
|
1129
|
+
sizeMedium: ({ theme: theme2 }) => ({
|
|
1116
1130
|
"&.MuiFab-extended": {
|
|
1117
|
-
...
|
|
1118
|
-
height:
|
|
1131
|
+
...theme2.typography.button,
|
|
1132
|
+
height: theme2.spacing(6)
|
|
1119
1133
|
}
|
|
1120
1134
|
}),
|
|
1121
|
-
secondary: ({ theme:
|
|
1135
|
+
secondary: ({ theme: theme2 }) => ({
|
|
1122
1136
|
"&:hover": {
|
|
1123
|
-
backgroundColor:
|
|
1137
|
+
backgroundColor: theme2.palette.secondary.light
|
|
1124
1138
|
}
|
|
1125
1139
|
})
|
|
1126
1140
|
}
|
|
1127
1141
|
}
|
|
1128
|
-
}
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1142
|
+
};
|
|
1143
|
+
const controlSizeS = 2.25;
|
|
1144
|
+
const controlSizeM = 3;
|
|
1145
|
+
const switchSizeS = 2;
|
|
1146
|
+
const switchSizeM = 3;
|
|
1147
|
+
const switchSizeL = 4;
|
|
1148
|
+
const checkboxRadioOverrides = {
|
|
1149
|
+
root: ({ ownerState, theme: theme2 }) => ({
|
|
1150
|
+
padding: theme2.spacing(0.5),
|
|
1151
|
+
...ownerState.size === "small" && {
|
|
1132
1152
|
padding: "3px"
|
|
1133
1153
|
// Forced to a non-standard value to meet with design
|
|
1134
1154
|
},
|
|
1135
|
-
...
|
|
1155
|
+
...ownerState.readOnly === true && {
|
|
1136
1156
|
pointerEvents: "none",
|
|
1137
|
-
color:
|
|
1157
|
+
color: theme2.palette.text.disabled,
|
|
1138
1158
|
"&.Mui-checked": {
|
|
1139
|
-
color:
|
|
1159
|
+
color: theme2.palette.text.disabled
|
|
1140
1160
|
}
|
|
1141
1161
|
},
|
|
1142
1162
|
"&:hover, &:focus-visible": {
|
|
1143
|
-
backgroundColor:
|
|
1163
|
+
backgroundColor: theme2.palette.primary.background
|
|
1144
1164
|
},
|
|
1145
1165
|
"& + .MuiFormControlLabel-label": {
|
|
1146
|
-
...
|
|
1147
|
-
marginLeft:
|
|
1148
|
-
...
|
|
1149
|
-
marginLeft:
|
|
1166
|
+
...theme2.typography.body2,
|
|
1167
|
+
marginLeft: theme2.spacing(0.25),
|
|
1168
|
+
...ownerState.size === "small" && {
|
|
1169
|
+
marginLeft: theme2.spacing(0.5)
|
|
1150
1170
|
}
|
|
1151
1171
|
},
|
|
1152
1172
|
"& .MuiSvgIcon-root": {
|
|
1153
|
-
fontSize:
|
|
1154
|
-
width:
|
|
1155
|
-
minWidth:
|
|
1156
|
-
height:
|
|
1157
|
-
...
|
|
1158
|
-
fontSize:
|
|
1159
|
-
width:
|
|
1160
|
-
minWidth:
|
|
1161
|
-
height:
|
|
1173
|
+
fontSize: theme2.spacing(controlSizeM),
|
|
1174
|
+
width: theme2.spacing(controlSizeM),
|
|
1175
|
+
minWidth: theme2.spacing(controlSizeM),
|
|
1176
|
+
height: theme2.spacing(controlSizeM),
|
|
1177
|
+
...ownerState.size === "small" && {
|
|
1178
|
+
fontSize: theme2.spacing(controlSizeS),
|
|
1179
|
+
width: theme2.spacing(controlSizeS),
|
|
1180
|
+
minWidth: theme2.spacing(controlSizeS),
|
|
1181
|
+
height: theme2.spacing(controlSizeS)
|
|
1162
1182
|
}
|
|
1163
1183
|
}
|
|
1164
1184
|
})
|
|
1165
|
-
}
|
|
1166
|
-
|
|
1185
|
+
};
|
|
1186
|
+
const LabelOverrides = {
|
|
1187
|
+
root: ({ theme: theme2 }) => ({
|
|
1167
1188
|
position: "static",
|
|
1168
1189
|
transform: "none",
|
|
1169
|
-
marginBottom:
|
|
1170
|
-
...
|
|
1190
|
+
marginBottom: theme2.spacing(1),
|
|
1191
|
+
...theme2.typography.caption,
|
|
1171
1192
|
fontWeight: 500,
|
|
1172
|
-
color:
|
|
1193
|
+
color: theme2.palette.text.primary
|
|
1173
1194
|
}),
|
|
1174
|
-
sizeSmall: ({ theme:
|
|
1175
|
-
marginBottom:
|
|
1195
|
+
sizeSmall: ({ theme: theme2 }) => ({
|
|
1196
|
+
marginBottom: theme2.spacing(0.5)
|
|
1176
1197
|
}),
|
|
1177
1198
|
standard: () => ({
|
|
1178
1199
|
marginBottom: 0
|
|
@@ -1180,28 +1201,29 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1180
1201
|
// Temporal workaroud to give a faster solution for a Workflows demand: https://app.shortcut.com/cartoteam/story/294539/distinction-among-parameters-optional-inputs-units-in-the-ui
|
|
1181
1202
|
// These styles avoid (by now) the need to review current forms and change those with a required mark.
|
|
1182
1203
|
// TODO: remored asterisk completely and use instead LabelWithIndicator component to mark also required ones.
|
|
1183
|
-
asterisk: ({ theme:
|
|
1204
|
+
asterisk: ({ theme: theme2 }) => ({
|
|
1184
1205
|
"&, &.Mui-error": {
|
|
1185
1206
|
color: "transparent"
|
|
1186
1207
|
},
|
|
1187
1208
|
"&::after": {
|
|
1188
1209
|
content: '"(required)"',
|
|
1189
|
-
marginLeft:
|
|
1190
|
-
color:
|
|
1210
|
+
marginLeft: theme2.spacing(-0.5),
|
|
1211
|
+
color: theme2.palette.text.secondary,
|
|
1191
1212
|
fontWeight: 400,
|
|
1192
1213
|
".Mui-disabled &": {
|
|
1193
|
-
color:
|
|
1214
|
+
color: theme2.palette.text.disabled
|
|
1194
1215
|
}
|
|
1195
1216
|
}
|
|
1196
1217
|
})
|
|
1197
|
-
}
|
|
1218
|
+
};
|
|
1219
|
+
const formsOverrides = {
|
|
1198
1220
|
// Checkbox
|
|
1199
1221
|
MuiCheckbox: {
|
|
1200
1222
|
defaultProps: {
|
|
1201
1223
|
size: "small"
|
|
1202
1224
|
},
|
|
1203
1225
|
styleOverrides: {
|
|
1204
|
-
...
|
|
1226
|
+
...checkboxRadioOverrides
|
|
1205
1227
|
}
|
|
1206
1228
|
},
|
|
1207
1229
|
// Radio Button
|
|
@@ -1210,42 +1232,42 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1210
1232
|
size: "small"
|
|
1211
1233
|
},
|
|
1212
1234
|
styleOverrides: {
|
|
1213
|
-
...
|
|
1235
|
+
...checkboxRadioOverrides
|
|
1214
1236
|
}
|
|
1215
1237
|
},
|
|
1216
1238
|
// Text Field
|
|
1217
1239
|
MuiTextField: {
|
|
1218
1240
|
defaultProps: {
|
|
1219
|
-
fullWidth:
|
|
1241
|
+
fullWidth: true,
|
|
1220
1242
|
size: "small",
|
|
1221
1243
|
InputLabelProps: {
|
|
1222
|
-
shrink:
|
|
1244
|
+
shrink: true
|
|
1223
1245
|
},
|
|
1224
1246
|
SelectProps: {
|
|
1225
|
-
IconComponent:
|
|
1247
|
+
IconComponent: ArrowDown,
|
|
1226
1248
|
size: "small"
|
|
1227
1249
|
}
|
|
1228
1250
|
},
|
|
1229
1251
|
styleOverrides: {
|
|
1230
|
-
root: ({ ownerState
|
|
1252
|
+
root: ({ ownerState, theme: theme2 }) => ({
|
|
1231
1253
|
"& legend": {
|
|
1232
1254
|
display: "none"
|
|
1233
1255
|
},
|
|
1234
1256
|
// Select bool
|
|
1235
|
-
...
|
|
1257
|
+
...ownerState.select === true && {
|
|
1236
1258
|
"& .MuiInputBase-root": {
|
|
1237
1259
|
padding: 0,
|
|
1238
1260
|
"&.MuiOutlinedInput-root, &.MuiFilledInput-root": {
|
|
1239
1261
|
padding: 0
|
|
1240
1262
|
},
|
|
1241
1263
|
"& .MuiInputAdornment-positionEnd": {
|
|
1242
|
-
marginRight:
|
|
1264
|
+
marginRight: theme2.spacing(3)
|
|
1243
1265
|
},
|
|
1244
1266
|
"& .MuiSelect-select": {
|
|
1245
|
-
padding:
|
|
1267
|
+
padding: theme2.spacing(1.5),
|
|
1246
1268
|
"&.MuiInputBase-input": {
|
|
1247
|
-
paddingLeft:
|
|
1248
|
-
paddingRight:
|
|
1269
|
+
paddingLeft: theme2.spacing(2),
|
|
1270
|
+
paddingRight: theme2.spacing(5),
|
|
1249
1271
|
"&.MuiSelect-standard": {
|
|
1250
1272
|
paddingLeft: 0
|
|
1251
1273
|
}
|
|
@@ -1260,8 +1282,8 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1260
1282
|
}
|
|
1261
1283
|
},
|
|
1262
1284
|
"& .MuiSelect-icon": {
|
|
1263
|
-
right:
|
|
1264
|
-
color:
|
|
1285
|
+
right: theme2.spacing(2),
|
|
1286
|
+
color: theme2.palette.text.secondary
|
|
1265
1287
|
},
|
|
1266
1288
|
"& .MuiSelect-iconStandard": {
|
|
1267
1289
|
right: 0
|
|
@@ -1272,18 +1294,18 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1272
1294
|
padding: 0
|
|
1273
1295
|
},
|
|
1274
1296
|
"& .MuiSelect-select": {
|
|
1275
|
-
...
|
|
1276
|
-
padding:
|
|
1297
|
+
...theme2.typography.body2,
|
|
1298
|
+
padding: theme2.spacing(0.75),
|
|
1277
1299
|
"&.MuiInputBase-input": {
|
|
1278
|
-
paddingLeft:
|
|
1279
|
-
paddingRight:
|
|
1300
|
+
paddingLeft: theme2.spacing(1.5),
|
|
1301
|
+
paddingRight: theme2.spacing(4)
|
|
1280
1302
|
}
|
|
1281
1303
|
},
|
|
1282
1304
|
"&.MuiOutlinedInput-root.MuiInputBase-sizeSmall": {
|
|
1283
1305
|
padding: 0
|
|
1284
1306
|
},
|
|
1285
1307
|
"& .MuiSelect-icon": {
|
|
1286
|
-
right:
|
|
1308
|
+
right: theme2.spacing(1.5)
|
|
1287
1309
|
}
|
|
1288
1310
|
}
|
|
1289
1311
|
}
|
|
@@ -1293,9 +1315,9 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1293
1315
|
// Input Base
|
|
1294
1316
|
MuiInputBase: {
|
|
1295
1317
|
styleOverrides: {
|
|
1296
|
-
root: ({ theme:
|
|
1297
|
-
height:
|
|
1298
|
-
...
|
|
1318
|
+
root: ({ theme: theme2 }) => ({
|
|
1319
|
+
height: theme2.spacing(6),
|
|
1320
|
+
...theme2.typography.body1,
|
|
1299
1321
|
"& input": {
|
|
1300
1322
|
padding: 0,
|
|
1301
1323
|
whiteSpace: "nowrap",
|
|
@@ -1303,13 +1325,13 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1303
1325
|
textOverflow: "ellipsis",
|
|
1304
1326
|
"&::placeholder": {
|
|
1305
1327
|
opacity: 1,
|
|
1306
|
-
color:
|
|
1328
|
+
color: theme2.palette.text.hint
|
|
1307
1329
|
},
|
|
1308
1330
|
"&:read-only::placeholder": {
|
|
1309
|
-
color:
|
|
1331
|
+
color: theme2.palette.text.disabled
|
|
1310
1332
|
},
|
|
1311
1333
|
"&.Mui-disabled::placeholder": {
|
|
1312
|
-
color:
|
|
1334
|
+
color: theme2.palette.text.disabled
|
|
1313
1335
|
},
|
|
1314
1336
|
// Remove focus on keyboard navigation as the parent element has focus
|
|
1315
1337
|
"&:focus-visible": {
|
|
@@ -1338,103 +1360,103 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1338
1360
|
"&:hover": {
|
|
1339
1361
|
backgroundColor: "transparent"
|
|
1340
1362
|
},
|
|
1341
|
-
[
|
|
1363
|
+
[theme2.breakpoints.up("sm")]: {
|
|
1342
1364
|
minHeight: "initial"
|
|
1343
1365
|
}
|
|
1344
1366
|
},
|
|
1345
1367
|
// Variants
|
|
1346
1368
|
"&.MuiFilledInput-root": {
|
|
1347
|
-
padding:
|
|
1348
|
-
borderRadius:
|
|
1349
|
-
backgroundColor:
|
|
1369
|
+
padding: theme2.spacing(1, 2),
|
|
1370
|
+
borderRadius: theme2.spacing(0.5),
|
|
1371
|
+
backgroundColor: theme2.palette.default.background,
|
|
1350
1372
|
"&:hover": {
|
|
1351
|
-
backgroundColor:
|
|
1373
|
+
backgroundColor: theme2.palette.default.background
|
|
1352
1374
|
},
|
|
1353
1375
|
"&::before": {
|
|
1354
1376
|
top: 0,
|
|
1355
|
-
borderRadius:
|
|
1377
|
+
borderRadius: theme2.spacing(0.5),
|
|
1356
1378
|
border: "1px solid transparent",
|
|
1357
1379
|
transition: "border 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
|
|
1358
1380
|
},
|
|
1359
1381
|
"&:hover:not(.Mui-disabled)::before": {
|
|
1360
|
-
borderColor:
|
|
1382
|
+
borderColor: theme2.palette.text.primary
|
|
1361
1383
|
},
|
|
1362
1384
|
"&::after": {
|
|
1363
|
-
borderRadius:
|
|
1385
|
+
borderRadius: theme2.spacing(0.5),
|
|
1364
1386
|
border: "1px solid transparent"
|
|
1365
1387
|
},
|
|
1366
1388
|
"&.MuiInputBase-sizeSmall": {
|
|
1367
|
-
padding:
|
|
1389
|
+
padding: theme2.spacing(0.5, 1.5)
|
|
1368
1390
|
},
|
|
1369
1391
|
"&.Mui-focused": {
|
|
1370
|
-
backgroundColor:
|
|
1392
|
+
backgroundColor: theme2.palette.background.paper,
|
|
1371
1393
|
"&::after": {
|
|
1372
|
-
border: `2px solid ${
|
|
1394
|
+
border: `2px solid ${theme2.palette.primary.main}`
|
|
1373
1395
|
}
|
|
1374
1396
|
},
|
|
1375
1397
|
"&.Mui-disabled": {
|
|
1376
|
-
backgroundColor:
|
|
1398
|
+
backgroundColor: theme2.palette.default.background,
|
|
1377
1399
|
"&::before": {
|
|
1378
1400
|
borderBottomStyle: "solid"
|
|
1379
1401
|
}
|
|
1380
1402
|
},
|
|
1381
1403
|
"&.Mui-error::after": {
|
|
1382
1404
|
opacity: 1,
|
|
1383
|
-
border: `2px solid ${
|
|
1405
|
+
border: `2px solid ${theme2.palette.error.light}`
|
|
1384
1406
|
},
|
|
1385
1407
|
"&.Mui-readOnly": {
|
|
1386
1408
|
"&.Mui-focused": {
|
|
1387
|
-
backgroundColor:
|
|
1409
|
+
backgroundColor: theme2.palette.default.background
|
|
1388
1410
|
}
|
|
1389
1411
|
}
|
|
1390
1412
|
},
|
|
1391
1413
|
"&.MuiOutlinedInput-root": {
|
|
1392
|
-
padding:
|
|
1414
|
+
padding: theme2.spacing(1, 2),
|
|
1393
1415
|
"&.MuiInputBase-sizeSmall": {
|
|
1394
|
-
padding:
|
|
1416
|
+
padding: theme2.spacing(0.5, 1.5)
|
|
1395
1417
|
},
|
|
1396
1418
|
"&.Mui-focused": {
|
|
1397
|
-
backgroundColor:
|
|
1419
|
+
backgroundColor: theme2.palette.background.paper
|
|
1398
1420
|
},
|
|
1399
1421
|
"&.Mui-disabled": {
|
|
1400
|
-
backgroundColor:
|
|
1422
|
+
backgroundColor: theme2.palette.default.background
|
|
1401
1423
|
},
|
|
1402
1424
|
"&.Mui-readOnly": {
|
|
1403
|
-
backgroundColor:
|
|
1425
|
+
backgroundColor: theme2.palette.default.background,
|
|
1404
1426
|
"&.Mui-focused": {
|
|
1405
|
-
backgroundColor:
|
|
1427
|
+
backgroundColor: theme2.palette.default.background
|
|
1406
1428
|
}
|
|
1407
1429
|
},
|
|
1408
1430
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
1409
1431
|
top: 0,
|
|
1410
|
-
borderColor:
|
|
1432
|
+
borderColor: theme2.palette.default.outlinedBorder,
|
|
1411
1433
|
transition: "border 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
|
|
1412
1434
|
},
|
|
1413
1435
|
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
1414
1436
|
transition: "none"
|
|
1415
1437
|
},
|
|
1416
1438
|
"&.Mui-error .MuiOutlinedInput-notchedOutline": {
|
|
1417
|
-
border: `2px solid ${
|
|
1439
|
+
border: `2px solid ${theme2.palette.error.light}`
|
|
1418
1440
|
}
|
|
1419
1441
|
},
|
|
1420
1442
|
"&.MuiInput-underline": {
|
|
1421
1443
|
marginTop: 0,
|
|
1422
1444
|
padding: 0,
|
|
1423
1445
|
"&::before": {
|
|
1424
|
-
borderColor:
|
|
1446
|
+
borderColor: theme2.palette.default.outlinedBorder
|
|
1425
1447
|
},
|
|
1426
1448
|
"&:hover:not(.Mui-disabled)::before": {
|
|
1427
|
-
borderBottom: `1px solid ${
|
|
1449
|
+
borderBottom: `1px solid ${theme2.palette.text.primary}`
|
|
1428
1450
|
},
|
|
1429
1451
|
"&:not(.Mui-disabled)::after": {
|
|
1430
1452
|
borderBottom: "1px solid transparent"
|
|
1431
1453
|
},
|
|
1432
1454
|
"&.Mui-focused::after": {
|
|
1433
|
-
borderBottom: `2px solid ${
|
|
1455
|
+
borderBottom: `2px solid ${theme2.palette.primary.main}`
|
|
1434
1456
|
},
|
|
1435
1457
|
"&.Mui-error::after": {
|
|
1436
1458
|
opacity: 1,
|
|
1437
|
-
borderBottom: `2px solid ${
|
|
1459
|
+
borderBottom: `2px solid ${theme2.palette.error.light}`
|
|
1438
1460
|
},
|
|
1439
1461
|
"&.Mui-disabled::before": {
|
|
1440
1462
|
borderBottomStyle: "solid"
|
|
@@ -1443,18 +1465,18 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1443
1465
|
// TextArea (multiline)
|
|
1444
1466
|
"&.MuiInputBase-multiline": {
|
|
1445
1467
|
height: "auto",
|
|
1446
|
-
minHeight:
|
|
1468
|
+
minHeight: theme2.spacing(12),
|
|
1447
1469
|
alignItems: "flex-start",
|
|
1448
|
-
padding:
|
|
1470
|
+
padding: theme2.spacing(0, 0.25),
|
|
1449
1471
|
"& textarea": {
|
|
1450
|
-
padding:
|
|
1451
|
-
...
|
|
1472
|
+
padding: theme2.spacing(1.5, 1.75),
|
|
1473
|
+
...theme2.typography.body1,
|
|
1452
1474
|
"&::placeholder": {
|
|
1453
1475
|
opacity: 1,
|
|
1454
|
-
color:
|
|
1476
|
+
color: theme2.palette.text.hint
|
|
1455
1477
|
},
|
|
1456
1478
|
"&.Mui-disabled::placeholder": {
|
|
1457
|
-
color:
|
|
1479
|
+
color: theme2.palette.text.disabled
|
|
1458
1480
|
},
|
|
1459
1481
|
// Remove focus on keyboard navigation as the parent element has focus
|
|
1460
1482
|
"&:focus-visible": {
|
|
@@ -1463,26 +1485,26 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1463
1485
|
}
|
|
1464
1486
|
},
|
|
1465
1487
|
"&.MuiInputBase-sizeSmall": {
|
|
1466
|
-
minHeight:
|
|
1467
|
-
padding:
|
|
1488
|
+
minHeight: theme2.spacing(9),
|
|
1489
|
+
padding: theme2.spacing(0, 0.25),
|
|
1468
1490
|
"& textarea": {
|
|
1469
|
-
padding:
|
|
1470
|
-
...
|
|
1491
|
+
padding: theme2.spacing(1, 1.25),
|
|
1492
|
+
...theme2.typography.body2
|
|
1471
1493
|
}
|
|
1472
1494
|
}
|
|
1473
1495
|
},
|
|
1474
1496
|
// Select Multiple selection
|
|
1475
1497
|
"&.MuiInputBase-root .MuiSelect-multiple.MuiInputBase-input": {
|
|
1476
1498
|
paddingLeft: 0,
|
|
1477
|
-
paddingRight:
|
|
1499
|
+
paddingRight: theme2.spacing(3)
|
|
1478
1500
|
}
|
|
1479
1501
|
}),
|
|
1480
1502
|
// size
|
|
1481
|
-
sizeSmall: ({ theme:
|
|
1482
|
-
height:
|
|
1483
|
-
padding:
|
|
1503
|
+
sizeSmall: ({ theme: theme2 }) => ({
|
|
1504
|
+
height: theme2.spacing(4),
|
|
1505
|
+
padding: theme2.spacing(0, 1.5),
|
|
1484
1506
|
"& input": {
|
|
1485
|
-
...
|
|
1507
|
+
...theme2.typography.body2
|
|
1486
1508
|
}
|
|
1487
1509
|
})
|
|
1488
1510
|
}
|
|
@@ -1490,29 +1512,29 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1490
1512
|
// Input Adornment
|
|
1491
1513
|
MuiInputAdornment: {
|
|
1492
1514
|
styleOverrides: {
|
|
1493
|
-
root: ({ theme:
|
|
1515
|
+
root: ({ theme: theme2 }) => ({
|
|
1494
1516
|
"& .MuiTypography-root": {
|
|
1495
|
-
...
|
|
1496
|
-
color:
|
|
1517
|
+
...theme2.typography.body1,
|
|
1518
|
+
color: theme2.palette.text.secondary
|
|
1497
1519
|
},
|
|
1498
1520
|
"&.MuiInputAdornment-sizeSmall": {
|
|
1499
1521
|
"& .MuiTypography-root": {
|
|
1500
|
-
...
|
|
1522
|
+
...theme2.typography.body2
|
|
1501
1523
|
}
|
|
1502
1524
|
},
|
|
1503
1525
|
"&.MuiInputAdornment-positionStart.MuiInputAdornment-root:not(.MuiInputAdornment-hiddenLabel)": {
|
|
1504
1526
|
marginTop: 0
|
|
1505
1527
|
},
|
|
1506
1528
|
"& .MuiSvgIcon-root, & svg": {
|
|
1507
|
-
fontSize:
|
|
1508
|
-
width:
|
|
1509
|
-
minWidth:
|
|
1510
|
-
height:
|
|
1511
|
-
color:
|
|
1529
|
+
fontSize: ICON_SIZE_MEDIUM,
|
|
1530
|
+
width: ICON_SIZE_MEDIUM,
|
|
1531
|
+
minWidth: ICON_SIZE_MEDIUM,
|
|
1532
|
+
height: ICON_SIZE_MEDIUM,
|
|
1533
|
+
color: theme2.palette.text.secondary
|
|
1512
1534
|
},
|
|
1513
1535
|
".Mui-disabled &": {
|
|
1514
1536
|
"& .MuiTypography-root, & .MuiSvgIcon-root": {
|
|
1515
|
-
color:
|
|
1537
|
+
color: theme2.palette.text.disabled
|
|
1516
1538
|
}
|
|
1517
1539
|
}
|
|
1518
1540
|
})
|
|
@@ -1521,18 +1543,18 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1521
1543
|
// Form Control
|
|
1522
1544
|
MuiFormControl: {
|
|
1523
1545
|
defaultProps: {
|
|
1524
|
-
fullWidth:
|
|
1546
|
+
fullWidth: true
|
|
1525
1547
|
}
|
|
1526
1548
|
},
|
|
1527
1549
|
// Form Control Label (radio, checkbox and switch wrapper)
|
|
1528
1550
|
MuiFormControlLabel: {
|
|
1529
1551
|
styleOverrides: {
|
|
1530
|
-
root: ({ ownerState
|
|
1531
|
-
marginLeft:
|
|
1552
|
+
root: ({ ownerState, theme: theme2 }) => ({
|
|
1553
|
+
marginLeft: theme2.spacing(-0.5),
|
|
1532
1554
|
"& .MuiSwitch-root": {
|
|
1533
|
-
marginLeft:
|
|
1555
|
+
marginLeft: theme2.spacing(0.5)
|
|
1534
1556
|
},
|
|
1535
|
-
...
|
|
1557
|
+
...ownerState.readOnly === true && {
|
|
1536
1558
|
pointerEvents: "none"
|
|
1537
1559
|
}
|
|
1538
1560
|
})
|
|
@@ -1541,39 +1563,39 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1541
1563
|
// Form Helper Text
|
|
1542
1564
|
MuiFormHelperText: {
|
|
1543
1565
|
styleOverrides: {
|
|
1544
|
-
root: ({ theme:
|
|
1566
|
+
root: ({ theme: theme2 }) => ({
|
|
1545
1567
|
margin: 0,
|
|
1546
|
-
marginTop:
|
|
1568
|
+
marginTop: theme2.spacing(1)
|
|
1547
1569
|
})
|
|
1548
1570
|
}
|
|
1549
1571
|
},
|
|
1550
1572
|
// Label
|
|
1551
1573
|
MuiInputLabel: {
|
|
1552
1574
|
styleOverrides: {
|
|
1553
|
-
...
|
|
1575
|
+
...LabelOverrides
|
|
1554
1576
|
}
|
|
1555
1577
|
},
|
|
1556
1578
|
MuiFormLabel: {
|
|
1557
1579
|
styleOverrides: {
|
|
1558
|
-
...
|
|
1580
|
+
...LabelOverrides
|
|
1559
1581
|
}
|
|
1560
1582
|
},
|
|
1561
1583
|
// Select
|
|
1562
1584
|
MuiSelect: {
|
|
1563
1585
|
defaultProps: {
|
|
1564
|
-
IconComponent:
|
|
1565
|
-
fullWidth:
|
|
1586
|
+
IconComponent: ArrowDown,
|
|
1587
|
+
fullWidth: true,
|
|
1566
1588
|
size: "small"
|
|
1567
1589
|
},
|
|
1568
1590
|
styleOverrides: {
|
|
1569
|
-
root: ({ theme:
|
|
1591
|
+
root: ({ theme: theme2 }) => ({
|
|
1570
1592
|
padding: 0,
|
|
1571
1593
|
"& .MuiSelect-icon": {
|
|
1572
|
-
right:
|
|
1573
|
-
color:
|
|
1594
|
+
right: theme2.spacing(2),
|
|
1595
|
+
color: theme2.palette.text.secondary
|
|
1574
1596
|
},
|
|
1575
1597
|
"&.Mui-disabled .MuiSelect-icon, &.Mui-readOnly .MuiSelect-icon": {
|
|
1576
|
-
color:
|
|
1598
|
+
color: theme2.palette.text.disabled
|
|
1577
1599
|
},
|
|
1578
1600
|
"& .MuiSelect-iconStandard": {
|
|
1579
1601
|
right: 0
|
|
@@ -1593,11 +1615,11 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1593
1615
|
},
|
|
1594
1616
|
// Size Small
|
|
1595
1617
|
"&.MuiInputBase-sizeSmall": {
|
|
1596
|
-
...
|
|
1618
|
+
...theme2.typography.body2,
|
|
1597
1619
|
"& .MuiSelect-select": {
|
|
1598
1620
|
"&.MuiInputBase-input": {
|
|
1599
|
-
paddingLeft:
|
|
1600
|
-
paddingRight:
|
|
1621
|
+
paddingLeft: theme2.spacing(1.5),
|
|
1622
|
+
paddingRight: theme2.spacing(4)
|
|
1601
1623
|
},
|
|
1602
1624
|
"&.MuiSelect-standard": {
|
|
1603
1625
|
paddingLeft: 0
|
|
@@ -1607,15 +1629,15 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1607
1629
|
padding: 0
|
|
1608
1630
|
},
|
|
1609
1631
|
"& .MuiSelect-icon": {
|
|
1610
|
-
right:
|
|
1632
|
+
right: theme2.spacing(1.5)
|
|
1611
1633
|
}
|
|
1612
1634
|
}
|
|
1613
1635
|
}),
|
|
1614
|
-
select: ({ theme:
|
|
1615
|
-
padding:
|
|
1636
|
+
select: ({ theme: theme2 }) => ({
|
|
1637
|
+
padding: theme2.spacing(1.5),
|
|
1616
1638
|
"&.MuiInputBase-input": {
|
|
1617
|
-
paddingLeft:
|
|
1618
|
-
paddingRight:
|
|
1639
|
+
paddingLeft: theme2.spacing(2),
|
|
1640
|
+
paddingRight: theme2.spacing(5),
|
|
1619
1641
|
"&.MuiSelect-standard": {
|
|
1620
1642
|
paddingLeft: 0
|
|
1621
1643
|
}
|
|
@@ -1634,7 +1656,7 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1634
1656
|
textOverflow: "ellipsis"
|
|
1635
1657
|
},
|
|
1636
1658
|
"&.MuiInputBase-inputSizeSmall": {
|
|
1637
|
-
padding:
|
|
1659
|
+
padding: theme2.spacing(0.75)
|
|
1638
1660
|
}
|
|
1639
1661
|
})
|
|
1640
1662
|
}
|
|
@@ -1643,9 +1665,9 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1643
1665
|
MuiAutocomplete: {
|
|
1644
1666
|
defaultProps: {
|
|
1645
1667
|
size: "small",
|
|
1646
|
-
fullWidth:
|
|
1647
|
-
popupIcon: /* @__PURE__ */
|
|
1648
|
-
clearIcon: /* @__PURE__ */
|
|
1668
|
+
fullWidth: true,
|
|
1669
|
+
popupIcon: /* @__PURE__ */ jsx(ArrowDown, {}),
|
|
1670
|
+
clearIcon: /* @__PURE__ */ jsx(Tooltip, { title: "Clear", children: /* @__PURE__ */ jsx(Cancel, { "data-testid": "cancel-icon-autocomplete" }) }),
|
|
1649
1671
|
clearText: "",
|
|
1650
1672
|
ChipProps: { color: "default" },
|
|
1651
1673
|
limitTags: 1,
|
|
@@ -1656,36 +1678,36 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1656
1678
|
}
|
|
1657
1679
|
},
|
|
1658
1680
|
styleOverrides: {
|
|
1659
|
-
root: ({ ownerState
|
|
1681
|
+
root: ({ ownerState, theme: theme2 }) => ({
|
|
1660
1682
|
"&.MuiAutocomplete-root .MuiFormControl-root": {
|
|
1661
1683
|
//Needed to overide Mui default styles
|
|
1662
1684
|
".MuiInputBase-root": {
|
|
1663
|
-
gap:
|
|
1685
|
+
gap: theme2.spacing(0.5),
|
|
1664
1686
|
height: "auto",
|
|
1665
|
-
minHeight:
|
|
1666
|
-
padding:
|
|
1667
|
-
paddingRight:
|
|
1687
|
+
minHeight: theme2.spacing(6),
|
|
1688
|
+
padding: theme2.spacing(1, 2),
|
|
1689
|
+
paddingRight: theme2.spacing(5),
|
|
1668
1690
|
".MuiInputBase-input": {
|
|
1669
1691
|
padding: 0
|
|
1670
1692
|
},
|
|
1671
1693
|
// Multiple
|
|
1672
|
-
...
|
|
1673
|
-
paddingLeft:
|
|
1694
|
+
...ownerState.multiple === true && {
|
|
1695
|
+
paddingLeft: theme2.spacing(1),
|
|
1674
1696
|
".MuiInputBase-input": {
|
|
1675
1697
|
padding: 0,
|
|
1676
|
-
marginLeft:
|
|
1698
|
+
marginLeft: theme2.spacing(1)
|
|
1677
1699
|
}
|
|
1678
1700
|
},
|
|
1679
|
-
...
|
|
1680
|
-
minHeight:
|
|
1681
|
-
padding:
|
|
1682
|
-
paddingRight:
|
|
1683
|
-
...
|
|
1684
|
-
paddingLeft:
|
|
1701
|
+
...ownerState.size === "small" && {
|
|
1702
|
+
minHeight: theme2.spacing(4),
|
|
1703
|
+
padding: theme2.spacing(0.5, 1.5),
|
|
1704
|
+
paddingRight: theme2.spacing(4),
|
|
1705
|
+
...ownerState.multiple === true && {
|
|
1706
|
+
paddingLeft: theme2.spacing(0.5)
|
|
1685
1707
|
}
|
|
1686
1708
|
},
|
|
1687
|
-
...
|
|
1688
|
-
backgroundColor:
|
|
1709
|
+
...ownerState.readOnly === true && {
|
|
1710
|
+
backgroundColor: theme2.palette.default.background
|
|
1689
1711
|
},
|
|
1690
1712
|
"&.Mui-disabled": {
|
|
1691
1713
|
pointerEvents: "none"
|
|
@@ -1694,23 +1716,23 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1694
1716
|
// Variants
|
|
1695
1717
|
".MuiFilledInput-root .MuiAutocomplete-tag": {
|
|
1696
1718
|
backgroundColor: "transparent",
|
|
1697
|
-
border: `1px solid ${
|
|
1719
|
+
border: `1px solid ${theme2.palette.default.main}`
|
|
1698
1720
|
}
|
|
1699
1721
|
},
|
|
1700
1722
|
"&.MuiAutocomplete-hasClearIcon .MuiFormControl-root .MuiInputBase-root": {
|
|
1701
|
-
paddingRight:
|
|
1702
|
-
...
|
|
1703
|
-
paddingRight:
|
|
1723
|
+
paddingRight: theme2.spacing(8.5),
|
|
1724
|
+
...ownerState.size === "small" && {
|
|
1725
|
+
paddingRight: theme2.spacing(7)
|
|
1704
1726
|
}
|
|
1705
1727
|
}
|
|
1706
1728
|
}),
|
|
1707
|
-
inputRoot: ({ theme:
|
|
1708
|
-
maxHeight:
|
|
1729
|
+
inputRoot: ({ theme: theme2 }) => ({
|
|
1730
|
+
maxHeight: theme2.spacing(20),
|
|
1709
1731
|
// 160px
|
|
1710
1732
|
overflow: "auto",
|
|
1711
1733
|
transition: "box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
1712
1734
|
"& .MuiAutocomplete-input": {
|
|
1713
|
-
minWidth: `${
|
|
1735
|
+
minWidth: `${theme2.spacing(10)} !important`,
|
|
1714
1736
|
"&[readOnly]": {
|
|
1715
1737
|
display: "none"
|
|
1716
1738
|
}
|
|
@@ -1723,157 +1745,157 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1723
1745
|
border: "0 !important"
|
|
1724
1746
|
},
|
|
1725
1747
|
"&.MuiOutlinedInput-root": {
|
|
1726
|
-
boxShadow: `inset 0 0 0 1px ${
|
|
1748
|
+
boxShadow: `inset 0 0 0 1px ${theme2.palette.default.outlinedBorder}`
|
|
1727
1749
|
},
|
|
1728
1750
|
"&:hover": {
|
|
1729
|
-
boxShadow: `inset 0 0 0 1px ${
|
|
1751
|
+
boxShadow: `inset 0 0 0 1px ${theme2.palette.text.primary}`
|
|
1730
1752
|
},
|
|
1731
1753
|
"&.Mui-focused": {
|
|
1732
1754
|
transition: "none",
|
|
1733
|
-
boxShadow: `inset 0 0 0 2px ${
|
|
1755
|
+
boxShadow: `inset 0 0 0 2px ${theme2.palette.primary.main}`
|
|
1734
1756
|
},
|
|
1735
1757
|
"&.Mui-error": {
|
|
1736
|
-
boxShadow: `inset 0 0 0 2px ${
|
|
1758
|
+
boxShadow: `inset 0 0 0 2px ${theme2.palette.error.light}`
|
|
1737
1759
|
},
|
|
1738
1760
|
"&.Mui-disabled.MuiOutlinedInput-root": {
|
|
1739
|
-
boxShadow: `inset 0 0 0 1px ${
|
|
1761
|
+
boxShadow: `inset 0 0 0 1px ${theme2.palette.default.outlinedBorder}`,
|
|
1740
1762
|
"&.Mui-error": {
|
|
1741
|
-
boxShadow: `inset 0 0 0 2px ${
|
|
1763
|
+
boxShadow: `inset 0 0 0 2px ${theme2.palette.error.light}`
|
|
1742
1764
|
}
|
|
1743
1765
|
},
|
|
1744
1766
|
"&.Mui-disabled.MuiFilledInput-root": {
|
|
1745
1767
|
"& .MuiAutocomplete-tag": {
|
|
1746
|
-
borderColor: `${
|
|
1768
|
+
borderColor: `${theme2.palette.default.outlinedBorder} !important`
|
|
1747
1769
|
}
|
|
1748
1770
|
}
|
|
1749
1771
|
}),
|
|
1750
|
-
endAdornment: ({ theme:
|
|
1772
|
+
endAdornment: ({ theme: theme2 }) => ({
|
|
1751
1773
|
transform: "none",
|
|
1752
|
-
top:
|
|
1774
|
+
top: theme2.spacing(2),
|
|
1753
1775
|
display: "flex",
|
|
1754
1776
|
alignItems: "center",
|
|
1755
1777
|
justifyContent: "flex-end",
|
|
1756
|
-
marginRight:
|
|
1778
|
+
marginRight: theme2.spacing(1),
|
|
1757
1779
|
".MuiAutocomplete-hasClearIcon &": {
|
|
1758
|
-
top:
|
|
1780
|
+
top: theme2.spacing(1)
|
|
1759
1781
|
},
|
|
1760
1782
|
".MuiInputBase-sizeSmall &": {
|
|
1761
|
-
top:
|
|
1762
|
-
width:
|
|
1763
|
-
height:
|
|
1764
|
-
marginRight:
|
|
1783
|
+
top: theme2.spacing(0.5),
|
|
1784
|
+
width: theme2.spacing(3),
|
|
1785
|
+
height: theme2.spacing(3),
|
|
1786
|
+
marginRight: theme2.spacing(0.5)
|
|
1765
1787
|
}
|
|
1766
1788
|
}),
|
|
1767
|
-
clearIndicator: ({ ownerState
|
|
1789
|
+
clearIndicator: ({ ownerState, theme: theme2 }) => ({
|
|
1768
1790
|
marginRight: 0,
|
|
1769
|
-
color:
|
|
1770
|
-
...
|
|
1771
|
-
width:
|
|
1772
|
-
height:
|
|
1791
|
+
color: theme2.palette.text.hint,
|
|
1792
|
+
...ownerState.size === "small" && {
|
|
1793
|
+
width: theme2.spacing(3),
|
|
1794
|
+
height: theme2.spacing(3)
|
|
1773
1795
|
}
|
|
1774
1796
|
}),
|
|
1775
|
-
popupIndicator: ({ theme:
|
|
1776
|
-
width:
|
|
1777
|
-
height:
|
|
1797
|
+
popupIndicator: ({ theme: theme2 }) => ({
|
|
1798
|
+
width: ICON_SIZE_MEDIUM,
|
|
1799
|
+
height: ICON_SIZE_MEDIUM,
|
|
1778
1800
|
cursor: "pointer",
|
|
1779
1801
|
"&:hover": {
|
|
1780
1802
|
backgroundColor: "transparent"
|
|
1781
1803
|
},
|
|
1782
1804
|
"&.MuiButtonBase-root": {
|
|
1783
|
-
color:
|
|
1805
|
+
color: theme2.palette.text.secondary
|
|
1784
1806
|
},
|
|
1785
1807
|
".Mui-disabled &": {
|
|
1786
|
-
color:
|
|
1808
|
+
color: theme2.palette.text.disabled
|
|
1787
1809
|
},
|
|
1788
1810
|
"input:read-only + .MuiAutocomplete-endAdornment &": {
|
|
1789
|
-
color:
|
|
1811
|
+
color: theme2.palette.text.disabled
|
|
1790
1812
|
}
|
|
1791
1813
|
}),
|
|
1792
|
-
tag: ({ ownerState
|
|
1814
|
+
tag: ({ ownerState, theme: theme2 }) => ({
|
|
1793
1815
|
margin: 0,
|
|
1794
1816
|
"&:not(.MuiButtonBase-root)": {
|
|
1795
1817
|
display: "flex",
|
|
1796
1818
|
alignItems: "center",
|
|
1797
|
-
height:
|
|
1798
|
-
padding:
|
|
1799
|
-
backgroundColor:
|
|
1800
|
-
borderRadius:
|
|
1801
|
-
...
|
|
1802
|
-
fontWeight:
|
|
1803
|
-
...
|
|
1804
|
-
height:
|
|
1805
|
-
padding:
|
|
1806
|
-
borderRadius:
|
|
1807
|
-
...
|
|
1808
|
-
fontWeight:
|
|
1809
|
-
}
|
|
1810
|
-
}
|
|
1811
|
-
}),
|
|
1812
|
-
option: ({ ownerState
|
|
1819
|
+
height: theme2.spacing(4),
|
|
1820
|
+
padding: theme2.spacing(0, 1.5),
|
|
1821
|
+
backgroundColor: theme2.palette.default.main,
|
|
1822
|
+
borderRadius: theme2.spacing(2),
|
|
1823
|
+
...theme2.typography.button,
|
|
1824
|
+
fontWeight: theme2.typography.fontWeightMedium,
|
|
1825
|
+
...ownerState.size === "small" && {
|
|
1826
|
+
height: theme2.spacing(3),
|
|
1827
|
+
padding: theme2.spacing(0, 1),
|
|
1828
|
+
borderRadius: theme2.spacing(1.5),
|
|
1829
|
+
...theme2.typography.caption,
|
|
1830
|
+
fontWeight: theme2.typography.fontWeightMedium
|
|
1831
|
+
}
|
|
1832
|
+
}
|
|
1833
|
+
}),
|
|
1834
|
+
option: ({ ownerState, theme: theme2 }) => ({
|
|
1813
1835
|
"&.MuiAutocomplete-option": {
|
|
1814
|
-
minHeight:
|
|
1815
|
-
padding:
|
|
1816
|
-
...
|
|
1836
|
+
minHeight: theme2.spacing(4),
|
|
1837
|
+
padding: theme2.spacing(0.5, 2),
|
|
1838
|
+
...theme2.typography.body2,
|
|
1817
1839
|
transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
1818
1840
|
"& .MuiCheckbox-root svg path": {
|
|
1819
|
-
fill:
|
|
1841
|
+
fill: theme2.palette.text.secondary
|
|
1820
1842
|
},
|
|
1821
1843
|
"&:hover": {
|
|
1822
|
-
backgroundColor:
|
|
1844
|
+
backgroundColor: theme2.palette.action.hover
|
|
1823
1845
|
},
|
|
1824
1846
|
"&.Mui-disabled": {
|
|
1825
1847
|
"& .MuiCheckbox-root svg path": {
|
|
1826
|
-
fill:
|
|
1848
|
+
fill: theme2.palette.text.disabled
|
|
1827
1849
|
}
|
|
1828
1850
|
},
|
|
1829
1851
|
'&[aria-disabled="true"]': {
|
|
1830
1852
|
opacity: 1
|
|
1831
1853
|
},
|
|
1832
1854
|
'&[aria-selected="true"]': {
|
|
1833
|
-
color:
|
|
1834
|
-
backgroundColor:
|
|
1855
|
+
color: theme2.palette.primary.main,
|
|
1856
|
+
backgroundColor: theme2.palette.primary.background,
|
|
1835
1857
|
".MuiTypography-root": {
|
|
1836
|
-
color:
|
|
1858
|
+
color: theme2.palette.primary.main
|
|
1837
1859
|
},
|
|
1838
1860
|
".MuiTypography-caption": {
|
|
1839
|
-
color:
|
|
1861
|
+
color: theme2.palette.text.secondary
|
|
1840
1862
|
},
|
|
1841
1863
|
"& .MuiCheckbox-root svg path": {
|
|
1842
|
-
fill:
|
|
1864
|
+
fill: theme2.palette.primary.main
|
|
1843
1865
|
},
|
|
1844
1866
|
"&.Mui-focused:hover": {
|
|
1845
|
-
backgroundColor:
|
|
1867
|
+
backgroundColor: theme2.palette.action.hover
|
|
1846
1868
|
},
|
|
1847
1869
|
"&.Mui-disabled": {
|
|
1848
1870
|
backgroundColor: "transparent",
|
|
1849
1871
|
"& svg path": {
|
|
1850
|
-
fill:
|
|
1872
|
+
fill: theme2.palette.text.disabled
|
|
1851
1873
|
},
|
|
1852
1874
|
"& .MuiCheckbox-root svg path": {
|
|
1853
|
-
fill:
|
|
1875
|
+
fill: theme2.palette.text.disabled
|
|
1854
1876
|
},
|
|
1855
1877
|
"& .MuiTypography-root": {
|
|
1856
|
-
color:
|
|
1878
|
+
color: theme2.palette.text.disabled
|
|
1857
1879
|
}
|
|
1858
1880
|
}
|
|
1859
1881
|
},
|
|
1860
1882
|
"&:first-of-type": {
|
|
1861
|
-
marginTop:
|
|
1883
|
+
marginTop: theme2.spacing(1)
|
|
1862
1884
|
},
|
|
1863
|
-
...
|
|
1864
|
-
padding:
|
|
1885
|
+
...ownerState.size === "small" && {
|
|
1886
|
+
padding: theme2.spacing(0.5, 1.5)
|
|
1865
1887
|
}
|
|
1866
1888
|
}
|
|
1867
1889
|
}),
|
|
1868
|
-
noOptions: ({ ownerState
|
|
1869
|
-
padding:
|
|
1870
|
-
...
|
|
1871
|
-
color:
|
|
1872
|
-
...
|
|
1873
|
-
padding:
|
|
1890
|
+
noOptions: ({ ownerState, theme: theme2 }) => ({
|
|
1891
|
+
padding: theme2.spacing(2.5, 2),
|
|
1892
|
+
...theme2.typography.body2,
|
|
1893
|
+
color: theme2.palette.text.secondary,
|
|
1894
|
+
...ownerState.size === "small" && {
|
|
1895
|
+
padding: theme2.spacing(2, 1.5)
|
|
1874
1896
|
}
|
|
1875
1897
|
}),
|
|
1876
|
-
listbox: ({ theme:
|
|
1898
|
+
listbox: ({ theme: theme2 }) => ({
|
|
1877
1899
|
paddingTop: 0,
|
|
1878
1900
|
".MuiDivider-root": {
|
|
1879
1901
|
display: "none"
|
|
@@ -1882,7 +1904,7 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1882
1904
|
display: "block"
|
|
1883
1905
|
},
|
|
1884
1906
|
".MuiMenuItem-root:first-of-type": {
|
|
1885
|
-
marginTop:
|
|
1907
|
+
marginTop: theme2.spacing(1)
|
|
1886
1908
|
}
|
|
1887
1909
|
})
|
|
1888
1910
|
}
|
|
@@ -1890,39 +1912,39 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1890
1912
|
// Switch
|
|
1891
1913
|
MuiSwitch: {
|
|
1892
1914
|
defaultProps: {
|
|
1893
|
-
disableRipple:
|
|
1915
|
+
disableRipple: true
|
|
1894
1916
|
},
|
|
1895
1917
|
styleOverrides: {
|
|
1896
|
-
root: ({ theme:
|
|
1897
|
-
width:
|
|
1898
|
-
height:
|
|
1918
|
+
root: ({ theme: theme2 }) => ({
|
|
1919
|
+
width: theme2.spacing(switchSizeM),
|
|
1920
|
+
height: theme2.spacing(switchSizeS),
|
|
1899
1921
|
padding: 0,
|
|
1900
1922
|
overflow: "visible",
|
|
1901
1923
|
"& + .MuiTypography-root": {
|
|
1902
|
-
marginLeft:
|
|
1903
|
-
color:
|
|
1924
|
+
marginLeft: theme2.spacing(1),
|
|
1925
|
+
color: theme2.palette.text.primary
|
|
1904
1926
|
},
|
|
1905
1927
|
"& + .MuiFormControlLabel-label": {
|
|
1906
|
-
...
|
|
1928
|
+
...theme2.typography.body2
|
|
1907
1929
|
}
|
|
1908
1930
|
}),
|
|
1909
|
-
switchBase: ({ ownerState
|
|
1910
|
-
width:
|
|
1911
|
-
height:
|
|
1912
|
-
padding:
|
|
1931
|
+
switchBase: ({ ownerState, theme: theme2 }) => ({
|
|
1932
|
+
width: theme2.spacing(switchSizeL),
|
|
1933
|
+
height: theme2.spacing(switchSizeL),
|
|
1934
|
+
padding: theme2.spacing(0.5),
|
|
1913
1935
|
borderRadius: "50%",
|
|
1914
|
-
color:
|
|
1936
|
+
color: theme2.palette.text.secondary,
|
|
1915
1937
|
transform: "translate(-8px, -8px)",
|
|
1916
1938
|
"&:hover": {
|
|
1917
|
-
backgroundColor:
|
|
1939
|
+
backgroundColor: theme2.palette.action.hover
|
|
1918
1940
|
},
|
|
1919
1941
|
"&.MuiSwitch-switchBase input": {
|
|
1920
|
-
top:
|
|
1921
|
-
left:
|
|
1942
|
+
top: theme2.spacing(1),
|
|
1943
|
+
left: theme2.spacing(1)
|
|
1922
1944
|
},
|
|
1923
1945
|
"&.Mui-checked": {
|
|
1924
1946
|
transform: "translate(0, -8px)",
|
|
1925
|
-
color:
|
|
1947
|
+
color: theme2.palette.common.white,
|
|
1926
1948
|
"&.MuiSwitch-switchBase input": {
|
|
1927
1949
|
left: 0
|
|
1928
1950
|
},
|
|
@@ -1931,61 +1953,61 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
1931
1953
|
border: 0
|
|
1932
1954
|
}
|
|
1933
1955
|
},
|
|
1934
|
-
...
|
|
1935
|
-
color:
|
|
1956
|
+
...ownerState.readOnly === true && {
|
|
1957
|
+
color: theme2.palette.text.disabled
|
|
1936
1958
|
}
|
|
1937
1959
|
}),
|
|
1938
|
-
thumb: ({ theme:
|
|
1939
|
-
width:
|
|
1940
|
-
height:
|
|
1941
|
-
boxShadow:
|
|
1960
|
+
thumb: ({ theme: theme2 }) => ({
|
|
1961
|
+
width: theme2.spacing(1),
|
|
1962
|
+
height: theme2.spacing(1),
|
|
1963
|
+
boxShadow: theme2.shadows[0],
|
|
1942
1964
|
".Mui-checked &": {
|
|
1943
|
-
boxShadow:
|
|
1965
|
+
boxShadow: theme2.shadows[1]
|
|
1944
1966
|
},
|
|
1945
1967
|
".Mui-disabled &": {
|
|
1946
|
-
backgroundColor:
|
|
1968
|
+
backgroundColor: theme2.palette.text.disabled
|
|
1947
1969
|
},
|
|
1948
1970
|
".Mui-disabled.Mui-checked &": {
|
|
1949
|
-
backgroundColor:
|
|
1971
|
+
backgroundColor: theme2.palette.common.white
|
|
1950
1972
|
}
|
|
1951
1973
|
}),
|
|
1952
|
-
input: ({ theme:
|
|
1953
|
-
width:
|
|
1954
|
-
height:
|
|
1974
|
+
input: ({ theme: theme2 }) => ({
|
|
1975
|
+
width: theme2.spacing(switchSizeM),
|
|
1976
|
+
height: theme2.spacing(switchSizeS),
|
|
1955
1977
|
left: 0
|
|
1956
1978
|
}),
|
|
1957
|
-
track: ({ ownerState
|
|
1979
|
+
track: ({ ownerState, theme: theme2 }) => ({
|
|
1958
1980
|
height: "auto",
|
|
1959
|
-
border: `1px solid ${
|
|
1960
|
-
borderRadius:
|
|
1981
|
+
border: `1px solid ${theme2.palette.text.secondary}`,
|
|
1982
|
+
borderRadius: theme2.spacing(2),
|
|
1961
1983
|
opacity: 1,
|
|
1962
|
-
backgroundColor:
|
|
1984
|
+
backgroundColor: theme2.palette.common.white,
|
|
1963
1985
|
transitionDuration: "300ms",
|
|
1964
1986
|
".MuiButtonBase-root.MuiSwitch-switchBase.Mui-disabled + &": {
|
|
1965
1987
|
opacity: 1,
|
|
1966
|
-
borderColor:
|
|
1988
|
+
borderColor: theme2.palette.text.disabled
|
|
1967
1989
|
},
|
|
1968
1990
|
".MuiButtonBase-root.Mui-checked.Mui-disabled + &": {
|
|
1969
|
-
backgroundColor:
|
|
1991
|
+
backgroundColor: theme2.palette.text.disabled
|
|
1970
1992
|
},
|
|
1971
1993
|
".MuiButtonBase-root.MuiSwitch-switchBase[readOnly] + &": {
|
|
1972
|
-
borderColor:
|
|
1994
|
+
borderColor: theme2.palette.text.disabled
|
|
1973
1995
|
},
|
|
1974
1996
|
"[readOnly] .MuiButtonBase-root.Mui-checked + &": {
|
|
1975
|
-
backgroundColor:
|
|
1997
|
+
backgroundColor: theme2.palette.text.disabled
|
|
1976
1998
|
},
|
|
1977
|
-
...
|
|
1978
|
-
borderColor:
|
|
1999
|
+
...ownerState.readOnly === true && {
|
|
2000
|
+
borderColor: theme2.palette.text.disabled
|
|
1979
2001
|
}
|
|
1980
2002
|
}),
|
|
1981
|
-
colorPrimary: ({ theme:
|
|
2003
|
+
colorPrimary: ({ theme: theme2 }) => ({
|
|
1982
2004
|
"&.Mui-checked:hover": {
|
|
1983
|
-
backgroundColor:
|
|
2005
|
+
backgroundColor: theme2.palette.primary.background
|
|
1984
2006
|
}
|
|
1985
2007
|
}),
|
|
1986
|
-
colorSecondary: ({ theme:
|
|
2008
|
+
colorSecondary: ({ theme: theme2 }) => ({
|
|
1987
2009
|
"&.Mui-checked:hover": {
|
|
1988
|
-
backgroundColor:
|
|
2010
|
+
backgroundColor: theme2.palette.secondary.background
|
|
1989
2011
|
}
|
|
1990
2012
|
})
|
|
1991
2013
|
}
|
|
@@ -2001,26 +2023,27 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2001
2023
|
MuiSlider: {
|
|
2002
2024
|
defaultProps: {
|
|
2003
2025
|
color: "primary",
|
|
2004
|
-
marks:
|
|
2026
|
+
marks: false,
|
|
2005
2027
|
size: "small"
|
|
2006
2028
|
},
|
|
2007
2029
|
styleOverrides: {
|
|
2008
|
-
thumb: ({ theme:
|
|
2030
|
+
thumb: ({ theme: theme2 }) => ({
|
|
2009
2031
|
"&:hover, &.Mui-focusVisible": {
|
|
2010
|
-
boxShadow: `0 0 0 ${
|
|
2032
|
+
boxShadow: `0 0 0 ${theme2.spacing(1)} ${theme2.palette.primary.background}`
|
|
2011
2033
|
}
|
|
2012
2034
|
})
|
|
2013
2035
|
}
|
|
2014
2036
|
}
|
|
2015
|
-
}
|
|
2037
|
+
};
|
|
2038
|
+
const navigationOverrides = {
|
|
2016
2039
|
// Menu
|
|
2017
2040
|
MuiMenu: {
|
|
2018
2041
|
styleOverrides: {
|
|
2019
|
-
paper: ({ theme:
|
|
2042
|
+
paper: ({ theme: theme2 }) => ({
|
|
2020
2043
|
"&.MuiMenu-paper": {
|
|
2021
|
-
minWidth:
|
|
2044
|
+
minWidth: theme2.spacing(8),
|
|
2022
2045
|
// 64px, defined by design
|
|
2023
|
-
maxHeight:
|
|
2046
|
+
maxHeight: theme2.spacing(39),
|
|
2024
2047
|
// 312px, defined by design
|
|
2025
2048
|
"&:focus-visible": {
|
|
2026
2049
|
outline: "none !important",
|
|
@@ -2033,17 +2056,17 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2033
2056
|
// Menu Item
|
|
2034
2057
|
MuiMenuItem: {
|
|
2035
2058
|
styleOverrides: {
|
|
2036
|
-
root: ({ theme:
|
|
2037
|
-
...
|
|
2038
|
-
columnGap:
|
|
2039
|
-
minHeight:
|
|
2040
|
-
padding:
|
|
2059
|
+
root: ({ theme: theme2 }) => ({
|
|
2060
|
+
...theme2.typography.body2,
|
|
2061
|
+
columnGap: theme2.spacing(1),
|
|
2062
|
+
minHeight: theme2.spacing(4),
|
|
2063
|
+
padding: theme2.spacing(0.75, 1, 0.75, 1.5),
|
|
2041
2064
|
whiteSpace: "normal",
|
|
2042
2065
|
transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
2043
|
-
[
|
|
2066
|
+
[theme2.breakpoints.up("sm")]: {
|
|
2044
2067
|
// Overrides an unwanted Mui default style
|
|
2045
2068
|
"&.MuiButtonBase-root": {
|
|
2046
|
-
minHeight:
|
|
2069
|
+
minHeight: theme2.spacing(4)
|
|
2047
2070
|
}
|
|
2048
2071
|
},
|
|
2049
2072
|
"&:hover": {
|
|
@@ -2054,73 +2077,73 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2054
2077
|
"&:focus-visible": {
|
|
2055
2078
|
// Solves a known Mui issue: https://github.com/mui/material-ui/issues/23747
|
|
2056
2079
|
backgroundColor: "transparent",
|
|
2057
|
-
outline:
|
|
2058
|
-
boxShadow: `inset 0 0 0 2px ${
|
|
2059
|
-
borderRadius:
|
|
2080
|
+
outline: `none !important`,
|
|
2081
|
+
boxShadow: `inset 0 0 0 2px ${theme2.palette.primary.main} !important`,
|
|
2082
|
+
borderRadius: theme2.shape.borderRadius,
|
|
2060
2083
|
"&:hover": {
|
|
2061
|
-
backgroundColor:
|
|
2084
|
+
backgroundColor: theme2.palette.action.hover
|
|
2062
2085
|
}
|
|
2063
2086
|
},
|
|
2064
2087
|
"&.Mui-selected": {
|
|
2065
|
-
color:
|
|
2088
|
+
color: theme2.palette.primary.main,
|
|
2066
2089
|
"&:focus-visible": {
|
|
2067
2090
|
// Solves a known Mui issue: https://github.com/mui/material-ui/issues/23747
|
|
2068
|
-
backgroundColor:
|
|
2091
|
+
backgroundColor: theme2.palette.primary.background
|
|
2069
2092
|
},
|
|
2070
2093
|
"&:hover": {
|
|
2071
|
-
backgroundColor:
|
|
2094
|
+
backgroundColor: theme2.palette.action.hover
|
|
2072
2095
|
},
|
|
2073
2096
|
"& .MuiTypography-root, & .MuiSvgIcon-root": {
|
|
2074
|
-
color:
|
|
2097
|
+
color: theme2.palette.primary.main
|
|
2075
2098
|
},
|
|
2076
2099
|
".MuiTypography-caption": {
|
|
2077
2100
|
// secondary text
|
|
2078
|
-
color:
|
|
2101
|
+
color: theme2.palette.text.secondary
|
|
2079
2102
|
}
|
|
2080
2103
|
},
|
|
2081
2104
|
"&.Mui-disabled": {
|
|
2082
2105
|
opacity: 1,
|
|
2083
|
-
color:
|
|
2084
|
-
backgroundColor:
|
|
2106
|
+
color: theme2.palette.text.disabled,
|
|
2107
|
+
backgroundColor: theme2.palette.background.paper,
|
|
2085
2108
|
"&:empty": {
|
|
2086
2109
|
height: 0,
|
|
2087
2110
|
minHeight: 0,
|
|
2088
2111
|
padding: 0
|
|
2089
2112
|
},
|
|
2090
2113
|
".MuiTypography-root": {
|
|
2091
|
-
color:
|
|
2114
|
+
color: theme2.palette.text.disabled
|
|
2092
2115
|
},
|
|
2093
2116
|
svg: {
|
|
2094
|
-
color:
|
|
2117
|
+
color: theme2.palette.text.disabled
|
|
2095
2118
|
},
|
|
2096
2119
|
".MuiListItemIcon-root svg path": {
|
|
2097
|
-
fill:
|
|
2120
|
+
fill: theme2.palette.text.disabled
|
|
2098
2121
|
},
|
|
2099
2122
|
".MuiAvatar-root": {
|
|
2100
|
-
color:
|
|
2101
|
-
backgroundColor:
|
|
2123
|
+
color: theme2.palette.text.disabled,
|
|
2124
|
+
backgroundColor: theme2.palette.action.disabledBackground
|
|
2102
2125
|
}
|
|
2103
2126
|
},
|
|
2104
2127
|
"& > .MuiSvgIcon-root": {
|
|
2105
|
-
marginRight:
|
|
2128
|
+
marginRight: theme2.spacing(1)
|
|
2106
2129
|
},
|
|
2107
2130
|
".MuiMenu-paper-sizeSmall &": {
|
|
2108
|
-
paddingLeft:
|
|
2109
|
-
paddingRight:
|
|
2131
|
+
paddingLeft: theme2.spacing(1.5),
|
|
2132
|
+
paddingRight: theme2.spacing(1.5)
|
|
2110
2133
|
}
|
|
2111
2134
|
}),
|
|
2112
|
-
dense: ({ theme:
|
|
2113
|
-
minHeight:
|
|
2135
|
+
dense: ({ theme: theme2 }) => ({
|
|
2136
|
+
minHeight: theme2.spacing(3),
|
|
2114
2137
|
paddingTop: 0,
|
|
2115
2138
|
paddingBottom: 0,
|
|
2116
2139
|
".MuiTypography-root": {
|
|
2117
|
-
...
|
|
2140
|
+
...theme2.typography.caption,
|
|
2118
2141
|
fontWeight: 500
|
|
2119
2142
|
},
|
|
2120
|
-
[
|
|
2143
|
+
[theme2.breakpoints.up("sm")]: {
|
|
2121
2144
|
// Overrides an unwanted Mui default style
|
|
2122
2145
|
"&.MuiButtonBase-root": {
|
|
2123
|
-
minHeight:
|
|
2146
|
+
minHeight: theme2.spacing(3)
|
|
2124
2147
|
}
|
|
2125
2148
|
}
|
|
2126
2149
|
})
|
|
@@ -2129,12 +2152,12 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2129
2152
|
// List
|
|
2130
2153
|
MuiList: {
|
|
2131
2154
|
styleOverrides: {
|
|
2132
|
-
root: ({ theme:
|
|
2155
|
+
root: ({ theme: theme2 }) => ({
|
|
2133
2156
|
paddingTop: 0,
|
|
2134
2157
|
".MuiPopover-root &, .MuiPopper-root &, .base-Popper-root &": {
|
|
2135
|
-
minWidth:
|
|
2158
|
+
minWidth: theme2.spacing(8),
|
|
2136
2159
|
// 64px, defined by design
|
|
2137
|
-
maxHeight:
|
|
2160
|
+
maxHeight: theme2.spacing(39),
|
|
2138
2161
|
// 312px, defined by design
|
|
2139
2162
|
overflowY: "auto",
|
|
2140
2163
|
"&:focus-visible": {
|
|
@@ -2143,26 +2166,26 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2143
2166
|
}
|
|
2144
2167
|
},
|
|
2145
2168
|
".MuiDivider-root": {
|
|
2146
|
-
margin:
|
|
2169
|
+
margin: theme2.spacing(1, 0)
|
|
2147
2170
|
},
|
|
2148
2171
|
// Indent sublevels, ugly but needed to avoid issues with hover
|
|
2149
2172
|
"& .MuiList-root": {
|
|
2150
2173
|
paddingTop: 0,
|
|
2151
2174
|
paddingBottom: 0,
|
|
2152
2175
|
"& .MuiListItem-root": {
|
|
2153
|
-
paddingLeft:
|
|
2176
|
+
paddingLeft: theme2.spacing(4)
|
|
2154
2177
|
},
|
|
2155
2178
|
"& .MuiList-root": {
|
|
2156
2179
|
"& .MuiListItem-root": {
|
|
2157
|
-
paddingLeft:
|
|
2180
|
+
paddingLeft: theme2.spacing(6)
|
|
2158
2181
|
},
|
|
2159
2182
|
"& .MuiList-root": {
|
|
2160
2183
|
"& .MuiListItem-root": {
|
|
2161
|
-
paddingLeft:
|
|
2184
|
+
paddingLeft: theme2.spacing(8)
|
|
2162
2185
|
},
|
|
2163
2186
|
"& .MuiList-root": {
|
|
2164
2187
|
"& .MuiListItem-root": {
|
|
2165
|
-
paddingLeft:
|
|
2188
|
+
paddingLeft: theme2.spacing(10)
|
|
2166
2189
|
}
|
|
2167
2190
|
}
|
|
2168
2191
|
}
|
|
@@ -2181,44 +2204,44 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2181
2204
|
defaultProps: {
|
|
2182
2205
|
primaryTypographyProps: {
|
|
2183
2206
|
variant: "body2",
|
|
2184
|
-
noWrap:
|
|
2207
|
+
noWrap: true,
|
|
2185
2208
|
component: "span"
|
|
2186
2209
|
},
|
|
2187
2210
|
secondaryTypographyProps: { variant: "caption" }
|
|
2188
2211
|
},
|
|
2189
2212
|
styleOverrides: {
|
|
2190
|
-
root: ({ theme:
|
|
2191
|
-
paddingRight:
|
|
2213
|
+
root: ({ theme: theme2 }) => ({
|
|
2214
|
+
paddingRight: theme2.spacing(2),
|
|
2192
2215
|
"& + .MuiBox-root": {
|
|
2193
|
-
marginRight:
|
|
2216
|
+
marginRight: theme2.spacing(1)
|
|
2194
2217
|
}
|
|
2195
2218
|
})
|
|
2196
2219
|
}
|
|
2197
2220
|
},
|
|
2198
2221
|
MuiListItemIcon: {
|
|
2199
2222
|
styleOverrides: {
|
|
2200
|
-
root: ({ theme:
|
|
2223
|
+
root: ({ theme: theme2 }) => ({
|
|
2201
2224
|
display: "flex",
|
|
2202
2225
|
alignItems: "center",
|
|
2203
|
-
gap:
|
|
2226
|
+
gap: theme2.spacing(2),
|
|
2204
2227
|
"& .MuiSvgIcon-root": {
|
|
2205
|
-
fontSize:
|
|
2228
|
+
fontSize: ICON_SIZE_LARGE
|
|
2206
2229
|
},
|
|
2207
2230
|
".MuiMenuItem-root.MuiButtonBase-root &": {
|
|
2208
|
-
minWidth:
|
|
2231
|
+
minWidth: ICON_SIZE_MEDIUM
|
|
2209
2232
|
}
|
|
2210
2233
|
})
|
|
2211
2234
|
}
|
|
2212
2235
|
},
|
|
2213
2236
|
MuiListItemAvatar: {
|
|
2214
2237
|
styleOverrides: {
|
|
2215
|
-
root: ({ theme:
|
|
2238
|
+
root: ({ theme: theme2 }) => ({
|
|
2216
2239
|
"& .MuiAvatar-root": {
|
|
2217
|
-
height:
|
|
2218
|
-
width:
|
|
2240
|
+
height: theme2.spacing(4),
|
|
2241
|
+
width: theme2.spacing(4)
|
|
2219
2242
|
},
|
|
2220
2243
|
"& .MuiSvgIcon-root": {
|
|
2221
|
-
fontSize:
|
|
2244
|
+
fontSize: ICON_SIZE_MEDIUM
|
|
2222
2245
|
}
|
|
2223
2246
|
})
|
|
2224
2247
|
}
|
|
@@ -2226,9 +2249,9 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2226
2249
|
// Tabs
|
|
2227
2250
|
MuiTabs: {
|
|
2228
2251
|
styleOverrides: {
|
|
2229
|
-
root: ({ theme:
|
|
2252
|
+
root: ({ theme: theme2 }) => ({
|
|
2230
2253
|
boxSizing: "content-box",
|
|
2231
|
-
boxShadow: `0 1px 0 0 ${
|
|
2254
|
+
boxShadow: `0 1px 0 0 ${theme2.palette.black[12]}`
|
|
2232
2255
|
}),
|
|
2233
2256
|
vertical: () => ({
|
|
2234
2257
|
borderBottom: 0
|
|
@@ -2241,27 +2264,27 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2241
2264
|
iconPosition: "start"
|
|
2242
2265
|
},
|
|
2243
2266
|
styleOverrides: {
|
|
2244
|
-
root: ({ theme:
|
|
2245
|
-
minHeight:
|
|
2246
|
-
minWidth:
|
|
2247
|
-
padding:
|
|
2267
|
+
root: ({ theme: theme2 }) => ({
|
|
2268
|
+
minHeight: theme2.spacing(6),
|
|
2269
|
+
minWidth: theme2.spacing(6),
|
|
2270
|
+
padding: theme2.spacing(0, 2),
|
|
2248
2271
|
paddingTop: "2px",
|
|
2249
2272
|
borderBottom: "2px solid transparent",
|
|
2250
|
-
...
|
|
2251
|
-
color:
|
|
2273
|
+
...theme2.typography.subtitle2,
|
|
2274
|
+
color: theme2.palette.text.primary,
|
|
2252
2275
|
transition: "border 300ms cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2253
2276
|
"&:hover": {
|
|
2254
|
-
borderBottomColor:
|
|
2277
|
+
borderBottomColor: theme2.palette.text.primary
|
|
2255
2278
|
},
|
|
2256
2279
|
"&:focus-visible": {
|
|
2257
|
-
outline:
|
|
2258
|
-
boxShadow: `inset 0 0 0 2px ${
|
|
2259
|
-
borderRadius: `${
|
|
2280
|
+
outline: `none !important`,
|
|
2281
|
+
boxShadow: `inset 0 0 0 2px ${theme2.palette.primary.main} !important`,
|
|
2282
|
+
borderRadius: `${theme2.shape.borderRadius}px ${theme2.shape.borderRadius}px 0 0`
|
|
2260
2283
|
},
|
|
2261
2284
|
"&.Mui-selected": {
|
|
2262
2285
|
pointerEvents: "none",
|
|
2263
2286
|
"& svg:not(.doNotFillIcon) path": {
|
|
2264
|
-
fill:
|
|
2287
|
+
fill: theme2.palette.primary.main
|
|
2265
2288
|
}
|
|
2266
2289
|
},
|
|
2267
2290
|
".MuiTabs-vertical &": {
|
|
@@ -2270,7 +2293,7 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2270
2293
|
paddingLeft: "2px",
|
|
2271
2294
|
borderRight: "2px solid transparent",
|
|
2272
2295
|
"&:hover": {
|
|
2273
|
-
borderRightColor:
|
|
2296
|
+
borderRightColor: theme2.palette.text.primary
|
|
2274
2297
|
}
|
|
2275
2298
|
}
|
|
2276
2299
|
}),
|
|
@@ -2282,21 +2305,21 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2282
2305
|
// Breadcrumbs
|
|
2283
2306
|
MuiBreadcrumbs: {
|
|
2284
2307
|
styleOverrides: {
|
|
2285
|
-
li: ({ theme:
|
|
2308
|
+
li: ({ theme: theme2 }) => ({
|
|
2286
2309
|
"& .MuiTypography-root": {
|
|
2287
|
-
...
|
|
2310
|
+
...theme2.typography.body2,
|
|
2288
2311
|
display: "flex",
|
|
2289
2312
|
flexDirection: "row",
|
|
2290
2313
|
alignItems: "center"
|
|
2291
2314
|
},
|
|
2292
2315
|
"& .MuiSvgIcon-root": {
|
|
2293
|
-
fontSize:
|
|
2294
|
-
marginRight:
|
|
2316
|
+
fontSize: ICON_SIZE_MEDIUM,
|
|
2317
|
+
marginRight: theme2.spacing(1)
|
|
2295
2318
|
}
|
|
2296
2319
|
}),
|
|
2297
|
-
separator: ({ theme:
|
|
2298
|
-
marginLeft:
|
|
2299
|
-
marginRight:
|
|
2320
|
+
separator: ({ theme: theme2 }) => ({
|
|
2321
|
+
marginLeft: theme2.spacing(0.5),
|
|
2322
|
+
marginRight: theme2.spacing(0.5)
|
|
2300
2323
|
})
|
|
2301
2324
|
}
|
|
2302
2325
|
},
|
|
@@ -2311,7 +2334,10 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2311
2334
|
})
|
|
2312
2335
|
}
|
|
2313
2336
|
}
|
|
2314
|
-
}
|
|
2337
|
+
};
|
|
2338
|
+
const calendarSize = 35;
|
|
2339
|
+
const dropdownHeight = 39.5;
|
|
2340
|
+
const datePickersOverrides = {
|
|
2315
2341
|
// https://mui.com/x/react-date-pickers/date-picker/#customization
|
|
2316
2342
|
MuiDatePicker: {
|
|
2317
2343
|
defaultProps: {
|
|
@@ -2319,57 +2345,57 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2319
2345
|
popper: { placement: "bottom-end" },
|
|
2320
2346
|
textField: {
|
|
2321
2347
|
InputLabelProps: {
|
|
2322
|
-
shrink:
|
|
2348
|
+
shrink: true
|
|
2323
2349
|
}
|
|
2324
2350
|
}
|
|
2325
2351
|
},
|
|
2326
2352
|
slots: {
|
|
2327
|
-
openPickerIcon:
|
|
2328
|
-
clearIcon:
|
|
2353
|
+
openPickerIcon: EventOutlined,
|
|
2354
|
+
clearIcon: Cancel
|
|
2329
2355
|
}
|
|
2330
2356
|
}
|
|
2331
2357
|
},
|
|
2332
2358
|
MuiDateCalendar: {
|
|
2333
2359
|
defaultProps: {
|
|
2334
|
-
dayOfWeekFormatter: (
|
|
2360
|
+
dayOfWeekFormatter: (weekday) => `${weekday.toLocaleDateString("en-US", { weekday: "short" })}`,
|
|
2335
2361
|
slots: {
|
|
2336
|
-
rightArrowIcon:
|
|
2337
|
-
leftArrowIcon:
|
|
2338
|
-
switchViewIcon:
|
|
2362
|
+
rightArrowIcon: ChevronRightOutlined,
|
|
2363
|
+
leftArrowIcon: ChevronLeftOutlined,
|
|
2364
|
+
switchViewIcon: ExpandMoreOutlined
|
|
2339
2365
|
}
|
|
2340
2366
|
},
|
|
2341
2367
|
styleOverrides: {
|
|
2342
|
-
root: ({ ownerState
|
|
2343
|
-
var
|
|
2368
|
+
root: ({ ownerState, theme: theme2 }) => {
|
|
2369
|
+
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i;
|
|
2344
2370
|
return {
|
|
2345
|
-
width:
|
|
2346
|
-
height:
|
|
2347
|
-
maxHeight:
|
|
2371
|
+
width: theme2.spacing(calendarSize),
|
|
2372
|
+
height: theme2.spacing(dropdownHeight),
|
|
2373
|
+
maxHeight: theme2.spacing(dropdownHeight),
|
|
2348
2374
|
// Year only view
|
|
2349
|
-
...((
|
|
2350
|
-
height:
|
|
2375
|
+
...((_a2 = ownerState.views) == null ? void 0 : _a2.includes("year")) && !((_b2 = ownerState.views) == null ? void 0 : _b2.includes("month")) && !((_c2 = ownerState.views) == null ? void 0 : _c2.includes("day")) && {
|
|
2376
|
+
height: theme2.spacing(33.5),
|
|
2351
2377
|
// 268px
|
|
2352
|
-
maxHeight:
|
|
2378
|
+
maxHeight: theme2.spacing(33.5)
|
|
2353
2379
|
},
|
|
2354
2380
|
// Month only view
|
|
2355
|
-
...((
|
|
2356
|
-
height:
|
|
2381
|
+
...((_d2 = ownerState.views) == null ? void 0 : _d2.includes("month")) && !((_e2 = ownerState.views) == null ? void 0 : _e2.includes("year")) && !((_f2 = ownerState.views) == null ? void 0 : _f2.includes("day")) && {
|
|
2382
|
+
height: theme2.spacing(29),
|
|
2357
2383
|
// 232px
|
|
2358
|
-
maxHeight:
|
|
2384
|
+
maxHeight: theme2.spacing(29),
|
|
2359
2385
|
"& .MuiPickersCalendarHeader-labelContainer": {
|
|
2360
2386
|
cursor: "default"
|
|
2361
2387
|
}
|
|
2362
2388
|
},
|
|
2363
2389
|
// Day only view
|
|
2364
|
-
...((
|
|
2390
|
+
...((_g2 = ownerState.views) == null ? void 0 : _g2.includes("day")) && !((_h2 = ownerState.views) == null ? void 0 : _h2.includes("year")) && !((_i = ownerState.views) == null ? void 0 : _i.includes("month")) && {
|
|
2365
2391
|
"& .MuiPickersCalendarHeader-labelContainer": {
|
|
2366
2392
|
cursor: "default"
|
|
2367
2393
|
}
|
|
2368
2394
|
},
|
|
2369
2395
|
"& .MuiYearCalendar-root, & .MuiMonthCalendar-root": {
|
|
2370
|
-
gap:
|
|
2371
|
-
width:
|
|
2372
|
-
padding:
|
|
2396
|
+
gap: theme2.spacing(0.5),
|
|
2397
|
+
width: theme2.spacing(calendarSize),
|
|
2398
|
+
padding: theme2.spacing(1, 2)
|
|
2373
2399
|
},
|
|
2374
2400
|
"& .MuiPickersYear-root": {
|
|
2375
2401
|
flexBasis: "22.5%"
|
|
@@ -2379,30 +2405,30 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2379
2405
|
},
|
|
2380
2406
|
"& .MuiPickersYear-yearButton, & .MuiPickersMonth-monthButton, & .MuiPickersDay-root": {
|
|
2381
2407
|
width: "100%",
|
|
2382
|
-
height:
|
|
2408
|
+
height: theme2.spacing(4),
|
|
2383
2409
|
margin: 0,
|
|
2384
2410
|
padding: 0,
|
|
2385
|
-
...
|
|
2386
|
-
borderRadius:
|
|
2411
|
+
...theme2.typography.button,
|
|
2412
|
+
borderRadius: theme2.shape.borderRadius,
|
|
2387
2413
|
"&:hover": {
|
|
2388
|
-
backgroundColor:
|
|
2414
|
+
backgroundColor: theme2.palette.action.hover
|
|
2389
2415
|
},
|
|
2390
2416
|
"&.Mui-selected": {
|
|
2391
|
-
backgroundColor:
|
|
2392
|
-
color:
|
|
2417
|
+
backgroundColor: theme2.palette.primary.background,
|
|
2418
|
+
color: theme2.palette.primary.main,
|
|
2393
2419
|
"&:focus": {
|
|
2394
|
-
backgroundColor:
|
|
2420
|
+
backgroundColor: theme2.palette.primary.background
|
|
2395
2421
|
},
|
|
2396
2422
|
"&:hover": {
|
|
2397
|
-
backgroundColor:
|
|
2423
|
+
backgroundColor: theme2.palette.action.hover
|
|
2398
2424
|
}
|
|
2399
2425
|
},
|
|
2400
2426
|
"&.Mui-disabled": {
|
|
2401
|
-
color:
|
|
2427
|
+
color: theme2.palette.text.disabled
|
|
2402
2428
|
}
|
|
2403
2429
|
},
|
|
2404
2430
|
"& .MuiPickersDay-root": {
|
|
2405
|
-
margin:
|
|
2431
|
+
margin: theme2.spacing(0.25)
|
|
2406
2432
|
}
|
|
2407
2433
|
};
|
|
2408
2434
|
}
|
|
@@ -2410,91 +2436,91 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2410
2436
|
},
|
|
2411
2437
|
MuiPickersPopper: {
|
|
2412
2438
|
styleOverrides: {
|
|
2413
|
-
paper: ({ theme:
|
|
2414
|
-
marginBottom:
|
|
2439
|
+
paper: ({ theme: theme2 }) => ({
|
|
2440
|
+
marginBottom: theme2.spacing(0.5)
|
|
2415
2441
|
})
|
|
2416
2442
|
}
|
|
2417
2443
|
},
|
|
2418
2444
|
MuiYearCalendar: {
|
|
2419
2445
|
styleOverrides: {
|
|
2420
|
-
root: ({ theme:
|
|
2421
|
-
maxHeight:
|
|
2446
|
+
root: ({ theme: theme2 }) => ({
|
|
2447
|
+
maxHeight: theme2.spacing(33.5)
|
|
2422
2448
|
// 268px
|
|
2423
2449
|
})
|
|
2424
2450
|
}
|
|
2425
2451
|
},
|
|
2426
2452
|
MuiPickersCalendarHeader: {
|
|
2427
2453
|
styleOverrides: {
|
|
2428
|
-
root: ({ theme:
|
|
2429
|
-
maxHeight:
|
|
2430
|
-
minHeight:
|
|
2454
|
+
root: ({ theme: theme2 }) => ({
|
|
2455
|
+
maxHeight: theme2.spacing(4),
|
|
2456
|
+
minHeight: theme2.spacing(4),
|
|
2431
2457
|
margin: 0,
|
|
2432
|
-
padding:
|
|
2458
|
+
padding: theme2.spacing(1, 1, 1, 2),
|
|
2433
2459
|
boxSizing: "content-box",
|
|
2434
2460
|
"& .MuiIconButton-root": {
|
|
2435
|
-
borderRadius:
|
|
2461
|
+
borderRadius: theme2.shape.borderRadius
|
|
2436
2462
|
},
|
|
2437
2463
|
"& .MuiPickersArrowSwitcher-spacer": {
|
|
2438
|
-
width:
|
|
2464
|
+
width: theme2.spacing(4)
|
|
2439
2465
|
}
|
|
2440
2466
|
}),
|
|
2441
|
-
label: ({ theme:
|
|
2442
|
-
...
|
|
2467
|
+
label: ({ theme: theme2 }) => ({
|
|
2468
|
+
...theme2.typography.subtitle2
|
|
2443
2469
|
}),
|
|
2444
|
-
switchViewButton: ({ theme:
|
|
2445
|
-
width:
|
|
2446
|
-
height:
|
|
2470
|
+
switchViewButton: ({ theme: theme2 }) => ({
|
|
2471
|
+
width: theme2.spacing(4),
|
|
2472
|
+
height: theme2.spacing(4)
|
|
2447
2473
|
})
|
|
2448
2474
|
}
|
|
2449
2475
|
},
|
|
2450
2476
|
MuiDayCalendar: {
|
|
2451
2477
|
styleOverrides: {
|
|
2452
|
-
header: ({ theme:
|
|
2453
|
-
margin:
|
|
2478
|
+
header: ({ theme: theme2 }) => ({
|
|
2479
|
+
margin: theme2.spacing(0, 2)
|
|
2454
2480
|
}),
|
|
2455
2481
|
weekContainer: () => ({
|
|
2456
2482
|
margin: 0
|
|
2457
2483
|
}),
|
|
2458
|
-
weekDayLabel: ({ theme:
|
|
2484
|
+
weekDayLabel: ({ theme: theme2 }) => ({
|
|
2459
2485
|
flex: 1,
|
|
2460
|
-
...
|
|
2461
|
-
fontWeight:
|
|
2462
|
-
color:
|
|
2486
|
+
...theme2.typography.caption,
|
|
2487
|
+
fontWeight: theme2.typography.fontWeightRegular,
|
|
2488
|
+
color: theme2.palette.text.secondary
|
|
2463
2489
|
})
|
|
2464
2490
|
}
|
|
2465
2491
|
},
|
|
2466
2492
|
MuiPickersDay: {
|
|
2467
2493
|
styleOverrides: {
|
|
2468
|
-
root: ({ theme:
|
|
2469
|
-
width: `${
|
|
2470
|
-
height:
|
|
2494
|
+
root: ({ theme: theme2 }) => ({
|
|
2495
|
+
width: `${theme2.spacing(4)} !important`,
|
|
2496
|
+
height: theme2.spacing(4),
|
|
2471
2497
|
"&:focus": {
|
|
2472
2498
|
backgroundColor: "transparent"
|
|
2473
2499
|
}
|
|
2474
2500
|
}),
|
|
2475
|
-
today: ({ theme:
|
|
2476
|
-
border: `1px solid ${
|
|
2501
|
+
today: ({ theme: theme2 }) => ({
|
|
2502
|
+
border: `1px solid ${theme2.palette.default.outlinedBorder}`,
|
|
2477
2503
|
"&:hover, &:selected": {
|
|
2478
|
-
borderColor:
|
|
2504
|
+
borderColor: theme2.palette.primary.light
|
|
2479
2505
|
},
|
|
2480
2506
|
"&:not(.Mui-selected)": {
|
|
2481
|
-
borderColor:
|
|
2507
|
+
borderColor: theme2.palette.default.outlinedBorder
|
|
2482
2508
|
},
|
|
2483
2509
|
"&.Mui-selected": {
|
|
2484
|
-
borderColor:
|
|
2510
|
+
borderColor: theme2.palette.primary.light,
|
|
2485
2511
|
"&:focus": {
|
|
2486
|
-
borderColor:
|
|
2512
|
+
borderColor: theme2.palette.primary.light
|
|
2487
2513
|
}
|
|
2488
2514
|
},
|
|
2489
2515
|
"&.Mui-disabled": {
|
|
2490
|
-
color:
|
|
2491
|
-
borderColor:
|
|
2516
|
+
color: theme2.palette.text.disabled,
|
|
2517
|
+
borderColor: theme2.palette.default.outlinedBorder,
|
|
2492
2518
|
backgroundColor: "transparent",
|
|
2493
2519
|
"&.Mui-selected": {
|
|
2494
2520
|
opacity: "1 !important",
|
|
2495
|
-
color:
|
|
2521
|
+
color: theme2.palette.text.disabled,
|
|
2496
2522
|
backgroundColor: "transparent",
|
|
2497
|
-
borderColor:
|
|
2523
|
+
borderColor: theme2.palette.default.outlinedBorder
|
|
2498
2524
|
}
|
|
2499
2525
|
}
|
|
2500
2526
|
})
|
|
@@ -2504,9 +2530,9 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2504
2530
|
defaultProps: {
|
|
2505
2531
|
views: ["hours"],
|
|
2506
2532
|
format: "hh:mm a",
|
|
2507
|
-
ampm:
|
|
2533
|
+
ampm: true,
|
|
2508
2534
|
viewRenderers: {
|
|
2509
|
-
hours:
|
|
2535
|
+
hours: renderDigitalClockTimeView
|
|
2510
2536
|
},
|
|
2511
2537
|
timeSteps: { minutes: 30 },
|
|
2512
2538
|
slotProps: {
|
|
@@ -2514,8 +2540,10 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2514
2540
|
// Remove ok button at bottom
|
|
2515
2541
|
},
|
|
2516
2542
|
slots: {
|
|
2517
|
-
clearIcon:
|
|
2518
|
-
digitalClockItem: (
|
|
2543
|
+
clearIcon: Cancel,
|
|
2544
|
+
digitalClockItem: (props) => {
|
|
2545
|
+
return /* @__PURE__ */ jsx(MenuItem, { ...props, disableRipple: true });
|
|
2546
|
+
}
|
|
2519
2547
|
}
|
|
2520
2548
|
}
|
|
2521
2549
|
},
|
|
@@ -2523,9 +2551,9 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2523
2551
|
defaultProps: {
|
|
2524
2552
|
views: ["year", "month", "day", "hours"],
|
|
2525
2553
|
format: "MM/dd/yyyy hh:mm a",
|
|
2526
|
-
ampm:
|
|
2554
|
+
ampm: true,
|
|
2527
2555
|
viewRenderers: {
|
|
2528
|
-
hours:
|
|
2556
|
+
hours: renderDigitalClockTimeView
|
|
2529
2557
|
},
|
|
2530
2558
|
timeSteps: { minutes: 30 },
|
|
2531
2559
|
slotProps: {
|
|
@@ -2536,35 +2564,39 @@ const io = 1, b = 0.5, y = io + b, bo = "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-
|
|
|
2536
2564
|
// Remove ok button at bottom
|
|
2537
2565
|
},
|
|
2538
2566
|
slots: {
|
|
2539
|
-
openPickerIcon:
|
|
2540
|
-
clearIcon:
|
|
2541
|
-
digitalClockItem: (
|
|
2567
|
+
openPickerIcon: EventOutlined,
|
|
2568
|
+
clearIcon: Cancel,
|
|
2569
|
+
digitalClockItem: (props) => {
|
|
2570
|
+
return /* @__PURE__ */ jsx(MenuItem, { ...props, disableRipple: true });
|
|
2571
|
+
}
|
|
2542
2572
|
}
|
|
2543
2573
|
}
|
|
2544
2574
|
},
|
|
2545
2575
|
MuiDigitalClock: {
|
|
2546
2576
|
defaultProps: {
|
|
2547
2577
|
timeStep: 30,
|
|
2548
|
-
ampm:
|
|
2578
|
+
ampm: true
|
|
2549
2579
|
},
|
|
2550
2580
|
styleOverrides: {
|
|
2551
|
-
root: ({ theme:
|
|
2552
|
-
minWidth:
|
|
2581
|
+
root: ({ theme: theme2 }) => ({
|
|
2582
|
+
minWidth: theme2.spacing(15)
|
|
2553
2583
|
// 120px defined in design specs
|
|
2554
2584
|
}),
|
|
2555
|
-
list: ({ theme:
|
|
2585
|
+
list: ({ theme: theme2 }) => ({
|
|
2556
2586
|
".MuiPopper-root &": {
|
|
2557
|
-
maxHeight:
|
|
2558
|
-
paddingBottom:
|
|
2587
|
+
maxHeight: theme2.spacing(dropdownHeight),
|
|
2588
|
+
paddingBottom: theme2.spacing(1)
|
|
2559
2589
|
}
|
|
2560
2590
|
})
|
|
2561
2591
|
}
|
|
2562
2592
|
}
|
|
2563
2593
|
};
|
|
2564
|
-
function
|
|
2565
|
-
|
|
2594
|
+
function getPixelToRem(px) {
|
|
2595
|
+
const fontBase = 16;
|
|
2596
|
+
const rem = 1 / fontBase * px + "rem";
|
|
2597
|
+
return rem;
|
|
2566
2598
|
}
|
|
2567
|
-
const
|
|
2599
|
+
const baseTypography = {
|
|
2568
2600
|
htmlFontSize: 16,
|
|
2569
2601
|
fontFamily: "Inter, sans-serif",
|
|
2570
2602
|
fontSize: 16,
|
|
@@ -2577,77 +2609,77 @@ const k = {
|
|
|
2577
2609
|
h1: {
|
|
2578
2610
|
fontFamily: "Inter, sans-serif",
|
|
2579
2611
|
fontWeight: 600,
|
|
2580
|
-
fontSize:
|
|
2612
|
+
fontSize: getPixelToRem(96),
|
|
2581
2613
|
lineHeight: 1.167,
|
|
2582
2614
|
letterSpacing: "-1.5px"
|
|
2583
2615
|
},
|
|
2584
2616
|
h2: {
|
|
2585
2617
|
fontFamily: "Inter, sans-serif",
|
|
2586
2618
|
fontWeight: 600,
|
|
2587
|
-
fontSize:
|
|
2619
|
+
fontSize: getPixelToRem(60),
|
|
2588
2620
|
lineHeight: 1.2,
|
|
2589
2621
|
letterSpacing: "-0.5px"
|
|
2590
2622
|
},
|
|
2591
2623
|
h3: {
|
|
2592
2624
|
fontFamily: "Inter, sans-serif",
|
|
2593
2625
|
fontWeight: 600,
|
|
2594
|
-
fontSize:
|
|
2626
|
+
fontSize: getPixelToRem(48),
|
|
2595
2627
|
lineHeight: 1.167,
|
|
2596
2628
|
letterSpacing: 0
|
|
2597
2629
|
},
|
|
2598
2630
|
h4: {
|
|
2599
2631
|
fontFamily: "Inter, sans-serif",
|
|
2600
2632
|
fontWeight: 600,
|
|
2601
|
-
fontSize:
|
|
2633
|
+
fontSize: getPixelToRem(32),
|
|
2602
2634
|
lineHeight: 1.25,
|
|
2603
2635
|
letterSpacing: 0
|
|
2604
2636
|
},
|
|
2605
2637
|
h5: {
|
|
2606
2638
|
fontFamily: "Inter, sans-serif",
|
|
2607
2639
|
fontWeight: 600,
|
|
2608
|
-
fontSize:
|
|
2640
|
+
fontSize: getPixelToRem(24),
|
|
2609
2641
|
lineHeight: 1.167,
|
|
2610
2642
|
letterSpacing: 0
|
|
2611
2643
|
},
|
|
2612
2644
|
h6: {
|
|
2613
2645
|
fontFamily: "Inter, sans-serif",
|
|
2614
2646
|
fontWeight: 500,
|
|
2615
|
-
fontSize:
|
|
2647
|
+
fontSize: getPixelToRem(18),
|
|
2616
2648
|
lineHeight: 1.333,
|
|
2617
2649
|
letterSpacing: 0
|
|
2618
2650
|
},
|
|
2619
2651
|
subtitle1: {
|
|
2620
2652
|
fontFamily: "Inter, sans-serif",
|
|
2621
2653
|
fontWeight: 500,
|
|
2622
|
-
fontSize:
|
|
2654
|
+
fontSize: getPixelToRem(16),
|
|
2623
2655
|
lineHeight: 1.5,
|
|
2624
2656
|
letterSpacing: 0
|
|
2625
2657
|
},
|
|
2626
2658
|
subtitle2: {
|
|
2627
2659
|
fontFamily: "Inter, sans-serif",
|
|
2628
2660
|
fontWeight: 600,
|
|
2629
|
-
fontSize:
|
|
2661
|
+
fontSize: getPixelToRem(13),
|
|
2630
2662
|
lineHeight: 1.538,
|
|
2631
2663
|
letterSpacing: 0
|
|
2632
2664
|
},
|
|
2633
2665
|
body1: {
|
|
2634
2666
|
fontFamily: "Inter, sans-serif",
|
|
2635
2667
|
fontWeight: 400,
|
|
2636
|
-
fontSize:
|
|
2668
|
+
fontSize: getPixelToRem(16),
|
|
2637
2669
|
lineHeight: 1.5,
|
|
2638
2670
|
letterSpacing: 0
|
|
2639
2671
|
},
|
|
2640
2672
|
body2: {
|
|
2641
2673
|
fontFamily: "Inter, sans-serif",
|
|
2642
2674
|
fontWeight: 400,
|
|
2643
|
-
fontSize:
|
|
2675
|
+
fontSize: getPixelToRem(13),
|
|
2644
2676
|
lineHeight: 1.538,
|
|
2645
2677
|
letterSpacing: 0
|
|
2646
2678
|
},
|
|
2647
2679
|
button: {
|
|
2648
2680
|
fontFamily: "Inter, sans-serif",
|
|
2649
2681
|
fontWeight: 500,
|
|
2650
|
-
fontSize:
|
|
2682
|
+
fontSize: getPixelToRem(13),
|
|
2651
2683
|
lineHeight: 1.538,
|
|
2652
2684
|
letterSpacing: 0,
|
|
2653
2685
|
textTransform: "inherit"
|
|
@@ -2655,33 +2687,34 @@ const k = {
|
|
|
2655
2687
|
caption: {
|
|
2656
2688
|
fontFamily: "Inter, sans-serif",
|
|
2657
2689
|
fontWeight: 400,
|
|
2658
|
-
fontSize:
|
|
2690
|
+
fontSize: getPixelToRem(11),
|
|
2659
2691
|
lineHeight: 1.454,
|
|
2660
2692
|
letterSpacing: 0
|
|
2661
2693
|
},
|
|
2662
2694
|
overline: {
|
|
2663
2695
|
fontFamily: "Inter, sans-serif",
|
|
2664
2696
|
fontWeight: 500,
|
|
2665
|
-
fontSize:
|
|
2697
|
+
fontSize: getPixelToRem(10),
|
|
2666
2698
|
lineHeight: 1.2,
|
|
2667
2699
|
letterSpacing: "1.2px",
|
|
2668
2700
|
textTransform: "uppercase"
|
|
2669
2701
|
}
|
|
2670
|
-
}
|
|
2702
|
+
};
|
|
2703
|
+
const customTypography = {
|
|
2671
2704
|
captionMedium: {
|
|
2672
|
-
...
|
|
2705
|
+
...baseTypography.caption,
|
|
2673
2706
|
fontWeight: 500,
|
|
2674
2707
|
letterSpacing: 0
|
|
2675
2708
|
},
|
|
2676
2709
|
overlineDelicate: {
|
|
2677
|
-
...
|
|
2710
|
+
...baseTypography.overline,
|
|
2678
2711
|
fontWeight: 400,
|
|
2679
2712
|
letterSpacing: "1.2px"
|
|
2680
2713
|
},
|
|
2681
2714
|
code1: {
|
|
2682
2715
|
fontFamily: '"Overpass Mono", monospace',
|
|
2683
2716
|
fontWeight: 400,
|
|
2684
|
-
fontSize:
|
|
2717
|
+
fontSize: getPixelToRem(16),
|
|
2685
2718
|
lineHeight: 1.5,
|
|
2686
2719
|
letterSpacing: 0,
|
|
2687
2720
|
fontVariantLigatures: "no-common-ligatures"
|
|
@@ -2689,7 +2722,7 @@ const k = {
|
|
|
2689
2722
|
code2: {
|
|
2690
2723
|
fontFamily: '"Overpass Mono", monospace',
|
|
2691
2724
|
fontWeight: 400,
|
|
2692
|
-
fontSize:
|
|
2725
|
+
fontSize: getPixelToRem(14),
|
|
2693
2726
|
lineHeight: 1.428,
|
|
2694
2727
|
letterSpacing: 0,
|
|
2695
2728
|
fontVariantLigatures: "no-common-ligatures"
|
|
@@ -2697,21 +2730,21 @@ const k = {
|
|
|
2697
2730
|
code3: {
|
|
2698
2731
|
fontFamily: '"Overpass Mono", monospace',
|
|
2699
2732
|
fontWeight: 400,
|
|
2700
|
-
fontSize:
|
|
2733
|
+
fontSize: getPixelToRem(12),
|
|
2701
2734
|
lineHeight: 1.333,
|
|
2702
2735
|
letterSpacing: 0,
|
|
2703
2736
|
fontVariantLigatures: "no-common-ligatures"
|
|
2704
2737
|
}
|
|
2705
|
-
}, ro = {
|
|
2706
|
-
...k,
|
|
2707
|
-
...ho
|
|
2708
2738
|
};
|
|
2709
|
-
|
|
2710
|
-
|
|
2739
|
+
const themeTypography = {
|
|
2740
|
+
...baseTypography,
|
|
2741
|
+
...customTypography
|
|
2742
|
+
};
|
|
2743
|
+
const CssBaseline = {
|
|
2711
2744
|
// Accessibility focus (keyboard only)
|
|
2712
2745
|
"*:focus-visible": {
|
|
2713
|
-
outline: `2px solid ${(
|
|
2714
|
-
boxShadow: `0 0 0 4px ${(
|
|
2746
|
+
outline: `2px solid ${(_a = commonPalette.primary) == null ? void 0 : _a.main} !important`,
|
|
2747
|
+
boxShadow: `0 0 0 4px ${(_b = commonPalette.primary) == null ? void 0 : _b.background} !important`,
|
|
2715
2748
|
borderRadius: "4px"
|
|
2716
2749
|
},
|
|
2717
2750
|
// Custom scrollbars
|
|
@@ -2730,42 +2763,42 @@ const Co = {
|
|
|
2730
2763
|
},
|
|
2731
2764
|
"*::-webkit-scrollbar-thumb": {
|
|
2732
2765
|
borderRadius: "3px",
|
|
2733
|
-
background: (
|
|
2766
|
+
background: (_c = commonPalette.action) == null ? void 0 : _c.focus,
|
|
2734
2767
|
outline: "none"
|
|
2735
2768
|
},
|
|
2736
2769
|
// iOS Search clear button
|
|
2737
2770
|
'input[type="search"]::-webkit-search-cancel-button': {
|
|
2738
2771
|
WebkitAppearance: "none",
|
|
2739
2772
|
appearance: "none",
|
|
2740
|
-
height:
|
|
2741
|
-
width:
|
|
2773
|
+
height: getSpacing(2),
|
|
2774
|
+
width: getSpacing(2),
|
|
2742
2775
|
display: "block",
|
|
2743
|
-
backgroundImage:
|
|
2776
|
+
backgroundImage: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC)`,
|
|
2744
2777
|
backgroundRepeat: "no-repeat",
|
|
2745
|
-
backgroundSize:
|
|
2778
|
+
backgroundSize: getSpacing(2)
|
|
2746
2779
|
},
|
|
2747
2780
|
// Mapbox controls
|
|
2748
2781
|
".mapboxgl-ctrl.mapboxgl-ctrl-attrib": {
|
|
2749
|
-
padding:
|
|
2750
|
-
borderRadius:
|
|
2782
|
+
padding: getSpacing(0, 1),
|
|
2783
|
+
borderRadius: getSpacing(0.5, 0, 0, 0),
|
|
2751
2784
|
"& .mapboxgl-ctrl-attrib-inner": {
|
|
2752
|
-
...
|
|
2785
|
+
...themeTypography.overline,
|
|
2753
2786
|
textTransform: "none",
|
|
2754
2787
|
letterSpacing: "0.75px",
|
|
2755
2788
|
"& a": {
|
|
2756
|
-
color: (
|
|
2789
|
+
color: (_d = commonPalette.primary) == null ? void 0 : _d.main
|
|
2757
2790
|
}
|
|
2758
2791
|
},
|
|
2759
2792
|
"&.mapboxgl-compact": {
|
|
2760
2793
|
backgroundColor: "transparent",
|
|
2761
|
-
right:
|
|
2762
|
-
bottom:
|
|
2794
|
+
right: getSpacing(0.5),
|
|
2795
|
+
bottom: getSpacing(2.5),
|
|
2763
2796
|
// Mobile
|
|
2764
2797
|
"@media (max-width: 600px)": {
|
|
2765
|
-
bottom:
|
|
2798
|
+
bottom: getSpacing(0.5)
|
|
2766
2799
|
},
|
|
2767
2800
|
"& .mapboxgl-ctrl-attrib-button": {
|
|
2768
|
-
backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cg%3E%3Crect%20fill='none'%20height='24'%20width='24'%20x='0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d='M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14%20c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14%20C10,9.25,11.28,9.16,11.88,9.14z%20M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z%20M12,20c-4.41,0-8-3.59-8-8%20s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z'%20fill='${(
|
|
2801
|
+
backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cg%3E%3Crect%20fill='none'%20height='24'%20width='24'%20x='0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d='M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14%20c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14%20C10,9.25,11.28,9.16,11.88,9.14z%20M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z%20M12,20c-4.41,0-8-3.59-8-8%20s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z'%20fill='${(_e = commonPalette.text) == null ? void 0 : _e.secondary}'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
|
2769
2802
|
backgroundColor: "rgba(255,255,255,.8)",
|
|
2770
2803
|
top: "auto",
|
|
2771
2804
|
bottom: 0,
|
|
@@ -2776,23 +2809,24 @@ const Co = {
|
|
|
2776
2809
|
},
|
|
2777
2810
|
"& .mapboxgl-ctrl-attrib-inner": {
|
|
2778
2811
|
backgroundColor: "rgba(255,255,255,.8)",
|
|
2779
|
-
padding:
|
|
2780
|
-
borderRadius:
|
|
2781
|
-
marginRight:
|
|
2782
|
-
color: (
|
|
2812
|
+
padding: getSpacing(0.5, 1),
|
|
2813
|
+
borderRadius: getSpacing(1.5),
|
|
2814
|
+
marginRight: getSpacing(2.5),
|
|
2815
|
+
color: (_f = commonPalette.text) == null ? void 0 : _f.secondary
|
|
2783
2816
|
},
|
|
2784
2817
|
"&.mapboxgl-compact-show": {
|
|
2785
2818
|
"& .mapboxgl-ctrl-attrib-button": {
|
|
2786
2819
|
backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3Cpath%20d='M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%20fill='white'/%3E%3C/svg%3E")`,
|
|
2787
|
-
backgroundColor: (
|
|
2820
|
+
backgroundColor: (_g = commonPalette.common) == null ? void 0 : _g.black,
|
|
2788
2821
|
"&:not(:disabled):hover": {
|
|
2789
|
-
backgroundColor: (
|
|
2822
|
+
backgroundColor: (_h = commonPalette.common) == null ? void 0 : _h.black
|
|
2790
2823
|
}
|
|
2791
2824
|
}
|
|
2792
2825
|
}
|
|
2793
2826
|
}
|
|
2794
2827
|
}
|
|
2795
|
-
}
|
|
2828
|
+
};
|
|
2829
|
+
const feedbackOverrides = {
|
|
2796
2830
|
// SnackBar
|
|
2797
2831
|
MuiSnackbar: {
|
|
2798
2832
|
defaultProps: {
|
|
@@ -2809,18 +2843,18 @@ const Co = {
|
|
|
2809
2843
|
variant: "rounded"
|
|
2810
2844
|
},
|
|
2811
2845
|
styleOverrides: {
|
|
2812
|
-
root: ({ theme:
|
|
2813
|
-
backgroundColor:
|
|
2846
|
+
root: ({ theme: theme2 }) => ({
|
|
2847
|
+
backgroundColor: theme2.palette.black[8]
|
|
2814
2848
|
}),
|
|
2815
|
-
rounded: ({ theme:
|
|
2816
|
-
borderRadius:
|
|
2849
|
+
rounded: ({ theme: theme2 }) => ({
|
|
2850
|
+
borderRadius: theme2.spacing(0.5)
|
|
2817
2851
|
}),
|
|
2818
|
-
text: ({ theme:
|
|
2819
|
-
borderRadius:
|
|
2852
|
+
text: ({ theme: theme2 }) => ({
|
|
2853
|
+
borderRadius: theme2.spacing(0.5)
|
|
2820
2854
|
}),
|
|
2821
|
-
wave: ({ theme:
|
|
2855
|
+
wave: ({ theme: theme2 }) => ({
|
|
2822
2856
|
"&::after": {
|
|
2823
|
-
background: `linear-gradient( 90deg, transparent, ${
|
|
2857
|
+
background: `linear-gradient( 90deg, transparent, ${theme2.palette.black[4]}, transparent )`
|
|
2824
2858
|
}
|
|
2825
2859
|
})
|
|
2826
2860
|
}
|
|
@@ -2829,35 +2863,35 @@ const Co = {
|
|
|
2829
2863
|
MuiAlert: {
|
|
2830
2864
|
defaultProps: {
|
|
2831
2865
|
iconMapping: {
|
|
2832
|
-
success: /* @__PURE__ */
|
|
2866
|
+
success: /* @__PURE__ */ jsx(CheckCircleOutlined, {})
|
|
2833
2867
|
}
|
|
2834
2868
|
},
|
|
2835
2869
|
styleOverrides: {
|
|
2836
|
-
root: ({ theme:
|
|
2837
|
-
borderRadius:
|
|
2870
|
+
root: ({ theme: theme2 }) => ({
|
|
2871
|
+
borderRadius: theme2.spacing(1),
|
|
2838
2872
|
alignSelf: "start",
|
|
2839
2873
|
width: "100%",
|
|
2840
|
-
padding:
|
|
2874
|
+
padding: theme2.spacing(1.5)
|
|
2841
2875
|
}),
|
|
2842
|
-
icon: ({ theme:
|
|
2843
|
-
height:
|
|
2876
|
+
icon: ({ theme: theme2 }) => ({
|
|
2877
|
+
height: theme2.spacing(3),
|
|
2844
2878
|
display: "flex",
|
|
2845
2879
|
alignItems: "center",
|
|
2846
2880
|
padding: 0,
|
|
2847
|
-
marginRight:
|
|
2881
|
+
marginRight: theme2.spacing(1),
|
|
2848
2882
|
svg: {
|
|
2849
|
-
width:
|
|
2850
|
-
height:
|
|
2883
|
+
width: ICON_SIZE_MEDIUM,
|
|
2884
|
+
height: ICON_SIZE_MEDIUM
|
|
2851
2885
|
}
|
|
2852
2886
|
}),
|
|
2853
2887
|
action: () => ({
|
|
2854
2888
|
paddingTop: 0,
|
|
2855
2889
|
marginRight: 0
|
|
2856
2890
|
}),
|
|
2857
|
-
message: ({ theme:
|
|
2858
|
-
paddingTop:
|
|
2891
|
+
message: ({ theme: theme2 }) => ({
|
|
2892
|
+
paddingTop: theme2.spacing(0.5),
|
|
2859
2893
|
paddingBottom: 0,
|
|
2860
|
-
...
|
|
2894
|
+
...theme2.typography.caption
|
|
2861
2895
|
})
|
|
2862
2896
|
}
|
|
2863
2897
|
},
|
|
@@ -2867,34 +2901,35 @@ const Co = {
|
|
|
2867
2901
|
variant: "body2"
|
|
2868
2902
|
},
|
|
2869
2903
|
styleOverrides: {
|
|
2870
|
-
root: ({ theme:
|
|
2871
|
-
marginBottom:
|
|
2872
|
-
fontWeight:
|
|
2904
|
+
root: ({ theme: theme2 }) => ({
|
|
2905
|
+
marginBottom: theme2.spacing(0.5),
|
|
2906
|
+
fontWeight: theme2.typography.fontWeightBold,
|
|
2873
2907
|
color: "inherit"
|
|
2874
2908
|
})
|
|
2875
2909
|
}
|
|
2876
2910
|
}
|
|
2877
|
-
}
|
|
2911
|
+
};
|
|
2912
|
+
const surfacesOverrides = {
|
|
2878
2913
|
// AppBar
|
|
2879
2914
|
MuiAppBar: {
|
|
2880
2915
|
styleOverrides: {
|
|
2881
|
-
root: ({ theme:
|
|
2916
|
+
root: ({ theme: theme2 }) => ({
|
|
2882
2917
|
flexDirection: "row",
|
|
2883
2918
|
alignItems: "center",
|
|
2884
2919
|
justifyContent: "space-between",
|
|
2885
|
-
height:
|
|
2886
|
-
backgroundColor:
|
|
2887
|
-
color:
|
|
2888
|
-
boxShadow:
|
|
2920
|
+
height: APPBAR_SIZE,
|
|
2921
|
+
backgroundColor: theme2.palette.brand.navyBlue,
|
|
2922
|
+
color: theme2.palette.common.white,
|
|
2923
|
+
boxShadow: theme2.shadows[0],
|
|
2889
2924
|
"& .MuiToolbar-root": {
|
|
2890
2925
|
justifyContent: "space-between",
|
|
2891
2926
|
width: "100%",
|
|
2892
|
-
padding:
|
|
2893
|
-
minHeight:
|
|
2927
|
+
padding: theme2.spacing(0, 1),
|
|
2928
|
+
minHeight: APPBAR_SIZE
|
|
2894
2929
|
},
|
|
2895
2930
|
"& .MuiAvatar-root": {
|
|
2896
|
-
width:
|
|
2897
|
-
height:
|
|
2931
|
+
width: theme2.spacing(4),
|
|
2932
|
+
height: theme2.spacing(4)
|
|
2898
2933
|
}
|
|
2899
2934
|
})
|
|
2900
2935
|
}
|
|
@@ -2902,14 +2937,14 @@ const Co = {
|
|
|
2902
2937
|
// MuiAccordion
|
|
2903
2938
|
MuiAccordion: {
|
|
2904
2939
|
defaultProps: {
|
|
2905
|
-
disableGutters:
|
|
2940
|
+
disableGutters: true,
|
|
2906
2941
|
elevation: 0
|
|
2907
2942
|
},
|
|
2908
2943
|
styleOverrides: {
|
|
2909
|
-
root: ({ theme:
|
|
2910
|
-
...
|
|
2944
|
+
root: ({ theme: theme2 }) => ({
|
|
2945
|
+
...theme2.typography.body2,
|
|
2911
2946
|
backgroundColor: "transparent",
|
|
2912
|
-
boxShadow: `inset 0 -1px 0 0 ${
|
|
2947
|
+
boxShadow: `inset 0 -1px 0 0 ${theme2.palette.divider}`,
|
|
2913
2948
|
"&:last-of-type": {
|
|
2914
2949
|
boxShadow: "none"
|
|
2915
2950
|
},
|
|
@@ -2925,25 +2960,25 @@ const Co = {
|
|
|
2925
2960
|
// MuiAccordionSummary
|
|
2926
2961
|
MuiAccordionSummary: {
|
|
2927
2962
|
defaultProps: {
|
|
2928
|
-
expandIcon: /* @__PURE__ */
|
|
2963
|
+
expandIcon: /* @__PURE__ */ jsx(ExpandMoreOutlined, {})
|
|
2929
2964
|
},
|
|
2930
2965
|
styleOverrides: {
|
|
2931
|
-
root: ({ theme:
|
|
2932
|
-
...
|
|
2966
|
+
root: ({ theme: theme2 }) => ({
|
|
2967
|
+
...theme2.typography.button,
|
|
2933
2968
|
"&.Mui-disabled": {
|
|
2934
2969
|
opacity: 1,
|
|
2935
|
-
color:
|
|
2970
|
+
color: theme2.palette.text.disabled
|
|
2936
2971
|
},
|
|
2937
2972
|
"&.Mui-focusVisible": {
|
|
2938
2973
|
backgroundColor: "transparent",
|
|
2939
|
-
borderRadius:
|
|
2974
|
+
borderRadius: theme2.shape.borderRadius
|
|
2940
2975
|
}
|
|
2941
2976
|
}),
|
|
2942
|
-
expandIconWrapper: ({ theme:
|
|
2977
|
+
expandIconWrapper: ({ theme: theme2 }) => ({
|
|
2943
2978
|
"& svg": {
|
|
2944
|
-
color:
|
|
2979
|
+
color: theme2.palette.text.secondary,
|
|
2945
2980
|
".Mui-disabled &": {
|
|
2946
|
-
color:
|
|
2981
|
+
color: theme2.palette.text.disabled
|
|
2947
2982
|
}
|
|
2948
2983
|
}
|
|
2949
2984
|
})
|
|
@@ -2952,12 +2987,13 @@ const Co = {
|
|
|
2952
2987
|
// MuiAccordionDetails
|
|
2953
2988
|
MuiAccordionDetails: {
|
|
2954
2989
|
styleOverrides: {
|
|
2955
|
-
root: ({ theme:
|
|
2956
|
-
paddingBottom:
|
|
2990
|
+
root: ({ theme: theme2 }) => ({
|
|
2991
|
+
paddingBottom: theme2.spacing(3)
|
|
2957
2992
|
})
|
|
2958
2993
|
}
|
|
2959
2994
|
}
|
|
2960
|
-
}
|
|
2995
|
+
};
|
|
2996
|
+
const themeShadows = [
|
|
2961
2997
|
"none",
|
|
2962
2998
|
// 0
|
|
2963
2999
|
"0px 2px 1px -1px rgba(44, 48, 50, 0.12), 0px 1px 1px rgba(44, 48, 50, 0.08), 0px 1px 3px rgba(44, 48, 50, 0.04)",
|
|
@@ -2991,20 +3027,21 @@ const Co = {
|
|
|
2991
3027
|
"0px 11px 14px -7px rgba(0,0,0,0.16),0px 23px 36px 3px rgba(0,0,0,0.08),0px 9px 44px 8px rgba(0,0,0,0.04)",
|
|
2992
3028
|
"0px 11px 15px -7px rgba(44, 48, 50, 0.12), 0px 24px 38px 3px rgba(44, 48, 50, 0.08), 0px 9px 46px 8px rgba(44, 48, 50, 0.04)"
|
|
2993
3029
|
// 24
|
|
2994
|
-
]
|
|
3030
|
+
];
|
|
3031
|
+
const cartoThemeOptions = {
|
|
2995
3032
|
themeName: "CARTO",
|
|
2996
3033
|
breakpoints: {
|
|
2997
3034
|
keys: ["xs", "sm", "md", "lg", "xl"],
|
|
2998
3035
|
values: {
|
|
2999
|
-
xs:
|
|
3036
|
+
xs: BREAKPOINTS.XS,
|
|
3000
3037
|
// 320 - 599
|
|
3001
|
-
sm:
|
|
3038
|
+
sm: BREAKPOINTS.SM,
|
|
3002
3039
|
// 600 - 959
|
|
3003
|
-
md:
|
|
3040
|
+
md: BREAKPOINTS.MD,
|
|
3004
3041
|
// 960 - 1279
|
|
3005
|
-
lg:
|
|
3042
|
+
lg: BREAKPOINTS.LG,
|
|
3006
3043
|
// 1280 - 1599
|
|
3007
|
-
xl:
|
|
3044
|
+
xl: BREAKPOINTS.XL
|
|
3008
3045
|
// 1600+
|
|
3009
3046
|
},
|
|
3010
3047
|
unit: "px",
|
|
@@ -3029,12 +3066,12 @@ const Co = {
|
|
|
3029
3066
|
}
|
|
3030
3067
|
}
|
|
3031
3068
|
},
|
|
3032
|
-
palette:
|
|
3033
|
-
shadows:
|
|
3034
|
-
typography:
|
|
3035
|
-
spacingValue:
|
|
3069
|
+
palette: commonPalette,
|
|
3070
|
+
shadows: themeShadows,
|
|
3071
|
+
typography: themeTypography,
|
|
3072
|
+
spacingValue: SPACING,
|
|
3036
3073
|
// For situations where we can't use theme.spacing(), mainly math calculations.er
|
|
3037
|
-
spacing:
|
|
3074
|
+
spacing: SPACING,
|
|
3038
3075
|
// For custom spacing: https://material-ui.com/customization/spacing/#custom-spacing
|
|
3039
3076
|
shape: {
|
|
3040
3077
|
borderRadius: 4
|
|
@@ -3071,28 +3108,29 @@ const Co = {
|
|
|
3071
3108
|
components: {
|
|
3072
3109
|
MuiCssBaseline: {
|
|
3073
3110
|
styleOverrides: {
|
|
3074
|
-
...
|
|
3111
|
+
...CssBaseline
|
|
3075
3112
|
}
|
|
3076
3113
|
},
|
|
3077
|
-
...
|
|
3078
|
-
...
|
|
3079
|
-
...
|
|
3080
|
-
...
|
|
3081
|
-
...
|
|
3082
|
-
...
|
|
3083
|
-
...
|
|
3114
|
+
...buttonsOverrides,
|
|
3115
|
+
...formsOverrides,
|
|
3116
|
+
...navigationOverrides,
|
|
3117
|
+
...dataDisplayOverrides,
|
|
3118
|
+
...feedbackOverrides,
|
|
3119
|
+
...surfacesOverrides,
|
|
3120
|
+
...datePickersOverrides
|
|
3084
3121
|
}
|
|
3085
|
-
}
|
|
3122
|
+
};
|
|
3123
|
+
const theme = responsiveFontSizes(createTheme(cartoThemeOptions));
|
|
3086
3124
|
export {
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3125
|
+
APPBAR_SIZE,
|
|
3126
|
+
BREAKPOINTS,
|
|
3127
|
+
ICON_SIZE_LARGE,
|
|
3128
|
+
ICON_SIZE_MEDIUM,
|
|
3129
|
+
ICON_SIZE_SMALL,
|
|
3130
|
+
N as NOTIFICATION_DURATION_IN_MS,
|
|
3131
|
+
SPACING,
|
|
3132
|
+
cartoThemeOptions,
|
|
3133
|
+
g as getCartoColorStylePropsForItem,
|
|
3134
|
+
getSpacing,
|
|
3135
|
+
theme
|
|
3098
3136
|
};
|