@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.js
CHANGED
|
@@ -7,9 +7,9 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
|
|
|
7
7
|
var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
|
|
8
8
|
var React = require('react');
|
|
9
9
|
var React__default = _interopDefault(React);
|
|
10
|
-
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
11
10
|
var styled = require('styled-components');
|
|
12
11
|
var styled__default = _interopDefault(styled);
|
|
12
|
+
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
13
13
|
var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
|
|
14
14
|
var reactPopper = require('react-popper');
|
|
15
15
|
var reactTransitionGroup = require('react-transition-group');
|
|
@@ -89,6 +89,218 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
89
89
|
return cooked;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
+
var iconSizeMap = {
|
|
93
|
+
xs: '.75em',
|
|
94
|
+
sm: '.875em',
|
|
95
|
+
lg: '1.33em',
|
|
96
|
+
'1x': '1em',
|
|
97
|
+
'2x': '2em',
|
|
98
|
+
'3x': '3em',
|
|
99
|
+
'4x': '4em',
|
|
100
|
+
'5x': '5em',
|
|
101
|
+
'6x': '6em',
|
|
102
|
+
'7x': '7em',
|
|
103
|
+
'8x': '8em',
|
|
104
|
+
'9x': '9em',
|
|
105
|
+
'10x': '10em',
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
var IconBackground = function (_a) {
|
|
109
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
110
|
+
return React__default.createElement(Wrapper, __assign({}, rest), children);
|
|
111
|
+
};
|
|
112
|
+
var circleBackgroundScaleFactor = 1.5;
|
|
113
|
+
var Wrapper = styled__default.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: ",
|
|
114
|
+
";\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) {
|
|
115
|
+
var theme = _a.theme, color = _a.color, backgroundColor = _a.backgroundColor;
|
|
116
|
+
return backgroundColor || theme.components.iconBackground[color] || 'transparent';
|
|
117
|
+
}, circleBackgroundScaleFactor, function (_a) {
|
|
118
|
+
var size = _a.size;
|
|
119
|
+
return iconSizeMap[size];
|
|
120
|
+
}, circleBackgroundScaleFactor, function (_a) {
|
|
121
|
+
var size = _a.size;
|
|
122
|
+
return iconSizeMap[size];
|
|
123
|
+
});
|
|
124
|
+
var templateObject_1;
|
|
125
|
+
|
|
126
|
+
var black = {
|
|
127
|
+
8: 'rgba(51, 51, 51, 0.08)',
|
|
128
|
+
16: 'rgba(51, 51, 51, 0.16)',
|
|
129
|
+
48: 'rgba(51, 51, 51, 0.48)',
|
|
130
|
+
80: 'rgba(51, 51, 51, 0.8)',
|
|
131
|
+
100: '#333333',
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
var blue = {
|
|
135
|
+
900: '#0028AD',
|
|
136
|
+
800: '#0038B9',
|
|
137
|
+
700: '#0041C0',
|
|
138
|
+
600: '#004BC7',
|
|
139
|
+
500: '#0052CC',
|
|
140
|
+
400: '#266CD4',
|
|
141
|
+
300: '#4D86DB',
|
|
142
|
+
200: '#80A9E6',
|
|
143
|
+
100: '#B3CBF0',
|
|
144
|
+
50: '#E0EAF9',
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
var cyan = {
|
|
148
|
+
900: '#066552',
|
|
149
|
+
800: '#088C72',
|
|
150
|
+
700: '#0AA989',
|
|
151
|
+
600: '#0BC09C',
|
|
152
|
+
500: '#0DD5AD',
|
|
153
|
+
400: '#4DE0C2',
|
|
154
|
+
300: '#7DE8D3',
|
|
155
|
+
200: '#A4EFE0',
|
|
156
|
+
100: '#C6F5EB',
|
|
157
|
+
50: '#E4FAF5',
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
var fuchsia = {
|
|
161
|
+
900: '#500663',
|
|
162
|
+
800: '#71088B',
|
|
163
|
+
700: '#880AA8',
|
|
164
|
+
600: '#9C0BC0',
|
|
165
|
+
500: '#AD0DD5',
|
|
166
|
+
400: '#CB67E4',
|
|
167
|
+
300: '#DB94EC',
|
|
168
|
+
200: '#E6B6F2',
|
|
169
|
+
100: '#EFD2F7',
|
|
170
|
+
50: '#F7E9FB',
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
var green = {
|
|
174
|
+
900: '#00572E',
|
|
175
|
+
800: '#006A3F',
|
|
176
|
+
700: '#007448',
|
|
177
|
+
600: '#007F52',
|
|
178
|
+
500: '#00875A',
|
|
179
|
+
400: '#269973',
|
|
180
|
+
300: '#4DAB8C',
|
|
181
|
+
200: '#80C3AD',
|
|
182
|
+
100: '#B3DBCE',
|
|
183
|
+
50: '#E0F1EB',
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
var grey = {
|
|
187
|
+
900: '#091E42',
|
|
188
|
+
800: '#253858',
|
|
189
|
+
700: '#505F79',
|
|
190
|
+
600: '#5E6C84',
|
|
191
|
+
500: '#6B778C',
|
|
192
|
+
400: '#7A869A',
|
|
193
|
+
300: '#A5ADBA',
|
|
194
|
+
200: '#C1C7D0',
|
|
195
|
+
100: '#EBECF0',
|
|
196
|
+
50: '#FAFBFC',
|
|
197
|
+
};
|
|
198
|
+
|
|
199
|
+
var indigo = {
|
|
200
|
+
900: '#05175E',
|
|
201
|
+
800: '#082188',
|
|
202
|
+
700: '#0A29A6',
|
|
203
|
+
600: '#0B2FBF',
|
|
204
|
+
500: '#0D35D5',
|
|
205
|
+
400: '#637CE3',
|
|
206
|
+
300: '#90A3EB',
|
|
207
|
+
200: '#B3BFF1',
|
|
208
|
+
100: '#D0D7F6',
|
|
209
|
+
50: '#E8ECFB',
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
var orange = {
|
|
213
|
+
900: '#783722',
|
|
214
|
+
800: '#A74D2F',
|
|
215
|
+
700: '#CA5D39',
|
|
216
|
+
600: '#E66A42',
|
|
217
|
+
500: '#FF7649',
|
|
218
|
+
400: '#FF9978',
|
|
219
|
+
300: '#FFB49B',
|
|
220
|
+
200: '#FFCAB9',
|
|
221
|
+
100: '#FFDED3',
|
|
222
|
+
50: '#FFEFEA',
|
|
223
|
+
};
|
|
224
|
+
|
|
225
|
+
var pink = {
|
|
226
|
+
900: '#640648',
|
|
227
|
+
800: '#8C0864',
|
|
228
|
+
700: '#A80A79',
|
|
229
|
+
600: '#C00B8A',
|
|
230
|
+
500: '#D50D99',
|
|
231
|
+
400: '#E569BF',
|
|
232
|
+
300: '#EC96D2',
|
|
233
|
+
200: '#F2B7E0',
|
|
234
|
+
100: '#F7D2EC',
|
|
235
|
+
50: '#FBEAF6',
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
var red = {
|
|
239
|
+
900: '#C81603',
|
|
240
|
+
800: '#D12206',
|
|
241
|
+
700: '#D52808',
|
|
242
|
+
600: '#DA300A',
|
|
243
|
+
500: '#DE350B',
|
|
244
|
+
400: '#E35330',
|
|
245
|
+
300: '#E87254',
|
|
246
|
+
200: '#EF9A85',
|
|
247
|
+
100: '#F5C2B6',
|
|
248
|
+
50: '#FBE7E2',
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
var white = {
|
|
252
|
+
8: 'rgba(255, 255, 255, 0.08)',
|
|
253
|
+
16: 'rgba(255, 255, 255, 0.16)',
|
|
254
|
+
48: 'rgba(255, 255, 255, 0.48)',
|
|
255
|
+
80: 'rgba(255, 255, 255, 0.8)',
|
|
256
|
+
100: '#FFFFFF',
|
|
257
|
+
};
|
|
258
|
+
|
|
259
|
+
var yellow = {
|
|
260
|
+
900: '#FF6B0A',
|
|
261
|
+
800: '#FF7C12',
|
|
262
|
+
700: '#FF8617',
|
|
263
|
+
600: '#FF911B',
|
|
264
|
+
500: '#FF991F',
|
|
265
|
+
400: '#FFA841',
|
|
266
|
+
300: '#FFB862',
|
|
267
|
+
200: '#FFCC8F',
|
|
268
|
+
100: '#FFE0BC',
|
|
269
|
+
50: '#FFF3E4',
|
|
270
|
+
};
|
|
271
|
+
|
|
272
|
+
var defaultPalette = {
|
|
273
|
+
black: black,
|
|
274
|
+
white: white,
|
|
275
|
+
grey: grey,
|
|
276
|
+
blue: blue,
|
|
277
|
+
indigo: indigo,
|
|
278
|
+
yellow: yellow,
|
|
279
|
+
orange: orange,
|
|
280
|
+
red: red,
|
|
281
|
+
green: green,
|
|
282
|
+
fuchsia: fuchsia,
|
|
283
|
+
pink: pink,
|
|
284
|
+
cyan: cyan,
|
|
285
|
+
primary: blue,
|
|
286
|
+
};
|
|
287
|
+
|
|
288
|
+
var iconBackgroundPalette = {
|
|
289
|
+
blue: defaultPalette.blue[50],
|
|
290
|
+
indigo: defaultPalette.indigo[50],
|
|
291
|
+
yellow: defaultPalette.yellow[50],
|
|
292
|
+
orange: defaultPalette.orange[50],
|
|
293
|
+
red: defaultPalette.red[50],
|
|
294
|
+
green: defaultPalette.green[50],
|
|
295
|
+
fuchsia: defaultPalette.fuchsia[50],
|
|
296
|
+
pink: defaultPalette.pink[50],
|
|
297
|
+
cyan: defaultPalette.cyan[50],
|
|
298
|
+
primary: defaultPalette.primary[50],
|
|
299
|
+
grey: defaultPalette.grey[100],
|
|
300
|
+
white: defaultPalette.white[16],
|
|
301
|
+
black: defaultPalette.black[16],
|
|
302
|
+
};
|
|
303
|
+
|
|
92
304
|
var getIconStyles = function (_a) {
|
|
93
305
|
var theme = _a.theme, color = _a.color;
|
|
94
306
|
return color
|
|
@@ -99,7 +311,7 @@ var getIconStyles = function (_a) {
|
|
|
99
311
|
};
|
|
100
312
|
};
|
|
101
313
|
|
|
102
|
-
var Icon = styled__default(reactFontawesome.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) {
|
|
314
|
+
var Icon = styled__default(reactFontawesome.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) {
|
|
103
315
|
var onClick = _a.onClick;
|
|
104
316
|
return (onClick ? 'pointer' : 'inherit');
|
|
105
317
|
}, function (_a) {
|
|
@@ -109,7 +321,36 @@ var Icon = styled__default(reactFontawesome.FontAwesomeIcon).attrs(getIconStyles
|
|
|
109
321
|
var secondary = _a.secondary;
|
|
110
322
|
return secondary;
|
|
111
323
|
});
|
|
112
|
-
var templateObject_1;
|
|
324
|
+
var templateObject_1$1;
|
|
325
|
+
|
|
326
|
+
var getColoredIcon = function (color) { return ({
|
|
327
|
+
primary: defaultPalette[color][500],
|
|
328
|
+
secondary: defaultPalette[color][200],
|
|
329
|
+
}); };
|
|
330
|
+
var iconPalette = {
|
|
331
|
+
blue: getColoredIcon('blue'),
|
|
332
|
+
red: getColoredIcon('red'),
|
|
333
|
+
green: getColoredIcon('green'),
|
|
334
|
+
yellow: getColoredIcon('yellow'),
|
|
335
|
+
orange: getColoredIcon('orange'),
|
|
336
|
+
primary: getColoredIcon('primary'),
|
|
337
|
+
cyan: getColoredIcon('cyan'),
|
|
338
|
+
fuchsia: getColoredIcon('fuchsia'),
|
|
339
|
+
indigo: getColoredIcon('indigo'),
|
|
340
|
+
pink: getColoredIcon('pink'),
|
|
341
|
+
grey: {
|
|
342
|
+
primary: defaultPalette.grey[500],
|
|
343
|
+
secondary: defaultPalette.grey[200],
|
|
344
|
+
},
|
|
345
|
+
white: {
|
|
346
|
+
primary: defaultPalette.white[100],
|
|
347
|
+
secondary: defaultPalette.white[48],
|
|
348
|
+
},
|
|
349
|
+
black: {
|
|
350
|
+
primary: defaultPalette.black[100],
|
|
351
|
+
secondary: defaultPalette.black[48],
|
|
352
|
+
},
|
|
353
|
+
};
|
|
113
354
|
|
|
114
355
|
var spacing = {
|
|
115
356
|
xxs: '4px',
|
|
@@ -122,7 +363,7 @@ var spacing = {
|
|
|
122
363
|
xxxl: '64px',
|
|
123
364
|
};
|
|
124
365
|
|
|
125
|
-
var StyledAccordionWrapper = styled__default.div(templateObject_1$
|
|
366
|
+
var StyledAccordionWrapper = styled__default.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) {
|
|
126
367
|
var theme = _a.theme;
|
|
127
368
|
return theme.palette.black[100];
|
|
128
369
|
}, function (_a) {
|
|
@@ -132,7 +373,7 @@ var StyledAccordionWrapper = styled__default.div(templateObject_1$1 || (template
|
|
|
132
373
|
var theme = _a.theme;
|
|
133
374
|
return theme.palette.grey[100];
|
|
134
375
|
}, spacing.l);
|
|
135
|
-
var templateObject_1$
|
|
376
|
+
var templateObject_1$2;
|
|
136
377
|
|
|
137
378
|
var UnstyledAccordion = /** @class */ (function (_super) {
|
|
138
379
|
__extends(UnstyledAccordion, _super);
|
|
@@ -184,13 +425,13 @@ var getBackGroundImageStyle = function (_a) {
|
|
|
184
425
|
var BaseAvatar = function (props) { return React__default.createElement("span", { className: props.className }); };
|
|
185
426
|
var Avatar = styled__default(BaseAvatar).attrs(function (props) { return ({
|
|
186
427
|
initials: props.initials ? (['m', 'l'].includes(props.size) ? props.initials.slice(0, 2) : props.initials[0]) : '',
|
|
187
|
-
}); })(templateObject_1$
|
|
428
|
+
}); })(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) {
|
|
188
429
|
var theme = _a.theme;
|
|
189
430
|
return theme.palette.primary[500];
|
|
190
431
|
}, function (props) { return getBackGroundImageStyle(props); }, function (props) { return (props.image ? '' : props.initials); }, function (props) { return textSizes[props.size || 'm']; });
|
|
191
|
-
var templateObject_1$
|
|
432
|
+
var templateObject_1$3;
|
|
192
433
|
|
|
193
|
-
var Body = styled__default.div(templateObject_1$
|
|
434
|
+
var Body = styled__default.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) {
|
|
194
435
|
var imageUrl = _a.imageUrl, leftIcon = _a.leftIcon;
|
|
195
436
|
return (leftIcon || imageUrl ? '8px' : '0');
|
|
196
437
|
}, function (_a) {
|
|
@@ -215,7 +456,7 @@ var Body = styled__default.div(templateObject_1$3 || (templateObject_1$3 = __mak
|
|
|
215
456
|
var theme = _a.theme;
|
|
216
457
|
return theme.palette.green[900];
|
|
217
458
|
});
|
|
218
|
-
var templateObject_1$
|
|
459
|
+
var templateObject_1$4;
|
|
219
460
|
|
|
220
461
|
var Badge = function (props) {
|
|
221
462
|
var color = props.color, handleRightIconClick = props.handleRightIconClick, imageUrl = props.imageUrl, leftIcon = props.leftIcon, rightIcon = props.rightIcon, text = props.text;
|
|
@@ -225,8 +466,8 @@ var Badge = function (props) {
|
|
|
225
466
|
React__default.createElement(Text, null, text),
|
|
226
467
|
rightIcon && React__default.createElement(Icon, __assign({}, rightIcon, { onClick: handleRightIconClick }))));
|
|
227
468
|
};
|
|
228
|
-
var Text = styled__default.div(templateObject_1$
|
|
229
|
-
var templateObject_1$
|
|
469
|
+
var Text = styled__default.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n padding: ", " ", ";\n"], ["\n padding: ", " ", ";\n"])), spacing.xxs, spacing.xs);
|
|
470
|
+
var templateObject_1$5;
|
|
230
471
|
|
|
231
472
|
var mapColors = function (theme, color) {
|
|
232
473
|
switch (color) {
|
|
@@ -253,20 +494,19 @@ var mapColors = function (theme, color) {
|
|
|
253
494
|
|
|
254
495
|
var Banner = function (_a) {
|
|
255
496
|
var color = _a.color, content = _a.content, icon = _a.icon, onClose = _a.onClose;
|
|
256
|
-
return (React__default.createElement(Wrapper, { color: color },
|
|
257
|
-
React__default.createElement(
|
|
258
|
-
|
|
259
|
-
content),
|
|
497
|
+
return (React__default.createElement(Wrapper$1, { color: color },
|
|
498
|
+
icon && React__default.createElement(Icon, __assign({}, icon)),
|
|
499
|
+
React__default.createElement(Content, null, content),
|
|
260
500
|
onClose && React__default.createElement(Icon, { icon: proSolidSvgIcons.faTimes, color: 'grey', onClick: onClose })));
|
|
261
501
|
};
|
|
262
|
-
var Wrapper = styled__default.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 ",
|
|
263
|
-
"\n padding: 10px 20px 10px 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])), function (_a) {
|
|
502
|
+
var Wrapper$1 = styled__default.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 ",
|
|
503
|
+
"\n padding: 10px 20px 10px 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n"])), function (_a) {
|
|
264
504
|
var color = _a.color, theme = _a.theme;
|
|
265
505
|
var _b = mapColors(theme, color), bgColor = _b.bgColor, textColor = _b.textColor;
|
|
266
|
-
return styled.css(templateObject_1$
|
|
506
|
+
return styled.css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), bgColor, textColor);
|
|
267
507
|
});
|
|
268
|
-
var
|
|
269
|
-
var templateObject_1$
|
|
508
|
+
var Content = styled__default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
509
|
+
var templateObject_1$6, templateObject_2, templateObject_3;
|
|
270
510
|
|
|
271
511
|
var useDebounceClick = function (_a) {
|
|
272
512
|
var _b = _a.manualLock, manualLock = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.timeMs, timeMs = _c === void 0 ? 250 : _c;
|
|
@@ -305,12 +545,12 @@ var getButtonStyles = function (_a) {
|
|
|
305
545
|
cursor: cursor }, buttonParts);
|
|
306
546
|
};
|
|
307
547
|
|
|
308
|
-
var StyledIcon
|
|
309
|
-
var LeftIcon = styled__default(StyledIcon
|
|
310
|
-
var RightIcon = styled__default(StyledIcon
|
|
548
|
+
var StyledIcon = styled__default(Icon)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: inline-block;\n"], ["\n display: inline-block;\n"])));
|
|
549
|
+
var LeftIcon = styled__default(StyledIcon)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject([""], [""])));
|
|
550
|
+
var RightIcon = styled__default(StyledIcon)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject([""], [""])));
|
|
311
551
|
var ButtonSpinner = styled__default(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"])));
|
|
312
552
|
var Text$1 = styled__default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-block;\n line-height: initial;\n"], ["\n display: inline-block;\n line-height: initial;\n"])));
|
|
313
|
-
var Content = styled__default.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) {
|
|
553
|
+
var Content$1 = styled__default.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) {
|
|
314
554
|
var isLoading = _a.isLoading;
|
|
315
555
|
return (isLoading ? 0 : 1);
|
|
316
556
|
});
|
|
@@ -323,7 +563,7 @@ var WrapperStyle = styled.css(templateObject_7 || (templateObject_7 = __makeTemp
|
|
|
323
563
|
}, function (_a) {
|
|
324
564
|
var border = _a.border;
|
|
325
565
|
return border;
|
|
326
|
-
}, Content, function (_a) {
|
|
566
|
+
}, Content$1, function (_a) {
|
|
327
567
|
var height = _a.height;
|
|
328
568
|
return height;
|
|
329
569
|
}, LeftIcon, Text$1, function (_a) {
|
|
@@ -347,7 +587,7 @@ var WrapperStyle = styled.css(templateObject_7 || (templateObject_7 = __makeTemp
|
|
|
347
587
|
});
|
|
348
588
|
var HrefWrapper = styled__default.a.attrs(getButtonStyles)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", ";\n\n text-decoration: none;\n"], ["\n ", ";\n\n text-decoration: none;\n"])), WrapperStyle);
|
|
349
589
|
var OnClickWrapper = styled__default.div.attrs(getButtonStyles)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), WrapperStyle);
|
|
350
|
-
var templateObject_1$
|
|
590
|
+
var templateObject_1$7, templateObject_2$1, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
351
591
|
|
|
352
592
|
var Button = function (_a) {
|
|
353
593
|
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;
|
|
@@ -356,28 +596,166 @@ var Button = function (_a) {
|
|
|
356
596
|
var showLoading = !isDisabled && isLoading;
|
|
357
597
|
var Wrapper = href ? HrefWrapper : OnClickWrapper;
|
|
358
598
|
return (React__default.createElement(Wrapper, { className: className, size: size, color: color, onClick: debounceClick, href: href, type: type, isDisabled: isDisabled, fullWidth: fullWidth, target: target },
|
|
359
|
-
React__default.createElement(Content, { isLoading: showLoading },
|
|
599
|
+
React__default.createElement(Content$1, { isLoading: showLoading },
|
|
360
600
|
!isTextButton && iconLeft && React__default.createElement(LeftIcon, __assign({}, iconLeft)),
|
|
361
601
|
text && React__default.createElement(Text$1, null, text),
|
|
362
602
|
!isTextButton && iconRight && React__default.createElement(RightIcon, __assign({}, iconRight))),
|
|
363
603
|
showLoading && React__default.createElement(ButtonSpinner, null)));
|
|
364
604
|
};
|
|
365
605
|
|
|
366
|
-
var
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
606
|
+
var buttonPalette = {
|
|
607
|
+
primary: {
|
|
608
|
+
blue: {
|
|
609
|
+
normal: defaultPalette.blue[500],
|
|
610
|
+
hover: defaultPalette.blue[700],
|
|
611
|
+
active: defaultPalette.blue[900],
|
|
612
|
+
text: defaultPalette.white[100],
|
|
613
|
+
textHover: defaultPalette.grey[100],
|
|
614
|
+
},
|
|
615
|
+
red: {
|
|
616
|
+
normal: defaultPalette.red[500],
|
|
617
|
+
hover: defaultPalette.red[700],
|
|
618
|
+
active: defaultPalette.red[900],
|
|
619
|
+
text: defaultPalette.white[100],
|
|
620
|
+
textHover: defaultPalette.grey[100],
|
|
621
|
+
},
|
|
622
|
+
green: {
|
|
623
|
+
normal: defaultPalette.green[500],
|
|
624
|
+
hover: defaultPalette.green[700],
|
|
625
|
+
active: defaultPalette.green[900],
|
|
626
|
+
text: defaultPalette.white[100],
|
|
627
|
+
textHover: defaultPalette.grey[100],
|
|
628
|
+
},
|
|
629
|
+
grey: {
|
|
630
|
+
normal: defaultPalette.white[100],
|
|
631
|
+
hover: defaultPalette.grey[100],
|
|
632
|
+
active: defaultPalette.grey[200],
|
|
633
|
+
text: defaultPalette.black[100],
|
|
634
|
+
textHover: defaultPalette.black[100],
|
|
635
|
+
},
|
|
636
|
+
yellow: {
|
|
637
|
+
normal: defaultPalette.yellow[500],
|
|
638
|
+
hover: defaultPalette.yellow[700],
|
|
639
|
+
active: defaultPalette.yellow[900],
|
|
640
|
+
text: defaultPalette.white[100],
|
|
641
|
+
textHover: defaultPalette.grey[100],
|
|
642
|
+
},
|
|
643
|
+
disabled: {
|
|
644
|
+
normal: defaultPalette.grey[50],
|
|
645
|
+
hover: defaultPalette.grey[50],
|
|
646
|
+
active: defaultPalette.grey[50],
|
|
647
|
+
text: defaultPalette.grey[200],
|
|
648
|
+
textHover: defaultPalette.grey[200],
|
|
649
|
+
},
|
|
650
|
+
},
|
|
651
|
+
secondary: {
|
|
652
|
+
blue: {
|
|
653
|
+
normal: defaultPalette.blue[50],
|
|
654
|
+
hover: defaultPalette.blue[100],
|
|
655
|
+
active: defaultPalette.blue[200],
|
|
656
|
+
text: defaultPalette.blue[900],
|
|
657
|
+
textHover: defaultPalette.blue[900],
|
|
658
|
+
},
|
|
659
|
+
red: {
|
|
660
|
+
normal: defaultPalette.red[50],
|
|
661
|
+
hover: defaultPalette.red[100],
|
|
662
|
+
active: defaultPalette.red[200],
|
|
663
|
+
text: defaultPalette.red[900],
|
|
664
|
+
textHover: defaultPalette.red[900],
|
|
665
|
+
},
|
|
666
|
+
green: {
|
|
667
|
+
normal: defaultPalette.green[50],
|
|
668
|
+
hover: defaultPalette.green[100],
|
|
669
|
+
active: defaultPalette.green[200],
|
|
670
|
+
text: defaultPalette.green[900],
|
|
671
|
+
textHover: defaultPalette.green[900],
|
|
672
|
+
},
|
|
673
|
+
yellow: {
|
|
674
|
+
normal: defaultPalette.yellow[50],
|
|
675
|
+
hover: defaultPalette.yellow[100],
|
|
676
|
+
active: defaultPalette.yellow[200],
|
|
677
|
+
text: defaultPalette.yellow[900],
|
|
678
|
+
textHover: defaultPalette.yellow[900],
|
|
679
|
+
},
|
|
680
|
+
grey: {
|
|
681
|
+
normal: defaultPalette.grey[50],
|
|
682
|
+
hover: defaultPalette.grey[100],
|
|
683
|
+
active: defaultPalette.grey[200],
|
|
684
|
+
text: defaultPalette.black[100],
|
|
685
|
+
textHover: defaultPalette.black[100],
|
|
686
|
+
},
|
|
687
|
+
disabled: {
|
|
688
|
+
normal: defaultPalette.grey[50],
|
|
689
|
+
hover: defaultPalette.grey[50],
|
|
690
|
+
active: defaultPalette.grey[50],
|
|
691
|
+
text: defaultPalette.grey[200],
|
|
692
|
+
textHover: defaultPalette.grey[200],
|
|
693
|
+
},
|
|
694
|
+
},
|
|
695
|
+
text: {
|
|
696
|
+
blue: {
|
|
697
|
+
normal: 'transparent',
|
|
698
|
+
hover: 'transparent',
|
|
699
|
+
active: 'transparent',
|
|
700
|
+
text: defaultPalette.blue[500],
|
|
701
|
+
textHover: defaultPalette.blue[500],
|
|
702
|
+
},
|
|
703
|
+
red: {
|
|
704
|
+
normal: 'transparent',
|
|
705
|
+
hover: 'transparent',
|
|
706
|
+
active: 'transparent',
|
|
707
|
+
text: defaultPalette.red[500],
|
|
708
|
+
textHover: defaultPalette.red[500],
|
|
709
|
+
},
|
|
710
|
+
green: {
|
|
711
|
+
normal: 'transparent',
|
|
712
|
+
hover: 'transparent',
|
|
713
|
+
active: 'transparent',
|
|
714
|
+
text: defaultPalette.green[500],
|
|
715
|
+
textHover: defaultPalette.green[500],
|
|
716
|
+
},
|
|
717
|
+
grey: {
|
|
718
|
+
normal: 'transparent',
|
|
719
|
+
hover: 'transparent',
|
|
720
|
+
active: 'transparent',
|
|
721
|
+
text: defaultPalette.grey[500],
|
|
722
|
+
textHover: defaultPalette.grey[500],
|
|
723
|
+
},
|
|
724
|
+
yellow: {
|
|
725
|
+
normal: 'transparent',
|
|
726
|
+
hover: 'transparent',
|
|
727
|
+
active: 'transparent',
|
|
728
|
+
text: defaultPalette.yellow[500],
|
|
729
|
+
textHover: defaultPalette.yellow[500],
|
|
730
|
+
},
|
|
731
|
+
disabled: {
|
|
732
|
+
normal: 'transparent',
|
|
733
|
+
hover: 'transparent',
|
|
734
|
+
active: 'transparent',
|
|
735
|
+
text: defaultPalette.grey[200],
|
|
736
|
+
textHover: defaultPalette.grey[200],
|
|
737
|
+
},
|
|
738
|
+
},
|
|
739
|
+
defaultType: 'primary',
|
|
740
|
+
defaultColor: 'blue',
|
|
741
|
+
defaultSize: 'medium',
|
|
742
|
+
};
|
|
743
|
+
|
|
744
|
+
var getIconButtonColors = function (_a) {
|
|
745
|
+
var color = _a.color, isDisabled = _a.isDisabled, theme = _a.theme, type = _a.type;
|
|
746
|
+
var _b = theme.components.iconButton, defaultColor = _b.defaultColor, defaultType = _b.defaultType;
|
|
747
|
+
var actualColor = isDisabled ? 'disabled' : color || defaultColor;
|
|
748
|
+
var actualType = type || defaultType;
|
|
749
|
+
return theme.components.iconButton[actualType][actualColor];
|
|
372
750
|
};
|
|
373
751
|
|
|
374
752
|
var IconButton = function (_a) {
|
|
375
753
|
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;
|
|
376
754
|
var handleClick = useDebounceClick({ onClick: onClick, manualLock: isDisabled });
|
|
377
|
-
return (React__default.createElement(Wrapper$
|
|
755
|
+
return (React__default.createElement(Wrapper$2, { color: color, className: className, type: type, onClick: handleClick, isDisabled: isDisabled },
|
|
378
756
|
React__default.createElement(Icon, __assign({}, icon))));
|
|
379
757
|
};
|
|
380
|
-
var Wrapper$
|
|
758
|
+
var Wrapper$2 = styled__default.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) {
|
|
381
759
|
var isDisabled = _a.isDisabled;
|
|
382
760
|
return (isDisabled ? 'default' : 'pointer');
|
|
383
761
|
}, function (_a) {
|
|
@@ -387,7 +765,56 @@ var Wrapper$1 = styled__default.div.attrs(getIconButtonColors)(templateObject_1$
|
|
|
387
765
|
var hover = _a.hover;
|
|
388
766
|
return hover;
|
|
389
767
|
});
|
|
390
|
-
var templateObject_1$
|
|
768
|
+
var templateObject_1$8;
|
|
769
|
+
|
|
770
|
+
var iconButtonPalette = {
|
|
771
|
+
primary: {
|
|
772
|
+
blue: {
|
|
773
|
+
normal: defaultPalette.blue[200],
|
|
774
|
+
hover: defaultPalette.blue[500],
|
|
775
|
+
},
|
|
776
|
+
red: {
|
|
777
|
+
normal: defaultPalette.red[200],
|
|
778
|
+
hover: defaultPalette.red[500],
|
|
779
|
+
},
|
|
780
|
+
green: {
|
|
781
|
+
normal: defaultPalette.green[200],
|
|
782
|
+
hover: defaultPalette.green[500],
|
|
783
|
+
},
|
|
784
|
+
yellow: {
|
|
785
|
+
normal: defaultPalette.yellow[200],
|
|
786
|
+
hover: defaultPalette.yellow[500],
|
|
787
|
+
},
|
|
788
|
+
disabled: {
|
|
789
|
+
normal: defaultPalette.grey[200],
|
|
790
|
+
hover: defaultPalette.grey[200],
|
|
791
|
+
},
|
|
792
|
+
},
|
|
793
|
+
secondary: {
|
|
794
|
+
blue: {
|
|
795
|
+
normal: defaultPalette.blue[200],
|
|
796
|
+
hover: defaultPalette.white[100],
|
|
797
|
+
},
|
|
798
|
+
red: {
|
|
799
|
+
normal: defaultPalette.red[200],
|
|
800
|
+
hover: defaultPalette.white[100],
|
|
801
|
+
},
|
|
802
|
+
green: {
|
|
803
|
+
normal: defaultPalette.green[200],
|
|
804
|
+
hover: defaultPalette.white[100],
|
|
805
|
+
},
|
|
806
|
+
yellow: {
|
|
807
|
+
normal: defaultPalette.yellow[200],
|
|
808
|
+
hover: defaultPalette.white[100],
|
|
809
|
+
},
|
|
810
|
+
disabled: {
|
|
811
|
+
normal: defaultPalette.grey[200],
|
|
812
|
+
hover: defaultPalette.grey[200],
|
|
813
|
+
},
|
|
814
|
+
},
|
|
815
|
+
defaultType: 'primary',
|
|
816
|
+
defaultColor: 'blue',
|
|
817
|
+
};
|
|
391
818
|
|
|
392
819
|
var getInputStyle = function (_a) {
|
|
393
820
|
var theme = _a.theme, value = _a.value, isDisabled = _a.isDisabled, large = _a.large, hasError = _a.hasError;
|
|
@@ -425,7 +852,7 @@ var convertToStatus = function (value) {
|
|
|
425
852
|
return typeof value === 'boolean' ? (value ? 'checked' : 'unchecked') : value;
|
|
426
853
|
};
|
|
427
854
|
|
|
428
|
-
var Input = styled__default.span.attrs(getInputStyle)(templateObject_1$
|
|
855
|
+
var Input = styled__default.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) {
|
|
429
856
|
var width = _a.width;
|
|
430
857
|
return width;
|
|
431
858
|
}, function (_a) {
|
|
@@ -447,9 +874,9 @@ var Input = styled__default.span.attrs(getInputStyle)(templateObject_1$8 || (tem
|
|
|
447
874
|
var opacity = _a.opacity;
|
|
448
875
|
return opacity;
|
|
449
876
|
});
|
|
450
|
-
var templateObject_1$
|
|
877
|
+
var templateObject_1$9;
|
|
451
878
|
|
|
452
|
-
var Label = styled__default.span.attrs(getLabelStyle)(templateObject_1$
|
|
879
|
+
var Label = styled__default.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) {
|
|
453
880
|
var fontSize = _a.fontSize;
|
|
454
881
|
return fontSize;
|
|
455
882
|
}, function (_a) {
|
|
@@ -462,7 +889,7 @@ var Label = styled__default.span.attrs(getLabelStyle)(templateObject_1$9 || (tem
|
|
|
462
889
|
var opacity = _a.opacity;
|
|
463
890
|
return opacity;
|
|
464
891
|
});
|
|
465
|
-
var templateObject_1$
|
|
892
|
+
var templateObject_1$a;
|
|
466
893
|
|
|
467
894
|
var CheckboxImpl = function (_a) {
|
|
468
895
|
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;
|
|
@@ -493,13 +920,50 @@ var CheckboxImpl = function (_a) {
|
|
|
493
920
|
React__default.createElement(HiddenInput, { ref: ref, type: 'checkbox', value: value, onClick: handleClick, onChange: onChange, disabled: isDisabled }),
|
|
494
921
|
React__default.createElement(Label, { large: large, isDisabled: isDisabled, hasError: !!error }, text)));
|
|
495
922
|
};
|
|
496
|
-
var ClickableWrapper = styled__default.div(templateObject_1$
|
|
923
|
+
var ClickableWrapper = styled__default.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
497
924
|
var HiddenInput = styled__default.input(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
498
925
|
var Checkbox = function (_a) {
|
|
499
926
|
var value = _a.value, rest = __rest(_a, ["value"]);
|
|
500
927
|
return (React__default.createElement(CheckboxImpl, __assign({}, rest, { value: convertToStatus(value) })));
|
|
501
928
|
};
|
|
502
|
-
var templateObject_1$
|
|
929
|
+
var templateObject_1$b, templateObject_2$2;
|
|
930
|
+
|
|
931
|
+
var normalChecked = {
|
|
932
|
+
tickColor: defaultPalette.white[100],
|
|
933
|
+
backgroundColor: defaultPalette.blue[500],
|
|
934
|
+
borderColor: defaultPalette.blue[500],
|
|
935
|
+
};
|
|
936
|
+
var errorChecked = {
|
|
937
|
+
tickColor: defaultPalette.white[100],
|
|
938
|
+
backgroundColor: defaultPalette.red[500],
|
|
939
|
+
borderColor: defaultPalette.red[500],
|
|
940
|
+
};
|
|
941
|
+
var checkboxPalette = {
|
|
942
|
+
input: {
|
|
943
|
+
normal: {
|
|
944
|
+
checked: normalChecked,
|
|
945
|
+
indeterminate: normalChecked,
|
|
946
|
+
unchecked: {
|
|
947
|
+
tickColor: defaultPalette.white[100],
|
|
948
|
+
backgroundColor: 'transparent',
|
|
949
|
+
borderColor: defaultPalette.grey[500],
|
|
950
|
+
},
|
|
951
|
+
},
|
|
952
|
+
error: {
|
|
953
|
+
checked: errorChecked,
|
|
954
|
+
indeterminate: errorChecked,
|
|
955
|
+
unchecked: {
|
|
956
|
+
tickColor: defaultPalette.white[100],
|
|
957
|
+
backgroundColor: 'transparent',
|
|
958
|
+
borderColor: defaultPalette.red[500],
|
|
959
|
+
},
|
|
960
|
+
},
|
|
961
|
+
},
|
|
962
|
+
label: {
|
|
963
|
+
normal: defaultPalette.black[100],
|
|
964
|
+
error: defaultPalette.red[500],
|
|
965
|
+
},
|
|
966
|
+
};
|
|
503
967
|
|
|
504
968
|
var useCheckboxValue = function (initialValue) {
|
|
505
969
|
if (initialValue === void 0) { initialValue = 'unchecked'; }
|
|
@@ -523,7 +987,7 @@ var StyledChipWrapper = styled__default.div(templateObject_3$2 || (templateObjec
|
|
|
523
987
|
"\n\n ",
|
|
524
988
|
"\n"])), spacing.xs, function (_a) {
|
|
525
989
|
var palette = _a.theme.palette;
|
|
526
|
-
return styled.css(templateObject_1$
|
|
990
|
+
return styled.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]);
|
|
527
991
|
}, function (_a) {
|
|
528
992
|
var statusEdit = _a.statusEdit, palette = _a.theme.palette;
|
|
529
993
|
if (statusEdit) {
|
|
@@ -531,8 +995,8 @@ var StyledChipWrapper = styled__default.div(templateObject_3$2 || (templateObjec
|
|
|
531
995
|
}
|
|
532
996
|
return undefined;
|
|
533
997
|
});
|
|
534
|
-
var StyledIcon$
|
|
535
|
-
var templateObject_1$
|
|
998
|
+
var StyledIcon$1 = styled__default(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);
|
|
999
|
+
var templateObject_1$c, templateObject_2$3, templateObject_3$2, templateObject_4$1;
|
|
536
1000
|
|
|
537
1001
|
var UnstyledChip = /** @class */ (function (_super) {
|
|
538
1002
|
__extends(UnstyledChip, _super);
|
|
@@ -545,7 +1009,7 @@ var UnstyledChip = /** @class */ (function (_super) {
|
|
|
545
1009
|
text,
|
|
546
1010
|
' ',
|
|
547
1011
|
statusEdit ? (React__default.createElement("div", null,
|
|
548
|
-
React__default.createElement(StyledIcon$
|
|
1012
|
+
React__default.createElement(StyledIcon$1, { icon: proSolidSvgIcons.faTimes, onClick: function () {
|
|
549
1013
|
closeAction ? closeAction() : null;
|
|
550
1014
|
} }))) : null));
|
|
551
1015
|
};
|
|
@@ -556,20 +1020,20 @@ var Chip = function (props) { return (React__default.createElement(StyledChipWra
|
|
|
556
1020
|
|
|
557
1021
|
var showHandler = function (show) {
|
|
558
1022
|
return show
|
|
559
|
-
? styled.css(templateObject_1$
|
|
1023
|
+
? styled.css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n transform: translateX(0);\n "], ["\n transform: translateX(0);\n "]))) : undefined;
|
|
560
1024
|
};
|
|
561
|
-
var templateObject_1$
|
|
1025
|
+
var templateObject_1$d;
|
|
562
1026
|
|
|
563
1027
|
var StyledDrawerWrapper = styled__default.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
564
1028
|
"\n"])), function (_a) {
|
|
565
1029
|
var show = _a.show, palette = _a.theme.palette;
|
|
566
|
-
return styled.css(templateObject_1$
|
|
1030
|
+
return styled.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]);
|
|
567
1031
|
});
|
|
568
|
-
var StyledIcon$
|
|
1032
|
+
var StyledIcon$2 = styled__default(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) {
|
|
569
1033
|
var palette = _a.theme.palette;
|
|
570
1034
|
return palette.grey[800];
|
|
571
1035
|
});
|
|
572
|
-
var templateObject_1$
|
|
1036
|
+
var templateObject_1$e, templateObject_2$4, templateObject_3$3;
|
|
573
1037
|
|
|
574
1038
|
var UnstyledDrawer = /** @class */ (function (_super) {
|
|
575
1039
|
__extends(UnstyledDrawer, _super);
|
|
@@ -585,7 +1049,7 @@ var UnstyledDrawer = /** @class */ (function (_super) {
|
|
|
585
1049
|
renderHeader ? renderHeader() : React__default.createElement("div", { className: 'drawer__header__title' }, title),
|
|
586
1050
|
React__default.createElement("div", { className: 'drawer__header__actions' },
|
|
587
1051
|
React__default.createElement("span", { onClick: actionClose },
|
|
588
|
-
React__default.createElement(StyledIcon$
|
|
1052
|
+
React__default.createElement(StyledIcon$2, { icon: proSolidSvgIcons.faTimes })))),
|
|
589
1053
|
React__default.createElement("div", { className: 'drawer__body' }, this.props.children),
|
|
590
1054
|
renderFooter ? React__default.createElement("div", { className: 'drawer__footer' }, renderFooter()) : null));
|
|
591
1055
|
};
|
|
@@ -610,11 +1074,11 @@ var getDropdownItemStyles = function (_a) {
|
|
|
610
1074
|
};
|
|
611
1075
|
};
|
|
612
1076
|
|
|
613
|
-
var ShortcutText = styled__default.span(templateObject_1$
|
|
1077
|
+
var ShortcutText = styled__default.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) {
|
|
614
1078
|
var theme = _a.theme;
|
|
615
1079
|
return theme.palette.grey[500];
|
|
616
1080
|
});
|
|
617
|
-
var templateObject_1$
|
|
1081
|
+
var templateObject_1$f;
|
|
618
1082
|
|
|
619
1083
|
var Item = function (_a) {
|
|
620
1084
|
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"]);
|
|
@@ -625,7 +1089,7 @@ var Item = function (_a) {
|
|
|
625
1089
|
React__default.createElement(TextWrapper, null, text),
|
|
626
1090
|
shortcut && React__default.createElement(ShortcutText, null, shortcut))));
|
|
627
1091
|
};
|
|
628
|
-
var hasActionCss = styled.css(templateObject_1$
|
|
1092
|
+
var hasActionCss = styled.css(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
629
1093
|
var theme = _a.theme;
|
|
630
1094
|
return theme.palette.grey[100];
|
|
631
1095
|
});
|
|
@@ -647,21 +1111,21 @@ var StyledItem = styled__default.div.attrs(getDropdownItemStyles)(templateObject
|
|
|
647
1111
|
});
|
|
648
1112
|
var InnerWrapper = styled__default.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"])));
|
|
649
1113
|
var TextWrapper = styled__default.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"])));
|
|
650
|
-
var templateObject_1$
|
|
1114
|
+
var templateObject_1$g, templateObject_2$5, templateObject_3$4, templateObject_4$2;
|
|
651
1115
|
|
|
652
|
-
var StyledDiv = styled__default.div(templateObject_1$
|
|
1116
|
+
var StyledDiv = styled__default.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) {
|
|
653
1117
|
var theme = _a.theme;
|
|
654
1118
|
return theme.palette.grey[100];
|
|
655
1119
|
});
|
|
656
1120
|
var Separator = function () { return React__default.createElement(StyledDiv, null); };
|
|
657
|
-
var templateObject_1$
|
|
1121
|
+
var templateObject_1$h;
|
|
658
1122
|
|
|
659
1123
|
var Title = function (props) { return React__default.createElement(StyledTitle, null, props.text); };
|
|
660
|
-
var StyledTitle = styled__default.div(templateObject_1$
|
|
1124
|
+
var StyledTitle = styled__default.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) {
|
|
661
1125
|
var theme = _a.theme;
|
|
662
1126
|
return theme.palette.grey[700];
|
|
663
1127
|
});
|
|
664
|
-
var templateObject_1$
|
|
1128
|
+
var templateObject_1$i;
|
|
665
1129
|
|
|
666
1130
|
var UserListItem = function (props) {
|
|
667
1131
|
var avatarSize = props.avatarSize, img = props.img, noText = props.noText, onClick = props.onClick, placeholder = props.placeholder, renderText = props.renderText, text = props.text;
|
|
@@ -681,13 +1145,13 @@ var UserListItem = function (props) {
|
|
|
681
1145
|
var UserListWrapper = styled__default.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", ";\n\n display: flex;\n padding: 4px 16px;\n align-items: center;\n"], ["\n ",
|
|
682
1146
|
";\n\n display: flex;\n padding: 4px 16px;\n align-items: center;\n"])), function (_a) {
|
|
683
1147
|
var clickable = _a.clickable;
|
|
684
|
-
return clickable && styled.css(templateObject_1$
|
|
1148
|
+
return clickable && styled.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) {
|
|
685
1149
|
var theme = _a.theme;
|
|
686
1150
|
return theme.palette.grey[100];
|
|
687
1151
|
});
|
|
688
1152
|
});
|
|
689
1153
|
var NameWrapper = styled__default.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"])));
|
|
690
|
-
var templateObject_1$
|
|
1154
|
+
var templateObject_1$j, templateObject_2$6, templateObject_3$5;
|
|
691
1155
|
|
|
692
1156
|
var DefaultDropdown = function (_a) {
|
|
693
1157
|
var closeDropdown = _a.closeDropdown, content = _a.content, fullWidth = _a.fullWidth, maxWidth = _a.maxWidth;
|
|
@@ -695,6 +1159,7 @@ var DefaultDropdown = function (_a) {
|
|
|
695
1159
|
return content.map(function (_a, id) {
|
|
696
1160
|
var onClick = _a.onClick, rest = __rest(_a, ["onClick"]);
|
|
697
1161
|
return (React__default.createElement(Item, __assign({ fullWidth: fullWidth, maxWidth: maxWidth, key: id, onClick: function (e) {
|
|
1162
|
+
e.stopPropagation();
|
|
698
1163
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
699
1164
|
closeDropdown();
|
|
700
1165
|
} }, rest)));
|
|
@@ -709,22 +1174,25 @@ var DefaultTrigger = function (_a) {
|
|
|
709
1174
|
};
|
|
710
1175
|
|
|
711
1176
|
var DropdownImpl = function (props) {
|
|
712
|
-
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;
|
|
713
|
-
var
|
|
1177
|
+
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;
|
|
1178
|
+
var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
|
|
714
1179
|
var toggleDropdown = React.useCallback(function (e) {
|
|
715
1180
|
setIsOpen(function (isOpen) { return !isOpen; });
|
|
716
1181
|
e.stopPropagation();
|
|
717
1182
|
}, []);
|
|
718
1183
|
var closeDropdown = React.useCallback(function () { return setIsOpen(false); }, []);
|
|
1184
|
+
React.useEffect(function () {
|
|
1185
|
+
setIsOpen(forceOpen);
|
|
1186
|
+
}, [forceOpen]);
|
|
719
1187
|
// Close Dropdown on click outside
|
|
720
1188
|
var wrapperRef = React.useRef(null);
|
|
721
1189
|
reactUse.useClickAway(wrapperRef, function () { return closeDropdown(); });
|
|
722
1190
|
var popperRef = React.useRef(null);
|
|
723
1191
|
var buttonRef = React.useRef(null);
|
|
724
|
-
var
|
|
1192
|
+
var _d = React.useState(null), arrowRef = _d[0], setArrowRef = _d[1];
|
|
725
1193
|
// alignRight left for compatibility
|
|
726
1194
|
var popperPlacement = placement ? placement : alignRight ? 'bottom-end' : 'bottom-start';
|
|
727
|
-
var
|
|
1195
|
+
var _e = reactPopper.usePopper(buttonRef.current, popperRef.current, {
|
|
728
1196
|
placement: popperPlacement,
|
|
729
1197
|
strategy: 'fixed',
|
|
730
1198
|
modifiers: React.useMemo(function () { return [
|
|
@@ -757,19 +1225,19 @@ var DropdownImpl = function (props) {
|
|
|
757
1225
|
},
|
|
758
1226
|
},
|
|
759
1227
|
]; }, [minWidthAsTrigger, arrowRef]),
|
|
760
|
-
}), attributes =
|
|
761
|
-
return (React__default.createElement(Wrapper$
|
|
1228
|
+
}), attributes = _e.attributes, styles = _e.styles;
|
|
1229
|
+
return (React__default.createElement(Wrapper$3, { className: className, ref: wrapperRef },
|
|
762
1230
|
React__default.createElement("div", { style: triggerStyles, ref: buttonRef, onClick: toggleDropdown },
|
|
763
1231
|
title && React__default.createElement(DefaultTrigger, { title: title }),
|
|
764
1232
|
!title && renderTrigger && renderTrigger()),
|
|
765
|
-
React__default.createElement(reactTransitionGroup.CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
|
|
1233
|
+
React__default.createElement(reactTransitionGroup.CSSTransition, { in: forceOpen || isOpen, timeout: 200, unmountOnExit: true, appear: true },
|
|
766
1234
|
React__default.createElement(BodyAnimationWrapper, null,
|
|
767
1235
|
React__default.createElement(PopperContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
|
|
768
1236
|
React__default.createElement("div", { ref: setArrowRef, style: styles.arrow }),
|
|
769
1237
|
React__default.createElement("div", { style: styles.offset }, content ? (React__default.createElement(DefaultWrapper, { fullWidth: fullWidth, maxWidth: maxWidth },
|
|
770
1238
|
React__default.createElement(DefaultDropdown, { content: content, fullWidth: fullWidth, maxWidth: maxWidth, closeDropdown: closeDropdown }))) : (React__default.createElement(CustomWrapper, { maxWidth: maxWidth }, renderContent === null || renderContent === void 0 ? void 0 : renderContent(closeDropdown)))))))));
|
|
771
1239
|
};
|
|
772
|
-
var Wrapper$
|
|
1240
|
+
var Wrapper$3 = styled__default.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
773
1241
|
var DefaultWrapper = styled__default.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n ", ";\n"], ["\n ",
|
|
774
1242
|
";\n"])), function (_a) {
|
|
775
1243
|
var fullWidth = _a.fullWidth, maxWidth = _a.maxWidth;
|
|
@@ -789,7 +1257,7 @@ var PopperContainer = styled__default.div(templateObject_7$1 || (templateObject_
|
|
|
789
1257
|
return theme.palette.white[100];
|
|
790
1258
|
});
|
|
791
1259
|
var BodyAnimationWrapper = styled__default.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"])));
|
|
792
|
-
var templateObject_1$
|
|
1260
|
+
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;
|
|
793
1261
|
|
|
794
1262
|
var Dropdown = /** @class */ (function (_super) {
|
|
795
1263
|
__extends(Dropdown, _super);
|
|
@@ -806,22 +1274,59 @@ var Dropdown = /** @class */ (function (_super) {
|
|
|
806
1274
|
return Dropdown;
|
|
807
1275
|
}(React.Component));
|
|
808
1276
|
|
|
809
|
-
var
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
1277
|
+
var dropdownPalette = {
|
|
1278
|
+
items: {
|
|
1279
|
+
active: {
|
|
1280
|
+
color: defaultPalette.black[100],
|
|
1281
|
+
background: defaultPalette.blue[50],
|
|
1282
|
+
hoverBackground: defaultPalette.grey[100],
|
|
1283
|
+
},
|
|
1284
|
+
notActive: {
|
|
1285
|
+
default: {
|
|
1286
|
+
color: defaultPalette.black[100],
|
|
1287
|
+
background: 'transparent',
|
|
1288
|
+
hoverBackground: defaultPalette.grey[100],
|
|
1289
|
+
},
|
|
1290
|
+
danger: {
|
|
1291
|
+
color: defaultPalette.red[500],
|
|
1292
|
+
background: 'transparent',
|
|
1293
|
+
hoverBackground: defaultPalette.red[50],
|
|
1294
|
+
},
|
|
1295
|
+
success: {
|
|
1296
|
+
color: defaultPalette.green[500],
|
|
1297
|
+
background: 'transparent',
|
|
1298
|
+
hoverBackground: defaultPalette.green[50],
|
|
1299
|
+
},
|
|
1300
|
+
warning: {
|
|
1301
|
+
color: defaultPalette.yellow[500],
|
|
1302
|
+
background: 'transparent',
|
|
1303
|
+
hoverBackground: defaultPalette.yellow[50],
|
|
1304
|
+
},
|
|
1305
|
+
link: {
|
|
1306
|
+
color: defaultPalette.blue[500],
|
|
1307
|
+
background: 'transparent',
|
|
1308
|
+
hoverBackground: defaultPalette.blue[50],
|
|
1309
|
+
},
|
|
1310
|
+
},
|
|
1311
|
+
},
|
|
1312
|
+
};
|
|
1313
|
+
|
|
1314
|
+
var sizeSetter = function (size) {
|
|
1315
|
+
switch (size) {
|
|
1316
|
+
case 'small':
|
|
1317
|
+
return styled.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 "])));
|
|
1318
|
+
case 'large':
|
|
1319
|
+
return styled.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 "])));
|
|
1320
|
+
case 'medium':
|
|
1321
|
+
default:
|
|
1322
|
+
return styled.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 "])));
|
|
1323
|
+
}
|
|
1324
|
+
};
|
|
1325
|
+
var fontSetter = function (size) {
|
|
1326
|
+
switch (size) {
|
|
1327
|
+
case 'small':
|
|
1328
|
+
return styled.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 "])));
|
|
1329
|
+
case 'large':
|
|
825
1330
|
return styled.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 "])));
|
|
826
1331
|
case 'medium':
|
|
827
1332
|
default:
|
|
@@ -844,7 +1349,7 @@ var FloatingBadge = styled__default.span(templateObject_7$2 || (templateObject_7
|
|
|
844
1349
|
var size = _a.size;
|
|
845
1350
|
return fontSetter(size);
|
|
846
1351
|
});
|
|
847
|
-
var templateObject_1$
|
|
1352
|
+
var templateObject_1$l, templateObject_2$8, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$2;
|
|
848
1353
|
|
|
849
1354
|
var WithBadge = function (props) {
|
|
850
1355
|
var children = props.children, rest = __rest(props, ["children"]);
|
|
@@ -852,8 +1357,8 @@ var WithBadge = function (props) {
|
|
|
852
1357
|
children,
|
|
853
1358
|
!rest.isDisabled && React__default.createElement(FloatingBadge, __assign({}, rest))));
|
|
854
1359
|
};
|
|
855
|
-
var WithBadgeWrapper = styled__default.div(templateObject_1$
|
|
856
|
-
var templateObject_1$
|
|
1360
|
+
var WithBadgeWrapper = styled__default.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: inline-block;\n position: relative;\n"], ["\n display: inline-block;\n position: relative;\n"])));
|
|
1361
|
+
var templateObject_1$m;
|
|
857
1362
|
|
|
858
1363
|
var ItemElement = function (props) {
|
|
859
1364
|
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;
|
|
@@ -933,7 +1438,7 @@ var ItemElement = function (props) {
|
|
|
933
1438
|
title ? React__default.createElement(Title$1, null, title) : React__default.createElement(Placeholder, null, placeholder),
|
|
934
1439
|
action && React__default.createElement(RightElement, null, action)));
|
|
935
1440
|
};
|
|
936
|
-
var Title$1 = styled__default.div(templateObject_1$
|
|
1441
|
+
var Title$1 = styled__default.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"])));
|
|
937
1442
|
var Placeholder = styled__default(Title$1)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
938
1443
|
var theme = _a.theme;
|
|
939
1444
|
return theme.palette.grey[500];
|
|
@@ -961,7 +1466,7 @@ var SingleElement = styled__default.div(templateObject_7$3 || (templateObject_7$
|
|
|
961
1466
|
return showActionOnHover
|
|
962
1467
|
? styled.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) : styled.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject([""], [""])));
|
|
963
1468
|
});
|
|
964
|
-
var templateObject_1$
|
|
1469
|
+
var templateObject_1$n, templateObject_2$9, templateObject_3$8, templateObject_4$5, templateObject_5$3, templateObject_6$3, templateObject_7$3;
|
|
965
1470
|
|
|
966
1471
|
var TitleElement = function (props) {
|
|
967
1472
|
var noResults = props.noResults, title = props.title;
|
|
@@ -973,7 +1478,7 @@ var TitleElementWrapper = styled__default.div(templateObject_2$a || (templateObj
|
|
|
973
1478
|
";\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) {
|
|
974
1479
|
var noResults = _a.noResults, theme = _a.theme;
|
|
975
1480
|
return noResults === true
|
|
976
|
-
? styled.css(templateObject_1$
|
|
1481
|
+
? styled.css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), theme.palette.grey[50]) : undefined;
|
|
977
1482
|
}, function (_a) {
|
|
978
1483
|
var theme = _a.theme;
|
|
979
1484
|
return theme.palette.grey[700];
|
|
@@ -982,7 +1487,7 @@ var NoResultsWrapper = styled__default.span(templateObject_3$9 || (templateObjec
|
|
|
982
1487
|
var theme = _a.theme;
|
|
983
1488
|
return theme.palette.grey[700];
|
|
984
1489
|
});
|
|
985
|
-
var templateObject_1$
|
|
1490
|
+
var templateObject_1$o, templateObject_2$a, templateObject_3$9;
|
|
986
1491
|
|
|
987
1492
|
var GroupElement = function (_a) {
|
|
988
1493
|
var index = _a.index, items = _a.items, title = _a.title, rest = __rest(_a, ["index", "items", "title"]);
|
|
@@ -1032,28 +1537,28 @@ var GroupedList = function (props) {
|
|
|
1032
1537
|
}); }, [mouseBlocked, setMouseBlocked]);
|
|
1033
1538
|
var wrapperRef = React.useRef(null);
|
|
1034
1539
|
var i = 1;
|
|
1035
|
-
return (React__default.createElement(Wrapper$
|
|
1540
|
+
return (React__default.createElement(Wrapper$4, { style: wrapperStyle, ref: wrapperRef, className: className }, groups.map(function (group, index) {
|
|
1036
1541
|
var oldI = i;
|
|
1037
1542
|
i += group.items.length;
|
|
1038
1543
|
return (React__default.createElement(GroupElement, __assign({ key: index }, group, { mouseBlockedProps: mouseBlockedProps, navigable: navigable, index: oldI, wrapperRef: wrapperRef, placeholder: placeholder })));
|
|
1039
1544
|
})));
|
|
1040
1545
|
};
|
|
1041
|
-
var Wrapper$
|
|
1042
|
-
var templateObject_1$
|
|
1546
|
+
var Wrapper$4 = styled__default.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
1547
|
+
var templateObject_1$p;
|
|
1043
1548
|
|
|
1044
1549
|
var Label$1 = styled__default.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 ",
|
|
1045
1550
|
"\n"])), function (_a) {
|
|
1046
1551
|
var isDisabled = _a.isDisabled, palette = _a.theme.palette;
|
|
1047
|
-
return isDisabled && styled.css(templateObject_1$
|
|
1552
|
+
return isDisabled && styled.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]);
|
|
1048
1553
|
});
|
|
1049
|
-
var templateObject_1$
|
|
1554
|
+
var templateObject_1$q, templateObject_2$b;
|
|
1050
1555
|
|
|
1051
1556
|
var Radio = styled__default.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 ",
|
|
1052
1557
|
"\n ",
|
|
1053
1558
|
"\n ",
|
|
1054
1559
|
"\n"])), function (_a) {
|
|
1055
1560
|
var theme = _a.theme;
|
|
1056
|
-
return styled.css(templateObject_1$
|
|
1561
|
+
return styled.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]);
|
|
1057
1562
|
}, function (_a) {
|
|
1058
1563
|
var isChecked = _a.isChecked, theme = _a.theme;
|
|
1059
1564
|
return isChecked && styled.css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n border: 5px solid ", ";\n "], ["\n border: 5px solid ", ";\n "])), theme.palette.blue[500]);
|
|
@@ -1062,7 +1567,7 @@ var Radio = styled__default.span(templateObject_5$4 || (templateObject_5$4 = __m
|
|
|
1062
1567
|
return isDisabled && styled.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 ",
|
|
1063
1568
|
"\n "])), theme.palette.grey[100], theme.palette.grey[100], isChecked && styled.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']));
|
|
1064
1569
|
});
|
|
1065
|
-
var templateObject_1$
|
|
1570
|
+
var templateObject_1$r, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4;
|
|
1066
1571
|
|
|
1067
1572
|
var WrapperRadioButton = function (props) {
|
|
1068
1573
|
var isChecked = props.isChecked, isDisabled = props.isDisabled, label = props.label;
|
|
@@ -1070,14 +1575,14 @@ var WrapperRadioButton = function (props) {
|
|
|
1070
1575
|
React__default.createElement(Radio, { isChecked: props.isChecked, isDisabled: props.isDisabled }),
|
|
1071
1576
|
React__default.createElement(Label$1, { isDisabled: props.isDisabled }, props.label)))));
|
|
1072
1577
|
};
|
|
1073
|
-
var Wrapper$
|
|
1578
|
+
var Wrapper$5 = styled__default(WrapperRadioButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n & + & {\n margin-top: ", "px;\n }\n ", "\n"], ["\n & + & {\n margin-top: ", "px;\n }\n ",
|
|
1074
1579
|
"\n"])), function (props) { return (props.optionsSpacing ? props.optionsSpacing : 0); }, function (props) {
|
|
1075
|
-
return props.inline && styled.css(templateObject_1$
|
|
1580
|
+
return props.inline && styled.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 "])));
|
|
1076
1581
|
});
|
|
1077
1582
|
var RadioButton = function (props) {
|
|
1078
|
-
return React__default.createElement(Wrapper$
|
|
1583
|
+
return React__default.createElement(Wrapper$5, __assign({}, props));
|
|
1079
1584
|
};
|
|
1080
|
-
var templateObject_1$
|
|
1585
|
+
var templateObject_1$s, templateObject_2$d;
|
|
1081
1586
|
|
|
1082
1587
|
var RadioButtonGroup = function (props) { return (React__default.createElement("div", { style: props.style }, props.options.map(function (o) { return (React__default.createElement(RadioButton, { key: o.key, label: o.label, onClick: function () {
|
|
1083
1588
|
if (props.onClick) {
|
|
@@ -1085,218 +1590,6 @@ var RadioButtonGroup = function (props) { return (React__default.createElement("
|
|
|
1085
1590
|
}
|
|
1086
1591
|
}, isChecked: props.value === o.key, isDisabled: props.isDisabled, renderOption: props.renderOption, optionsSpacing: props.optionsSpacing, inline: props.inline })); }))); };
|
|
1087
1592
|
|
|
1088
|
-
var iconSizeMap = {
|
|
1089
|
-
xs: '.75em',
|
|
1090
|
-
sm: '.875em',
|
|
1091
|
-
lg: '1.33em',
|
|
1092
|
-
'1x': '1em',
|
|
1093
|
-
'2x': '2em',
|
|
1094
|
-
'3x': '3em',
|
|
1095
|
-
'4x': '4em',
|
|
1096
|
-
'5x': '5em',
|
|
1097
|
-
'6x': '6em',
|
|
1098
|
-
'7x': '7em',
|
|
1099
|
-
'8x': '8em',
|
|
1100
|
-
'9x': '9em',
|
|
1101
|
-
'10x': '10em',
|
|
1102
|
-
};
|
|
1103
|
-
|
|
1104
|
-
var IconBackground = function (_a) {
|
|
1105
|
-
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
1106
|
-
return React__default.createElement(Wrapper$5, __assign({}, rest), children);
|
|
1107
|
-
};
|
|
1108
|
-
var circleBackgroundScaleFactor = 1.5;
|
|
1109
|
-
var Wrapper$5 = styled__default.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: ",
|
|
1110
|
-
";\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) {
|
|
1111
|
-
var theme = _a.theme, color = _a.color, backgroundColor = _a.backgroundColor;
|
|
1112
|
-
return backgroundColor || theme.components.iconBackground[color] || 'transparent';
|
|
1113
|
-
}, circleBackgroundScaleFactor, function (_a) {
|
|
1114
|
-
var size = _a.size;
|
|
1115
|
-
return iconSizeMap[size];
|
|
1116
|
-
}, circleBackgroundScaleFactor, function (_a) {
|
|
1117
|
-
var size = _a.size;
|
|
1118
|
-
return iconSizeMap[size];
|
|
1119
|
-
});
|
|
1120
|
-
var templateObject_1$s;
|
|
1121
|
-
|
|
1122
|
-
var black = {
|
|
1123
|
-
8: 'rgba(51, 51, 51, 0.08)',
|
|
1124
|
-
16: 'rgba(51, 51, 51, 0.16)',
|
|
1125
|
-
48: 'rgba(51, 51, 51, 0.48)',
|
|
1126
|
-
80: 'rgba(51, 51, 51, 0.8)',
|
|
1127
|
-
100: '#333333',
|
|
1128
|
-
};
|
|
1129
|
-
|
|
1130
|
-
var blue = {
|
|
1131
|
-
900: '#0028AD',
|
|
1132
|
-
800: '#0038B9',
|
|
1133
|
-
700: '#0041C0',
|
|
1134
|
-
600: '#004BC7',
|
|
1135
|
-
500: '#0052CC',
|
|
1136
|
-
400: '#266CD4',
|
|
1137
|
-
300: '#4D86DB',
|
|
1138
|
-
200: '#80A9E6',
|
|
1139
|
-
100: '#B3CBF0',
|
|
1140
|
-
50: '#E0EAF9',
|
|
1141
|
-
};
|
|
1142
|
-
|
|
1143
|
-
var cyan = {
|
|
1144
|
-
900: '#066552',
|
|
1145
|
-
800: '#088C72',
|
|
1146
|
-
700: '#0AA989',
|
|
1147
|
-
600: '#0BC09C',
|
|
1148
|
-
500: '#0DD5AD',
|
|
1149
|
-
400: '#4DE0C2',
|
|
1150
|
-
300: '#7DE8D3',
|
|
1151
|
-
200: '#A4EFE0',
|
|
1152
|
-
100: '#C6F5EB',
|
|
1153
|
-
50: '#E4FAF5',
|
|
1154
|
-
};
|
|
1155
|
-
|
|
1156
|
-
var fuchsia = {
|
|
1157
|
-
900: '#500663',
|
|
1158
|
-
800: '#71088B',
|
|
1159
|
-
700: '#880AA8',
|
|
1160
|
-
600: '#9C0BC0',
|
|
1161
|
-
500: '#AD0DD5',
|
|
1162
|
-
400: '#CB67E4',
|
|
1163
|
-
300: '#DB94EC',
|
|
1164
|
-
200: '#E6B6F2',
|
|
1165
|
-
100: '#EFD2F7',
|
|
1166
|
-
50: '#F7E9FB',
|
|
1167
|
-
};
|
|
1168
|
-
|
|
1169
|
-
var green = {
|
|
1170
|
-
900: '#00572E',
|
|
1171
|
-
800: '#006A3F',
|
|
1172
|
-
700: '#007448',
|
|
1173
|
-
600: '#007F52',
|
|
1174
|
-
500: '#00875A',
|
|
1175
|
-
400: '#269973',
|
|
1176
|
-
300: '#4DAB8C',
|
|
1177
|
-
200: '#80C3AD',
|
|
1178
|
-
100: '#B3DBCE',
|
|
1179
|
-
50: '#E0F1EB',
|
|
1180
|
-
};
|
|
1181
|
-
|
|
1182
|
-
var grey = {
|
|
1183
|
-
900: '#091E42',
|
|
1184
|
-
800: '#253858',
|
|
1185
|
-
700: '#505F79',
|
|
1186
|
-
600: '#5E6C84',
|
|
1187
|
-
500: '#6B778C',
|
|
1188
|
-
400: '#7A869A',
|
|
1189
|
-
300: '#A5ADBA',
|
|
1190
|
-
200: '#C1C7D0',
|
|
1191
|
-
100: '#EBECF0',
|
|
1192
|
-
50: '#FAFBFC',
|
|
1193
|
-
};
|
|
1194
|
-
|
|
1195
|
-
var indigo = {
|
|
1196
|
-
900: '#05175E',
|
|
1197
|
-
800: '#082188',
|
|
1198
|
-
700: '#0A29A6',
|
|
1199
|
-
600: '#0B2FBF',
|
|
1200
|
-
500: '#0D35D5',
|
|
1201
|
-
400: '#637CE3',
|
|
1202
|
-
300: '#90A3EB',
|
|
1203
|
-
200: '#B3BFF1',
|
|
1204
|
-
100: '#D0D7F6',
|
|
1205
|
-
50: '#E8ECFB',
|
|
1206
|
-
};
|
|
1207
|
-
|
|
1208
|
-
var orange = {
|
|
1209
|
-
900: '#783722',
|
|
1210
|
-
800: '#A74D2F',
|
|
1211
|
-
700: '#CA5D39',
|
|
1212
|
-
600: '#E66A42',
|
|
1213
|
-
500: '#FF7649',
|
|
1214
|
-
400: '#FF9978',
|
|
1215
|
-
300: '#FFB49B',
|
|
1216
|
-
200: '#FFCAB9',
|
|
1217
|
-
100: '#FFDED3',
|
|
1218
|
-
50: '#FFEFEA',
|
|
1219
|
-
};
|
|
1220
|
-
|
|
1221
|
-
var pink = {
|
|
1222
|
-
900: '#640648',
|
|
1223
|
-
800: '#8C0864',
|
|
1224
|
-
700: '#A80A79',
|
|
1225
|
-
600: '#C00B8A',
|
|
1226
|
-
500: '#D50D99',
|
|
1227
|
-
400: '#E569BF',
|
|
1228
|
-
300: '#EC96D2',
|
|
1229
|
-
200: '#F2B7E0',
|
|
1230
|
-
100: '#F7D2EC',
|
|
1231
|
-
50: '#FBEAF6',
|
|
1232
|
-
};
|
|
1233
|
-
|
|
1234
|
-
var red = {
|
|
1235
|
-
900: '#C81603',
|
|
1236
|
-
800: '#D12206',
|
|
1237
|
-
700: '#D52808',
|
|
1238
|
-
600: '#DA300A',
|
|
1239
|
-
500: '#DE350B',
|
|
1240
|
-
400: '#E35330',
|
|
1241
|
-
300: '#E87254',
|
|
1242
|
-
200: '#EF9A85',
|
|
1243
|
-
100: '#F5C2B6',
|
|
1244
|
-
50: '#FBE7E2',
|
|
1245
|
-
};
|
|
1246
|
-
|
|
1247
|
-
var white = {
|
|
1248
|
-
8: 'rgba(255, 255, 255, 0.08)',
|
|
1249
|
-
16: 'rgba(255, 255, 255, 0.16)',
|
|
1250
|
-
48: 'rgba(255, 255, 255, 0.48)',
|
|
1251
|
-
80: 'rgba(255, 255, 255, 0.8)',
|
|
1252
|
-
100: '#FFFFFF',
|
|
1253
|
-
};
|
|
1254
|
-
|
|
1255
|
-
var yellow = {
|
|
1256
|
-
900: '#FF6B0A',
|
|
1257
|
-
800: '#FF7C12',
|
|
1258
|
-
700: '#FF8617',
|
|
1259
|
-
600: '#FF911B',
|
|
1260
|
-
500: '#FF991F',
|
|
1261
|
-
400: '#FFA841',
|
|
1262
|
-
300: '#FFB862',
|
|
1263
|
-
200: '#FFCC8F',
|
|
1264
|
-
100: '#FFE0BC',
|
|
1265
|
-
50: '#FFF3E4',
|
|
1266
|
-
};
|
|
1267
|
-
|
|
1268
|
-
var defaultPalette = {
|
|
1269
|
-
black: black,
|
|
1270
|
-
white: white,
|
|
1271
|
-
grey: grey,
|
|
1272
|
-
blue: blue,
|
|
1273
|
-
indigo: indigo,
|
|
1274
|
-
yellow: yellow,
|
|
1275
|
-
orange: orange,
|
|
1276
|
-
red: red,
|
|
1277
|
-
green: green,
|
|
1278
|
-
fuchsia: fuchsia,
|
|
1279
|
-
pink: pink,
|
|
1280
|
-
cyan: cyan,
|
|
1281
|
-
primary: blue,
|
|
1282
|
-
};
|
|
1283
|
-
|
|
1284
|
-
var iconBackgroundPalette = {
|
|
1285
|
-
blue: defaultPalette.blue[50],
|
|
1286
|
-
indigo: defaultPalette.indigo[50],
|
|
1287
|
-
yellow: defaultPalette.yellow[50],
|
|
1288
|
-
orange: defaultPalette.orange[50],
|
|
1289
|
-
red: defaultPalette.red[50],
|
|
1290
|
-
green: defaultPalette.green[50],
|
|
1291
|
-
fuchsia: defaultPalette.fuchsia[50],
|
|
1292
|
-
pink: defaultPalette.pink[50],
|
|
1293
|
-
cyan: defaultPalette.cyan[50],
|
|
1294
|
-
primary: defaultPalette.primary[50],
|
|
1295
|
-
grey: defaultPalette.grey[100],
|
|
1296
|
-
white: defaultPalette.white[16],
|
|
1297
|
-
black: defaultPalette.black[16],
|
|
1298
|
-
};
|
|
1299
|
-
|
|
1300
1593
|
var colorSetter = function (type, theme) {
|
|
1301
1594
|
switch (type) {
|
|
1302
1595
|
case 'standard': {
|
|
@@ -1489,315 +1782,116 @@ var InputText = function (props) {
|
|
|
1489
1782
|
description && !error ? React__default.createElement(DescriptionMessage, null, description.message) : null));
|
|
1490
1783
|
};
|
|
1491
1784
|
|
|
1492
|
-
var
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1785
|
+
var renderTrigger = function () { return (React__default.createElement(IconWrapper, { tabIndex: 0 },
|
|
1786
|
+
React__default.createElement(Icon, { icon: proSolidSvgIcons.faEllipsisH, fixedWidth: true }))); };
|
|
1787
|
+
var IconWrapper = styled__default.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
1788
|
+
var triggerStyles = {
|
|
1789
|
+
margin: 'auto',
|
|
1790
|
+
};
|
|
1791
|
+
var SidebarItemDropdown = function (_a) {
|
|
1792
|
+
var className = _a.className, content = _a.content;
|
|
1793
|
+
return (React__default.createElement(Dropdown, { triggerStyles: triggerStyles, className: className, placement: 'right-start', renderTrigger: renderTrigger, content: content }));
|
|
1794
|
+
};
|
|
1795
|
+
var templateObject_1$y;
|
|
1496
1796
|
|
|
1497
|
-
var
|
|
1498
|
-
var
|
|
1499
|
-
return
|
|
1797
|
+
var SidebarItemCaret = styled__default.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) {
|
|
1798
|
+
var isOpen = _a.isOpen;
|
|
1799
|
+
return (isOpen ? 'rotate(90deg)' : 'rotate(0deg)');
|
|
1500
1800
|
}, function (_a) {
|
|
1501
|
-
var
|
|
1502
|
-
return
|
|
1801
|
+
var isVisible = _a.isVisible;
|
|
1802
|
+
return (isVisible ? 'visible' : 'hidden');
|
|
1503
1803
|
});
|
|
1504
|
-
var templateObject_1$
|
|
1505
|
-
|
|
1506
|
-
var MicroTag = function (_a) {
|
|
1507
|
-
var text = _a.text, type = _a.type;
|
|
1508
|
-
return React__default.createElement(MicroTagBody, { type: type }, text);
|
|
1509
|
-
};
|
|
1510
|
-
|
|
1511
|
-
var buttonPalette = {
|
|
1512
|
-
primary: {
|
|
1513
|
-
blue: {
|
|
1514
|
-
normal: defaultPalette.blue[500],
|
|
1515
|
-
hover: defaultPalette.blue[700],
|
|
1516
|
-
active: defaultPalette.blue[900],
|
|
1517
|
-
text: defaultPalette.white[100],
|
|
1518
|
-
textHover: defaultPalette.grey[100],
|
|
1519
|
-
},
|
|
1520
|
-
red: {
|
|
1521
|
-
normal: defaultPalette.red[500],
|
|
1522
|
-
hover: defaultPalette.red[700],
|
|
1523
|
-
active: defaultPalette.red[900],
|
|
1524
|
-
text: defaultPalette.white[100],
|
|
1525
|
-
textHover: defaultPalette.grey[100],
|
|
1526
|
-
},
|
|
1527
|
-
green: {
|
|
1528
|
-
normal: defaultPalette.green[500],
|
|
1529
|
-
hover: defaultPalette.green[700],
|
|
1530
|
-
active: defaultPalette.green[900],
|
|
1531
|
-
text: defaultPalette.white[100],
|
|
1532
|
-
textHover: defaultPalette.grey[100],
|
|
1533
|
-
},
|
|
1534
|
-
grey: {
|
|
1535
|
-
normal: defaultPalette.white[100],
|
|
1536
|
-
hover: defaultPalette.grey[100],
|
|
1537
|
-
active: defaultPalette.grey[200],
|
|
1538
|
-
text: defaultPalette.black[100],
|
|
1539
|
-
textHover: defaultPalette.black[100],
|
|
1540
|
-
},
|
|
1541
|
-
yellow: {
|
|
1542
|
-
normal: defaultPalette.yellow[500],
|
|
1543
|
-
hover: defaultPalette.yellow[700],
|
|
1544
|
-
active: defaultPalette.yellow[900],
|
|
1545
|
-
text: defaultPalette.white[100],
|
|
1546
|
-
textHover: defaultPalette.grey[100],
|
|
1547
|
-
},
|
|
1548
|
-
disabled: {
|
|
1549
|
-
normal: defaultPalette.grey[50],
|
|
1550
|
-
hover: defaultPalette.grey[50],
|
|
1551
|
-
active: defaultPalette.grey[50],
|
|
1552
|
-
text: defaultPalette.grey[200],
|
|
1553
|
-
textHover: defaultPalette.grey[200],
|
|
1554
|
-
},
|
|
1555
|
-
},
|
|
1556
|
-
secondary: {
|
|
1557
|
-
blue: {
|
|
1558
|
-
normal: defaultPalette.blue[50],
|
|
1559
|
-
hover: defaultPalette.blue[100],
|
|
1560
|
-
active: defaultPalette.blue[200],
|
|
1561
|
-
text: defaultPalette.blue[900],
|
|
1562
|
-
textHover: defaultPalette.blue[900],
|
|
1563
|
-
},
|
|
1564
|
-
red: {
|
|
1565
|
-
normal: defaultPalette.red[50],
|
|
1566
|
-
hover: defaultPalette.red[100],
|
|
1567
|
-
active: defaultPalette.red[200],
|
|
1568
|
-
text: defaultPalette.red[900],
|
|
1569
|
-
textHover: defaultPalette.red[900],
|
|
1570
|
-
},
|
|
1571
|
-
green: {
|
|
1572
|
-
normal: defaultPalette.green[50],
|
|
1573
|
-
hover: defaultPalette.green[100],
|
|
1574
|
-
active: defaultPalette.green[200],
|
|
1575
|
-
text: defaultPalette.green[900],
|
|
1576
|
-
textHover: defaultPalette.green[900],
|
|
1577
|
-
},
|
|
1578
|
-
yellow: {
|
|
1579
|
-
normal: defaultPalette.yellow[50],
|
|
1580
|
-
hover: defaultPalette.yellow[100],
|
|
1581
|
-
active: defaultPalette.yellow[200],
|
|
1582
|
-
text: defaultPalette.yellow[900],
|
|
1583
|
-
textHover: defaultPalette.yellow[900],
|
|
1584
|
-
},
|
|
1585
|
-
grey: {
|
|
1586
|
-
normal: defaultPalette.grey[50],
|
|
1587
|
-
hover: defaultPalette.grey[100],
|
|
1588
|
-
active: defaultPalette.grey[200],
|
|
1589
|
-
text: defaultPalette.black[100],
|
|
1590
|
-
textHover: defaultPalette.black[100],
|
|
1591
|
-
},
|
|
1592
|
-
disabled: {
|
|
1593
|
-
normal: defaultPalette.grey[50],
|
|
1594
|
-
hover: defaultPalette.grey[50],
|
|
1595
|
-
active: defaultPalette.grey[50],
|
|
1596
|
-
text: defaultPalette.grey[200],
|
|
1597
|
-
textHover: defaultPalette.grey[200],
|
|
1598
|
-
},
|
|
1599
|
-
},
|
|
1600
|
-
text: {
|
|
1601
|
-
blue: {
|
|
1602
|
-
normal: 'transparent',
|
|
1603
|
-
hover: 'transparent',
|
|
1604
|
-
active: 'transparent',
|
|
1605
|
-
text: defaultPalette.blue[500],
|
|
1606
|
-
textHover: defaultPalette.blue[500],
|
|
1607
|
-
},
|
|
1608
|
-
red: {
|
|
1609
|
-
normal: 'transparent',
|
|
1610
|
-
hover: 'transparent',
|
|
1611
|
-
active: 'transparent',
|
|
1612
|
-
text: defaultPalette.red[500],
|
|
1613
|
-
textHover: defaultPalette.red[500],
|
|
1614
|
-
},
|
|
1615
|
-
green: {
|
|
1616
|
-
normal: 'transparent',
|
|
1617
|
-
hover: 'transparent',
|
|
1618
|
-
active: 'transparent',
|
|
1619
|
-
text: defaultPalette.green[500],
|
|
1620
|
-
textHover: defaultPalette.green[500],
|
|
1621
|
-
},
|
|
1622
|
-
grey: {
|
|
1623
|
-
normal: 'transparent',
|
|
1624
|
-
hover: 'transparent',
|
|
1625
|
-
active: 'transparent',
|
|
1626
|
-
text: defaultPalette.grey[500],
|
|
1627
|
-
textHover: defaultPalette.grey[500],
|
|
1628
|
-
},
|
|
1629
|
-
yellow: {
|
|
1630
|
-
normal: 'transparent',
|
|
1631
|
-
hover: 'transparent',
|
|
1632
|
-
active: 'transparent',
|
|
1633
|
-
text: defaultPalette.yellow[500],
|
|
1634
|
-
textHover: defaultPalette.yellow[500],
|
|
1635
|
-
},
|
|
1636
|
-
disabled: {
|
|
1637
|
-
normal: 'transparent',
|
|
1638
|
-
hover: 'transparent',
|
|
1639
|
-
active: 'transparent',
|
|
1640
|
-
text: defaultPalette.grey[200],
|
|
1641
|
-
textHover: defaultPalette.grey[200],
|
|
1642
|
-
},
|
|
1643
|
-
},
|
|
1644
|
-
defaultType: 'primary',
|
|
1645
|
-
defaultColor: 'blue',
|
|
1646
|
-
defaultSize: 'medium',
|
|
1647
|
-
};
|
|
1648
|
-
|
|
1649
|
-
var iconButtonPalette = {
|
|
1650
|
-
primary: {
|
|
1651
|
-
blue: {
|
|
1652
|
-
normal: defaultPalette.blue[200],
|
|
1653
|
-
hover: defaultPalette.blue[500],
|
|
1654
|
-
},
|
|
1655
|
-
red: {
|
|
1656
|
-
normal: defaultPalette.red[200],
|
|
1657
|
-
hover: defaultPalette.red[500],
|
|
1658
|
-
},
|
|
1659
|
-
green: {
|
|
1660
|
-
normal: defaultPalette.green[200],
|
|
1661
|
-
hover: defaultPalette.green[500],
|
|
1662
|
-
},
|
|
1663
|
-
yellow: {
|
|
1664
|
-
normal: defaultPalette.yellow[200],
|
|
1665
|
-
hover: defaultPalette.yellow[500],
|
|
1666
|
-
},
|
|
1667
|
-
disabled: {
|
|
1668
|
-
normal: defaultPalette.grey[200],
|
|
1669
|
-
hover: defaultPalette.grey[200],
|
|
1670
|
-
},
|
|
1671
|
-
},
|
|
1672
|
-
secondary: {
|
|
1673
|
-
blue: {
|
|
1674
|
-
normal: defaultPalette.blue[200],
|
|
1675
|
-
hover: defaultPalette.white[100],
|
|
1676
|
-
},
|
|
1677
|
-
red: {
|
|
1678
|
-
normal: defaultPalette.red[200],
|
|
1679
|
-
hover: defaultPalette.white[100],
|
|
1680
|
-
},
|
|
1681
|
-
green: {
|
|
1682
|
-
normal: defaultPalette.green[200],
|
|
1683
|
-
hover: defaultPalette.white[100],
|
|
1684
|
-
},
|
|
1685
|
-
yellow: {
|
|
1686
|
-
normal: defaultPalette.yellow[200],
|
|
1687
|
-
hover: defaultPalette.white[100],
|
|
1688
|
-
},
|
|
1689
|
-
disabled: {
|
|
1690
|
-
normal: defaultPalette.grey[200],
|
|
1691
|
-
hover: defaultPalette.grey[200],
|
|
1692
|
-
},
|
|
1693
|
-
},
|
|
1694
|
-
defaultType: 'primary',
|
|
1695
|
-
defaultColor: 'blue',
|
|
1696
|
-
};
|
|
1697
|
-
|
|
1698
|
-
var normalChecked = {
|
|
1699
|
-
tickColor: defaultPalette.white[100],
|
|
1700
|
-
backgroundColor: defaultPalette.blue[500],
|
|
1701
|
-
borderColor: defaultPalette.blue[500],
|
|
1702
|
-
};
|
|
1703
|
-
var errorChecked = {
|
|
1704
|
-
tickColor: defaultPalette.white[100],
|
|
1705
|
-
backgroundColor: defaultPalette.red[500],
|
|
1706
|
-
borderColor: defaultPalette.red[500],
|
|
1707
|
-
};
|
|
1708
|
-
var checkboxPalette = {
|
|
1709
|
-
input: {
|
|
1710
|
-
normal: {
|
|
1711
|
-
checked: normalChecked,
|
|
1712
|
-
indeterminate: normalChecked,
|
|
1713
|
-
unchecked: {
|
|
1714
|
-
tickColor: defaultPalette.white[100],
|
|
1715
|
-
backgroundColor: 'transparent',
|
|
1716
|
-
borderColor: defaultPalette.grey[500],
|
|
1717
|
-
},
|
|
1718
|
-
},
|
|
1719
|
-
error: {
|
|
1720
|
-
checked: errorChecked,
|
|
1721
|
-
indeterminate: errorChecked,
|
|
1722
|
-
unchecked: {
|
|
1723
|
-
tickColor: defaultPalette.white[100],
|
|
1724
|
-
backgroundColor: 'transparent',
|
|
1725
|
-
borderColor: defaultPalette.red[500],
|
|
1726
|
-
},
|
|
1727
|
-
},
|
|
1728
|
-
},
|
|
1729
|
-
label: {
|
|
1730
|
-
normal: defaultPalette.black[100],
|
|
1731
|
-
error: defaultPalette.red[500],
|
|
1732
|
-
},
|
|
1733
|
-
};
|
|
1804
|
+
var templateObject_1$z;
|
|
1734
1805
|
|
|
1735
|
-
var
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
background: defaultPalette.blue[50],
|
|
1740
|
-
hoverBackground: defaultPalette.grey[100],
|
|
1741
|
-
},
|
|
1742
|
-
notActive: {
|
|
1743
|
-
default: {
|
|
1744
|
-
color: defaultPalette.black[100],
|
|
1745
|
-
background: 'transparent',
|
|
1746
|
-
hoverBackground: defaultPalette.grey[100],
|
|
1747
|
-
},
|
|
1748
|
-
danger: {
|
|
1749
|
-
color: defaultPalette.red[500],
|
|
1750
|
-
background: 'transparent',
|
|
1751
|
-
hoverBackground: defaultPalette.red[50],
|
|
1752
|
-
},
|
|
1753
|
-
success: {
|
|
1754
|
-
color: defaultPalette.green[500],
|
|
1755
|
-
background: 'transparent',
|
|
1756
|
-
hoverBackground: defaultPalette.green[50],
|
|
1757
|
-
},
|
|
1758
|
-
warning: {
|
|
1759
|
-
color: defaultPalette.yellow[500],
|
|
1760
|
-
background: 'transparent',
|
|
1761
|
-
hoverBackground: defaultPalette.yellow[50],
|
|
1762
|
-
},
|
|
1763
|
-
link: {
|
|
1764
|
-
color: defaultPalette.blue[500],
|
|
1765
|
-
background: 'transparent',
|
|
1766
|
-
hoverBackground: defaultPalette.blue[50],
|
|
1767
|
-
},
|
|
1768
|
-
},
|
|
1769
|
-
},
|
|
1806
|
+
var getSidebarItemStyles = function (_a) {
|
|
1807
|
+
var isActive = _a.isActive, isDisabled = _a.isDisabled, theme = _a.theme;
|
|
1808
|
+
var _b = theme.components.sidebarItem, normal = _b.normal, active = _b.active, disabled = _b.disabled;
|
|
1809
|
+
return isDisabled ? disabled : isActive ? active : normal;
|
|
1770
1810
|
};
|
|
1771
1811
|
|
|
1772
|
-
var
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1812
|
+
var sidebarItemHeight = 44;
|
|
1813
|
+
var SidebarItem = function (_a) {
|
|
1814
|
+
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;
|
|
1815
|
+
if (isHidden) {
|
|
1816
|
+
return null;
|
|
1817
|
+
}
|
|
1818
|
+
return (React__default.createElement(SidebarItemWrapper, { isActive: isActive, isDisabled: isDisabled, className: className, onClick: onClick },
|
|
1819
|
+
React__default.createElement(SidebarItemCaret, { isOpen: isOpen, isVisible: caretVisible },
|
|
1820
|
+
React__default.createElement(Icon, { icon: proSolidSvgIcons.faCaretRight })),
|
|
1821
|
+
icon ? React__default.createElement(Icon, __assign({}, icon, { fixedWidth: true })) : React__default.createElement(NoIcon, { icon: proRegularSvgIcons.faCircle, fixedWidth: true }),
|
|
1822
|
+
React__default.createElement(Title$2, null, title),
|
|
1823
|
+
!isDisabled && dropdownContent && React__default.createElement(Dropdown$1, { content: dropdownContent })));
|
|
1824
|
+
};
|
|
1825
|
+
var Dropdown$1 = styled__default(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"])));
|
|
1826
|
+
var SidebarItemWrapper = styled__default.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) {
|
|
1827
|
+
var color = _a.color;
|
|
1828
|
+
return color;
|
|
1829
|
+
}, function (_a) {
|
|
1830
|
+
var background = _a.background;
|
|
1831
|
+
return background;
|
|
1832
|
+
}, Dropdown$1, function (_a) {
|
|
1833
|
+
var hoverColor = _a.hoverColor;
|
|
1834
|
+
return hoverColor;
|
|
1835
|
+
}, function (_a) {
|
|
1836
|
+
var hoverBackground = _a.hoverBackground;
|
|
1837
|
+
return hoverBackground;
|
|
1838
|
+
}, Dropdown$1, function (_a) {
|
|
1839
|
+
var dropdownHover = _a.dropdownHover;
|
|
1840
|
+
return dropdownHover;
|
|
1841
|
+
}, function (_a) {
|
|
1842
|
+
var dropdownActive = _a.dropdownActive;
|
|
1843
|
+
return dropdownActive;
|
|
1844
|
+
});
|
|
1845
|
+
var Title$2 = styled__default.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"])));
|
|
1846
|
+
var NoIcon = styled__default(Icon)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n visibility: hidden;\n"], ["\n visibility: hidden;\n"])));
|
|
1847
|
+
var templateObject_1$A, templateObject_2$i, templateObject_3$e, templateObject_4$a;
|
|
1848
|
+
|
|
1849
|
+
var sidebarItemPalette = {
|
|
1850
|
+
normal: {
|
|
1851
|
+
color: defaultPalette.black[100],
|
|
1852
|
+
background: 'transparent',
|
|
1853
|
+
hoverColor: defaultPalette.black[100],
|
|
1854
|
+
hoverBackground: defaultPalette.grey[100],
|
|
1855
|
+
dropdownHover: defaultPalette.grey[400],
|
|
1856
|
+
dropdownActive: defaultPalette.grey[600],
|
|
1790
1857
|
},
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1858
|
+
active: {
|
|
1859
|
+
color: defaultPalette.white[100],
|
|
1860
|
+
background: defaultPalette.blue[500],
|
|
1861
|
+
hoverColor: defaultPalette.white[100],
|
|
1862
|
+
hoverBackground: defaultPalette.blue[500],
|
|
1863
|
+
dropdownHover: 'rgba(255,255,255,0.16)',
|
|
1864
|
+
dropdownActive: defaultPalette.blue[700],
|
|
1794
1865
|
},
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1866
|
+
disabled: {
|
|
1867
|
+
color: defaultPalette.grey[300],
|
|
1868
|
+
background: defaultPalette.grey[100],
|
|
1869
|
+
hoverColor: defaultPalette.grey[300],
|
|
1870
|
+
hoverBackground: defaultPalette.grey[100],
|
|
1871
|
+
dropdownHover: 'transparent',
|
|
1872
|
+
dropdownActive: 'transparent',
|
|
1798
1873
|
},
|
|
1799
1874
|
};
|
|
1800
1875
|
|
|
1876
|
+
var getMicroTagStyles = function (_a) {
|
|
1877
|
+
var theme = _a.theme, type = _a.type;
|
|
1878
|
+
return theme.components.microTag[type];
|
|
1879
|
+
};
|
|
1880
|
+
|
|
1881
|
+
var MicroTagBody = styled__default.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) {
|
|
1882
|
+
var color = _a.color;
|
|
1883
|
+
return color;
|
|
1884
|
+
}, function (_a) {
|
|
1885
|
+
var backgroundColor = _a.backgroundColor;
|
|
1886
|
+
return backgroundColor;
|
|
1887
|
+
});
|
|
1888
|
+
var templateObject_1$B;
|
|
1889
|
+
|
|
1890
|
+
var MicroTag = function (_a) {
|
|
1891
|
+
var text = _a.text, type = _a.type;
|
|
1892
|
+
return React__default.createElement(MicroTagBody, { type: type }, text);
|
|
1893
|
+
};
|
|
1894
|
+
|
|
1801
1895
|
var microTagPalette = {
|
|
1802
1896
|
error: {
|
|
1803
1897
|
backgroundColor: defaultPalette.red[50],
|
|
@@ -1821,6 +1915,31 @@ var microTagPalette = {
|
|
|
1821
1915
|
},
|
|
1822
1916
|
};
|
|
1823
1917
|
|
|
1918
|
+
var getTagColors = function (_a) {
|
|
1919
|
+
var tagStyle = _a.tagStyle, theme = _a.theme, type = _a.type;
|
|
1920
|
+
return theme.components.tag[tagStyle][type];
|
|
1921
|
+
};
|
|
1922
|
+
|
|
1923
|
+
var LeftIcon$2 = styled__default(Icon)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
1924
|
+
var RightIcon$1 = styled__default(Icon)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject([""], [""])));
|
|
1925
|
+
var Text$2 = styled__default.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject([""], [""])));
|
|
1926
|
+
var StyledTag = styled__default.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) {
|
|
1927
|
+
var color = _a.color;
|
|
1928
|
+
return color;
|
|
1929
|
+
}, function (_a) {
|
|
1930
|
+
var backgroundColor = _a.backgroundColor;
|
|
1931
|
+
return backgroundColor;
|
|
1932
|
+
}, LeftIcon$2, Text$2, Text$2, RightIcon$1);
|
|
1933
|
+
var templateObject_1$C, templateObject_2$j, templateObject_3$f, templateObject_4$b;
|
|
1934
|
+
|
|
1935
|
+
var Tag = function (_a) {
|
|
1936
|
+
var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, tagStyle = _a.tagStyle, text = _a.text, type = _a.type, className = _a.className;
|
|
1937
|
+
return (React__default.createElement(StyledTag, { className: className, type: type, tagStyle: tagStyle },
|
|
1938
|
+
leftIcon && React__default.createElement(LeftIcon$2, __assign({}, leftIcon)),
|
|
1939
|
+
React__default.createElement(Text$2, null, text),
|
|
1940
|
+
rightIcon && React__default.createElement(RightIcon$1, __assign({}, rightIcon))));
|
|
1941
|
+
};
|
|
1942
|
+
|
|
1824
1943
|
var tagPalette = {
|
|
1825
1944
|
full: {
|
|
1826
1945
|
standard: {
|
|
@@ -1890,6 +2009,76 @@ var tagPalette = {
|
|
|
1890
2009
|
},
|
|
1891
2010
|
};
|
|
1892
2011
|
|
|
2012
|
+
var Arrow = styled__default.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) {
|
|
2013
|
+
var theme = _a.theme, type = _a.type;
|
|
2014
|
+
return theme.components.tooltip[type].background;
|
|
2015
|
+
});
|
|
2016
|
+
var arrowStyle = styled.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);
|
|
2017
|
+
var templateObject_1$D, templateObject_2$k;
|
|
2018
|
+
|
|
2019
|
+
var getMessageStyles = function (_a) {
|
|
2020
|
+
var theme = _a.theme, type = _a.type;
|
|
2021
|
+
return theme.components.tooltip[type];
|
|
2022
|
+
};
|
|
2023
|
+
var Message = styled__default.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) {
|
|
2024
|
+
var color = _a.color;
|
|
2025
|
+
return color;
|
|
2026
|
+
}, function (_a) {
|
|
2027
|
+
var background = _a.background;
|
|
2028
|
+
return background;
|
|
2029
|
+
});
|
|
2030
|
+
var templateObject_1$E;
|
|
2031
|
+
|
|
2032
|
+
var TooltipContainer = styled__default.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), arrowStyle);
|
|
2033
|
+
var templateObject_1$F;
|
|
2034
|
+
|
|
2035
|
+
var Tooltip = function (_a) {
|
|
2036
|
+
var message = _a.message, placement = _a.placement, className = _a.className, children = _a.children, type = _a.type, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
|
|
2037
|
+
var wrapperRef = React.useRef(null);
|
|
2038
|
+
var popperRef = React.useRef(null);
|
|
2039
|
+
var buttonRef = React.useRef(null);
|
|
2040
|
+
var _b = React.useState(null), arrowRef = _b[0], setArrowRef = _b[1];
|
|
2041
|
+
var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
|
|
2042
|
+
var show = React.useCallback(function () { return setIsOpen(true); }, []);
|
|
2043
|
+
var hide = React.useCallback(function () { return setIsOpen(false); }, []);
|
|
2044
|
+
var _onMouseEnter = React.useCallback(function (e) {
|
|
2045
|
+
show();
|
|
2046
|
+
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
|
|
2047
|
+
}, [onMouseEnter, show]);
|
|
2048
|
+
var _onMouseLeave = React.useCallback(function (e) {
|
|
2049
|
+
hide();
|
|
2050
|
+
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
|
|
2051
|
+
}, [hide, onMouseLeave]);
|
|
2052
|
+
var _d = reactPopper.usePopper(buttonRef.current, popperRef.current, {
|
|
2053
|
+
placement: placement,
|
|
2054
|
+
strategy: 'fixed',
|
|
2055
|
+
modifiers: React.useMemo(function () { return [
|
|
2056
|
+
{
|
|
2057
|
+
name: 'arrow',
|
|
2058
|
+
options: {
|
|
2059
|
+
element: arrowRef,
|
|
2060
|
+
},
|
|
2061
|
+
},
|
|
2062
|
+
{
|
|
2063
|
+
name: 'offset',
|
|
2064
|
+
options: {
|
|
2065
|
+
offset: [0, 10],
|
|
2066
|
+
},
|
|
2067
|
+
},
|
|
2068
|
+
]; }, [arrowRef]),
|
|
2069
|
+
}), attributes = _d.attributes, styles = _d.styles;
|
|
2070
|
+
return (React__default.createElement(Wrapper$6, { className: className, ref: wrapperRef },
|
|
2071
|
+
React__default.createElement("div", { ref: buttonRef, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave }, children),
|
|
2072
|
+
React__default.createElement(reactTransitionGroup.CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
|
|
2073
|
+
React__default.createElement(BodyAnimationWrapper$1, null,
|
|
2074
|
+
React__default.createElement(TooltipContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
|
|
2075
|
+
React__default.createElement(Arrow, { type: type, ref: setArrowRef, style: styles.arrow }),
|
|
2076
|
+
React__default.createElement(Message, { type: type, style: styles.offset }, message))))));
|
|
2077
|
+
};
|
|
2078
|
+
var Wrapper$6 = styled__default.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2079
|
+
var BodyAnimationWrapper$1 = styled__default.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"])));
|
|
2080
|
+
var templateObject_1$G, templateObject_2$l;
|
|
2081
|
+
|
|
1893
2082
|
var tooltipPalette = {
|
|
1894
2083
|
light: {
|
|
1895
2084
|
color: defaultPalette.black[100],
|
|
@@ -1911,14 +2100,15 @@ var components = {
|
|
|
1911
2100
|
icon: iconPalette,
|
|
1912
2101
|
iconBackground: iconBackgroundPalette,
|
|
1913
2102
|
dropdown: dropdownPalette,
|
|
2103
|
+
sidebarItem: sidebarItemPalette,
|
|
1914
2104
|
};
|
|
1915
2105
|
var defaultTheme = {
|
|
1916
2106
|
palette: defaultPalette,
|
|
1917
2107
|
components: components,
|
|
1918
2108
|
};
|
|
1919
2109
|
|
|
1920
|
-
var ModalAnimation = styled.createGlobalStyle(templateObject_1$
|
|
1921
|
-
var templateObject_1$
|
|
2110
|
+
var ModalAnimation = styled.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"])));
|
|
2111
|
+
var templateObject_1$H;
|
|
1922
2112
|
|
|
1923
2113
|
var styledModalBoxWidth = function (isSmall, isFullscreen) {
|
|
1924
2114
|
if (isFullscreen) {
|
|
@@ -1932,13 +2122,13 @@ var styledModalBoxWidth = function (isSmall, isFullscreen) {
|
|
|
1932
2122
|
|
|
1933
2123
|
var headerFooterHeight = '80px';
|
|
1934
2124
|
var closeTimeoutMS = 200;
|
|
1935
|
-
var StyledReactModalContainer = styled__default(ReactModal)(templateObject_1$
|
|
1936
|
-
var StyledModalBox = styled__default.div(templateObject_4$
|
|
2125
|
+
var StyledReactModalContainer = styled__default(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);
|
|
2126
|
+
var StyledModalBox = styled__default.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 ",
|
|
1937
2127
|
"\n\n box-shadow: ",
|
|
1938
2128
|
";\n\n border: ", ";\n border-radius: ", "px;\n width: ", "vw;\n\n @media screen and (min-width: 992px) {\n width: ", ";\n }\n"])), function (_a) {
|
|
1939
2129
|
var fullScreenHeight = _a.fullScreenHeight, isFullscreen = _a.isFullscreen;
|
|
1940
2130
|
return isFullscreen
|
|
1941
|
-
? styled.css(templateObject_2$
|
|
2131
|
+
? styled.css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n height: ", "px;\n "], ["\n height: ", "px;\n "])), fullScreenHeight) : styled.css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n min-height: 200px;\n "], ["\n min-height: 200px;\n "])));
|
|
1942
2132
|
}, function (props) {
|
|
1943
2133
|
return props.isFullscreen ? 'none' : 'rgba(23, 43, 77, 0.24) 0px 16px 24px, rgba(9, 30, 66, 0.08) 0px 0px 0px';
|
|
1944
2134
|
}, 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) {
|
|
@@ -1977,14 +2167,14 @@ var ModalFooter = styled__default.div(templateObject_12$1 || (templateObject_12$
|
|
|
1977
2167
|
var palette = _a.theme.palette;
|
|
1978
2168
|
return palette.grey[100];
|
|
1979
2169
|
});
|
|
1980
|
-
var Wrapper$
|
|
2170
|
+
var Wrapper$7 = styled__default.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject([""], [""])));
|
|
1981
2171
|
var TopAttachment = styled__default.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) {
|
|
1982
2172
|
var height = _a.height;
|
|
1983
2173
|
return height && -(height + 16) + "px";
|
|
1984
2174
|
});
|
|
1985
2175
|
var BottomAttachment = styled__default.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"])));
|
|
1986
|
-
var StyledIcon$
|
|
1987
|
-
var templateObject_1$
|
|
2176
|
+
var StyledIcon$3 = styled__default(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"])));
|
|
2177
|
+
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;
|
|
1988
2178
|
|
|
1989
2179
|
var closeTimeoutMS$1 = 200;
|
|
1990
2180
|
var modalStyle = {
|
|
@@ -2069,12 +2259,12 @@ var ModalSearchable = function (props) {
|
|
|
2069
2259
|
handleChangeValue('');
|
|
2070
2260
|
};
|
|
2071
2261
|
var Header = (React__default.createElement(WrapperInput, null,
|
|
2072
|
-
React__default.createElement(StyledIcon$
|
|
2262
|
+
React__default.createElement(StyledIcon$3, { icon: proLightSvgIcons.faSearch, color: 'black' }),
|
|
2073
2263
|
React__default.createElement("input", { autoFocus: true, className: 'inputSearchable', type: 'text', onChange: handleChange, value: value, placeholder: placeholder }),
|
|
2074
2264
|
React__default.createElement(ClearButton, { visible: !!value, onClick: clearInput }, "Cancella")));
|
|
2075
2265
|
return (React__default.createElement(Modal, __assign({ className: className, header: function () { return Header; } }, props), children));
|
|
2076
2266
|
};
|
|
2077
|
-
var ClearButton = styled__default.div(templateObject_1$
|
|
2267
|
+
var ClearButton = styled__default.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) {
|
|
2078
2268
|
var theme = _a.theme;
|
|
2079
2269
|
return theme.palette.grey[200];
|
|
2080
2270
|
}, function (_a) {
|
|
@@ -2087,21 +2277,21 @@ var ClearButton = styled__default.div(templateObject_1$B || (templateObject_1$B
|
|
|
2087
2277
|
var visible = _a.visible;
|
|
2088
2278
|
return (visible ? 'inherit' : 'none');
|
|
2089
2279
|
});
|
|
2090
|
-
var WrapperInput = styled__default.div(templateObject_2$
|
|
2280
|
+
var WrapperInput = styled__default.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) {
|
|
2091
2281
|
var theme = _a.theme;
|
|
2092
2282
|
return theme.palette.blue[300];
|
|
2093
2283
|
}, function (_a) {
|
|
2094
2284
|
var theme = _a.theme;
|
|
2095
2285
|
return theme.palette.grey[50];
|
|
2096
2286
|
});
|
|
2097
|
-
var templateObject_1$
|
|
2287
|
+
var templateObject_1$J, templateObject_2$n;
|
|
2098
2288
|
|
|
2099
|
-
var CustomSizeModal = styled__default(Modal)(templateObject_1$
|
|
2100
|
-
var TitleContent = styled__default.div(templateObject_2$
|
|
2101
|
-
var BodyContent = styled__default.div(templateObject_3$
|
|
2102
|
-
var Question = styled__default.div(templateObject_4$
|
|
2289
|
+
var CustomSizeModal = styled__default(Modal)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n width: 432px;\n max-width: 90vw;\n"], ["\n width: 432px;\n max-width: 90vw;\n"])));
|
|
2290
|
+
var TitleContent = styled__default.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"])));
|
|
2291
|
+
var BodyContent = styled__default.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"])));
|
|
2292
|
+
var Question = styled__default.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"])));
|
|
2103
2293
|
var Buttons = styled__default.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"])));
|
|
2104
|
-
var templateObject_1$
|
|
2294
|
+
var templateObject_1$K, templateObject_2$o, templateObject_3$h, templateObject_4$d, templateObject_5$9;
|
|
2105
2295
|
|
|
2106
2296
|
var typeMap = {
|
|
2107
2297
|
error: 'error',
|
|
@@ -2140,10 +2330,10 @@ var ConfirmationModal = function (props) {
|
|
|
2140
2330
|
props.onAction();
|
|
2141
2331
|
} }))));
|
|
2142
2332
|
};
|
|
2143
|
-
var StyledButton = styled__default(Button)(templateObject_1$
|
|
2144
|
-
var templateObject_1$
|
|
2333
|
+
var StyledButton = styled__default(Button)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n margin-left: 16px;\n"], ["\n margin-left: 16px;\n"])));
|
|
2334
|
+
var templateObject_1$L;
|
|
2145
2335
|
|
|
2146
|
-
var StyledWrapper$1 = styled__default.div(templateObject_1$
|
|
2336
|
+
var StyledWrapper$1 = styled__default.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) {
|
|
2147
2337
|
var palette = _a.theme.palette;
|
|
2148
2338
|
return palette.red[50];
|
|
2149
2339
|
}, function (_a) {
|
|
@@ -2168,14 +2358,14 @@ var PageEmptySet = function (_a) {
|
|
|
2168
2358
|
text && React__default.createElement("p", null, text),
|
|
2169
2359
|
button));
|
|
2170
2360
|
};
|
|
2171
|
-
var templateObject_1$
|
|
2361
|
+
var templateObject_1$M;
|
|
2172
2362
|
|
|
2173
|
-
var StyledWrapper$2 = styled__default.div(templateObject_2$
|
|
2363
|
+
var StyledWrapper$2 = styled__default.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
2174
2364
|
"\n"])), function (_a) {
|
|
2175
2365
|
var palette = _a.theme.palette;
|
|
2176
|
-
return styled.css(templateObject_1$
|
|
2366
|
+
return styled.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]);
|
|
2177
2367
|
});
|
|
2178
|
-
var templateObject_1$
|
|
2368
|
+
var templateObject_1$N, templateObject_2$p;
|
|
2179
2369
|
|
|
2180
2370
|
var PaginationComponent = function (props) {
|
|
2181
2371
|
var numberOfPages = Math.ceil(props.listSize / props.pageSize);
|
|
@@ -2213,12 +2403,12 @@ var PaginationComponent = function (props) {
|
|
|
2213
2403
|
var Pagination = function (props) { return (React__default.createElement(StyledWrapper$2, null,
|
|
2214
2404
|
React__default.createElement(PaginationComponent, __assign({}, props)))); };
|
|
2215
2405
|
|
|
2216
|
-
var StyledProgressbarWrapper = styled__default.div(templateObject_2$
|
|
2406
|
+
var StyledProgressbarWrapper = styled__default.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
2217
2407
|
"\n"])), function (_a) {
|
|
2218
2408
|
var color = _a.color, percentage = _a.percentage, palette = _a.theme.palette;
|
|
2219
|
-
return styled.css(templateObject_1$
|
|
2409
|
+
return styled.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);
|
|
2220
2410
|
});
|
|
2221
|
-
var templateObject_1$
|
|
2411
|
+
var templateObject_1$O, templateObject_2$q;
|
|
2222
2412
|
|
|
2223
2413
|
var UnstyledProgressbar = /** @class */ (function (_super) {
|
|
2224
2414
|
__extends(UnstyledProgressbar, _super);
|
|
@@ -2292,7 +2482,7 @@ var ReactSelectWrapper = function (props) {
|
|
|
2292
2482
|
var styles = useCustomSelectStyle(size);
|
|
2293
2483
|
return (React__default.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 })));
|
|
2294
2484
|
};
|
|
2295
|
-
var StyledWrapper$3 = styled__default.div(templateObject_1$
|
|
2485
|
+
var StyledWrapper$3 = styled__default.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) {
|
|
2296
2486
|
var theme = _a.theme;
|
|
2297
2487
|
return theme.palette.black[100];
|
|
2298
2488
|
});
|
|
@@ -2319,18 +2509,18 @@ var SelectAsync = function (props) {
|
|
|
2319
2509
|
label ? React__default.createElement("label", { className: 'label' }, label) : null,
|
|
2320
2510
|
React__default.createElement(AsyncSelect, __assign({}, props, { backspaceRemoves: true, deleteRemoves: true, autosize: false, noOptionsMessage: function () { return 'Nessuna corrispondenza trovata'; }, styles: styles, isClearable: isClearable }))));
|
|
2321
2511
|
};
|
|
2322
|
-
var templateObject_1$
|
|
2512
|
+
var templateObject_1$P;
|
|
2323
2513
|
|
|
2324
2514
|
var SingleStep = function (props) { return (React__default.createElement("div", { className: 'stepBar__single_step' },
|
|
2325
2515
|
React__default.createElement("div", { className: "stepBar__single_step__number " + props.type }, props.number),
|
|
2326
2516
|
React__default.createElement("div", { className: "stepBar__single_step__title " + props.type }, props.title))); };
|
|
2327
2517
|
|
|
2328
|
-
var StyledStepBarWrapper = styled__default.div(templateObject_2$
|
|
2518
|
+
var StyledStepBarWrapper = styled__default.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
2329
2519
|
"\n"])), function (_a) {
|
|
2330
2520
|
var palette = _a.theme.palette;
|
|
2331
|
-
return styled.css(templateObject_1$
|
|
2521
|
+
return styled.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);
|
|
2332
2522
|
});
|
|
2333
|
-
var templateObject_1$
|
|
2523
|
+
var templateObject_1$Q, templateObject_2$r;
|
|
2334
2524
|
|
|
2335
2525
|
var UnstyledStepBar = /** @class */ (function (_super) {
|
|
2336
2526
|
__extends(UnstyledStepBar, _super);
|
|
@@ -2349,7 +2539,7 @@ var UnstyledStepBar = /** @class */ (function (_super) {
|
|
|
2349
2539
|
var StepBar = function (props) { return (React__default.createElement(StyledStepBarWrapper, __assign({}, props),
|
|
2350
2540
|
React__default.createElement(UnstyledStepBar, __assign({}, props)))); };
|
|
2351
2541
|
|
|
2352
|
-
var linearBackground = function () { return styled.css(templateObject_1$
|
|
2542
|
+
var linearBackground = function () { return styled.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) {
|
|
2353
2543
|
var theme = _a.theme;
|
|
2354
2544
|
return theme.palette.grey[100];
|
|
2355
2545
|
}, function (_a) {
|
|
@@ -2362,7 +2552,7 @@ var linearBackground = function () { return styled.css(templateObject_1$J || (te
|
|
|
2362
2552
|
var theme = _a.theme;
|
|
2363
2553
|
return theme.palette.grey[100];
|
|
2364
2554
|
}); };
|
|
2365
|
-
var templateObject_1$
|
|
2555
|
+
var templateObject_1$R;
|
|
2366
2556
|
|
|
2367
2557
|
var tabletLandscape = 991;
|
|
2368
2558
|
var responsiveThresholds = {
|
|
@@ -2435,8 +2625,8 @@ var typeMap$1 = {
|
|
|
2435
2625
|
desc: proSolidSvgIcons.faSortDown,
|
|
2436
2626
|
default: proSolidSvgIcons.faSort,
|
|
2437
2627
|
};
|
|
2438
|
-
var StyledWrapper$4 = styled__default.div(templateObject_1$
|
|
2439
|
-
var StyledIcon$
|
|
2628
|
+
var StyledWrapper$4 = styled__default.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n margin-left: 0.5rem;\n"], ["\n margin-left: 0.5rem;\n"])));
|
|
2629
|
+
var StyledIcon$4 = styled__default(Icon)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
2440
2630
|
var SortIcon = function (props) {
|
|
2441
2631
|
var filter = _.find(props.propertiesFilter, ['id', props.property]);
|
|
2442
2632
|
var type = '';
|
|
@@ -2464,11 +2654,11 @@ var SortIcon = function (props) {
|
|
|
2464
2654
|
}
|
|
2465
2655
|
}
|
|
2466
2656
|
return (React__default.createElement(StyledWrapper$4, null,
|
|
2467
|
-
React__default.createElement(StyledIcon$
|
|
2657
|
+
React__default.createElement(StyledIcon$4, { icon: typeMap$1[type], onClick: function () {
|
|
2468
2658
|
props.handleSortOnProperty(props.property, nextType);
|
|
2469
2659
|
} })));
|
|
2470
2660
|
};
|
|
2471
|
-
var templateObject_1$
|
|
2661
|
+
var templateObject_1$S, templateObject_2$s;
|
|
2472
2662
|
|
|
2473
2663
|
var ellipsisIcon = {
|
|
2474
2664
|
icon: proSolidSvgIcons.faEllipsisH,
|
|
@@ -2495,36 +2685,36 @@ var HeadDesktop = function (_a) {
|
|
|
2495
2685
|
React__default.createElement(Icon, __assign({}, ellipsisIcon))))));
|
|
2496
2686
|
};
|
|
2497
2687
|
|
|
2498
|
-
var Row = styled__default.div(templateObject_1$
|
|
2688
|
+
var Row = styled__default.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
2499
2689
|
var ListMobile = function (_a) {
|
|
2500
2690
|
var data = _a.data, isLoading = _a.isLoading, listSize = _a.listSize, renderMobileRow = _a.renderMobileRow;
|
|
2501
2691
|
return (React__default.createElement("div", null, listSize && !isLoading
|
|
2502
2692
|
? data.map(function (o, i) { return React__default.createElement(Row, { key: i }, renderMobileRow ? renderMobileRow(o) : undefined); })
|
|
2503
2693
|
: undefined));
|
|
2504
2694
|
};
|
|
2505
|
-
var templateObject_1$
|
|
2695
|
+
var templateObject_1$T;
|
|
2506
2696
|
|
|
2507
|
-
var ActionLink = styled__default.a(templateObject_2$
|
|
2508
|
-
"\n"])), function (props) { return styled.css(templateObject_1$
|
|
2509
|
-
var templateObject_1$
|
|
2697
|
+
var ActionLink = styled__default.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 ",
|
|
2698
|
+
"\n"])), function (props) { return styled.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), props.color); });
|
|
2699
|
+
var templateObject_1$U, templateObject_2$t;
|
|
2510
2700
|
|
|
2511
|
-
var ActionsContainer = styled__default.div(templateObject_1$
|
|
2512
|
-
var templateObject_1$
|
|
2701
|
+
var ActionsContainer = styled__default.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"])));
|
|
2702
|
+
var templateObject_1$V;
|
|
2513
2703
|
|
|
2514
|
-
var StyledWrapper$5 = styled__default.div(templateObject_2$
|
|
2704
|
+
var StyledWrapper$5 = styled__default.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 ",
|
|
2515
2705
|
"\n\n .link_container {\n margin: 0.5rem 0;\n }\n"])), function (_a) {
|
|
2516
2706
|
var palette = _a.theme.palette;
|
|
2517
2707
|
return palette.white[100];
|
|
2518
2708
|
}, function (props) {
|
|
2519
2709
|
if (props.active) {
|
|
2520
|
-
return styled.css(templateObject_1$
|
|
2710
|
+
return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: block;\n "], ["\n display: block;\n "])));
|
|
2521
2711
|
}
|
|
2522
2712
|
return undefined;
|
|
2523
2713
|
});
|
|
2524
|
-
var Action = styled__default.p(templateObject_4$
|
|
2714
|
+
var Action = styled__default.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 ",
|
|
2525
2715
|
"\n"])), function (props) {
|
|
2526
2716
|
if (props.color) {
|
|
2527
|
-
return styled.css(templateObject_3$
|
|
2717
|
+
return styled.css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), props.color);
|
|
2528
2718
|
}
|
|
2529
2719
|
return undefined;
|
|
2530
2720
|
});
|
|
@@ -2534,24 +2724,24 @@ var ActionsPopUp = function (props) { return (React__default.createElement(Style
|
|
|
2534
2724
|
a.action(props.element, props.selectedRows);
|
|
2535
2725
|
props.handlePopUpVisibility(undefined);
|
|
2536
2726
|
}, color: a.color }, a.label))); }))); };
|
|
2537
|
-
var templateObject_1$
|
|
2727
|
+
var templateObject_1$W, templateObject_2$u, templateObject_3$i, templateObject_4$e;
|
|
2538
2728
|
|
|
2539
|
-
var StyledWrapper$6 = styled__default.div(templateObject_3$
|
|
2729
|
+
var StyledWrapper$6 = styled__default.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 ",
|
|
2540
2730
|
"\n"])), function (_a) {
|
|
2541
2731
|
var active = _a.active, palette = _a.theme.palette;
|
|
2542
|
-
return styled.css(templateObject_2$
|
|
2543
|
-
"\n &:hover {\n background-color: ", ";\n }\n "])), active && styled.css(templateObject_1$
|
|
2732
|
+
return styled.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n ", "\n &:hover {\n background-color: ", ";\n }\n "], ["\n ",
|
|
2733
|
+
"\n &:hover {\n background-color: ", ";\n }\n "])), active && styled.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]);
|
|
2544
2734
|
});
|
|
2545
2735
|
var ActionsPopUpButton = function (props) { return (React__default.createElement(StyledWrapper$6, { active: props.active, onClick: function () { return props.handlePopUpVisibility(props.rowId); } },
|
|
2546
2736
|
React__default.createElement(Icon, { icon: proSolidSvgIcons.faEllipsisH }))); };
|
|
2547
|
-
var templateObject_1$
|
|
2737
|
+
var templateObject_1$X, templateObject_2$v, templateObject_3$j;
|
|
2548
2738
|
|
|
2549
|
-
var ActionsPopUpUnderlay = styled__default.div(templateObject_2$
|
|
2739
|
+
var ActionsPopUpUnderlay = styled__default.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 ",
|
|
2550
2740
|
"\n"])), function (_a) {
|
|
2551
2741
|
var active = _a.active;
|
|
2552
|
-
return active && styled.css(templateObject_1$
|
|
2742
|
+
return active && styled.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: block;\n "], ["\n display: block;\n "])));
|
|
2553
2743
|
});
|
|
2554
|
-
var templateObject_1$
|
|
2744
|
+
var templateObject_1$Y, templateObject_2$w;
|
|
2555
2745
|
|
|
2556
2746
|
var RowDesktop = function (_a) {
|
|
2557
2747
|
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;
|
|
@@ -2582,13 +2772,13 @@ var RowDesktop = function (_a) {
|
|
|
2582
2772
|
React__default.createElement("td", null)));
|
|
2583
2773
|
};
|
|
2584
2774
|
|
|
2585
|
-
var StyledWrapper$7 = styled__default.div(templateObject_3$
|
|
2775
|
+
var StyledWrapper$7 = styled__default.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
2586
2776
|
"\n"])), function (_a) {
|
|
2587
2777
|
var show = _a.show, palette = _a.theme.palette;
|
|
2588
|
-
return styled.css(templateObject_2$
|
|
2589
|
-
"\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 && styled.css(templateObject_1$
|
|
2778
|
+
return styled.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 ",
|
|
2779
|
+
"\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 && styled.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]);
|
|
2590
2780
|
});
|
|
2591
|
-
var templateObject_1$
|
|
2781
|
+
var templateObject_1$Z, templateObject_2$x, templateObject_3$k;
|
|
2592
2782
|
|
|
2593
2783
|
var getItemStyle = function (snapshot, draggableStyle) {
|
|
2594
2784
|
return __assign({ userSelect: 'none', padding: '0.5rem 0 0.5rem 0', outline: "none" }, draggableStyle);
|
|
@@ -2686,7 +2876,7 @@ var CustomizationsModal = /** @class */ (function (_super) {
|
|
|
2686
2876
|
return CustomizationsModal;
|
|
2687
2877
|
}(React.Component));
|
|
2688
2878
|
|
|
2689
|
-
var LoadingTableRow = styled__default.tr(templateObject_1$
|
|
2879
|
+
var LoadingTableRow = styled__default.tr(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n height: 49px;\n"], ["\n height: 49px;\n"])));
|
|
2690
2880
|
var LoadingContent = function (props) {
|
|
2691
2881
|
// Loading elments for the table
|
|
2692
2882
|
var renderElements = function () {
|
|
@@ -2706,7 +2896,7 @@ var LoadingContent = function (props) {
|
|
|
2706
2896
|
};
|
|
2707
2897
|
return React__default.createElement(React__default.Fragment, null, renderElements());
|
|
2708
2898
|
};
|
|
2709
|
-
var templateObject_1$
|
|
2899
|
+
var templateObject_1$_;
|
|
2710
2900
|
|
|
2711
2901
|
var Pagination$1 = function (props) {
|
|
2712
2902
|
var managedCurrentPage = props.currentPage;
|
|
@@ -2873,7 +3063,7 @@ var StyledTableWrapper = styled__default(UnstyledTable)(templateObject_7$8 || (t
|
|
|
2873
3063
|
"\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 ",
|
|
2874
3064
|
"\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 ",
|
|
2875
3065
|
"\n ",
|
|
2876
|
-
"\n }\n }\n "])), isHeaderFixed && styled.css(templateObject_1
|
|
3066
|
+
"\n }\n }\n "])), isHeaderFixed && styled.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 && styled.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 && styled.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 && styled.css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n &:first-child {\n width: 20px;\n }\n "], ["\n &:first-child {\n width: 20px;\n }\n "]))));
|
|
2877
3067
|
}, function (_a) {
|
|
2878
3068
|
var palette = _a.theme.palette;
|
|
2879
3069
|
return palette.blue[500];
|
|
@@ -2881,11 +3071,11 @@ var StyledTableWrapper = styled__default(UnstyledTable)(templateObject_7$8 || (t
|
|
|
2881
3071
|
var palette = _a.theme.palette;
|
|
2882
3072
|
return styled.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());
|
|
2883
3073
|
}, spacing.xxxl);
|
|
2884
|
-
var templateObject_1
|
|
3074
|
+
var templateObject_1$$, templateObject_2$y, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$8;
|
|
2885
3075
|
|
|
2886
3076
|
var Table = function (props) { return React__default.createElement(StyledTableWrapper, __assign({}, props)); };
|
|
2887
3077
|
|
|
2888
|
-
var ActiveTag = styled__default.span(templateObject_1$
|
|
3078
|
+
var ActiveTag = styled__default.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) {
|
|
2889
3079
|
var active = _a.active, theme = _a.theme;
|
|
2890
3080
|
return (active ? theme.palette.primary[500] : 'transparent');
|
|
2891
3081
|
}, function (_a) {
|
|
@@ -2895,16 +3085,16 @@ var ActiveTag = styled__default.span(templateObject_1$U || (templateObject_1$U =
|
|
|
2895
3085
|
var active = _a.active, theme = _a.theme;
|
|
2896
3086
|
return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
|
|
2897
3087
|
});
|
|
2898
|
-
var templateObject_1$
|
|
3088
|
+
var templateObject_1$10;
|
|
2899
3089
|
|
|
2900
|
-
var Tab = styled__default.span(templateObject_1$
|
|
3090
|
+
var Tab = styled__default.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) {
|
|
2901
3091
|
var active = _a.active, theme = _a.theme;
|
|
2902
3092
|
return (active ? theme.palette.primary[500] : theme.palette.grey[500]);
|
|
2903
3093
|
}, function (_a) {
|
|
2904
3094
|
var active = _a.active, theme = _a.theme;
|
|
2905
3095
|
return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
|
|
2906
3096
|
});
|
|
2907
|
-
var templateObject_1$
|
|
3097
|
+
var templateObject_1$11;
|
|
2908
3098
|
|
|
2909
3099
|
var Item$1 = function (_a) {
|
|
2910
3100
|
var active = _a.active, handleClick = _a.handleClick, tabRef = _a.tabRef, text = _a.text;
|
|
@@ -2912,13 +3102,13 @@ var Item$1 = function (_a) {
|
|
|
2912
3102
|
React__default.createElement(Tab, { active: active }, text),
|
|
2913
3103
|
React__default.createElement(ActiveTag, { active: active })));
|
|
2914
3104
|
};
|
|
2915
|
-
var ItemWrapper = styled__default.div(templateObject_1$
|
|
2916
|
-
var templateObject_1$
|
|
3105
|
+
var ItemWrapper = styled__default.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"])));
|
|
3106
|
+
var templateObject_1$12;
|
|
2917
3107
|
|
|
2918
|
-
var TabsWrapper = styled__default.div(templateObject_2$
|
|
3108
|
+
var TabsWrapper = styled__default.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 ",
|
|
2919
3109
|
";\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) {
|
|
2920
3110
|
var hidden = _a.hidden;
|
|
2921
|
-
return hidden && styled.css(templateObject_1$
|
|
3111
|
+
return hidden && styled.css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n visibility: hidden;\n position: absolute;\n "], ["\n visibility: hidden;\n position: absolute;\n "])));
|
|
2922
3112
|
}, function (_a) {
|
|
2923
3113
|
var lateralPadding = _a.lateralPadding;
|
|
2924
3114
|
return lateralPadding;
|
|
@@ -2929,8 +3119,8 @@ var TabsWrapper = styled__default.div(templateObject_2$v || (templateObject_2$v
|
|
|
2929
3119
|
var distance = _a.distance;
|
|
2930
3120
|
return distance;
|
|
2931
3121
|
});
|
|
2932
|
-
var ScrollableTabsWrapper = styled__default(TabsWrapper)(templateObject_3$
|
|
2933
|
-
var templateObject_1$
|
|
3122
|
+
var ScrollableTabsWrapper = styled__default(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"])));
|
|
3123
|
+
var templateObject_1$13, templateObject_2$z, templateObject_3$m;
|
|
2934
3124
|
|
|
2935
3125
|
var useResizedWidth = function () {
|
|
2936
3126
|
var _a = reactUse.useMeasure(), elementsWrapperRef = _a[0], wrapperTmpWidth = _a[1].width;
|
|
@@ -2963,8 +3153,8 @@ var TabsDropdownTrigger = function (_a) {
|
|
|
2963
3153
|
var active = _a.active;
|
|
2964
3154
|
return (React__default.createElement(Item$1, { active: active, text: React__default.createElement(DropdownIcon, { icon: proLightSvgIcons.faEllipsisH, fixedWidth: true }) }));
|
|
2965
3155
|
};
|
|
2966
|
-
var DropdownIcon = styled__default(Icon)(templateObject_1$
|
|
2967
|
-
var templateObject_1$
|
|
3156
|
+
var DropdownIcon = styled__default(Icon)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n height: 21px;\n"], ["\n height: 21px;\n"])));
|
|
3157
|
+
var templateObject_1$14;
|
|
2968
3158
|
|
|
2969
3159
|
var TabsDropdown = function (_a) {
|
|
2970
3160
|
var active = _a.active, tabs = _a.tabs;
|
|
@@ -2976,10 +3166,10 @@ var TabsDropdown = function (_a) {
|
|
|
2976
3166
|
closeDropdown();
|
|
2977
3167
|
} }));
|
|
2978
3168
|
}))); }, [tabs]);
|
|
2979
|
-
return React__default.createElement(Dropdown$
|
|
3169
|
+
return React__default.createElement(Dropdown$2, { alignRight: true, fullWidth: true, renderTrigger: renderTrigger, renderContent: renderContent });
|
|
2980
3170
|
};
|
|
2981
|
-
var Dropdown$
|
|
2982
|
-
var templateObject_1$
|
|
3171
|
+
var Dropdown$2 = styled__default(Dropdown)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
3172
|
+
var templateObject_1$15;
|
|
2983
3173
|
|
|
2984
3174
|
var DropdownTabs = function (_a) {
|
|
2985
3175
|
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;
|
|
@@ -3006,8 +3196,8 @@ var DropdownTabs = function (_a) {
|
|
|
3006
3196
|
dropdownVisible && React__default.createElement(TabsDropdown, { active: dropdownActive, tabs: dropdownItems }))));
|
|
3007
3197
|
};
|
|
3008
3198
|
// Remove scrollbar on ScrollableWrapper used until real DropdownTabs is loaded
|
|
3009
|
-
var StyledScrollableWrapper = styled__default(ScrollableTabsWrapper)(templateObject_1$
|
|
3010
|
-
var templateObject_1$
|
|
3199
|
+
var StyledScrollableWrapper = styled__default(ScrollableTabsWrapper)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n overflow-x: hidden;\n"], ["\n overflow-x: hidden;\n"])));
|
|
3200
|
+
var templateObject_1$16;
|
|
3011
3201
|
|
|
3012
3202
|
var ScrollableTabs = function (_a) {
|
|
3013
3203
|
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;
|
|
@@ -3015,49 +3205,24 @@ var ScrollableTabs = function (_a) {
|
|
|
3015
3205
|
return (React__default.createElement(ScrollableTabsWrapper, { className: className, distance: distance, lateralPadding: lateralPadding }, tabsItems));
|
|
3016
3206
|
};
|
|
3017
3207
|
|
|
3018
|
-
var getTagColors = function (_a) {
|
|
3019
|
-
var tagStyle = _a.tagStyle, theme = _a.theme, type = _a.type;
|
|
3020
|
-
return theme.components.tag[tagStyle][type];
|
|
3021
|
-
};
|
|
3022
|
-
|
|
3023
|
-
var LeftIcon$2 = styled__default(Icon)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject([""], [""])));
|
|
3024
|
-
var RightIcon$1 = styled__default(Icon)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject([""], [""])));
|
|
3025
|
-
var Text$2 = styled__default.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject([""], [""])));
|
|
3026
|
-
var StyledTag = styled__default.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) {
|
|
3027
|
-
var color = _a.color;
|
|
3028
|
-
return color;
|
|
3029
|
-
}, function (_a) {
|
|
3030
|
-
var backgroundColor = _a.backgroundColor;
|
|
3031
|
-
return backgroundColor;
|
|
3032
|
-
}, LeftIcon$2, Text$2, Text$2, RightIcon$1);
|
|
3033
|
-
var templateObject_1$$, templateObject_2$w, templateObject_3$l, templateObject_4$e;
|
|
3034
|
-
|
|
3035
|
-
var Tag = function (_a) {
|
|
3036
|
-
var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, tagStyle = _a.tagStyle, text = _a.text, type = _a.type, className = _a.className;
|
|
3037
|
-
return (React__default.createElement(StyledTag, { className: className, type: type, tagStyle: tagStyle },
|
|
3038
|
-
leftIcon && React__default.createElement(LeftIcon$2, __assign({}, leftIcon)),
|
|
3039
|
-
React__default.createElement(Text$2, null, text),
|
|
3040
|
-
rightIcon && React__default.createElement(RightIcon$1, __assign({}, rightIcon))));
|
|
3041
|
-
};
|
|
3042
|
-
|
|
3043
3208
|
var TextButton = function (_a) {
|
|
3044
3209
|
var _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, onClick = _a.onClick, text = _a.text, rest = __rest(_a, ["isDisabled", "onClick", "text"]);
|
|
3045
3210
|
var callback = React.useCallback(function () {
|
|
3046
3211
|
!isDisabled && onClick();
|
|
3047
3212
|
}, [isDisabled, onClick]);
|
|
3048
|
-
return (React__default.createElement(Wrapper$
|
|
3213
|
+
return (React__default.createElement(Wrapper$8, __assign({ isDisabled: isDisabled, onClick: callback }, rest), text));
|
|
3049
3214
|
};
|
|
3050
3215
|
var getColorIntensity = function (color) { return (color === 'white' ? 100 : 500); };
|
|
3051
|
-
var enabledCss = function (theme, color) { return styled.css(templateObject_1$
|
|
3052
|
-
var disabledCss = styled.css(templateObject_2$
|
|
3216
|
+
var enabledCss = function (theme, color) { return styled.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)]); };
|
|
3217
|
+
var disabledCss = styled.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) {
|
|
3053
3218
|
var theme = _a.theme;
|
|
3054
3219
|
return theme.palette.grey[500];
|
|
3055
3220
|
});
|
|
3056
|
-
var Wrapper$
|
|
3221
|
+
var Wrapper$8 = styled__default.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
3057
3222
|
var color = _a.color, isDisabled = _a.isDisabled, theme = _a.theme;
|
|
3058
3223
|
return (isDisabled ? disabledCss : enabledCss(theme, color));
|
|
3059
3224
|
});
|
|
3060
|
-
var templateObject_1$
|
|
3225
|
+
var templateObject_1$17, templateObject_2$A, templateObject_3$n;
|
|
3061
3226
|
|
|
3062
3227
|
var ThemeProvider = function (_a) {
|
|
3063
3228
|
var children = _a.children, theme = _a.theme;
|
|
@@ -3065,20 +3230,20 @@ var ThemeProvider = function (_a) {
|
|
|
3065
3230
|
React__default.createElement(React__default.Fragment, null, children)));
|
|
3066
3231
|
};
|
|
3067
3232
|
|
|
3068
|
-
var StyledTip = styled__default.div(templateObject_1$
|
|
3233
|
+
var StyledTip = styled__default.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) {
|
|
3069
3234
|
var palette = _a.theme.palette;
|
|
3070
3235
|
return palette.white[100];
|
|
3071
3236
|
}, function (_a) {
|
|
3072
3237
|
var palette = _a.theme.palette;
|
|
3073
3238
|
return palette.primary[400];
|
|
3074
3239
|
});
|
|
3075
|
-
var StyledLeftIcon = styled__default.span(templateObject_2$
|
|
3076
|
-
var StyledText = styled__default.span(templateObject_3$
|
|
3077
|
-
var StyledCloseIcon$1 = styled__default.div(templateObject_4$
|
|
3240
|
+
var StyledLeftIcon = styled__default.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"])));
|
|
3241
|
+
var StyledText = styled__default.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"])));
|
|
3242
|
+
var StyledCloseIcon$1 = styled__default.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) {
|
|
3078
3243
|
var palette = _a.theme.palette;
|
|
3079
3244
|
return palette.white[100];
|
|
3080
3245
|
});
|
|
3081
|
-
var templateObject_1$
|
|
3246
|
+
var templateObject_1$18, templateObject_2$B, templateObject_3$o, templateObject_4$g;
|
|
3082
3247
|
|
|
3083
3248
|
var defaultCloseIcon$1 = {
|
|
3084
3249
|
icon: proSolidSvgIcons.faTimes,
|
|
@@ -3103,14 +3268,14 @@ var ShortcutTip = function (props) {
|
|
|
3103
3268
|
React__default.createElement("b", null, shortcut)), leftIcon: rocketIcon }, rest)));
|
|
3104
3269
|
};
|
|
3105
3270
|
|
|
3106
|
-
var StyledIconDiv = styled__default.div(templateObject_1$
|
|
3107
|
-
var StyledIcon$
|
|
3108
|
-
var StyledTitle$1 = styled__default.div(templateObject_3$
|
|
3109
|
-
var StyledContent$1 = styled__default.div(templateObject_4$
|
|
3271
|
+
var StyledIconDiv = styled__default.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"])));
|
|
3272
|
+
var StyledIcon$5 = styled__default(Icon)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n vertical-align: sub;\n"], ["\n vertical-align: sub;\n"])));
|
|
3273
|
+
var StyledTitle$1 = styled__default.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"])));
|
|
3274
|
+
var StyledContent$1 = styled__default.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"])));
|
|
3110
3275
|
var StyledAction = styled__default.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"])));
|
|
3111
3276
|
var StyledToast = styled__default.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"])));
|
|
3112
3277
|
var StyledActionLabel = styled__default.label(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
3113
|
-
var templateObject_1$
|
|
3278
|
+
var templateObject_1$19, templateObject_2$C, templateObject_3$p, templateObject_4$h, templateObject_5$b, templateObject_6$9, templateObject_7$9;
|
|
3114
3279
|
|
|
3115
3280
|
var typeMap$2 = {
|
|
3116
3281
|
standard: 'dark',
|
|
@@ -3128,7 +3293,7 @@ var iconMap$1 = {
|
|
|
3128
3293
|
};
|
|
3129
3294
|
var ToastContent = function (props) { return (React__default.createElement(StyledToast, null,
|
|
3130
3295
|
React__default.createElement(StyledIconDiv, null,
|
|
3131
|
-
React__default.createElement(StyledIcon$
|
|
3296
|
+
React__default.createElement(StyledIcon$5, __assign({}, props.icon, { fixedWidth: true }))),
|
|
3132
3297
|
React__default.createElement(StyledTitle$1, null,
|
|
3133
3298
|
props.title,
|
|
3134
3299
|
React__default.createElement(StyledAction, null,
|
|
@@ -3162,8 +3327,8 @@ var ToastContainer = styled__default(reactToastify.ToastContainer).attrs({
|
|
|
3162
3327
|
closeOnClick: false,
|
|
3163
3328
|
draggable: false,
|
|
3164
3329
|
rtl: false,
|
|
3165
|
-
})(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"])));
|
|
3166
|
-
var templateObject_1$
|
|
3330
|
+
})(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"])));
|
|
3331
|
+
var templateObject_1$1a;
|
|
3167
3332
|
|
|
3168
3333
|
var Toast = {
|
|
3169
3334
|
Container: ToastContainer,
|
|
@@ -3176,76 +3341,6 @@ var Toast = {
|
|
|
3176
3341
|
standard: standard,
|
|
3177
3342
|
};
|
|
3178
3343
|
|
|
3179
|
-
var Arrow = styled__default.div(templateObject_1$14 || (templateObject_1$14 = __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 }\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 }\n"])), function (_a) {
|
|
3180
|
-
var theme = _a.theme;
|
|
3181
|
-
return theme.palette.grey[900];
|
|
3182
|
-
});
|
|
3183
|
-
var arrowStyle = styled.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);
|
|
3184
|
-
var templateObject_1$14, templateObject_2$A;
|
|
3185
|
-
|
|
3186
|
-
var getMessageStyles = function (_a) {
|
|
3187
|
-
var theme = _a.theme, type = _a.type;
|
|
3188
|
-
return theme.components.tooltip[type];
|
|
3189
|
-
};
|
|
3190
|
-
var Message = styled__default.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) {
|
|
3191
|
-
var color = _a.color;
|
|
3192
|
-
return color;
|
|
3193
|
-
}, function (_a) {
|
|
3194
|
-
var background = _a.background;
|
|
3195
|
-
return background;
|
|
3196
|
-
});
|
|
3197
|
-
var templateObject_1$15;
|
|
3198
|
-
|
|
3199
|
-
var TooltipContainer = styled__default.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), arrowStyle);
|
|
3200
|
-
var templateObject_1$16;
|
|
3201
|
-
|
|
3202
|
-
var Tooltip = function (_a) {
|
|
3203
|
-
var message = _a.message, placement = _a.placement, className = _a.className, children = _a.children, type = _a.type, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
|
|
3204
|
-
var wrapperRef = React.useRef(null);
|
|
3205
|
-
var popperRef = React.useRef(null);
|
|
3206
|
-
var buttonRef = React.useRef(null);
|
|
3207
|
-
var _b = React.useState(null), arrowRef = _b[0], setArrowRef = _b[1];
|
|
3208
|
-
var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
|
|
3209
|
-
var show = React.useCallback(function () { return setIsOpen(true); }, []);
|
|
3210
|
-
var hide = React.useCallback(function () { return setIsOpen(false); }, []);
|
|
3211
|
-
var _onMouseEnter = React.useCallback(function (e) {
|
|
3212
|
-
show();
|
|
3213
|
-
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
|
|
3214
|
-
}, [onMouseEnter, show]);
|
|
3215
|
-
var _onMouseLeave = React.useCallback(function (e) {
|
|
3216
|
-
hide();
|
|
3217
|
-
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
|
|
3218
|
-
}, [hide, onMouseLeave]);
|
|
3219
|
-
var _d = reactPopper.usePopper(buttonRef.current, popperRef.current, {
|
|
3220
|
-
placement: placement,
|
|
3221
|
-
strategy: 'fixed',
|
|
3222
|
-
modifiers: React.useMemo(function () { return [
|
|
3223
|
-
{
|
|
3224
|
-
name: 'arrow',
|
|
3225
|
-
options: {
|
|
3226
|
-
element: arrowRef,
|
|
3227
|
-
},
|
|
3228
|
-
},
|
|
3229
|
-
{
|
|
3230
|
-
name: 'offset',
|
|
3231
|
-
options: {
|
|
3232
|
-
offset: [0, 10],
|
|
3233
|
-
},
|
|
3234
|
-
},
|
|
3235
|
-
]; }, [arrowRef]),
|
|
3236
|
-
}), attributes = _d.attributes, styles = _d.styles;
|
|
3237
|
-
return (React__default.createElement(Wrapper$8, { className: className, ref: wrapperRef },
|
|
3238
|
-
React__default.createElement("div", { ref: buttonRef, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave }, children),
|
|
3239
|
-
React__default.createElement(reactTransitionGroup.CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
|
|
3240
|
-
React__default.createElement(BodyAnimationWrapper$1, null,
|
|
3241
|
-
React__default.createElement(TooltipContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
|
|
3242
|
-
React__default.createElement(Arrow, { ref: setArrowRef, style: styles.arrow }),
|
|
3243
|
-
React__default.createElement(Message, { type: type, style: styles.offset }, message))))));
|
|
3244
|
-
};
|
|
3245
|
-
var Wrapper$8 = styled__default.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3246
|
-
var BodyAnimationWrapper$1 = styled__default.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"])));
|
|
3247
|
-
var templateObject_1$17, templateObject_2$B;
|
|
3248
|
-
|
|
3249
3344
|
exports.Accordion = Accordion;
|
|
3250
3345
|
exports.Avatar = Avatar;
|
|
3251
3346
|
exports.Badge = Badge;
|
|
@@ -3277,6 +3372,7 @@ exports.Select = Select;
|
|
|
3277
3372
|
exports.SelectAsync = SelectAsync;
|
|
3278
3373
|
exports.SelectCreatable = SelectCreatable;
|
|
3279
3374
|
exports.ShortcutTip = ShortcutTip;
|
|
3375
|
+
exports.SidebarItem = SidebarItem;
|
|
3280
3376
|
exports.StepBar = StepBar;
|
|
3281
3377
|
exports.Table = Table;
|
|
3282
3378
|
exports.Tag = Tag;
|
|
@@ -3286,5 +3382,5 @@ exports.Tip = Tip;
|
|
|
3286
3382
|
exports.Toast = Toast;
|
|
3287
3383
|
exports.Tooltip = Tooltip;
|
|
3288
3384
|
exports.WithBadge = WithBadge;
|
|
3289
|
-
exports.
|
|
3385
|
+
exports.sidebarItemHeight = sidebarItemHeight;
|
|
3290
3386
|
exports.useCheckboxValue = useCheckboxValue;
|