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