@fattureincloud/fic-design-system 0.3.14 → 0.3.16
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/banner/Banner.d.ts +3 -2
- package/dist/components/banner/index.d.ts +2 -0
- package/dist/components/buttons/index.d.ts +3 -1
- package/dist/components/checkbox/index.d.ts +2 -2
- package/dist/components/dropdown/index.d.ts +2 -2
- package/dist/components/dropdown/types.d.ts +1 -0
- package/dist/components/icon/index.d.ts +3 -2
- package/dist/components/layout/index.d.ts +2 -0
- package/dist/components/layout/sidebar/components/sidebarItem/SidebarItem.d.ts +31 -0
- package/dist/components/layout/sidebar/components/sidebarItem/components/SidebarItemCaret.d.ts +6 -0
- package/dist/components/layout/sidebar/components/sidebarItem/components/SidebarItemDropdown.d.ts +8 -0
- package/dist/components/layout/sidebar/components/sidebarItem/utils.d.ts +7 -0
- package/dist/components/layout/sidebarItem/SidebarItem.d.ts +22 -0
- package/dist/components/layout/sidebarItem/components/SidebarItemCaret.d.ts +6 -0
- package/dist/components/layout/sidebarItem/components/SidebarItemDropdown.d.ts +8 -0
- package/dist/components/layout/sidebarItem/index.d.ts +4 -0
- package/dist/components/layout/sidebarItem/sidebarItemPalette.d.ts +14 -0
- package/dist/components/layout/sidebarItem/utils.d.ts +8 -0
- package/dist/components/microTag/index.d.ts +2 -1
- package/dist/components/tag/index.d.ts +2 -3
- package/dist/components/tooltip/Arrow.d.ts +4 -1
- package/dist/components/tooltip/index.d.ts +2 -2
- package/dist/index.d.ts +5 -4
- package/dist/index.esm.js +908 -813
- package/dist/index.js +907 -811
- package/dist/styles/theme.d.ts +9 -9
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { faChevronDown, faTimes, faCheck, faMinus, faExclamationTriangle, faInfoCircle, faCheckCircle, faSortUp, faSortDown, faSort,
|
|
1
|
+
import { faChevronDown, faTimes, faCheck, faMinus, faEllipsisH, faCaretRight, faExclamationTriangle, faInfoCircle, faCheckCircle, faSortUp, faSortDown, faSort, faEquals, faInfoSquare } from '@fortawesome/pro-solid-svg-icons';
|
|
2
2
|
import React, { Component, useCallback, useRef, useEffect, useState, useMemo, useContext, Fragment } from 'react';
|
|
3
|
-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
4
3
|
import styled, { css, createGlobalStyle, ThemeContext, ThemeProvider as ThemeProvider$1 } from 'styled-components';
|
|
5
|
-
import {
|
|
4
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
5
|
+
import { faCircleNotch, faCircle } from '@fortawesome/pro-regular-svg-icons';
|
|
6
6
|
import { usePopper } from 'react-popper';
|
|
7
7
|
import { CSSTransition } from 'react-transition-group';
|
|
8
8
|
import { useClickAway, useMeasure, useDebounce } from 'react-use';
|
|
@@ -81,6 +81,218 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
81
81
|
return cooked;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
+
var iconSizeMap = {
|
|
85
|
+
xs: '.75em',
|
|
86
|
+
sm: '.875em',
|
|
87
|
+
lg: '1.33em',
|
|
88
|
+
'1x': '1em',
|
|
89
|
+
'2x': '2em',
|
|
90
|
+
'3x': '3em',
|
|
91
|
+
'4x': '4em',
|
|
92
|
+
'5x': '5em',
|
|
93
|
+
'6x': '6em',
|
|
94
|
+
'7x': '7em',
|
|
95
|
+
'8x': '8em',
|
|
96
|
+
'9x': '9em',
|
|
97
|
+
'10x': '10em',
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
var IconBackground = function (_a) {
|
|
101
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
102
|
+
return React.createElement(Wrapper, __assign({}, rest), children);
|
|
103
|
+
};
|
|
104
|
+
var circleBackgroundScaleFactor = 1.5;
|
|
105
|
+
var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n\n min-width: calc(", " * ", ");\n min-height: calc(", " * ", ");\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n"], ["\n background-color: ",
|
|
106
|
+
";\n border-radius: 50%;\n\n min-width: calc(", " * ", ");\n min-height: calc(", " * ", ");\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n"])), function (_a) {
|
|
107
|
+
var theme = _a.theme, color = _a.color, backgroundColor = _a.backgroundColor;
|
|
108
|
+
return backgroundColor || theme.components.iconBackground[color] || 'transparent';
|
|
109
|
+
}, circleBackgroundScaleFactor, function (_a) {
|
|
110
|
+
var size = _a.size;
|
|
111
|
+
return iconSizeMap[size];
|
|
112
|
+
}, circleBackgroundScaleFactor, function (_a) {
|
|
113
|
+
var size = _a.size;
|
|
114
|
+
return iconSizeMap[size];
|
|
115
|
+
});
|
|
116
|
+
var templateObject_1;
|
|
117
|
+
|
|
118
|
+
var black = {
|
|
119
|
+
8: 'rgba(51, 51, 51, 0.08)',
|
|
120
|
+
16: 'rgba(51, 51, 51, 0.16)',
|
|
121
|
+
48: 'rgba(51, 51, 51, 0.48)',
|
|
122
|
+
80: 'rgba(51, 51, 51, 0.8)',
|
|
123
|
+
100: '#333333',
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
var blue = {
|
|
127
|
+
900: '#0028AD',
|
|
128
|
+
800: '#0038B9',
|
|
129
|
+
700: '#0041C0',
|
|
130
|
+
600: '#004BC7',
|
|
131
|
+
500: '#0052CC',
|
|
132
|
+
400: '#266CD4',
|
|
133
|
+
300: '#4D86DB',
|
|
134
|
+
200: '#80A9E6',
|
|
135
|
+
100: '#B3CBF0',
|
|
136
|
+
50: '#E0EAF9',
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
var cyan = {
|
|
140
|
+
900: '#066552',
|
|
141
|
+
800: '#088C72',
|
|
142
|
+
700: '#0AA989',
|
|
143
|
+
600: '#0BC09C',
|
|
144
|
+
500: '#0DD5AD',
|
|
145
|
+
400: '#4DE0C2',
|
|
146
|
+
300: '#7DE8D3',
|
|
147
|
+
200: '#A4EFE0',
|
|
148
|
+
100: '#C6F5EB',
|
|
149
|
+
50: '#E4FAF5',
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
var fuchsia = {
|
|
153
|
+
900: '#500663',
|
|
154
|
+
800: '#71088B',
|
|
155
|
+
700: '#880AA8',
|
|
156
|
+
600: '#9C0BC0',
|
|
157
|
+
500: '#AD0DD5',
|
|
158
|
+
400: '#CB67E4',
|
|
159
|
+
300: '#DB94EC',
|
|
160
|
+
200: '#E6B6F2',
|
|
161
|
+
100: '#EFD2F7',
|
|
162
|
+
50: '#F7E9FB',
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
var green = {
|
|
166
|
+
900: '#00572E',
|
|
167
|
+
800: '#006A3F',
|
|
168
|
+
700: '#007448',
|
|
169
|
+
600: '#007F52',
|
|
170
|
+
500: '#00875A',
|
|
171
|
+
400: '#269973',
|
|
172
|
+
300: '#4DAB8C',
|
|
173
|
+
200: '#80C3AD',
|
|
174
|
+
100: '#B3DBCE',
|
|
175
|
+
50: '#E0F1EB',
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
var grey = {
|
|
179
|
+
900: '#091E42',
|
|
180
|
+
800: '#253858',
|
|
181
|
+
700: '#505F79',
|
|
182
|
+
600: '#5E6C84',
|
|
183
|
+
500: '#6B778C',
|
|
184
|
+
400: '#7A869A',
|
|
185
|
+
300: '#A5ADBA',
|
|
186
|
+
200: '#C1C7D0',
|
|
187
|
+
100: '#EBECF0',
|
|
188
|
+
50: '#FAFBFC',
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
var indigo = {
|
|
192
|
+
900: '#05175E',
|
|
193
|
+
800: '#082188',
|
|
194
|
+
700: '#0A29A6',
|
|
195
|
+
600: '#0B2FBF',
|
|
196
|
+
500: '#0D35D5',
|
|
197
|
+
400: '#637CE3',
|
|
198
|
+
300: '#90A3EB',
|
|
199
|
+
200: '#B3BFF1',
|
|
200
|
+
100: '#D0D7F6',
|
|
201
|
+
50: '#E8ECFB',
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
var orange = {
|
|
205
|
+
900: '#783722',
|
|
206
|
+
800: '#A74D2F',
|
|
207
|
+
700: '#CA5D39',
|
|
208
|
+
600: '#E66A42',
|
|
209
|
+
500: '#FF7649',
|
|
210
|
+
400: '#FF9978',
|
|
211
|
+
300: '#FFB49B',
|
|
212
|
+
200: '#FFCAB9',
|
|
213
|
+
100: '#FFDED3',
|
|
214
|
+
50: '#FFEFEA',
|
|
215
|
+
};
|
|
216
|
+
|
|
217
|
+
var pink = {
|
|
218
|
+
900: '#640648',
|
|
219
|
+
800: '#8C0864',
|
|
220
|
+
700: '#A80A79',
|
|
221
|
+
600: '#C00B8A',
|
|
222
|
+
500: '#D50D99',
|
|
223
|
+
400: '#E569BF',
|
|
224
|
+
300: '#EC96D2',
|
|
225
|
+
200: '#F2B7E0',
|
|
226
|
+
100: '#F7D2EC',
|
|
227
|
+
50: '#FBEAF6',
|
|
228
|
+
};
|
|
229
|
+
|
|
230
|
+
var red = {
|
|
231
|
+
900: '#C81603',
|
|
232
|
+
800: '#D12206',
|
|
233
|
+
700: '#D52808',
|
|
234
|
+
600: '#DA300A',
|
|
235
|
+
500: '#DE350B',
|
|
236
|
+
400: '#E35330',
|
|
237
|
+
300: '#E87254',
|
|
238
|
+
200: '#EF9A85',
|
|
239
|
+
100: '#F5C2B6',
|
|
240
|
+
50: '#FBE7E2',
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
var white = {
|
|
244
|
+
8: 'rgba(255, 255, 255, 0.08)',
|
|
245
|
+
16: 'rgba(255, 255, 255, 0.16)',
|
|
246
|
+
48: 'rgba(255, 255, 255, 0.48)',
|
|
247
|
+
80: 'rgba(255, 255, 255, 0.8)',
|
|
248
|
+
100: '#FFFFFF',
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
var yellow = {
|
|
252
|
+
900: '#FF6B0A',
|
|
253
|
+
800: '#FF7C12',
|
|
254
|
+
700: '#FF8617',
|
|
255
|
+
600: '#FF911B',
|
|
256
|
+
500: '#FF991F',
|
|
257
|
+
400: '#FFA841',
|
|
258
|
+
300: '#FFB862',
|
|
259
|
+
200: '#FFCC8F',
|
|
260
|
+
100: '#FFE0BC',
|
|
261
|
+
50: '#FFF3E4',
|
|
262
|
+
};
|
|
263
|
+
|
|
264
|
+
var defaultPalette = {
|
|
265
|
+
black: black,
|
|
266
|
+
white: white,
|
|
267
|
+
grey: grey,
|
|
268
|
+
blue: blue,
|
|
269
|
+
indigo: indigo,
|
|
270
|
+
yellow: yellow,
|
|
271
|
+
orange: orange,
|
|
272
|
+
red: red,
|
|
273
|
+
green: green,
|
|
274
|
+
fuchsia: fuchsia,
|
|
275
|
+
pink: pink,
|
|
276
|
+
cyan: cyan,
|
|
277
|
+
primary: blue,
|
|
278
|
+
};
|
|
279
|
+
|
|
280
|
+
var iconBackgroundPalette = {
|
|
281
|
+
blue: defaultPalette.blue[50],
|
|
282
|
+
indigo: defaultPalette.indigo[50],
|
|
283
|
+
yellow: defaultPalette.yellow[50],
|
|
284
|
+
orange: defaultPalette.orange[50],
|
|
285
|
+
red: defaultPalette.red[50],
|
|
286
|
+
green: defaultPalette.green[50],
|
|
287
|
+
fuchsia: defaultPalette.fuchsia[50],
|
|
288
|
+
pink: defaultPalette.pink[50],
|
|
289
|
+
cyan: defaultPalette.cyan[50],
|
|
290
|
+
primary: defaultPalette.primary[50],
|
|
291
|
+
grey: defaultPalette.grey[100],
|
|
292
|
+
white: defaultPalette.white[16],
|
|
293
|
+
black: defaultPalette.black[16],
|
|
294
|
+
};
|
|
295
|
+
|
|
84
296
|
var getIconStyles = function (_a) {
|
|
85
297
|
var theme = _a.theme, color = _a.color;
|
|
86
298
|
return color
|
|
@@ -91,7 +303,7 @@ var getIconStyles = function (_a) {
|
|
|
91
303
|
};
|
|
92
304
|
};
|
|
93
305
|
|
|
94
|
-
var Icon = styled(FontAwesomeIcon).attrs(getIconStyles)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: ", ";\n color: ", ";\n --fa-secondary-color: ", ";\n"], ["\n cursor: ", ";\n color: ", ";\n --fa-secondary-color: ", ";\n"])), function (_a) {
|
|
306
|
+
var Icon = styled(FontAwesomeIcon).attrs(getIconStyles)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n cursor: ", ";\n color: ", ";\n --fa-secondary-color: ", ";\n"], ["\n cursor: ", ";\n color: ", ";\n --fa-secondary-color: ", ";\n"])), function (_a) {
|
|
95
307
|
var onClick = _a.onClick;
|
|
96
308
|
return (onClick ? 'pointer' : 'inherit');
|
|
97
309
|
}, function (_a) {
|
|
@@ -101,7 +313,36 @@ var Icon = styled(FontAwesomeIcon).attrs(getIconStyles)(templateObject_1 || (tem
|
|
|
101
313
|
var secondary = _a.secondary;
|
|
102
314
|
return secondary;
|
|
103
315
|
});
|
|
104
|
-
var templateObject_1;
|
|
316
|
+
var templateObject_1$1;
|
|
317
|
+
|
|
318
|
+
var getColoredIcon = function (color) { return ({
|
|
319
|
+
primary: defaultPalette[color][500],
|
|
320
|
+
secondary: defaultPalette[color][200],
|
|
321
|
+
}); };
|
|
322
|
+
var iconPalette = {
|
|
323
|
+
blue: getColoredIcon('blue'),
|
|
324
|
+
red: getColoredIcon('red'),
|
|
325
|
+
green: getColoredIcon('green'),
|
|
326
|
+
yellow: getColoredIcon('yellow'),
|
|
327
|
+
orange: getColoredIcon('orange'),
|
|
328
|
+
primary: getColoredIcon('primary'),
|
|
329
|
+
cyan: getColoredIcon('cyan'),
|
|
330
|
+
fuchsia: getColoredIcon('fuchsia'),
|
|
331
|
+
indigo: getColoredIcon('indigo'),
|
|
332
|
+
pink: getColoredIcon('pink'),
|
|
333
|
+
grey: {
|
|
334
|
+
primary: defaultPalette.grey[500],
|
|
335
|
+
secondary: defaultPalette.grey[200],
|
|
336
|
+
},
|
|
337
|
+
white: {
|
|
338
|
+
primary: defaultPalette.white[100],
|
|
339
|
+
secondary: defaultPalette.white[48],
|
|
340
|
+
},
|
|
341
|
+
black: {
|
|
342
|
+
primary: defaultPalette.black[100],
|
|
343
|
+
secondary: defaultPalette.black[48],
|
|
344
|
+
},
|
|
345
|
+
};
|
|
105
346
|
|
|
106
347
|
var spacing = {
|
|
107
348
|
xxs: '4px',
|
|
@@ -114,7 +355,7 @@ var spacing = {
|
|
|
114
355
|
xxxl: '64px',
|
|
115
356
|
};
|
|
116
357
|
|
|
117
|
-
var StyledAccordionWrapper = styled.div(templateObject_1$
|
|
358
|
+
var StyledAccordionWrapper = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n color: ", ";\n .header {\n border-top: 1px solid ", ";\n display: flex;\n align-items: center;\n width: 100%;\n height: ", ";\n .header__element {\n padding: 0 ", ";\n &:hover {\n &.pointer {\n cursor: pointer;\n }\n }\n }\n\n .action_icon {\n cursor: pointer;\n display: none;\n width: ", ";\n height: ", ";\n &.visibile {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n &:hover {\n background: ", ";\n border-radius: 4px;\n }\n }\n\n .chevron {\n }\n .chevron__closed {\n transform: rotate(-90deg);\n }\n\n .title {\n flex: 1;\n padding: 0;\n user-select: none;\n p {\n margin: 0;\n font-size: 20px;\n line-height: 30px;\n }\n }\n }\n\n .body {\n padding: 0 ", ";\n height: auto;\n\n &.closed {\n overflow: hidden;\n height: 0;\n }\n }\n"], ["\n color: ", ";\n .header {\n border-top: 1px solid ", ";\n display: flex;\n align-items: center;\n width: 100%;\n height: ", ";\n .header__element {\n padding: 0 ", ";\n &:hover {\n &.pointer {\n cursor: pointer;\n }\n }\n }\n\n .action_icon {\n cursor: pointer;\n display: none;\n width: ", ";\n height: ", ";\n &.visibile {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n &:hover {\n background: ", ";\n border-radius: 4px;\n }\n }\n\n .chevron {\n }\n .chevron__closed {\n transform: rotate(-90deg);\n }\n\n .title {\n flex: 1;\n padding: 0;\n user-select: none;\n p {\n margin: 0;\n font-size: 20px;\n line-height: 30px;\n }\n }\n }\n\n .body {\n padding: 0 ", ";\n height: auto;\n\n &.closed {\n overflow: hidden;\n height: 0;\n }\n }\n"])), function (_a) {
|
|
118
359
|
var theme = _a.theme;
|
|
119
360
|
return theme.palette.black[100];
|
|
120
361
|
}, function (_a) {
|
|
@@ -124,7 +365,7 @@ var StyledAccordionWrapper = styled.div(templateObject_1$1 || (templateObject_1$
|
|
|
124
365
|
var theme = _a.theme;
|
|
125
366
|
return theme.palette.grey[100];
|
|
126
367
|
}, spacing.l);
|
|
127
|
-
var templateObject_1$
|
|
368
|
+
var templateObject_1$2;
|
|
128
369
|
|
|
129
370
|
var UnstyledAccordion = /** @class */ (function (_super) {
|
|
130
371
|
__extends(UnstyledAccordion, _super);
|
|
@@ -176,13 +417,13 @@ var getBackGroundImageStyle = function (_a) {
|
|
|
176
417
|
var BaseAvatar = function (props) { return React.createElement("span", { className: props.className }); };
|
|
177
418
|
var Avatar = styled(BaseAvatar).attrs(function (props) { return ({
|
|
178
419
|
initials: props.initials ? (['m', 'l'].includes(props.size) ? props.initials.slice(0, 2) : props.initials[0]) : '',
|
|
179
|
-
}); })(templateObject_1$
|
|
420
|
+
}); })(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n -webkit-box-pack: center;\n height: ", "px;\n width: ", "px;\n line-height: 0;\n border-radius: 100%;\n -webkit-box-align: center;\n background-size: cover;\n color: white;\n background-color: ", ";\n ", "\n\n &:after {\n content: '", "';\n line-height: 40px;\n font-weight: 500;\n font-style: normal;\n font-size: ", "px;\n text-transform: uppercase;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n -webkit-box-pack: center;\n height: ", "px;\n width: ", "px;\n line-height: 0;\n border-radius: 100%;\n -webkit-box-align: center;\n background-size: cover;\n color: white;\n background-color: ", ";\n ", "\n\n &:after {\n content: '", "';\n line-height: 40px;\n font-weight: 500;\n font-style: normal;\n font-size: ", "px;\n text-transform: uppercase;\n }\n"])), function (props) { return avatarSizes[props.size || 'm']; }, function (props) { return avatarSizes[props.size || 'm']; }, function (_a) {
|
|
180
421
|
var theme = _a.theme;
|
|
181
422
|
return theme.palette.primary[500];
|
|
182
423
|
}, function (props) { return getBackGroundImageStyle(props); }, function (props) { return (props.image ? '' : props.initials); }, function (props) { return textSizes[props.size || 'm']; });
|
|
183
|
-
var templateObject_1$
|
|
424
|
+
var templateObject_1$3;
|
|
184
425
|
|
|
185
|
-
var Body = styled.div(templateObject_1$
|
|
426
|
+
var Body = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 4px;\n margin: 3px 0;\n max-height: 24px;\n\n padding-left: ", ";\n padding-right: ", ";\n\n color: ", ";\n background-color: ", ";\n\n &.red {\n background-color: ", ";\n color: ", ";\n }\n\n &.green {\n background-color: ", ";\n color: ", ";\n }\n"], ["\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 4px;\n margin: 3px 0;\n max-height: 24px;\n\n padding-left: ", ";\n padding-right: ", ";\n\n color: ", ";\n background-color: ", ";\n\n &.red {\n background-color: ", ";\n color: ", ";\n }\n\n &.green {\n background-color: ", ";\n color: ", ";\n }\n"])), function (_a) {
|
|
186
427
|
var imageUrl = _a.imageUrl, leftIcon = _a.leftIcon;
|
|
187
428
|
return (leftIcon || imageUrl ? '8px' : '0');
|
|
188
429
|
}, function (_a) {
|
|
@@ -207,7 +448,7 @@ var Body = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplate
|
|
|
207
448
|
var theme = _a.theme;
|
|
208
449
|
return theme.palette.green[900];
|
|
209
450
|
});
|
|
210
|
-
var templateObject_1$
|
|
451
|
+
var templateObject_1$4;
|
|
211
452
|
|
|
212
453
|
var Badge = function (props) {
|
|
213
454
|
var color = props.color, handleRightIconClick = props.handleRightIconClick, imageUrl = props.imageUrl, leftIcon = props.leftIcon, rightIcon = props.rightIcon, text = props.text;
|
|
@@ -217,8 +458,8 @@ var Badge = function (props) {
|
|
|
217
458
|
React.createElement(Text, null, text),
|
|
218
459
|
rightIcon && React.createElement(Icon, __assign({}, rightIcon, { onClick: handleRightIconClick }))));
|
|
219
460
|
};
|
|
220
|
-
var Text = styled.div(templateObject_1$
|
|
221
|
-
var templateObject_1$
|
|
461
|
+
var Text = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n padding: ", " ", ";\n"], ["\n padding: ", " ", ";\n"])), spacing.xxs, spacing.xs);
|
|
462
|
+
var templateObject_1$5;
|
|
222
463
|
|
|
223
464
|
var mapColors = function (theme, color) {
|
|
224
465
|
switch (color) {
|
|
@@ -245,20 +486,19 @@ var mapColors = function (theme, color) {
|
|
|
245
486
|
|
|
246
487
|
var Banner = function (_a) {
|
|
247
488
|
var color = _a.color, content = _a.content, icon = _a.icon, onClose = _a.onClose;
|
|
248
|
-
return (React.createElement(Wrapper, { color: color },
|
|
249
|
-
React.createElement(
|
|
250
|
-
|
|
251
|
-
content),
|
|
489
|
+
return (React.createElement(Wrapper$1, { color: color },
|
|
490
|
+
icon && React.createElement(Icon, __assign({}, icon)),
|
|
491
|
+
React.createElement(Content, null, content),
|
|
252
492
|
onClose && React.createElement(Icon, { icon: faTimes, color: 'grey', onClick: onClose })));
|
|
253
493
|
};
|
|
254
|
-
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n padding: 10px 20px 10px 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n ",
|
|
255
|
-
"\n padding: 10px 20px 10px 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])), function (_a) {
|
|
494
|
+
var Wrapper$1 = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n padding: 10px 20px 10px 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n"], ["\n ",
|
|
495
|
+
"\n padding: 10px 20px 10px 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n"])), function (_a) {
|
|
256
496
|
var color = _a.color, theme = _a.theme;
|
|
257
497
|
var _b = mapColors(theme, color), bgColor = _b.bgColor, textColor = _b.textColor;
|
|
258
|
-
return css(templateObject_1$
|
|
498
|
+
return css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), bgColor, textColor);
|
|
259
499
|
});
|
|
260
|
-
var
|
|
261
|
-
var templateObject_1$
|
|
500
|
+
var Content = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
501
|
+
var templateObject_1$6, templateObject_2, templateObject_3;
|
|
262
502
|
|
|
263
503
|
var useDebounceClick = function (_a) {
|
|
264
504
|
var _b = _a.manualLock, manualLock = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.timeMs, timeMs = _c === void 0 ? 250 : _c;
|
|
@@ -297,12 +537,12 @@ var getButtonStyles = function (_a) {
|
|
|
297
537
|
cursor: cursor }, buttonParts);
|
|
298
538
|
};
|
|
299
539
|
|
|
300
|
-
var StyledIcon
|
|
301
|
-
var LeftIcon = styled(StyledIcon
|
|
302
|
-
var RightIcon = styled(StyledIcon
|
|
540
|
+
var StyledIcon = styled(Icon)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: inline-block;\n"], ["\n display: inline-block;\n"])));
|
|
541
|
+
var LeftIcon = styled(StyledIcon)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject([""], [""])));
|
|
542
|
+
var RightIcon = styled(StyledIcon)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject([""], [""])));
|
|
303
543
|
var ButtonSpinner = styled(Spinner)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n"], ["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n"])));
|
|
304
544
|
var Text$1 = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-block;\n line-height: initial;\n"], ["\n display: inline-block;\n line-height: initial;\n"])));
|
|
305
|
-
var Content = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n opacity: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"], ["\n opacity: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
|
|
545
|
+
var Content$1 = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n opacity: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"], ["\n opacity: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
|
|
306
546
|
var isLoading = _a.isLoading;
|
|
307
547
|
return (isLoading ? 0 : 1);
|
|
308
548
|
});
|
|
@@ -315,7 +555,7 @@ var WrapperStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObj
|
|
|
315
555
|
}, function (_a) {
|
|
316
556
|
var border = _a.border;
|
|
317
557
|
return border;
|
|
318
|
-
}, Content, function (_a) {
|
|
558
|
+
}, Content$1, function (_a) {
|
|
319
559
|
var height = _a.height;
|
|
320
560
|
return height;
|
|
321
561
|
}, LeftIcon, Text$1, function (_a) {
|
|
@@ -339,7 +579,7 @@ var WrapperStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObj
|
|
|
339
579
|
});
|
|
340
580
|
var HrefWrapper = styled.a.attrs(getButtonStyles)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", ";\n\n text-decoration: none;\n"], ["\n ", ";\n\n text-decoration: none;\n"])), WrapperStyle);
|
|
341
581
|
var OnClickWrapper = styled.div.attrs(getButtonStyles)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), WrapperStyle);
|
|
342
|
-
var templateObject_1$
|
|
582
|
+
var templateObject_1$7, templateObject_2$1, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
343
583
|
|
|
344
584
|
var Button = function (_a) {
|
|
345
585
|
var className = _a.className, color = _a.color, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, href = _a.href, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, onClick = _a.onClick, size = _a.size, target = _a.target, text = _a.text, type = _a.type;
|
|
@@ -348,28 +588,166 @@ var Button = function (_a) {
|
|
|
348
588
|
var showLoading = !isDisabled && isLoading;
|
|
349
589
|
var Wrapper = href ? HrefWrapper : OnClickWrapper;
|
|
350
590
|
return (React.createElement(Wrapper, { className: className, size: size, color: color, onClick: debounceClick, href: href, type: type, isDisabled: isDisabled, fullWidth: fullWidth, target: target },
|
|
351
|
-
React.createElement(Content, { isLoading: showLoading },
|
|
591
|
+
React.createElement(Content$1, { isLoading: showLoading },
|
|
352
592
|
!isTextButton && iconLeft && React.createElement(LeftIcon, __assign({}, iconLeft)),
|
|
353
593
|
text && React.createElement(Text$1, null, text),
|
|
354
594
|
!isTextButton && iconRight && React.createElement(RightIcon, __assign({}, iconRight))),
|
|
355
595
|
showLoading && React.createElement(ButtonSpinner, null)));
|
|
356
596
|
};
|
|
357
597
|
|
|
358
|
-
var
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
598
|
+
var buttonPalette = {
|
|
599
|
+
primary: {
|
|
600
|
+
blue: {
|
|
601
|
+
normal: defaultPalette.blue[500],
|
|
602
|
+
hover: defaultPalette.blue[700],
|
|
603
|
+
active: defaultPalette.blue[900],
|
|
604
|
+
text: defaultPalette.white[100],
|
|
605
|
+
textHover: defaultPalette.grey[100],
|
|
606
|
+
},
|
|
607
|
+
red: {
|
|
608
|
+
normal: defaultPalette.red[500],
|
|
609
|
+
hover: defaultPalette.red[700],
|
|
610
|
+
active: defaultPalette.red[900],
|
|
611
|
+
text: defaultPalette.white[100],
|
|
612
|
+
textHover: defaultPalette.grey[100],
|
|
613
|
+
},
|
|
614
|
+
green: {
|
|
615
|
+
normal: defaultPalette.green[500],
|
|
616
|
+
hover: defaultPalette.green[700],
|
|
617
|
+
active: defaultPalette.green[900],
|
|
618
|
+
text: defaultPalette.white[100],
|
|
619
|
+
textHover: defaultPalette.grey[100],
|
|
620
|
+
},
|
|
621
|
+
grey: {
|
|
622
|
+
normal: defaultPalette.white[100],
|
|
623
|
+
hover: defaultPalette.grey[100],
|
|
624
|
+
active: defaultPalette.grey[200],
|
|
625
|
+
text: defaultPalette.black[100],
|
|
626
|
+
textHover: defaultPalette.black[100],
|
|
627
|
+
},
|
|
628
|
+
yellow: {
|
|
629
|
+
normal: defaultPalette.yellow[500],
|
|
630
|
+
hover: defaultPalette.yellow[700],
|
|
631
|
+
active: defaultPalette.yellow[900],
|
|
632
|
+
text: defaultPalette.white[100],
|
|
633
|
+
textHover: defaultPalette.grey[100],
|
|
634
|
+
},
|
|
635
|
+
disabled: {
|
|
636
|
+
normal: defaultPalette.grey[50],
|
|
637
|
+
hover: defaultPalette.grey[50],
|
|
638
|
+
active: defaultPalette.grey[50],
|
|
639
|
+
text: defaultPalette.grey[200],
|
|
640
|
+
textHover: defaultPalette.grey[200],
|
|
641
|
+
},
|
|
642
|
+
},
|
|
643
|
+
secondary: {
|
|
644
|
+
blue: {
|
|
645
|
+
normal: defaultPalette.blue[50],
|
|
646
|
+
hover: defaultPalette.blue[100],
|
|
647
|
+
active: defaultPalette.blue[200],
|
|
648
|
+
text: defaultPalette.blue[900],
|
|
649
|
+
textHover: defaultPalette.blue[900],
|
|
650
|
+
},
|
|
651
|
+
red: {
|
|
652
|
+
normal: defaultPalette.red[50],
|
|
653
|
+
hover: defaultPalette.red[100],
|
|
654
|
+
active: defaultPalette.red[200],
|
|
655
|
+
text: defaultPalette.red[900],
|
|
656
|
+
textHover: defaultPalette.red[900],
|
|
657
|
+
},
|
|
658
|
+
green: {
|
|
659
|
+
normal: defaultPalette.green[50],
|
|
660
|
+
hover: defaultPalette.green[100],
|
|
661
|
+
active: defaultPalette.green[200],
|
|
662
|
+
text: defaultPalette.green[900],
|
|
663
|
+
textHover: defaultPalette.green[900],
|
|
664
|
+
},
|
|
665
|
+
yellow: {
|
|
666
|
+
normal: defaultPalette.yellow[50],
|
|
667
|
+
hover: defaultPalette.yellow[100],
|
|
668
|
+
active: defaultPalette.yellow[200],
|
|
669
|
+
text: defaultPalette.yellow[900],
|
|
670
|
+
textHover: defaultPalette.yellow[900],
|
|
671
|
+
},
|
|
672
|
+
grey: {
|
|
673
|
+
normal: defaultPalette.grey[50],
|
|
674
|
+
hover: defaultPalette.grey[100],
|
|
675
|
+
active: defaultPalette.grey[200],
|
|
676
|
+
text: defaultPalette.black[100],
|
|
677
|
+
textHover: defaultPalette.black[100],
|
|
678
|
+
},
|
|
679
|
+
disabled: {
|
|
680
|
+
normal: defaultPalette.grey[50],
|
|
681
|
+
hover: defaultPalette.grey[50],
|
|
682
|
+
active: defaultPalette.grey[50],
|
|
683
|
+
text: defaultPalette.grey[200],
|
|
684
|
+
textHover: defaultPalette.grey[200],
|
|
685
|
+
},
|
|
686
|
+
},
|
|
687
|
+
text: {
|
|
688
|
+
blue: {
|
|
689
|
+
normal: 'transparent',
|
|
690
|
+
hover: 'transparent',
|
|
691
|
+
active: 'transparent',
|
|
692
|
+
text: defaultPalette.blue[500],
|
|
693
|
+
textHover: defaultPalette.blue[500],
|
|
694
|
+
},
|
|
695
|
+
red: {
|
|
696
|
+
normal: 'transparent',
|
|
697
|
+
hover: 'transparent',
|
|
698
|
+
active: 'transparent',
|
|
699
|
+
text: defaultPalette.red[500],
|
|
700
|
+
textHover: defaultPalette.red[500],
|
|
701
|
+
},
|
|
702
|
+
green: {
|
|
703
|
+
normal: 'transparent',
|
|
704
|
+
hover: 'transparent',
|
|
705
|
+
active: 'transparent',
|
|
706
|
+
text: defaultPalette.green[500],
|
|
707
|
+
textHover: defaultPalette.green[500],
|
|
708
|
+
},
|
|
709
|
+
grey: {
|
|
710
|
+
normal: 'transparent',
|
|
711
|
+
hover: 'transparent',
|
|
712
|
+
active: 'transparent',
|
|
713
|
+
text: defaultPalette.grey[500],
|
|
714
|
+
textHover: defaultPalette.grey[500],
|
|
715
|
+
},
|
|
716
|
+
yellow: {
|
|
717
|
+
normal: 'transparent',
|
|
718
|
+
hover: 'transparent',
|
|
719
|
+
active: 'transparent',
|
|
720
|
+
text: defaultPalette.yellow[500],
|
|
721
|
+
textHover: defaultPalette.yellow[500],
|
|
722
|
+
},
|
|
723
|
+
disabled: {
|
|
724
|
+
normal: 'transparent',
|
|
725
|
+
hover: 'transparent',
|
|
726
|
+
active: 'transparent',
|
|
727
|
+
text: defaultPalette.grey[200],
|
|
728
|
+
textHover: defaultPalette.grey[200],
|
|
729
|
+
},
|
|
730
|
+
},
|
|
731
|
+
defaultType: 'primary',
|
|
732
|
+
defaultColor: 'blue',
|
|
733
|
+
defaultSize: 'medium',
|
|
734
|
+
};
|
|
735
|
+
|
|
736
|
+
var getIconButtonColors = function (_a) {
|
|
737
|
+
var color = _a.color, isDisabled = _a.isDisabled, theme = _a.theme, type = _a.type;
|
|
738
|
+
var _b = theme.components.iconButton, defaultColor = _b.defaultColor, defaultType = _b.defaultType;
|
|
739
|
+
var actualColor = isDisabled ? 'disabled' : color || defaultColor;
|
|
740
|
+
var actualType = type || defaultType;
|
|
741
|
+
return theme.components.iconButton[actualType][actualColor];
|
|
364
742
|
};
|
|
365
743
|
|
|
366
744
|
var IconButton = function (_a) {
|
|
367
745
|
var className = _a.className, color = _a.color, icon = _a.icon, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, onClick = _a.onClick, type = _a.type;
|
|
368
746
|
var handleClick = useDebounceClick({ onClick: onClick, manualLock: isDisabled });
|
|
369
|
-
return (React.createElement(Wrapper$
|
|
747
|
+
return (React.createElement(Wrapper$2, { color: color, className: className, type: type, onClick: handleClick, isDisabled: isDisabled },
|
|
370
748
|
React.createElement(Icon, __assign({}, icon))));
|
|
371
749
|
};
|
|
372
|
-
var Wrapper$
|
|
750
|
+
var Wrapper$2 = styled.div.attrs(getIconButtonColors)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: inline-flex;\n font-size: 20px;\n text-decoration: none;\n padding: 0 8px;\n height: 32px;\n align-items: center;\n\n cursor: ", ";\n color: ", ";\n\n :hover {\n color: ", ";\n text-decoration: none;\n }\n"], ["\n display: inline-flex;\n font-size: 20px;\n text-decoration: none;\n padding: 0 8px;\n height: 32px;\n align-items: center;\n\n cursor: ", ";\n color: ", ";\n\n :hover {\n color: ", ";\n text-decoration: none;\n }\n"])), function (_a) {
|
|
373
751
|
var isDisabled = _a.isDisabled;
|
|
374
752
|
return (isDisabled ? 'default' : 'pointer');
|
|
375
753
|
}, function (_a) {
|
|
@@ -379,7 +757,56 @@ var Wrapper$1 = styled.div.attrs(getIconButtonColors)(templateObject_1$7 || (tem
|
|
|
379
757
|
var hover = _a.hover;
|
|
380
758
|
return hover;
|
|
381
759
|
});
|
|
382
|
-
var templateObject_1$
|
|
760
|
+
var templateObject_1$8;
|
|
761
|
+
|
|
762
|
+
var iconButtonPalette = {
|
|
763
|
+
primary: {
|
|
764
|
+
blue: {
|
|
765
|
+
normal: defaultPalette.blue[200],
|
|
766
|
+
hover: defaultPalette.blue[500],
|
|
767
|
+
},
|
|
768
|
+
red: {
|
|
769
|
+
normal: defaultPalette.red[200],
|
|
770
|
+
hover: defaultPalette.red[500],
|
|
771
|
+
},
|
|
772
|
+
green: {
|
|
773
|
+
normal: defaultPalette.green[200],
|
|
774
|
+
hover: defaultPalette.green[500],
|
|
775
|
+
},
|
|
776
|
+
yellow: {
|
|
777
|
+
normal: defaultPalette.yellow[200],
|
|
778
|
+
hover: defaultPalette.yellow[500],
|
|
779
|
+
},
|
|
780
|
+
disabled: {
|
|
781
|
+
normal: defaultPalette.grey[200],
|
|
782
|
+
hover: defaultPalette.grey[200],
|
|
783
|
+
},
|
|
784
|
+
},
|
|
785
|
+
secondary: {
|
|
786
|
+
blue: {
|
|
787
|
+
normal: defaultPalette.blue[200],
|
|
788
|
+
hover: defaultPalette.white[100],
|
|
789
|
+
},
|
|
790
|
+
red: {
|
|
791
|
+
normal: defaultPalette.red[200],
|
|
792
|
+
hover: defaultPalette.white[100],
|
|
793
|
+
},
|
|
794
|
+
green: {
|
|
795
|
+
normal: defaultPalette.green[200],
|
|
796
|
+
hover: defaultPalette.white[100],
|
|
797
|
+
},
|
|
798
|
+
yellow: {
|
|
799
|
+
normal: defaultPalette.yellow[200],
|
|
800
|
+
hover: defaultPalette.white[100],
|
|
801
|
+
},
|
|
802
|
+
disabled: {
|
|
803
|
+
normal: defaultPalette.grey[200],
|
|
804
|
+
hover: defaultPalette.grey[200],
|
|
805
|
+
},
|
|
806
|
+
},
|
|
807
|
+
defaultType: 'primary',
|
|
808
|
+
defaultColor: 'blue',
|
|
809
|
+
};
|
|
383
810
|
|
|
384
811
|
var getInputStyle = function (_a) {
|
|
385
812
|
var theme = _a.theme, value = _a.value, isDisabled = _a.isDisabled, large = _a.large, hasError = _a.hasError;
|
|
@@ -417,7 +844,7 @@ var convertToStatus = function (value) {
|
|
|
417
844
|
return typeof value === 'boolean' ? (value ? 'checked' : 'unchecked') : value;
|
|
418
845
|
};
|
|
419
846
|
|
|
420
|
-
var Input = styled.span.attrs(getInputStyle)(templateObject_1$
|
|
847
|
+
var Input = styled.span.attrs(getInputStyle)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n border-radius: 4px;\n font-size: 10px;\n text-align: center;\n\n width: ", ";\n height: ", ";\n background-color: ", ";\n color: ", ";\n border: ", ";\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n opacity: ", ";\n"], ["\n border-radius: 4px;\n font-size: 10px;\n text-align: center;\n\n width: ", ";\n height: ", ";\n background-color: ", ";\n color: ", ";\n border: ", ";\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n opacity: ", ";\n"])), function (_a) {
|
|
421
848
|
var width = _a.width;
|
|
422
849
|
return width;
|
|
423
850
|
}, function (_a) {
|
|
@@ -439,9 +866,9 @@ var Input = styled.span.attrs(getInputStyle)(templateObject_1$8 || (templateObje
|
|
|
439
866
|
var opacity = _a.opacity;
|
|
440
867
|
return opacity;
|
|
441
868
|
});
|
|
442
|
-
var templateObject_1$
|
|
869
|
+
var templateObject_1$9;
|
|
443
870
|
|
|
444
|
-
var Label = styled.span.attrs(getLabelStyle)(templateObject_1$
|
|
871
|
+
var Label = styled.span.attrs(getLabelStyle)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n flex: 1;\n text-align: left;\n font-size: ", ";\n cursor: ", ";\n color: ", ";\n opacity: ", ";\n"], ["\n flex: 1;\n text-align: left;\n font-size: ", ";\n cursor: ", ";\n color: ", ";\n opacity: ", ";\n"])), function (_a) {
|
|
445
872
|
var fontSize = _a.fontSize;
|
|
446
873
|
return fontSize;
|
|
447
874
|
}, function (_a) {
|
|
@@ -454,7 +881,7 @@ var Label = styled.span.attrs(getLabelStyle)(templateObject_1$9 || (templateObje
|
|
|
454
881
|
var opacity = _a.opacity;
|
|
455
882
|
return opacity;
|
|
456
883
|
});
|
|
457
|
-
var templateObject_1$
|
|
884
|
+
var templateObject_1$a;
|
|
458
885
|
|
|
459
886
|
var CheckboxImpl = function (_a) {
|
|
460
887
|
var isDisabled = _a.isDisabled, className = _a.className, onClick = _a.onClick, large = _a.large, text = _a.text, value = _a.value, error = _a.error, onChange = _a.onChange;
|
|
@@ -485,13 +912,50 @@ var CheckboxImpl = function (_a) {
|
|
|
485
912
|
React.createElement(HiddenInput, { ref: ref, type: 'checkbox', value: value, onClick: handleClick, onChange: onChange, disabled: isDisabled }),
|
|
486
913
|
React.createElement(Label, { large: large, isDisabled: isDisabled, hasError: !!error }, text)));
|
|
487
914
|
};
|
|
488
|
-
var ClickableWrapper = styled.div(templateObject_1$
|
|
915
|
+
var ClickableWrapper = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
489
916
|
var HiddenInput = styled.input(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
490
917
|
var Checkbox = function (_a) {
|
|
491
918
|
var value = _a.value, rest = __rest(_a, ["value"]);
|
|
492
919
|
return (React.createElement(CheckboxImpl, __assign({}, rest, { value: convertToStatus(value) })));
|
|
493
920
|
};
|
|
494
|
-
var templateObject_1$
|
|
921
|
+
var templateObject_1$b, templateObject_2$2;
|
|
922
|
+
|
|
923
|
+
var normalChecked = {
|
|
924
|
+
tickColor: defaultPalette.white[100],
|
|
925
|
+
backgroundColor: defaultPalette.blue[500],
|
|
926
|
+
borderColor: defaultPalette.blue[500],
|
|
927
|
+
};
|
|
928
|
+
var errorChecked = {
|
|
929
|
+
tickColor: defaultPalette.white[100],
|
|
930
|
+
backgroundColor: defaultPalette.red[500],
|
|
931
|
+
borderColor: defaultPalette.red[500],
|
|
932
|
+
};
|
|
933
|
+
var checkboxPalette = {
|
|
934
|
+
input: {
|
|
935
|
+
normal: {
|
|
936
|
+
checked: normalChecked,
|
|
937
|
+
indeterminate: normalChecked,
|
|
938
|
+
unchecked: {
|
|
939
|
+
tickColor: defaultPalette.white[100],
|
|
940
|
+
backgroundColor: 'transparent',
|
|
941
|
+
borderColor: defaultPalette.grey[500],
|
|
942
|
+
},
|
|
943
|
+
},
|
|
944
|
+
error: {
|
|
945
|
+
checked: errorChecked,
|
|
946
|
+
indeterminate: errorChecked,
|
|
947
|
+
unchecked: {
|
|
948
|
+
tickColor: defaultPalette.white[100],
|
|
949
|
+
backgroundColor: 'transparent',
|
|
950
|
+
borderColor: defaultPalette.red[500],
|
|
951
|
+
},
|
|
952
|
+
},
|
|
953
|
+
},
|
|
954
|
+
label: {
|
|
955
|
+
normal: defaultPalette.black[100],
|
|
956
|
+
error: defaultPalette.red[500],
|
|
957
|
+
},
|
|
958
|
+
};
|
|
495
959
|
|
|
496
960
|
var useCheckboxValue = function (initialValue) {
|
|
497
961
|
if (initialValue === void 0) { initialValue = 'unchecked'; }
|
|
@@ -515,7 +979,7 @@ var StyledChipWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = _
|
|
|
515
979
|
"\n\n ",
|
|
516
980
|
"\n"])), spacing.xs, function (_a) {
|
|
517
981
|
var palette = _a.theme.palette;
|
|
518
|
-
return css(templateObject_1$
|
|
982
|
+
return css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), palette.grey[100], palette.black[100]);
|
|
519
983
|
}, function (_a) {
|
|
520
984
|
var statusEdit = _a.statusEdit, palette = _a.theme.palette;
|
|
521
985
|
if (statusEdit) {
|
|
@@ -523,8 +987,8 @@ var StyledChipWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = _
|
|
|
523
987
|
}
|
|
524
988
|
return undefined;
|
|
525
989
|
});
|
|
526
|
-
var StyledIcon$
|
|
527
|
-
var templateObject_1$
|
|
990
|
+
var StyledIcon$1 = styled(Icon)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n cursor: pointer;\n margin-left: ", ";\n &:hover {\n cursor: pointer;\n }\n"], ["\n cursor: pointer;\n margin-left: ", ";\n &:hover {\n cursor: pointer;\n }\n"])), spacing.xs);
|
|
991
|
+
var templateObject_1$c, templateObject_2$3, templateObject_3$2, templateObject_4$1;
|
|
528
992
|
|
|
529
993
|
var UnstyledChip = /** @class */ (function (_super) {
|
|
530
994
|
__extends(UnstyledChip, _super);
|
|
@@ -537,7 +1001,7 @@ var UnstyledChip = /** @class */ (function (_super) {
|
|
|
537
1001
|
text,
|
|
538
1002
|
' ',
|
|
539
1003
|
statusEdit ? (React.createElement("div", null,
|
|
540
|
-
React.createElement(StyledIcon$
|
|
1004
|
+
React.createElement(StyledIcon$1, { icon: faTimes, onClick: function () {
|
|
541
1005
|
closeAction ? closeAction() : null;
|
|
542
1006
|
} }))) : null));
|
|
543
1007
|
};
|
|
@@ -548,20 +1012,20 @@ var Chip = function (props) { return (React.createElement(StyledChipWrapper, __a
|
|
|
548
1012
|
|
|
549
1013
|
var showHandler = function (show) {
|
|
550
1014
|
return show
|
|
551
|
-
? css(templateObject_1$
|
|
1015
|
+
? css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n transform: translateX(0);\n "], ["\n transform: translateX(0);\n "]))) : undefined;
|
|
552
1016
|
};
|
|
553
|
-
var templateObject_1$
|
|
1017
|
+
var templateObject_1$d;
|
|
554
1018
|
|
|
555
1019
|
var StyledDrawerWrapper = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
556
1020
|
"\n"])), function (_a) {
|
|
557
1021
|
var show = _a.show, palette = _a.theme.palette;
|
|
558
|
-
return css(templateObject_1$
|
|
1022
|
+
return css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n .drawer {\n position: fixed;\n right: 0;\n top: 0;\n height: 100vh;\n width: 500px;\n box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n border-radius: 8px 0 0 8px;\n transform: translateX(110%);\n transition: transform 0.4s ease-in-out;\n z-index: 5;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n\n ", "\n\n .drawer__header {\n padding-right: calc(", " + ", ");\n padding-left: ", ";\n display: flex;\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n\n .drawer__header__title {\n font-weight: 500;\n font-size: 20px;\n line-height: 30px;\n display: flex;\n align-items: center;\n height: calc(", " + ", ");\n }\n\n .drawer__header__actions {\n position: absolute;\n right: ", ";\n top: ", ";\n font-size: 24px;\n }\n }\n\n .drawer__body {\n height: 100%;\n overflow-y: scroll;\n }\n\n .drawer__footer {\n height: 80px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 0 ", ";\n border-top: 1px solid ", ";\n }\n }\n "], ["\n .drawer {\n position: fixed;\n right: 0;\n top: 0;\n height: 100vh;\n width: 500px;\n box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n border-radius: 8px 0 0 8px;\n transform: translateX(110%);\n transition: transform 0.4s ease-in-out;\n z-index: 5;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n\n ", "\n\n .drawer__header {\n padding-right: calc(", " + ", ");\n padding-left: ", ";\n display: flex;\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n\n .drawer__header__title {\n font-weight: 500;\n font-size: 20px;\n line-height: 30px;\n display: flex;\n align-items: center;\n height: calc(", " + ", ");\n }\n\n .drawer__header__actions {\n position: absolute;\n right: ", ";\n top: ", ";\n font-size: 24px;\n }\n }\n\n .drawer__body {\n height: 100%;\n overflow-y: scroll;\n }\n\n .drawer__footer {\n height: 80px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 0 ", ";\n border-top: 1px solid ", ";\n }\n }\n "])), palette.white[100], showHandler(show), spacing.xxxl, spacing.m, spacing.l, palette.grey[50], palette.grey[100], spacing.xxxl, spacing.m, spacing.l, spacing.l, spacing.l, palette.grey[100]);
|
|
559
1023
|
});
|
|
560
|
-
var StyledIcon$
|
|
1024
|
+
var StyledIcon$2 = styled(Icon)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n cursor: pointer;\n &:hover {\n color: ", ";\n"], ["\n cursor: pointer;\n &:hover {\n color: ", ";\n"])), function (_a) {
|
|
561
1025
|
var palette = _a.theme.palette;
|
|
562
1026
|
return palette.grey[800];
|
|
563
1027
|
});
|
|
564
|
-
var templateObject_1$
|
|
1028
|
+
var templateObject_1$e, templateObject_2$4, templateObject_3$3;
|
|
565
1029
|
|
|
566
1030
|
var UnstyledDrawer = /** @class */ (function (_super) {
|
|
567
1031
|
__extends(UnstyledDrawer, _super);
|
|
@@ -577,7 +1041,7 @@ var UnstyledDrawer = /** @class */ (function (_super) {
|
|
|
577
1041
|
renderHeader ? renderHeader() : React.createElement("div", { className: 'drawer__header__title' }, title),
|
|
578
1042
|
React.createElement("div", { className: 'drawer__header__actions' },
|
|
579
1043
|
React.createElement("span", { onClick: actionClose },
|
|
580
|
-
React.createElement(StyledIcon$
|
|
1044
|
+
React.createElement(StyledIcon$2, { icon: faTimes })))),
|
|
581
1045
|
React.createElement("div", { className: 'drawer__body' }, this.props.children),
|
|
582
1046
|
renderFooter ? React.createElement("div", { className: 'drawer__footer' }, renderFooter()) : null));
|
|
583
1047
|
};
|
|
@@ -602,11 +1066,11 @@ var getDropdownItemStyles = function (_a) {
|
|
|
602
1066
|
};
|
|
603
1067
|
};
|
|
604
1068
|
|
|
605
|
-
var ShortcutText = styled.span(templateObject_1$
|
|
1069
|
+
var ShortcutText = styled.span(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n background-color: transparent;\n color: ", ";\n padding: 0 2px 0 2px;\n white-space: nowrap;\n font-size: 12px;\n"], ["\n background-color: transparent;\n color: ", ";\n padding: 0 2px 0 2px;\n white-space: nowrap;\n font-size: 12px;\n"])), function (_a) {
|
|
606
1070
|
var theme = _a.theme;
|
|
607
1071
|
return theme.palette.grey[500];
|
|
608
1072
|
});
|
|
609
|
-
var templateObject_1$
|
|
1073
|
+
var templateObject_1$f;
|
|
610
1074
|
|
|
611
1075
|
var Item = function (_a) {
|
|
612
1076
|
var active = _a.active, className = _a.className, icon = _a.icon, onClick = _a.onClick, shortcut = _a.shortcut, text = _a.text, isDisabled = _a.isDisabled, rest = __rest(_a, ["active", "className", "icon", "onClick", "shortcut", "text", "isDisabled"]);
|
|
@@ -617,7 +1081,7 @@ var Item = function (_a) {
|
|
|
617
1081
|
React.createElement(TextWrapper, null, text),
|
|
618
1082
|
shortcut && React.createElement(ShortcutText, null, shortcut))));
|
|
619
1083
|
};
|
|
620
|
-
var hasActionCss = css(templateObject_1$
|
|
1084
|
+
var hasActionCss = css(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
621
1085
|
var theme = _a.theme;
|
|
622
1086
|
return theme.palette.grey[100];
|
|
623
1087
|
});
|
|
@@ -639,21 +1103,21 @@ var StyledItem = styled.div.attrs(getDropdownItemStyles)(templateObject_2$5 || (
|
|
|
639
1103
|
});
|
|
640
1104
|
var InnerWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n & > * {\n display: inline;\n }\n\n & > svg {\n margin-right: 10px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n & > * {\n display: inline;\n }\n\n & > svg {\n margin-right: 10px;\n }\n"])));
|
|
641
1105
|
var TextWrapper = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1 1 auto;\n"], ["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1 1 auto;\n"])));
|
|
642
|
-
var templateObject_1$
|
|
1106
|
+
var templateObject_1$g, templateObject_2$5, templateObject_3$4, templateObject_4$2;
|
|
643
1107
|
|
|
644
|
-
var StyledDiv = styled.div(templateObject_1$
|
|
1108
|
+
var StyledDiv = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n margin: 8px 0 8px 0;\n display: block;\n height: 1px;\n border: 0;\n border-top: 1px solid ", ";\n padding: 0;\n cursor: initial;\n"], ["\n margin: 8px 0 8px 0;\n display: block;\n height: 1px;\n border: 0;\n border-top: 1px solid ", ";\n padding: 0;\n cursor: initial;\n"])), function (_a) {
|
|
645
1109
|
var theme = _a.theme;
|
|
646
1110
|
return theme.palette.grey[100];
|
|
647
1111
|
});
|
|
648
1112
|
var Separator = function () { return React.createElement(StyledDiv, null); };
|
|
649
|
-
var templateObject_1$
|
|
1113
|
+
var templateObject_1$h;
|
|
650
1114
|
|
|
651
1115
|
var Title = function (props) { return React.createElement(StyledTitle, null, props.text); };
|
|
652
|
-
var StyledTitle = styled.div(templateObject_1$
|
|
1116
|
+
var StyledTitle = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n cursor: initial;\n text-align: left;\n padding: 4px 16px;\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n text-transform: uppercase;\n color: ", ";\n"], ["\n cursor: initial;\n text-align: left;\n padding: 4px 16px;\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n text-transform: uppercase;\n color: ", ";\n"])), function (_a) {
|
|
653
1117
|
var theme = _a.theme;
|
|
654
1118
|
return theme.palette.grey[700];
|
|
655
1119
|
});
|
|
656
|
-
var templateObject_1$
|
|
1120
|
+
var templateObject_1$i;
|
|
657
1121
|
|
|
658
1122
|
var UserListItem = function (props) {
|
|
659
1123
|
var avatarSize = props.avatarSize, img = props.img, noText = props.noText, onClick = props.onClick, placeholder = props.placeholder, renderText = props.renderText, text = props.text;
|
|
@@ -673,13 +1137,13 @@ var UserListItem = function (props) {
|
|
|
673
1137
|
var UserListWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", ";\n\n display: flex;\n padding: 4px 16px;\n align-items: center;\n"], ["\n ",
|
|
674
1138
|
";\n\n display: flex;\n padding: 4px 16px;\n align-items: center;\n"])), function (_a) {
|
|
675
1139
|
var clickable = _a.clickable;
|
|
676
|
-
return clickable && css(templateObject_1$
|
|
1140
|
+
return clickable && css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n "], ["\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n "])), function (_a) {
|
|
677
1141
|
var theme = _a.theme;
|
|
678
1142
|
return theme.palette.grey[100];
|
|
679
1143
|
});
|
|
680
1144
|
});
|
|
681
1145
|
var NameWrapper = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n width: 50px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n flex-grow: 1;\n padding-left: 10px;\n"], ["\n width: 50px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n flex-grow: 1;\n padding-left: 10px;\n"])));
|
|
682
|
-
var templateObject_1$
|
|
1146
|
+
var templateObject_1$j, templateObject_2$6, templateObject_3$5;
|
|
683
1147
|
|
|
684
1148
|
var DefaultDropdown = function (_a) {
|
|
685
1149
|
var closeDropdown = _a.closeDropdown, content = _a.content, fullWidth = _a.fullWidth, maxWidth = _a.maxWidth;
|
|
@@ -687,6 +1151,7 @@ var DefaultDropdown = function (_a) {
|
|
|
687
1151
|
return content.map(function (_a, id) {
|
|
688
1152
|
var onClick = _a.onClick, rest = __rest(_a, ["onClick"]);
|
|
689
1153
|
return (React.createElement(Item, __assign({ fullWidth: fullWidth, maxWidth: maxWidth, key: id, onClick: function (e) {
|
|
1154
|
+
e.stopPropagation();
|
|
690
1155
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
691
1156
|
closeDropdown();
|
|
692
1157
|
} }, rest)));
|
|
@@ -701,22 +1166,25 @@ var DefaultTrigger = function (_a) {
|
|
|
701
1166
|
};
|
|
702
1167
|
|
|
703
1168
|
var DropdownImpl = function (props) {
|
|
704
|
-
var alignRight = props.alignRight, className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, placement = props.placement, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title;
|
|
705
|
-
var
|
|
1169
|
+
var alignRight = props.alignRight, className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, placement = props.placement, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title, _b = props.forceOpen, forceOpen = _b === void 0 ? false : _b;
|
|
1170
|
+
var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
|
|
706
1171
|
var toggleDropdown = useCallback(function (e) {
|
|
707
1172
|
setIsOpen(function (isOpen) { return !isOpen; });
|
|
708
1173
|
e.stopPropagation();
|
|
709
1174
|
}, []);
|
|
710
1175
|
var closeDropdown = useCallback(function () { return setIsOpen(false); }, []);
|
|
1176
|
+
useEffect(function () {
|
|
1177
|
+
setIsOpen(forceOpen);
|
|
1178
|
+
}, [forceOpen]);
|
|
711
1179
|
// Close Dropdown on click outside
|
|
712
1180
|
var wrapperRef = useRef(null);
|
|
713
1181
|
useClickAway(wrapperRef, function () { return closeDropdown(); });
|
|
714
1182
|
var popperRef = useRef(null);
|
|
715
1183
|
var buttonRef = useRef(null);
|
|
716
|
-
var
|
|
1184
|
+
var _d = useState(null), arrowRef = _d[0], setArrowRef = _d[1];
|
|
717
1185
|
// alignRight left for compatibility
|
|
718
1186
|
var popperPlacement = placement ? placement : alignRight ? 'bottom-end' : 'bottom-start';
|
|
719
|
-
var
|
|
1187
|
+
var _e = usePopper(buttonRef.current, popperRef.current, {
|
|
720
1188
|
placement: popperPlacement,
|
|
721
1189
|
strategy: 'fixed',
|
|
722
1190
|
modifiers: useMemo(function () { return [
|
|
@@ -749,19 +1217,19 @@ var DropdownImpl = function (props) {
|
|
|
749
1217
|
},
|
|
750
1218
|
},
|
|
751
1219
|
]; }, [minWidthAsTrigger, arrowRef]),
|
|
752
|
-
}), attributes =
|
|
753
|
-
return (React.createElement(Wrapper$
|
|
1220
|
+
}), attributes = _e.attributes, styles = _e.styles;
|
|
1221
|
+
return (React.createElement(Wrapper$3, { className: className, ref: wrapperRef },
|
|
754
1222
|
React.createElement("div", { style: triggerStyles, ref: buttonRef, onClick: toggleDropdown },
|
|
755
1223
|
title && React.createElement(DefaultTrigger, { title: title }),
|
|
756
1224
|
!title && renderTrigger && renderTrigger()),
|
|
757
|
-
React.createElement(CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
|
|
1225
|
+
React.createElement(CSSTransition, { in: forceOpen || isOpen, timeout: 200, unmountOnExit: true, appear: true },
|
|
758
1226
|
React.createElement(BodyAnimationWrapper, null,
|
|
759
1227
|
React.createElement(PopperContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
|
|
760
1228
|
React.createElement("div", { ref: setArrowRef, style: styles.arrow }),
|
|
761
1229
|
React.createElement("div", { style: styles.offset }, content ? (React.createElement(DefaultWrapper, { fullWidth: fullWidth, maxWidth: maxWidth },
|
|
762
1230
|
React.createElement(DefaultDropdown, { content: content, fullWidth: fullWidth, maxWidth: maxWidth, closeDropdown: closeDropdown }))) : (React.createElement(CustomWrapper, { maxWidth: maxWidth }, renderContent === null || renderContent === void 0 ? void 0 : renderContent(closeDropdown)))))))));
|
|
763
1231
|
};
|
|
764
|
-
var Wrapper$
|
|
1232
|
+
var Wrapper$3 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
765
1233
|
var DefaultWrapper = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n ", ";\n"], ["\n ",
|
|
766
1234
|
";\n"])), function (_a) {
|
|
767
1235
|
var fullWidth = _a.fullWidth, maxWidth = _a.maxWidth;
|
|
@@ -781,7 +1249,7 @@ var PopperContainer = styled.div(templateObject_7$1 || (templateObject_7$1 = __m
|
|
|
781
1249
|
return theme.palette.white[100];
|
|
782
1250
|
});
|
|
783
1251
|
var BodyAnimationWrapper = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n &.enter {\n opacity: 0;\n margin-top: -10px;\n }\n\n &.enter-active {\n opacity: 1;\n margin-top: 0;\n transition: margin-top 200ms, opacity 200ms;\n }\n\n &.exit {\n opacity: 1;\n margin-top: 0;\n }\n\n &.exit-active {\n opacity: 0;\n margin-top: -10px;\n transition: margin-top 200ms, opacity 200ms;\n }\n"], ["\n &.enter {\n opacity: 0;\n margin-top: -10px;\n }\n\n &.enter-active {\n opacity: 1;\n margin-top: 0;\n transition: margin-top 200ms, opacity 200ms;\n }\n\n &.exit {\n opacity: 1;\n margin-top: 0;\n }\n\n &.exit-active {\n opacity: 0;\n margin-top: -10px;\n transition: margin-top 200ms, opacity 200ms;\n }\n"])));
|
|
784
|
-
var templateObject_1$
|
|
1252
|
+
var templateObject_1$k, templateObject_2$7, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
785
1253
|
|
|
786
1254
|
var Dropdown = /** @class */ (function (_super) {
|
|
787
1255
|
__extends(Dropdown, _super);
|
|
@@ -798,22 +1266,59 @@ var Dropdown = /** @class */ (function (_super) {
|
|
|
798
1266
|
return Dropdown;
|
|
799
1267
|
}(Component));
|
|
800
1268
|
|
|
801
|
-
var
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
1269
|
+
var dropdownPalette = {
|
|
1270
|
+
items: {
|
|
1271
|
+
active: {
|
|
1272
|
+
color: defaultPalette.black[100],
|
|
1273
|
+
background: defaultPalette.blue[50],
|
|
1274
|
+
hoverBackground: defaultPalette.grey[100],
|
|
1275
|
+
},
|
|
1276
|
+
notActive: {
|
|
1277
|
+
default: {
|
|
1278
|
+
color: defaultPalette.black[100],
|
|
1279
|
+
background: 'transparent',
|
|
1280
|
+
hoverBackground: defaultPalette.grey[100],
|
|
1281
|
+
},
|
|
1282
|
+
danger: {
|
|
1283
|
+
color: defaultPalette.red[500],
|
|
1284
|
+
background: 'transparent',
|
|
1285
|
+
hoverBackground: defaultPalette.red[50],
|
|
1286
|
+
},
|
|
1287
|
+
success: {
|
|
1288
|
+
color: defaultPalette.green[500],
|
|
1289
|
+
background: 'transparent',
|
|
1290
|
+
hoverBackground: defaultPalette.green[50],
|
|
1291
|
+
},
|
|
1292
|
+
warning: {
|
|
1293
|
+
color: defaultPalette.yellow[500],
|
|
1294
|
+
background: 'transparent',
|
|
1295
|
+
hoverBackground: defaultPalette.yellow[50],
|
|
1296
|
+
},
|
|
1297
|
+
link: {
|
|
1298
|
+
color: defaultPalette.blue[500],
|
|
1299
|
+
background: 'transparent',
|
|
1300
|
+
hoverBackground: defaultPalette.blue[50],
|
|
1301
|
+
},
|
|
1302
|
+
},
|
|
1303
|
+
},
|
|
1304
|
+
};
|
|
1305
|
+
|
|
1306
|
+
var sizeSetter = function (size) {
|
|
1307
|
+
switch (size) {
|
|
1308
|
+
case 'small':
|
|
1309
|
+
return css(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n height: 16px;\n min-width: 16px;\n top: 3px;\n right: 3px;\n "], ["\n height: 16px;\n min-width: 16px;\n top: 3px;\n right: 3px;\n "])));
|
|
1310
|
+
case 'large':
|
|
1311
|
+
return css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n height: 23px;\n min-width: 23px;\n top: -1px;\n right: -1px;\n "], ["\n height: 23px;\n min-width: 23px;\n top: -1px;\n right: -1px;\n "])));
|
|
1312
|
+
case 'medium':
|
|
1313
|
+
default:
|
|
1314
|
+
return css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n height: 20px;\n min-width: 20px;\n top: 1px;\n right: 1px;\n "], ["\n height: 20px;\n min-width: 20px;\n top: 1px;\n right: 1px;\n "])));
|
|
1315
|
+
}
|
|
1316
|
+
};
|
|
1317
|
+
var fontSetter = function (size) {
|
|
1318
|
+
switch (size) {
|
|
1319
|
+
case 'small':
|
|
1320
|
+
return css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 15px;\n "], ["\n font-size: 12px;\n line-height: 15px;\n "])));
|
|
1321
|
+
case 'large':
|
|
817
1322
|
return css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 20px;\n "], ["\n font-size: 14px;\n line-height: 20px;\n "])));
|
|
818
1323
|
case 'medium':
|
|
819
1324
|
default:
|
|
@@ -836,7 +1341,7 @@ var FloatingBadge = styled.span(templateObject_7$2 || (templateObject_7$2 = __ma
|
|
|
836
1341
|
var size = _a.size;
|
|
837
1342
|
return fontSetter(size);
|
|
838
1343
|
});
|
|
839
|
-
var templateObject_1$
|
|
1344
|
+
var templateObject_1$l, templateObject_2$8, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$2;
|
|
840
1345
|
|
|
841
1346
|
var WithBadge = function (props) {
|
|
842
1347
|
var children = props.children, rest = __rest(props, ["children"]);
|
|
@@ -844,8 +1349,8 @@ var WithBadge = function (props) {
|
|
|
844
1349
|
children,
|
|
845
1350
|
!rest.isDisabled && React.createElement(FloatingBadge, __assign({}, rest))));
|
|
846
1351
|
};
|
|
847
|
-
var WithBadgeWrapper = styled.div(templateObject_1$
|
|
848
|
-
var templateObject_1$
|
|
1352
|
+
var WithBadgeWrapper = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: inline-block;\n position: relative;\n"], ["\n display: inline-block;\n position: relative;\n"])));
|
|
1353
|
+
var templateObject_1$m;
|
|
849
1354
|
|
|
850
1355
|
var ItemElement = function (props) {
|
|
851
1356
|
var action = props.action, active = props.active, icon = props.icon, index = props.index, mouseBlockedProps = props.mouseBlockedProps, navigable = props.navigable, onClick = props.onClick, onMouseHover = props.onMouseHover, onMouseOut = props.onMouseOut, placeholder = props.placeholder, showActionOnHover = props.showActionOnHover, title = props.title, wrapperRef = props.wrapperRef;
|
|
@@ -925,7 +1430,7 @@ var ItemElement = function (props) {
|
|
|
925
1430
|
title ? React.createElement(Title$1, null, title) : React.createElement(Placeholder, null, placeholder),
|
|
926
1431
|
action && React.createElement(RightElement, null, action)));
|
|
927
1432
|
};
|
|
928
|
-
var Title$1 = styled.div(templateObject_1$
|
|
1433
|
+
var Title$1 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex-grow: 1;\n"], ["\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex-grow: 1;\n"])));
|
|
929
1434
|
var Placeholder = styled(Title$1)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
930
1435
|
var theme = _a.theme;
|
|
931
1436
|
return theme.palette.grey[500];
|
|
@@ -953,7 +1458,7 @@ var SingleElement = styled.div(templateObject_7$3 || (templateObject_7$3 = __mak
|
|
|
953
1458
|
return showActionOnHover
|
|
954
1459
|
? css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n ", " {\n display: none;\n }\n\n &:focus {\n ", " {\n display: inherit;\n }\n }\n "], ["\n ", " {\n display: none;\n }\n\n &:focus {\n ", " {\n display: inherit;\n }\n }\n "])), RightElement, RightElement) : css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject([""], [""])));
|
|
955
1460
|
});
|
|
956
|
-
var templateObject_1$
|
|
1461
|
+
var templateObject_1$n, templateObject_2$9, templateObject_3$8, templateObject_4$5, templateObject_5$3, templateObject_6$3, templateObject_7$3;
|
|
957
1462
|
|
|
958
1463
|
var TitleElement = function (props) {
|
|
959
1464
|
var noResults = props.noResults, title = props.title;
|
|
@@ -965,7 +1470,7 @@ var TitleElementWrapper = styled.div(templateObject_2$a || (templateObject_2$a =
|
|
|
965
1470
|
";\n height: 32px;\n padding-left: 8px;\n line-height: 32px;\n font-size: 11px;\n\n color: ", ";\n font-weight: 500;\n cursor: initial;\n"])), function (_a) {
|
|
966
1471
|
var noResults = _a.noResults, theme = _a.theme;
|
|
967
1472
|
return noResults === true
|
|
968
|
-
? css(templateObject_1$
|
|
1473
|
+
? css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), theme.palette.grey[50]) : undefined;
|
|
969
1474
|
}, function (_a) {
|
|
970
1475
|
var theme = _a.theme;
|
|
971
1476
|
return theme.palette.grey[700];
|
|
@@ -974,7 +1479,7 @@ var NoResultsWrapper = styled.span(templateObject_3$9 || (templateObject_3$9 = _
|
|
|
974
1479
|
var theme = _a.theme;
|
|
975
1480
|
return theme.palette.grey[700];
|
|
976
1481
|
});
|
|
977
|
-
var templateObject_1$
|
|
1482
|
+
var templateObject_1$o, templateObject_2$a, templateObject_3$9;
|
|
978
1483
|
|
|
979
1484
|
var GroupElement = function (_a) {
|
|
980
1485
|
var index = _a.index, items = _a.items, title = _a.title, rest = __rest(_a, ["index", "items", "title"]);
|
|
@@ -1024,28 +1529,28 @@ var GroupedList = function (props) {
|
|
|
1024
1529
|
}); }, [mouseBlocked, setMouseBlocked]);
|
|
1025
1530
|
var wrapperRef = useRef(null);
|
|
1026
1531
|
var i = 1;
|
|
1027
|
-
return (React.createElement(Wrapper$
|
|
1532
|
+
return (React.createElement(Wrapper$4, { style: wrapperStyle, ref: wrapperRef, className: className }, groups.map(function (group, index) {
|
|
1028
1533
|
var oldI = i;
|
|
1029
1534
|
i += group.items.length;
|
|
1030
1535
|
return (React.createElement(GroupElement, __assign({ key: index }, group, { mouseBlockedProps: mouseBlockedProps, navigable: navigable, index: oldI, wrapperRef: wrapperRef, placeholder: placeholder })));
|
|
1031
1536
|
})));
|
|
1032
1537
|
};
|
|
1033
|
-
var Wrapper$
|
|
1034
|
-
var templateObject_1$
|
|
1538
|
+
var Wrapper$4 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
1539
|
+
var templateObject_1$p;
|
|
1035
1540
|
|
|
1036
1541
|
var Label$1 = styled.span(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: inline-block;\n font-size: 14px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n margin-left: 8px;\n vertical-align: top;\n cursor: pointer;\n ", "\n"], ["\n display: inline-block;\n font-size: 14px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n margin-left: 8px;\n vertical-align: top;\n cursor: pointer;\n ",
|
|
1037
1542
|
"\n"])), function (_a) {
|
|
1038
1543
|
var isDisabled = _a.isDisabled, palette = _a.theme.palette;
|
|
1039
|
-
return isDisabled && css(templateObject_1$
|
|
1544
|
+
return isDisabled && css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n color: ", ";\n cursor: not-allowed;\n "], ["\n color: ", ";\n cursor: not-allowed;\n "])), palette.grey[500]);
|
|
1040
1545
|
});
|
|
1041
|
-
var templateObject_1$
|
|
1546
|
+
var templateObject_1$q, templateObject_2$b;
|
|
1042
1547
|
|
|
1043
1548
|
var Radio = styled.span(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n display: inline-block;\n border-radius: 8px;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n cursor: pointer;\n ", "\n ", "\n ", "\n"], ["\n display: inline-block;\n border-radius: 8px;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n cursor: pointer;\n ",
|
|
1044
1549
|
"\n ",
|
|
1045
1550
|
"\n ",
|
|
1046
1551
|
"\n"])), function (_a) {
|
|
1047
1552
|
var theme = _a.theme;
|
|
1048
|
-
return css(templateObject_1$
|
|
1553
|
+
return css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n "], ["\n background-color: ", ";\n border: 1px solid ", ";\n "])), theme.palette.white[100], theme.palette.grey[500]);
|
|
1049
1554
|
}, function (_a) {
|
|
1050
1555
|
var isChecked = _a.isChecked, theme = _a.theme;
|
|
1051
1556
|
return isChecked && css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n border: 5px solid ", ";\n "], ["\n border: 5px solid ", ";\n "])), theme.palette.blue[500]);
|
|
@@ -1054,7 +1559,7 @@ var Radio = styled.span(templateObject_5$4 || (templateObject_5$4 = __makeTempla
|
|
|
1054
1559
|
return isDisabled && css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n cursor: not-allowed;\n ", "\n "], ["\n background-color: ", ";\n border-color: ", ";\n cursor: not-allowed;\n ",
|
|
1055
1560
|
"\n "])), theme.palette.grey[100], theme.palette.grey[100], isChecked && css(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n "], ["\n background-color: ", ";\n border-color: ", ";\n "])), theme.palette.white[100], theme.palette.grey['50']));
|
|
1056
1561
|
});
|
|
1057
|
-
var templateObject_1$
|
|
1562
|
+
var templateObject_1$r, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4;
|
|
1058
1563
|
|
|
1059
1564
|
var WrapperRadioButton = function (props) {
|
|
1060
1565
|
var isChecked = props.isChecked, isDisabled = props.isDisabled, label = props.label;
|
|
@@ -1062,14 +1567,14 @@ var WrapperRadioButton = function (props) {
|
|
|
1062
1567
|
React.createElement(Radio, { isChecked: props.isChecked, isDisabled: props.isDisabled }),
|
|
1063
1568
|
React.createElement(Label$1, { isDisabled: props.isDisabled }, props.label)))));
|
|
1064
1569
|
};
|
|
1065
|
-
var Wrapper$
|
|
1570
|
+
var Wrapper$5 = styled(WrapperRadioButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n & + & {\n margin-top: ", "px;\n }\n ", "\n"], ["\n & + & {\n margin-top: ", "px;\n }\n ",
|
|
1066
1571
|
"\n"])), function (props) { return (props.optionsSpacing ? props.optionsSpacing : 0); }, function (props) {
|
|
1067
|
-
return props.inline && css(templateObject_1$
|
|
1572
|
+
return props.inline && css(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: inline-block;\n vertical-align: top;\n &:not(:first-child) {\n margin-left: 25px;\n }\n "], ["\n display: inline-block;\n vertical-align: top;\n &:not(:first-child) {\n margin-left: 25px;\n }\n "])));
|
|
1068
1573
|
});
|
|
1069
1574
|
var RadioButton = function (props) {
|
|
1070
|
-
return React.createElement(Wrapper$
|
|
1575
|
+
return React.createElement(Wrapper$5, __assign({}, props));
|
|
1071
1576
|
};
|
|
1072
|
-
var templateObject_1$
|
|
1577
|
+
var templateObject_1$s, templateObject_2$d;
|
|
1073
1578
|
|
|
1074
1579
|
var RadioButtonGroup = function (props) { return (React.createElement("div", { style: props.style }, props.options.map(function (o) { return (React.createElement(RadioButton, { key: o.key, label: o.label, onClick: function () {
|
|
1075
1580
|
if (props.onClick) {
|
|
@@ -1077,218 +1582,6 @@ var RadioButtonGroup = function (props) { return (React.createElement("div", { s
|
|
|
1077
1582
|
}
|
|
1078
1583
|
}, isChecked: props.value === o.key, isDisabled: props.isDisabled, renderOption: props.renderOption, optionsSpacing: props.optionsSpacing, inline: props.inline })); }))); };
|
|
1079
1584
|
|
|
1080
|
-
var iconSizeMap = {
|
|
1081
|
-
xs: '.75em',
|
|
1082
|
-
sm: '.875em',
|
|
1083
|
-
lg: '1.33em',
|
|
1084
|
-
'1x': '1em',
|
|
1085
|
-
'2x': '2em',
|
|
1086
|
-
'3x': '3em',
|
|
1087
|
-
'4x': '4em',
|
|
1088
|
-
'5x': '5em',
|
|
1089
|
-
'6x': '6em',
|
|
1090
|
-
'7x': '7em',
|
|
1091
|
-
'8x': '8em',
|
|
1092
|
-
'9x': '9em',
|
|
1093
|
-
'10x': '10em',
|
|
1094
|
-
};
|
|
1095
|
-
|
|
1096
|
-
var IconBackground = function (_a) {
|
|
1097
|
-
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
1098
|
-
return React.createElement(Wrapper$5, __assign({}, rest), children);
|
|
1099
|
-
};
|
|
1100
|
-
var circleBackgroundScaleFactor = 1.5;
|
|
1101
|
-
var Wrapper$5 = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n\n min-width: calc(", " * ", ");\n min-height: calc(", " * ", ");\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n"], ["\n background-color: ",
|
|
1102
|
-
";\n border-radius: 50%;\n\n min-width: calc(", " * ", ");\n min-height: calc(", " * ", ");\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n"])), function (_a) {
|
|
1103
|
-
var theme = _a.theme, color = _a.color, backgroundColor = _a.backgroundColor;
|
|
1104
|
-
return backgroundColor || theme.components.iconBackground[color] || 'transparent';
|
|
1105
|
-
}, circleBackgroundScaleFactor, function (_a) {
|
|
1106
|
-
var size = _a.size;
|
|
1107
|
-
return iconSizeMap[size];
|
|
1108
|
-
}, circleBackgroundScaleFactor, function (_a) {
|
|
1109
|
-
var size = _a.size;
|
|
1110
|
-
return iconSizeMap[size];
|
|
1111
|
-
});
|
|
1112
|
-
var templateObject_1$s;
|
|
1113
|
-
|
|
1114
|
-
var black = {
|
|
1115
|
-
8: 'rgba(51, 51, 51, 0.08)',
|
|
1116
|
-
16: 'rgba(51, 51, 51, 0.16)',
|
|
1117
|
-
48: 'rgba(51, 51, 51, 0.48)',
|
|
1118
|
-
80: 'rgba(51, 51, 51, 0.8)',
|
|
1119
|
-
100: '#333333',
|
|
1120
|
-
};
|
|
1121
|
-
|
|
1122
|
-
var blue = {
|
|
1123
|
-
900: '#0028AD',
|
|
1124
|
-
800: '#0038B9',
|
|
1125
|
-
700: '#0041C0',
|
|
1126
|
-
600: '#004BC7',
|
|
1127
|
-
500: '#0052CC',
|
|
1128
|
-
400: '#266CD4',
|
|
1129
|
-
300: '#4D86DB',
|
|
1130
|
-
200: '#80A9E6',
|
|
1131
|
-
100: '#B3CBF0',
|
|
1132
|
-
50: '#E0EAF9',
|
|
1133
|
-
};
|
|
1134
|
-
|
|
1135
|
-
var cyan = {
|
|
1136
|
-
900: '#066552',
|
|
1137
|
-
800: '#088C72',
|
|
1138
|
-
700: '#0AA989',
|
|
1139
|
-
600: '#0BC09C',
|
|
1140
|
-
500: '#0DD5AD',
|
|
1141
|
-
400: '#4DE0C2',
|
|
1142
|
-
300: '#7DE8D3',
|
|
1143
|
-
200: '#A4EFE0',
|
|
1144
|
-
100: '#C6F5EB',
|
|
1145
|
-
50: '#E4FAF5',
|
|
1146
|
-
};
|
|
1147
|
-
|
|
1148
|
-
var fuchsia = {
|
|
1149
|
-
900: '#500663',
|
|
1150
|
-
800: '#71088B',
|
|
1151
|
-
700: '#880AA8',
|
|
1152
|
-
600: '#9C0BC0',
|
|
1153
|
-
500: '#AD0DD5',
|
|
1154
|
-
400: '#CB67E4',
|
|
1155
|
-
300: '#DB94EC',
|
|
1156
|
-
200: '#E6B6F2',
|
|
1157
|
-
100: '#EFD2F7',
|
|
1158
|
-
50: '#F7E9FB',
|
|
1159
|
-
};
|
|
1160
|
-
|
|
1161
|
-
var green = {
|
|
1162
|
-
900: '#00572E',
|
|
1163
|
-
800: '#006A3F',
|
|
1164
|
-
700: '#007448',
|
|
1165
|
-
600: '#007F52',
|
|
1166
|
-
500: '#00875A',
|
|
1167
|
-
400: '#269973',
|
|
1168
|
-
300: '#4DAB8C',
|
|
1169
|
-
200: '#80C3AD',
|
|
1170
|
-
100: '#B3DBCE',
|
|
1171
|
-
50: '#E0F1EB',
|
|
1172
|
-
};
|
|
1173
|
-
|
|
1174
|
-
var grey = {
|
|
1175
|
-
900: '#091E42',
|
|
1176
|
-
800: '#253858',
|
|
1177
|
-
700: '#505F79',
|
|
1178
|
-
600: '#5E6C84',
|
|
1179
|
-
500: '#6B778C',
|
|
1180
|
-
400: '#7A869A',
|
|
1181
|
-
300: '#A5ADBA',
|
|
1182
|
-
200: '#C1C7D0',
|
|
1183
|
-
100: '#EBECF0',
|
|
1184
|
-
50: '#FAFBFC',
|
|
1185
|
-
};
|
|
1186
|
-
|
|
1187
|
-
var indigo = {
|
|
1188
|
-
900: '#05175E',
|
|
1189
|
-
800: '#082188',
|
|
1190
|
-
700: '#0A29A6',
|
|
1191
|
-
600: '#0B2FBF',
|
|
1192
|
-
500: '#0D35D5',
|
|
1193
|
-
400: '#637CE3',
|
|
1194
|
-
300: '#90A3EB',
|
|
1195
|
-
200: '#B3BFF1',
|
|
1196
|
-
100: '#D0D7F6',
|
|
1197
|
-
50: '#E8ECFB',
|
|
1198
|
-
};
|
|
1199
|
-
|
|
1200
|
-
var orange = {
|
|
1201
|
-
900: '#783722',
|
|
1202
|
-
800: '#A74D2F',
|
|
1203
|
-
700: '#CA5D39',
|
|
1204
|
-
600: '#E66A42',
|
|
1205
|
-
500: '#FF7649',
|
|
1206
|
-
400: '#FF9978',
|
|
1207
|
-
300: '#FFB49B',
|
|
1208
|
-
200: '#FFCAB9',
|
|
1209
|
-
100: '#FFDED3',
|
|
1210
|
-
50: '#FFEFEA',
|
|
1211
|
-
};
|
|
1212
|
-
|
|
1213
|
-
var pink = {
|
|
1214
|
-
900: '#640648',
|
|
1215
|
-
800: '#8C0864',
|
|
1216
|
-
700: '#A80A79',
|
|
1217
|
-
600: '#C00B8A',
|
|
1218
|
-
500: '#D50D99',
|
|
1219
|
-
400: '#E569BF',
|
|
1220
|
-
300: '#EC96D2',
|
|
1221
|
-
200: '#F2B7E0',
|
|
1222
|
-
100: '#F7D2EC',
|
|
1223
|
-
50: '#FBEAF6',
|
|
1224
|
-
};
|
|
1225
|
-
|
|
1226
|
-
var red = {
|
|
1227
|
-
900: '#C81603',
|
|
1228
|
-
800: '#D12206',
|
|
1229
|
-
700: '#D52808',
|
|
1230
|
-
600: '#DA300A',
|
|
1231
|
-
500: '#DE350B',
|
|
1232
|
-
400: '#E35330',
|
|
1233
|
-
300: '#E87254',
|
|
1234
|
-
200: '#EF9A85',
|
|
1235
|
-
100: '#F5C2B6',
|
|
1236
|
-
50: '#FBE7E2',
|
|
1237
|
-
};
|
|
1238
|
-
|
|
1239
|
-
var white = {
|
|
1240
|
-
8: 'rgba(255, 255, 255, 0.08)',
|
|
1241
|
-
16: 'rgba(255, 255, 255, 0.16)',
|
|
1242
|
-
48: 'rgba(255, 255, 255, 0.48)',
|
|
1243
|
-
80: 'rgba(255, 255, 255, 0.8)',
|
|
1244
|
-
100: '#FFFFFF',
|
|
1245
|
-
};
|
|
1246
|
-
|
|
1247
|
-
var yellow = {
|
|
1248
|
-
900: '#FF6B0A',
|
|
1249
|
-
800: '#FF7C12',
|
|
1250
|
-
700: '#FF8617',
|
|
1251
|
-
600: '#FF911B',
|
|
1252
|
-
500: '#FF991F',
|
|
1253
|
-
400: '#FFA841',
|
|
1254
|
-
300: '#FFB862',
|
|
1255
|
-
200: '#FFCC8F',
|
|
1256
|
-
100: '#FFE0BC',
|
|
1257
|
-
50: '#FFF3E4',
|
|
1258
|
-
};
|
|
1259
|
-
|
|
1260
|
-
var defaultPalette = {
|
|
1261
|
-
black: black,
|
|
1262
|
-
white: white,
|
|
1263
|
-
grey: grey,
|
|
1264
|
-
blue: blue,
|
|
1265
|
-
indigo: indigo,
|
|
1266
|
-
yellow: yellow,
|
|
1267
|
-
orange: orange,
|
|
1268
|
-
red: red,
|
|
1269
|
-
green: green,
|
|
1270
|
-
fuchsia: fuchsia,
|
|
1271
|
-
pink: pink,
|
|
1272
|
-
cyan: cyan,
|
|
1273
|
-
primary: blue,
|
|
1274
|
-
};
|
|
1275
|
-
|
|
1276
|
-
var iconBackgroundPalette = {
|
|
1277
|
-
blue: defaultPalette.blue[50],
|
|
1278
|
-
indigo: defaultPalette.indigo[50],
|
|
1279
|
-
yellow: defaultPalette.yellow[50],
|
|
1280
|
-
orange: defaultPalette.orange[50],
|
|
1281
|
-
red: defaultPalette.red[50],
|
|
1282
|
-
green: defaultPalette.green[50],
|
|
1283
|
-
fuchsia: defaultPalette.fuchsia[50],
|
|
1284
|
-
pink: defaultPalette.pink[50],
|
|
1285
|
-
cyan: defaultPalette.cyan[50],
|
|
1286
|
-
primary: defaultPalette.primary[50],
|
|
1287
|
-
grey: defaultPalette.grey[100],
|
|
1288
|
-
white: defaultPalette.white[16],
|
|
1289
|
-
black: defaultPalette.black[16],
|
|
1290
|
-
};
|
|
1291
|
-
|
|
1292
1585
|
var colorSetter = function (type, theme) {
|
|
1293
1586
|
switch (type) {
|
|
1294
1587
|
case 'standard': {
|
|
@@ -1485,315 +1778,116 @@ var InputText = function (props) {
|
|
|
1485
1778
|
description && !error ? React.createElement(DescriptionMessage, null, description.message) : null));
|
|
1486
1779
|
};
|
|
1487
1780
|
|
|
1488
|
-
var
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1781
|
+
var renderTrigger = function () { return (React.createElement(IconWrapper, { tabIndex: 0 },
|
|
1782
|
+
React.createElement(Icon, { icon: faEllipsisH, fixedWidth: true }))); };
|
|
1783
|
+
var IconWrapper = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
1784
|
+
var triggerStyles = {
|
|
1785
|
+
margin: 'auto',
|
|
1786
|
+
};
|
|
1787
|
+
var SidebarItemDropdown = function (_a) {
|
|
1788
|
+
var className = _a.className, content = _a.content;
|
|
1789
|
+
return (React.createElement(Dropdown, { triggerStyles: triggerStyles, className: className, placement: 'right-start', renderTrigger: renderTrigger, content: content }));
|
|
1790
|
+
};
|
|
1791
|
+
var templateObject_1$y;
|
|
1492
1792
|
|
|
1493
|
-
var
|
|
1494
|
-
var
|
|
1495
|
-
return
|
|
1793
|
+
var SidebarItemCaret = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n transition: transform 250ms ease;\n transform: ", ";\n\n visibility: ", ";\n"], ["\n transition: transform 250ms ease;\n transform: ", ";\n\n visibility: ", ";\n"])), function (_a) {
|
|
1794
|
+
var isOpen = _a.isOpen;
|
|
1795
|
+
return (isOpen ? 'rotate(90deg)' : 'rotate(0deg)');
|
|
1496
1796
|
}, function (_a) {
|
|
1497
|
-
var
|
|
1498
|
-
return
|
|
1797
|
+
var isVisible = _a.isVisible;
|
|
1798
|
+
return (isVisible ? 'visible' : 'hidden');
|
|
1499
1799
|
});
|
|
1500
|
-
var templateObject_1$
|
|
1501
|
-
|
|
1502
|
-
var MicroTag = function (_a) {
|
|
1503
|
-
var text = _a.text, type = _a.type;
|
|
1504
|
-
return React.createElement(MicroTagBody, { type: type }, text);
|
|
1505
|
-
};
|
|
1506
|
-
|
|
1507
|
-
var buttonPalette = {
|
|
1508
|
-
primary: {
|
|
1509
|
-
blue: {
|
|
1510
|
-
normal: defaultPalette.blue[500],
|
|
1511
|
-
hover: defaultPalette.blue[700],
|
|
1512
|
-
active: defaultPalette.blue[900],
|
|
1513
|
-
text: defaultPalette.white[100],
|
|
1514
|
-
textHover: defaultPalette.grey[100],
|
|
1515
|
-
},
|
|
1516
|
-
red: {
|
|
1517
|
-
normal: defaultPalette.red[500],
|
|
1518
|
-
hover: defaultPalette.red[700],
|
|
1519
|
-
active: defaultPalette.red[900],
|
|
1520
|
-
text: defaultPalette.white[100],
|
|
1521
|
-
textHover: defaultPalette.grey[100],
|
|
1522
|
-
},
|
|
1523
|
-
green: {
|
|
1524
|
-
normal: defaultPalette.green[500],
|
|
1525
|
-
hover: defaultPalette.green[700],
|
|
1526
|
-
active: defaultPalette.green[900],
|
|
1527
|
-
text: defaultPalette.white[100],
|
|
1528
|
-
textHover: defaultPalette.grey[100],
|
|
1529
|
-
},
|
|
1530
|
-
grey: {
|
|
1531
|
-
normal: defaultPalette.white[100],
|
|
1532
|
-
hover: defaultPalette.grey[100],
|
|
1533
|
-
active: defaultPalette.grey[200],
|
|
1534
|
-
text: defaultPalette.black[100],
|
|
1535
|
-
textHover: defaultPalette.black[100],
|
|
1536
|
-
},
|
|
1537
|
-
yellow: {
|
|
1538
|
-
normal: defaultPalette.yellow[500],
|
|
1539
|
-
hover: defaultPalette.yellow[700],
|
|
1540
|
-
active: defaultPalette.yellow[900],
|
|
1541
|
-
text: defaultPalette.white[100],
|
|
1542
|
-
textHover: defaultPalette.grey[100],
|
|
1543
|
-
},
|
|
1544
|
-
disabled: {
|
|
1545
|
-
normal: defaultPalette.grey[50],
|
|
1546
|
-
hover: defaultPalette.grey[50],
|
|
1547
|
-
active: defaultPalette.grey[50],
|
|
1548
|
-
text: defaultPalette.grey[200],
|
|
1549
|
-
textHover: defaultPalette.grey[200],
|
|
1550
|
-
},
|
|
1551
|
-
},
|
|
1552
|
-
secondary: {
|
|
1553
|
-
blue: {
|
|
1554
|
-
normal: defaultPalette.blue[50],
|
|
1555
|
-
hover: defaultPalette.blue[100],
|
|
1556
|
-
active: defaultPalette.blue[200],
|
|
1557
|
-
text: defaultPalette.blue[900],
|
|
1558
|
-
textHover: defaultPalette.blue[900],
|
|
1559
|
-
},
|
|
1560
|
-
red: {
|
|
1561
|
-
normal: defaultPalette.red[50],
|
|
1562
|
-
hover: defaultPalette.red[100],
|
|
1563
|
-
active: defaultPalette.red[200],
|
|
1564
|
-
text: defaultPalette.red[900],
|
|
1565
|
-
textHover: defaultPalette.red[900],
|
|
1566
|
-
},
|
|
1567
|
-
green: {
|
|
1568
|
-
normal: defaultPalette.green[50],
|
|
1569
|
-
hover: defaultPalette.green[100],
|
|
1570
|
-
active: defaultPalette.green[200],
|
|
1571
|
-
text: defaultPalette.green[900],
|
|
1572
|
-
textHover: defaultPalette.green[900],
|
|
1573
|
-
},
|
|
1574
|
-
yellow: {
|
|
1575
|
-
normal: defaultPalette.yellow[50],
|
|
1576
|
-
hover: defaultPalette.yellow[100],
|
|
1577
|
-
active: defaultPalette.yellow[200],
|
|
1578
|
-
text: defaultPalette.yellow[900],
|
|
1579
|
-
textHover: defaultPalette.yellow[900],
|
|
1580
|
-
},
|
|
1581
|
-
grey: {
|
|
1582
|
-
normal: defaultPalette.grey[50],
|
|
1583
|
-
hover: defaultPalette.grey[100],
|
|
1584
|
-
active: defaultPalette.grey[200],
|
|
1585
|
-
text: defaultPalette.black[100],
|
|
1586
|
-
textHover: defaultPalette.black[100],
|
|
1587
|
-
},
|
|
1588
|
-
disabled: {
|
|
1589
|
-
normal: defaultPalette.grey[50],
|
|
1590
|
-
hover: defaultPalette.grey[50],
|
|
1591
|
-
active: defaultPalette.grey[50],
|
|
1592
|
-
text: defaultPalette.grey[200],
|
|
1593
|
-
textHover: defaultPalette.grey[200],
|
|
1594
|
-
},
|
|
1595
|
-
},
|
|
1596
|
-
text: {
|
|
1597
|
-
blue: {
|
|
1598
|
-
normal: 'transparent',
|
|
1599
|
-
hover: 'transparent',
|
|
1600
|
-
active: 'transparent',
|
|
1601
|
-
text: defaultPalette.blue[500],
|
|
1602
|
-
textHover: defaultPalette.blue[500],
|
|
1603
|
-
},
|
|
1604
|
-
red: {
|
|
1605
|
-
normal: 'transparent',
|
|
1606
|
-
hover: 'transparent',
|
|
1607
|
-
active: 'transparent',
|
|
1608
|
-
text: defaultPalette.red[500],
|
|
1609
|
-
textHover: defaultPalette.red[500],
|
|
1610
|
-
},
|
|
1611
|
-
green: {
|
|
1612
|
-
normal: 'transparent',
|
|
1613
|
-
hover: 'transparent',
|
|
1614
|
-
active: 'transparent',
|
|
1615
|
-
text: defaultPalette.green[500],
|
|
1616
|
-
textHover: defaultPalette.green[500],
|
|
1617
|
-
},
|
|
1618
|
-
grey: {
|
|
1619
|
-
normal: 'transparent',
|
|
1620
|
-
hover: 'transparent',
|
|
1621
|
-
active: 'transparent',
|
|
1622
|
-
text: defaultPalette.grey[500],
|
|
1623
|
-
textHover: defaultPalette.grey[500],
|
|
1624
|
-
},
|
|
1625
|
-
yellow: {
|
|
1626
|
-
normal: 'transparent',
|
|
1627
|
-
hover: 'transparent',
|
|
1628
|
-
active: 'transparent',
|
|
1629
|
-
text: defaultPalette.yellow[500],
|
|
1630
|
-
textHover: defaultPalette.yellow[500],
|
|
1631
|
-
},
|
|
1632
|
-
disabled: {
|
|
1633
|
-
normal: 'transparent',
|
|
1634
|
-
hover: 'transparent',
|
|
1635
|
-
active: 'transparent',
|
|
1636
|
-
text: defaultPalette.grey[200],
|
|
1637
|
-
textHover: defaultPalette.grey[200],
|
|
1638
|
-
},
|
|
1639
|
-
},
|
|
1640
|
-
defaultType: 'primary',
|
|
1641
|
-
defaultColor: 'blue',
|
|
1642
|
-
defaultSize: 'medium',
|
|
1643
|
-
};
|
|
1644
|
-
|
|
1645
|
-
var iconButtonPalette = {
|
|
1646
|
-
primary: {
|
|
1647
|
-
blue: {
|
|
1648
|
-
normal: defaultPalette.blue[200],
|
|
1649
|
-
hover: defaultPalette.blue[500],
|
|
1650
|
-
},
|
|
1651
|
-
red: {
|
|
1652
|
-
normal: defaultPalette.red[200],
|
|
1653
|
-
hover: defaultPalette.red[500],
|
|
1654
|
-
},
|
|
1655
|
-
green: {
|
|
1656
|
-
normal: defaultPalette.green[200],
|
|
1657
|
-
hover: defaultPalette.green[500],
|
|
1658
|
-
},
|
|
1659
|
-
yellow: {
|
|
1660
|
-
normal: defaultPalette.yellow[200],
|
|
1661
|
-
hover: defaultPalette.yellow[500],
|
|
1662
|
-
},
|
|
1663
|
-
disabled: {
|
|
1664
|
-
normal: defaultPalette.grey[200],
|
|
1665
|
-
hover: defaultPalette.grey[200],
|
|
1666
|
-
},
|
|
1667
|
-
},
|
|
1668
|
-
secondary: {
|
|
1669
|
-
blue: {
|
|
1670
|
-
normal: defaultPalette.blue[200],
|
|
1671
|
-
hover: defaultPalette.white[100],
|
|
1672
|
-
},
|
|
1673
|
-
red: {
|
|
1674
|
-
normal: defaultPalette.red[200],
|
|
1675
|
-
hover: defaultPalette.white[100],
|
|
1676
|
-
},
|
|
1677
|
-
green: {
|
|
1678
|
-
normal: defaultPalette.green[200],
|
|
1679
|
-
hover: defaultPalette.white[100],
|
|
1680
|
-
},
|
|
1681
|
-
yellow: {
|
|
1682
|
-
normal: defaultPalette.yellow[200],
|
|
1683
|
-
hover: defaultPalette.white[100],
|
|
1684
|
-
},
|
|
1685
|
-
disabled: {
|
|
1686
|
-
normal: defaultPalette.grey[200],
|
|
1687
|
-
hover: defaultPalette.grey[200],
|
|
1688
|
-
},
|
|
1689
|
-
},
|
|
1690
|
-
defaultType: 'primary',
|
|
1691
|
-
defaultColor: 'blue',
|
|
1692
|
-
};
|
|
1693
|
-
|
|
1694
|
-
var normalChecked = {
|
|
1695
|
-
tickColor: defaultPalette.white[100],
|
|
1696
|
-
backgroundColor: defaultPalette.blue[500],
|
|
1697
|
-
borderColor: defaultPalette.blue[500],
|
|
1698
|
-
};
|
|
1699
|
-
var errorChecked = {
|
|
1700
|
-
tickColor: defaultPalette.white[100],
|
|
1701
|
-
backgroundColor: defaultPalette.red[500],
|
|
1702
|
-
borderColor: defaultPalette.red[500],
|
|
1703
|
-
};
|
|
1704
|
-
var checkboxPalette = {
|
|
1705
|
-
input: {
|
|
1706
|
-
normal: {
|
|
1707
|
-
checked: normalChecked,
|
|
1708
|
-
indeterminate: normalChecked,
|
|
1709
|
-
unchecked: {
|
|
1710
|
-
tickColor: defaultPalette.white[100],
|
|
1711
|
-
backgroundColor: 'transparent',
|
|
1712
|
-
borderColor: defaultPalette.grey[500],
|
|
1713
|
-
},
|
|
1714
|
-
},
|
|
1715
|
-
error: {
|
|
1716
|
-
checked: errorChecked,
|
|
1717
|
-
indeterminate: errorChecked,
|
|
1718
|
-
unchecked: {
|
|
1719
|
-
tickColor: defaultPalette.white[100],
|
|
1720
|
-
backgroundColor: 'transparent',
|
|
1721
|
-
borderColor: defaultPalette.red[500],
|
|
1722
|
-
},
|
|
1723
|
-
},
|
|
1724
|
-
},
|
|
1725
|
-
label: {
|
|
1726
|
-
normal: defaultPalette.black[100],
|
|
1727
|
-
error: defaultPalette.red[500],
|
|
1728
|
-
},
|
|
1729
|
-
};
|
|
1800
|
+
var templateObject_1$z;
|
|
1730
1801
|
|
|
1731
|
-
var
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
background: defaultPalette.blue[50],
|
|
1736
|
-
hoverBackground: defaultPalette.grey[100],
|
|
1737
|
-
},
|
|
1738
|
-
notActive: {
|
|
1739
|
-
default: {
|
|
1740
|
-
color: defaultPalette.black[100],
|
|
1741
|
-
background: 'transparent',
|
|
1742
|
-
hoverBackground: defaultPalette.grey[100],
|
|
1743
|
-
},
|
|
1744
|
-
danger: {
|
|
1745
|
-
color: defaultPalette.red[500],
|
|
1746
|
-
background: 'transparent',
|
|
1747
|
-
hoverBackground: defaultPalette.red[50],
|
|
1748
|
-
},
|
|
1749
|
-
success: {
|
|
1750
|
-
color: defaultPalette.green[500],
|
|
1751
|
-
background: 'transparent',
|
|
1752
|
-
hoverBackground: defaultPalette.green[50],
|
|
1753
|
-
},
|
|
1754
|
-
warning: {
|
|
1755
|
-
color: defaultPalette.yellow[500],
|
|
1756
|
-
background: 'transparent',
|
|
1757
|
-
hoverBackground: defaultPalette.yellow[50],
|
|
1758
|
-
},
|
|
1759
|
-
link: {
|
|
1760
|
-
color: defaultPalette.blue[500],
|
|
1761
|
-
background: 'transparent',
|
|
1762
|
-
hoverBackground: defaultPalette.blue[50],
|
|
1763
|
-
},
|
|
1764
|
-
},
|
|
1765
|
-
},
|
|
1802
|
+
var getSidebarItemStyles = function (_a) {
|
|
1803
|
+
var isActive = _a.isActive, isDisabled = _a.isDisabled, theme = _a.theme;
|
|
1804
|
+
var _b = theme.components.sidebarItem, normal = _b.normal, active = _b.active, disabled = _b.disabled;
|
|
1805
|
+
return isDisabled ? disabled : isActive ? active : normal;
|
|
1766
1806
|
};
|
|
1767
1807
|
|
|
1768
|
-
var
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1808
|
+
var sidebarItemHeight = 44;
|
|
1809
|
+
var SidebarItem = function (_a) {
|
|
1810
|
+
var _b = _a.caretVisible, caretVisible = _b === void 0 ? false : _b, className = _a.className, dropdownContent = _a.dropdownContent, icon = _a.icon, _c = _a.isActive, isActive = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isHidden, isHidden = _e === void 0 ? false : _e, _f = _a.isOpen, isOpen = _f === void 0 ? false : _f, onClick = _a.onClick, title = _a.title;
|
|
1811
|
+
if (isHidden) {
|
|
1812
|
+
return null;
|
|
1813
|
+
}
|
|
1814
|
+
return (React.createElement(SidebarItemWrapper, { isActive: isActive, isDisabled: isDisabled, className: className, onClick: onClick },
|
|
1815
|
+
React.createElement(SidebarItemCaret, { isOpen: isOpen, isVisible: caretVisible },
|
|
1816
|
+
React.createElement(Icon, { icon: faCaretRight })),
|
|
1817
|
+
icon ? React.createElement(Icon, __assign({}, icon, { fixedWidth: true })) : React.createElement(NoIcon, { icon: faCircle, fixedWidth: true }),
|
|
1818
|
+
React.createElement(Title$2, null, title),
|
|
1819
|
+
!isDisabled && dropdownContent && React.createElement(Dropdown$1, { content: dropdownContent })));
|
|
1820
|
+
};
|
|
1821
|
+
var Dropdown$1 = styled(SidebarItemDropdown)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: 1.5em;\n height: 1.5em;\n\n border-radius: 2px;\n"], ["\n width: 1.5em;\n height: 1.5em;\n\n border-radius: 2px;\n"])));
|
|
1822
|
+
var SidebarItemWrapper = styled.div.attrs(getSidebarItemStyles)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n height: ", "px;\n padding: 0 8px;\n\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n\n cursor: pointer;\n\n transition: background-color 250ms ease;\n\n color: ", ";\n background-color: ", ";\n\n ", " {\n display: none;\n }\n\n &:hover,\n &:focus-within {\n color: ", ";\n background-color: ", ";\n\n ", " {\n display: inherit;\n\n &:hover {\n background: ", ";\n }\n\n &:focus-within {\n background: ", ";\n }\n }\n }\n"], ["\n height: ", "px;\n padding: 0 8px;\n\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n\n cursor: pointer;\n\n transition: background-color 250ms ease;\n\n color: ", ";\n background-color: ", ";\n\n ", " {\n display: none;\n }\n\n &:hover,\n &:focus-within {\n color: ", ";\n background-color: ", ";\n\n ", " {\n display: inherit;\n\n &:hover {\n background: ", ";\n }\n\n &:focus-within {\n background: ", ";\n }\n }\n }\n"])), sidebarItemHeight, function (_a) {
|
|
1823
|
+
var color = _a.color;
|
|
1824
|
+
return color;
|
|
1825
|
+
}, function (_a) {
|
|
1826
|
+
var background = _a.background;
|
|
1827
|
+
return background;
|
|
1828
|
+
}, Dropdown$1, function (_a) {
|
|
1829
|
+
var hoverColor = _a.hoverColor;
|
|
1830
|
+
return hoverColor;
|
|
1831
|
+
}, function (_a) {
|
|
1832
|
+
var hoverBackground = _a.hoverBackground;
|
|
1833
|
+
return hoverBackground;
|
|
1834
|
+
}, Dropdown$1, function (_a) {
|
|
1835
|
+
var dropdownHover = _a.dropdownHover;
|
|
1836
|
+
return dropdownHover;
|
|
1837
|
+
}, function (_a) {
|
|
1838
|
+
var dropdownActive = _a.dropdownActive;
|
|
1839
|
+
return dropdownActive;
|
|
1840
|
+
});
|
|
1841
|
+
var Title$2 = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n flex-grow: 1;\n\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n flex-grow: 1;\n\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
|
|
1842
|
+
var NoIcon = styled(Icon)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n visibility: hidden;\n"], ["\n visibility: hidden;\n"])));
|
|
1843
|
+
var templateObject_1$A, templateObject_2$i, templateObject_3$e, templateObject_4$a;
|
|
1844
|
+
|
|
1845
|
+
var sidebarItemPalette = {
|
|
1846
|
+
normal: {
|
|
1847
|
+
color: defaultPalette.black[100],
|
|
1848
|
+
background: 'transparent',
|
|
1849
|
+
hoverColor: defaultPalette.black[100],
|
|
1850
|
+
hoverBackground: defaultPalette.grey[100],
|
|
1851
|
+
dropdownHover: defaultPalette.grey[400],
|
|
1852
|
+
dropdownActive: defaultPalette.grey[600],
|
|
1786
1853
|
},
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1854
|
+
active: {
|
|
1855
|
+
color: defaultPalette.white[100],
|
|
1856
|
+
background: defaultPalette.blue[500],
|
|
1857
|
+
hoverColor: defaultPalette.white[100],
|
|
1858
|
+
hoverBackground: defaultPalette.blue[500],
|
|
1859
|
+
dropdownHover: 'rgba(255,255,255,0.16)',
|
|
1860
|
+
dropdownActive: defaultPalette.blue[700],
|
|
1790
1861
|
},
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1862
|
+
disabled: {
|
|
1863
|
+
color: defaultPalette.grey[300],
|
|
1864
|
+
background: defaultPalette.grey[100],
|
|
1865
|
+
hoverColor: defaultPalette.grey[300],
|
|
1866
|
+
hoverBackground: defaultPalette.grey[100],
|
|
1867
|
+
dropdownHover: 'transparent',
|
|
1868
|
+
dropdownActive: 'transparent',
|
|
1794
1869
|
},
|
|
1795
1870
|
};
|
|
1796
1871
|
|
|
1872
|
+
var getMicroTagStyles = function (_a) {
|
|
1873
|
+
var theme = _a.theme, type = _a.type;
|
|
1874
|
+
return theme.components.microTag[type];
|
|
1875
|
+
};
|
|
1876
|
+
|
|
1877
|
+
var MicroTagBody = styled.div.attrs(getMicroTagStyles)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n font-weight: 600;\n font-size: 12px;\n line-height: 18px;\n display: inline-block;\n padding: 0 4px;\n border-radius: 4px;\n text-transform: uppercase;\n\n color: ", ";\n background-color: ", ";\n"], ["\n font-weight: 600;\n font-size: 12px;\n line-height: 18px;\n display: inline-block;\n padding: 0 4px;\n border-radius: 4px;\n text-transform: uppercase;\n\n color: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
1878
|
+
var color = _a.color;
|
|
1879
|
+
return color;
|
|
1880
|
+
}, function (_a) {
|
|
1881
|
+
var backgroundColor = _a.backgroundColor;
|
|
1882
|
+
return backgroundColor;
|
|
1883
|
+
});
|
|
1884
|
+
var templateObject_1$B;
|
|
1885
|
+
|
|
1886
|
+
var MicroTag = function (_a) {
|
|
1887
|
+
var text = _a.text, type = _a.type;
|
|
1888
|
+
return React.createElement(MicroTagBody, { type: type }, text);
|
|
1889
|
+
};
|
|
1890
|
+
|
|
1797
1891
|
var microTagPalette = {
|
|
1798
1892
|
error: {
|
|
1799
1893
|
backgroundColor: defaultPalette.red[50],
|
|
@@ -1817,6 +1911,31 @@ var microTagPalette = {
|
|
|
1817
1911
|
},
|
|
1818
1912
|
};
|
|
1819
1913
|
|
|
1914
|
+
var getTagColors = function (_a) {
|
|
1915
|
+
var tagStyle = _a.tagStyle, theme = _a.theme, type = _a.type;
|
|
1916
|
+
return theme.components.tag[tagStyle][type];
|
|
1917
|
+
};
|
|
1918
|
+
|
|
1919
|
+
var LeftIcon$2 = styled(Icon)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
1920
|
+
var RightIcon$1 = styled(Icon)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject([""], [""])));
|
|
1921
|
+
var Text$2 = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject([""], [""])));
|
|
1922
|
+
var StyledTag = styled.div.attrs(getTagColors)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: inline-flex;\n flex-direction: row;\n border: 4px;\n align-items: center;\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n text-align: center;\n border-radius: 4px;\n padding: 3px 8px;\n color: ", ";\n background-color: ", ";\n\n ", " + ", " {\n padding-left: 4px;\n }\n\n ", " + ", " {\n padding-right: 12px;\n }\n"], ["\n display: inline-flex;\n flex-direction: row;\n border: 4px;\n align-items: center;\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n text-align: center;\n border-radius: 4px;\n padding: 3px 8px;\n color: ", ";\n background-color: ", ";\n\n ", " + ", " {\n padding-left: 4px;\n }\n\n ", " + ", " {\n padding-right: 12px;\n }\n"])), function (_a) {
|
|
1923
|
+
var color = _a.color;
|
|
1924
|
+
return color;
|
|
1925
|
+
}, function (_a) {
|
|
1926
|
+
var backgroundColor = _a.backgroundColor;
|
|
1927
|
+
return backgroundColor;
|
|
1928
|
+
}, LeftIcon$2, Text$2, Text$2, RightIcon$1);
|
|
1929
|
+
var templateObject_1$C, templateObject_2$j, templateObject_3$f, templateObject_4$b;
|
|
1930
|
+
|
|
1931
|
+
var Tag = function (_a) {
|
|
1932
|
+
var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, tagStyle = _a.tagStyle, text = _a.text, type = _a.type, className = _a.className;
|
|
1933
|
+
return (React.createElement(StyledTag, { className: className, type: type, tagStyle: tagStyle },
|
|
1934
|
+
leftIcon && React.createElement(LeftIcon$2, __assign({}, leftIcon)),
|
|
1935
|
+
React.createElement(Text$2, null, text),
|
|
1936
|
+
rightIcon && React.createElement(RightIcon$1, __assign({}, rightIcon))));
|
|
1937
|
+
};
|
|
1938
|
+
|
|
1820
1939
|
var tagPalette = {
|
|
1821
1940
|
full: {
|
|
1822
1941
|
standard: {
|
|
@@ -1886,6 +2005,76 @@ var tagPalette = {
|
|
|
1886
2005
|
},
|
|
1887
2006
|
};
|
|
1888
2007
|
|
|
2008
|
+
var Arrow = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: absolute;\n width: 10px;\n height: 10px;\n\n &:after {\n content: '';\n position: absolute;\n transform: rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: ", ";\n box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n }\n"], ["\n position: absolute;\n width: 10px;\n height: 10px;\n\n &:after {\n content: '';\n position: absolute;\n transform: rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: ", ";\n box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n }\n"])), function (_a) {
|
|
2009
|
+
var theme = _a.theme, type = _a.type;
|
|
2010
|
+
return theme.components.tooltip[type].background;
|
|
2011
|
+
});
|
|
2012
|
+
var arrowStyle = css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n &[data-popper-placement^='top'] > ", " {\n bottom: -5px;\n &:after {\n border-bottom-right-radius: 3px;\n }\n }\n\n &[data-popper-placement^='bottom'] > ", " {\n top: -5px;\n &:after {\n border-top-left-radius: 3px;\n }\n }\n\n &[data-popper-placement^='left'] > ", " {\n right: -5px;\n &:after {\n border-top-right-radius: 3px;\n }\n }\n\n &[data-popper-placement^='right'] > ", " {\n left: -5px;\n &:after {\n border-bottom-left-radius: 3px;\n }\n }\n"], ["\n &[data-popper-placement^='top'] > ", " {\n bottom: -5px;\n &:after {\n border-bottom-right-radius: 3px;\n }\n }\n\n &[data-popper-placement^='bottom'] > ", " {\n top: -5px;\n &:after {\n border-top-left-radius: 3px;\n }\n }\n\n &[data-popper-placement^='left'] > ", " {\n right: -5px;\n &:after {\n border-top-right-radius: 3px;\n }\n }\n\n &[data-popper-placement^='right'] > ", " {\n left: -5px;\n &:after {\n border-bottom-left-radius: 3px;\n }\n }\n"])), Arrow, Arrow, Arrow, Arrow);
|
|
2013
|
+
var templateObject_1$D, templateObject_2$k;
|
|
2014
|
+
|
|
2015
|
+
var getMessageStyles = function (_a) {
|
|
2016
|
+
var theme = _a.theme, type = _a.type;
|
|
2017
|
+
return theme.components.tooltip[type];
|
|
2018
|
+
};
|
|
2019
|
+
var Message = styled.div.attrs(getMessageStyles)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n z-index: 9;\n\n font-size: 14px;\n\n padding: 4px 8px;\n border-radius: 3px;\n\n box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n\n color: ", ";\n background: ", ";\n"], ["\n z-index: 9;\n\n font-size: 14px;\n\n padding: 4px 8px;\n border-radius: 3px;\n\n box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n\n color: ", ";\n background: ", ";\n"])), function (_a) {
|
|
2020
|
+
var color = _a.color;
|
|
2021
|
+
return color;
|
|
2022
|
+
}, function (_a) {
|
|
2023
|
+
var background = _a.background;
|
|
2024
|
+
return background;
|
|
2025
|
+
});
|
|
2026
|
+
var templateObject_1$E;
|
|
2027
|
+
|
|
2028
|
+
var TooltipContainer = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), arrowStyle);
|
|
2029
|
+
var templateObject_1$F;
|
|
2030
|
+
|
|
2031
|
+
var Tooltip = function (_a) {
|
|
2032
|
+
var message = _a.message, placement = _a.placement, className = _a.className, children = _a.children, type = _a.type, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
|
|
2033
|
+
var wrapperRef = useRef(null);
|
|
2034
|
+
var popperRef = useRef(null);
|
|
2035
|
+
var buttonRef = useRef(null);
|
|
2036
|
+
var _b = useState(null), arrowRef = _b[0], setArrowRef = _b[1];
|
|
2037
|
+
var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
|
|
2038
|
+
var show = useCallback(function () { return setIsOpen(true); }, []);
|
|
2039
|
+
var hide = useCallback(function () { return setIsOpen(false); }, []);
|
|
2040
|
+
var _onMouseEnter = useCallback(function (e) {
|
|
2041
|
+
show();
|
|
2042
|
+
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
|
|
2043
|
+
}, [onMouseEnter, show]);
|
|
2044
|
+
var _onMouseLeave = useCallback(function (e) {
|
|
2045
|
+
hide();
|
|
2046
|
+
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
|
|
2047
|
+
}, [hide, onMouseLeave]);
|
|
2048
|
+
var _d = usePopper(buttonRef.current, popperRef.current, {
|
|
2049
|
+
placement: placement,
|
|
2050
|
+
strategy: 'fixed',
|
|
2051
|
+
modifiers: useMemo(function () { return [
|
|
2052
|
+
{
|
|
2053
|
+
name: 'arrow',
|
|
2054
|
+
options: {
|
|
2055
|
+
element: arrowRef,
|
|
2056
|
+
},
|
|
2057
|
+
},
|
|
2058
|
+
{
|
|
2059
|
+
name: 'offset',
|
|
2060
|
+
options: {
|
|
2061
|
+
offset: [0, 10],
|
|
2062
|
+
},
|
|
2063
|
+
},
|
|
2064
|
+
]; }, [arrowRef]),
|
|
2065
|
+
}), attributes = _d.attributes, styles = _d.styles;
|
|
2066
|
+
return (React.createElement(Wrapper$6, { className: className, ref: wrapperRef },
|
|
2067
|
+
React.createElement("div", { ref: buttonRef, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave }, children),
|
|
2068
|
+
React.createElement(CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
|
|
2069
|
+
React.createElement(BodyAnimationWrapper$1, null,
|
|
2070
|
+
React.createElement(TooltipContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
|
|
2071
|
+
React.createElement(Arrow, { type: type, ref: setArrowRef, style: styles.arrow }),
|
|
2072
|
+
React.createElement(Message, { type: type, style: styles.offset }, message))))));
|
|
2073
|
+
};
|
|
2074
|
+
var Wrapper$6 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2075
|
+
var BodyAnimationWrapper$1 = styled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n &.enter {\n opacity: 0;\n margin-top: -10px;\n }\n\n &.enter-active {\n opacity: 1;\n margin-top: 0;\n transition: margin-top 200ms, opacity 200ms;\n }\n\n &.exit {\n opacity: 1;\n margin-top: 0;\n }\n\n &.exit-active {\n opacity: 0;\n margin-top: -10px;\n transition: margin-top 200ms, opacity 200ms;\n }\n"], ["\n &.enter {\n opacity: 0;\n margin-top: -10px;\n }\n\n &.enter-active {\n opacity: 1;\n margin-top: 0;\n transition: margin-top 200ms, opacity 200ms;\n }\n\n &.exit {\n opacity: 1;\n margin-top: 0;\n }\n\n &.exit-active {\n opacity: 0;\n margin-top: -10px;\n transition: margin-top 200ms, opacity 200ms;\n }\n"])));
|
|
2076
|
+
var templateObject_1$G, templateObject_2$l;
|
|
2077
|
+
|
|
1889
2078
|
var tooltipPalette = {
|
|
1890
2079
|
light: {
|
|
1891
2080
|
color: defaultPalette.black[100],
|
|
@@ -1907,14 +2096,15 @@ var components = {
|
|
|
1907
2096
|
icon: iconPalette,
|
|
1908
2097
|
iconBackground: iconBackgroundPalette,
|
|
1909
2098
|
dropdown: dropdownPalette,
|
|
2099
|
+
sidebarItem: sidebarItemPalette,
|
|
1910
2100
|
};
|
|
1911
2101
|
var defaultTheme = {
|
|
1912
2102
|
palette: defaultPalette,
|
|
1913
2103
|
components: components,
|
|
1914
2104
|
};
|
|
1915
2105
|
|
|
1916
|
-
var ModalAnimation = createGlobalStyle(templateObject_1$
|
|
1917
|
-
var templateObject_1$
|
|
2106
|
+
var ModalAnimation = createGlobalStyle(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n .ReactModal__Overlay {\n opacity: 0;\n transition: all 200ms ease-in-out;\n }\n \n .ReactModal__Overlay--after-open {\n opacity: 1;\n }\n \n .ReactModal__Overlay--before-close {\n opacity: 0;\n }\n \n .ReactModal__Overlay--after-open .ReactModal__Content {\n :not(.fic-modal) {\n opacity: 1;\n transform: translate(-50%, -50%);\n }\n }\n \n .ReactModal__Overlay--before-close .ReactModal__Content {\n opacity: 0;\n transform: translate(-50%, 0%);\n }\n"], ["\n .ReactModal__Overlay {\n opacity: 0;\n transition: all 200ms ease-in-out;\n }\n \n .ReactModal__Overlay--after-open {\n opacity: 1;\n }\n \n .ReactModal__Overlay--before-close {\n opacity: 0;\n }\n \n .ReactModal__Overlay--after-open .ReactModal__Content {\n :not(.fic-modal) {\n opacity: 1;\n transform: translate(-50%, -50%);\n }\n }\n \n .ReactModal__Overlay--before-close .ReactModal__Content {\n opacity: 0;\n transform: translate(-50%, 0%);\n }\n"])));
|
|
2107
|
+
var templateObject_1$H;
|
|
1918
2108
|
|
|
1919
2109
|
var styledModalBoxWidth = function (isSmall, isFullscreen) {
|
|
1920
2110
|
if (isFullscreen) {
|
|
@@ -1928,13 +2118,13 @@ var styledModalBoxWidth = function (isSmall, isFullscreen) {
|
|
|
1928
2118
|
|
|
1929
2119
|
var headerFooterHeight = '80px';
|
|
1930
2120
|
var closeTimeoutMS = 200;
|
|
1931
|
-
var StyledReactModalContainer = styled(ReactModal)(templateObject_1$
|
|
1932
|
-
var StyledModalBox = styled.div(templateObject_4$
|
|
2121
|
+
var StyledReactModalContainer = styled(ReactModal)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n left: 50%;\n right: auto;\n bottom: auto;\n outline: none;\n opacity: 0;\n transform: translate(-50%, -100%);\n transition: all ", "ms ease-in-out;\n"], ["\n position: absolute;\n top: 50%;\n left: 50%;\n right: auto;\n bottom: auto;\n outline: none;\n opacity: 0;\n transform: translate(-50%, -100%);\n transition: all ", "ms ease-in-out;\n"])), closeTimeoutMS);
|
|
2122
|
+
var StyledModalBox = styled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n overflow: auto;\n background: rgb(255, 255, 255);\n padding: 0;\n ", "\n\n box-shadow: ", ";\n\n border: ", ";\n border-radius: ", "px;\n width: ", "vw;\n\n @media screen and (min-width: 992px) {\n width: ", ";\n }\n"], ["\n overflow: auto;\n background: rgb(255, 255, 255);\n padding: 0;\n ",
|
|
1933
2123
|
"\n\n box-shadow: ",
|
|
1934
2124
|
";\n\n border: ", ";\n border-radius: ", "px;\n width: ", "vw;\n\n @media screen and (min-width: 992px) {\n width: ", ";\n }\n"])), function (_a) {
|
|
1935
2125
|
var fullScreenHeight = _a.fullScreenHeight, isFullscreen = _a.isFullscreen;
|
|
1936
2126
|
return isFullscreen
|
|
1937
|
-
? css(templateObject_2$
|
|
2127
|
+
? css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n height: ", "px;\n "], ["\n height: ", "px;\n "])), fullScreenHeight) : css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n min-height: 200px;\n "], ["\n min-height: 200px;\n "])));
|
|
1938
2128
|
}, function (props) {
|
|
1939
2129
|
return props.isFullscreen ? 'none' : 'rgba(23, 43, 77, 0.24) 0px 16px 24px, rgba(9, 30, 66, 0.08) 0px 0px 0px';
|
|
1940
2130
|
}, function (props) { return (props.isFullscreen ? 0 : '1px solid rgb(204, 204, 204)'); }, function (props) { return (props.isFullscreen ? 0 : 8); }, function (props) { return (props.isFullscreen ? 100 : 96); }, function (_a) {
|
|
@@ -1973,14 +2163,14 @@ var ModalFooter = styled.div(templateObject_12$1 || (templateObject_12$1 = __mak
|
|
|
1973
2163
|
var palette = _a.theme.palette;
|
|
1974
2164
|
return palette.grey[100];
|
|
1975
2165
|
});
|
|
1976
|
-
var Wrapper$
|
|
2166
|
+
var Wrapper$7 = styled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject([""], [""])));
|
|
1977
2167
|
var TopAttachment = styled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n top: ", ";\n"], ["\n position: absolute;\n width: 100%;\n top: ", ";\n"])), function (_a) {
|
|
1978
2168
|
var height = _a.height;
|
|
1979
2169
|
return height && -(height + 16) + "px";
|
|
1980
2170
|
});
|
|
1981
2171
|
var BottomAttachment = styled.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n width: auto;\n margin-top: 24px;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n"], ["\n width: auto;\n margin-top: 24px;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n"])));
|
|
1982
|
-
var StyledIcon$
|
|
1983
|
-
var templateObject_1$
|
|
2172
|
+
var StyledIcon$3 = styled(Icon)(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n font-size: 24px;\n font-weight: 500;\n"], ["\n font-size: 24px;\n font-weight: 500;\n"])));
|
|
2173
|
+
var templateObject_1$I, templateObject_2$m, templateObject_3$g, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1;
|
|
1984
2174
|
|
|
1985
2175
|
var closeTimeoutMS$1 = 200;
|
|
1986
2176
|
var modalStyle = {
|
|
@@ -2065,12 +2255,12 @@ var ModalSearchable = function (props) {
|
|
|
2065
2255
|
handleChangeValue('');
|
|
2066
2256
|
};
|
|
2067
2257
|
var Header = (React.createElement(WrapperInput, null,
|
|
2068
|
-
React.createElement(StyledIcon$
|
|
2258
|
+
React.createElement(StyledIcon$3, { icon: faSearch, color: 'black' }),
|
|
2069
2259
|
React.createElement("input", { autoFocus: true, className: 'inputSearchable', type: 'text', onChange: handleChange, value: value, placeholder: placeholder }),
|
|
2070
2260
|
React.createElement(ClearButton, { visible: !!value, onClick: clearInput }, "Cancella")));
|
|
2071
2261
|
return (React.createElement(Modal, __assign({ className: className, header: function () { return Header; } }, props), children));
|
|
2072
2262
|
};
|
|
2073
|
-
var ClearButton = styled.div(templateObject_1$
|
|
2263
|
+
var ClearButton = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n white-space: nowrap;\n cursor: pointer;\n padding-right: 10px;\n border-right: 1px solid ", ";\n color: ", ";\n &:hover {\n color: ", ";\n }\n display: ", ";\n"], ["\n white-space: nowrap;\n cursor: pointer;\n padding-right: 10px;\n border-right: 1px solid ", ";\n color: ", ";\n &:hover {\n color: ", ";\n }\n display: ", ";\n"])), function (_a) {
|
|
2074
2264
|
var theme = _a.theme;
|
|
2075
2265
|
return theme.palette.grey[200];
|
|
2076
2266
|
}, function (_a) {
|
|
@@ -2083,21 +2273,21 @@ var ClearButton = styled.div(templateObject_1$B || (templateObject_1$B = __makeT
|
|
|
2083
2273
|
var visible = _a.visible;
|
|
2084
2274
|
return (visible ? 'inherit' : 'none');
|
|
2085
2275
|
});
|
|
2086
|
-
var WrapperInput = styled.div(templateObject_2$
|
|
2276
|
+
var WrapperInput = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n caret-color: ", ";\n input[type='text'].inputSearchable:focus {\n outline: none !important;\n box-shadow: none !important;\n }\n\n > input {\n width: 100%;\n margin-left: 4px;\n background-color: ", " !important;\n border: none;\n font-size: 20px !important;\n top: 6px;\n outline: none;\n box-shadow: none;\n }\n\n > input,\n input::-webkit-input-placeholder {\n font-size: 20px;\n }\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n caret-color: ", ";\n input[type='text'].inputSearchable:focus {\n outline: none !important;\n box-shadow: none !important;\n }\n\n > input {\n width: 100%;\n margin-left: 4px;\n background-color: ", " !important;\n border: none;\n font-size: 20px !important;\n top: 6px;\n outline: none;\n box-shadow: none;\n }\n\n > input,\n input::-webkit-input-placeholder {\n font-size: 20px;\n }\n"])), function (_a) {
|
|
2087
2277
|
var theme = _a.theme;
|
|
2088
2278
|
return theme.palette.blue[300];
|
|
2089
2279
|
}, function (_a) {
|
|
2090
2280
|
var theme = _a.theme;
|
|
2091
2281
|
return theme.palette.grey[50];
|
|
2092
2282
|
});
|
|
2093
|
-
var templateObject_1$
|
|
2283
|
+
var templateObject_1$J, templateObject_2$n;
|
|
2094
2284
|
|
|
2095
|
-
var CustomSizeModal = styled(Modal)(templateObject_1$
|
|
2096
|
-
var TitleContent = styled.div(templateObject_2$
|
|
2097
|
-
var BodyContent = styled.div(templateObject_3$
|
|
2098
|
-
var Question = styled.div(templateObject_4$
|
|
2285
|
+
var CustomSizeModal = styled(Modal)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n width: 432px;\n max-width: 90vw;\n"], ["\n width: 432px;\n max-width: 90vw;\n"])));
|
|
2286
|
+
var TitleContent = styled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n margin-top: 8px;\n line-height: 24px;\n font-weight: 500;\n font-size: 16px;\n font-style: normal;\n color: #000000;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n margin-top: 8px;\n line-height: 24px;\n font-weight: 500;\n font-size: 16px;\n font-style: normal;\n color: #000000;\n"])));
|
|
2287
|
+
var BodyContent = styled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n margin-top: 8px;\n margin-bottom: 8px;\n font-size: 14px;\n font-weight: normal;\n font-style: normal;\n line-height: 21px;\n color: #5e6c84;\n"], ["\n margin-top: 8px;\n margin-bottom: 8px;\n font-size: 14px;\n font-weight: normal;\n font-style: normal;\n line-height: 21px;\n color: #5e6c84;\n"])));
|
|
2288
|
+
var Question = styled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-size: 14px;\n font-style: normal;\n line-height: 21px;\n font-weight: 500;\n color: #091e42;\n"], ["\n font-size: 14px;\n font-style: normal;\n line-height: 21px;\n font-weight: 500;\n color: #091e42;\n"])));
|
|
2099
2289
|
var Buttons = styled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n margin-top: 24px;\n margin-bottom: 8px;\n display: flex;\n flex-direction: row;\n line-height: 21px;\n justify-content: flex-end;\n"], ["\n margin-top: 24px;\n margin-bottom: 8px;\n display: flex;\n flex-direction: row;\n line-height: 21px;\n justify-content: flex-end;\n"])));
|
|
2100
|
-
var templateObject_1$
|
|
2290
|
+
var templateObject_1$K, templateObject_2$o, templateObject_3$h, templateObject_4$d, templateObject_5$9;
|
|
2101
2291
|
|
|
2102
2292
|
var typeMap = {
|
|
2103
2293
|
error: 'error',
|
|
@@ -2136,10 +2326,10 @@ var ConfirmationModal = function (props) {
|
|
|
2136
2326
|
props.onAction();
|
|
2137
2327
|
} }))));
|
|
2138
2328
|
};
|
|
2139
|
-
var StyledButton = styled(Button)(templateObject_1$
|
|
2140
|
-
var templateObject_1$
|
|
2329
|
+
var StyledButton = styled(Button)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n margin-left: 16px;\n"], ["\n margin-left: 16px;\n"])));
|
|
2330
|
+
var templateObject_1$L;
|
|
2141
2331
|
|
|
2142
|
-
var StyledWrapper$1 = styled.div(templateObject_1$
|
|
2332
|
+
var StyledWrapper$1 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n width: 90vw;\n margin: 0 auto;\n text-align: center;\n @media screen and (min-width: 768px) {\n width: 376px;\n }\n .icon {\n background-color: ", ";\n width: 176px;\n height: 176px;\n border-radius: 50%;\n color: ", ";\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 76px;\n }\n h5 {\n margin-top: 2rem;\n margin-bottom: 0;\n font-weight: 500;\n font-size: 20px;\n line-height: 30px;\n color: ", ";\n }\n p {\n margin-top: 0.5rem;\n margin-bottom: 1.5rem;\n font-weight: 400;\n font-size: 14px;\n line-height: 21px;\n color: ", ";\n }\n"], ["\n width: 90vw;\n margin: 0 auto;\n text-align: center;\n @media screen and (min-width: 768px) {\n width: 376px;\n }\n .icon {\n background-color: ", ";\n width: 176px;\n height: 176px;\n border-radius: 50%;\n color: ", ";\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 76px;\n }\n h5 {\n margin-top: 2rem;\n margin-bottom: 0;\n font-weight: 500;\n font-size: 20px;\n line-height: 30px;\n color: ", ";\n }\n p {\n margin-top: 0.5rem;\n margin-bottom: 1.5rem;\n font-weight: 400;\n font-size: 14px;\n line-height: 21px;\n color: ", ";\n }\n"])), function (_a) {
|
|
2143
2333
|
var palette = _a.theme.palette;
|
|
2144
2334
|
return palette.red[50];
|
|
2145
2335
|
}, function (_a) {
|
|
@@ -2164,14 +2354,14 @@ var PageEmptySet = function (_a) {
|
|
|
2164
2354
|
text && React.createElement("p", null, text),
|
|
2165
2355
|
button));
|
|
2166
2356
|
};
|
|
2167
|
-
var templateObject_1$
|
|
2357
|
+
var templateObject_1$M;
|
|
2168
2358
|
|
|
2169
|
-
var StyledWrapper$2 = styled.div(templateObject_2$
|
|
2359
|
+
var StyledWrapper$2 = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
2170
2360
|
"\n"])), function (_a) {
|
|
2171
2361
|
var palette = _a.theme.palette;
|
|
2172
|
-
return css(templateObject_1$
|
|
2362
|
+
return css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n .pagination {\n display: flex;\n justify-content: center;\n width: 100%;\n margin-top: 2rem;\n }\n\n .pagination__element {\n padding: 0.5rem;\n font-size: 14px;\n line-height: 24px;\n color: ", ";\n cursor: pointer;\n box-sizing: content-box;\n\n &.deactivated {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &.selected {\n color: ", ";\n background-color: ", ";\n font-weight: 500;\n border-radius: 4px;\n height: 24px;\n width: 24px;\n text-align: center;\n }\n }\n "], ["\n .pagination {\n display: flex;\n justify-content: center;\n width: 100%;\n margin-top: 2rem;\n }\n\n .pagination__element {\n padding: 0.5rem;\n font-size: 14px;\n line-height: 24px;\n color: ", ";\n cursor: pointer;\n box-sizing: content-box;\n\n &.deactivated {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &.selected {\n color: ", ";\n background-color: ", ";\n font-weight: 500;\n border-radius: 4px;\n height: 24px;\n width: 24px;\n text-align: center;\n }\n }\n "])), palette.grey[700], palette.white[100], palette.grey[700]);
|
|
2173
2363
|
});
|
|
2174
|
-
var templateObject_1$
|
|
2364
|
+
var templateObject_1$N, templateObject_2$p;
|
|
2175
2365
|
|
|
2176
2366
|
var PaginationComponent = function (props) {
|
|
2177
2367
|
var numberOfPages = Math.ceil(props.listSize / props.pageSize);
|
|
@@ -2209,12 +2399,12 @@ var PaginationComponent = function (props) {
|
|
|
2209
2399
|
var Pagination = function (props) { return (React.createElement(StyledWrapper$2, null,
|
|
2210
2400
|
React.createElement(PaginationComponent, __assign({}, props)))); };
|
|
2211
2401
|
|
|
2212
|
-
var StyledProgressbarWrapper = styled.div(templateObject_2$
|
|
2402
|
+
var StyledProgressbarWrapper = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
2213
2403
|
"\n"])), function (_a) {
|
|
2214
2404
|
var color = _a.color, percentage = _a.percentage, palette = _a.theme.palette;
|
|
2215
|
-
return css(templateObject_1$
|
|
2405
|
+
return css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n .progression__container {\n height: ", ";\n background-color: ", ";\n position: relative;\n border-radius: 100px;\n }\n .progression__bar {\n position: absolute;\n height: 100%;\n z-index: 1;\n border-radius: 100px;\n transition: width 0.35s ease-in-out;\n\n background-color: ", ";\n width: ", "%;\n }\n "], ["\n .progression__container {\n height: ", ";\n background-color: ", ";\n position: relative;\n border-radius: 100px;\n }\n .progression__bar {\n position: absolute;\n height: 100%;\n z-index: 1;\n border-radius: 100px;\n transition: width 0.35s ease-in-out;\n\n background-color: ", ";\n width: ", "%;\n }\n "])), spacing.s, palette.grey[100], palette[color ? color : 'blue'][500], percentage);
|
|
2216
2406
|
});
|
|
2217
|
-
var templateObject_1$
|
|
2407
|
+
var templateObject_1$O, templateObject_2$q;
|
|
2218
2408
|
|
|
2219
2409
|
var UnstyledProgressbar = /** @class */ (function (_super) {
|
|
2220
2410
|
__extends(UnstyledProgressbar, _super);
|
|
@@ -2288,7 +2478,7 @@ var ReactSelectWrapper = function (props) {
|
|
|
2288
2478
|
var styles = useCustomSelectStyle(size);
|
|
2289
2479
|
return (React.createElement(ReactSelect, __assign({}, props, { isMulti: isMulti, backspaceRemoves: true, deleteRemoves: false, autosize: false, noOptionsMessage: function () { return 'Nessuna corrispondenza trovata'; }, styles: styles, isClearable: isClearable, onInputChange: inputChange, ref: getRef })));
|
|
2290
2480
|
};
|
|
2291
|
-
var StyledWrapper$3 = styled.div(templateObject_1$
|
|
2481
|
+
var StyledWrapper$3 = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n .label {\n font-size: 14px;\n line-height: 21px;\n margin-bottom: 4px;\n display: block;\n color: ", ";\n }\n"], ["\n .label {\n font-size: 14px;\n line-height: 21px;\n margin-bottom: 4px;\n display: block;\n color: ", ";\n }\n"])), function (_a) {
|
|
2292
2482
|
var theme = _a.theme;
|
|
2293
2483
|
return theme.palette.black[100];
|
|
2294
2484
|
});
|
|
@@ -2315,18 +2505,18 @@ var SelectAsync = function (props) {
|
|
|
2315
2505
|
label ? React.createElement("label", { className: 'label' }, label) : null,
|
|
2316
2506
|
React.createElement(AsyncSelect, __assign({}, props, { backspaceRemoves: true, deleteRemoves: true, autosize: false, noOptionsMessage: function () { return 'Nessuna corrispondenza trovata'; }, styles: styles, isClearable: isClearable }))));
|
|
2317
2507
|
};
|
|
2318
|
-
var templateObject_1$
|
|
2508
|
+
var templateObject_1$P;
|
|
2319
2509
|
|
|
2320
2510
|
var SingleStep = function (props) { return (React.createElement("div", { className: 'stepBar__single_step' },
|
|
2321
2511
|
React.createElement("div", { className: "stepBar__single_step__number " + props.type }, props.number),
|
|
2322
2512
|
React.createElement("div", { className: "stepBar__single_step__title " + props.type }, props.title))); };
|
|
2323
2513
|
|
|
2324
|
-
var StyledStepBarWrapper = styled.div(templateObject_2$
|
|
2514
|
+
var StyledStepBarWrapper = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
2325
2515
|
"\n"])), function (_a) {
|
|
2326
2516
|
var palette = _a.theme.palette;
|
|
2327
|
-
return css(templateObject_1$
|
|
2517
|
+
return css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n .stepBar {\n display: flex;\n width: 100%;\n align-items: center;\n }\n\n .stepBar__single_step {\n display: flex;\n align-items: center;\n }\n\n .stepBar__single_step__number {\n width: 24px;\n height: 24px;\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 500;\n font-size: 14px;\n line-height: 18px;\n background-color: ", ";\n color: ", ";\n\n &.current {\n background-color: ", ";\n }\n\n &.completed {\n background-color: ", ";\n }\n }\n\n .stepBar__single_step__title {\n margin-left: ", ";\n font-weight: normal;\n font-size: 14px;\n line-height: 21px;\n color: ", ";\n\n &.current {\n font-weight: 600;\n color: ", ";\n }\n }\n\n .stepBar__step_divider {\n background: ", ";\n width: 32px;\n height: 3px;\n margin: 0 ", ";\n }\n "], ["\n .stepBar {\n display: flex;\n width: 100%;\n align-items: center;\n }\n\n .stepBar__single_step {\n display: flex;\n align-items: center;\n }\n\n .stepBar__single_step__number {\n width: 24px;\n height: 24px;\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 500;\n font-size: 14px;\n line-height: 18px;\n background-color: ", ";\n color: ", ";\n\n &.current {\n background-color: ", ";\n }\n\n &.completed {\n background-color: ", ";\n }\n }\n\n .stepBar__single_step__title {\n margin-left: ", ";\n font-weight: normal;\n font-size: 14px;\n line-height: 21px;\n color: ", ";\n\n &.current {\n font-weight: 600;\n color: ", ";\n }\n }\n\n .stepBar__step_divider {\n background: ", ";\n width: 32px;\n height: 3px;\n margin: 0 ", ";\n }\n "])), palette.grey[500], palette.white[100], palette.blue[500], palette.green[500], spacing.xs, palette.grey[500], palette.blue[500], palette.grey[100], spacing.s);
|
|
2328
2518
|
});
|
|
2329
|
-
var templateObject_1$
|
|
2519
|
+
var templateObject_1$Q, templateObject_2$r;
|
|
2330
2520
|
|
|
2331
2521
|
var UnstyledStepBar = /** @class */ (function (_super) {
|
|
2332
2522
|
__extends(UnstyledStepBar, _super);
|
|
@@ -2345,7 +2535,7 @@ var UnstyledStepBar = /** @class */ (function (_super) {
|
|
|
2345
2535
|
var StepBar = function (props) { return (React.createElement(StyledStepBarWrapper, __assign({}, props),
|
|
2346
2536
|
React.createElement(UnstyledStepBar, __assign({}, props)))); };
|
|
2347
2537
|
|
|
2348
|
-
var linearBackground = function () { return css(templateObject_1$
|
|
2538
|
+
var linearBackground = function () { return css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n .linear-background {\n *,\n ::after,\n ::before {\n box-sizing: border-box;\n }\n\n position: relative;\n display: flex;\n flex-wrap: wrap;\n overflow: hidden;\n margin-bottom: 0;\n background-color: ", ";\n border-radius: 4px;\n padding: 8px;\n\n &::before {\n content: ' ';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 50%;\n z-index: 1;\n width: 500%;\n margin-left: -250%;\n animation: phAnimation 2s linear infinite;\n background: linear-gradient(\n to right,\n ", " 46%,\n ", " 50%,\n ", " 54%\n );\n }\n\n > * {\n flex: 1 1 auto;\n display: flex;\n flex-flow: column;\n padding-right: (8px / 2);\n padding-left: (8px / 2);\n }\n\n @keyframes phAnimation {\n 0% {\n transform: translate3d(-30%, 0, 0);\n }\n 100% {\n transform: translate3d(30%, 0, 0);\n }\n }\n }\n"], ["\n .linear-background {\n *,\n ::after,\n ::before {\n box-sizing: border-box;\n }\n\n position: relative;\n display: flex;\n flex-wrap: wrap;\n overflow: hidden;\n margin-bottom: 0;\n background-color: ", ";\n border-radius: 4px;\n padding: 8px;\n\n &::before {\n content: ' ';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 50%;\n z-index: 1;\n width: 500%;\n margin-left: -250%;\n animation: phAnimation 2s linear infinite;\n background: linear-gradient(\n to right,\n ", " 46%,\n ", " 50%,\n ", " 54%\n );\n }\n\n > * {\n flex: 1 1 auto;\n display: flex;\n flex-flow: column;\n padding-right: (8px / 2);\n padding-left: (8px / 2);\n }\n\n @keyframes phAnimation {\n 0% {\n transform: translate3d(-30%, 0, 0);\n }\n 100% {\n transform: translate3d(30%, 0, 0);\n }\n }\n }\n"])), function (_a) {
|
|
2349
2539
|
var theme = _a.theme;
|
|
2350
2540
|
return theme.palette.grey[100];
|
|
2351
2541
|
}, function (_a) {
|
|
@@ -2358,7 +2548,7 @@ var linearBackground = function () { return css(templateObject_1$J || (templateO
|
|
|
2358
2548
|
var theme = _a.theme;
|
|
2359
2549
|
return theme.palette.grey[100];
|
|
2360
2550
|
}); };
|
|
2361
|
-
var templateObject_1$
|
|
2551
|
+
var templateObject_1$R;
|
|
2362
2552
|
|
|
2363
2553
|
var tabletLandscape = 991;
|
|
2364
2554
|
var responsiveThresholds = {
|
|
@@ -2431,8 +2621,8 @@ var typeMap$1 = {
|
|
|
2431
2621
|
desc: faSortDown,
|
|
2432
2622
|
default: faSort,
|
|
2433
2623
|
};
|
|
2434
|
-
var StyledWrapper$4 = styled.div(templateObject_1$
|
|
2435
|
-
var StyledIcon$
|
|
2624
|
+
var StyledWrapper$4 = styled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n margin-left: 0.5rem;\n"], ["\n margin-left: 0.5rem;\n"])));
|
|
2625
|
+
var StyledIcon$4 = styled(Icon)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
2436
2626
|
var SortIcon = function (props) {
|
|
2437
2627
|
var filter = _.find(props.propertiesFilter, ['id', props.property]);
|
|
2438
2628
|
var type = '';
|
|
@@ -2460,11 +2650,11 @@ var SortIcon = function (props) {
|
|
|
2460
2650
|
}
|
|
2461
2651
|
}
|
|
2462
2652
|
return (React.createElement(StyledWrapper$4, null,
|
|
2463
|
-
React.createElement(StyledIcon$
|
|
2653
|
+
React.createElement(StyledIcon$4, { icon: typeMap$1[type], onClick: function () {
|
|
2464
2654
|
props.handleSortOnProperty(props.property, nextType);
|
|
2465
2655
|
} })));
|
|
2466
2656
|
};
|
|
2467
|
-
var templateObject_1$
|
|
2657
|
+
var templateObject_1$S, templateObject_2$s;
|
|
2468
2658
|
|
|
2469
2659
|
var ellipsisIcon = {
|
|
2470
2660
|
icon: faEllipsisH,
|
|
@@ -2491,36 +2681,36 @@ var HeadDesktop = function (_a) {
|
|
|
2491
2681
|
React.createElement(Icon, __assign({}, ellipsisIcon))))));
|
|
2492
2682
|
};
|
|
2493
2683
|
|
|
2494
|
-
var Row = styled.div(templateObject_1$
|
|
2684
|
+
var Row = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
2495
2685
|
var ListMobile = function (_a) {
|
|
2496
2686
|
var data = _a.data, isLoading = _a.isLoading, listSize = _a.listSize, renderMobileRow = _a.renderMobileRow;
|
|
2497
2687
|
return (React.createElement("div", null, listSize && !isLoading
|
|
2498
2688
|
? data.map(function (o, i) { return React.createElement(Row, { key: i }, renderMobileRow ? renderMobileRow(o) : undefined); })
|
|
2499
2689
|
: undefined));
|
|
2500
2690
|
};
|
|
2501
|
-
var templateObject_1$
|
|
2691
|
+
var templateObject_1$T;
|
|
2502
2692
|
|
|
2503
|
-
var ActionLink = styled.a(templateObject_2$
|
|
2504
|
-
"\n"])), function (props) { return css(templateObject_1$
|
|
2505
|
-
var templateObject_1$
|
|
2693
|
+
var ActionLink = styled.a(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n margin-right: 1rem;\n cursor: pointer;\n user-select: none;\n &:hover {\n text-decoration: underline;\n }\n ", "\n"], ["\n margin-right: 1rem;\n cursor: pointer;\n user-select: none;\n &:hover {\n text-decoration: underline;\n }\n ",
|
|
2694
|
+
"\n"])), function (props) { return css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), props.color); });
|
|
2695
|
+
var templateObject_1$U, templateObject_2$t;
|
|
2506
2696
|
|
|
2507
|
-
var ActionsContainer = styled.div(templateObject_1$
|
|
2508
|
-
var templateObject_1$
|
|
2697
|
+
var ActionsContainer = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
2698
|
+
var templateObject_1$V;
|
|
2509
2699
|
|
|
2510
|
-
var StyledWrapper$5 = styled.div(templateObject_2$
|
|
2700
|
+
var StyledWrapper$5 = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 32px;\n background-color: ", ";\n box-shadow: 0px 1px 2px rgba(51, 51, 51, 0.24), 0px 1px 3px rgba(51, 51, 51, 0.12);\n border-radius: 4px;\n min-width: 200px;\n max-width: calc(100% - 2rem);\n padding: 0.5rem 1rem;\n z-index: 999;\n display: none;\n ", "\n\n .link_container {\n margin: 0.5rem 0;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 32px;\n background-color: ", ";\n box-shadow: 0px 1px 2px rgba(51, 51, 51, 0.24), 0px 1px 3px rgba(51, 51, 51, 0.12);\n border-radius: 4px;\n min-width: 200px;\n max-width: calc(100% - 2rem);\n padding: 0.5rem 1rem;\n z-index: 999;\n display: none;\n ",
|
|
2511
2701
|
"\n\n .link_container {\n margin: 0.5rem 0;\n }\n"])), function (_a) {
|
|
2512
2702
|
var palette = _a.theme.palette;
|
|
2513
2703
|
return palette.white[100];
|
|
2514
2704
|
}, function (props) {
|
|
2515
2705
|
if (props.active) {
|
|
2516
|
-
return css(templateObject_1$
|
|
2706
|
+
return css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: block;\n "], ["\n display: block;\n "])));
|
|
2517
2707
|
}
|
|
2518
2708
|
return undefined;
|
|
2519
2709
|
});
|
|
2520
|
-
var Action = styled.p(templateObject_4$
|
|
2710
|
+
var Action = styled.p(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n ", "\n"], ["\n cursor: pointer;\n user-select: none;\n ",
|
|
2521
2711
|
"\n"])), function (props) {
|
|
2522
2712
|
if (props.color) {
|
|
2523
|
-
return css(templateObject_3$
|
|
2713
|
+
return css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), props.color);
|
|
2524
2714
|
}
|
|
2525
2715
|
return undefined;
|
|
2526
2716
|
});
|
|
@@ -2530,24 +2720,24 @@ var ActionsPopUp = function (props) { return (React.createElement(StyledWrapper$
|
|
|
2530
2720
|
a.action(props.element, props.selectedRows);
|
|
2531
2721
|
props.handlePopUpVisibility(undefined);
|
|
2532
2722
|
}, color: a.color }, a.label))); }))); };
|
|
2533
|
-
var templateObject_1$
|
|
2723
|
+
var templateObject_1$W, templateObject_2$u, templateObject_3$i, templateObject_4$e;
|
|
2534
2724
|
|
|
2535
|
-
var StyledWrapper$6 = styled.div(templateObject_3$
|
|
2725
|
+
var StyledWrapper$6 = styled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n cursor: pointer;\n display: flex;\n align-items: center;\n width: 32px;\n height: 32px;\n justify-content: center;\n border-radius: 4px;\n\n ", "\n"], ["\n cursor: pointer;\n display: flex;\n align-items: center;\n width: 32px;\n height: 32px;\n justify-content: center;\n border-radius: 4px;\n\n ",
|
|
2536
2726
|
"\n"])), function (_a) {
|
|
2537
2727
|
var active = _a.active, palette = _a.theme.palette;
|
|
2538
|
-
return css(templateObject_2$
|
|
2539
|
-
"\n &:hover {\n background-color: ", ";\n }\n "])), active && css(templateObject_1$
|
|
2728
|
+
return css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n ", "\n &:hover {\n background-color: ", ";\n }\n "], ["\n ",
|
|
2729
|
+
"\n &:hover {\n background-color: ", ";\n }\n "])), active && css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), palette.blue[50], palette.blue[500]), palette.blue[50]);
|
|
2540
2730
|
});
|
|
2541
2731
|
var ActionsPopUpButton = function (props) { return (React.createElement(StyledWrapper$6, { active: props.active, onClick: function () { return props.handlePopUpVisibility(props.rowId); } },
|
|
2542
2732
|
React.createElement(Icon, { icon: faEllipsisH }))); };
|
|
2543
|
-
var templateObject_1$
|
|
2733
|
+
var templateObject_1$X, templateObject_2$v, templateObject_3$j;
|
|
2544
2734
|
|
|
2545
|
-
var ActionsPopUpUnderlay = styled.div(templateObject_2$
|
|
2735
|
+
var ActionsPopUpUnderlay = styled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n background-color: transparent;\n width: 100%;\n height: 100%;\n z-index: 2;\n display: none;\n ", "\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n background-color: transparent;\n width: 100%;\n height: 100%;\n z-index: 2;\n display: none;\n ",
|
|
2546
2736
|
"\n"])), function (_a) {
|
|
2547
2737
|
var active = _a.active;
|
|
2548
|
-
return active && css(templateObject_1$
|
|
2738
|
+
return active && css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: block;\n "], ["\n display: block;\n "])));
|
|
2549
2739
|
});
|
|
2550
|
-
var templateObject_1$
|
|
2740
|
+
var templateObject_1$Y, templateObject_2$w;
|
|
2551
2741
|
|
|
2552
2742
|
var RowDesktop = function (_a) {
|
|
2553
2743
|
var actions = _a.actions, controlledProperties = _a.controlledProperties, currentActionsPopUp = _a.currentActionsPopUp, disableSelection = _a.disableSelection, element = _a.element, handlePopUpVisibility = _a.handlePopUpVisibility, handleSelection = _a.handleSelection, index = _a.index, selectedList = _a.selectedList;
|
|
@@ -2578,13 +2768,13 @@ var RowDesktop = function (_a) {
|
|
|
2578
2768
|
React.createElement("td", null)));
|
|
2579
2769
|
};
|
|
2580
2770
|
|
|
2581
|
-
var StyledWrapper$7 = styled.div(templateObject_3$
|
|
2771
|
+
var StyledWrapper$7 = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
2582
2772
|
"\n"])), function (_a) {
|
|
2583
2773
|
var show = _a.show, palette = _a.theme.palette;
|
|
2584
|
-
return css(templateObject_2$
|
|
2585
|
-
"\n .link {\n color: ", ";\n cursor: pointer;\n }\n .modal__container {\n background-color: ", ";\n width: 424px;\n box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n border-radius: 8px;\n background-color: ", ";\n }\n .modal__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: ", ";\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n padding: 0 1.5rem;\n font-size: 20px;\n line-height: 30px;\n p {\n cursor: pointer;\n }\n }\n .modal__body {\n padding: 1rem 1.5rem;\n position: relative;\n .draggable_element {\n display: flex;\n align-items: center;\n &:hover,\n &:active {\n .icon {\n visibility: visible;\n color: ", ";\n }\n }\n }\n .draggable__handle {\n width: 30px;\n .icon {\n display: block;\n visibility: hidden;\n }\n }\n .draggable__checkbox {\n margin-bottom: 6px;\n }\n }\n .modal__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1.5rem 1.5rem;\n border-top: 1px solid ", ";\n font-size: 14px;\n line-height: 21px;\n .buttons__container {\n a {\n &:first-child {\n margin-right: 1rem;\n }\n }\n }\n }\n "])), show && css(templateObject_1$
|
|
2774
|
+
return css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.14);\n top: 0;\n left: 0;\n display: none;\n ", "\n .link {\n color: ", ";\n cursor: pointer;\n }\n .modal__container {\n background-color: ", ";\n width: 424px;\n box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n border-radius: 8px;\n background-color: ", ";\n }\n .modal__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: ", ";\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n padding: 0 1.5rem;\n font-size: 20px;\n line-height: 30px;\n p {\n cursor: pointer;\n }\n }\n .modal__body {\n padding: 1rem 1.5rem;\n position: relative;\n .draggable_element {\n display: flex;\n align-items: center;\n &:hover,\n &:active {\n .icon {\n visibility: visible;\n color: ", ";\n }\n }\n }\n .draggable__handle {\n width: 30px;\n .icon {\n display: block;\n visibility: hidden;\n }\n }\n .draggable__checkbox {\n margin-bottom: 6px;\n }\n }\n .modal__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1.5rem 1.5rem;\n border-top: 1px solid ", ";\n font-size: 14px;\n line-height: 21px;\n .buttons__container {\n a {\n &:first-child {\n margin-right: 1rem;\n }\n }\n }\n }\n "], ["\n position: fixed;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.14);\n top: 0;\n left: 0;\n display: none;\n ",
|
|
2775
|
+
"\n .link {\n color: ", ";\n cursor: pointer;\n }\n .modal__container {\n background-color: ", ";\n width: 424px;\n box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n border-radius: 8px;\n background-color: ", ";\n }\n .modal__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: ", ";\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n padding: 0 1.5rem;\n font-size: 20px;\n line-height: 30px;\n p {\n cursor: pointer;\n }\n }\n .modal__body {\n padding: 1rem 1.5rem;\n position: relative;\n .draggable_element {\n display: flex;\n align-items: center;\n &:hover,\n &:active {\n .icon {\n visibility: visible;\n color: ", ";\n }\n }\n }\n .draggable__handle {\n width: 30px;\n .icon {\n display: block;\n visibility: hidden;\n }\n }\n .draggable__checkbox {\n margin-bottom: 6px;\n }\n }\n .modal__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1.5rem 1.5rem;\n border-top: 1px solid ", ";\n font-size: 14px;\n line-height: 21px;\n .buttons__container {\n a {\n &:first-child {\n margin-right: 1rem;\n }\n }\n }\n }\n "])), show && css(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n "], ["\n display: flex;\n align-items: center;\n justify-content: center;\n "]))), palette.blue[500], palette.white[100], palette.white[100], palette.grey[50], palette.grey[150], palette.grey[100]);
|
|
2586
2776
|
});
|
|
2587
|
-
var templateObject_1$
|
|
2777
|
+
var templateObject_1$Z, templateObject_2$x, templateObject_3$k;
|
|
2588
2778
|
|
|
2589
2779
|
var getItemStyle = function (snapshot, draggableStyle) {
|
|
2590
2780
|
return __assign({ userSelect: 'none', padding: '0.5rem 0 0.5rem 0', outline: "none" }, draggableStyle);
|
|
@@ -2682,7 +2872,7 @@ var CustomizationsModal = /** @class */ (function (_super) {
|
|
|
2682
2872
|
return CustomizationsModal;
|
|
2683
2873
|
}(Component));
|
|
2684
2874
|
|
|
2685
|
-
var LoadingTableRow = styled.tr(templateObject_1$
|
|
2875
|
+
var LoadingTableRow = styled.tr(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n height: 49px;\n"], ["\n height: 49px;\n"])));
|
|
2686
2876
|
var LoadingContent = function (props) {
|
|
2687
2877
|
// Loading elments for the table
|
|
2688
2878
|
var renderElements = function () {
|
|
@@ -2702,7 +2892,7 @@ var LoadingContent = function (props) {
|
|
|
2702
2892
|
};
|
|
2703
2893
|
return React.createElement(React.Fragment, null, renderElements());
|
|
2704
2894
|
};
|
|
2705
|
-
var templateObject_1$
|
|
2895
|
+
var templateObject_1$_;
|
|
2706
2896
|
|
|
2707
2897
|
var Pagination$1 = function (props) {
|
|
2708
2898
|
var managedCurrentPage = props.currentPage;
|
|
@@ -2869,7 +3059,7 @@ var StyledTableWrapper = styled(UnstyledTable)(templateObject_7$8 || (templateOb
|
|
|
2869
3059
|
"\n z-index: 3;\n border-bottom: 2px solid ", ";\n background-color: ", ";\n color: ", ";\n font-weight: 500;\n border-right: 2px solid ", ";\n\n ",
|
|
2870
3060
|
"\n &:last-child {\n cursor: pointer;\n color: ", ";\n }\n &:last-child,\n &:nth-last-child(2) {\n width: 1px;\n padding: 0 1rem;\n }\n\n div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n }\n }\n\n tbody {\n tr {\n &.selected {\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n }\n ",
|
|
2871
3061
|
"\n ",
|
|
2872
|
-
"\n }\n }\n "])), isHeaderFixed && css(templateObject_1
|
|
3062
|
+
"\n }\n }\n "])), isHeaderFixed && css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n position: sticky;\n top: 0;\n "], ["\n position: sticky;\n top: 0;\n "]))), palette.grey[200], palette.grey[50], palette.grey[500], palette.grey[100], !disableSelection && css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n &:first-child {\n width: 20px;\n border-right: 0;\n }\n "], ["\n &:first-child {\n width: 20px;\n border-right: 0;\n }\n "]))), palette.black, palette.yellow[50], palette.yellow[100], !isLoading && css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n "], ["\n &:hover {\n background-color: ", ";\n }\n "])), palette.grey[100]), !disableSelection && css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n &:first-child {\n width: 20px;\n }\n "], ["\n &:first-child {\n width: 20px;\n }\n "]))));
|
|
2873
3063
|
}, function (_a) {
|
|
2874
3064
|
var palette = _a.theme.palette;
|
|
2875
3065
|
return palette.blue[500];
|
|
@@ -2877,11 +3067,11 @@ var StyledTableWrapper = styled(UnstyledTable)(templateObject_7$8 || (templateOb
|
|
|
2877
3067
|
var palette = _a.theme.palette;
|
|
2878
3068
|
return css(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n .pagination__element {\n padding: 0.5rem;\n font-size: 14px;\n line-height: 24px;\n color: ", ";\n cursor: pointer;\n box-sizing: content-box;\n\n &.deactivated {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &.selected {\n color: ", ";\n background-color: ", ";\n font-weight: 500;\n border-radius: 4px;\n height: 24px;\n width: 24px;\n text-align: center;\n }\n }\n /* Loading animation */\n ", "\n "], ["\n .pagination__element {\n padding: 0.5rem;\n font-size: 14px;\n line-height: 24px;\n color: ", ";\n cursor: pointer;\n box-sizing: content-box;\n\n &.deactivated {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &.selected {\n color: ", ";\n background-color: ", ";\n font-weight: 500;\n border-radius: 4px;\n height: 24px;\n width: 24px;\n text-align: center;\n }\n }\n /* Loading animation */\n ", "\n "])), palette.grey[700], palette.white[100], palette.grey[700], linearBackground());
|
|
2879
3069
|
}, spacing.xxxl);
|
|
2880
|
-
var templateObject_1
|
|
3070
|
+
var templateObject_1$$, templateObject_2$y, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$8;
|
|
2881
3071
|
|
|
2882
3072
|
var Table = function (props) { return React.createElement(StyledTableWrapper, __assign({}, props)); };
|
|
2883
3073
|
|
|
2884
|
-
var ActiveTag = styled.span(templateObject_1$
|
|
3074
|
+
var ActiveTag = styled.span(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n background: ", ";\n width: 100%;\n height: 4px;\n margin-top: 6px;\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n"], ["\n background: ", ";\n width: 100%;\n height: 4px;\n margin-top: 6px;\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n"])), function (_a) {
|
|
2885
3075
|
var active = _a.active, theme = _a.theme;
|
|
2886
3076
|
return (active ? theme.palette.primary[500] : 'transparent');
|
|
2887
3077
|
}, function (_a) {
|
|
@@ -2891,16 +3081,16 @@ var ActiveTag = styled.span(templateObject_1$U || (templateObject_1$U = __makeTe
|
|
|
2891
3081
|
var active = _a.active, theme = _a.theme;
|
|
2892
3082
|
return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
|
|
2893
3083
|
});
|
|
2894
|
-
var templateObject_1$
|
|
3084
|
+
var templateObject_1$10;
|
|
2895
3085
|
|
|
2896
|
-
var Tab = styled.span(templateObject_1$
|
|
3086
|
+
var Tab = styled.span(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n font-family: 'Inter UI', sans-serif;\n font-style: normal;\n font-size: 14px;\n font-weight: 500;\n line-height: 21px;\n\n align-items: center;\n display: flex;\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n"], ["\n font-family: 'Inter UI', sans-serif;\n font-style: normal;\n font-size: 14px;\n font-weight: 500;\n line-height: 21px;\n\n align-items: center;\n display: flex;\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n"])), function (_a) {
|
|
2897
3087
|
var active = _a.active, theme = _a.theme;
|
|
2898
3088
|
return (active ? theme.palette.primary[500] : theme.palette.grey[500]);
|
|
2899
3089
|
}, function (_a) {
|
|
2900
3090
|
var active = _a.active, theme = _a.theme;
|
|
2901
3091
|
return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
|
|
2902
3092
|
});
|
|
2903
|
-
var templateObject_1$
|
|
3093
|
+
var templateObject_1$11;
|
|
2904
3094
|
|
|
2905
3095
|
var Item$1 = function (_a) {
|
|
2906
3096
|
var active = _a.active, handleClick = _a.handleClick, tabRef = _a.tabRef, text = _a.text;
|
|
@@ -2908,13 +3098,13 @@ var Item$1 = function (_a) {
|
|
|
2908
3098
|
React.createElement(Tab, { active: active }, text),
|
|
2909
3099
|
React.createElement(ActiveTag, { active: active })));
|
|
2910
3100
|
};
|
|
2911
|
-
var ItemWrapper = styled.div(templateObject_1$
|
|
2912
|
-
var templateObject_1$
|
|
3101
|
+
var ItemWrapper = styled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n cursor: pointer;\n flex-shrink: 0;\n position: relative;\n padding: 0;\n display: flex;\n flex-direction: column;\n"], ["\n cursor: pointer;\n flex-shrink: 0;\n position: relative;\n padding: 0;\n display: flex;\n flex-direction: column;\n"])));
|
|
3102
|
+
var templateObject_1$12;
|
|
2913
3103
|
|
|
2914
|
-
var TabsWrapper = styled.div(templateObject_2$
|
|
3104
|
+
var TabsWrapper = styled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n box-sizing: border-box;\n height: 31px;\n alignment-baseline: baseline;\n display: flex;\n white-space: nowrap;\n margin-top: 3px;\n width: 100%;\n\n ", ";\n\n & > *:first-child {\n padding-left: ", "px;\n }\n\n & > *:last-child {\n padding-right: ", "px;\n }\n\n & > * + * {\n margin-left: ", "px;\n }\n"], ["\n box-sizing: border-box;\n height: 31px;\n alignment-baseline: baseline;\n display: flex;\n white-space: nowrap;\n margin-top: 3px;\n width: 100%;\n\n ",
|
|
2915
3105
|
";\n\n & > *:first-child {\n padding-left: ", "px;\n }\n\n & > *:last-child {\n padding-right: ", "px;\n }\n\n & > * + * {\n margin-left: ", "px;\n }\n"])), function (_a) {
|
|
2916
3106
|
var hidden = _a.hidden;
|
|
2917
|
-
return hidden && css(templateObject_1$
|
|
3107
|
+
return hidden && css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n visibility: hidden;\n position: absolute;\n "], ["\n visibility: hidden;\n position: absolute;\n "])));
|
|
2918
3108
|
}, function (_a) {
|
|
2919
3109
|
var lateralPadding = _a.lateralPadding;
|
|
2920
3110
|
return lateralPadding;
|
|
@@ -2925,8 +3115,8 @@ var TabsWrapper = styled.div(templateObject_2$v || (templateObject_2$v = __makeT
|
|
|
2925
3115
|
var distance = _a.distance;
|
|
2926
3116
|
return distance;
|
|
2927
3117
|
});
|
|
2928
|
-
var ScrollableTabsWrapper = styled(TabsWrapper)(templateObject_3$
|
|
2929
|
-
var templateObject_1$
|
|
3118
|
+
var ScrollableTabsWrapper = styled(TabsWrapper)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n"], ["\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n"])));
|
|
3119
|
+
var templateObject_1$13, templateObject_2$z, templateObject_3$m;
|
|
2930
3120
|
|
|
2931
3121
|
var useResizedWidth = function () {
|
|
2932
3122
|
var _a = useMeasure(), elementsWrapperRef = _a[0], wrapperTmpWidth = _a[1].width;
|
|
@@ -2959,8 +3149,8 @@ var TabsDropdownTrigger = function (_a) {
|
|
|
2959
3149
|
var active = _a.active;
|
|
2960
3150
|
return (React.createElement(Item$1, { active: active, text: React.createElement(DropdownIcon, { icon: faEllipsisH$1, fixedWidth: true }) }));
|
|
2961
3151
|
};
|
|
2962
|
-
var DropdownIcon = styled(Icon)(templateObject_1$
|
|
2963
|
-
var templateObject_1$
|
|
3152
|
+
var DropdownIcon = styled(Icon)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n height: 21px;\n"], ["\n height: 21px;\n"])));
|
|
3153
|
+
var templateObject_1$14;
|
|
2964
3154
|
|
|
2965
3155
|
var TabsDropdown = function (_a) {
|
|
2966
3156
|
var active = _a.active, tabs = _a.tabs;
|
|
@@ -2972,10 +3162,10 @@ var TabsDropdown = function (_a) {
|
|
|
2972
3162
|
closeDropdown();
|
|
2973
3163
|
} }));
|
|
2974
3164
|
}))); }, [tabs]);
|
|
2975
|
-
return React.createElement(Dropdown$
|
|
3165
|
+
return React.createElement(Dropdown$2, { alignRight: true, fullWidth: true, renderTrigger: renderTrigger, renderContent: renderContent });
|
|
2976
3166
|
};
|
|
2977
|
-
var Dropdown$
|
|
2978
|
-
var templateObject_1$
|
|
3167
|
+
var Dropdown$2 = styled(Dropdown)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
3168
|
+
var templateObject_1$15;
|
|
2979
3169
|
|
|
2980
3170
|
var DropdownTabs = function (_a) {
|
|
2981
3171
|
var className = _a.className, _b = _a.distance, distance = _b === void 0 ? 15 : _b, _c = _a.lateralPadding, lateralPadding = _c === void 0 ? 23 : _c, tabs = _a.tabs;
|
|
@@ -3002,8 +3192,8 @@ var DropdownTabs = function (_a) {
|
|
|
3002
3192
|
dropdownVisible && React.createElement(TabsDropdown, { active: dropdownActive, tabs: dropdownItems }))));
|
|
3003
3193
|
};
|
|
3004
3194
|
// Remove scrollbar on ScrollableWrapper used until real DropdownTabs is loaded
|
|
3005
|
-
var StyledScrollableWrapper = styled(ScrollableTabsWrapper)(templateObject_1$
|
|
3006
|
-
var templateObject_1$
|
|
3195
|
+
var StyledScrollableWrapper = styled(ScrollableTabsWrapper)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n overflow-x: hidden;\n"], ["\n overflow-x: hidden;\n"])));
|
|
3196
|
+
var templateObject_1$16;
|
|
3007
3197
|
|
|
3008
3198
|
var ScrollableTabs = function (_a) {
|
|
3009
3199
|
var className = _a.className, _b = _a.distance, distance = _b === void 0 ? 15 : _b, _c = _a.lateralPadding, lateralPadding = _c === void 0 ? 23 : _c, tabs = _a.tabs;
|
|
@@ -3011,49 +3201,24 @@ var ScrollableTabs = function (_a) {
|
|
|
3011
3201
|
return (React.createElement(ScrollableTabsWrapper, { className: className, distance: distance, lateralPadding: lateralPadding }, tabsItems));
|
|
3012
3202
|
};
|
|
3013
3203
|
|
|
3014
|
-
var getTagColors = function (_a) {
|
|
3015
|
-
var tagStyle = _a.tagStyle, theme = _a.theme, type = _a.type;
|
|
3016
|
-
return theme.components.tag[tagStyle][type];
|
|
3017
|
-
};
|
|
3018
|
-
|
|
3019
|
-
var LeftIcon$2 = styled(Icon)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject([""], [""])));
|
|
3020
|
-
var RightIcon$1 = styled(Icon)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject([""], [""])));
|
|
3021
|
-
var Text$2 = styled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject([""], [""])));
|
|
3022
|
-
var StyledTag = styled.div.attrs(getTagColors)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: inline-flex;\n flex-direction: row;\n border: 4px;\n align-items: center;\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n text-align: center;\n border-radius: 4px;\n padding: 3px 8px;\n color: ", ";\n background-color: ", ";\n\n ", " + ", " {\n padding-left: 4px;\n }\n\n ", " + ", " {\n padding-right: 12px;\n }\n"], ["\n display: inline-flex;\n flex-direction: row;\n border: 4px;\n align-items: center;\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n text-align: center;\n border-radius: 4px;\n padding: 3px 8px;\n color: ", ";\n background-color: ", ";\n\n ", " + ", " {\n padding-left: 4px;\n }\n\n ", " + ", " {\n padding-right: 12px;\n }\n"])), function (_a) {
|
|
3023
|
-
var color = _a.color;
|
|
3024
|
-
return color;
|
|
3025
|
-
}, function (_a) {
|
|
3026
|
-
var backgroundColor = _a.backgroundColor;
|
|
3027
|
-
return backgroundColor;
|
|
3028
|
-
}, LeftIcon$2, Text$2, Text$2, RightIcon$1);
|
|
3029
|
-
var templateObject_1$$, templateObject_2$w, templateObject_3$l, templateObject_4$e;
|
|
3030
|
-
|
|
3031
|
-
var Tag = function (_a) {
|
|
3032
|
-
var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, tagStyle = _a.tagStyle, text = _a.text, type = _a.type, className = _a.className;
|
|
3033
|
-
return (React.createElement(StyledTag, { className: className, type: type, tagStyle: tagStyle },
|
|
3034
|
-
leftIcon && React.createElement(LeftIcon$2, __assign({}, leftIcon)),
|
|
3035
|
-
React.createElement(Text$2, null, text),
|
|
3036
|
-
rightIcon && React.createElement(RightIcon$1, __assign({}, rightIcon))));
|
|
3037
|
-
};
|
|
3038
|
-
|
|
3039
3204
|
var TextButton = function (_a) {
|
|
3040
3205
|
var _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, onClick = _a.onClick, text = _a.text, rest = __rest(_a, ["isDisabled", "onClick", "text"]);
|
|
3041
3206
|
var callback = useCallback(function () {
|
|
3042
3207
|
!isDisabled && onClick();
|
|
3043
3208
|
}, [isDisabled, onClick]);
|
|
3044
|
-
return (React.createElement(Wrapper$
|
|
3209
|
+
return (React.createElement(Wrapper$8, __assign({ isDisabled: isDisabled, onClick: callback }, rest), text));
|
|
3045
3210
|
};
|
|
3046
3211
|
var getColorIntensity = function (color) { return (color === 'white' ? 100 : 500); };
|
|
3047
|
-
var enabledCss = function (theme, color) { return css(templateObject_1$
|
|
3048
|
-
var disabledCss = css(templateObject_2$
|
|
3212
|
+
var enabledCss = function (theme, color) { return css(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n"], ["\n color: ", ";\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n"])), theme.palette[color !== null && color !== void 0 ? color : 'primary'][getColorIntensity(color)]); };
|
|
3213
|
+
var disabledCss = css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n color: ", ";\n cursor: default;\n text-decoration: none;\n"], ["\n color: ", ";\n cursor: default;\n text-decoration: none;\n"])), function (_a) {
|
|
3049
3214
|
var theme = _a.theme;
|
|
3050
3215
|
return theme.palette.grey[500];
|
|
3051
3216
|
});
|
|
3052
|
-
var Wrapper$
|
|
3217
|
+
var Wrapper$8 = styled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
3053
3218
|
var color = _a.color, isDisabled = _a.isDisabled, theme = _a.theme;
|
|
3054
3219
|
return (isDisabled ? disabledCss : enabledCss(theme, color));
|
|
3055
3220
|
});
|
|
3056
|
-
var templateObject_1$
|
|
3221
|
+
var templateObject_1$17, templateObject_2$A, templateObject_3$n;
|
|
3057
3222
|
|
|
3058
3223
|
var ThemeProvider = function (_a) {
|
|
3059
3224
|
var children = _a.children, theme = _a.theme;
|
|
@@ -3061,20 +3226,20 @@ var ThemeProvider = function (_a) {
|
|
|
3061
3226
|
React.createElement(React.Fragment, null, children)));
|
|
3062
3227
|
};
|
|
3063
3228
|
|
|
3064
|
-
var StyledTip = styled.div(templateObject_1$
|
|
3229
|
+
var StyledTip = styled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 16px;\n color: ", ";\n background-color: ", ";\n border-radius: 100px;\n"], ["\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 16px;\n color: ", ";\n background-color: ", ";\n border-radius: 100px;\n"])), function (_a) {
|
|
3065
3230
|
var palette = _a.theme.palette;
|
|
3066
3231
|
return palette.white[100];
|
|
3067
3232
|
}, function (_a) {
|
|
3068
3233
|
var palette = _a.theme.palette;
|
|
3069
3234
|
return palette.primary[400];
|
|
3070
3235
|
});
|
|
3071
|
-
var StyledLeftIcon = styled.span(templateObject_2$
|
|
3072
|
-
var StyledText = styled.span(templateObject_3$
|
|
3073
|
-
var StyledCloseIcon$1 = styled.div(templateObject_4$
|
|
3236
|
+
var StyledLeftIcon = styled.span(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin-right: 8px;\n font-size: 20px;\n"], ["\n margin-right: 8px;\n font-size: 20px;\n"])));
|
|
3237
|
+
var StyledText = styled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 21px;\n white-space: nowrap;\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 21px;\n white-space: nowrap;\n"])));
|
|
3238
|
+
var StyledCloseIcon$1 = styled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n margin-left: 32px;\n line-height: 20px;\n & :hover {\n cursor: pointer;\n color: ", ";\n }\n"], ["\n margin-left: 32px;\n line-height: 20px;\n & :hover {\n cursor: pointer;\n color: ", ";\n }\n"])), function (_a) {
|
|
3074
3239
|
var palette = _a.theme.palette;
|
|
3075
3240
|
return palette.white[100];
|
|
3076
3241
|
});
|
|
3077
|
-
var templateObject_1$
|
|
3242
|
+
var templateObject_1$18, templateObject_2$B, templateObject_3$o, templateObject_4$g;
|
|
3078
3243
|
|
|
3079
3244
|
var defaultCloseIcon$1 = {
|
|
3080
3245
|
icon: faTimes,
|
|
@@ -3099,14 +3264,14 @@ var ShortcutTip = function (props) {
|
|
|
3099
3264
|
React.createElement("b", null, shortcut)), leftIcon: rocketIcon }, rest)));
|
|
3100
3265
|
};
|
|
3101
3266
|
|
|
3102
|
-
var StyledIconDiv = styled.div(templateObject_1$
|
|
3103
|
-
var StyledIcon$
|
|
3104
|
-
var StyledTitle$1 = styled.div(templateObject_3$
|
|
3105
|
-
var StyledContent$1 = styled.div(templateObject_4$
|
|
3267
|
+
var StyledIconDiv = styled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: inline-block;\n width: 24px;\n height: 24px;\n margin-left: 16px;\n margin-top: 16px;\n text-align: center;\n"], ["\n display: inline-block;\n width: 24px;\n height: 24px;\n margin-left: 16px;\n margin-top: 16px;\n text-align: center;\n"])));
|
|
3268
|
+
var StyledIcon$5 = styled(Icon)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n vertical-align: sub;\n"], ["\n vertical-align: sub;\n"])));
|
|
3269
|
+
var StyledTitle$1 = styled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: inline-block;\n height: 24px;\n margin-left: 8px;\n margin-right: 16px;\n margin-top: 16px;\n font-weight: 500;\n width: 256px;\n"], ["\n display: inline-block;\n height: 24px;\n margin-left: 8px;\n margin-right: 16px;\n margin-top: 16px;\n font-weight: 500;\n width: 256px;\n"])));
|
|
3270
|
+
var StyledContent$1 = styled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: block;\n margin: 4px 16px 16px 48px;\n line-height: 21px;\n font-weight: 400;\n word-break: break-word;\n overflow: hidden;\n text-overflow: clip;\n"], ["\n display: block;\n margin: 4px 16px 16px 48px;\n line-height: 21px;\n font-weight: 400;\n word-break: break-word;\n overflow: hidden;\n text-overflow: clip;\n"])));
|
|
3106
3271
|
var StyledAction = styled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: inline-block;\n height: 21px;\n float: right;\n margin-right: -1px;\n cursor: pointer;\n"], ["\n display: inline-block;\n height: 21px;\n float: right;\n margin-right: -1px;\n cursor: pointer;\n"])));
|
|
3107
3272
|
var StyledToast = styled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n min-height: 56px;\n line-height: 24px;\n font-size: 14px;\n user-select: none;\n"], ["\n min-height: 56px;\n line-height: 24px;\n font-size: 14px;\n user-select: none;\n"])));
|
|
3108
3273
|
var StyledActionLabel = styled.label(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
3109
|
-
var templateObject_1$
|
|
3274
|
+
var templateObject_1$19, templateObject_2$C, templateObject_3$p, templateObject_4$h, templateObject_5$b, templateObject_6$9, templateObject_7$9;
|
|
3110
3275
|
|
|
3111
3276
|
var typeMap$2 = {
|
|
3112
3277
|
standard: 'dark',
|
|
@@ -3124,7 +3289,7 @@ var iconMap$1 = {
|
|
|
3124
3289
|
};
|
|
3125
3290
|
var ToastContent = function (props) { return (React.createElement(StyledToast, null,
|
|
3126
3291
|
React.createElement(StyledIconDiv, null,
|
|
3127
|
-
React.createElement(StyledIcon$
|
|
3292
|
+
React.createElement(StyledIcon$5, __assign({}, props.icon, { fixedWidth: true }))),
|
|
3128
3293
|
React.createElement(StyledTitle$1, null,
|
|
3129
3294
|
props.title,
|
|
3130
3295
|
React.createElement(StyledAction, null,
|
|
@@ -3158,8 +3323,8 @@ var ToastContainer = styled(ToastContainer$1).attrs({
|
|
|
3158
3323
|
closeOnClick: false,
|
|
3159
3324
|
draggable: false,
|
|
3160
3325
|
rtl: false,
|
|
3161
|
-
})(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n &.Toastify__toast-container {\n z-index: 20000;\n -webkit-transform: translate3d(0, 0, 9999px);\n position: fixed;\n padding: 0px;\n width: 320px;\n box-sizing: border-box;\n color: #fff;\n }\n &.Toastify__toast-container--top-left {\n top: 1em;\n left: 1em;\n }\n &.Toastify__toast-container--top-center {\n top: 1em;\n left: 50%;\n transform: translateX(-50%);\n }\n &.Toastify__toast-container--top-right {\n top: 1em;\n right: 1em;\n }\n &.Toastify__toast-container--bottom-left {\n bottom: 1em;\n left: 1em;\n }\n &.Toastify__toast-container--bottom-center {\n bottom: 1em;\n left: 50%;\n transform: translateX(-50%);\n }\n &.Toastify__toast-container--bottom-right {\n bottom: 1em;\n right: 1em;\n }\n\n @media only screen and (max-width: 480px) {\n &.Toastify__toast-container {\n width: 100vw;\n padding: 0;\n left: 0;\n margin: 0;\n }\n &.Toastify__toast-container--top-left,\n &.Toastify__toast-container--top-center,\n &.Toastify__toast-container--top-right {\n top: 0;\n transform: translateX(0);\n }\n &.Toastify__toast-container--bottom-left,\n &.Toastify__toast-container--bottom-center,\n &.Toastify__toast-container--bottom-right {\n bottom: 0;\n transform: translateX(0);\n }\n &.Toastify__toast-container--rtl {\n right: 0;\n left: initial;\n }\n }\n .Toastify__toast {\n position: relative;\n min-height: 56px;\n box-sizing: border-box;\n margin-bottom: 1rem;\n border-radius: 1px;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n max-height: 800px;\n overflow: hidden;\n cursor: pointer;\n direction: ltr;\n }\n .Toastify__toast--rtl {\n direction: rtl;\n }\n .Toastify__toast--dark {\n background: #091e42;\n border-radius: 4px;\n }\n .Toastify__toast--default {\n background: #fff;\n color: #aaa;\n }\n .Toastify__toast--info {\n background: #0052cc;\n border-radius: 4px;\n }\n .Toastify__toast--success {\n background: #00875a;\n border-radius: 4px;\n }\n .Toastify__toast--warning {\n background: #ff991f;\n border-radius: 4px;\n }\n .Toastify__toast--error {\n background: #de350b;\n border-radius: 4px;\n }\n .Toastify__toast-body {\n margin: auto 0;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n }\n\n @media only screen and (max-width: 480px) {\n .Toastify__toast {\n margin-bottom: 0;\n }\n }\n .Toastify__close-button {\n color: #fff;\n background: transparent;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n opacity: 0.7;\n transition: 0.3s ease;\n -ms-flex-item-align: start;\n align-self: flex-start;\n }\n .Toastify__close-button--default {\n color: #000;\n opacity: 0.3;\n }\n .Toastify__close-button > svg {\n fill: currentColor;\n height: 16px;\n width: 14px;\n }\n .Toastify__close-button:hover,\n .Toastify__close-button:focus {\n opacity: 1;\n }\n\n @keyframes Toastify__trackProgress {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\n }\n }\n .Toastify__progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 5px;\n z-index: 20000;\n opacity: 0.7;\n background-color: rgba(255, 255, 255, 0.7);\n transform-origin: left;\n }\n .Toastify__progress-bar--animated {\n animation: Toastify__trackProgress linear 1 forwards;\n }\n .Toastify__progress-bar--controlled {\n transition: transform 0.2s;\n }\n .Toastify__progress-bar--rtl {\n right: 0;\n left: initial;\n transform-origin: right;\n }\n .Toastify__progress-bar--default {\n background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n }\n .Toastify__progress-bar--dark {\n background: #bb86fc;\n }\n @keyframes Toastify__bounceInRight {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(-25px, 0, 0);\n }\n 75% {\n transform: translate3d(10px, 0, 0);\n }\n 90% {\n transform: translate3d(-5px, 0, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutRight {\n 20% {\n opacity: 1;\n transform: translate3d(-20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(2000px, 0, 0);\n }\n }\n @keyframes Toastify__bounceInLeft {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(-3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(25px, 0, 0);\n }\n 75% {\n transform: translate3d(-10px, 0, 0);\n }\n 90% {\n transform: translate3d(5px, 0, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutLeft {\n 20% {\n opacity: 1;\n transform: translate3d(20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0);\n }\n }\n @keyframes Toastify__bounceInUp {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(0, 3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n 75% {\n transform: translate3d(0, 10px, 0);\n }\n 90% {\n transform: translate3d(0, -5px, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__bounceOutUp {\n 20% {\n transform: translate3d(0, -10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, 20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, -2000px, 0);\n }\n }\n @keyframes Toastify__bounceInDown {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(0, -3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, 25px, 0);\n }\n 75% {\n transform: translate3d(0, -10px, 0);\n }\n 90% {\n transform: translate3d(0, 5px, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutDown {\n 20% {\n transform: translate3d(0, 10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, 2000px, 0);\n }\n }\n .Toastify__bounce-enter--top-left,\n .Toastify__bounce-enter--bottom-left {\n animation-name: Toastify__bounceInLeft;\n }\n .Toastify__bounce-enter--top-right,\n .Toastify__bounce-enter--bottom-right {\n animation-name: Toastify__bounceInRight;\n }\n .Toastify__bounce-enter--top-center {\n animation-name: Toastify__bounceInDown;\n }\n .Toastify__bounce-enter--bottom-center {\n animation-name: Toastify__bounceInUp;\n }\n\n .Toastify__bounce-exit--top-left,\n .Toastify__bounce-exit--bottom-left {\n animation-name: Toastify__bounceOutLeft;\n }\n .Toastify__bounce-exit--top-right,\n .Toastify__bounce-exit--bottom-right {\n animation-name: Toastify__bounceOutRight;\n }\n .Toastify__bounce-exit--top-center {\n animation-name: Toastify__bounceOutUp;\n }\n .Toastify__bounce-exit--bottom-center {\n animation-name: Toastify__bounceOutDown;\n }\n\n @keyframes Toastify__zoomIn {\n from {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n 50% {\n opacity: 1;\n }\n }\n @keyframes Toastify__zoomOut {\n from {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n to {\n opacity: 0;\n }\n }\n .Toastify__zoom-enter {\n animation-name: Toastify__zoomIn;\n }\n\n .Toastify__zoom-exit {\n animation-name: Toastify__zoomOut;\n }\n\n @keyframes Toastify__flipIn {\n from {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 40% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n animation-timing-function: ease-in;\n }\n 60% {\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n 80% {\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n to {\n transform: perspective(400px);\n }\n }\n @keyframes Toastify__flipOut {\n from {\n transform: perspective(400px);\n }\n 30% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n to {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n }\n .Toastify__flip-enter {\n animation-name: Toastify__flipIn;\n }\n\n .Toastify__flip-exit {\n animation-name: Toastify__flipOut;\n }\n\n @keyframes Toastify__slideInRight {\n from {\n transform: translate3d(110%, 0, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInLeft {\n from {\n transform: translate3d(-110%, 0, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInUp {\n from {\n transform: translate3d(0, 110%, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInDown {\n from {\n transform: translate3d(0, -110%, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideOutRight {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(110%, 0, 0);\n }\n }\n @keyframes Toastify__slideOutLeft {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(-110%, 0, 0);\n }\n }\n @keyframes Toastify__slideOutDown {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, 500px, 0);\n }\n }\n @keyframes Toastify__slideOutUp {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, -500px, 0);\n }\n }\n .Toastify__slide-enter--top-left,\n .Toastify__slide-enter--bottom-left {\n animation-name: Toastify__slideInLeft;\n }\n .Toastify__slide-enter--top-right,\n .Toastify__slide-enter--bottom-right {\n animation-name: Toastify__slideInRight;\n }\n .Toastify__slide-enter--top-center {\n animation-name: Toastify__slideInDown;\n }\n .Toastify__slide-enter--bottom-center {\n animation-name: Toastify__slideInUp;\n }\n\n .Toastify__slide-exit--top-left,\n .Toastify__slide-exit--bottom-left {\n animation-name: Toastify__slideOutLeft;\n }\n .Toastify__slide-exit--top-right,\n .Toastify__slide-exit--bottom-right {\n animation-name: Toastify__slideOutRight;\n }\n .Toastify__slide-exit--top-center {\n animation-name: Toastify__slideOutUp;\n }\n .Toastify__slide-exit--bottom-center {\n animation-name: Toastify__slideOutDown;\n }\n\n /*# sourceMappingURL=ReactToastify.css.map */\n"], ["\n &.Toastify__toast-container {\n z-index: 20000;\n -webkit-transform: translate3d(0, 0, 9999px);\n position: fixed;\n padding: 0px;\n width: 320px;\n box-sizing: border-box;\n color: #fff;\n }\n &.Toastify__toast-container--top-left {\n top: 1em;\n left: 1em;\n }\n &.Toastify__toast-container--top-center {\n top: 1em;\n left: 50%;\n transform: translateX(-50%);\n }\n &.Toastify__toast-container--top-right {\n top: 1em;\n right: 1em;\n }\n &.Toastify__toast-container--bottom-left {\n bottom: 1em;\n left: 1em;\n }\n &.Toastify__toast-container--bottom-center {\n bottom: 1em;\n left: 50%;\n transform: translateX(-50%);\n }\n &.Toastify__toast-container--bottom-right {\n bottom: 1em;\n right: 1em;\n }\n\n @media only screen and (max-width: 480px) {\n &.Toastify__toast-container {\n width: 100vw;\n padding: 0;\n left: 0;\n margin: 0;\n }\n &.Toastify__toast-container--top-left,\n &.Toastify__toast-container--top-center,\n &.Toastify__toast-container--top-right {\n top: 0;\n transform: translateX(0);\n }\n &.Toastify__toast-container--bottom-left,\n &.Toastify__toast-container--bottom-center,\n &.Toastify__toast-container--bottom-right {\n bottom: 0;\n transform: translateX(0);\n }\n &.Toastify__toast-container--rtl {\n right: 0;\n left: initial;\n }\n }\n .Toastify__toast {\n position: relative;\n min-height: 56px;\n box-sizing: border-box;\n margin-bottom: 1rem;\n border-radius: 1px;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n max-height: 800px;\n overflow: hidden;\n cursor: pointer;\n direction: ltr;\n }\n .Toastify__toast--rtl {\n direction: rtl;\n }\n .Toastify__toast--dark {\n background: #091e42;\n border-radius: 4px;\n }\n .Toastify__toast--default {\n background: #fff;\n color: #aaa;\n }\n .Toastify__toast--info {\n background: #0052cc;\n border-radius: 4px;\n }\n .Toastify__toast--success {\n background: #00875a;\n border-radius: 4px;\n }\n .Toastify__toast--warning {\n background: #ff991f;\n border-radius: 4px;\n }\n .Toastify__toast--error {\n background: #de350b;\n border-radius: 4px;\n }\n .Toastify__toast-body {\n margin: auto 0;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n }\n\n @media only screen and (max-width: 480px) {\n .Toastify__toast {\n margin-bottom: 0;\n }\n }\n .Toastify__close-button {\n color: #fff;\n background: transparent;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n opacity: 0.7;\n transition: 0.3s ease;\n -ms-flex-item-align: start;\n align-self: flex-start;\n }\n .Toastify__close-button--default {\n color: #000;\n opacity: 0.3;\n }\n .Toastify__close-button > svg {\n fill: currentColor;\n height: 16px;\n width: 14px;\n }\n .Toastify__close-button:hover,\n .Toastify__close-button:focus {\n opacity: 1;\n }\n\n @keyframes Toastify__trackProgress {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\n }\n }\n .Toastify__progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 5px;\n z-index: 20000;\n opacity: 0.7;\n background-color: rgba(255, 255, 255, 0.7);\n transform-origin: left;\n }\n .Toastify__progress-bar--animated {\n animation: Toastify__trackProgress linear 1 forwards;\n }\n .Toastify__progress-bar--controlled {\n transition: transform 0.2s;\n }\n .Toastify__progress-bar--rtl {\n right: 0;\n left: initial;\n transform-origin: right;\n }\n .Toastify__progress-bar--default {\n background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n }\n .Toastify__progress-bar--dark {\n background: #bb86fc;\n }\n @keyframes Toastify__bounceInRight {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(-25px, 0, 0);\n }\n 75% {\n transform: translate3d(10px, 0, 0);\n }\n 90% {\n transform: translate3d(-5px, 0, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutRight {\n 20% {\n opacity: 1;\n transform: translate3d(-20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(2000px, 0, 0);\n }\n }\n @keyframes Toastify__bounceInLeft {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(-3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(25px, 0, 0);\n }\n 75% {\n transform: translate3d(-10px, 0, 0);\n }\n 90% {\n transform: translate3d(5px, 0, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutLeft {\n 20% {\n opacity: 1;\n transform: translate3d(20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0);\n }\n }\n @keyframes Toastify__bounceInUp {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(0, 3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n 75% {\n transform: translate3d(0, 10px, 0);\n }\n 90% {\n transform: translate3d(0, -5px, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__bounceOutUp {\n 20% {\n transform: translate3d(0, -10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, 20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, -2000px, 0);\n }\n }\n @keyframes Toastify__bounceInDown {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(0, -3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, 25px, 0);\n }\n 75% {\n transform: translate3d(0, -10px, 0);\n }\n 90% {\n transform: translate3d(0, 5px, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutDown {\n 20% {\n transform: translate3d(0, 10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, 2000px, 0);\n }\n }\n .Toastify__bounce-enter--top-left,\n .Toastify__bounce-enter--bottom-left {\n animation-name: Toastify__bounceInLeft;\n }\n .Toastify__bounce-enter--top-right,\n .Toastify__bounce-enter--bottom-right {\n animation-name: Toastify__bounceInRight;\n }\n .Toastify__bounce-enter--top-center {\n animation-name: Toastify__bounceInDown;\n }\n .Toastify__bounce-enter--bottom-center {\n animation-name: Toastify__bounceInUp;\n }\n\n .Toastify__bounce-exit--top-left,\n .Toastify__bounce-exit--bottom-left {\n animation-name: Toastify__bounceOutLeft;\n }\n .Toastify__bounce-exit--top-right,\n .Toastify__bounce-exit--bottom-right {\n animation-name: Toastify__bounceOutRight;\n }\n .Toastify__bounce-exit--top-center {\n animation-name: Toastify__bounceOutUp;\n }\n .Toastify__bounce-exit--bottom-center {\n animation-name: Toastify__bounceOutDown;\n }\n\n @keyframes Toastify__zoomIn {\n from {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n 50% {\n opacity: 1;\n }\n }\n @keyframes Toastify__zoomOut {\n from {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n to {\n opacity: 0;\n }\n }\n .Toastify__zoom-enter {\n animation-name: Toastify__zoomIn;\n }\n\n .Toastify__zoom-exit {\n animation-name: Toastify__zoomOut;\n }\n\n @keyframes Toastify__flipIn {\n from {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 40% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n animation-timing-function: ease-in;\n }\n 60% {\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n 80% {\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n to {\n transform: perspective(400px);\n }\n }\n @keyframes Toastify__flipOut {\n from {\n transform: perspective(400px);\n }\n 30% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n to {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n }\n .Toastify__flip-enter {\n animation-name: Toastify__flipIn;\n }\n\n .Toastify__flip-exit {\n animation-name: Toastify__flipOut;\n }\n\n @keyframes Toastify__slideInRight {\n from {\n transform: translate3d(110%, 0, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInLeft {\n from {\n transform: translate3d(-110%, 0, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInUp {\n from {\n transform: translate3d(0, 110%, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInDown {\n from {\n transform: translate3d(0, -110%, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideOutRight {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(110%, 0, 0);\n }\n }\n @keyframes Toastify__slideOutLeft {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(-110%, 0, 0);\n }\n }\n @keyframes Toastify__slideOutDown {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, 500px, 0);\n }\n }\n @keyframes Toastify__slideOutUp {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, -500px, 0);\n }\n }\n .Toastify__slide-enter--top-left,\n .Toastify__slide-enter--bottom-left {\n animation-name: Toastify__slideInLeft;\n }\n .Toastify__slide-enter--top-right,\n .Toastify__slide-enter--bottom-right {\n animation-name: Toastify__slideInRight;\n }\n .Toastify__slide-enter--top-center {\n animation-name: Toastify__slideInDown;\n }\n .Toastify__slide-enter--bottom-center {\n animation-name: Toastify__slideInUp;\n }\n\n .Toastify__slide-exit--top-left,\n .Toastify__slide-exit--bottom-left {\n animation-name: Toastify__slideOutLeft;\n }\n .Toastify__slide-exit--top-right,\n .Toastify__slide-exit--bottom-right {\n animation-name: Toastify__slideOutRight;\n }\n .Toastify__slide-exit--top-center {\n animation-name: Toastify__slideOutUp;\n }\n .Toastify__slide-exit--bottom-center {\n animation-name: Toastify__slideOutDown;\n }\n\n /*# sourceMappingURL=ReactToastify.css.map */\n"])));
|
|
3162
|
-
var templateObject_1$
|
|
3326
|
+
})(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n &.Toastify__toast-container {\n z-index: 20000;\n -webkit-transform: translate3d(0, 0, 9999px);\n position: fixed;\n padding: 0px;\n width: 320px;\n box-sizing: border-box;\n color: #fff;\n }\n &.Toastify__toast-container--top-left {\n top: 1em;\n left: 1em;\n }\n &.Toastify__toast-container--top-center {\n top: 1em;\n left: 50%;\n transform: translateX(-50%);\n }\n &.Toastify__toast-container--top-right {\n top: 1em;\n right: 1em;\n }\n &.Toastify__toast-container--bottom-left {\n bottom: 1em;\n left: 1em;\n }\n &.Toastify__toast-container--bottom-center {\n bottom: 1em;\n left: 50%;\n transform: translateX(-50%);\n }\n &.Toastify__toast-container--bottom-right {\n bottom: 1em;\n right: 1em;\n }\n\n @media only screen and (max-width: 480px) {\n &.Toastify__toast-container {\n width: 100vw;\n padding: 0;\n left: 0;\n margin: 0;\n }\n &.Toastify__toast-container--top-left,\n &.Toastify__toast-container--top-center,\n &.Toastify__toast-container--top-right {\n top: 0;\n transform: translateX(0);\n }\n &.Toastify__toast-container--bottom-left,\n &.Toastify__toast-container--bottom-center,\n &.Toastify__toast-container--bottom-right {\n bottom: 0;\n transform: translateX(0);\n }\n &.Toastify__toast-container--rtl {\n right: 0;\n left: initial;\n }\n }\n .Toastify__toast {\n position: relative;\n min-height: 56px;\n box-sizing: border-box;\n margin-bottom: 1rem;\n border-radius: 1px;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n max-height: 800px;\n overflow: hidden;\n cursor: pointer;\n direction: ltr;\n }\n .Toastify__toast--rtl {\n direction: rtl;\n }\n .Toastify__toast--dark {\n background: #091e42;\n border-radius: 4px;\n }\n .Toastify__toast--default {\n background: #fff;\n color: #aaa;\n }\n .Toastify__toast--info {\n background: #0052cc;\n border-radius: 4px;\n }\n .Toastify__toast--success {\n background: #00875a;\n border-radius: 4px;\n }\n .Toastify__toast--warning {\n background: #ff991f;\n border-radius: 4px;\n }\n .Toastify__toast--error {\n background: #de350b;\n border-radius: 4px;\n }\n .Toastify__toast-body {\n margin: auto 0;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n }\n\n @media only screen and (max-width: 480px) {\n .Toastify__toast {\n margin-bottom: 0;\n }\n }\n .Toastify__close-button {\n color: #fff;\n background: transparent;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n opacity: 0.7;\n transition: 0.3s ease;\n -ms-flex-item-align: start;\n align-self: flex-start;\n }\n .Toastify__close-button--default {\n color: #000;\n opacity: 0.3;\n }\n .Toastify__close-button > svg {\n fill: currentColor;\n height: 16px;\n width: 14px;\n }\n .Toastify__close-button:hover,\n .Toastify__close-button:focus {\n opacity: 1;\n }\n\n @keyframes Toastify__trackProgress {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\n }\n }\n .Toastify__progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 5px;\n z-index: 20000;\n opacity: 0.7;\n background-color: rgba(255, 255, 255, 0.7);\n transform-origin: left;\n }\n .Toastify__progress-bar--animated {\n animation: Toastify__trackProgress linear 1 forwards;\n }\n .Toastify__progress-bar--controlled {\n transition: transform 0.2s;\n }\n .Toastify__progress-bar--rtl {\n right: 0;\n left: initial;\n transform-origin: right;\n }\n .Toastify__progress-bar--default {\n background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n }\n .Toastify__progress-bar--dark {\n background: #bb86fc;\n }\n @keyframes Toastify__bounceInRight {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(-25px, 0, 0);\n }\n 75% {\n transform: translate3d(10px, 0, 0);\n }\n 90% {\n transform: translate3d(-5px, 0, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutRight {\n 20% {\n opacity: 1;\n transform: translate3d(-20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(2000px, 0, 0);\n }\n }\n @keyframes Toastify__bounceInLeft {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(-3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(25px, 0, 0);\n }\n 75% {\n transform: translate3d(-10px, 0, 0);\n }\n 90% {\n transform: translate3d(5px, 0, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutLeft {\n 20% {\n opacity: 1;\n transform: translate3d(20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0);\n }\n }\n @keyframes Toastify__bounceInUp {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(0, 3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n 75% {\n transform: translate3d(0, 10px, 0);\n }\n 90% {\n transform: translate3d(0, -5px, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__bounceOutUp {\n 20% {\n transform: translate3d(0, -10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, 20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, -2000px, 0);\n }\n }\n @keyframes Toastify__bounceInDown {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(0, -3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, 25px, 0);\n }\n 75% {\n transform: translate3d(0, -10px, 0);\n }\n 90% {\n transform: translate3d(0, 5px, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutDown {\n 20% {\n transform: translate3d(0, 10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, 2000px, 0);\n }\n }\n .Toastify__bounce-enter--top-left,\n .Toastify__bounce-enter--bottom-left {\n animation-name: Toastify__bounceInLeft;\n }\n .Toastify__bounce-enter--top-right,\n .Toastify__bounce-enter--bottom-right {\n animation-name: Toastify__bounceInRight;\n }\n .Toastify__bounce-enter--top-center {\n animation-name: Toastify__bounceInDown;\n }\n .Toastify__bounce-enter--bottom-center {\n animation-name: Toastify__bounceInUp;\n }\n\n .Toastify__bounce-exit--top-left,\n .Toastify__bounce-exit--bottom-left {\n animation-name: Toastify__bounceOutLeft;\n }\n .Toastify__bounce-exit--top-right,\n .Toastify__bounce-exit--bottom-right {\n animation-name: Toastify__bounceOutRight;\n }\n .Toastify__bounce-exit--top-center {\n animation-name: Toastify__bounceOutUp;\n }\n .Toastify__bounce-exit--bottom-center {\n animation-name: Toastify__bounceOutDown;\n }\n\n @keyframes Toastify__zoomIn {\n from {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n 50% {\n opacity: 1;\n }\n }\n @keyframes Toastify__zoomOut {\n from {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n to {\n opacity: 0;\n }\n }\n .Toastify__zoom-enter {\n animation-name: Toastify__zoomIn;\n }\n\n .Toastify__zoom-exit {\n animation-name: Toastify__zoomOut;\n }\n\n @keyframes Toastify__flipIn {\n from {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 40% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n animation-timing-function: ease-in;\n }\n 60% {\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n 80% {\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n to {\n transform: perspective(400px);\n }\n }\n @keyframes Toastify__flipOut {\n from {\n transform: perspective(400px);\n }\n 30% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n to {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n }\n .Toastify__flip-enter {\n animation-name: Toastify__flipIn;\n }\n\n .Toastify__flip-exit {\n animation-name: Toastify__flipOut;\n }\n\n @keyframes Toastify__slideInRight {\n from {\n transform: translate3d(110%, 0, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInLeft {\n from {\n transform: translate3d(-110%, 0, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInUp {\n from {\n transform: translate3d(0, 110%, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInDown {\n from {\n transform: translate3d(0, -110%, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideOutRight {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(110%, 0, 0);\n }\n }\n @keyframes Toastify__slideOutLeft {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(-110%, 0, 0);\n }\n }\n @keyframes Toastify__slideOutDown {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, 500px, 0);\n }\n }\n @keyframes Toastify__slideOutUp {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, -500px, 0);\n }\n }\n .Toastify__slide-enter--top-left,\n .Toastify__slide-enter--bottom-left {\n animation-name: Toastify__slideInLeft;\n }\n .Toastify__slide-enter--top-right,\n .Toastify__slide-enter--bottom-right {\n animation-name: Toastify__slideInRight;\n }\n .Toastify__slide-enter--top-center {\n animation-name: Toastify__slideInDown;\n }\n .Toastify__slide-enter--bottom-center {\n animation-name: Toastify__slideInUp;\n }\n\n .Toastify__slide-exit--top-left,\n .Toastify__slide-exit--bottom-left {\n animation-name: Toastify__slideOutLeft;\n }\n .Toastify__slide-exit--top-right,\n .Toastify__slide-exit--bottom-right {\n animation-name: Toastify__slideOutRight;\n }\n .Toastify__slide-exit--top-center {\n animation-name: Toastify__slideOutUp;\n }\n .Toastify__slide-exit--bottom-center {\n animation-name: Toastify__slideOutDown;\n }\n\n /*# sourceMappingURL=ReactToastify.css.map */\n"], ["\n &.Toastify__toast-container {\n z-index: 20000;\n -webkit-transform: translate3d(0, 0, 9999px);\n position: fixed;\n padding: 0px;\n width: 320px;\n box-sizing: border-box;\n color: #fff;\n }\n &.Toastify__toast-container--top-left {\n top: 1em;\n left: 1em;\n }\n &.Toastify__toast-container--top-center {\n top: 1em;\n left: 50%;\n transform: translateX(-50%);\n }\n &.Toastify__toast-container--top-right {\n top: 1em;\n right: 1em;\n }\n &.Toastify__toast-container--bottom-left {\n bottom: 1em;\n left: 1em;\n }\n &.Toastify__toast-container--bottom-center {\n bottom: 1em;\n left: 50%;\n transform: translateX(-50%);\n }\n &.Toastify__toast-container--bottom-right {\n bottom: 1em;\n right: 1em;\n }\n\n @media only screen and (max-width: 480px) {\n &.Toastify__toast-container {\n width: 100vw;\n padding: 0;\n left: 0;\n margin: 0;\n }\n &.Toastify__toast-container--top-left,\n &.Toastify__toast-container--top-center,\n &.Toastify__toast-container--top-right {\n top: 0;\n transform: translateX(0);\n }\n &.Toastify__toast-container--bottom-left,\n &.Toastify__toast-container--bottom-center,\n &.Toastify__toast-container--bottom-right {\n bottom: 0;\n transform: translateX(0);\n }\n &.Toastify__toast-container--rtl {\n right: 0;\n left: initial;\n }\n }\n .Toastify__toast {\n position: relative;\n min-height: 56px;\n box-sizing: border-box;\n margin-bottom: 1rem;\n border-radius: 1px;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n max-height: 800px;\n overflow: hidden;\n cursor: pointer;\n direction: ltr;\n }\n .Toastify__toast--rtl {\n direction: rtl;\n }\n .Toastify__toast--dark {\n background: #091e42;\n border-radius: 4px;\n }\n .Toastify__toast--default {\n background: #fff;\n color: #aaa;\n }\n .Toastify__toast--info {\n background: #0052cc;\n border-radius: 4px;\n }\n .Toastify__toast--success {\n background: #00875a;\n border-radius: 4px;\n }\n .Toastify__toast--warning {\n background: #ff991f;\n border-radius: 4px;\n }\n .Toastify__toast--error {\n background: #de350b;\n border-radius: 4px;\n }\n .Toastify__toast-body {\n margin: auto 0;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n }\n\n @media only screen and (max-width: 480px) {\n .Toastify__toast {\n margin-bottom: 0;\n }\n }\n .Toastify__close-button {\n color: #fff;\n background: transparent;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n opacity: 0.7;\n transition: 0.3s ease;\n -ms-flex-item-align: start;\n align-self: flex-start;\n }\n .Toastify__close-button--default {\n color: #000;\n opacity: 0.3;\n }\n .Toastify__close-button > svg {\n fill: currentColor;\n height: 16px;\n width: 14px;\n }\n .Toastify__close-button:hover,\n .Toastify__close-button:focus {\n opacity: 1;\n }\n\n @keyframes Toastify__trackProgress {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\n }\n }\n .Toastify__progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 5px;\n z-index: 20000;\n opacity: 0.7;\n background-color: rgba(255, 255, 255, 0.7);\n transform-origin: left;\n }\n .Toastify__progress-bar--animated {\n animation: Toastify__trackProgress linear 1 forwards;\n }\n .Toastify__progress-bar--controlled {\n transition: transform 0.2s;\n }\n .Toastify__progress-bar--rtl {\n right: 0;\n left: initial;\n transform-origin: right;\n }\n .Toastify__progress-bar--default {\n background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n }\n .Toastify__progress-bar--dark {\n background: #bb86fc;\n }\n @keyframes Toastify__bounceInRight {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(-25px, 0, 0);\n }\n 75% {\n transform: translate3d(10px, 0, 0);\n }\n 90% {\n transform: translate3d(-5px, 0, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutRight {\n 20% {\n opacity: 1;\n transform: translate3d(-20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(2000px, 0, 0);\n }\n }\n @keyframes Toastify__bounceInLeft {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(-3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(25px, 0, 0);\n }\n 75% {\n transform: translate3d(-10px, 0, 0);\n }\n 90% {\n transform: translate3d(5px, 0, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutLeft {\n 20% {\n opacity: 1;\n transform: translate3d(20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0);\n }\n }\n @keyframes Toastify__bounceInUp {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(0, 3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n 75% {\n transform: translate3d(0, 10px, 0);\n }\n 90% {\n transform: translate3d(0, -5px, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__bounceOutUp {\n 20% {\n transform: translate3d(0, -10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, 20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, -2000px, 0);\n }\n }\n @keyframes Toastify__bounceInDown {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(0, -3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, 25px, 0);\n }\n 75% {\n transform: translate3d(0, -10px, 0);\n }\n 90% {\n transform: translate3d(0, 5px, 0);\n }\n to {\n transform: none;\n }\n }\n @keyframes Toastify__bounceOutDown {\n 20% {\n transform: translate3d(0, 10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, 2000px, 0);\n }\n }\n .Toastify__bounce-enter--top-left,\n .Toastify__bounce-enter--bottom-left {\n animation-name: Toastify__bounceInLeft;\n }\n .Toastify__bounce-enter--top-right,\n .Toastify__bounce-enter--bottom-right {\n animation-name: Toastify__bounceInRight;\n }\n .Toastify__bounce-enter--top-center {\n animation-name: Toastify__bounceInDown;\n }\n .Toastify__bounce-enter--bottom-center {\n animation-name: Toastify__bounceInUp;\n }\n\n .Toastify__bounce-exit--top-left,\n .Toastify__bounce-exit--bottom-left {\n animation-name: Toastify__bounceOutLeft;\n }\n .Toastify__bounce-exit--top-right,\n .Toastify__bounce-exit--bottom-right {\n animation-name: Toastify__bounceOutRight;\n }\n .Toastify__bounce-exit--top-center {\n animation-name: Toastify__bounceOutUp;\n }\n .Toastify__bounce-exit--bottom-center {\n animation-name: Toastify__bounceOutDown;\n }\n\n @keyframes Toastify__zoomIn {\n from {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n 50% {\n opacity: 1;\n }\n }\n @keyframes Toastify__zoomOut {\n from {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n to {\n opacity: 0;\n }\n }\n .Toastify__zoom-enter {\n animation-name: Toastify__zoomIn;\n }\n\n .Toastify__zoom-exit {\n animation-name: Toastify__zoomOut;\n }\n\n @keyframes Toastify__flipIn {\n from {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 40% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n animation-timing-function: ease-in;\n }\n 60% {\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n 80% {\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n to {\n transform: perspective(400px);\n }\n }\n @keyframes Toastify__flipOut {\n from {\n transform: perspective(400px);\n }\n 30% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n to {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n }\n .Toastify__flip-enter {\n animation-name: Toastify__flipIn;\n }\n\n .Toastify__flip-exit {\n animation-name: Toastify__flipOut;\n }\n\n @keyframes Toastify__slideInRight {\n from {\n transform: translate3d(110%, 0, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInLeft {\n from {\n transform: translate3d(-110%, 0, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInUp {\n from {\n transform: translate3d(0, 110%, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideInDown {\n from {\n transform: translate3d(0, -110%, 0);\n visibility: visible;\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n @keyframes Toastify__slideOutRight {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(110%, 0, 0);\n }\n }\n @keyframes Toastify__slideOutLeft {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(-110%, 0, 0);\n }\n }\n @keyframes Toastify__slideOutDown {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, 500px, 0);\n }\n }\n @keyframes Toastify__slideOutUp {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, -500px, 0);\n }\n }\n .Toastify__slide-enter--top-left,\n .Toastify__slide-enter--bottom-left {\n animation-name: Toastify__slideInLeft;\n }\n .Toastify__slide-enter--top-right,\n .Toastify__slide-enter--bottom-right {\n animation-name: Toastify__slideInRight;\n }\n .Toastify__slide-enter--top-center {\n animation-name: Toastify__slideInDown;\n }\n .Toastify__slide-enter--bottom-center {\n animation-name: Toastify__slideInUp;\n }\n\n .Toastify__slide-exit--top-left,\n .Toastify__slide-exit--bottom-left {\n animation-name: Toastify__slideOutLeft;\n }\n .Toastify__slide-exit--top-right,\n .Toastify__slide-exit--bottom-right {\n animation-name: Toastify__slideOutRight;\n }\n .Toastify__slide-exit--top-center {\n animation-name: Toastify__slideOutUp;\n }\n .Toastify__slide-exit--bottom-center {\n animation-name: Toastify__slideOutDown;\n }\n\n /*# sourceMappingURL=ReactToastify.css.map */\n"])));
|
|
3327
|
+
var templateObject_1$1a;
|
|
3163
3328
|
|
|
3164
3329
|
var Toast = {
|
|
3165
3330
|
Container: ToastContainer,
|
|
@@ -3172,74 +3337,4 @@ var Toast = {
|
|
|
3172
3337
|
standard: standard,
|
|
3173
3338
|
};
|
|
3174
3339
|
|
|
3175
|
-
|
|
3176
|
-
var theme = _a.theme;
|
|
3177
|
-
return theme.palette.grey[900];
|
|
3178
|
-
});
|
|
3179
|
-
var arrowStyle = css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n &[data-popper-placement^='top'] > ", " {\n bottom: -5px;\n &:after {\n border-bottom-right-radius: 3px;\n }\n }\n\n &[data-popper-placement^='bottom'] > ", " {\n top: -5px;\n &:after {\n border-top-left-radius: 3px;\n }\n }\n\n &[data-popper-placement^='left'] > ", " {\n right: -5px;\n &:after {\n border-top-right-radius: 3px;\n }\n }\n\n &[data-popper-placement^='right'] > ", " {\n left: -5px;\n &:after {\n border-bottom-left-radius: 3px;\n }\n }\n"], ["\n &[data-popper-placement^='top'] > ", " {\n bottom: -5px;\n &:after {\n border-bottom-right-radius: 3px;\n }\n }\n\n &[data-popper-placement^='bottom'] > ", " {\n top: -5px;\n &:after {\n border-top-left-radius: 3px;\n }\n }\n\n &[data-popper-placement^='left'] > ", " {\n right: -5px;\n &:after {\n border-top-right-radius: 3px;\n }\n }\n\n &[data-popper-placement^='right'] > ", " {\n left: -5px;\n &:after {\n border-bottom-left-radius: 3px;\n }\n }\n"])), Arrow, Arrow, Arrow, Arrow);
|
|
3180
|
-
var templateObject_1$14, templateObject_2$A;
|
|
3181
|
-
|
|
3182
|
-
var getMessageStyles = function (_a) {
|
|
3183
|
-
var theme = _a.theme, type = _a.type;
|
|
3184
|
-
return theme.components.tooltip[type];
|
|
3185
|
-
};
|
|
3186
|
-
var Message = styled.div.attrs(getMessageStyles)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n z-index: 9;\n\n font-size: 14px;\n\n padding: 4px 8px;\n border-radius: 3px;\n\n box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n\n color: ", ";\n background: ", ";\n"], ["\n z-index: 9;\n\n font-size: 14px;\n\n padding: 4px 8px;\n border-radius: 3px;\n\n box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n\n color: ", ";\n background: ", ";\n"])), function (_a) {
|
|
3187
|
-
var color = _a.color;
|
|
3188
|
-
return color;
|
|
3189
|
-
}, function (_a) {
|
|
3190
|
-
var background = _a.background;
|
|
3191
|
-
return background;
|
|
3192
|
-
});
|
|
3193
|
-
var templateObject_1$15;
|
|
3194
|
-
|
|
3195
|
-
var TooltipContainer = styled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), arrowStyle);
|
|
3196
|
-
var templateObject_1$16;
|
|
3197
|
-
|
|
3198
|
-
var Tooltip = function (_a) {
|
|
3199
|
-
var message = _a.message, placement = _a.placement, className = _a.className, children = _a.children, type = _a.type, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
|
|
3200
|
-
var wrapperRef = useRef(null);
|
|
3201
|
-
var popperRef = useRef(null);
|
|
3202
|
-
var buttonRef = useRef(null);
|
|
3203
|
-
var _b = useState(null), arrowRef = _b[0], setArrowRef = _b[1];
|
|
3204
|
-
var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
|
|
3205
|
-
var show = useCallback(function () { return setIsOpen(true); }, []);
|
|
3206
|
-
var hide = useCallback(function () { return setIsOpen(false); }, []);
|
|
3207
|
-
var _onMouseEnter = useCallback(function (e) {
|
|
3208
|
-
show();
|
|
3209
|
-
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
|
|
3210
|
-
}, [onMouseEnter, show]);
|
|
3211
|
-
var _onMouseLeave = useCallback(function (e) {
|
|
3212
|
-
hide();
|
|
3213
|
-
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
|
|
3214
|
-
}, [hide, onMouseLeave]);
|
|
3215
|
-
var _d = usePopper(buttonRef.current, popperRef.current, {
|
|
3216
|
-
placement: placement,
|
|
3217
|
-
strategy: 'fixed',
|
|
3218
|
-
modifiers: useMemo(function () { return [
|
|
3219
|
-
{
|
|
3220
|
-
name: 'arrow',
|
|
3221
|
-
options: {
|
|
3222
|
-
element: arrowRef,
|
|
3223
|
-
},
|
|
3224
|
-
},
|
|
3225
|
-
{
|
|
3226
|
-
name: 'offset',
|
|
3227
|
-
options: {
|
|
3228
|
-
offset: [0, 10],
|
|
3229
|
-
},
|
|
3230
|
-
},
|
|
3231
|
-
]; }, [arrowRef]),
|
|
3232
|
-
}), attributes = _d.attributes, styles = _d.styles;
|
|
3233
|
-
return (React.createElement(Wrapper$8, { className: className, ref: wrapperRef },
|
|
3234
|
-
React.createElement("div", { ref: buttonRef, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave }, children),
|
|
3235
|
-
React.createElement(CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
|
|
3236
|
-
React.createElement(BodyAnimationWrapper$1, null,
|
|
3237
|
-
React.createElement(TooltipContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
|
|
3238
|
-
React.createElement(Arrow, { ref: setArrowRef, style: styles.arrow }),
|
|
3239
|
-
React.createElement(Message, { type: type, style: styles.offset }, message))))));
|
|
3240
|
-
};
|
|
3241
|
-
var Wrapper$8 = styled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3242
|
-
var BodyAnimationWrapper$1 = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n &.enter {\n opacity: 0;\n margin-top: -10px;\n }\n\n &.enter-active {\n opacity: 1;\n margin-top: 0;\n transition: margin-top 200ms, opacity 200ms;\n }\n\n &.exit {\n opacity: 1;\n margin-top: 0;\n }\n\n &.exit-active {\n opacity: 0;\n margin-top: -10px;\n transition: margin-top 200ms, opacity 200ms;\n }\n"], ["\n &.enter {\n opacity: 0;\n margin-top: -10px;\n }\n\n &.enter-active {\n opacity: 1;\n margin-top: 0;\n transition: margin-top 200ms, opacity 200ms;\n }\n\n &.exit {\n opacity: 1;\n margin-top: 0;\n }\n\n &.exit-active {\n opacity: 0;\n margin-top: -10px;\n transition: margin-top 200ms, opacity 200ms;\n }\n"])));
|
|
3243
|
-
var templateObject_1$17, templateObject_2$B;
|
|
3244
|
-
|
|
3245
|
-
export { Accordion, Avatar, Badge, Banner, Button, Checkbox, Chip, ConfirmationModal, Drawer, Dropdown, DropdownTabs, EInputErrorTypes, EInputSize, EInputTags, EInputTypes, GroupedList, Icon, IconBackground, IconButton, InlineMessage, InputText, MicroTag, Modal, ModalBody, ModalSearchable, PageEmptySet, Pagination, Progressbar, RadioButton, RadioButtonGroup, ScrollableTabs, Select, SelectAsync, SelectCreatable, ShortcutTip, StepBar, Table, Tag, TextButton, ThemeProvider, Tip, Toast, Tooltip, WithBadge, iconBackgroundPalette, useCheckboxValue };
|
|
3340
|
+
export { Accordion, Avatar, Badge, Banner, Button, Checkbox, Chip, ConfirmationModal, Drawer, Dropdown, DropdownTabs, EInputErrorTypes, EInputSize, EInputTags, EInputTypes, GroupedList, Icon, IconBackground, IconButton, InlineMessage, InputText, MicroTag, Modal, ModalBody, ModalSearchable, PageEmptySet, Pagination, Progressbar, RadioButton, RadioButtonGroup, ScrollableTabs, Select, SelectAsync, SelectCreatable, ShortcutTip, SidebarItem, StepBar, Table, Tag, TextButton, ThemeProvider, Tip, Toast, Tooltip, WithBadge, sidebarItemHeight, useCheckboxValue };
|