@fattureincloud/fic-design-system 0.3.14 → 0.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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 };
|