scorer-ui-kit 1.7.7 → 1.8.0-beta.10

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.
Files changed (22) hide show
  1. package/dist/Global/index.d.ts +6 -0
  2. package/dist/LineUI/LineUI.d.ts +1 -0
  3. package/dist/LineUI/index.d.ts +2 -0
  4. package/dist/hooks/useMenu.d.ts +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +1688 -671
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.modern.js +1688 -671
  9. package/dist/index.modern.js.map +1 -1
  10. package/dist/themes/common.d.ts +1 -0
  11. package/dist/themes/dark/colors.d.ts +19 -0
  12. package/dist/themes/dark/custom.d.ts +139 -0
  13. package/dist/themes/dark/dark.d.ts +895 -0
  14. package/dist/themes/dark/styles.d.ts +178 -0
  15. package/dist/themes/dark/typography.d.ts +457 -0
  16. package/dist/themes/light/colors.d.ts +35 -31
  17. package/dist/themes/light/custom.d.ts +139 -209
  18. package/dist/themes/light/light.d.ts +1576 -20
  19. package/dist/themes/light/styles.d.ts +134 -11
  20. package/dist/themes/light/typography.d.ts +238 -187
  21. package/package.json +1 -1
  22. package/dist/themes/dark.d.ts +0 -167
package/dist/index.js CHANGED
@@ -91,6 +91,7 @@ var animation = {
91
91
  }
92
92
  },
93
93
  speed: {
94
+ faster: '0.085s',
94
95
  fast: '0.175s',
95
96
  normal: '0.35s',
96
97
  slow: '0.7s',
@@ -115,13 +116,6 @@ var deviceMediaQuery = {
115
116
 
116
117
  var typography = {
117
118
  "pageHeader": {
118
- "mainTitle": {
119
- "textAlign": "left",
120
- "fontSize": "26px",
121
- "fontWeight": 600,
122
- "textDecoration": "none",
123
- "color": "hsla(208, 7.7%, 38.2%, 1.000)"
124
- },
125
119
  "introduction": {
126
120
  "textAlign": "left",
127
121
  "fontStyle": "italic",
@@ -137,61 +131,30 @@ var typography = {
137
131
  "fontWeight": 400,
138
132
  "textDecoration": "none",
139
133
  "color": "hsla(0, 0%, 46.3%, 1.000)"
134
+ },
135
+ "mainTitle": {
136
+ "textAlign": "left",
137
+ "fontSize": "26px",
138
+ "fontWeight": 600,
139
+ "textDecoration": "none",
140
+ "color": "hsla(208, 7.7%, 38.2%, 1.000)"
140
141
  }
141
142
  },
142
143
  "form": {
143
- "input": {
144
- "placeholder": {
145
- "normal": {
146
- "textAlign": "left",
147
- "fontStyle": "italic",
148
- "fontSize": "16px",
149
- "fontWeight": 500,
150
- "textDecoration": "none",
151
- "color": "hsla(0, 0%, 46.3%, 0.502)"
152
- },
153
- "compact": {
154
- "textAlign": "left",
155
- "fontStyle": "italic",
156
- "fontSize": "14px",
157
- "fontWeight": 500,
158
- "textDecoration": "none",
159
- "color": "hsla(0, 0%, 46.3%, 0.502)"
160
- }
161
- },
162
- "value": {
163
- "normal": {
164
- "textAlign": "left",
165
- "fontSize": "16px",
166
- "fontWeight": 500,
167
- "lineHeight": "25px",
168
- "textDecoration": "none",
169
- "color": "hsla(207, 5%, 56.7%, 1.000)"
170
- },
171
- "compact": {
172
- "textAlign": "left",
173
- "fontSize": "14px",
174
- "fontWeight": 500,
175
- "lineHeight": "15px",
176
- "textDecoration": "none",
177
- "color": "hsla(207, 5%, 56.7%, 1.000)"
178
- }
179
- },
180
- "label": {
144
+ "label": {
145
+ "meta": {
181
146
  "textAlign": "left",
182
147
  "fontSize": "14px",
183
- "fontWeight": 400,
148
+ "fontWeight": 300,
184
149
  "textDecoration": "none",
185
- "color": "hsla(207, 5%, 56.7%, 1.000)"
186
- }
187
- },
188
- "label": {
150
+ "color": "hsla(0, 0%, 56.1%, 1.000)"
151
+ },
189
152
  "default": {
190
153
  "textAlign": "left",
191
- "fontSize": "16px",
192
- "fontWeight": 300,
154
+ "fontSize": "14px",
155
+ "fontWeight": 400,
193
156
  "textDecoration": "none",
194
- "color": "hsla(0, 0%, 46.3%, 1.000)"
157
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
195
158
  },
196
159
  "disabled": {
197
160
  "textAlign": "left",
@@ -207,13 +170,6 @@ var typography = {
207
170
  "textDecoration": "none",
208
171
  "color": "hsla(0, 67.9%, 67.1%, 1.000)"
209
172
  },
210
- "meta": {
211
- "textAlign": "left",
212
- "fontSize": "14px",
213
- "fontWeight": 300,
214
- "textDecoration": "none",
215
- "color": "hsla(0, 0%, 56.1%, 1.000)"
216
- },
217
173
  "meta(Selected)": {
218
174
  "textAlign": "left",
219
175
  "fontSize": "14px",
@@ -222,15 +178,6 @@ var typography = {
222
178
  "color": "hsla(207, 94.2%, 66.1%, 1.000)"
223
179
  }
224
180
  },
225
- "labelInformation": {
226
- "textAlign": "left",
227
- "fontStyle": "italic",
228
- "fontSize": "14px",
229
- "fontWeight": 300,
230
- "lineHeight": "25px",
231
- "textDecoration": "none",
232
- "color": "hsla(207, 5%, 56.7%, 1.000)"
233
- },
234
181
  "tip": {
235
182
  "textAlign": "left",
236
183
  "fontStyle": "italic",
@@ -240,102 +187,65 @@ var typography = {
240
187
  "textDecoration": "none",
241
188
  "color": "hsla(205, 59.7%, 71.8%, 1.000)"
242
189
  },
243
- "select": {
244
- "option": {
245
- "textAlign": "left",
246
- "fontSize": "16px",
247
- "fontWeight": 500,
248
- "lineHeight": "15px",
249
- "textDecoration": "none",
250
- "color": "hsla(207, 5%, 56.7%, 1.000)"
251
- },
252
- "selectedValue": {
253
- "textAlign": "left",
254
- "fontSize": "16px",
255
- "fontWeight": 500,
256
- "lineHeight": "15px",
257
- "textDecoration": "none",
258
- "color": "hsla(0, 0%, 17.6%, 1.000)"
259
- },
260
- "option(Hover)": {
261
- "textAlign": "left",
262
- "fontSize": "16px",
263
- "fontWeight": 500,
264
- "lineHeight": "15px",
265
- "textDecoration": "none",
266
- "color": "hsla(207, 41.2%, 53.3%, 1.000)"
267
- }
268
- },
269
- "feedback": {
270
- "message": {
271
- "textAlign": "left",
272
- "fontStyle": "italic",
273
- "fontSize": "14px",
274
- "fontWeight": 500,
275
- "lineHeight": "20px",
276
- "textDecoration": "none",
277
- "color": "hsla(0, 0%, 100%, 1.000)"
278
- }
279
- },
280
190
  "button": {
281
- "primary": {
282
- "large": {
191
+ "secondary": {
192
+ "normal": {
283
193
  "textAlign": "center",
284
- "fontSize": "20px",
194
+ "fontSize": "16px",
285
195
  "fontWeight": 600,
286
196
  "textDecoration": "none",
287
- "color": "hsla(0, 0%, 100%, 1.000)"
197
+ "color": "hsla(0, 0%, 55.3%, 1.000)"
288
198
  },
289
- "normal": {
199
+ "large": {
290
200
  "textAlign": "center",
291
- "fontSize": "16px",
201
+ "fontSize": "20px",
292
202
  "fontWeight": 600,
293
203
  "textDecoration": "none",
294
- "color": "hsla(0, 0%, 100%, 1.000)"
204
+ "color": "hsla(0, 0%, 55.3%, 1.000)"
295
205
  },
296
206
  "small": {
297
207
  "textAlign": "center",
298
208
  "fontSize": "14px",
299
209
  "fontWeight": 600,
300
210
  "textDecoration": "none",
301
- "color": "hsla(0, 0%, 100%, 1.000)"
211
+ "color": "hsla(0, 0%, 55.3%, 1.000)"
302
212
  },
303
213
  "xsmall": {
304
214
  "textAlign": "center",
305
215
  "fontSize": "12px",
306
- "fontWeight": 500,
216
+ "fontWeight": 600,
307
217
  "textDecoration": "none",
308
- "color": "hsla(0, 0%, 100%, 1.000)"
218
+ "color": "hsla(0, 0%, 55.3%, 1.000)"
309
219
  }
310
220
  },
311
- "secondary": {
221
+ "primary": {
312
222
  "large": {
313
223
  "textAlign": "center",
314
224
  "fontSize": "20px",
315
225
  "fontWeight": 600,
316
226
  "textDecoration": "none",
317
- "color": "hsla(0, 0%, 55.3%, 1.000)"
227
+ "color": "hsla(0, 0%, 100%, 1.000)"
318
228
  },
319
229
  "normal": {
320
230
  "textAlign": "center",
321
231
  "fontSize": "16px",
322
232
  "fontWeight": 600,
323
233
  "textDecoration": "none",
324
- "color": "hsla(0, 0%, 55.3%, 1.000)"
234
+ "color": "hsla(0, 0%, 100%, 1.000)"
325
235
  },
326
236
  "small": {
327
237
  "textAlign": "center",
328
238
  "fontSize": "14px",
329
239
  "fontWeight": 600,
330
240
  "textDecoration": "none",
331
- "color": "hsla(0, 0%, 55.3%, 1.000)"
241
+ "color": "hsla(0, 0%, 100%, 1.000)"
332
242
  },
333
243
  "xsmall": {
334
244
  "textAlign": "center",
335
245
  "fontSize": "12px",
336
- "fontWeight": 500,
246
+ "fontWeight": 600,
337
247
  "textDecoration": "none",
338
- "color": "hsla(0, 0%, 55.3%, 1.000)"
248
+ "color": "hsla(0, 0%, 100%, 1.000)"
339
249
  }
340
250
  },
341
251
  "danger": {
@@ -363,117 +273,301 @@ var typography = {
363
273
  "xsmall": {
364
274
  "textAlign": "center",
365
275
  "fontSize": "12px",
366
- "fontWeight": 500,
276
+ "fontWeight": 600,
367
277
  "textDecoration": "none",
368
278
  "color": "hsla(0, 0%, 100%, 1.000)"
369
279
  }
370
280
  }
371
- }
372
- },
373
- "content": {
374
- "section-H2": {
375
- "textAlign": "left",
376
- "fontSize": "20px",
377
- "fontWeight": 400,
378
- "textDecoration": "none",
379
- "color": "hsla(208, 7.7%, 38.2%, 1.000)"
380
- },
381
- "sectionH3": {
382
- "textAlign": "left",
383
- "fontSize": "16px",
384
- "fontWeight": 400,
385
- "textDecoration": "none",
386
- "color": "hsla(208, 7.7%, 38.2%, 1.000)"
387
- },
388
- "actionParagraph": {
389
- "textAlign": "left",
390
- "fontSize": "14px",
391
- "fontWeight": 300,
392
- "lineHeight": "25px",
393
- "textDecoration": "none",
394
- "color": "hsla(207, 5%, 56.7%, 1.000)"
395
281
  },
396
- "hyperlink": {
397
- "hover": {
282
+ "input": {
283
+ "label": {
398
284
  "textAlign": "left",
399
- "fontStyle": "italic",
400
285
  "fontSize": "14px",
401
- "fontWeight": 500,
402
- "lineHeight": "25px",
286
+ "fontWeight": 400,
403
287
  "textDecoration": "none",
404
- "color": "hsla(195, 98.3%, 45.1%, 1.000)"
288
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
405
289
  },
406
- "base": {
407
- "textAlign": "left",
408
- "fontStyle": "italic",
409
- "fontSize": "14px",
410
- "fontWeight": 500,
411
- "lineHeight": "25px",
412
- "textDecoration": "none",
413
- "color": "hsla(205, 62.3%, 55.3%, 1.000)"
414
- }
415
- }
416
- },
417
- "feedbackBar": {
418
- "message": {
419
- "textAlign": "left",
420
- "fontSize": "14px",
421
- "fontWeight": 400,
422
- "lineHeight": "15px",
423
- "letterSpacing": "-0.2px",
424
- "textDecoration": "none",
425
- "color": "hsla(0, 0%, 100%, 1.000)"
426
- }
427
- },
428
- "searchBar": {
429
- "placeholder": {
430
- "textAlign": "left",
431
- "fontStyle": "italic",
432
- "fontSize": "14px",
433
- "fontWeight": 700,
434
- "textDecoration": "none",
435
- "color": "hsla(0, 0%, 46.3%, 0.647)"
436
- },
437
- "value": {
438
- "textAlign": "left",
439
- "fontSize": "14px",
440
- "fontWeight": 600,
441
- "textDecoration": "none",
442
- "color": "hsla(207, 5%, 56.7%, 1.000)"
443
- }
444
- },
445
- "meta": {
446
- "tagList": {
447
- "emptyStates": {
290
+ "placeholder": {
448
291
  "normal": {
449
292
  "textAlign": "left",
450
293
  "fontStyle": "italic",
451
- "fontSize": "14px",
294
+ "fontSize": "16px",
452
295
  "fontWeight": 500,
453
296
  "textDecoration": "none",
454
- "color": "hsla(0, 0%, 46.3%, 1.000)"
297
+ "color": "hsla(0, 0%, 46.3%, 0.502)"
455
298
  },
456
- "small": {
299
+ "compact": {
457
300
  "textAlign": "left",
458
301
  "fontStyle": "italic",
459
- "fontSize": "12px",
302
+ "fontSize": "14px",
460
303
  "fontWeight": 500,
304
+ "lineHeight": "15px",
461
305
  "textDecoration": "none",
462
- "color": "hsla(0, 0%, 46.3%, 1.000)"
306
+ "color": "hsla(0, 0%, 46.3%, 0.502)"
463
307
  }
464
308
  },
465
- "item": {
309
+ "value": {
466
310
  "normal": {
467
311
  "textAlign": "left",
468
- "fontSize": "14px",
469
- "fontWeight": 600,
312
+ "fontSize": "16px",
313
+ "fontWeight": 500,
314
+ "lineHeight": "25px",
470
315
  "textDecoration": "none",
471
- "color": "hsla(200, 3%, 38.8%, 1.000)"
316
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
472
317
  },
473
- "small": {
318
+ "compact": {
474
319
  "textAlign": "left",
475
- "fontSize": "12px",
476
- "fontWeight": 600,
320
+ "fontSize": "14px",
321
+ "fontWeight": 500,
322
+ "lineHeight": "15px",
323
+ "textDecoration": "none",
324
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
325
+ }
326
+ }
327
+ },
328
+ "labelInformation": {
329
+ "textAlign": "left",
330
+ "fontStyle": "italic",
331
+ "fontSize": "14px",
332
+ "fontWeight": 300,
333
+ "lineHeight": "25px",
334
+ "textDecoration": "none",
335
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
336
+ },
337
+ "select": {
338
+ "option": {
339
+ "textAlign": "left",
340
+ "fontSize": "16px",
341
+ "fontWeight": 500,
342
+ "lineHeight": "15px",
343
+ "textDecoration": "none",
344
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
345
+ },
346
+ "selectedValue": {
347
+ "textAlign": "left",
348
+ "fontSize": "16px",
349
+ "fontWeight": 500,
350
+ "lineHeight": "15px",
351
+ "textDecoration": "none",
352
+ "color": "hsla(0, 0%, 17.6%, 1.000)"
353
+ },
354
+ "option(Hover)": {
355
+ "textAlign": "left",
356
+ "fontSize": "16px",
357
+ "fontWeight": 500,
358
+ "lineHeight": "15px",
359
+ "textDecoration": "none",
360
+ "color": "hsla(207, 41.2%, 53.3%, 1.000)"
361
+ }
362
+ },
363
+ "feedback": {
364
+ "message": {
365
+ "textAlign": "left",
366
+ "fontStyle": "italic",
367
+ "fontSize": "14px",
368
+ "fontWeight": 500,
369
+ "lineHeight": "20px",
370
+ "textDecoration": "none",
371
+ "color": "hsla(0, 0%, 100%, 1.000)"
372
+ }
373
+ }
374
+ },
375
+ "global": {
376
+ "mainMenu": {
377
+ "menuItem": {
378
+ "default": {
379
+ "textAlign": "left",
380
+ "fontSize": "16px",
381
+ "fontWeight": 300,
382
+ "textDecoration": "none",
383
+ "color": "hsla(0, 0%, 34.5%, 0.847)"
384
+ },
385
+ "active": {
386
+ "textAlign": "left",
387
+ "fontSize": "16px",
388
+ "fontWeight": 300,
389
+ "textDecoration": "none",
390
+ "color": "hsla(0, 0%, 34.5%, 0.851)"
391
+ },
392
+ "hover": {
393
+ "textAlign": "left",
394
+ "fontSize": "16px",
395
+ "fontWeight": 300,
396
+ "textDecoration": "none",
397
+ "color": "hsla(0, 0%, 34.5%, 0.851)"
398
+ }
399
+ },
400
+ "subheader": {
401
+ "textAlign": "left",
402
+ "fontSize": "14px",
403
+ "fontWeight": 600,
404
+ "textTransform": "uppercase",
405
+ "letterSpacing": "0.35px",
406
+ "textDecoration": "none",
407
+ "color": "hsla(0, 0%, 34.5%, 0.902)"
408
+ },
409
+ "hidePrompt": {
410
+ "textAlign": "left",
411
+ "fontSize": "14px",
412
+ "fontWeight": 300,
413
+ "textDecoration": "none",
414
+ "color": "hsla(0, 0%, 34.5%, 1.000)"
415
+ },
416
+ "subItem": {
417
+ "default": {
418
+ "textAlign": "left",
419
+ "fontSize": "14px",
420
+ "fontWeight": 300,
421
+ "textDecoration": "none",
422
+ "color": "hsla(0, 0%, 34.5%, 0.647)"
423
+ },
424
+ "active": {
425
+ "textAlign": "left",
426
+ "fontSize": "14px",
427
+ "fontWeight": 600,
428
+ "textDecoration": "none",
429
+ "color": "hsla(214, 14.4%, 46.3%, 1.000)"
430
+ },
431
+ "hover": {
432
+ "textAlign": "left",
433
+ "fontSize": "14px",
434
+ "fontWeight": 300,
435
+ "textDecoration": "none",
436
+ "color": "hsla(214, 14.4%, 46.3%, 1.000)"
437
+ }
438
+ },
439
+ "identity": {
440
+ "textAlign": "left",
441
+ "fontSize": "12px",
442
+ "fontWeight": 400,
443
+ "textDecoration": "none",
444
+ "color": "hsla(0, 0%, 34.1%, 0.749)"
445
+ }
446
+ },
447
+ "topBar": {
448
+ "search": {
449
+ "value": {
450
+ "textAlign": "left",
451
+ "fontSize": "14px",
452
+ "fontWeight": 300,
453
+ "textDecoration": "none",
454
+ "color": "hsla(0, 0%, 34.9%, 1.000)"
455
+ },
456
+ "placeholder": {
457
+ "textAlign": "left",
458
+ "fontStyle": "italic",
459
+ "fontSize": "14px",
460
+ "fontWeight": 300,
461
+ "textDecoration": "none",
462
+ "color": "hsla(0, 0%, 65.5%, 1.000)"
463
+ }
464
+ }
465
+ }
466
+ },
467
+ "content": {
468
+ "section-H2": {
469
+ "textAlign": "left",
470
+ "fontSize": "20px",
471
+ "fontWeight": 400,
472
+ "textDecoration": "none",
473
+ "color": "hsla(208, 7.7%, 38.2%, 1.000)"
474
+ },
475
+ "sectionH3": {
476
+ "textAlign": "left",
477
+ "fontSize": "16px",
478
+ "fontWeight": 400,
479
+ "textDecoration": "none",
480
+ "color": "hsla(208, 7.7%, 38.2%, 1.000)"
481
+ },
482
+ "actionParagraph": {
483
+ "textAlign": "left",
484
+ "fontSize": "14px",
485
+ "fontWeight": 300,
486
+ "lineHeight": "25px",
487
+ "textDecoration": "none",
488
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
489
+ },
490
+ "hyperlink": {
491
+ "hover": {
492
+ "textAlign": "left",
493
+ "fontStyle": "italic",
494
+ "fontSize": "14px",
495
+ "fontWeight": 500,
496
+ "lineHeight": "25px",
497
+ "textDecoration": "none",
498
+ "color": "hsla(195, 98.3%, 45.1%, 1.000)"
499
+ },
500
+ "base": {
501
+ "textAlign": "left",
502
+ "fontStyle": "italic",
503
+ "fontSize": "14px",
504
+ "fontWeight": 500,
505
+ "lineHeight": "25px",
506
+ "textDecoration": "none",
507
+ "color": "hsla(205, 62.3%, 55.3%, 1.000)"
508
+ }
509
+ }
510
+ },
511
+ "feedbackBar": {
512
+ "message": {
513
+ "textAlign": "left",
514
+ "fontSize": "14px",
515
+ "fontWeight": 400,
516
+ "lineHeight": "15px",
517
+ "letterSpacing": "-0.2px",
518
+ "textDecoration": "none",
519
+ "color": "hsla(0, 0%, 100%, 1.000)"
520
+ }
521
+ },
522
+ "searchBar": {
523
+ "placeholder": {
524
+ "textAlign": "left",
525
+ "fontStyle": "italic",
526
+ "fontSize": "14px",
527
+ "fontWeight": 700,
528
+ "textDecoration": "none",
529
+ "color": "hsla(0, 0%, 46.3%, 0.647)"
530
+ },
531
+ "value": {
532
+ "textAlign": "left",
533
+ "fontSize": "14px",
534
+ "fontWeight": 600,
535
+ "textDecoration": "none",
536
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
537
+ }
538
+ },
539
+ "meta": {
540
+ "tagList": {
541
+ "emptyStates": {
542
+ "normal": {
543
+ "textAlign": "left",
544
+ "fontStyle": "italic",
545
+ "fontSize": "14px",
546
+ "fontWeight": 500,
547
+ "textDecoration": "none",
548
+ "color": "hsla(0, 0%, 46.3%, 1.000)"
549
+ },
550
+ "small": {
551
+ "textAlign": "left",
552
+ "fontStyle": "italic",
553
+ "fontSize": "12px",
554
+ "fontWeight": 500,
555
+ "textDecoration": "none",
556
+ "color": "hsla(0, 0%, 46.3%, 1.000)"
557
+ }
558
+ },
559
+ "item": {
560
+ "normal": {
561
+ "textAlign": "left",
562
+ "fontSize": "14px",
563
+ "fontWeight": 600,
564
+ "textDecoration": "none",
565
+ "color": "hsla(200, 3%, 38.8%, 1.000)"
566
+ },
567
+ "small": {
568
+ "textAlign": "left",
569
+ "fontSize": "12px",
570
+ "fontWeight": 600,
477
571
  "textDecoration": "none",
478
572
  "color": "hsla(200, 3%, 38.8%, 1.000)"
479
573
  }
@@ -603,7 +697,7 @@ var typography = {
603
697
  "fontWeight": 700,
604
698
  "letterSpacing": "0.4px",
605
699
  "textDecoration": "none",
606
- "color": "hsla(204, 2%, 59%, 1.000)"
700
+ "color": "hsla(204, 2.4%, 59%, 1.000)"
607
701
  },
608
702
  "left": {
609
703
  "textAlign": "left",
@@ -611,7 +705,7 @@ var typography = {
611
705
  "fontWeight": 700,
612
706
  "letterSpacing": "0.4px",
613
707
  "textDecoration": "none",
614
- "color": "hsla(204, 2%, 59%, 1.000)"
708
+ "color": "hsla(204, 2.4%, 59%, 1.000)"
615
709
  },
616
710
  "right": {
617
711
  "textAlign": "right",
@@ -619,99 +713,7 @@ var typography = {
619
713
  "fontWeight": 700,
620
714
  "letterSpacing": "0.4px",
621
715
  "textDecoration": "none",
622
- "color": "hsla(204, 2%, 59%, 1.000)"
623
- }
624
- }
625
- },
626
- "global": {
627
- "mainMenu": {
628
- "menuItem": {
629
- "default": {
630
- "textAlign": "left",
631
- "fontSize": "16px",
632
- "fontWeight": 300,
633
- "textDecoration": "none",
634
- "color": "hsla(0, 0%, 34.5%, 0.847)"
635
- },
636
- "active": {
637
- "textAlign": "left",
638
- "fontSize": "16px",
639
- "fontWeight": 300,
640
- "textDecoration": "none",
641
- "color": "hsla(0, 0%, 34.5%, 0.851)"
642
- },
643
- "hover": {
644
- "textAlign": "left",
645
- "fontSize": "16px",
646
- "fontWeight": 300,
647
- "textDecoration": "none",
648
- "color": "hsla(0, 0%, 34.5%, 0.851)"
649
- }
650
- },
651
- "subheader": {
652
- "textAlign": "left",
653
- "fontSize": "14px",
654
- "fontWeight": 600,
655
- "textTransform": "uppercase",
656
- "letterSpacing": "0.35px",
657
- "textDecoration": "none",
658
- "color": "hsla(0, 0%, 34.5%, 0.902)"
659
- },
660
- "hidePrompt": {
661
- "textAlign": "left",
662
- "fontSize": "14px",
663
- "fontWeight": 300,
664
- "textDecoration": "none",
665
- "color": "hsla(0, 0%, 34.5%, 1.000)"
666
- },
667
- "subItem": {
668
- "default": {
669
- "textAlign": "left",
670
- "fontSize": "14px",
671
- "fontWeight": 300,
672
- "textDecoration": "none",
673
- "color": "hsla(0, 0%, 34.5%, 0.647)"
674
- },
675
- "active": {
676
- "textAlign": "left",
677
- "fontSize": "14px",
678
- "fontWeight": 600,
679
- "textDecoration": "none",
680
- "color": "hsla(214, 14.4%, 46.3%, 1.000)"
681
- },
682
- "hover": {
683
- "textAlign": "left",
684
- "fontSize": "14px",
685
- "fontWeight": 300,
686
- "textDecoration": "none",
687
- "color": "hsla(214, 14.4%, 46.3%, 1.000)"
688
- }
689
- },
690
- "identity": {
691
- "textAlign": "left",
692
- "fontSize": "12px",
693
- "fontWeight": 400,
694
- "textDecoration": "none",
695
- "color": "hsla(0, 0%, 34.1%, 0.749)"
696
- }
697
- },
698
- "topBar": {
699
- "search": {
700
- "placeholder": {
701
- "textAlign": "left",
702
- "fontStyle": "italic",
703
- "fontSize": "14px",
704
- "fontWeight": 300,
705
- "textDecoration": "none",
706
- "color": "hsla(0, 0%, 65.5%, 1.000)"
707
- },
708
- "value": {
709
- "textAlign": "left",
710
- "fontSize": "14px",
711
- "fontWeight": 300,
712
- "textDecoration": "none",
713
- "color": "hsla(0, 0%, 34.9%, 1.000)"
714
- }
716
+ "color": "hsla(204, 2.4%, 59%, 1.000)"
715
717
  }
716
718
  }
717
719
  },
@@ -835,6 +837,56 @@ var typography = {
835
837
  "fontWeight": 500,
836
838
  "textDecoration": "none",
837
839
  "color": "hsla(202, 6.2%, 74.5%, 1.000)"
840
+ },
841
+ "filterButton": {
842
+ "default": {
843
+ "textAlign": "left",
844
+ "fontSize": "12px",
845
+ "fontWeight": 400,
846
+ "textDecoration": "none",
847
+ "color": "hsla(0, 0%, 50.2%, 1.000)"
848
+ },
849
+ "active": {
850
+ "textAlign": "left",
851
+ "fontSize": "12px",
852
+ "fontWeight": 400,
853
+ "textDecoration": "none",
854
+ "color": "hsla(0, 0%, 100%, 1.000)"
855
+ },
856
+ "hover": {
857
+ "textAlign": "left",
858
+ "fontSize": "12px",
859
+ "fontWeight": 400,
860
+ "textDecoration": "none",
861
+ "color": "hsla(0, 0%, 100%, 1.000)"
862
+ }
863
+ },
864
+ "searchInput": {
865
+ "placeholder": {
866
+ "textAlign": "left",
867
+ "fontStyle": "italic",
868
+ "fontSize": "12px",
869
+ "fontWeight": 500,
870
+ "textDecoration": "none",
871
+ "color": "hsla(0, 0%, 46.3%, 0.647)"
872
+ },
873
+ "value": {
874
+ "textAlign": "left",
875
+ "fontSize": "12px",
876
+ "fontWeight": 400,
877
+ "textDecoration": "none",
878
+ "color": "hsla(0, 0%, 50.2%, 1.000)"
879
+ }
880
+ }
881
+ },
882
+ "tables": {
883
+ "groupName": {
884
+ "textAlign": "left",
885
+ "fontSize": "12px",
886
+ "fontWeight": 400,
887
+ "letterSpacing": "0.3px",
888
+ "textDecoration": "none",
889
+ "color": "hsla(210, 2.4%, 51%, 0.651)"
838
890
  }
839
891
  }
840
892
  };
@@ -869,9 +921,15 @@ var colors = {
869
921
  "caution": "hsla(57, 57.7%, 62.9%, 1.000)",
870
922
  "danger": "hsla(0, 63.5%, 64.5%, 1.000)",
871
923
  "folder": "hsla(207, 95.3%, 66.5%, 1.000)",
924
+ "highlight": "hsla(207, 95.3%, 66.5%, 1.000)",
872
925
  "good": "hsla(126, 48.1%, 68.2%, 1.000)",
873
- "neutral": "hsla(0, 0%, 91.8%, 1.000)",
874
- "highlight": "hsla(207, 95.3%, 66.5%, 1.000)"
926
+ "neutral": "hsla(0, 0%, 91.8%, 1.000)"
927
+ },
928
+ "transparent": "hsla(0, 0%, 0%, 0.000)",
929
+ "input": {
930
+ "border": {
931
+ "default": "hsla(120, 1.3%, 85.3%, 1.000)"
932
+ }
875
933
  }
876
934
  };
877
935
 
@@ -879,33 +937,26 @@ var styles = {
879
937
  "generic": {
880
938
  "transparent": {}
881
939
  },
882
- "filterBar": {
883
- "divider": {
884
- "backgroundColor": "hsla(0, 0%, 89.4%, 1.000)"
885
- }
886
- },
887
940
  "form": {
888
941
  "input": {
889
942
  "default": {
890
943
  "normal": {
891
944
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
892
- "borderColor": "hsla(120, 1.3%, 85.3%, 1.000)"
945
+ "borderColor": colors.input.border["default"],
946
+ "border": colors.input.border["default"] + " 1px solid"
893
947
  },
894
948
  "focused": {
895
949
  "boxShadow": "0px 3px 7px 0px hsla(207, 65.8%, 31%, 0.078)",
896
950
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
897
- "borderColor": "hsla(205, 58.9%, 71.4%, 1.000)"
951
+ "borderColor": "hsla(205, 58.9%, 71.4%, 1.000)",
952
+ "border": "hsla(205, 58.9%, 71.4%, 1.000) 1px solid"
898
953
  }
899
954
  },
900
955
  "disabled": {
901
956
  "normal": {
902
957
  "backgroundColor": "hsla(206, 36.8%, 96.3%, 1.000)",
903
- "borderColor": "hsla(120, 1.3%, 85.3%, 1.000)"
904
- },
905
- "focused": {
906
- "boxShadow": "0px 3px 7px 0px hsla(207, 65.8%, 31%, 0.078)",
907
- "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
908
- "borderColor": "hsla(205, 58.9%, 71.4%, 1.000)"
958
+ "borderColor": "hsla(120, 1.3%, 85.3%, 1.000)",
959
+ "border": "hsla(120, 1.3%, 85.3%, 1.000) 1px solid"
909
960
  }
910
961
  },
911
962
  "subdivision": {
@@ -915,45 +966,54 @@ var styles = {
915
966
  "focused": {
916
967
  "boxShadow": "0px 3px 7px 0px hsla(207, 67.8%, 35.3%, 0.071)",
917
968
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
918
- "borderColor": "hsla(205, 58.9%, 71.4%, 1.000)"
969
+ "borderColor": "hsla(205, 58.9%, 71.4%, 1.000)",
970
+ "border": "hsla(205, 58.9%, 71.4%, 1.000) 2px solid"
919
971
  },
920
972
  "normal": {
921
- "borderColor": "hsla(205, 58.9%, 71.4%, 1.000)"
973
+ "borderColor": "hsla(205, 58.9%, 71.4%, 1.000)",
974
+ "border": "hsla(205, 58.9%, 71.4%, 1.000) 1px solid"
922
975
  }
923
976
  },
924
977
  "valid": {
925
978
  "focused": {
926
979
  "boxShadow": "0px 3px 5px 0px hsla(120, 76.6%, 15.1%, 0.071)",
927
980
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
928
- "borderColor": "hsla(120, 35.2%, 71.6%, 1.000)"
981
+ "borderColor": "hsla(120, 35.2%, 71.6%, 1.000)",
982
+ "border": "hsla(120, 35.2%, 71.6%, 1.000) 2px solid"
929
983
  },
930
984
  "normal": {
931
- "borderColor": "hsla(120, 35.2%, 71.6%, 1.000)"
985
+ "borderColor": "hsla(120, 35.2%, 71.6%, 1.000)",
986
+ "border": "hsla(120, 35.2%, 71.6%, 1.000) 1px solid"
932
987
  }
933
988
  },
934
989
  "invalid": {
935
990
  "focused": {
936
991
  "boxShadow": "0px 3px 7px 0px hsla(0, 100%, 50%, 0.102)",
937
992
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
938
- "borderColor": "hsla(0, 78.8%, 70.4%, 1.000)"
993
+ "borderColor": "hsla(0, 78.8%, 70.4%, 1.000)",
994
+ "border": "hsla(0, 78.8%, 70.4%, 1.000) 2px solid"
939
995
  },
940
996
  "normal": {
941
- "borderColor": "hsla(0, 78.8%, 70.4%, 1.000)"
997
+ "borderColor": "hsla(0, 78.8%, 70.4%, 1.000)",
998
+ "border": "hsla(0, 78.8%, 70.4%, 1.000) 1px solid"
942
999
  }
943
1000
  },
944
1001
  "processing": {
945
1002
  "focused": {
946
1003
  "boxShadow": "0px 3px 7px 0px hsla(195, 67.8%, 35.3%, 0.071)",
947
1004
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
948
- "borderColor": "hsla(195, 79.5%, 71.4%, 1.000)"
1005
+ "borderColor": "hsla(195, 79.5%, 71.4%, 1.000)",
1006
+ "border": "hsla(195, 79.5%, 71.4%, 1.000) 2px solid"
949
1007
  },
950
1008
  "normal": {
951
1009
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
952
- "borderColor": "hsla(195, 79.5%, 71.4%, 1.000)"
1010
+ "borderColor": "hsla(195, 79.5%, 71.4%, 1.000)",
1011
+ "border": "hsla(195, 79.5%, 71.4%, 1.000) 1px solid"
953
1012
  }
954
1013
  },
955
1014
  "seperatedValues": {
956
1015
  "background": {
1016
+ "backgroundColor": "hsla(205, 82.4%, 64.3%, 1.000)",
957
1017
  "backgroundImage": "linear-gradient(315.00deg, hsla(205, 82.4%, 64.3%, 1.000) 0%, hsla(195, 83.5%, 54.7%, 1.000) 100%)"
958
1018
  },
959
1019
  "hoverHighlight": {
@@ -964,6 +1024,7 @@ var styles = {
964
1024
  "button": {
965
1025
  "primary": {
966
1026
  "default": {
1027
+ "backgroundColor": "hsla(200, 77.5%, 68.6%, 1.000)",
967
1028
  "backgroundImage": "linear-gradient(135.00deg, hsla(200, 77.5%, 68.6%, 1.000) 0%, hsla(207, 80.2%, 64.3%, 1.000) 100%)"
968
1029
  },
969
1030
  "hover": {
@@ -976,21 +1037,23 @@ var styles = {
976
1037
  "backgroundColor": "hsla(202, 70.4%, 62.9%, 1.000)"
977
1038
  },
978
1039
  "disabled": {
1040
+ "backgroundColor": "hsla(200, 77.5%, 68.6%, 1.000)",
979
1041
  "backgroundImage": "linear-gradient(135.00deg, hsla(200, 77.5%, 68.6%, 1.000) 0%, hsla(207, 80.2%, 64.3%, 1.000) 100%)"
980
1042
  },
981
1043
  "actionArea": {
1044
+ "backgroundColor": "hsla(200, 77.5%, 68.6%, 1.000)",
982
1045
  "backgroundImage": "linear-gradient(135.00deg, hsla(200, 77.5%, 68.6%, 1.000) 0%, hsla(207, 80.2%, 64.3%, 1.000) 100%)"
983
1046
  }
984
1047
  },
985
1048
  "secondary": {
986
1049
  "default": {
987
- "backgroundColor": "hsla(0, 0%, 94.9%, 1.000)"
1050
+ "backgroundColor": "hsla(206, 42.1%, 92.5%, 1.000)"
988
1051
  },
989
1052
  "hover": {
990
- "backgroundColor": "hsla(0, 0%, 85.9%, 1.000)"
1053
+ "backgroundColor": "hsla(207, 42.9%, 91.8%, 1.000)"
991
1054
  },
992
1055
  "active": {
993
- "backgroundColor": "hsla(204, 18.2%, 78.4%, 1.000)"
1056
+ "backgroundColor": "hsla(207, 29.7%, 82.2%, 1.000)"
994
1057
  },
995
1058
  "disabled": {
996
1059
  "backgroundColor": "hsla(0, 0%, 97.3%, 1.000)"
@@ -1004,6 +1067,7 @@ var styles = {
1004
1067
  },
1005
1068
  "danger": {
1006
1069
  "default": {
1070
+ "backgroundColor": "hsla(0, 54%, 60.8%, 1.000)",
1007
1071
  "backgroundImage": "linear-gradient(317.51deg, hsla(0, 54%, 60.8%, 1.000) 0%, hsla(0, 71.4%, 67.1%, 1.000) 100%)"
1008
1072
  },
1009
1073
  "hover": {
@@ -1019,6 +1083,7 @@ var styles = {
1019
1083
  "backgroundColor": "hsla(0, 62.1%, 61.8%, 1.000)"
1020
1084
  },
1021
1085
  "actionArea": {
1086
+ "backgroundColor": "hsla(0, 54%, 60.8%, 1.000)",
1022
1087
  "backgroundImage": "linear-gradient(317.51deg, hsla(0, 54%, 60.8%, 1.000) 0%, hsla(0, 71.4%, 67.1%, 1.000) 100%)"
1023
1088
  }
1024
1089
  }
@@ -1027,17 +1092,22 @@ var styles = {
1027
1092
  "off": {
1028
1093
  "default": {
1029
1094
  "outer": {
1095
+ "backgroundColor": "hsla(210, 30%, 96.1%, 1.000)",
1030
1096
  "backgroundImage": "linear-gradient(180.00deg, hsla(210, 30%, 96.1%, 1.000) 0%, hsla(203, 41.9%, 93.9%, 1.000) 100%)",
1031
- "borderColor": "hsla(208, 24.6%, 77.6%, 0.651)"
1097
+ "borderColor": "hsla(208, 24.6%, 77.6%, 0.651)",
1098
+ "border": "hsla(208, 24.6%, 77.6%, 0.651) 1px solid"
1032
1099
  },
1033
1100
  "inner": {
1101
+ "backgroundColor": "hsla(205, 82.4%, 64.3%, 1.000)",
1034
1102
  "backgroundImage": "linear-gradient(315.00deg, hsla(205, 82.4%, 64.3%, 1.000) 0%, hsla(195, 83.5%, 54.7%, 1.000) 100%)"
1035
1103
  }
1036
1104
  },
1037
1105
  "disabled": {
1038
1106
  "outer": {
1107
+ "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
1039
1108
  "backgroundImage": "linear-gradient(180.00deg, hsla(0, 0%, 100%, 1.000) 0%, hsla(0, 0%, 98.8%, 1.000) 100%)",
1040
- "borderColor": "hsla(208, 22.7%, 85.3%, 0.651)"
1109
+ "borderColor": "hsla(208, 22.7%, 85.3%, 0.651)",
1110
+ "border": "hsla(208, 22.7%, 85.3%, 0.651) 1px solid"
1041
1111
  },
1042
1112
  "inner": {
1043
1113
  "backgroundColor": "hsla(120, 1.3%, 85.3%, 1.000)"
@@ -1045,16 +1115,20 @@ var styles = {
1045
1115
  },
1046
1116
  "loading": {
1047
1117
  "outer": {
1118
+ "backgroundColor": "hsla(210, 30%, 96.1%, 1.000)",
1048
1119
  "backgroundImage": "linear-gradient(180.00deg, hsla(210, 30%, 96.1%, 1.000) 0%, hsla(203, 41.9%, 93.9%, 1.000) 100%)",
1049
- "borderColor": "hsla(208, 24.6%, 77.6%, 0.651)"
1120
+ "borderColor": "hsla(208, 24.6%, 77.6%, 0.651)",
1121
+ "border": "hsla(208, 24.6%, 77.6%, 0.651) 1px solid"
1050
1122
  }
1051
1123
  }
1052
1124
  },
1053
1125
  "on": {
1054
1126
  "default": {
1055
1127
  "outer": {
1128
+ "backgroundColor": "hsla(204, 78.4%, 72.7%, 1.000)",
1056
1129
  "backgroundImage": "linear-gradient(317.51deg, hsla(204, 78.4%, 72.7%, 1.000) 0%, hsla(195, 83.2%, 67.3%, 1.000) 100%)",
1057
- "borderColor": "hsla(205, 66.5%, 61.4%, 1.000)"
1130
+ "borderColor": "hsla(205, 66.5%, 61.4%, 1.000)",
1131
+ "border": "hsla(205, 66.5%, 61.4%, 1.000) 1px solid"
1058
1132
  },
1059
1133
  "inner": {
1060
1134
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
@@ -1062,8 +1136,10 @@ var styles = {
1062
1136
  },
1063
1137
  "disabled": {
1064
1138
  "outer": {
1139
+ "backgroundColor": "hsla(205, 61.9%, 87.6%, 1.000)",
1065
1140
  "backgroundImage": "linear-gradient(180.00deg, hsla(205, 61.9%, 87.6%, 1.000) 0%, hsla(204, 45.5%, 84.9%, 1.000) 100%)",
1066
- "borderColor": "hsla(205, 89.5%, 85.1%, 1.000)"
1141
+ "borderColor": "hsla(205, 89.5%, 85.1%, 1.000)",
1142
+ "border": "hsla(205, 89.5%, 85.1%, 1.000) 1px solid"
1067
1143
  },
1068
1144
  "inner": {
1069
1145
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
@@ -1071,16 +1147,20 @@ var styles = {
1071
1147
  },
1072
1148
  "loading": {
1073
1149
  "outer": {
1150
+ "backgroundColor": "hsla(204, 68.3%, 72.7%, 0.647)",
1074
1151
  "backgroundImage": "linear-gradient(315.00deg, hsla(204, 68.3%, 72.7%, 0.647) 0%, hsla(195, 83.2%, 67.3%, 0.655) 100%)",
1075
- "borderColor": "hsla(205, 66.5%, 61.4%, 0.651)"
1152
+ "borderColor": "hsla(205, 66.5%, 61.4%, 0.651)",
1153
+ "border": "hsla(205, 66.5%, 61.4%, 0.651) 1px solid"
1076
1154
  }
1077
1155
  }
1078
1156
  },
1079
1157
  "failure": {
1080
1158
  "default": {
1081
1159
  "outer": {
1160
+ "backgroundColor": "hsla(0, 68.5%, 67.6%, 1.000)",
1082
1161
  "backgroundImage": "linear-gradient(317.51deg, hsla(0, 68.5%, 67.6%, 1.000) 0%, hsla(0, 69.1%, 65.7%, 1.000) 100%)",
1083
- "borderColor": "hsla(0, 66.5%, 61.4%, 1.000)"
1162
+ "borderColor": "hsla(0, 66.5%, 61.4%, 1.000)",
1163
+ "border": "hsla(0, 66.5%, 61.4%, 1.000) 1px solid"
1084
1164
  },
1085
1165
  "inner": {
1086
1166
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
@@ -1088,191 +1168,1101 @@ var styles = {
1088
1168
  },
1089
1169
  "loading": {
1090
1170
  "outer": {
1171
+ "backgroundColor": "hsla(0, 60.6%, 73.1%, 1.000)",
1091
1172
  "backgroundImage": "linear-gradient(317.51deg, hsla(0, 60.6%, 73.1%, 1.000) 0.4%, hsla(0, 57.9%, 73.9%, 1.000) 100%)",
1092
- "borderColor": "hsla(0, 54.2%, 67.5%, 1.000)"
1173
+ "borderColor": "hsla(0, 54.2%, 67.5%, 1.000)",
1174
+ "border": "hsla(0, 54.2%, 67.5%, 1.000) 1px solid"
1175
+ },
1176
+ "inner": {
1177
+ "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
1178
+ }
1179
+ }
1180
+ },
1181
+ "danger": {
1182
+ "default": {
1183
+ "outer": {
1184
+ "backgroundColor": "hsla(0, 68%, 66.9%, 1.000)",
1185
+ "backgroundImage": "linear-gradient(317.51deg, hsla(0, 68%, 66.9%, 1.000) 0%, hsla(20, 81.2%, 64.5%, 1.000) 100%)",
1186
+ "borderColor": "hsla(0, 51.2%, 60.6%, 1.000)",
1187
+ "border": "hsla(0, 51.2%, 60.6%, 1.000) 1px solid"
1188
+ },
1189
+ "inner": {
1190
+ "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
1191
+ }
1192
+ },
1193
+ "loading": {
1194
+ "outer": {
1195
+ "backgroundColor": "hsla(0, 79.5%, 77.1%, 1.000)",
1196
+ "backgroundImage": "linear-gradient(317.51deg, hsla(0, 79.5%, 77.1%, 1.000) 0%, hsla(20, 96%, 80.4%, 1.000) 100%)",
1197
+ "borderColor": "hsla(0, 62%, 73.1%, 1.000)",
1198
+ "border": "hsla(0, 62%, 73.1%, 1.000) 1px solid"
1199
+ }
1200
+ },
1201
+ "disabled": {
1202
+ "outer": {
1203
+ "backgroundColor": "hsla(0, 57%, 81.8%, 1.000)",
1204
+ "backgroundImage": "linear-gradient(317.51deg, hsla(0, 57%, 81.8%, 1.000) 0%, hsla(19, 100%, 84.9%, 1.000) 100%)",
1205
+ "borderColor": "hsla(0, 78.7%, 85.3%, 1.000)",
1206
+ "border": "hsla(0, 78.7%, 85.3%, 1.000) 1px solid"
1093
1207
  },
1094
1208
  "inner": {
1095
1209
  "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
1096
1210
  }
1097
1211
  }
1098
1212
  },
1099
- "danger": {
1213
+ "locked": {
1214
+ "default": {
1215
+ "outer": {
1216
+ "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
1217
+ "backgroundImage": "linear-gradient(180.00deg, hsla(0, 0%, 100%, 1.000) 0%, hsla(0, 0%, 98.8%, 1.000) 100%)",
1218
+ "borderColor": "hsla(208, 22.7%, 85.3%, 0.651)",
1219
+ "border": "hsla(208, 22.7%, 85.3%, 0.651) 1px solid"
1220
+ },
1221
+ "inner": {
1222
+ "backgroundColor": "hsla(0, 0%, 89.4%, 1.000)"
1223
+ }
1224
+ }
1225
+ }
1226
+ },
1227
+ "checkbox": {
1228
+ "unchecked": {
1229
+ "disabled": {
1230
+ "backgroundColor": "hsla(0, 0%, 98.8%, 1.000)",
1231
+ "borderColor": "hsla(210, 20%, 90.2%, 1.000)",
1232
+ "border": "hsla(210, 20%, 90.2%, 1.000) 2px solid"
1233
+ },
1234
+ "default": {
1235
+ "borderColor": "hsla(208, 24.6%, 77.6%, 1.000)",
1236
+ "border": "hsla(208, 24.6%, 77.6%, 1.000) 2px solid"
1237
+ },
1238
+ "hover": {
1239
+ "borderColor": "hsla(195, 94.2%, 66.1%, 1.000)",
1240
+ "border": "hsla(195, 94.2%, 66.1%, 1.000) 2px solid"
1241
+ }
1242
+ },
1243
+ "checked": {
1244
+ "disabled": {
1245
+ "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1246
+ "backgroundColor": "hsla(210, 20%, 90.2%, 1.000)"
1247
+ },
1248
+ "default": {
1249
+ "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1250
+ "backgroundColor": "hsla(207, 95.3%, 66.5%, 1.000)"
1251
+ },
1252
+ "hover": {
1253
+ "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1254
+ "backgroundColor": "hsla(195, 95.3%, 66.5%, 1.000)"
1255
+ }
1256
+ },
1257
+ "indeterminate": {
1258
+ "hover": {
1259
+ "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1260
+ "backgroundColor": "hsla(195, 85.4%, 73.1%, 1.000)"
1261
+ },
1262
+ "default": {
1263
+ "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1264
+ "backgroundColor": "hsla(205, 89.5%, 77.6%, 1.000)"
1265
+ }
1266
+ }
1267
+ }
1268
+ },
1269
+ "global": {
1270
+ "mainMenu": {
1271
+ "iconBackground": {
1272
+ "active": {
1273
+ "backgroundColor": colors.menu.active
1274
+ },
1275
+ "hover": {
1276
+ "backgroundColor": colors.menu.hover
1277
+ },
1278
+ "default": {
1279
+ "backgroundColor": colors.menu["default"]
1280
+ }
1281
+ },
1282
+ "background": {
1283
+ "boxShadow": "5px 0px 10px 0px hsla(205, 16%, 76.7%, 0.102)",
1284
+ "backgroundColor": "hsla(0, 0%, 99.6%, 1.000)"
1285
+ },
1286
+ "lines": {
1287
+ "backgroundColor": "hsla(0, 0%, 93.3%, 1.000)"
1288
+ },
1289
+ "footerBackground": {
1290
+ "backgroundColor": "hsla(0, 0%, 99.6%, 0.851)"
1291
+ }
1292
+ },
1293
+ "background": {
1294
+ "backgroundColor": "hsla(210, 20%, 98%, 1.000)",
1295
+ "backgroundImage": "linear-gradient(180.00deg, hsla(210, 20%, 98%, 1.000) 0%, hsla(210, 20%, 96.1%, 1.000) 100%)"
1296
+ },
1297
+ "drawer": {
1298
+ "background": {
1299
+ "boxShadow": "-5px 0px 10px 0px hsla(205, 16%, 76.7%, 0.102)",
1300
+ "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
1301
+ }
1302
+ },
1303
+ "topBar": {
1304
+ "lines": {
1305
+ "backgroundColor": "hsla(0, 0%, 89.4%, 1.000)"
1306
+ }
1307
+ }
1308
+ },
1309
+ "indicators": {
1310
+ "spinner": {
1311
+ "danger": {
1312
+ "base": {
1313
+ "borderColor": "hsla(0, 78.8%, 70.4%, 1.000)",
1314
+ "border": "hsla(0, 78.8%, 70.4%, 1.000) 3px solid"
1315
+ },
1316
+ "top": {
1317
+ "borderColor": "hsla(0, 0%, 100%, 1.000)",
1318
+ "border": "hsla(0, 0%, 100%, 1.000) 3px solid"
1319
+ }
1320
+ },
1321
+ "secondary": {
1322
+ "top": {
1323
+ "borderColor": "hsla(0, 0%, 100%, 1.000)",
1324
+ "border": "hsla(0, 0%, 100%, 1.000) 3px solid"
1325
+ },
1326
+ "base": {
1327
+ "borderColor": "hsla(0, 0%, 75.7%, 1.000)",
1328
+ "border": "hsla(0, 0%, 75.7%, 1.000) 3px solid"
1329
+ }
1330
+ },
1331
+ "primary": {
1332
+ "top": {
1333
+ "borderColor": "hsla(0, 0%, 100%, 1.000)",
1334
+ "border": "hsla(0, 0%, 100%, 1.000) 3px solid"
1335
+ },
1336
+ "base": {
1337
+ "borderColor": "hsla(195, 89.4%, 81.6%, 1.000)",
1338
+ "border": "hsla(195, 89.4%, 81.6%, 1.000) 3px solid"
1339
+ }
1340
+ },
1341
+ "simple": {
1342
+ "top": {
1343
+ "borderColor": "hsla(0, 0%, 100%, 1.000)",
1344
+ "border": "hsla(0, 0%, 100%, 1.000) 3px solid"
1345
+ },
1346
+ "base": {
1347
+ "borderColor": "hsla(0, 0%, 76.9%, 0.329)",
1348
+ "border": "hsla(0, 0%, 76.9%, 0.329) 3px solid"
1349
+ }
1350
+ }
1351
+ }
1352
+ },
1353
+ "filters": {
1354
+ "dropdownContainer": {
1355
+ "background": {
1356
+ "boxShadow": "0px 5px 25px 0px hsla(210, 66.9%, 46.3%, 0.122)",
1357
+ "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
1358
+ },
1359
+ "topBorder": {
1360
+ "backgroundColor": "hsla(205, 100%, 72%, 1.000)"
1361
+ }
1362
+ },
1363
+ "filterButton": {
1364
+ "default": {
1365
+ "boxShadow": "0px 4px 9px 0px hsla(204, 21.9%, 66.9%, 0.071)",
1366
+ "backgroundColor": "hsla(200, 23.1%, 97.5%, 1.000)",
1367
+ "borderColor": "hsla(207, 15.9%, 86.5%, 1.000)",
1368
+ "border": "hsla(207, 15.9%, 86.5%, 1.000) 1px solid",
1369
+ "textColor": "hsla(0, 0%, 50.2%, 1.000)"
1370
+ },
1371
+ "active": {
1372
+ "boxShadow": "0px 4px 9px 0px hsla(204, 21.9%, 66.9%, 0.071)",
1373
+ "backgroundColor": "hsla(205, 100%, 72%, 1.000)",
1374
+ "borderColor": "hsla(205, 100%, 72%, 1.000)",
1375
+ "border": "hsla(205, 100%, 72%, 1.000) 1px solid",
1376
+ "textColor": "hsla(0, 0%, 100%, 1.000)"
1377
+ },
1378
+ "hover": {
1379
+ "boxShadow": "0px 4px 9px 0px hsla(204, 21.9%, 66.9%, 0.071)",
1380
+ "backgroundColor": "hsla(205, 100%, 78.6%, 1.000)",
1381
+ "borderColor": "hsla(205, 100%, 72%, 1.000)",
1382
+ "border": "hsla(205, 100%, 72%, 1.000) 1px solid",
1383
+ "textColor": "hsla(0, 0%, 100%, 1.000)"
1384
+ }
1385
+ },
1386
+ "searchInput": {
1387
+ "default": {
1388
+ "boxShadow": "0px 4px 9px 0px hsla(205, 34.6%, 68.2%, 0.071)",
1389
+ "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
1390
+ "borderColor": "hsla(207, 15.9%, 86.5%, 1.000)",
1391
+ "border": "hsla(207, 15.9%, 86.5%, 1.000) 1px solid"
1392
+ },
1393
+ "focused": {
1394
+ "boxShadow": "0px 4px 9px 0px hsla(205, 34.6%, 68.2%, 0.071)",
1395
+ "backgroundColor": "hsla(0, 0%, 100%, 1.000)",
1396
+ "borderColor": "hsla(208, 50%, 81.2%, 1.000)",
1397
+ "border": "hsla(208, 50%, 81.2%, 1.000) 1px solid"
1398
+ }
1399
+ }
1400
+ },
1401
+ "general": {
1402
+ "divider": {
1403
+ "backgroundColor": colors.divider
1404
+ }
1405
+ },
1406
+ "feedbackBar": {
1407
+ "neutral": {
1408
+ "backgroundColor": colors.feedback.neutral
1409
+ },
1410
+ "error": {
1411
+ "backgroundColor": colors.feedback.error
1412
+ },
1413
+ "info": {
1414
+ "backgroundColor": colors.feedback.info
1415
+ },
1416
+ "success": {
1417
+ "backgroundColor": colors.feedback.success
1418
+ },
1419
+ "warning": {
1420
+ "backgroundColor": colors.feedback.warning
1421
+ }
1422
+ },
1423
+ "filterButton": {
1424
+ "active": {
1425
+ "boxShadow": "0px 4px 9px 0px hsla(204, 21.9%, 66.9%, 0.071)",
1426
+ "backgroundColor": "hsla(200, 23.1%, 97.5%, 1.000)",
1427
+ "borderColor": "hsla(205, 100%, 72%, 1.000)",
1428
+ "border": "hsla(205, 100%, 72%, 1.000) 1px solid"
1429
+ }
1430
+ },
1431
+ "tables": {
1432
+ "rows": {
1433
+ "divider": {
1434
+ "backgroundColor": colors.divider
1435
+ }
1436
+ },
1437
+ "header": {
1438
+ "groupLine": {
1439
+ "backgroundColor": colors.divider
1440
+ },
1441
+ "divider": {
1442
+ "backgroundColor": colors.divider
1443
+ },
1444
+ "sortable": {
1445
+ "hover": {
1446
+ "backgroundColor": "hsla(220, 33.3%, 94.7%, 1.000)"
1447
+ },
1448
+ "default": {
1449
+ "backgroundColor": "hsla(220, 33.3%, 94.7%, 0.000)"
1450
+ }
1451
+ }
1452
+ }
1453
+ }
1454
+ };
1455
+
1456
+ var custom = {
1457
+ "lines": {
1458
+ "primary": {
1459
+ label: {
1460
+ fill: "#fff"
1461
+ },
1462
+ contrastLine: {
1463
+ stroke: 'hsla(205deg, 80%, 45%, 100%);'
1464
+ },
1465
+ highlightLine: {
1466
+ stroke: 'hsla(205deg, 45%, 90%, 90%);'
1467
+ },
1468
+ grabHandle: {
1469
+ fill: 'hsla(205deg, 45%, 90%, 100%)',
1470
+ stroke: 'hsla(205deg, 45%, 100%, 100%)'
1471
+ },
1472
+ point: {
1473
+ fill: 'hsla(205deg, 45%, 90%, 100%)'
1474
+ },
1475
+ grabHandleContrast: {
1476
+ stroke: 'hsla(205deg, 80%, 45%, 100%)'
1477
+ },
1478
+ grabHandleText: {
1479
+ fill: 'hsla(205deg, 80%, 25%, 100%);'
1480
+ },
1481
+ handleBase: {
1482
+ fill: 'hsla(235deg, 100%, 80%, 100%);'
1483
+ },
1484
+ handleRingLayer: {
1485
+ stroke: 'hsla(205deg, 100%, 89%, 100%);'
1486
+ },
1487
+ handleReactiveFill: {
1488
+ fill: 'hsla(192deg, 100%, 45%, 100%);'
1489
+ },
1490
+ handleReactiveRing: {
1491
+ stroke: 'hsla(205deg, 100%, 36%, 27%);'
1492
+ },
1493
+ handleContrastLayer: {
1494
+ stroke: 'hsla(205deg, 100%, 36%, 15%);'
1495
+ },
1496
+ stopStart: {
1497
+ stopColor: ' hsla(205deg, 100%, 15%, 35%);'
1498
+ },
1499
+ stopEnd: {
1500
+ stopColor: 'hsla(205deg, 100%, 15%, 0%)'
1501
+ }
1502
+ },
1503
+ "secondary": {
1504
+ label: {
1505
+ fill: "#fff"
1506
+ },
1507
+ contrastLine: {
1508
+ stroke: 'hsla(120deg, 80%, 45%, 100%);'
1509
+ },
1510
+ highlightLine: {
1511
+ stroke: 'hsla(120deg, 45%, 90%, 90%);'
1512
+ },
1513
+ grabHandle: {
1514
+ fill: 'hsla(120deg, 45%, 90%, 100%)',
1515
+ stroke: 'hsla(120deg, 45%, 100%, 100%)'
1516
+ },
1517
+ point: {
1518
+ fill: 'hsla(120deg, 45%, 90%, 100%)'
1519
+ },
1520
+ grabHandleContrast: {
1521
+ stroke: 'hsla(120deg, 80%, 45%, 100%)'
1522
+ },
1523
+ grabHandleText: {
1524
+ fill: 'hsla(120deg, 80%, 25%, 100%);'
1525
+ },
1526
+ handleBase: {
1527
+ fill: 'hsla(150deg, 100%, 80%, 100%);'
1528
+ },
1529
+ handleRingLayer: {
1530
+ stroke: 'hsla(120deg, 100%, 89%, 100%);'
1531
+ },
1532
+ handleReactiveFill: {
1533
+ fill: 'hsla(108deg, 100%, 45%, 100%);'
1534
+ },
1535
+ handleReactiveRing: {
1536
+ stroke: 'hsla(120deg, 100%, 36%, 27%);'
1537
+ },
1538
+ handleContrastLayer: {
1539
+ stroke: 'hsla(120deg, 100%, 36%, 15%);'
1540
+ },
1541
+ stopStart: {
1542
+ stopColor: ' hsla(120deg, 100%, 15%, 35%);'
1543
+ },
1544
+ stopEnd: {
1545
+ stopColor: 'hsla(120deg, 100%, 15%, 0%)'
1546
+ }
1547
+ },
1548
+ "danger": {
1549
+ label: {
1550
+ fill: "#fff"
1551
+ },
1552
+ contrastLine: {
1553
+ stroke: 'hsla(0, 80%, 45%, 100%);'
1554
+ },
1555
+ highlightLine: {
1556
+ stroke: 'hsla(0, 45%, 90%, 90%);'
1557
+ },
1558
+ grabHandle: {
1559
+ fill: 'hsla(0, 45%, 90%, 100%)',
1560
+ stroke: 'hsla(0, 45%, 100%, 100%)'
1561
+ },
1562
+ point: {
1563
+ fill: 'hsla(0, 45%, 90%, 100%)'
1564
+ },
1565
+ grabHandleText: {
1566
+ fill: 'hsla(0, 80%, 25%, 100%);'
1567
+ },
1568
+ grabHandleContrast: {
1569
+ stroke: 'hsla(0, 80%, 45%, 100%)'
1570
+ },
1571
+ handleBase: {
1572
+ fill: 'hsla(30deg, 100%, 80%, 100%);'
1573
+ },
1574
+ handleRingLayer: {
1575
+ stroke: 'hsla(0, 100%, 89%, 100%);'
1576
+ },
1577
+ handleReactiveFill: {
1578
+ fill: 'hsla(348deg, 100%, 45%, 100%);'
1579
+ },
1580
+ handleReactiveRing: {
1581
+ stroke: 'hsla(0deg, 100%, 36%, 27%);'
1582
+ },
1583
+ handleContrastLayer: {
1584
+ stroke: 'hsla(0deg, 100%, 36%, 15%);'
1585
+ },
1586
+ stopStart: {
1587
+ stopColor: ' hsla(0, 100%, 15%, 35%);'
1588
+ },
1589
+ stopEnd: {
1590
+ stopColor: 'hsla(0, 100%, 15%, 0%);'
1591
+ }
1592
+ }
1593
+ }
1594
+ };
1595
+
1596
+ var light = {
1597
+ fontFamily: fontFamily,
1598
+ dimensions: dimensions,
1599
+ typography: typography,
1600
+ colors: colors,
1601
+ styles: styles,
1602
+ animation: animation,
1603
+ custom: custom,
1604
+ deviceSize: deviceSize,
1605
+ deviceMediaQuery: deviceMediaQuery
1606
+ };
1607
+
1608
+ var typography$1 = {
1609
+ "form": {
1610
+ "label": {
1611
+ "default": {
1612
+ "textAlign": "left",
1613
+ "fontSize": "14px",
1614
+ "fontWeight": 400,
1615
+ "textDecoration": "none",
1616
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
1617
+ }
1618
+ },
1619
+ "input": {
1620
+ "label": {
1621
+ "textAlign": "left",
1622
+ "fontSize": "14px",
1623
+ "fontWeight": 400,
1624
+ "textDecoration": "none",
1625
+ "color": "hsla(207, 5%, 56.7%, 1.000)"
1626
+ },
1627
+ "placeholder": {
1628
+ "normal": {
1629
+ "textAlign": "left",
1630
+ "fontStyle": "italic",
1631
+ "fontSize": "16px",
1632
+ "fontWeight": 500,
1633
+ "textDecoration": "none",
1634
+ "color": "hsla(0, 0%, 46.3%, 1.000)"
1635
+ }
1636
+ },
1637
+ "value": {
1638
+ "normal": {
1639
+ "textAlign": "left",
1640
+ "fontSize": "16px",
1641
+ "fontWeight": 500,
1642
+ "lineHeight": "25px",
1643
+ "textDecoration": "none",
1644
+ "color": "hsla(0, 0%, 96.9%, 1.000)"
1645
+ }
1646
+ }
1647
+ },
1648
+ "button": {
1649
+ "secondary": {
1650
+ "normal": {
1651
+ "textAlign": "center",
1652
+ "fontSize": "16px",
1653
+ "fontWeight": 600,
1654
+ "textDecoration": "none",
1655
+ "color": "hsla(0, 0%, 55.3%, 1.000)"
1656
+ },
1657
+ "large": {
1658
+ "textAlign": "center",
1659
+ "fontSize": "20px",
1660
+ "fontWeight": 600,
1661
+ "textDecoration": "none",
1662
+ "color": "hsla(0, 0%, 91.4%, 1.000)"
1663
+ },
1664
+ "small": {
1665
+ "textAlign": "center",
1666
+ "fontSize": "14px",
1667
+ "fontWeight": 600,
1668
+ "textDecoration": "none",
1669
+ "color": "hsla(0, 0%, 91.4%, 1.000)"
1670
+ },
1671
+ "xsmall": {
1672
+ "textAlign": "center",
1673
+ "fontSize": "12px",
1674
+ "fontWeight": 600,
1675
+ "textDecoration": "none",
1676
+ "color": "hsla(0, 0%, 91.4%, 1.000)"
1677
+ }
1678
+ }
1679
+ }
1680
+ },
1681
+ "global": {
1682
+ "mainMenu": {
1683
+ "subItem": {
1684
+ "default": {
1685
+ "textAlign": "left",
1686
+ "fontSize": "14px",
1687
+ "fontWeight": 300,
1688
+ "textDecoration": "none",
1689
+ "color": "hsla(0, 0%, 100%, 0.549)"
1690
+ },
1691
+ "hover": {
1692
+ "textAlign": "left",
1693
+ "fontSize": "14px",
1694
+ "fontWeight": 300,
1695
+ "textDecoration": "none",
1696
+ "color": "hsla(0, 0%, 100%, 0.800)"
1697
+ }
1698
+ },
1699
+ "subheader": {
1700
+ "textAlign": "left",
1701
+ "fontSize": "14px",
1702
+ "fontWeight": 600,
1703
+ "textTransform": "uppercase",
1704
+ "letterSpacing": "0.35px",
1705
+ "textDecoration": "none",
1706
+ "color": "hsla(0, 0%, 100%, 0.545)"
1707
+ },
1708
+ "identity": {
1709
+ "textAlign": "left",
1710
+ "fontSize": "12px",
1711
+ "fontWeight": 400,
1712
+ "textDecoration": "none",
1713
+ "color": "hsla(0, 0%, 88.6%, 0.651)"
1714
+ },
1715
+ "menuItem": {
1716
+ "active": {
1717
+ "textAlign": "left",
1718
+ "fontSize": "16px",
1719
+ "fontWeight": 300,
1720
+ "textDecoration": "none",
1721
+ "color": "hsla(0, 0%, 100%, 1.000)"
1722
+ },
1723
+ "default": {
1724
+ "textAlign": "left",
1725
+ "fontSize": "16px",
1726
+ "fontWeight": 300,
1727
+ "textDecoration": "none",
1728
+ "color": "hsla(0, 0%, 100%, 1.000)"
1729
+ },
1730
+ "hover": {
1731
+ "textAlign": "left",
1732
+ "fontSize": "16px",
1733
+ "fontWeight": 300,
1734
+ "textDecoration": "none",
1735
+ "color": "hsla(0, 0%, 100%, 1.000)"
1736
+ }
1737
+ },
1738
+ "hidePrompt": {
1739
+ "textAlign": "left",
1740
+ "fontSize": "14px",
1741
+ "fontWeight": 300,
1742
+ "textDecoration": "none",
1743
+ "color": "hsla(203, 13.2%, 73.3%, 1.000)"
1744
+ },
1745
+ "sub-MenuItem": {
1746
+ "default": {
1747
+ "textAlign": "left",
1748
+ "fontSize": "14px",
1749
+ "fontWeight": 300,
1750
+ "textDecoration": "none",
1751
+ "color": "hsla(203, 6.6%, 76.1%, 1.000)"
1752
+ },
1753
+ "active": {
1754
+ "textAlign": "left",
1755
+ "fontSize": "14px",
1756
+ "fontWeight": 300,
1757
+ "textDecoration": "none",
1758
+ "color": "hsla(203, 6.6%, 76.1%, 1.000)"
1759
+ },
1760
+ "hover": {
1761
+ "textAlign": "left",
1762
+ "fontSize": "14px",
1763
+ "fontWeight": 300,
1764
+ "textDecoration": "none",
1765
+ "color": "hsla(203, 6.6%, 76.1%, 1.000)"
1766
+ }
1767
+ }
1768
+ },
1769
+ "topBar": {
1770
+ "search": {
1771
+ "value": {
1772
+ "textAlign": "left",
1773
+ "fontSize": "14px",
1774
+ "fontWeight": 300,
1775
+ "textDecoration": "none",
1776
+ "color": "hsla(0, 0%, 34.9%, 1.000)"
1777
+ }
1778
+ }
1779
+ }
1780
+ },
1781
+ "pageHeader": {
1782
+ "introduction": {
1783
+ "textAlign": "left",
1784
+ "fontSize": "14px",
1785
+ "fontWeight": 300,
1786
+ "lineHeight": "20px",
1787
+ "textDecoration": "none",
1788
+ "color": "hsla(0, 0%, 85.9%, 1.000)"
1789
+ },
1790
+ "mainTitle": {
1791
+ "textAlign": "left",
1792
+ "fontSize": "26px",
1793
+ "fontWeight": 600,
1794
+ "textDecoration": "none",
1795
+ "color": "hsla(208, 17.8%, 85.7%, 1.000)"
1796
+ },
1797
+ "areaTitle": {
1798
+ "textAlign": "left",
1799
+ "fontSize": "12px",
1800
+ "fontWeight": 400,
1801
+ "textDecoration": "none",
1802
+ "color": "hsla(205, 7.6%, 69%, 1.000)"
1803
+ }
1804
+ },
1805
+ "styleGuide": {
1806
+ "guideTitle": {
1807
+ "textAlign": "left",
1808
+ "fontSize": "24px",
1809
+ "fontWeight": 300,
1810
+ "textDecoration": "none",
1811
+ "color": "hsla(0, 0%, 48.2%, 1.000)",
1812
+ "textTransform": "uppercase",
1813
+ "letterSpacing": "0.4px"
1814
+ },
1815
+ "guideNotes": {
1816
+ "textAlign": "left",
1817
+ "fontStyle": "italic",
1818
+ "fontSize": "14px",
1819
+ "fontWeight": 300,
1820
+ "lineHeight": "30px",
1821
+ "paragraphSpacing": "15px",
1822
+ "textDecoration": "none",
1823
+ "color": "hsla(0, 0%, 48.2%, 1.000)"
1824
+ },
1825
+ "itemName": {
1826
+ "textAlign": "left",
1827
+ "fontSize": "12px",
1828
+ "fontWeight": 300,
1829
+ "textDecoration": "none",
1830
+ "color": "hsla(0, 0%, 22.7%, 1.000)"
1831
+ },
1832
+ "guideAreaSubtitle": {
1833
+ "textAlign": "left",
1834
+ "fontSize": "16px",
1835
+ "fontWeight": 300,
1836
+ "textTransform": "uppercase",
1837
+ "textDecoration": "none",
1838
+ "color": "hsla(0, 0%, 48.2%, 1.000)"
1839
+ },
1840
+ "guideAreaTitle": {
1841
+ "textAlign": "left",
1842
+ "fontSize": "20px",
1843
+ "fontWeight": 300,
1844
+ "textTransform": "uppercase",
1845
+ "textDecoration": "none",
1846
+ "color": "hsla(0, 0%, 48.2%, 1.000)"
1847
+ }
1848
+ },
1849
+ "active": {
1850
+ "textAlign": "left",
1851
+ "fontSize": "14px",
1852
+ "fontWeight": 600,
1853
+ "textDecoration": "none",
1854
+ "color": "hsla(0, 0%, 100%, 0.800)"
1855
+ },
1856
+ "filters": {
1857
+ "filterButton": {
1858
+ "default": {
1859
+ "textAlign": "left",
1860
+ "fontSize": "12px",
1861
+ "fontWeight": 400,
1862
+ "textDecoration": "none",
1863
+ "color": "hsla(0, 0%, 86.3%, 1.000)"
1864
+ },
1865
+ "active": {
1866
+ "textAlign": "left",
1867
+ "fontSize": "12px",
1868
+ "fontWeight": 400,
1869
+ "textDecoration": "none",
1870
+ "color": "hsla(0, 0%, 100%, 1.000)"
1871
+ },
1872
+ "hover": {
1873
+ "textAlign": "left",
1874
+ "fontSize": "12px",
1875
+ "fontWeight": 400,
1876
+ "textDecoration": "none",
1877
+ "color": "hsla(0, 0%, 100%, 1.000)"
1878
+ }
1879
+ },
1880
+ "searchInput": {
1881
+ "placeholder": {
1882
+ "textAlign": "left",
1883
+ "fontStyle": "italic",
1884
+ "fontSize": "12px",
1885
+ "fontWeight": 500,
1886
+ "textDecoration": "none",
1887
+ "color": "hsla(0, 0%, 46.3%, 1.000)"
1888
+ },
1889
+ "value": {
1890
+ "textAlign": "left",
1891
+ "fontSize": "12px",
1892
+ "fontWeight": 400,
1893
+ "textDecoration": "none",
1894
+ "color": "hsla(0, 0%, 96.9%, 1.000)"
1895
+ }
1896
+ }
1897
+ },
1898
+ "table": {
1899
+ "columnData": {
1900
+ "firstColumn": {
1901
+ "textAlign": "left",
1902
+ "fontSize": "14px",
1903
+ "fontWeight": 500,
1904
+ "textDecoration": "none",
1905
+ "color": "hsla(196, 25.3%, 82.2%, 1.000)"
1906
+ },
1907
+ "lowImportance": {
1908
+ "left": {
1909
+ "textAlign": "left",
1910
+ "fontStyle": "italic",
1911
+ "fontSize": "14px",
1912
+ "fontWeight": 500,
1913
+ "textDecoration": "none",
1914
+ "color": "hsla(197, 7.4%, 52.2%, 1.000)"
1915
+ },
1916
+ "center": {
1917
+ "textAlign": "center",
1918
+ "fontStyle": "italic",
1919
+ "fontSize": "14px",
1920
+ "fontWeight": 500,
1921
+ "textDecoration": "none",
1922
+ "color": "hsla(197, 7.4%, 52.2%, 1.000)"
1923
+ },
1924
+ "right": {
1925
+ "textAlign": "right",
1926
+ "fontStyle": "italic",
1927
+ "fontSize": "14px",
1928
+ "fontWeight": 500,
1929
+ "textDecoration": "none",
1930
+ "color": "hsla(197, 7.4%, 52.2%, 1.000)"
1931
+ }
1932
+ },
1933
+ "highImportance": {
1934
+ "left": {
1935
+ "textAlign": "left",
1936
+ "fontSize": "14px",
1937
+ "fontWeight": 900,
1938
+ "textDecoration": "none",
1939
+ "color": "hsla(196, 25.3%, 82.2%, 1.000)"
1940
+ },
1941
+ "right": {
1942
+ "textAlign": "right",
1943
+ "fontSize": "14px",
1944
+ "fontWeight": 900,
1945
+ "textDecoration": "none",
1946
+ "color": "hsla(196, 25.3%, 82.2%, 1.000)"
1947
+ },
1948
+ "center": {
1949
+ "textAlign": "center",
1950
+ "fontSize": "14px",
1951
+ "fontWeight": 900,
1952
+ "textDecoration": "none",
1953
+ "color": "hsla(196, 25.3%, 82.2%, 1.000)"
1954
+ }
1955
+ },
1956
+ "normalImportance": {
1957
+ "right": {
1958
+ "textAlign": "right",
1959
+ "fontSize": "14px",
1960
+ "fontWeight": 500,
1961
+ "textDecoration": "none",
1962
+ "color": "hsla(196, 10.9%, 73.1%, 1.000)"
1963
+ },
1964
+ "center": {
1965
+ "textAlign": "center",
1966
+ "fontSize": "14px",
1967
+ "fontWeight": 500,
1968
+ "textDecoration": "none",
1969
+ "color": "hsla(196, 10.9%, 73.1%, 1.000)"
1970
+ },
1971
+ "left": {
1972
+ "textAlign": "left",
1973
+ "fontSize": "14px",
1974
+ "fontWeight": 500,
1975
+ "textDecoration": "none",
1976
+ "color": "hsla(196, 10.9%, 73.1%, 1.000)"
1977
+ }
1978
+ },
1979
+ "unit": {
1980
+ "textAlign": "right",
1981
+ "fontStyle": "italic",
1982
+ "fontSize": "12px",
1983
+ "fontWeight": 500,
1984
+ "textDecoration": "none",
1985
+ "color": "hsla(193, 9.7%, 63.5%, 1.000)"
1986
+ }
1987
+ },
1988
+ "header": {
1989
+ "right": {
1990
+ "textAlign": "right",
1991
+ "fontSize": "14px",
1992
+ "fontWeight": 700,
1993
+ "letterSpacing": "0.4px",
1994
+ "textDecoration": "none",
1995
+ "color": "hsla(204, 10.6%, 81.6%, 1.000)"
1996
+ },
1997
+ "left": {
1998
+ "textAlign": "left",
1999
+ "fontSize": "14px",
2000
+ "fontWeight": 700,
2001
+ "letterSpacing": "0.4px",
2002
+ "textDecoration": "none",
2003
+ "color": "hsla(204, 10.6%, 81.6%, 1.000)"
2004
+ },
2005
+ "center": {
2006
+ "textAlign": "center",
2007
+ "fontSize": "14px",
2008
+ "fontWeight": 700,
2009
+ "letterSpacing": "0.4px",
2010
+ "textDecoration": "none",
2011
+ "color": "hsla(204, 10.6%, 81.6%, 1.000)"
2012
+ }
2013
+ },
2014
+ "subHeader": {
2015
+ "right": {
2016
+ "textAlign": "right",
2017
+ "fontSize": "14px",
2018
+ "fontWeight": 700,
2019
+ "letterSpacing": "0.4px",
2020
+ "textDecoration": "none",
2021
+ "color": "hsla(204, 10.6%, 81.6%, 1.000)"
2022
+ },
2023
+ "left": {
2024
+ "textAlign": "left",
2025
+ "fontSize": "14px",
2026
+ "fontWeight": 700,
2027
+ "letterSpacing": "0.4px",
2028
+ "textDecoration": "none",
2029
+ "color": "hsla(204, 10.6%, 81.6%, 1.000)"
2030
+ },
2031
+ "center": {
2032
+ "textAlign": "center",
2033
+ "fontSize": "14px",
2034
+ "fontWeight": 700,
2035
+ "letterSpacing": "0.4px",
2036
+ "textDecoration": "none",
2037
+ "color": "hsla(204, 10.6%, 81.6%, 1.000)"
2038
+ }
2039
+ }
2040
+ },
2041
+ "tables": {
2042
+ "groupName": {
2043
+ "textAlign": "left",
2044
+ "fontSize": "12px",
2045
+ "fontWeight": 400,
2046
+ "letterSpacing": "0.3px",
2047
+ "textDecoration": "none",
2048
+ "color": "hsla(0, 0%, 56.5%, 1.000)"
2049
+ }
2050
+ },
2051
+ "meta": {
2052
+ "tagList": {
2053
+ "item": {
2054
+ "normal": {
2055
+ "textAlign": "left",
2056
+ "fontSize": "14px",
2057
+ "fontWeight": 600,
2058
+ "textDecoration": "none",
2059
+ "color": "hsla(200, 3%, 38.8%, 1.000)"
2060
+ }
2061
+ }
2062
+ }
2063
+ }
2064
+ };
2065
+
2066
+ var colors$1 = {
2067
+ "divider": "hsla(240, 4.7%, 25.1%, 1.000)",
2068
+ "menu": {
2069
+ "active": "hsla(215, 66.3%, 59.2%, 1.000)",
2070
+ "hover": "hsla(215, 19.1%, 36.9%, 1.000)",
2071
+ "default": "hsla(215, 19.1%, 36.9%, 0.000)"
2072
+ },
2073
+ "icons": {
2074
+ "subtle": "hsla(207, 4.8%, 37.1%, 1.000)",
2075
+ "dimmed": "hsla(0, 0%, 65.1%, 1.000)",
2076
+ "inverse": "hsla(0, 0%, 25.1%, 1.000)",
2077
+ "mono": "hsla(0, 0%, 100%, 1.000)",
2078
+ "danger": "hsla(0, 100%, 70%, 1.000)",
2079
+ "primary": "hsla(205, 100%, 65.1%, 1.000)"
2080
+ },
2081
+ "status": {
2082
+ "good": "hsla(126, 48.1%, 68.2%, 1.000)"
2083
+ }
2084
+ };
2085
+
2086
+ var styles$1 = {
2087
+ "global": {
2088
+ "mainMenu": {
2089
+ "background": {
2090
+ "boxShadow": "5px 0px 10px 0px hsla(205, 14%, 16.9%, 0.251)",
2091
+ "backgroundColor": "hsla(210, 7.9%, 14.9%, 1.000)"
2092
+ },
2093
+ "footerBackground": {
2094
+ "backgroundColor": "hsla(210, 7.9%, 14.9%, 0.800)"
2095
+ },
2096
+ "lines": {
2097
+ "backgroundColor": "hsla(225, 3.5%, 22.4%, 1.000)"
2098
+ },
2099
+ "iconBackground": {
1100
2100
  "default": {
1101
- "outer": {
1102
- "backgroundImage": "linear-gradient(317.51deg, hsla(0, 68%, 66.9%, 1.000) 0%, hsla(20, 81.2%, 64.5%, 1.000) 100%)",
1103
- "borderColor": "hsla(0, 51.2%, 60.6%, 1.000)"
1104
- },
1105
- "inner": {
1106
- "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
1107
- }
2101
+ "backgroundColor": colors$1.menu["default"]
1108
2102
  },
1109
- "loading": {
1110
- "outer": {
1111
- "backgroundImage": "linear-gradient(317.51deg, hsla(0, 79.5%, 77.1%, 1.000) 0%, hsla(20, 96%, 80.4%, 1.000) 100%)",
1112
- "borderColor": "hsla(0, 62%, 73.1%, 1.000)"
1113
- }
2103
+ "hover": {
2104
+ "backgroundColor": colors$1.menu.hover
1114
2105
  },
1115
- "disabled": {
1116
- "outer": {
1117
- "backgroundImage": "linear-gradient(317.51deg, hsla(0, 57%, 81.8%, 1.000) 0%, hsla(19, 100%, 84.9%, 1.000) 100%)",
1118
- "borderColor": "hsla(0, 78.7%, 85.3%, 1.000)"
1119
- },
1120
- "inner": {
1121
- "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
1122
- }
2106
+ "active": {
2107
+ "backgroundColor": colors$1.menu.active
1123
2108
  }
1124
2109
  },
1125
- "locked": {
1126
- "default": {
1127
- "outer": {
1128
- "backgroundImage": "linear-gradient(180.00deg, hsla(0, 0%, 100%, 1.000) 0%, hsla(0, 0%, 98.8%, 1.000) 100%)",
1129
- "borderColor": "hsla(208, 22.7%, 85.3%, 0.651)"
1130
- },
1131
- "inner": {
1132
- "backgroundColor": "hsla(0, 0%, 89.4%, 1.000)"
1133
- }
1134
- }
2110
+ "desktop": {
2111
+ "open": {}
2112
+ }
2113
+ },
2114
+ "drawer": {
2115
+ "background": {
2116
+ "boxShadow": "5px 0px 10px 0px hsla(205, 14%, 16.9%, 0.251)",
2117
+ "backgroundColor": "hsla(210, 7.9%, 14.9%, 1.000)"
2118
+ }
2119
+ },
2120
+ "topBar": {
2121
+ "lines": {
2122
+ "backgroundColor": "hsla(225, 3.5%, 22.4%, 1.000)"
2123
+ }
2124
+ },
2125
+ "background": {
2126
+ "backgroundColor": "hsla(220, 4.9%, 12%, 1.000)",
2127
+ "backgroundImage": "linear-gradient(180.00deg, hsla(220, 4.9%, 12%, 1.000) 0%, hsla(220, 6.1%, 9.6%, 1.000) 100%)"
2128
+ }
2129
+ },
2130
+ "general": {
2131
+ "divider": {
2132
+ "backgroundColor": "hsla(213, 11.6%, 18.6%, 1.000)"
2133
+ }
2134
+ },
2135
+ "filters": {
2136
+ "filterButton": {
2137
+ "hover": {
2138
+ "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
2139
+ "backgroundColor": "hsla(205, 86.8%, 70.4%, 1.000)",
2140
+ "borderColor": "hsla(205, 100%, 72%, 1.000)",
2141
+ "border": "hsla(205, 100%, 72%, 1.000) 1px solid",
2142
+ "textColor": "hsla(0, 0%, 100%, 1.000)"
2143
+ },
2144
+ "default": {
2145
+ "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
2146
+ "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
2147
+ "borderColor": "hsla(210, 3.5%, 22.4%, 1.000)",
2148
+ "border": "hsla(210, 3.5%, 22.4%, 1.000) 1px solid",
2149
+ "textColor": "hsla(0, 0%, 86.3%, 1.000)"
2150
+ },
2151
+ "active": {
2152
+ "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
2153
+ "backgroundColor": "hsla(205, 81.2%, 64.5%, 1.000)",
2154
+ "borderColor": "hsla(205, 100%, 72%, 1.000)",
2155
+ "border": "hsla(205, 100%, 72%, 1.000) 1px solid",
2156
+ "textColor": "hsla(0, 0%, 100%, 1.000)"
2157
+ }
2158
+ },
2159
+ "searchInput": {
2160
+ "default": {
2161
+ "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
2162
+ "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
2163
+ "borderColor": "hsla(210, 3.5%, 22.4%, 1.000)",
2164
+ "border": "hsla(210, 3.5%, 22.4%, 1.000) 1px solid"
2165
+ },
2166
+ "focused": {
2167
+ "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
2168
+ "backgroundColor": "hsla(210, 14.3%, 19.2%, 1.000)",
2169
+ "borderColor": "hsla(207, 19.8%, 34.7%, 1.000)",
2170
+ "border": "hsla(207, 19.8%, 34.7%, 1.000) 1px solid"
1135
2171
  }
1136
2172
  },
2173
+ "dropdownContainer": {
2174
+ "topBorder": {
2175
+ "backgroundColor": "hsla(205, 100%, 72%, 1.000)"
2176
+ },
2177
+ "background": {
2178
+ "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
2179
+ "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
2180
+ "borderColor": colors$1.divider,
2181
+ "border": colors$1.divider + " 1px solid"
2182
+ }
2183
+ }
2184
+ },
2185
+ "form": {
1137
2186
  "checkbox": {
1138
2187
  "unchecked": {
1139
- "disabled": {
1140
- "backgroundColor": "hsla(0, 0%, 98.8%, 1.000)",
1141
- "borderColor": "hsla(210, 20%, 90.2%, 1.000)"
1142
- },
1143
2188
  "default": {
1144
- "borderColor": "hsla(208, 24.6%, 77.6%, 1.000)"
1145
- },
1146
- "hover": {
1147
- "borderColor": "hsla(195, 94.2%, 66.1%, 1.000)"
2189
+ "borderColor": "hsla(208, 24.6%, 77.6%, 1.000)",
2190
+ "border": "hsla(208, 24.6%, 77.6%, 1.000) 2px solid"
1148
2191
  }
1149
- },
1150
- "checked": {
2192
+ }
2193
+ },
2194
+ "button": {
2195
+ "secondary": {
2196
+ "hover": {
2197
+ "backgroundColor": "hsla(205, 33.3%, 32.9%, 1.000)"
2198
+ },
1151
2199
  "disabled": {
1152
- "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1153
- "backgroundColor": "hsla(210, 20%, 90.2%, 1.000)"
2200
+ "backgroundColor": "hsla(205, 12.8%, 18.4%, 1.000)"
2201
+ },
2202
+ "actionArea": {
2203
+ "backgroundColor": "hsla(0, 0%, 94.9%, 0.302)"
1154
2204
  },
1155
2205
  "default": {
1156
- "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1157
- "backgroundColor": "hsla(207, 95.3%, 66.5%, 1.000)"
2206
+ "backgroundColor": "hsla(205, 15.1%, 28.6%, 1.000)"
1158
2207
  },
1159
- "hover": {
1160
- "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1161
- "backgroundColor": "hsla(195, 95.3%, 66.5%, 1.000)"
1162
- }
1163
- },
1164
- "indeterminate": {
1165
- "hover": {
1166
- "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1167
- "backgroundColor": "hsla(195, 85.4%, 73.1%, 1.000)"
2208
+ "divider": {
2209
+ "backgroundColor": "hsla(204, 18.2%, 78.4%, 0.302)"
1168
2210
  },
1169
- "default": {
1170
- "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
1171
- "backgroundColor": "hsla(205, 89.5%, 77.6%, 1.000)"
2211
+ "active": {
2212
+ "backgroundColor": "hsla(205, 56.9%, 28.2%, 1.000)"
2213
+ }
2214
+ }
2215
+ },
2216
+ "input": {
2217
+ "default": {
2218
+ "normal": {
2219
+ "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
2220
+ "borderColor": "hsla(216, 3.4%, 28.8%, 1.000)",
2221
+ "border": "hsla(216, 3.4%, 28.8%, 1.000) 1px solid"
1172
2222
  }
1173
2223
  }
1174
2224
  }
1175
2225
  },
1176
- "global": {
1177
- "mainMenu": {
1178
- "iconBackground": {
1179
- "active": {
1180
- "backgroundColor": "hsla(215, 100%, 75.1%, 1.000)"
2226
+ "tables": {
2227
+ "rows": {
2228
+ "divider": {
2229
+ "backgroundColor": colors$1.divider
2230
+ }
2231
+ },
2232
+ "header": {
2233
+ "groupLine": {
2234
+ "backgroundColor": "hsla(240, 4.7%, 25.1%, 1.000)"
2235
+ },
2236
+ "divider": {
2237
+ "backgroundColor": colors$1.divider
2238
+ },
2239
+ "sortable": {
2240
+ "default": {
2241
+ "backgroundColor": "hsla(221, 15.9%, 38.2%, 0.000)"
1181
2242
  },
1182
2243
  "hover": {
1183
- "backgroundColor": "hsla(200, 77.8%, 77.1%, 1.000)"
1184
- },
1185
- "default": {
1186
- "backgroundColor": "hsla(200, 77.8%, 77.1%, 0.000)"
2244
+ "backgroundColor": "hsla(221, 15.9%, 38.2%, 1.000)"
1187
2245
  }
1188
- },
1189
- "background": {
1190
- "boxShadow": "5px 0px 10px 0px hsla(205, 16%, 76.7%, 0.102)",
1191
- "backgroundColor": "hsla(0, 0%, 99.6%, 1.000)"
1192
- },
1193
- "lines": {
1194
- "backgroundColor": "hsla(0, 0%, 93.3%, 1.000)"
1195
- },
1196
- "footerBackground": {
1197
- "backgroundColor": "hsla(0, 0%, 99.6%, 0.851)"
1198
2246
  }
1199
- },
1200
- "background": {
1201
- "backgroundImage": "linear-gradient(180.00deg, hsla(210, 20%, 98%, 1.000) 0%, hsla(210, 20%, 96.1%, 1.000) 100%)"
1202
2247
  }
1203
2248
  },
1204
2249
  "indicators": {
1205
2250
  "spinner": {
1206
- "danger": {
1207
- "base": {
1208
- "borderColor": "hsla(0, 78.8%, 70.4%, 1.000)"
1209
- },
1210
- "top": {
1211
- "borderColor": "hsla(0, 0%, 100%, 1.000)"
1212
- }
1213
- },
1214
2251
  "secondary": {
1215
2252
  "top": {
1216
- "borderColor": "hsla(0, 0%, 100%, 1.000)"
1217
- },
1218
- "base": {
1219
- "borderColor": "hsla(0, 0%, 75.7%, 1.000)"
1220
- }
1221
- },
1222
- "primary": {
1223
- "top": {
1224
- "borderColor": "hsla(0, 0%, 100%, 1.000)"
1225
- },
1226
- "base": {
1227
- "borderColor": "hsla(195, 89.4%, 81.6%, 1.000)"
1228
- }
1229
- },
1230
- "simple": {
1231
- "top": {
1232
- "borderColor": "hsla(0, 0%, 100%, 1.000)"
2253
+ "borderColor": "hsla(0, 0%, 100%, 1.000)",
2254
+ "border": "hsla(0, 0%, 100%, 1.000) 3px solid"
1233
2255
  },
1234
2256
  "base": {
1235
- "borderColor": "hsla(0, 0%, 76.9%, 0.329)"
2257
+ "borderColor": "hsla(0, 0%, 75.7%, 1.000)",
2258
+ "border": "hsla(0, 0%, 75.7%, 1.000) 3px solid"
1236
2259
  }
1237
2260
  }
1238
2261
  }
1239
- },
1240
- "filters": {
1241
- "dropdownContainer": {
1242
- "background": {
1243
- "boxShadow": "0px 5px 25px 0px hsla(210, 66.9%, 46.3%, 0.122)",
1244
- "backgroundColor": "hsla(0, 0%, 100%, 1.000)"
1245
- },
1246
- "topBorder": {
1247
- "backgroundColor": "hsla(205, 100%, 72%, 1.000)"
1248
- }
1249
- }
1250
- },
1251
- "general": {
1252
- "divider": {
1253
- "backgroundColor": "hsla(0, 0%, 93.3%, 1.000)"
1254
- }
1255
- },
1256
- "feedbackBar": {
1257
- "neutral": {
1258
- "backgroundColor": "hsla(205, 22.1%, 66.3%, 1.000)"
1259
- },
1260
- "error": {
1261
- "backgroundColor": "hsla(0, 78.8%, 70.4%, 1.000)"
1262
- },
1263
- "info": {
1264
- "backgroundColor": "hsla(205, 77.4%, 63.5%, 1.000)"
1265
- },
1266
- "success": {
1267
- "backgroundColor": "hsla(136, 49.5%, 57.3%, 1.000)"
1268
- },
1269
- "warning": {
1270
- "backgroundColor": "hsla(30, 91%, 61%, 1.000)"
1271
- }
1272
2262
  }
1273
2263
  };
1274
2264
 
1275
- var custom = {
2265
+ var custom$1 = {
1276
2266
  "lines": {
1277
2267
  "primary": {
1278
2268
  label: {
@@ -1412,91 +2402,14 @@ var custom = {
1412
2402
  }
1413
2403
  };
1414
2404
 
1415
- var light = {
1416
- fontFamily: fontFamily,
1417
- dimensions: dimensions,
1418
- typography: typography,
1419
- colors: colors,
1420
- styles: styles,
1421
- animation: animation,
1422
- custom: custom,
1423
- deviceSize: deviceSize,
1424
- deviceMediaQuery: deviceMediaQuery
1425
- };
1426
-
1427
- var colors$1 = {};
1428
- var styles$1 = {
1429
- "form": {
1430
- "button": {
1431
- "primary": {
1432
- "default": {
1433
- "backgroundImage": "linear-gradient(135.00deg, hsla(200, 77.5%, 68.6%, 1.000) 0%, hsla(207, 80.2%, 64.3%, 1.000) 100%)"
1434
- }
1435
- }
1436
- }
1437
- }
1438
- };
1439
- var tmp = {
1440
- input: {
1441
- states: {
1442
- "default": {
1443
- icon: '',
1444
- iconColor: '#000',
1445
- borderColor: 'hsl(120, 1%, 85%)',
1446
- backgroundColor: 'hsl(0, 0%, 99%)'
1447
- },
1448
- required: {
1449
- icon: '',
1450
- iconColor: 'hsl(0, 0%, 100%)',
1451
- borderColor: 'hsl(205, 59%, 71%)',
1452
- backgroundColor: 'hsl(205, 59%, 71%)'
1453
- },
1454
- loading: {
1455
- icon: '',
1456
- iconColor: '#000',
1457
- borderColor: 'hsl(195, 79%, 71%)',
1458
- backgroundColor: 'hsl(195, 79%, 71%)'
1459
- },
1460
- valid: {
1461
- icon: '',
1462
- iconColor: '#000',
1463
- borderColor: 'hsl(120, 35%, 72%)',
1464
- backgroundColor: 'hsl(120, 35%, 72%)'
1465
- },
1466
- error: {
1467
- icon: '',
1468
- iconColor: '#000',
1469
- borderColor: 'hsl(0, 79%, 70%)',
1470
- backgroundColor: 'hsl(0, 79%, 70%)'
1471
- }
1472
- }
1473
- },
1474
- body: {
1475
- backgroundColor: '#f00',
1476
- backgroundImage: 'radial-gradient(circle at 55% 1%, #303335, #212427 117%), url(./noise.png)'
1477
- },
1478
- fontFamily: 'Helvetica, Arial, sans-serif',
1479
- colors: {
1480
- button: {
1481
- backgroundColor: '#666666',
1482
- color: '#efefef',
1483
- borderColor: '#efefef'
1484
- },
1485
- exampleCard: {
1486
- backgroundColor: '#666666',
1487
- color: 'hsla(205, 15%, 95%, 100%)',
1488
- borderColor: 'hsla(205, 90%, 65%, 100%)',
1489
- shadowColor: 'hsla(205, 90%, 65%, 15%)'
1490
- }
1491
- }
1492
- };
1493
2405
  var dark = {
1494
2406
  fontFamily: fontFamily,
1495
2407
  dimensions: dimensions,
2408
+ typography: typography$1,
1496
2409
  colors: colors$1,
1497
- tmp: tmp,
1498
2410
  styles: styles$1,
1499
2411
  animation: animation,
2412
+ custom: custom$1,
1500
2413
  deviceSize: deviceSize,
1501
2414
  deviceMediaQuery: deviceMediaQuery
1502
2415
  };
@@ -1774,7 +2687,7 @@ var StyledButton = styled__default.button(_templateObject$4 || (_templateObject$
1774
2687
  var theme = _ref.theme,
1775
2688
  design = _ref.design,
1776
2689
  size = _ref.size;
1777
- return styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n\n ", ";\n height: ", ";\n padding: ", ";\n\n ", ";\n font-family: ", ";\n\n // No transition at this time as we're using a gradient in the default view. Requires work to make smooth.\n // transition: background ", " ", ";\n\n transition: opacity ", " ", ";\n\n &:hover:enabled {\n background: ", ";\n }\n\n &:active:enabled {\n background: ", ";\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n background: ", ";\n }\n\n "])), theme.styles.form.button[design]["default"], theme.dimensions.form.button[size].height, theme.dimensions.form.button[size].padding, theme.typography.form.button[design][size], theme.fontFamily.ui, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.styles.form.button[design].hover.backgroundColor, theme.styles.form.button[design].active.backgroundColor, theme.styles.form.button[design].disabled.backgroundColor);
2690
+ return styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n\n ", ";\n height: ", ";\n padding: ", ";\n\n ", ";\n font-family: ", ";\n\n transition:\n background ", " ", ",\n opacity ", " ", ";\n\n &:hover:enabled {\n background: ", ";\n }\n\n &:active:enabled {\n background: ", ";\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n background: ", ";\n }\n\n "])), theme.styles.form.button[design]["default"], theme.dimensions.form.button[size].height, theme.dimensions.form.button[size].padding, theme.typography.form.button[design][size], theme.fontFamily.ui, theme.animation.speed.fast, theme.animation.easing.primary.easeOut, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.styles.form.button[design].hover.backgroundColor, theme.styles.form.button[design].active.backgroundColor, theme.styles.form.button[design].disabled.backgroundColor);
1778
2691
  });
1779
2692
 
1780
2693
  var Button = function Button(_ref2) {
@@ -4959,9 +5872,13 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref3) {
4959
5872
  var _excluded$k = ["icon", "hasFlipArrow", "isOpen", "children"];
4960
5873
 
4961
5874
  var _templateObject$w, _templateObject2$v, _templateObject3$p, _templateObject4$k, _templateObject5$i;
4962
- var StyledButton$3 = styled__default.button(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n ", ";\n background-color: hsl(200, 23%, 97%);\n border-radius: 3px;\n border: solid 1px hsl(207, 16%, 86%);\n box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);\n color: hsl(0, 0%, 50%);\n height: 30px;\n font-size: 12px;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
4963
- var theme = _ref.theme;
4964
- return theme && styled.css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n transition: opacity ", " ", ";\n\n ", " {\n padding: 0 9px;\n display: flex;\n align-items: center;\n [stroke]{\n stroke: ", ";\n }\n }\n\n &:hover:enabled, &:active:enabled {\n background-color: hsl(205, 100%, 72%);\n border: solid 1px hsl(205, 100%, 72%);\n color: ", ";\n\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n }\n"])), theme.fontFamily.ui, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, IconWrapper, theme.colors.icons.dimmed, theme.colors.icons.inverse, IconWrapper, theme.colors.icons.inverse);
5875
+ var StyledButton$3 = styled__default.button(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n ", ";\n border-radius: 3px;\n height: 30px;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
5876
+ var _ref$theme = _ref.theme,
5877
+ styles = _ref$theme.styles,
5878
+ typography = _ref$theme.typography,
5879
+ animation = _ref$theme.animation,
5880
+ theme = _ref.theme;
5881
+ return theme && styled.css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n\n font-family: ", ";\n transition: opacity ", " ", ";\n\n ", " {\n padding: 0 9px;\n display: flex;\n align-items: center;\n [stroke]{\n stroke: ", ";\n }\n }\n\n &:hover:enabled {\n ", ";\n ", ";\n transition:\n background ", " ", ",\n border ", " ", ";\n }\n\n &:active:enabled {\n ", ";\n ", ";\n }\n\n &:hover:enabled, &:active:enabled {\n ", " {\n [stroke]{\n transition: stroke ", " ", ";\n stroke: ", ";\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n }\n"])), styles.filters.filterButton["default"], typography.filters.filterButton["default"], theme.fontFamily.ui, theme.animation.speed.normal, theme.animation.easing.primary.inOut, IconWrapper, theme.colors.icons.dimmed, styles.filters.filterButton.hover, typography.filters.filterButton.hover, animation.speed.fast, animation.easing.primary.inOut, animation.speed.fast, animation.easing.primary.inOut, styles.filters.filterButton.active, typography.filters.filterButton.active, IconWrapper, animation.speed.faster, animation.easing.primary.inOut, theme.colors.icons.inverse);
4965
5882
  }, function (_ref2) {
4966
5883
  var theme = _ref2.theme,
4967
5884
  isOpen = _ref2.isOpen,
@@ -5050,18 +5967,22 @@ var _excluded$m = ["color", "hasBorder", "iconSize", "disabled", "noBackground",
5050
5967
 
5051
5968
  var _templateObject$y, _templateObject2$x, _templateObject3$r, _templateObject4$m, _templateObject5$k, _templateObject6$i, _templateObject7$h, _templateObject8$g;
5052
5969
  var Container$l = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", " {\n flex-shrink: 0;\n display: flex;\n }\n\n height: 30px;\n padding: 0 0 0 8px;\n align-items: center;\n display: flex;\n border-radius: 3px;\n"])), function (_ref) {
5053
- var theme = _ref.theme,
5970
+ var styles = _ref.theme.styles,
5971
+ theme = _ref.theme,
5054
5972
  hasBorder = _ref.hasBorder,
5055
5973
  disabled = _ref.disabled,
5056
5974
  noBackground = _ref.noBackground,
5057
5975
  width = _ref.width;
5058
- return styled.css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n ", ";\n\n background-color: ", ";\n "])), hasBorder && styled.css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n box-shadow: 0 4px 9px 0 hsla(205, 35%, 68%, 0.07);\n "])), theme.styles.form.input["default"].normal.borderColor), disabled && styled.css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), width), noBackground ? 'transparent' : 'hsla(0, 0%, 100%, 1.000)');
5976
+ return styled.css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n ", ";\n\n background-color: ", ";\n\n &:focus-within {\n background-color: ", ";\n border: ", ";\n }\n\n "])), hasBorder && styled.css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n border: ", ";\n box-shadow: ", ";\n "])), styles.filters.searchInput["default"].border, styles.filters.searchInput["default"].boxShadow), disabled && styled.css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), width), noBackground ? 'transparent' : theme.styles.filters.searchInput["default"].backgroundColor, noBackground ? 'transparent' : styles.filters.searchInput.focused.backgroundColor, noBackground ? 'transparent' : styles.filters.searchInput.focused.border);
5059
5977
  }, IconWrapper);
5060
5978
  var CrossButton = styled__default.button(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n ", ";\n flex-shrink: 0;\n flex-grow: 0;\n flex-basis: auto;\n width: 26px;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), resetButtonStyles, IconWrapper);
5061
5979
  var StyledInput$2 = styled__default.input(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n\n font-size: 12px;\n border: none;\n height: 100%;\n width: 100%;\n background-color: transparent;\n box-sizing: border-box;\n border-radius: 3px;\n outline: none;\n margin-left: 7px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n"])), function (_ref2) {
5062
- var theme = _ref2.theme,
5980
+ var _ref2$theme = _ref2.theme,
5981
+ typography = _ref2$theme.typography,
5982
+ colors = _ref2$theme.colors,
5983
+ theme = _ref2.theme,
5063
5984
  color = _ref2.color;
5064
- return styled.css(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n &::placeholder {\n ", ";\n color: ", ";\n font-size: 12px;\n }\n "])), theme.fontFamily.ui, theme.typography.form.input.value.compact, theme.typography.form.input.placeholder.compact, theme.colors.icons[color]);
5985
+ return styled.css(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n\n &::placeholder {\n ", ";\n color: ", ";\n font-size: 12px;\n }\n "])), theme.fontFamily.ui, typography.filters.searchInput.value, typography.filters.searchInput.placeholder, colors.icons[color]);
5065
5986
  });
5066
5987
 
5067
5988
  var BasicSearchInput = function BasicSearchInput(_ref3) {
@@ -5258,22 +6179,34 @@ var _excluded$o = ["buttonIcon", "buttonText", "list", "selected", "disabled", "
5258
6179
 
5259
6180
  var _templateObject$A, _templateObject2$z, _templateObject3$t, _templateObject4$o, _templateObject5$l, _templateObject6$j, _templateObject7$i, _templateObject8$h, _templateObject9$g, _templateObject10$d, _templateObject11$9;
5260
6181
  var Container$n = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
5261
- var TopLine$1 = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n ", ";\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])), function (_ref) {
6182
+ var TopLine$1 = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n ", ";\n height: 4px;\n border-radius: 3px 3px 0 0;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n"])), function (_ref) {
5262
6183
  var theme = _ref.theme;
5263
6184
  return theme.styles.filters.dropdownContainer.topBorder;
5264
6185
  });
5265
- var InnerBox = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);\n border-right: solid 1px hsl(207, 16%, 86%);\n border-bottom: solid 1px hsl(207, 16%, 86%);\n border-left: solid 1px hsl(207, 16%, 86%);\n background-color: hsl(200, 23%, 97%);\n"])));
5266
- var LoadingBox = styled__default.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 146px;\n border-top: 1px solid hsl(0, 0%, 91%);\n"])));
5267
- var LoadingText = styled__default.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n ", "\n color: hsl(0, 0%, 55%);\n font-size: 12px;\n font-style: italic;\n padding: 15px 0;\n"])), function (_ref2) {
6186
+ var InnerBox = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n padding-top: 5px;\n ", ";\n"])), function (_ref2) {
5268
6187
  var theme = _ref2.theme;
6188
+ return theme.styles.filters.dropdownContainer.background;
6189
+ });
6190
+ var LoadingBox = styled__default.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 146px;\n border-top: ", " 1px solid;\n"])), function (_ref3) {
6191
+ var theme = _ref3.theme;
6192
+ return theme.colors.divider;
6193
+ });
6194
+ var LoadingText = styled__default.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n ", "\n color: hsl(0, 0%, 55%);\n font-size: 12px;\n font-style: italic;\n padding: 15px 0;\n"])), function (_ref4) {
6195
+ var theme = _ref4.theme;
5269
6196
  return theme && styled.css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
5270
6197
  });
5271
6198
  var StyledFilterOption = styled__default(FilterOption)(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
5272
6199
  var OptionList = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), StyledFilterOption);
5273
- var ResultsContainer = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n border-top: 1px solid hsl(0, 0%, 91%);\n padding-bottom: 8px;\n"])));
5274
- var ResultCounter = styled__default.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n opacity: 0.75;\n font-family: ", ";\n color: hsl(0, 0%, 55%);\n font-size: 12px;\n font-style: italic;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: left;\n padding-left: 9px;\n height: 30px;\n margin-bottom: 6px;\n border-bottom: 1px solid hsl(0, 0%, 91%);\n"])), function (_ref3) {
5275
- var theme = _ref3.theme;
6200
+ var ResultsContainer = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n border-top: ", " 1px solid;\n padding-bottom: 8px;\n"])), function (_ref5) {
6201
+ var theme = _ref5.theme;
6202
+ return theme.colors.divider;
6203
+ });
6204
+ var ResultCounter = styled__default.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n opacity: 0.75;\n font-family: ", ";\n color: hsl(0, 0%, 55%);\n font-size: 12px;\n font-style: italic;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: left;\n padding-left: 9px;\n height: 30px;\n margin-bottom: 6px;\n border-bottom: ", " 1px solid;\n"])), function (_ref6) {
6205
+ var theme = _ref6.theme;
5276
6206
  return theme.fontFamily.data;
6207
+ }, function (_ref7) {
6208
+ var theme = _ref7.theme;
6209
+ return theme.colors.divider;
5277
6210
  });
5278
6211
  var SearchWrapper = styled__default.div(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n height: 41px;\n display: flex;\n align-items: center;\n"])));
5279
6212
 
@@ -5414,28 +6347,28 @@ var getResultText = function getResultText(template, visible, total) {
5414
6347
  return newMessage.replace('[VISIBLE]', "" + visible);
5415
6348
  };
5416
6349
 
5417
- var FilterDropdown = function FilterDropdown(_ref4) {
5418
- var buttonIcon = _ref4.buttonIcon,
5419
- buttonText = _ref4.buttonText,
5420
- list = _ref4.list,
5421
- _ref4$selected = _ref4.selected,
5422
- selected = _ref4$selected === void 0 ? null : _ref4$selected,
5423
- _ref4$disabled = _ref4.disabled,
5424
- disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
5425
- _ref4$isLoading = _ref4.isLoading,
5426
- isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
5427
- loadingText = _ref4.loadingText,
5428
- _ref4$optionType = _ref4.optionType,
5429
- optionType = _ref4$optionType === void 0 ? 'text' : _ref4$optionType,
5430
- hasOptionsFilter = _ref4.hasOptionsFilter,
5431
- searchPlaceholder = _ref4.searchPlaceholder,
5432
- _ref4$maxDisplayedIte = _ref4.maxDisplayedItems,
5433
- maxDisplayedItems = _ref4$maxDisplayedIte === void 0 ? 5 : _ref4$maxDisplayedIte,
5434
- _ref4$searchResultTex = _ref4.searchResultText,
5435
- searchResultText = _ref4$searchResultTex === void 0 ? 'Showing [VISIBLE] of [TOTAL]' : _ref4$searchResultTex,
5436
- _ref4$onSelect = _ref4.onSelect,
5437
- onSelect = _ref4$onSelect === void 0 ? function () {} : _ref4$onSelect,
5438
- props = _objectWithoutPropertiesLoose(_ref4, _excluded$o);
6350
+ var FilterDropdown = function FilterDropdown(_ref8) {
6351
+ var buttonIcon = _ref8.buttonIcon,
6352
+ buttonText = _ref8.buttonText,
6353
+ list = _ref8.list,
6354
+ _ref8$selected = _ref8.selected,
6355
+ selected = _ref8$selected === void 0 ? null : _ref8$selected,
6356
+ _ref8$disabled = _ref8.disabled,
6357
+ disabled = _ref8$disabled === void 0 ? false : _ref8$disabled,
6358
+ _ref8$isLoading = _ref8.isLoading,
6359
+ isLoading = _ref8$isLoading === void 0 ? false : _ref8$isLoading,
6360
+ loadingText = _ref8.loadingText,
6361
+ _ref8$optionType = _ref8.optionType,
6362
+ optionType = _ref8$optionType === void 0 ? 'text' : _ref8$optionType,
6363
+ hasOptionsFilter = _ref8.hasOptionsFilter,
6364
+ searchPlaceholder = _ref8.searchPlaceholder,
6365
+ _ref8$maxDisplayedIte = _ref8.maxDisplayedItems,
6366
+ maxDisplayedItems = _ref8$maxDisplayedIte === void 0 ? 5 : _ref8$maxDisplayedIte,
6367
+ _ref8$searchResultTex = _ref8.searchResultText,
6368
+ searchResultText = _ref8$searchResultTex === void 0 ? 'Showing [VISIBLE] of [TOTAL]' : _ref8$searchResultTex,
6369
+ _ref8$onSelect = _ref8.onSelect,
6370
+ onSelect = _ref8$onSelect === void 0 ? function () {} : _ref8$onSelect,
6371
+ props = _objectWithoutPropertiesLoose(_ref8, _excluded$o);
5439
6372
 
5440
6373
  var _useState = React.useState(getVisibleList(list, maxDisplayedItems, selected)),
5441
6374
  visibleList = _useState[0],
@@ -5609,7 +6542,7 @@ var _excluded$q = ["hasShowMore", "searchFilters", "datePickerFilters", "dropdow
5609
6542
 
5610
6543
  var _templateObject$C, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$m, _templateObject6$k, _templateObject7$j, _templateObject8$i;
5611
6544
  var fadeInAnimation = styled.keyframes(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n 0% {\n width: 50%;\n opacity: .5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n width: 100%;\n }\n"])));
5612
- var SearchInputWrapper = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n background-color: hsl(0, 0%, 100%);\n border-radius: 3px;\n flex: 1 1 200px;\n max-width: 320px;\n"])));
6545
+ var SearchInputWrapper = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n flex: 1 1 200px;\n max-width: 320px;\n"])));
5613
6546
  var CloseSearchInputWrapper = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
5614
6547
  var theme = _ref.theme;
5615
6548
  return theme && styled.css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n animation: ", " ", " ", ";\n "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
@@ -6559,7 +7492,7 @@ var HandleUnit = function HandleUnit(props) {
6559
7492
  }, index + pointIndexOffset))));
6560
7493
  };
6561
7494
 
6562
- var _templateObject$H, _templateObject2$F, _templateObject3$z, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$l, _templateObject9$i, _templateObject10$f, _templateObject11$b;
7495
+ var _templateObject$H, _templateObject2$F, _templateObject3$z, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$l, _templateObject9$i, _templateObject10$f, _templateObject11$b, _templateObject12$6;
6563
7496
  var ContrastLine = styled__default.line(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n stroke: ", ";\n mix-blend-mode: multiply;\n"])), function (_ref) {
6564
7497
  var theme = _ref.theme,
6565
7498
  styling = _ref.styling;
@@ -6602,6 +7535,7 @@ var GrabHandleContrast = styled__default(GrabHandle)(_templateObject9$i || (_tem
6602
7535
  var GrabHandleGroup = styled__default.g(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n\n ", ", ", " {\n transition: r 250ms ease;\n }\n\n ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
6603
7536
  return props.showIndex && styled.css(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
6604
7537
  });
7538
+ var DMCircle = styled__default.circle(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n"])));
6605
7539
 
6606
7540
  var LineUnit = function LineUnit(props) {
6607
7541
  var x1 = props.x1,
@@ -6621,7 +7555,8 @@ var LineUnit = function LineUnit(props) {
6621
7555
  var handleFinderActive = options.handleFinderActive,
6622
7556
  revealSetIndex = options.revealSetIndex,
6623
7557
  showMoveHandle = options.showMoveHandle,
6624
- setIndexOffset = options.setIndexOffset;
7558
+ setIndexOffset = options.setIndexOffset,
7559
+ showDirectionMark = options.showDirectionMark;
6625
7560
  var a = x1 - x2;
6626
7561
  var b = y1 - y2;
6627
7562
  var distance = Math.sqrt(a * a + b * b);
@@ -6680,6 +7615,49 @@ var LineUnit = function LineUnit(props) {
6680
7615
  x: (x2 + x1) / 2,
6681
7616
  y: (y2 + y1) / 2
6682
7617
  };
7618
+
7619
+ var directionMarkCoordinate = function directionMarkCoordinate() {
7620
+ var angle = Math.atan2(y2 - y1, x2 - x1);
7621
+ var angleMode = Math.PI / 2 - angle;
7622
+ var x = midpoint.x + Math.sin(angleMode) - 5;
7623
+ var y = midpoint.y + Math.cos(angleMode);
7624
+ var rotate = 180 / Math.PI * Math.atan2(y2 - y1, x2 - x1);
7625
+ var labelRotate = -rotate;
7626
+ return {
7627
+ x: x,
7628
+ y: y,
7629
+ rotate: rotate,
7630
+ labelRotate: labelRotate
7631
+ };
7632
+ };
7633
+
7634
+ var getDirectionMarkLine = function getDirectionMarkLine() {
7635
+ var dmCoordinate = directionMarkCoordinate();
7636
+ return React__default.createElement("g", {
7637
+ transform: "translate(" + dmCoordinate.x + "," + dmCoordinate.y + ") rotate(" + dmCoordinate.rotate + ") scale(" + unit * 1 + ")"
7638
+ }, React__default.createElement("g", {
7639
+ transform: 'translate(-3,-30) scale(0.8)'
7640
+ }, React__default.createElement(DMCircle, {
7641
+ r: 12,
7642
+ cx: 6,
7643
+ cy: 7
7644
+ }), React__default.createElement(Icon, {
7645
+ color: 'inverse',
7646
+ icon: 'Up',
7647
+ size: 12,
7648
+ weight: 'heavy',
7649
+ forSvgUsage: true
7650
+ })), React__default.createElement("g", {
7651
+ transform: "translate(0,30) rotate(" + dmCoordinate.labelRotate + ")"
7652
+ }, React__default.createElement(LabelText$2, {
7653
+ styling: styling,
7654
+ fontSize: 14 + "px",
7655
+ x: 0,
7656
+ y: 0,
7657
+ showIndex: revealSetIndex || handleFinderActive
7658
+ }, label)));
7659
+ };
7660
+
6683
7661
  return React__default.createElement("g", null, React__default.createElement(ContrastLine, {
6684
7662
  styling: styling,
6685
7663
  strokeLinecap: 'round',
@@ -6725,7 +7703,7 @@ var LineUnit = function LineUnit(props) {
6725
7703
  x: midpoint.x - 3 * unit,
6726
7704
  y: midpoint.y + 4 * unit,
6727
7705
  showIndex: revealSetIndex || handleFinderActive
6728
- }, lineSetId + setIndexOffset)), label && React__default.createElement(LabelText$2, {
7706
+ }, lineSetId + setIndexOffset)), showDirectionMark ? getDirectionMarkLine() : label && React__default.createElement(LabelText$2, {
6729
7707
  styling: styling,
6730
7708
  fontSize: unit * 14 + "px",
6731
7709
  x: midpoint.x - 16 * unit,
@@ -7021,7 +7999,9 @@ var LineUI = function LineUI(_ref) {
7021
7999
  showPoint = _ref$options$showPoin2 === void 0 ? false : _ref$options$showPoin2,
7022
8000
  fixedImgDimensions = _ref$options.fixedImgDimensions,
7023
8001
  _ref$options$boundary = _ref$options.boundaryOffset,
7024
- boundaryOffset = _ref$options$boundary === void 0 ? 0 : _ref$options$boundary;
8002
+ boundaryOffset = _ref$options$boundary === void 0 ? 0 : _ref$options$boundary,
8003
+ _ref$options$showDire = _ref$options.showDirectionMark,
8004
+ showDirectionMark = _ref$options$showDire === void 0 ? false : _ref$options$showDire;
7025
8005
 
7026
8006
  var _useState = React.useState({
7027
8007
  x: {
@@ -7148,7 +8128,8 @@ var LineUI = function LineUI(_ref) {
7148
8128
  showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
7149
8129
  setIndexOffset: setIndexOffset,
7150
8130
  pointIndexOffset: pointIndexOffset,
7151
- showPoint: showPoint
8131
+ showPoint: showPoint,
8132
+ showDirectionMark: showDirectionMark
7152
8133
  };
7153
8134
  return React__default.createElement(Container$t, null, React__default.createElement(Image$1, {
7154
8135
  ref: imgRef,
@@ -8670,8 +9651,9 @@ var CellContainer = styled__default.div(_templateObject3$H || (_templateObject3$
8670
9651
  var hasCopyButton = _ref3.hasCopyButton;
8671
9652
  return hasCopyButton && styled.css(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
8672
9653
  }, function (_ref4) {
8673
- var hideDivider = _ref4.hideDivider;
8674
- return !hideDivider && styled.css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n &::after {\n content: '';\n display: block;\n height: 1px;\n background: #afa9a9;\n opacity: 0.25;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0px;\n position: absolute;\n }\n "])));
9654
+ var styles = _ref4.theme.styles,
9655
+ hideDivider = _ref4.hideDivider;
9656
+ return !hideDivider && styled.css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0px;\n position: absolute;\n }\n "])), styles.tables.rows.divider);
8675
9657
  });
8676
9658
  var UnitText = styled__default.span(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
8677
9659
  var theme = _ref5.theme;
@@ -8808,8 +9790,9 @@ var HeaderTitle = styled__default.div(_templateObject$X || (_templateObject$X =
8808
9790
  var isSortActive = _ref2.isSortActive;
8809
9791
  return isSortActive && styled.css(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
8810
9792
  }, function (_ref3) {
8811
- var sortable = _ref3.sortable;
8812
- return sortable && styled.css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n &:hover {\n background-color: hsl(220, 12%, 95%);\n cursor: pointer;\n ", " {\n display: inline-flex;\n background-color: hsl(220, 12%, 95%);\n }\n }\n "])), IconWrapper);
9793
+ var styles = _ref3.theme.styles,
9794
+ sortable = _ref3.sortable;
9795
+ return sortable && styled.css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n &:hover {\n cursor: pointer;\n ", ";\n\n ", " {\n ", ";\n display: inline-flex;\n }\n }\n "])), styles.tables.header.sortable["default"], styles.tables.header.sortable.hover, IconWrapper, styles.tables.header.sortable.hover);
8813
9796
  });
8814
9797
 
8815
9798
  var TableHeaderTitle = function TableHeaderTitle(_ref4) {
@@ -8839,7 +9822,7 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
8839
9822
  }), header);
8840
9823
  };
8841
9824
 
8842
- var _templateObject$Y, _templateObject2$T, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$t, _templateObject7$r, _templateObject8$p, _templateObject9$k, _templateObject10$h, _templateObject11$d, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$3;
9825
+ var _templateObject$Y, _templateObject2$T, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$t, _templateObject7$r, _templateObject8$p, _templateObject9$k, _templateObject10$h, _templateObject11$d, _templateObject12$7, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
8843
9826
  var HeaderRow = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
8844
9827
  var HeaderItem = styled__default.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: inherit;\n vertical-align:top;\n line-height: 20px;\n position: relative;\n font-family: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (p) {
8845
9828
  return p.theme.fontFamily.ui;
@@ -8857,20 +9840,27 @@ var HeaderItem = styled__default.div(_templateObject2$T || (_templateObject2$T =
8857
9840
  var minWidth = _ref3.minWidth;
8858
9841
  return minWidth && styled.css(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
8859
9842
  }, function (_ref4) {
8860
- var headerStyle = _ref4.headerStyle,
9843
+ var styles = _ref4.theme.styles,
9844
+ headerStyle = _ref4.headerStyle,
8861
9845
  isSortActive = _ref4.isSortActive;
8862
- return headerStyle === 'subHeader' && styled.css(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n padding-bottom: 15px;\n\n &::after {\n content: '';\n display: block;\n height: 1px;\n background-color: hsl(0, 0%, 89%);\n left: ", ";\n right: 0;\n width: ", ";\n bottom: 0px;\n position: absolute;\n }\n"])), isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
9846
+ return headerStyle === 'subHeader' && styled.css(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n padding-bottom: 15px;\n\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: ", ";\n right: 0;\n width: ", ";\n bottom: 0px;\n position: absolute;\n }\n"])), styles.tables.header.divider, isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
8863
9847
  });
8864
9848
  var TitleItems = styled__default.div(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
8865
9849
  var alignment = _ref5.alignment;
8866
9850
  return alignment && styled.css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
8867
9851
  });
8868
9852
  var GroupTitle = styled__default.div(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n margin-bottom: 4px;\n"])));
8869
- var Title$4 = styled__default.div(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n padding-left: 2px;\n padding-right: 8px;\n color: hsla(210, 2%, 51%, 0.65);\n font-weight: 500;\n font-size: 12px;\n letter-spacing: 0.3px;\n white-space: nowrap;\n"])));
8870
- var EmptyTitle = styled__default.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n height: 20px;\n"])));
8871
- var MiddleLine = styled__default.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n height: 1px;\n background: hsl(0, 0%, 93%);\n flex: 1;\n ", ";\n"])), function (_ref6) {
8872
- var isLastOfGroup = _ref6.isLastOfGroup;
8873
- return isLastOfGroup && styled.css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n "])));
9853
+ var Title$4 = styled__default.div(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n ", ";\n padding-left: 2px;\n padding-right: 8px;\n white-space: nowrap;\n"])), function (_ref6) {
9854
+ var typography = _ref6.theme.typography;
9855
+ return styled.css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), typography.tables.groupName);
9856
+ });
9857
+ var EmptyTitle = styled__default.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n height: 20px;\n"])));
9858
+ var MiddleLine = styled__default.div(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n ", ";\n\n height: 1px;\n flex: 1;\n ", ";\n"])), function (_ref7) {
9859
+ var styles = _ref7.theme.styles;
9860
+ return styled.css(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.tables.header.groupLine);
9861
+ }, function (_ref8) {
9862
+ var isLastOfGroup = _ref8.isLastOfGroup;
9863
+ return isLastOfGroup && styled.css(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n "])));
8874
9864
  });
8875
9865
 
8876
9866
  var renderGroupHeader = function renderGroupHeader(columnConfig, index) {
@@ -8899,21 +9889,21 @@ var renderGroupHeader = function renderGroupHeader(columnConfig, index) {
8899
9889
  })));
8900
9890
  };
8901
9891
 
8902
- var TypeTableHeader = function TypeTableHeader(_ref7) {
8903
- var selectable = _ref7.selectable,
8904
- hasStatus = _ref7.hasStatus,
8905
- hasThumbnail = _ref7.hasThumbnail,
8906
- hasTypeIcon = _ref7.hasTypeIcon,
8907
- allChecked = _ref7.allChecked,
8908
- isEmptyTable = _ref7.isEmptyTable,
8909
- isLoading = _ref7.isLoading,
8910
- hasHeaderGroups = _ref7.hasHeaderGroups,
8911
- columnConfig = _ref7.columnConfig,
8912
- defaultAscending = _ref7.defaultAscending,
8913
- _ref7$toggleAllCallba = _ref7.toggleAllCallback,
8914
- toggleAllCallback = _ref7$toggleAllCallba === void 0 ? function () {} : _ref7$toggleAllCallba,
8915
- _ref7$sortCallback = _ref7.sortCallback,
8916
- sortCallback = _ref7$sortCallback === void 0 ? function () {} : _ref7$sortCallback;
9892
+ var TypeTableHeader = function TypeTableHeader(_ref9) {
9893
+ var selectable = _ref9.selectable,
9894
+ hasStatus = _ref9.hasStatus,
9895
+ hasThumbnail = _ref9.hasThumbnail,
9896
+ hasTypeIcon = _ref9.hasTypeIcon,
9897
+ allChecked = _ref9.allChecked,
9898
+ isEmptyTable = _ref9.isEmptyTable,
9899
+ isLoading = _ref9.isLoading,
9900
+ hasHeaderGroups = _ref9.hasHeaderGroups,
9901
+ columnConfig = _ref9.columnConfig,
9902
+ defaultAscending = _ref9.defaultAscending,
9903
+ _ref9$toggleAllCallba = _ref9.toggleAllCallback,
9904
+ toggleAllCallback = _ref9$toggleAllCallba === void 0 ? function () {} : _ref9$toggleAllCallba,
9905
+ _ref9$sortCallback = _ref9.sortCallback,
9906
+ sortCallback = _ref9$sortCallback === void 0 ? function () {} : _ref9$sortCallback;
8917
9907
 
8918
9908
  var _useState = React.useState(columnConfig),
8919
9909
  sortSpec = _useState[0],
@@ -11211,7 +12201,7 @@ var ContentArea = styled__default.div(_templateObject6$w || (_templateObject6$w
11211
12201
  return paddingOverride ? paddingOverride : '70px 90px';
11212
12202
  });
11213
12203
 
11214
- var _templateObject$1a, _templateObject2$13, _templateObject3$V, _templateObject4$P, _templateObject5$K, _templateObject6$x, _templateObject7$t, _templateObject8$r, _templateObject9$m, _templateObject10$j, _templateObject11$e, _templateObject12$7, _templateObject13$6, _templateObject14$5, _templateObject15$4, _templateObject16$3, _templateObject17$3, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
12204
+ var _templateObject$1a, _templateObject2$13, _templateObject3$V, _templateObject4$P, _templateObject5$K, _templateObject6$x, _templateObject7$t, _templateObject8$r, _templateObject9$m, _templateObject10$j, _templateObject11$e, _templateObject12$8, _templateObject13$6, _templateObject14$5, _templateObject15$4, _templateObject16$4, _templateObject17$4, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
11215
12205
  var ContextTitle = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n opacity: 0;\n\n ", "\n\n ", "\n"])), function (_ref) {
11216
12206
  var theme = _ref.theme;
11217
12207
  return styled.css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
@@ -11232,7 +12222,7 @@ var StyledAnchor = styled__default.a(_templateObject9$m || (_templateObject9$m =
11232
12222
  var ExternalIconWrapper = styled__default.div(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
11233
12223
  var ContextWrapper = styled__default.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: ", ";\n }\n }\n }\n"])), ContextActionBaseCSS, function (_ref5) {
11234
12224
  var theme = _ref5.theme;
11235
- return theme && styled.css(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
12225
+ return theme && styled.css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
11236
12226
  }, function (_ref6) {
11237
12227
  var $menuOpen = _ref6.$menuOpen;
11238
12228
  return $menuOpen && styled.css(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
@@ -11248,7 +12238,7 @@ var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject14$5 ||
11248
12238
  return theme && styled.css(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
11249
12239
  }, function (_ref10) {
11250
12240
  var $menuOpen = _ref10.$menuOpen;
11251
- return $menuOpen && styled.css(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
12241
+ return $menuOpen && styled.css(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
11252
12242
  }, ContextIcon, function (_ref11) {
11253
12243
  var theme = _ref11.theme;
11254
12244
  return theme.styles.global.mainMenu.iconBackground.hover;
@@ -11257,7 +12247,7 @@ var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject14$5 ||
11257
12247
  return theme.colors.icons['inverse'];
11258
12248
  }, function (_ref13) {
11259
12249
  var $isActive = _ref13.$isActive;
11260
- return $isActive && styled.css(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n ", ";\n }\n "])), ContextIcon, ContextIcon, function (_ref14) {
12250
+ return $isActive && styled.css(_templateObject17$4 || (_templateObject17$4 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n ", ";\n }\n "])), ContextIcon, ContextIcon, function (_ref14) {
11261
12251
  var theme = _ref14.theme;
11262
12252
  return theme.styles.global.mainMenu.iconBackground.active;
11263
12253
  });
@@ -11347,13 +12337,16 @@ var menuReducer = function menuReducer(state, action) {
11347
12337
  var isMenuPinned = false;
11348
12338
  var canPin = false;
11349
12339
 
11350
- if (action.data.defaultMenuOpen && action.data.desktopSize === 'xlarge') {
12340
+ if (action.data.canAlwaysPin || action.data.defaultMenuOpen && action.data.desktopSize === 'xlarge') {
11351
12341
  canPin = true;
11352
12342
  }
11353
12343
 
11354
- if (action.data.desktopSize === 'xxlarge') {
12344
+ if (action.data.desktopSize === 'xxlarge' && action.data.canAlwaysPin === false) {
11355
12345
  isMenuOpen = true;
11356
12346
  isMenuPinned = true;
12347
+ } else if (action.data.desktopSize === 'xxlarge') {
12348
+ isMenuOpen = action.data.defaultMenuOpen;
12349
+ isMenuPinned = false;
11357
12350
  }
11358
12351
 
11359
12352
  return _extends({}, state, {
@@ -11370,7 +12363,7 @@ var menuReducer = function menuReducer(state, action) {
11370
12363
  return state;
11371
12364
  }
11372
12365
 
11373
- if (state.desktopSize === 'xxlarge') {
12366
+ if (state.desktopSize === 'xxlarge' && !state.canPin) {
11374
12367
  return state;
11375
12368
  }
11376
12369
 
@@ -11385,7 +12378,7 @@ var menuReducer = function menuReducer(state, action) {
11385
12378
  return state;
11386
12379
  }
11387
12380
 
11388
- if (state.desktopSize === 'xxlarge') {
12381
+ if (state.desktopSize === 'xxlarge' && !state.canPin) {
11389
12382
  return state;
11390
12383
  }
11391
12384
 
@@ -11429,7 +12422,7 @@ var menuState = {
11429
12422
  canPin: false
11430
12423
  };
11431
12424
 
11432
- var useMenu = function useMenu(defaultMenuOpen) {
12425
+ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
11433
12426
  var _useBreakpoints = useBreakpoints(),
11434
12427
  activeScreen = _useBreakpoints.activeScreen;
11435
12428
 
@@ -11437,12 +12430,13 @@ var useMenu = function useMenu(defaultMenuOpen) {
11437
12430
  state = _useReducer[0],
11438
12431
  dispatch = _useReducer[1];
11439
12432
 
11440
- var setMenu = React.useCallback(function (defaultMenuOpen, desktopSize) {
12433
+ var setMenu = React.useCallback(function (defaultMenuOpen, canAlwaysPin, desktopSize) {
11441
12434
  dispatch({
11442
12435
  type: 'SET_MENU',
11443
12436
  data: {
11444
12437
  defaultMenuOpen: defaultMenuOpen,
11445
- desktopSize: desktopSize
12438
+ desktopSize: desktopSize,
12439
+ canAlwaysPin: canAlwaysPin
11446
12440
  }
11447
12441
  });
11448
12442
  }, []);
@@ -11462,8 +12456,8 @@ var useMenu = function useMenu(defaultMenuOpen) {
11462
12456
  });
11463
12457
  }, []);
11464
12458
  React.useLayoutEffect(function () {
11465
- setMenu(defaultMenuOpen, activeScreen);
11466
- }, [activeScreen, defaultMenuOpen, setMenu]);
12459
+ setMenu(defaultMenuOpen, canAlwaysPin, activeScreen);
12460
+ }, [activeScreen, defaultMenuOpen, canAlwaysPin, setMenu]);
11467
12461
  return {
11468
12462
  menuState: state,
11469
12463
  setMenuOpen: setMenuOpen,
@@ -11472,7 +12466,7 @@ var useMenu = function useMenu(defaultMenuOpen) {
11472
12466
  };
11473
12467
  };
11474
12468
 
11475
- var _templateObject$1b, _templateObject2$14, _templateObject3$W, _templateObject4$Q, _templateObject5$L, _templateObject6$y, _templateObject7$u, _templateObject8$s, _templateObject9$n, _templateObject10$k, _templateObject11$f, _templateObject12$8, _templateObject13$7, _templateObject14$6, _templateObject15$5;
12469
+ var _templateObject$1b, _templateObject2$14, _templateObject3$W, _templateObject4$Q, _templateObject5$L, _templateObject6$y, _templateObject7$u, _templateObject8$s, _templateObject9$n, _templateObject10$k, _templateObject11$f, _templateObject12$9, _templateObject13$7, _templateObject14$6, _templateObject15$5;
11476
12470
  var Submenu = styled__default.ul(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
11477
12471
  var SubmenuHeader = styled__default.div(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
11478
12472
  var SubmenuItemTitle = styled__default.span(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n display: block;\n ", ";\n\n"])), function (_ref) {
@@ -11492,7 +12486,7 @@ var SubmenuItem = styled__default.li(_templateObject8$s || (_templateObject8$s =
11492
12486
  });
11493
12487
  var SubmenuContainer = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n ", ";\n\n position: relative;\n overflow: hidden;\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: ", ";\n }\n\n"])), function (_ref4) {
11494
12488
  var theme = _ref4.theme;
11495
- return theme && styled.css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n transition:\n max-height ", " ", ",\n opacity ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
12489
+ return theme && styled.css(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n transition:\n max-height ", " ", ",\n opacity ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
11496
12490
  }, function (_ref5) {
11497
12491
  var colors = _ref5.theme.colors;
11498
12492
  return colors.divider;
@@ -11619,7 +12613,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
11619
12613
  return output;
11620
12614
  };
11621
12615
 
11622
- var _templateObject$1c, _templateObject2$15, _templateObject3$X, _templateObject4$R, _templateObject5$M, _templateObject6$z, _templateObject7$v, _templateObject8$t, _templateObject9$o, _templateObject10$l, _templateObject11$g, _templateObject12$9, _templateObject13$8, _templateObject14$7, _templateObject15$6;
12616
+ var _templateObject$1c, _templateObject2$15, _templateObject3$X, _templateObject4$R, _templateObject5$M, _templateObject6$z, _templateObject7$v, _templateObject8$t, _templateObject9$o, _templateObject10$l, _templateObject11$g, _templateObject12$a, _templateObject13$8, _templateObject14$7, _templateObject15$6;
11623
12617
  var Logo = styled__default(reactRouterDom.Link)(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
11624
12618
  var LogoMark = styled__default.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n height: 50px;\n flex: 0 0 50px;\n margin-right: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n"])));
11625
12619
  var LogoType = styled__default.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
@@ -11636,7 +12630,7 @@ var PushContainer = styled__default.div(_templateObject10$l || (_templateObject1
11636
12630
  isPinned = _ref2.isPinned;
11637
12631
  return theme && styled.css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed);
11638
12632
  });
11639
- var Container$O = styled__default.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n z-index: 99;\n position: fixed;\n top: 0;\n left: 0;\n ", "\n\n box-sizing: border-box;\n height: 100%;\n padding: 20px 0 0 0;\n overflow: hidden;\n"])), function (_ref3) {
12633
+ var Container$O = styled__default.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n z-index: 99;\n position: fixed;\n top: 0;\n left: 0;\n ", "\n\n box-sizing: border-box;\n height: 100%;\n padding: 20px 0 0 0;\n overflow: hidden;\n"])), function (_ref3) {
11640
12634
  var theme = _ref3.theme,
11641
12635
  open = _ref3.open,
11642
12636
  desktopSize = _ref3.desktopSize;
@@ -11653,11 +12647,17 @@ var MainMenu = function MainMenu(_ref5) {
11653
12647
  home = _ref5$home === void 0 ? "/" : _ref5$home,
11654
12648
  logoMark = _ref5.logoMark,
11655
12649
  logoText = _ref5.logoText,
12650
+ _ref5$keepOpenText = _ref5.keepOpenText,
12651
+ keepOpenText = _ref5$keepOpenText === void 0 ? "Keep Open" : _ref5$keepOpenText,
12652
+ _ref5$autoHideText = _ref5.autoHideText,
12653
+ autoHideText = _ref5$autoHideText === void 0 ? "Auto-Hide" : _ref5$autoHideText,
11656
12654
  supportUrl = _ref5.supportUrl,
11657
12655
  _ref5$defaultMenuOpen = _ref5.defaultMenuOpen,
11658
- defaultMenuOpen = _ref5$defaultMenuOpen === void 0 ? true : _ref5$defaultMenuOpen;
12656
+ defaultMenuOpen = _ref5$defaultMenuOpen === void 0 ? true : _ref5$defaultMenuOpen,
12657
+ _ref5$canAlwaysPin = _ref5.canAlwaysPin,
12658
+ canAlwaysPin = _ref5$canAlwaysPin === void 0 ? false : _ref5$canAlwaysPin;
11659
12659
 
11660
- var _useMenu = useMenu(defaultMenuOpen),
12660
+ var _useMenu = useMenu(defaultMenuOpen, canAlwaysPin),
11661
12661
  menuState = _useMenu.menuState,
11662
12662
  setMenuOpen = _useMenu.setMenuOpen,
11663
12663
  setMenuClose = _useMenu.setMenuClose,
@@ -11743,17 +12743,17 @@ var MainMenu = function MainMenu(_ref5) {
11743
12743
  title: 'Help & Support',
11744
12744
  href: supportUrl,
11745
12745
  menuOpen: menuState.isMenuOpen
11746
- })), React__default.createElement(FooterItemContainer, null, menuState.canPin ? React__default.createElement(ContextItem, {
12746
+ })), menuState.canPin ? React__default.createElement(FooterItemContainer, null, React__default.createElement(ContextItem, {
11747
12747
  compact: true,
11748
12748
  isActive: false,
11749
12749
  icon: menuState.isMenuOpen && menuState.isMenuPinned ? 'Left' : 'Menu',
11750
- title: menuState.isMenuPinned ? 'Keep Open' : 'Auto-Hide',
12750
+ title: menuState.isMenuPinned ? keepOpenText : autoHideText,
11751
12751
  onClickCallback: toggleMenuPin,
11752
12752
  menuOpen: menuState.isMenuOpen
11753
- }) : null)))), document.body));
12753
+ })) : null))), document.body));
11754
12754
  };
11755
12755
 
11756
- var _templateObject$1d, _templateObject2$16, _templateObject3$Y, _templateObject4$S, _templateObject5$N, _templateObject6$A, _templateObject7$w, _templateObject8$u, _templateObject9$p, _templateObject10$m, _templateObject11$h, _templateObject12$a, _templateObject13$9, _templateObject14$8, _templateObject15$7, _templateObject16$4;
12756
+ var _templateObject$1d, _templateObject2$16, _templateObject3$Y, _templateObject4$S, _templateObject5$N, _templateObject6$A, _templateObject7$w, _templateObject8$u, _templateObject9$p, _templateObject10$m, _templateObject11$h, _templateObject12$b, _templateObject13$9, _templateObject14$8, _templateObject15$7, _templateObject16$5, _templateObject17$5;
11757
12757
  var DrawerTop = styled__default.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose([""])));
11758
12758
  var DrawerBottom = styled__default.div(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
11759
12759
  var theme = _ref.theme;
@@ -11765,25 +12765,25 @@ var DrawerHeader = styled__default.h2(_templateObject4$S || (_templateObject4$S
11765
12765
  });
11766
12766
  var CurrentUser = styled__default.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n\n ", ";\n"])), function (_ref3) {
11767
12767
  var theme = _ref3.theme;
11768
- return styled.css(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n ", ";\n "])), theme.colors.divider, theme.typography.global.mainMenu.identity);
12768
+ return styled.css(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n ", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.typography.global.mainMenu.identity);
11769
12769
  });
11770
- var UserOptions = styled__default.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n border-bottom: ", " 1px solid;\n"])), function (_ref4) {
11771
- var colors = _ref4.theme.colors;
11772
- return colors.divider;
12770
+ var UserOptions = styled__default.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n ", ";\n\n"])), function (_ref4) {
12771
+ var theme = _ref4.theme;
12772
+ return styled.css(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n "])), theme.styles.global.mainMenu.lines.backgroundColor);
11773
12773
  });
11774
- var Logout = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
11775
- var LinkMenu = styled__default.ul(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
11776
- var LinkMenuItem = styled__default.li(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
11777
- var IconWrapper$3 = styled__default.div(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n flex: 0 40px;\n width: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])));
11778
- var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref5) {
12774
+ var Logout = styled__default.div(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
12775
+ var LinkMenu = styled__default.ul(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
12776
+ var LinkMenuItem = styled__default.li(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
12777
+ var IconWrapper$3 = styled__default.div(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n flex: 0 40px;\n width: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])));
12778
+ var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref5) {
11779
12779
  var theme = _ref5.theme;
11780
- return styled.css(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n ", ";\n\n &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
12780
+ return styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n ", ";\n\n &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
11781
12781
  }, function (_ref6) {
11782
12782
  var theme = _ref6.theme,
11783
12783
  isActive = _ref6.isActive;
11784
- return isActive && styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active);
12784
+ return isActive && styled.css(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active);
11785
12785
  });
11786
- var LanguageMenu = styled__default.button(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: ", ";\n margin-top: auto;\n display: flex;\n flex-direction: row;\n\n border-top: ", " 1px solid;\n ", ";\n\n padding: 20px 10px 15px;\n align-items: center;\n width: 100%;\n"])), resetButtonStyles, function (_ref7) {
12786
+ var LanguageMenu = styled__default.button(_templateObject16$5 || (_templateObject16$5 = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: ", ";\n margin-top: auto;\n display: flex;\n flex-direction: row;\n\n border-top: ", " 1px solid;\n ", ";\n\n padding: 20px 10px 15px;\n align-items: center;\n width: 100%;\n"])), resetButtonStyles, function (_ref7) {
11787
12787
  var theme = _ref7.theme;
11788
12788
  return theme.fontFamily.ui;
11789
12789
  }, function (_ref8) {
@@ -11791,7 +12791,7 @@ var LanguageMenu = styled__default.button(_templateObject15$7 || (_templateObjec
11791
12791
  return colors.divider;
11792
12792
  }, function (_ref9) {
11793
12793
  var theme = _ref9.theme;
11794
- return styled.css(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n ", ";\n &:hover { ", "; }\n &:active { ", "; }\n "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover, theme.typography.global.mainMenu.subItem.active);
12794
+ return styled.css(_templateObject17$5 || (_templateObject17$5 = _taggedTemplateLiteralLoose(["\n ", ";\n &:hover { ", "; }\n &:active { ", "; }\n "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover, theme.typography.global.mainMenu.subItem.active);
11795
12795
  });
11796
12796
 
11797
12797
  var UserMenu = function UserMenu(_ref10) {
@@ -11801,8 +12801,14 @@ var UserMenu = function UserMenu(_ref10) {
11801
12801
  hasLogout = _ref10$hasLogout === void 0 ? true : _ref10$hasLogout,
11802
12802
  _ref10$logoutLink = _ref10.logoutLink,
11803
12803
  logoutLink = _ref10$logoutLink === void 0 ? '/logout' : _ref10$logoutLink,
12804
+ _ref10$logoutText = _ref10.logoutText,
12805
+ logoutText = _ref10$logoutText === void 0 ? 'Logout' : _ref10$logoutText,
11804
12806
  _ref10$hasCurrentUser = _ref10.hasCurrentUser,
11805
12807
  hasCurrentUser = _ref10$hasCurrentUser === void 0 ? true : _ref10$hasCurrentUser,
12808
+ _ref10$currentUserTex = _ref10.currentUserText,
12809
+ currentUserText = _ref10$currentUserTex === void 0 ? 'Current User' : _ref10$currentUserTex,
12810
+ _ref10$accountOptionT = _ref10.accountOptionText,
12811
+ accountOptionText = _ref10$accountOptionT === void 0 ? "Account Options" : _ref10$accountOptionT,
11806
12812
  _ref10$userSubmenu = _ref10.userSubmenu,
11807
12813
  userSubmenu = _ref10$userSubmenu === void 0 ? [] : _ref10$userSubmenu,
11808
12814
  userDrawerBespoke = _ref10.userDrawerBespoke,
@@ -11831,7 +12837,7 @@ var UserMenu = function UserMenu(_ref10) {
11831
12837
  closeOnClick();
11832
12838
  }
11833
12839
  }, [closeOnClick]);
11834
- return React__default.createElement(React.Fragment, null, React__default.createElement(DrawerTop, null, hasCurrentUser ? React__default.createElement(CurrentUser, null, React__default.createElement(DrawerHeader, null, "Current User"), loggedInUser) : null, userSubmenu.length > 0 ? React__default.createElement(UserOptions, null, React__default.createElement(DrawerHeader, null, "Account Options"), React__default.createElement(LinkMenu, null, userSubmenu.map(function (_ref11, index) {
12840
+ return React__default.createElement(React.Fragment, null, React__default.createElement(DrawerTop, null, hasCurrentUser ? React__default.createElement(CurrentUser, null, React__default.createElement(DrawerHeader, null, currentUserText), loggedInUser) : null, userSubmenu.length > 0 ? React__default.createElement(UserOptions, null, React__default.createElement(DrawerHeader, null, accountOptionText), React__default.createElement(LinkMenu, null, userSubmenu.map(function (_ref11, index) {
11835
12841
  var text = _ref11.text,
11836
12842
  href = _ref11.href;
11837
12843
  return React__default.createElement(LinkMenuItem, {
@@ -11843,7 +12849,7 @@ var UserMenu = function UserMenu(_ref10) {
11843
12849
  }))) : null, userDrawerBespoke ? userDrawerBespoke : null, hasLogout ? React__default.createElement(Logout, null, React__default.createElement(LinkMenu, null, React__default.createElement(LinkMenuItem, null, React__default.createElement(LinkMenuItemA, {
11844
12850
  onClick: logoutHandler,
11845
12851
  to: logoutLink
11846
- }, "Logout")))) : null), React__default.createElement(DrawerBottom, null, hasLanguage && React__default.createElement(LanguageMenu, {
12852
+ }, logoutText)))) : null), React__default.createElement(DrawerBottom, null, hasLanguage && React__default.createElement(LanguageMenu, {
11847
12853
  onClick: onLanguageToggle
11848
12854
  }, React__default.createElement(IconWrapper$3, null, React__default.createElement(Icon, {
11849
12855
  icon: 'Language',
@@ -11912,15 +12918,15 @@ var NotificationsHistory = function NotificationsHistory(_ref3) {
11912
12918
  return React__default.createElement(Container$Q, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
11913
12919
  };
11914
12920
 
11915
- var _templateObject$1g, _templateObject2$19, _templateObject3$$, _templateObject4$U, _templateObject5$P, _templateObject6$C, _templateObject7$y, _templateObject8$w, _templateObject9$q, _templateObject10$n, _templateObject11$i, _templateObject12$b, _templateObject13$a, _templateObject14$9;
12921
+ var _templateObject$1g, _templateObject2$19, _templateObject3$$, _templateObject4$U, _templateObject5$P, _templateObject6$C, _templateObject7$y, _templateObject8$w, _templateObject9$q, _templateObject10$n, _templateObject11$i, _templateObject12$c, _templateObject13$a, _templateObject14$9;
11916
12922
  var Container$R = styled__default.div(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n align-self: flex-start;\n height: 65px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n\n ", "\n"])), function (_ref) {
11917
12923
  var theme = _ref.theme,
11918
12924
  colors = _ref.theme.colors;
11919
- return colors && styled.css(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n background-color:", ";\n "])), colors.divider, theme.styles.global.mainMenu.background.backgroundColor);
12925
+ return colors && styled.css(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n // box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n background-color:", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
11920
12926
  });
11921
12927
  var SearchBar = styled__default.div(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n margin-left: 25px;\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
11922
12928
  var IconWrapper$4 = styled__default.div(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n flex: 0 40px;\n width: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])));
11923
- var SearchInput = styled__default.input(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n\n ", ";\n\n &::placeholder {\n font-style: italic;\n ", ";\n }\n"])), function (_ref2) {
12929
+ var SearchInput = styled__default.input(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n background: transparent;\n\n ", ";\n\n &::placeholder {\n font-style: italic;\n ", ";\n }\n"])), function (_ref2) {
11924
12930
  var theme = _ref2.theme;
11925
12931
  return theme.fontFamily.data;
11926
12932
  }, function (_ref3) {
@@ -11935,7 +12941,7 @@ var DrawerToggle = styled__default.button.attrs({
11935
12941
  type: 'button'
11936
12942
  })(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n width: 60px;\n margin: 0 5px;\n height: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n\n ", ";\n\n ", "\n"])), function (_ref5) {
11937
12943
  var theme = _ref5.theme;
11938
- return styled.css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid ", ";\n\n &:hover {\n border-bottom-color: ", ";\n }\n\n transition: border ", " ", ";\n "])), theme.colors.menu.indicator, theme.colors.menu.hover, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
12944
+ return styled.css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid transparent;\n /*", ";*/\n\n &:hover {\n border-bottom-color: ", ";\n }\n\n transition: border ", " ", ";\n "])), theme.colors.menu.indicator, theme.colors.menu.hover, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
11939
12945
  }, function (_ref6) {
11940
12946
  var isActive = _ref6.isActive,
11941
12947
  theme = _ref6.theme;
@@ -11949,14 +12955,14 @@ var Drawer = styled__default.div(_templateObject11$i || (_templateObject11$i = _
11949
12955
  var theme = _ref8.theme;
11950
12956
  return theme.styles.global.mainMenu.background;
11951
12957
  }, function (_ref9) {
11952
- var colors = _ref9.theme.colors;
11953
- return colors.divider;
12958
+ var theme = _ref9.theme;
12959
+ return theme.styles.global.mainMenu.lines.backgroundColor;
11954
12960
  }, function (_ref10) {
11955
12961
  var baseWidth = _ref10.baseWidth;
11956
12962
  return baseWidth ? baseWidth : "200px";
11957
12963
  }, function (_ref11) {
11958
12964
  var theme = _ref11.theme;
11959
- return styled.css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n right ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
12965
+ return styled.css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n right ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
11960
12966
  }, function (_ref12) {
11961
12967
  var isOpen = _ref12.isOpen;
11962
12968
  return isOpen && styled.css(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
@@ -11972,10 +12978,16 @@ var TopBar = function TopBar(_ref13) {
11972
12978
  hasLogout = _ref13$hasLogout === void 0 ? true : _ref13$hasLogout,
11973
12979
  _ref13$logoutLink = _ref13.logoutLink,
11974
12980
  logoutLink = _ref13$logoutLink === void 0 ? '/logout' : _ref13$logoutLink,
12981
+ _ref13$logoutText = _ref13.logoutText,
12982
+ logoutText = _ref13$logoutText === void 0 ? 'Logout' : _ref13$logoutText,
11975
12983
  _ref13$hasSearch = _ref13.hasSearch,
11976
12984
  hasSearch = _ref13$hasSearch === void 0 ? false : _ref13$hasSearch,
11977
12985
  _ref13$hasCurrentUser = _ref13.hasCurrentUser,
11978
12986
  hasCurrentUser = _ref13$hasCurrentUser === void 0 ? true : _ref13$hasCurrentUser,
12987
+ _ref13$currentUserTex = _ref13.currentUserText,
12988
+ currentUserText = _ref13$currentUserTex === void 0 ? 'Current User' : _ref13$currentUserTex,
12989
+ _ref13$accountOptionT = _ref13.accountOptionText,
12990
+ accountOptionText = _ref13$accountOptionT === void 0 ? 'Account Options' : _ref13$accountOptionT,
11979
12991
  _ref13$searchPlacehol = _ref13.searchPlaceholder,
11980
12992
  searchPlaceholder = _ref13$searchPlacehol === void 0 ? 'Search for devices, analysis tasks, etc.' : _ref13$searchPlacehol,
11981
12993
  _ref13$userSubmenu = _ref13.userSubmenu,
@@ -12038,7 +13050,10 @@ var TopBar = function TopBar(_ref13) {
12038
13050
  hasLanguage: hasLanguage,
12039
13051
  hasLogout: hasLogout,
12040
13052
  logoutLink: logoutLink,
13053
+ logoutText: logoutText,
12041
13054
  hasCurrentUser: hasCurrentUser,
13055
+ currentUserText: currentUserText,
13056
+ accountOptionText: accountOptionText,
12042
13057
  userSubmenu: userSubmenu,
12043
13058
  userDrawerBespoke: userDrawerBespoke,
12044
13059
  loggedInUser: loggedInUser,
@@ -12551,7 +13566,7 @@ var MobileNavbar = function MobileNavbar(_ref3) {
12551
13566
  })))));
12552
13567
  };
12553
13568
 
12554
- var _excluded$E = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "paddingOverride", "maxWidth", "children"];
13569
+ var _excluded$E = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "children"];
12555
13570
 
12556
13571
  var GlobalUI = function GlobalUI(_ref) {
12557
13572
  var content = _ref.content,
@@ -12561,6 +13576,7 @@ var GlobalUI = function GlobalUI(_ref) {
12561
13576
  logoText = _ref.logoText,
12562
13577
  supportUrl = _ref.supportUrl,
12563
13578
  defaultMenuOpen = _ref.defaultMenuOpen,
13579
+ canAlwaysPin = _ref.canAlwaysPin,
12564
13580
  paddingOverride = _ref.paddingOverride,
12565
13581
  maxWidth = _ref.maxWidth,
12566
13582
  children = _ref.children,
@@ -12576,7 +13592,8 @@ var GlobalUI = function GlobalUI(_ref) {
12576
13592
  logoMark: logoMark,
12577
13593
  logoText: logoText,
12578
13594
  supportUrl: supportUrl,
12579
- defaultMenuOpen: defaultMenuOpen
13595
+ defaultMenuOpen: defaultMenuOpen,
13596
+ canAlwaysPin: canAlwaysPin
12580
13597
  })), React__default.createElement(MainContainer, null, React__default.createElement(TopBar, Object.assign({}, _extends({}, props))), React__default.createElement(ContentArea, Object.assign({}, {
12581
13598
  maxWidth: maxWidth,
12582
13599
  paddingOverride: paddingOverride